javascript編程起步（第一課）
不管你以前學沒有學過javascript，本教程都能帶您進入javascript的殿堂，領悟javascript的魅力。
? 大家來到這里，都是javascript的愛好者，對javascript都多多少少有一定的理解。關于javascript
的歷史等就不做介紹了，我們直接來學習它，用它。
? 也許大部分人都認為javascript是在客戶端運行的，其實不然。javascript有兩種不同的運行環境，
一個是在服務器端的javascript，另一個就是客戶端的javascript了。還有就是javascript也是面向對象
的語言。
? 作為第一課，只是給大家一個簡單的認識，東西不是太多。主要有以下三個方面：
? 1、在頁面添加javascript
? 2、javascript的數據類型
? 3、javascript最基本的三個對話框

? 關于怎么添加javascript，我想大家都知道，就是
? <script language="javascript">?? //這行是javascript腳本標記，斜杠后面的就是注釋了
? document.write("在頁面顯示的javascript") //在頁面顯示一句話
? </script>
? /*這也是注釋，
??? 不過是多行的。
? */
? 我想這個今天就不細講了，留到下一課講，就當是這課的作業吧，就是關于適應各種環境的javascript
的添加。如不支持javascript的瀏覽器，我們該加入些什么才能不讓瀏覽器顯示javascript的源代碼等等。

? 第二個也就是今天講的最重要的一個，就是javascript的數據類型，主要有以下幾個基本的類型。
? 字符串（string）
? 數字（number）
? 布爾值（boolean）
?
? 字符串就是由一連串的字符組成的序列。包括字母、數字以及標點符號。當然還可以是漢字等。簡單一點
就是表示文本信息。

? 數字又分為兩類：整型數字和浮點型數字。
? 整數包括正整數，零和負整數。

? javascript中的數字可以使用十進制、八進制和十六進制來書寫。方法如下：
? 十進制：15（直接寫數字即可）
? 八進制：017（要以零做為引導數字）
? 十六進制：0xf（要以0x做為引導數字）

? 浮點型數字也叫實數，為了方便，也可以使用科學記數法來表示：
? 1.13e1、1.5e3（等價于1.5乘10的3次方）
? javascript的數字范圍大約為10的負308次方到10的308次方之間。
? javascript中還有一個特殊的數字值NaN（not a number），javascript 用nan表示這個無意義的結果。

? 布爾值：true和false，在計算機中一般用1表示true，用0表示false。

? 空值就是null，即不表示任何東西。
? 未定義值undefined，有時等于null，有時可能是出了問題。
? 特殊字符：也叫轉義字符。是一些以反斜杠開頭的不可顯示的特殊控制字符。
? \b:表示退格
? \n:表示換行
? 等等。

? alert()方法的使用：
? <script language="javascript">
? alert("在頁面上顯示警告對話框");
? </script>
? alert()是javascript產生一個帶確認按鈕的對話框，上面顯示括號內的信息。

? confirm()方法的使用：
? <script language="javascript">
? confirm("在頁面上顯示確認對話框");
? </script>
? confirm()和alert()差不多，不同的就是多了個取消按鈕。按確定返回true，按取消返回false。
? <script language="javascript">
? var con;
? con=confirm("你們喜歡這樣的教程嗎？");
? if (con==true) alert("喜歡");
? else alert("不喜歡");
? </script>

? prompt()方法的使用：
? <script language="javascript">
? var name,age;
? name=prompt("請問您的名字？");
? alert(name);
? age=prompt("多大？");
? alert(age);
? </script>
? 它不但可以顯示信息，而且可以輸入信息。
----------------------------------------------------------------------------------------
javascript編程起步（第二課）

關于上課的作業，大家都知道，代碼如下：
? <script language="javascript">
? <!--
? 代碼
? //-->
? </script>
? 這兒補充一點內容，還可以告訴讀者這兒是javascript代碼，該瀏覽器不支持。
? <noscript>
? 在瀏覽器不支持的時候顯示這句話
? </noscript>
? 今天我們主要學習的內容有以下幾塊：
? 1、javascript變量
? 2、javascript表達式和運算符

? 可以用var加上為變量指定的名稱來聲明變量，變量類型可以通過給變量賦值來確定。由于javascript采用的是弱類型的樣式，對數據類型要

求不太嚴格，在程序執行的過程中，會根據需要自動轉換。
? 對于字符串變量，可以通過“變量名.length”來獲得該變量中字符串的長度，如
? var name;
? name="javascript";
? 那么name.length的值就是10。

