14.1 什么是JavaScript
14.1.1 JavaScript概念
JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語言。
14.1.2 JavaScript特點
是一種腳本編寫語言；
基于對象的語言；
簡單性；
安全性；
動態性；
跨平臺性
14.2 編寫第一個JavaScript腳本
文件范例：1401.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1401.html -->
<!-- 文件說明：第一個 JavaScript 腳本 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>第一個 JavaScript 腳本</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
<SCRIPT LANGUAGE="JavaScript">
<!--
alert("Hello! JavaScript!");
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>第一個 JavaScript 腳本。</h1>
</BODY>
</HTML>
顯示結果
14.3 JavaScript基本語法
14.3.1 常量和變量
文件范例：1403.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1402.html -->
<!-- 文件說明：使用變量 -->
<!-- ------------------------------------------------ -->
<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>
顯示結果
14.3.2 表達式和運算符
文件范例：1403.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1403.html -->
<!-- 文件說明： 表達式和運算符 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>表達式和運算符</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>
輸出結果
14.3.3 基本程序語句
1.if語句
文件范例：1404.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1404.html -->
<!-- 文件說明： if 語句 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>if 語句</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>
輸出結果
2.for語句
文件范例：1405.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1405.html -->
<!-- 文件說明： for 語句 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>for 語句</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>
顯示結果
14.3.4 函數
文件范例：1406.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1406.html -->
<!-- 文件說明： 使用函數 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>使用函數</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>
顯示結果
14.4 JavaScript的事件
14.4.1 使用事件的方法
文件范例：1407.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1407.html -->
<!-- 文件說明： onClick 事件 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>onClick 事件</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" value="請單擊我" onClick=alert("你好！");>
</FORM>
</BODY>
</HTML>
顯示結果
14.4.2 其他常用事件
14.5 JavaScript的對象
14.5.1 Navigator對象
文件范例：1408.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1408.html -->
<!-- 文件說明： Navigator 對象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Navigator 對象</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>
顯示結果
14.5.2 Window對象
常用 Window 對象的方法：
open(URL,windowName,parameterList): open方法創建一個新的瀏覽器窗口，并在新窗口中載入一個指定的URL地址。
close()：關閉一個瀏覽器窗口；
alert()：彈出一個消息框；
confirm()：彈出一個確認框；
prompt()：彈出一個提示框；
文件范例：1409.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1409.html -->
<!-- 文件說明： Windows 對象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Windows 對象</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>
這是一個彈出頁面！
</BODY>
</HTML>
顯示結果
14.5.3 Location對象
文件范例：1410.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1410.html -->
<!-- 文件說明： Location 對象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Location 對象</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML;CHARSET=UTF-8">
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" value="請單擊我" onClick="window.location.href='pop.html'">
</FORM>
</BODY>
</HTML>
顯示結果
14.5.4 Document對象
在document對象中主要有：links,anchor,form等3個最重要的對象；
錨 anchor 對象：指的是<a name=...></a>標記在HTML源碼中存在時產生的對象，它包含著文檔中所有的anchors 信息。
鏈接 links 對象：指的是<a href=...></a>標記鏈接一個超文本或超媒體的元素作為一個特定的URL。
窗體 form 對象：窗體對象是文檔對象的一個元素，它含有多種格式的對象信息，使用它可以在 JavaScript 腳本中編寫程序進行文字輸入，并可以用來動態改變文檔的行為。通過document.forms[]數組使得在同一個頁面上有多個相同的窗體，使用forms[]數組要比使用窗體名字方便得多。
文件范例：1411.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1411.html -->
<!-- 文件說明： Document 對象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>Document 對象</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>
文件說明
第一個form中使用窗體my，第二個form使用窗體數組forms[]。
顯示結果
14.5.5 History對象
文件范例：1412.html
<!-- ------------------------------------------------ -->
<!-- 文件范例： 1412.html -->
<!-- 文件說明： History 對象 -->
<!-- ------------------------------------------------ -->
<HTML>
<HEAD>
<TITLE>History 對象</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="前進" onClick="history.go(1)">
</FORM>
</BODY>
</HTML>
顯示結果
posted on 2008-06-04 09:29
CoderDream 閱讀(428)
評論(0) 編輯 收藏 所屬分類:
JavaScript