Download
3a ph2 71828@gmail com 2011 03 26 n.
Skip this Video
Loading SlideShow in 5 Seconds..
中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 - PowerPoint Presentation
Download Presentation
中央大學電子計算機中心 「 多媒體與 網路 應用」資訊推廣 課程 -JavaScript 網頁程式 應用 -

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

136 Views Download Presentation
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

  4. Before learning JavaScript • HTML

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

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

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

  8. Variable and data type • Variable • Data type

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

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

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

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

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

  14. Comparisons • == • != • > • < • >= • <=

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

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

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

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

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

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

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

  22. Popup box • Alert Box • Confirm Box • Prompt Box

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

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

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

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

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

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

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

  30. Object • Array • Date • Math

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

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

  33. 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

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

  35. 參考資料 • 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

  36. Q&A

  37. Thank you for listening-END-