? 若在一行中創建多個變量時，記住用逗號來隔開變量名。各語句用分號隔開。(使用分號是個好習慣, 大家在學習的時候盡量養成加分號的習

慣)
?
? 類型轉換：javascript允許在程序中改變變量的類型，最常見的兩個類型轉換符Number和String。
? Number(x)是字符型值——〉數字值型。String與之相反。相對于javascript的自動類型轉換，可以將這種轉換成為強制類型轉換。（強制類

型轉換需要在javascript1.2及以上版本才可以使用）

? 變量的命名：

? 1.必須以字母或下劃線開頭，中間可以有字母數字和或下劃線。不能使用空格、+、-等其他符號。
??? 作為連字符外，變量名稱不能有空格、（＋）、（－）、（，）或其它符號。
? 2.不能使用JavaScript中的關鍵字作為變量。
? （javascript變量名是區分大小寫的，name和Name是不一樣的。）

? 對于變量還有一個重要性──那就是變量的作用域。在JavaScript中同樣有全局變量和局部變量。全局變量是定義在所有函數體之外，其作

用范圍是整個函數；而局部變量是定義在函數體之內，只對其該函數是可見的，而對其它函數則是不可見的。

? 例子：
<script>
var myStr = "我是全局變量";
function getStr1(){
???? var myStr = "我是局部變量";
???? alert (myStr);
}
function getStr2(){
???? alert (myStr);
}
getStr1();
getStr2();
// 測試會彈出兩個提示框，第一個提示“我是局部變量”，第二個提示“我是全局變量”
</script>

? 表達式：在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常由表達式來完成，可以說它是變量、常量、布

爾及運算符的集合，因此表達式可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等。
?

? 運算符：

? 1.算術運算符：+（加） 、-（減）、 *（乘）、 /（除）、 %（取模） -（取反）、
??????????? ++（遞加1）、--（遞減1）。
??????????? 例：11%2=1 ； 如果x=2?? ++x+4=7???? x+++4=6
????????? （++x是先執行加1，x++是執行完語句之后x在自加1
例子：

<script>
var i=0, j=0;
alert(i++ + " " + ++j + " " + i);
// 輸出 “0 1 1”，可見i++是先輸出了i，然后進行運算，而++j是先對j進行了自加運算，然后輸出j的值
</script>
）
? 2.比較運算符：<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)
????????? （基本操作過程是，首先對它的操作數進行比較，然后再返回一個true或False值。）
? 3.邏輯運算符：!（取反)、&=（與之后賦值）、 &（邏輯與）、 |=（或之后賦值）、 |（邏輯或）、
??????????? ^=（異或之后賦值）、 ^（邏輯異或）、 ?:（三目操作符）、||（或）、&& （與）
??????????? ==(等于)、|=(不等于)。
? 4.字符串運算符：只有+?? （”my“+”javascript“結果等于”my javascript“）
? 5.賦值運算符：即=，將右邊的值賦給左邊的變量。
? 6.條件運算符：（？：）
??????????? 例：status=(age>=18)?"adult":"child";如果大于18，則表達式的值為adult。
? 7.typeof()運算符：用來返回變量或數據的類型。

?

作業：試試能不能做個最最最最簡單的計算器？
??? （就是我可以輸入兩個數和一個運算符號，就得出計算結果。結合上一課的prompt()）
答案：
<script language="javascript">
function yunshuan(a,op,c)
{
try{
? eval("result=a"+op+"c");
? return result;
}
catch(e){
? alert("Some error occur");
}
}
function main(){
var a,b,c;
a=parseInt(prompt("請輸入第一個數"));
op=prompt("請輸入運算符");
c=parseInt(prompt("請輸入第二個數"));
alert("the result is :" + yunshuan(a,op,c));
}

</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript編程起步（第三課）

第三課終于和大家見面了, 大家要感謝 Actions 的辛勤勞動啊, 好好利用論壇給大家提供的資源和教程, 希望大家一起學習提高 :D
大家有什么意見, 建議或者想法, 可以到本版的教程問答區 或 站務管理版的 建議或意見 去發表, 我們會及時給您反饋 :)

下面是今天的學習重點：
A.補充上課的變量內容
B.if語句的基本語法
C.window.com()基本用法

