javascript_tutorial

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

計中「多媒體與網路應用」資訊推廣課程 -JavaScript 網頁程式應用-:

計中「多媒體與 網路 應用」資訊推廣 課程 - JavaScript 網頁程式 應用 - 資訊工程學系 3A 彭博 涵 [email protected] 2011/03/26 1

課程大綱:

課程大綱 什麼是 JavaScript? JS Basic JS Object 2

什麼是JavaScript?:

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

Before learning JavaScript:

Before learning JavaScript HTML 4

HTML :

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

JS Basic:

JS Basic Where to Variable and data type Logic Popup box Functions Event 6

Where to:

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

Variable and data type:

Variable and data type Variable Data type 8

Variable:

V ariable v ar theName ; Case sensitive Begin with a letter or the underscore character 9

Data type:

Data type Primitive Numbers Strings Boolean composite datatype Function Object 10

Assign a data to variable:

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

Logic:

Logic Operators Comparisons if...else switch Loop 12

Operators:

Operators + - * / % demo 13

Comparisons:

Comparisons == != > < >= <= 14

if...else:

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

if…else(cont.):

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

if…else(cont):

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

switch:

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

Loop:

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

for loop:

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

while loop:

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

Popup box:

Popup box Alert Box Confirm Box Prompt Box 22

Alert Box:

Alert Box alert (" text "); demo 23

Confirm Box:

Confirm Box Confirm(“t ext "); return true or false demo 24

Prompt Box:

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

Functions:

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

Function (cont.):

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

event:

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

Do it yourself:

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

Object:

Object Array Date Math 30

Array:

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

Date:

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

Math:

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 33

Do it yourself:

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

參考資料:

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

Q&A:

Q&A 36

Thank you for listening -END-:

Thank you for listening -END- 37

authorStream Live Help