線上教材：WEB 程式設計

JavaScript 的主要用途是，可以在客戶端(就是你自己用來上網的那台電腦)上執行計算，以減少伺服器的負擔。其程式碼是用「script」標籤夾住，內嵌於 HTML 當中，並由瀏覽器來執行。以下是一個簡單的範例，我們經由 JavaScript 程式碼，在網頁上顯示「Hello World!!」：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>
document.write("Hello World!!");
</script>

</body></html>
JavaScript 是一個以物件為基礎的語言。因此幾乎所有的變數，在 JavaScript 中都是物件。物件通常會有一些性質(property)和方法(method)，與物件相關的函式通常會被定義成該物件的方法。在上述範例中，「document」是一個物件，代表這個文件(網頁)；「write」是該物件的一個方法，可以寫一些東西到文件當中。

我們也可以像 CSS 外部呼叫一樣，把「script」標籤中的 JavaScript 程式碼寫在另外一個檔案中。假設是寫在 abc.js 當中，則只要像這樣把檔案包含進來即可：
<script type="text/javascript" src="abc.js"></script>
例如，假設 abc.js 當中有以下內容：
function test(){
	alert("Hello~");
}
則在網頁中可以這樣呼叫：
<html>
<head>
	<script type="text/javascript" src="abc.js"></script>
</head>
<body bgcolor="#ccccff">

<input value="按我" type="button" onClick="test()">

</body></html>
在上述範例中，你可以發現 JavaScript 除了循序執行以外，也可以藉由某個事件(例如按下按鈕)來啟動。下面是另一個相似的範例，其中的「onClick」和「onMouseOver」，分別代表按下按鈕以及滑鼠經過的事件。其他各式各樣的事件，會在往後陸續提及。
<html>
<head></head>
<body bgcolor="#ccccff">

<input type="button" onClick="alert('Hello World!!');" value="來按看看">
<input type="button" onMouseOver="alert('Hello World!!');" value="滑鼠過來看看">

</body></html>
JavaScript 的變數，在不嚴謹的寫法中，可以不經宣告直接使用；而其資料型態，大致可分成三類：

基本型態：數字、字串、函數、...

組合型態：陣列、日期、數學(Math)、...

特殊型態：null、undefined

JavaScript 會自動把型態進行合理的轉換，我們可以利用「typeof」來得知變數的型別。其中，字串的單引號和雙引號在大部分情形下是互通的。並且如果在一種引號裡面出現另外一種，可以不必進行跳脫。
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

x = 123;
document.write("「x = 123」, x 的型別為: " + typeof(x) + "<br>");

x = '456';
document.write("「x = '456'」\", x 的型別為: " + typeof(x) + "<br>");

x = "789";
document.write("「x = \"789\"」, x 的型別為: " + typeof(x) + "<br>");

x = NaN; // Not A Number
document.write("「x = NaN」, x 的型別為: " + typeof(x) + "<br>");

function test(){
	// do nothing
}
document.write("「function test(){}」, test 的型別為: " + typeof(test) + "<br>");

document.write("「/*根本沒宣告*/」, abc 的型別為: " + typeof(abc) + "<br>");

var xyz;
document.write("「var xyz」, xyz 的型別為: " + typeof(xyz) + "<br>");

</script>

</body></html>
「null」是另外一種特殊型態：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

x = null;

document.write("「x = null」, x 的型別為: " + typeof(x) + "<br>");

document.write("「null」代表 "+ (null?"true":"false") + "<br>");

document.write("「x == null」: "+ (x==null) + "<br>");

document.write("「x == 0」: " + (x==0) + "<br>");

document.write("「x >= 0」: " + (x>=0) + "<br>");

</script>

</body></html>
其中，「==0」為 false 但「>=0」為 true，是因為這兩個運算符號在自動轉型時的規則不太一樣所導致。若各位有興趣熟悉，可自行尋找網路資料；若否，則應盡量避免型別上的混淆。

若希望讓使用者輸入資料後進行處理，其中一種方法是「prompt」：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