A.變量
1.變量的類型規則
javascript是無類型的，他的變量可以放任何數據類型的值。
2.變量的聲明
在javascript程序中，在使用變量之前，必須先聲明它。變量是使用關鍵字var聲明的。而實際上，不一定要先聲明變量，在某些情況下，變量

聲明是可選的。
var i；
var sum；
也可以使用一個var關鍵字聲明多個變量；
var i，sum；
而且還可以將變量聲明和變量初始化綁定在一起：
var message = 'hello'；
var i = 0，j=0，k=0；
由var聲明的變量是永久的，因為各瀏覽器對是否可以刪除全局性的變量的態度是不同的，（都可以刪除局部變量）為了安全，最好假設全局變

量不可刪除。
可以使用var多次聲明同一個變量
當你給一個沒有聲明的變量賦值時，js會自動用哪個變量為你創建一個全局變量。
如果你想在函數內部創建一個局部變量。那就必須用var在函數內部聲明。
3.變量的作用域
如果局部變量和全局變量重名，則局部變量優先。js沒有塊級作用域。函數中聲明的所有的變量，作用域是相同的。
var x；//聲明一個未賦值的變量，他的值是undefined。
alert（u）; //使用未聲明的變量將引發錯誤。
u=3；//給一個未聲明的變量賦值將會創建該變量。
4.原始類型和引用類型
var a=3.14；//原始類型
var b=a；//引用類型

B.if語句

if (條件)
語句段１
else
語句段２

　功能：若表達式為true，則執行語句段１；否則執行語句段２。

　說明：
if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執行順序。
表達式中必須使用關系語句，來實現判斷，它是作為一個布爾值來估算的。
它將零和非零的數分別轉化成false和true。
若if后的語句有多行，則必須使用花括號將其括起來。

例子
if (age < 16 )
???? alert("小朋友");
else
???? alert("成年人");
end if

if語句的嵌套
if (布爾值) 語句１；
else if (布爾值) 語句２；
else if (布爾值) 語句３；
else 語句４；
在這種情況下，每一級的布爾表述式都會被計算，若為真，則執行其相應的語句，否則執行else后的語句。

