菠菜网官网

書名： JavaScript腳本特效編程給力起飛
作者名：茍英等編著
本章字數： 2041字
更新時間： 2019-06-19 18:08:57

2.1 JavaScript基礎語法

1. 注釋

JavaScript的代碼語句由一行中的一個或多個項和符號組成。分號是JavaScript的終止字符，大括號括起來的一組JavaScript語句稱為一個語句塊。單行的JavaScript注釋用“//”開始或者以“”結束。多行注釋以“/*”開始、以“*/”結束。例如：

alert("這是第一個JavaScript例子!");  //彈出一個對話框，并顯示“這是第一個JavaScript例子!”
<Script Language ="JavaScript">  /*彈出對話框，分別顯示alert后()里的內容*/
alert("這是第一個JavaScript例子!");
alert("歡迎你進入JavaScript世界!");
alert("今后將共同學習JavaScript知識！");
</Script>

顯示的效果如圖2-1所示。

圖2-1 歡迎示例

2. 數據類型

JavaScript有六種數據類型，主要的類型有number、string、object以及Boolean，其他兩種類型為null和undefined。下面是一些簡單的例子：

var str = "Hello, world";//字符串
  var i = 10;//整型數
  var f = 2.3;//浮點數
  var b = true;//布爾值

還有一種類型是對象類型，對象類型是一種復合的數據類型，其基本元素由基本數據類型組成，當然不限于基本類型，比如對象類型中的值可以是其他的對象類型實例。

3. 常量

在程序運行過程中，其值不能被改變的量稱為常量。常量可根據不同類型分為整型常量、實型常量、字符型常量等。

整型常量由整數表示，如123、-2000，也可以使用十六進制、八進制表示其值。實型常量是由整數部分加小數部分表示的，如123.45。

4. 變量

在JavaScript中，變量用來存放運行中的值。在使用變量之前，先使用var語句進行聲明。

下面是變量聲明的代碼示例：

var F = true;               // F中存儲的值為Boolean類型。

JavaScript是一種區分大小寫的語言，因此將一個變量命名為Name和將其命名為name是不一樣的。另外，變量的名稱長度可以是任意，但必須遵循以下規則：

■ 第一個字符必須是一個字母（大小寫均可）、一個下畫線（_）或一個美元符號（$）。

■ 后續的字符可以是字母、數字、下畫線或美元符號。

■ 變量名稱不能是保留字。

5. 運算符

JavaScript運算符包括算術、邏輯、位以及賦值運算符。

■ 算術運算符：-（負值）、++（遞增）、--（遞減）、*（乘法）、/（除法）、%（取模運算）、+（加法）、-（減法）。

■ 邏輯運算符：!（邏輯非）、<（小于）、>（大于）、<=（小于等于）、>=（大于等于）、==（等于）、!= （不等于）、&&（邏輯與）、||（邏輯或）、?: （條件“三元運算符”）、，（逗號）、===（恒等）、！==（不恒等）。

■ 位運算符：~（按位取反）、<<（按位左移）、>>（按位右移）、>>>（無符號右移）、&（按位與）、^ （按位異或）、|（按位或）。

6. 程序流程控制

程序經常在不同的情況下完成不同的事情，JavaScript也為各種可行性提供了解決方案，包括條件語句、多分支語句、循環語句。

■ if條件選擇語句

if(條件語句)
{
        執行語句
}

例2-1

<script language="javascript">
var x=2
if(x<3 && x>0 && x!=1)
{
alert("對");
}
</script>

效果如圖2-2所示。

圖2-2 條件語句

例2-2

格式1：變量 = 布爾表達式?語句1:語句2;

<script language="javascript">
var x=3
{
    x=x>5?'答對了,真聰明!':'答錯了,你真笨!';
    alert(x);
}
</script>

效果如圖2-3所示。

圖2-3 布爾表達式

格式2：

if(條件語句)
{
  執行語句塊1
}
else
{
  執行語句塊2
}

例2-3

<script language="javascript">
        var x=2
        if(x<3 && x>0 && x!=1)
        {
        alert("對");
        }
        else
        {
        alert("錯");
        }
</script>

效果如圖2-2所示。

例2-4

<script language="javascript">
        var x                //體會一下"x"為空（或等于"0"）和賦值后的區別
        if(x)
        {
        x=-x;
        alert(x);
        }
        else
        {
        alert("暈,空的!!")
        }
</script>

效果如圖2-4所示。

圖2-4 條件語句（否）

格式3：

if(條件語句)
{
  執行語句塊1
}
else if(條件語句2)
{
  執行語句塊2
}
...
else if(條件語句n)
{
  執行語句塊n
}
else
{
  執行語句塊n+1
}

例2-5

<script language="javascript">
        var x=5
        if(x>0 && x<10)
        {
            alert("x大于0并且x小于10");
        }
        else if(x<0 && x>-10)
        {
            alert("x小于0并且x大于-10");
        }
        else if(x<100 && x>10)
        {
            alert("x小于100并且x大于10");
        }
        else
        {
        alert("都不對");
        }
