中央大學電子計算機中心「多媒體與網路應用」資訊推廣課程 -JavaScript 網頁程式應用 -

資訊工程學系 3A 彭博涵 ph2.71828@gmail.com 2011/03/26 中央大學電子計算機中心「多媒體與網路應用」資訊推廣課程-JavaScript網頁程式應用-

課程大綱 • 什麼是JavaScript? • JSBasic • JS Object

什麼是JavaScript? • Not Java. • Interpreted language. • Enhance the interaction between web page and user. • Free!

Before learning JavaScript • HTML

HTML • <html> <head> …information about web apge… </head> <body> …content of the web page… </body> </html>

JSBasic • Where to • Variable and data type • Logic • Popup box • Functions • Event

Where to • in <body> • demo • in <head> • demo • in external files • demo

Variable and data type • Variable • Data type

Variable • var theName; • Case sensitive • Begin with a letter or the underscore character

Data type • Primitive • Numbers • Strings • Boolean • composite datatype • Function • Object

Assign a data to variable • var theName; • theName = 1900; • var myName = “Lemon Nineteen Hundred”; • var fullName = “Danny” + myName; • demo

Logic • Operators • Comparisons • if...else • switch • Loop

Operators • + • - • * • / • % • demo

Comparisons • == • != • > • < • >= • <=

if...else • if( condition ) { code to be executed if condition is true. } • demo

if…else(cont.) • if( condition ) { code to be executed if condition is true. } else { code to be executed if condition is false. }

if…else(cont) • if( condition A) { … code A … } else if( condition B) { … code B … } else { … code C … }

switch • switch( variable ) { case A: … code A… break; case B: … code B … break; default: … code C … } • demo

Loop • When you need to do some thing again and again and again and….. • for loop • while loop

for loop • for(initial a counter ; condition ; increment a counter) { …code… } • demo

while loop • while( condition ) { …code… } • demo

Popup box • Alert Box • Confirm Box • Prompt Box

Alert Box • alert("text"); • demo

Confirm Box • Confirm(“text"); • return true or false • demo

Prompt Box • prompt("text“ , "default value"); • return the input value or null • demo

Functions • A block of code for certain function • reuse • clearer • JavaScript function list • demo

Function (cont.) • function name( parameter1, parameter2,…) { …code block… return value; }

event • Movement can be detected by JavaScript • onclick • onfocus • onblur • onmousemove • Event Attributes • demo

Do it yourself • BMI計算器 • BMI算法：體重(kg) / 身高(m)的平方 • Hint : promt(“text”,”default text”);

Object • Array • Date • Math

Array • store multiple values in a single variable • Properties • length • Methods • concat() • pop() • push() • shift() • unshift() • reverse() • sort() • splice() • demo

Date • Methods • Set • setDate() • setFullYear() • setHours() • setMinutes() • setMonth() • setSeconds() • Get • demo

Math • Properties (Math constant) • PI • LN10 • E • Methods • abs(x) • round(x) , ceil(x) , floor(x) • max(x,y,z,...,n) , min(x,y,z,...,n) • random() • demo

Do it yourself • 樂透號碼產生器 • 規則: 從1~49號中選7個數字 • 將選出來的數字排序後顯示在螢幕上

參考資料 • http://www.w3schools.com/js/default.asp • JavaScript: The Definitive Guide 5th Edition • - O'Reilly Media • By David Flanagan • Learning Javascript 2nd Edition • - O'Reilly Media • By Shelley Powers

Q&A

Thank you for listening-END-

中央大學電子計算機中心「多媒體與網路應用」資訊推廣課程 -JavaScript 網頁程式應用 -