C.window.com()的用法
? 1、基本語法
? window.open(pageURL,name,parameters)
? 其中：
??? pageURL 為子窗口路徑
??? name 為子窗口句柄
??? parameters 為窗口參數(各參數用逗號分隔)
? 例：
????? <SCRIPT LANGUAGE="javascript">
????? <!--
????? window.open ('url') //url為一網址，如：http://www.numb1.com（絕對） 或 index.htm相對）
????? -->
????? </SCRIPT>
? 2. 窗口參數
? 其中yes/no也可使用1/0；value為具體的數值，單位象素。
? toolbar=yes,no 是否顯示工具條
? location=yes,no 是否顯示網址欄
? directories=yes,no 是否顯示導航條
? status=yes,no 是否顯示狀態條
? menubar=yes,no 是否顯示菜單
? scrollbars=yes,no 是否顯示滾動條
? resizable=yes,no 是否可以改變公告窗口大小
? copyhistory=yes,no 是否顯示歷史按鈕
? width=value 公告窗口的寬
? height=value 公告窗口的高
? left=value 公告窗口的左上頂點距屏幕左邊100像素
? top=value 公告窗口的左上頂點距屏幕頂端100像素
? 例：
<script language="javascript">
<!--
window.open("http://www.sina.com.cn","newwindow",

"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,le

ft=100,top=100")
//-->
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript編程起步（第四課）

前一段有人給我說，第二課就看不明白了，我不知道是不是寫的太籠統了，不夠細致，還是其他的，有什么問題，大家給提出來，當然我也不

是什么js高手，只不過想把愛好者領進門而已。希望大家多多參與。
今天的主要任務就是for循環。另外就是數據類型。既for in（現在還沒有講數組和對象，先了解一下）。

數據類型的轉換：
如果運算的數據類型不是一樣的話，js腳本會盡力執行內部轉換來解決，但js不了解你的心思。所以得到的結果可能和你想要的不一樣。
em：
? 3+3?? // result=6
? 3+"3"?? // result="33"

將字符串轉換為數值：
javascript語言提供兩個內置函數將表示數值的字符串轉換為真實的數值：parseInt()和parseFloat()。
為了使用這些函數，需要將進行轉換的字符串作為參數傳入函數，例：
parseInt("42")???? //result=42
parseInt("42.33")?? //result=42
不過是浮點數還是整數，函數返回的值都是整數。不存在四舍五入，小數點和它后面的數字將被舍棄。
而parseFloat()則返回浮點數（如果是整數就返回整數），例：
parseFloat("42")?? //result=42
parseFloat("42.33") //result=42.33
如果在某處需要進行字符串的轉換，只需將函數插入該初即可。如：
3+3+parseInt("3")?? //result=9

將數值轉換為字符串：
雖然當遇到表達式中含有混合數據類型時，js會傾向于字符串。但為了防止潛在的問題發生，最好先轉換以下。在數值中加入空字符串就可以

把數值轉換為字符串了：
(""+2500)???????? //result="2500"
(""+2500).length?? //result=4

for:
javascript中最常用的循環結構稱之為for循環，關鍵詞放在循環結構的開始位置。正式語法結構如下：
for ([initial expression];[condition];[update expression]){
? statement[s] inside loop
}
例：
for(var i=0;i<9;i++)
{
n+=i
myfunc(n)
}
for...in:
這個語句完全依照變量var所設定的值決定運行次數。你可以用for...in語句在一個對象或一個數組上建立循環
for(var in [obj | array])
{
statements
}
例：
<script language="javascript">
document.writeln("The properties of the document object")
for(var element in document){
document.writein(element+"="+document[element])
}
</script>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript編程起步（第五課）

鼠標事件（上）

? 隨著課程的進行，能跟著下來的人是越來越少了，不知道是不是因為沒有太多的表現，只是死記的東西，大家都沒有興趣啊。其實網頁上

的很多特效，動作大都是用javascript來實現的，沒有javascript的網頁，就象一個人沒有了肌肉一樣。但是所有的動作都是有函數來控制的

，而控制語句是基礎中的基礎。希望大家能耐心的學下去。今天的課程就輕松一下，學習點能見到效果的。
主要內容就是基于鼠標的事件,有如下幾種：
1.mouseover（鼠標移至）
2.mouseout（鼠標移出）
3.mousemove（鼠標移動）
4.mousedown（鼠標按下）
5.mouseup（鼠標彈起）
6.click（單擊）
7.dblclick（雙擊）

? 通常1和2組合起來使用，當用戶把鼠標移動到一個超鏈接或者其他元素時，mouseover事件就會發生，mouseout總會伴隨著它，因為當鼠標

離開時，mouseout事件就會發生。
? 例子：
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字體樣式有什么變化</p>
</body>
</html>

? 這里定義了兩個函數，來使字體改變樣式。關于函數我們以后會詳細的講解。
（注意：ie對頁面上的所有元素都支持mouseover和mouseout事件，但對于netscape navigator來說，只有超鏈接和層支持這兩個事件。）

下面看鼠標移動的例子：
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}

function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value || e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}

