JavaScript 的歷史雖短,但卻發展迅速。最初NetScape開發了LiveScript語言，使得它的Navigator和Web 服務器產品有了基本的腳本編寫功能。當 Navigator 2.0中加入了Java小程序後，NetScape才把LiveScript變成了JavaScript，至此JavaScript誕生。
本文將以一個有趣的小程序為開端，介紹JavaScript的基本語法與功能。此趣味程序為小球碰撞仿真程序，它可仿真彈性碰撞和動能有損的不完全恢復碰撞。你若想了解此例程中的球間碰撞處理程序，需熟悉矢量的坐標旋轉和一些基本的物理學知識。如果你對此一竅不通，也沒什麼關系，因為對於小球之間的碰撞程序僅為幾個函數，你只管調用就是了，這並不影響我們對JavaScript 的學習。之所以要寫這樣一個帶點旁門左道的趣味例程，只是希望你對JavaScript多增加一分興趣。
廢話就不多說，現在開始吧。
第一步：材料的准備
制作兩張小球圖片，紅球 、藍球 各一張。圖片格式為 GIF。你可先用3D軟件制作出立體球圖片，然後再將其轉為GIF格式，這樣程序動畫會顯得更加逼真。需注意的是圖片背景一定要透明，不然就會讓人看出破綻。最後還需一張背景圖，圖片格式同上。
第二步：編寫主頁骨架
1. 在NetObject ScriptBuilder 中用New 命令生成一個HTML文件的骨架。順便在新生成的HTML文件中，將TITLE標志之間的文字改為"小球碰撞仿真演示程序"。
2. 加入背景圖案和小球圖片資源。
將BODY標志改為，此語句中的background 屬性指定window.gif 為背景圖案。
為加載小球圖片資源，在標志與間添加以下兩句
這兩句HTML腳本的含義完全相同，標志IMG用於加入圖片資源，其中SRC屬性指明加入的圖片文件名。ID屬性指出圖片的對象名稱，這是個重要屬性，因為以後在JavaScript 編程中要使用它。如第一句中，指明BallBlue為圖片資源的對象名稱（你可以把它想象成變量名）。STYLE屬性指明圖片在浏覽器中的風格，其中"position" 開關設為"absolute"，這樣圖片在窗口中的定位就可使用絕對坐標模式，而非文本行模式。
HTML 部分的編寫到此完成。接下來該用JavaScript 讓圖片動起來了。
第三步：編寫JavaScript 程序
1．仿真程序使用窗口對象的SetTimeout（）方法循環調用Move_Step()函數，達到移動圖片的目的，而Move_Step()根據速度矢量來計算移動一步的長度和方向。碰撞處理分為兩部分，第一是球對牆壁的碰撞處理，其處理函數為Ball_Crash_Wall()，第二是球體之間的碰撞處理，其處理函數為Ball_Crash_Ball()。還需設置一些碰撞標志變量，記錄當前碰撞狀態，以避免仿真誤差帶來的錯誤，也許現在你還不明白為什麼誤差會導致錯誤，不要緊，後面會慢慢告訴你。
2．圖片對象使用屬性 style.pixelLeft、style.pixelTop 指定圖片在窗口上的位
置，這兩個屬性是圖片運動的關鍵。不過在計算圖片移動位置時並不用它，而是用數組變量BallCoord 記錄圖片當前坐標位置，因為屬性 style.pixelLeft、style.pixelTop 是整型變量，而在計算碰撞中有小數生成，這樣如果直接用 style.pixelLeft、style.pixelTop 記錄位置，除了有誤差，最重要的是在窗口邊緣發生某些類型的球間碰撞時，會產生小球被撞出屏幕的錯誤。而數組變量可為浮點型，用於存放小數，從而避免了錯誤的發生。
（一）變量定義與程序的初始化
JavaScript 語句可放在HTML文件的主體（BODY區）中或文件頭（HEAD區）中，區別是HEAD 區一般擺放預制好的函數和全局變量，以供BODY區的語句調用，而BODY區一般放入程序初始語句。JavsScript 的變量定義比較自由，但仍需滿足先定義後使用的基本規則。
1．在HEAD區中定義全局變量：
Window_Top = 22 //窗口頂端位置。
Window_Left = 22 //窗口左端位置。
Window_Bottom = 294 //窗口底端位置。
Window_Right = 590 //窗口右端位置。
Setp_Proportion = 3.00 //速度放大比率。
BallCoord = new Array(new Array(2),new Array(2)) //定義一個二維數組，用於記錄兩球的當前坐標。
BallDiametre = new Array(66,92) //定義一維數組，存放兩球的直徑，其值分別為66和92。
BallMoveVector = new Array(new Array(2,1),new Array(1,-2))//定義一個二維數組，用於記錄兩球的速度向量，第二維分別存放X與Y軸的速度。
CrashingWall = new Array(new Array(false,false,false,false),new Array(false,false,false,false))//數組 CrashingWall 用於避免牆壁碰撞的二次計算,值為 true ,表明當前處於碰撞狀態。初值為 false。
2．在BODY區中完成程序的初始工作。其內容如下：
這裡你已經看見了一個JavaScript 程序的框架。標志SCRIPT 告訴浏覽器，下面的內容為腳本程序，用LANGUAGE="JavaScript" 指明程序語言為JavaScript。不管是在BODY區，還是HEAD區中，任何JavaScript程序必須放在 標志之間。程序中用 new Array（） 定義了一個數組Balls，以便以後存放圖片對象。接下來的語句Balls[0] = BallBlue 將圖片對象BallBlue 賦給Balls[0]，如果你細心，你會發現BallBlue正是加載圖片資源語句中指定的對象名。語句Balls[0].style.pixelTop = BallCoord[0][0] = 100，同時將值100賦給數組變量BallCoord[0][0]和圖片對象的style.pixelTop屬性。從而坐標數組變量BallCoord[0][0]得到了初值並且指定了球1的初始頂端位置。其余語句的含義雷同。最後一句調用函數Move_Step()將小球移動一步。
（二） 單步移動函數Move_Step()講解
在HTML文件的HEAD區中編寫Move_Step() 函數其內容如下：
function Move_Step() {
Ball_Crash_Ball() //調用球間碰狀處理函數
Balls_Crash_Wall(0) //調用藍球碰牆處理函數
Balls_Crash_Wall(1) //調用紅球碰牆處理函數
//計算移動步長
BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion
BallCoord[0][1] += BallMoveVector[0][1] * Setp_Proportion
BallCoord[1][0] += BallMoveVector[1][0] * Setp_Proportion
BallCoord[1][1] += BallMoveVector[1][1] * Setp_Proportion
//移動一步
Balls[0].style.pixelTop = BallCoord[0][0]
Balls[0].style.pixelLeft = BallCoord[0][1]
Balls[1].style.pixelTop = BallCoord[1][0]
Balls[1].style.pixelLeft = BallCoord[1][1]
window.setTimeout("Move_Step()",100) //100毫秒後再次調用Move_Step()函數
}
該函數的大部分含義，你可看其中的注釋，這裡只對幾點加以說明。
1在語句BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion中， BallMoveVector數組存放著速度向量。Setp_Proportion 變量存放步長放大比率，BallMoveVector[0][0] 乘以Setp_Proportion 得到移動一步的長度。最後該語句加上BallCoord[0][0]原值後再賦給BallCoord[0][0]本身，得到移動位置。
2．語句window.setTimeout("Move_Step()",100) 表示100毫秒後再次調用Move_Step()函數。現在有了setTimeout（）方法，程序就不斷的循環起來了。
Ball_Crash_Ball()是小球之間的碰撞處理函數， 你只管調用就是了，如果你不使用它，程序一樣能運行，只是少了處理球間碰撞的功能。（在Ball_Crash_Ball()函數中調用了函數CrashEnd_Speed() 與atan360(x,y)，以及使用了全局變量CrashingBalls，因而要正確使用它，必須將以上所說的函數與變量都拷入你的程序中）
（三） 在HEAD區中編寫牆壁碰撞處理函數Balls_Crash_Wall()
一個簡化的函數如下：
function Balls_Crash_Wall(i) {
if( BallCoord[i][0] <= Window_Top)
BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i][1] <= Window_Left)
BallMoveVector[i][1] = - BallMoveVector[i][1]
if ( BallCoord[i][0] + BallDiametre[i] >= Window_Bottom)
BallMoveVector[i][0] = - BallMoveVector[i][0]
if ( BallCoord[i][1] + BallDiametre[i] >= Window_Right)
BallMoveVector[i][1] = - BallMoveVector[i][1]
}
函數首先判斷是否球已經碰到了牆壁，如是就將相應方向上的速度方向反向，而大小不變。但這個函數有可能發生錯誤（錯誤發生的原因有些復雜，這裡只梢作提示。由於小球移動的步長往往大於1個點，而仿真又是離散進行的，從而在有些情況下會發生錯誤）。需用數組變量CrashingWall 來標識碰撞狀態，使得小球與牆壁處於碰撞狀態時不能再發生第二次小球與牆壁的碰撞，相應的語句也要更改，如第一句改為
if( BallCoord[i][0] <= Window_Top)
{ if (!CrashingWall[i][0]) { BallMoveVector[i][0] = - BallMoveVector[i][0] }
CrashingWall[i][0] = true
} else CrashingWall[i][0] = false
語句中CrahingWall數組的類型為邏輯型，記錄球與牆壁是否正在發生碰撞。當為碰撞狀態時，就不必再將球的運動方向反向。
到此程序的編寫基本完成，其它詳細內容見光盤的原程序及說明。現在在NetObject ScriptBuilder 中選擇菜單Preview 項，運行程序。
附注：
1. 運行本例程需先安裝IE4.0以上浏覽器 或Netscape Navigator 4.0以上浏覽器
2. 球間碰撞處理提示：當兩球發生碰撞時，計算兩球圓心連線與X軸的夾角。在依據此夾角對坐標進行旋轉。將原速度矢量映射到旋轉後的坐標中。從而將球間的任意碰撞轉變為正對心碰撞。用沖量定理可推出碰後的速度計算公式。然後再將坐標旋轉成原始坐標。可得碰撞後的速度矢量。看了上面的文字是不是有些煩人，其實並非如此，程序中只用了11行語句就完成了全部計算。