a = prompt("請輸入 a 值");
b = prompt("請輸入 b 值");
alert("a + b is: " + (a+b) );

</script>

</body></html>
(為什麼上述範例中，若將 a 和 b 值都輸入為 1 ，結果會出現"11"？如何解決？請繼續往下看～)

也可以取得表單的值：
<html>
<head>
	<script>
		function showName(lastName, firstName){
			alert("Hi, " + lastName + firstName + "!");
		}
		
		function showText(str){
			alert(str);
		}
	</script>
</head>
<body bgcolor="#ccccff">

<form>
	<input type="text" id="a" placeholder="姓">, 
	<input type="text" id="b" placeholder="名">
	<input type="button" value="按我顯示全名" onClick="showName(this.form.a.value, this.form.b.value)">
	<hr width="40%" align="left">
	
	<textarea id="c">test</textarea> <br>
	<input type="button" value="按我顯示 textarea 內容" onClick="showText(this.form.c.value)">
</form>

</body></html>
JavaScript 會把所有的數值用 double 來進行儲存與運算，儘管外觀看起來像是整數。JavaScript 另外也提供十六進位和八進位的表示法，但此處就不詳細介紹。以下是一些數學函式，以及字串與數字互轉的範例：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

br2 = "<br><br>";

document.write("「Math.exp ( 2 )」: " + Math.exp(2) + br2);

document.write("「Math.log ( 2 )」: " + Math.log(2) + br2);

document.write("「Math.pow ( 2, 3 )」: " + Math.pow(2, 3) + br2);

document.write("「Math.sin ( Math.PI / 2 )」: " + Math.sin(Math.PI/2) + br2);

document.write("「parseInt ( '1234abcd' )」: " + parseInt('1234abcd') + br2);

document.write("「parseFloat ( '0.0a' )」: " + parseFloat('0.0a') + br2);

document.write("「parseFloat ( 'test' )」: " + parseFloat('test') + br2);

document.write("「isNaN( parseFloat( 'test' ) )」: " + isNaN(parseFloat('test')) + br2);

x = 123;
y = x.toString();
document.write("y: " + y + ", typeof ( y ): " + typeof(y) + br2);

x = 35;
y = x.toString(2); /* 轉換成二進位數字的字串 */
document.write("y: " + y + ", typeof ( y ): " + typeof(y) + br2);

x = 123.4567;
y = x.toFixed(2); /* 轉換成小數點下兩位的字串 */
document.write("y: " + y + ", typeof ( y ): " + typeof(y) + br2);

</script>

</body></html>
關於字串的一些方法：
<html>
<head></head>
<body bgcolor="#ccccff">

<script>

br2 = "<br><br>";

str = "這是一枝筆。This is a pen.";

document.write("字串長度 str.length: " + str.length + br2);

document.write("變粗體 str.bold() : " + str.bold() + br2);

document.write("變斜體 str.italics() : " + str.italics() + br2);

document.write("變上標 str.sup(): " + str.sup() + br2);

document.write("換大寫 str.toUpperCase() : " + str.toUpperCase() + br2);

/* 帶入之參數為索引值 */
document.write("抽出字元 str.charAt(0) : " + str.charAt(0) + br2);

document.write("抽出字元 str[0] : " + str[0] + br2);

/* 從 2 開始拿 5 個字元 */
document.write("抽出子字串 str.substr(2 , 5) : " + str.substr(2, 5) + br2);

/* 從 2 開始拿到第 5-1 個字元 */
document.write("抽出子字串 str.substring(2, 5) : " + str.substring(2, 5) + br2);

/* 從頭找第一個出現 */
document.write("尋找字串 str.indexOf(\"i\") : " + str.indexOf("i") + br2);

/* 從尾找第一個出現 */
document.write("尋找字串 str.lastIndexOf(\"i\") : " + str.lastIndexOf("i") + br2);

</script>

</body></html>
JavaScript 還有其他許多將字串樣式改變的功能，此處就不一一介紹。