function micro$oftMouseMove() {
if (window.event.x != document.test.x.value || window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
鼠標移動的事件在鼠標跟隨效果的使用上比較多，大家可以看看鼠標跟隨特效。網上n多。
（需要注意的是：啟動這個事件處理過程存在一個問題，就是它有可能會屏蔽其他事件。另外還增加了頁面的處理時間，應盡量少用。）

先說到這兒吧，下節講鼠標的另外4個事件。

今天的作業是：
1.圖片鏈接的轉換（當鼠標放上去時是一個圖片，當鼠標離開時是另外一個圖片）
2.圖片跟隨鼠標（當鼠標移動時，會有個圖片跟隨著鼠標一起移動）
1題答案：
<html>
<body>
<script language="javascript">
?? function change()
?? {
?????? //document.test.tupian.src="1.bmp";用test和form[0]都可以
??? document.form[0].tupian.src="1.bmp";
?? }
?? function changeback()
?? {
?????? //document.test.tupian.src="2.bmp";
??? document.form[0].tupian.src="1.bmp";
?? }
</script>
<form name="test">
<a name="aa" href="http://www.xxx.com" onmouseover="change();" onmouseout="changeback();"><img name="tupian"

src="3.jpg"/></a>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------
javascript編程起步（第六課）

mouseDown事件和mouseUp事件
?

大家知道，mouseDown事件和mouseUp事件的組合就是click事件，但是如果在鏈接上按下鼠標，并移到鏈接之外在放開鼠標，那么就只有mouseD

own事件了。這兩個事件可以增加圖標按鈕的圖像效果，
? 至于mouseDown和mouseUp的屬性，它們是伴隨著Click事件發生的，這和keyPress事件是keyDown事件和keyUp事件組合而成的機制是一樣的

，這3個鼠標事件也有modifier屬性。
? （注意：如果在onClick事件處理中使用return語句，它可以接收任何數值。只要這個值不是False，瀏覽器就可以完成提交。但如果瀏覽

器得到的是False值，表單提交操作就會被取消。）

Click事件和dbClick事件
? onClick是單擊事件，onDblClick是雙擊事件，而實際上很難分清連續的單擊和雙擊。它們會互相干擾。而且在ie和其他瀏覽器的情況還有

不同。有的瀏覽器是雙擊事件的每一次單擊都會觸發單擊事件，而在ie中，只有雙擊事件的第一次單擊會觸發單擊事件。不管怎么樣，單擊事

件都不會自動的取消或被忽略。因此，如果想使用單擊和雙擊一個鏈接時觸發兩個完全不同的過程，則必須通過編程來延遲單擊的動作知道雙

擊。

例：
<script>
var timer=null;
document.onclick=new Function("timer=setTimeout(click,500)")
document.ondblclick=new Function("clearTimeout(timer);dblclick()")
function click(){
alert("click")
}
function dblclick(){
alert("dblclick")
}
</script>

解釋：
new Function("timer=setTimeout(click,500)")
新建一個函數，內容為
timer=setTimeout(click,500)
setTimeout(函數或語句，時間以毫秒為單位)
用于設置某函數或語句在某時間后執行，……
clearTimeout(timer);
清除設置，

? 在高版本的瀏覽器中，鏈接的這兩種事件處理程序都監視那些使得腳本阻止鏈接的特殊行為。
? 例如：在想要的導航到另一個頁面之前進行某些數據項的確認，如果某些域填得不正確，可以提醒并終止鏈接。要實現這種確認，必須在

事件處理程序得最后一條語句或者事件處理程序自身返回True或False。如果返回False就終止鏈接。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript編程起步（第七課）

過年到現在一直都比較忙,辜負大家了.
今天就學習函數吧,雖然語句還沒有說完.

函數是javascript語言的一個很重要的內容,但也很復雜.
下面來看看javascript函數.
函數是有function加函數名和一對帶有參數括號,以及大括號組成的，其中大括號里是
主體javascript語句.
例:
function hanshuname(js) //hanshuname是函數名.
{
document.write(js,"<br>"); //是函數的主體語句.
}
函數可以嵌套,如下:
function qiantao(a,b){
function lqiantao(x){return x*x;}
return Math.sqrt(lqiantao(a)+lqiantao(b));
}
函數還可以作為數據來應用,因此可以象處理其他數據那樣來處理函數,如:賦值,存儲,傳遞等.
例:
function zhi(x){return x*x;}
實際上,函數名沒有什么意義,不過是保存函數的變量名而已.
a=zhi(6);//a存放的是數字36;
b=zhi;//現在b和zhi引用同一個函數.
c=b(5);//c存放的是數字25.
在一個函數體內,標識符arguments總是具有特殊含義,它是調用對象的一個特殊屬性,用來引用實際參數對象.這個實際參數對象具有大量有用的

屬性.除此之外,它還兼有數組的角色.
盡管定義javascript函數時都有固定的參數，但調用這個函數時,傳遞給它的參數數目卻可以是任意的，數組arguments[]允許完全存取那些實

際參數值.另外,arguments有一個length屬性,看如下例子:
function zhi(x,y,z)
{
if(arguments.length !=3){
alert("function zhi called with"+arguments.length+"arguments,but it expects 3 arguments.");
return null;
}
}
數組arguments[]還為javascript函數開發了一項重要的可能性,既可以將函數編寫為能夠接受任意數目的實際參數.
function zhi()
{
var m=Number.NEGATIVE_INFINITY;
//遍歷所有參數
//檢索并記憶最大的一個.
for(var i=0;i<arguments.length;i++)
if(arguments>m)m=arguments;
//返回最大的參數值.
return m;
}
var lazgest=zhi(1,10,100,2,3,1000,4,5,10000,6);
也可以使用arguments[]數組來編寫一個函數.

調用js函數
<a href=”#” onClick=”functionName()”>Link text</a>
<a href=”javascript:functionName()”>Link text</a>
今天先說到這兒吧,下節繼續說函數.