14.1 什么是JavaScript
14.1.1 JavaScript概念
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言。
14.1.2 JavaScript特點(diǎn)
是一種腳本編寫(xiě)語(yǔ)言；
基于對(duì)象的語(yǔ)言；
簡(jiǎn)單性；
安全性；
動(dòng)態(tài)性；
跨平臺(tái)性
14.2 編寫(xiě)第一個(gè)JavaScript腳本
文件范例：1401.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1401.html -->
<!-- 文件說(shuō)明：第一個(gè) JavaScript 腳本 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>第一個(gè) JavaScript 腳本</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
<SCRIPT LANGUAGE="JavaScript">
<!--
alert("Hello! JavaScript!");
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>第一個(gè) JavaScript 腳本。</h1>
</BODY>
</HTML>
顯示結(jié)果
14.3 JavaScript基本語(yǔ)法
14.3.1 常量和變量
文件范例：1403.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1402.html -->
<!-- 文件說(shuō)明：使用變量 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>使用變量</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
<SCRIPT LANGUAGE="JavaScript">
<!--
greeting="<h1>hello the world</h1>";
welcome="<p>Welcome to <cite>javascript</cite>.</p>";
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(greeting);
document.write(welcome);
//-->
</SCRIPT>
</BODY>
</HTML>
顯示結(jié)果
14.3.2 表達(dá)式和運(yùn)算符
文件范例：1403.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1403.html -->
<!-- 文件說(shuō)明： 表達(dá)式和運(yùn)算符 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>表達(dá)式和運(yùn)算符</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
a=(10>8)?"Coder":"Dream";
b=(10<8)?"Coder":"Dream";
document.write(a);
document.write("<br>");
document.write(b);
//-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
輸出結(jié)果
14.3.3 基本程序語(yǔ)句
1.if語(yǔ)句
文件范例：1404.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1404.html -->
<!-- 文件說(shuō)明： if 語(yǔ)句 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>if 語(yǔ)句</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
hour=13;
if (hour < 12){
document.write("Good morning");
} else if (hour < 18){
document.write("Good afternoon");
} else {
document.write("Good evening");
}
//-->
</SCRIPT>
</BODY>
</HTML>
輸出結(jié)果
2.for語(yǔ)句
文件范例：1405.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1405.html -->
<!-- 文件說(shuō)明： for 語(yǔ)句 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>for 語(yǔ)句</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
sum = 0;
for (i=0; i<6; i++ ) {
sum += 3;
}
document.write(sum);
//-->
</SCRIPT>
</BODY>
</HTML>
顯示結(jié)果
14.3.4 函數(shù)
文件范例：1406.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1406.html -->
<!-- 文件說(shuō)明： 使用函數(shù) -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>使用函數(shù)</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function f(y) {
var x = y * y;
return x;
}
//-->
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
x = 3;
y = f(x);
document.write(y);
//-->
</SCRIPT>
</BODY>
</HTML>
顯示結(jié)果
14.4 JavaScript的事件
14.4.1 使用事件的方法
文件范例：1407.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1407.html -->
<!-- 文件說(shuō)明： onClick 事件 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>onClick 事件</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" value="請(qǐng)單擊我" onClick=alert("你好！");>
</FORM>
</BODY>
</HTML>
顯示結(jié)果
14.4.2 其他常用事件
14.5 JavaScript的對(duì)象
14.5.1 Navigator對(duì)象
文件范例：1408.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1408.html -->
<!-- 文件說(shuō)明： Navigator 對(duì)象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Navigator 對(duì)象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('你使用的是' + navigator.appName + '<BR>' + navigator.appVersion);
//-->
</SCRIPT>
</BODY>
</HTML>
顯示結(jié)果
14.5.2 Window對(duì)象
常用 Window 對(duì)象的方法：
open(URL,windowName,parameterList): open方法創(chuàng)建一個(gè)新的瀏覽器窗口，并在新窗口中載入一個(gè)指定的URL地址。
close()：關(guān)閉一個(gè)瀏覽器窗口；
alert()：彈出一個(gè)消息框；
confirm()：彈出一個(gè)確認(rèn)框；
prompt()：彈出一個(gè)提示框；
文件范例：1409.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1409.html -->
<!-- 文件說(shuō)明： Windows 對(duì)象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Windows 對(duì)象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.open('pop.html', 'newwindow', 'height=400, width=400, top=100, left=100, toolbar=no, scrollbars=no, resizeable=no, location=no, status=no')
//-->
</SCRIPT>
</BODY>
</HTML>
文件范例：pop.html
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
這是一個(gè)彈出頁(yè)面！
</BODY>
</HTML>
顯示結(jié)果
14.5.3 Location對(duì)象
文件范例：1410.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1410.html -->
<!-- 文件說(shuō)明： Location 對(duì)象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Location 對(duì)象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" value="請(qǐng)單擊我" onClick="window.location.href='pop.html'">
</FORM>
</BODY>
</HTML>
顯示結(jié)果
14.5.4 Document對(duì)象
在document對(duì)象中主要有：links,anchor,form等3個(gè)最重要的對(duì)象；
錨 anchor 對(duì)象：指的是<a name=...></a>標(biāo)記在HTML源碼中存在時(shí)產(chǎn)生的對(duì)象，它包含著文檔中所有的anchors 信息。
鏈接 links 對(duì)象：指的是<a href=...></a>標(biāo)記鏈接一個(gè)超文本或超媒體的元素作為一個(gè)特定的URL。
窗體 form 對(duì)象：窗體對(duì)象是文檔對(duì)象的一個(gè)元素，它含有多種格式的對(duì)象信息，使用它可以在 JavaScript 腳本中編寫(xiě)程序進(jìn)行文字輸入，并可以用來(lái)動(dòng)態(tài)改變文檔的行為。通過(guò)document.forms[]數(shù)組使得在同一個(gè)頁(yè)面上有多個(gè)相同的窗體，使用forms[]數(shù)組要比使用窗體名字方便得多。
文件范例：1411.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1411.html -->
<!-- 文件說(shuō)明： Document 對(duì)象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Document 對(duì)象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<input type="type" onChange="document.my.elements[0].value=this.value;">
</FORM>
<form name="my">
<input type="text" onChange="document.forms[0].elements[0].value=this.value;">
</form>
</BODY>
</HTML>
文件說(shuō)明
第一個(gè)form中使用窗體my，第二個(gè)form使用窗體數(shù)組forms[]。
顯示結(jié)果
14.5.5 History對(duì)象
文件范例：1412.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1412.html -->
<!-- 文件說(shuō)明： History 對(duì)象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>History 對(duì)象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<input type="button" value="后退" onClick="history.go(-1)">
<input type="button" value="前進(jìn)" onClick="history.go(1)">
</FORM>
</BODY>
</HTML>
顯示結(jié)果
posted on 2008-06-04 09:29
CoderDream 閱讀(424)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
JavaScript