</script>

效果如圖2-5所示。

圖2-5 多條件語句

格式4：if語句的嵌套

例2-6

<script language="javascript">
        var x=0,y=5
        if(x<1)
        {
            if(y==1)
                  alert("x<1,y==1");
            else
                  alert("x<1,!=1");
        }
        else if(x>10)
        {
            if(y==1)
                  alert("x>10,y==1");
            else
                  alert("x>10,y!=1");
        }
</script>

效果如圖2-6所示。

圖2-6 條件語句嵌套

■ switch選擇語句

switch(表達式)
{
case取值1:
      語句塊1
    break;
...
case取值n:
      語句塊n
    break;
default:
      語句塊n+1
      break;
}

例2-7

<script language="javascript">
        var x=2
        switch(x)
        {
        case 1:
            alert("星期一");
            break;
        case 2:
            alert("星期二");
            break;
        case 3:
            alert("星期三");
            break;
        default:
            alert("不好意思,我不知道!");
        }
</script>

效果如圖2-7所示。

圖2-7 多分支語句（一）

例2-8

<script language="javascript">
        var x=5
        switch(x)
        {
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
            alert("工作日,不休息.");
            break;
        default:
            alert("休息日,太好了!");
        }
</script>

效果如圖2-8所示。

圖2-8 多分支語句（二）

■ while循環（判斷）語句

while(條件表達式語句)
{
    執行語句塊
}

例2-9

<script language="javascript">
        var x=1
        while(x < 3)  //這里不可加";"，否則將作為整個while語句的從句部分，成為空語句死循環
        {
        alert("x=" + x);
        x++;
        }
</script>

效果如圖2-9所示。

圖2-9 while循環語句

■ do-while語句

do
{
執行語句塊
}while(條件表達式語句)

例2-10

<script language="javascript">
        var y=5;
        do
        {
            alert("y=" + y); //雖然不成立，但還是要執行一次
            y++;
        }
        while(y<3) //上面執行完，然后再來檢測對錯
</script>

效果如圖2-10所示。

圖2-10 do-while循環語句

■ for循環語句

for(初始化表達式;循環條件表達式;循環后的操作表達式)
{
    執行語句塊
}

例2-11

<script language="javascript">
        var output = "";
        for(var x=1; x<10; x++)
        {
        output = output +" x=" + x; //等同于寫法:output+="x="+x;
        }
        alert(output);
</script>

效果如圖2-11所示。

圖2-11 for循環語句

例2-12

<script language="javascript">
        var output = "";
        var x=1;
        for(; ; ) //這樣就成為無限循環語句（等效于while(true)），需用下面的“break”跳出
        {
            if(x>=10)
            break;   //用于跳出上面的無限循環
            output+=" x="+x;
            x++;
        }
        alert(output);
</script>

效果如圖2-11所示。

■ break與continue語句

break語句：

例2-13

st:while(true)
{
while(true)
{
    break st;  //使用"st"可以退出標記指定的循環，不用標記則只退出里層循環
}
}

執行例2-13，使用“st”可以退出標記指定的循環，不用標記則只退出里層循環。

continue語句：

例2-14

<script language="javascript">
        var output="";
        for(var x=1; x<10; x++)
        {
        if(x%2==0)                      //如需輸出偶數，可寫成if(x%2!=0)
            continue;
        output=output + " x=" + x;      //或寫成:output+= " x=" + x;
        }
        alert(output);
</script>

顯示效果如圖2-12所示。

圖2-12 continue語句

從上面的知識點可以看出，JavaScript的語法相當簡單，對于一些有編程基礎的人來說，學習JavaScript真是一件非常輕松愉快的事。下面可以根據這些基本的語法寫一個跑馬燈效果的腳本。

<html>
<head>
<script Language="javascript">
var msg="這是一個跑馬燈效果的JavaScript文檔";
var interval = 100;
var spacelen = 120;
var space10=" ";
var seq=0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
    seq = spacelen;
    window.setTimeout("Scroll2();", interval );
}
else
window.setTimeout("Scroll();", interval );
}
function Scroll2() {
var out="";
for (i=1; i<=spacelen/space10.length; i++) out +=
    space10;
    out = out + msg;
    len=out.length;
    window.status=out.substring(seq, len);
    seq++;
    if ( seq >= len ) { seq = 0; };
    window.setTimeout("Scroll2();", interval);
}
Scroll();
</script>
<body>
</body>
</html>

將以上代碼存為HTML文檔后，用網頁的方式打開，在頁面最下方會以走馬燈效果的方式顯示“這是一個跑馬燈效果的JavaScript文檔”，如圖2-13所示。

圖2-13 跑馬燈效果

官术网_书友最值得收藏!

JavaScript腳本特效編程給力起飛

2.1 JavaScript基礎語法