Java Script Java Script Java Script Introduction Java

Java. Script 簡介 Java. Script Introduction �在了解 Java. Script 前您必須先了解 �HTML 與 CSS �何謂

Java 與 Java. Script 相同嗎? Is Java and Java. Script are same? �Java 與

Java. Script 能做的事 What can Java. Script do � 提供 HTML 的設計者開發程式的具 �

使用 <SCRIPT> 標籤 Use <SCRIPT> tags �使用 <SCRIPT> 標籤 �<SCRIPT type="text/javascript"> �. . .

第一個 Java. Script 程式 First Java. Script program �<script type="text/javascript"> �alert("Hello world"); �</script> �Java.

註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double

練習 Practice �使用開發人員具宣告以下兩個變數，並輸入變數名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name

練習 Practice �試著於開發人員具輸入以下算式，並查看結果是否符合預期 �Try to enter following statements and see whether the

陣列 Array � 陣列宣告 �var my. Cars= [] �var my. Cars= ["Saab", "Volvo", "BMW"];

比較運算子 Comparison operators 運算子 == 說明等於 Equal to 範例 x==8 為 false x==5

邏輯運算子 Logical operators 運算子描述範例 && || ! 且 And 或 Or 否

條件敘述句 If … else If condition �格式 �if (condition 1) { code to be

條件敘述句 Switch statement �格式 �switch(n) { case 1: execute code block 1 break; case

迴圈敘述句 While loops �以條件式做為判斷是否執行的迴圈 �格式 �while (condition) { code to be executed } �範例:

迴圈中的 Continue 敘述句 Continue statement � 在迴圈當中可以使用 continue 來跳過目前執行的項目, 繼續執行下一個項目 � The continue

迴圈中的 Break 敘述句 Break statement � 在迴圈當中也可以使用 break 敘述句來中斷整個迴圈不繼續執行 � The break statement

練習 Practice �寫一迴圈顯示 1到 100的質數 �質數-除了1與本身不能被其他數整除的數字 �Write a loop display of a prime number

函數的使用 Use function �A Java. Script function is executed when "something" invokes it (calls

練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI

函數中的 Return 敘述句 Return statement � 與數學函數一樣, 函數可以有傳入值, 而函數中的程式可以根據不同的傳入值, 回應不同的結果 � 函數中可以透過 return

練習 �定義一個函數會回傳 BMI �Define a function will return BMI

練習 Practice � 定義兩個函數會分別會回傳銷售額與稅額 �銷售額+稅額必須與原來的總額相等 � Define two functions will return sale amount and

練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range

彈性的函數用法 � 由於 Java. Script 是屬於 Script 語言，在 Java. Script 中所有的函數都是以資料的型式儲存就像變數一樣，如以下寫是其實是相同的 �

匿名函數 Anonymous Functions �匿名函數指的是沒有函數名稱的函數，如: >>> function(a){return a; } �匿名函數有以下特色 �可以隨著變數被傳遞並且執行 �Can be pass by

Java. Script 物件 Java. Script Object � 在程式語言中物件是集合一群同樣用途的變數(Variable)及函數(Function)所集合而成的 � 在物件中的變數稱做屬性(Property)，在物件中的函數稱為方法(Method) �Variable in

Java. Script 提供的基本物件 Fundamental object Java. Script provide � Boolean object �布林值處理 � Number

練習 Practice � 試著於開發人員具輸入以下算式，並查看結果是否符合預期 � Try to enter following statements and see

Slides: 44

Download presentation

Java. Script

Java. Script 簡介 Java. Script Introduction �在了解 Java. Script 前您必須先了解 �HTML 與 CSS �何謂 Java. Script �Java. Script 可用來增進 HTML 網頁的互動性 �Java. Script can improve HTML interactivity. �Java. Script 是一種腳本語言(Scripting Language) �Java. Script is an lightweight scripting language. �腳本語言是一種輕量型的程式語言 (簡易, 好上手) �Java. Script 通常直接內含在 HTML 當中 �Java. Script usually embed into HTML. �Java. Script 是直譯式語言 (執行時不需要事先編譯) �Java. Script is interpreted language.

Java 與 Java. Script 相同嗎? Is Java and Java. Script are same? �Java 與 Java. Script 是兩種完全不同的語言 �Java and Java. Script are two completely different programming language. �彼此之間沒有任何相關 �Java 語言為昇陽公司(Sun Microsystem)所開發出來的程式語言，可以做需多複雜的程式設計與 C/C++ 同樣類型 �Java. Script為腳本語言，無法搛寫複雜的程式，但較易上手 �Java. Script is easy to learning

Java. Script 能做的事 What can Java. Script do � 提供 HTML 的設計者開發程式的具 � Provide programming tools to HTML web designer �HTML 的設計者通常不是程式設計師，但 Java. Script 提供了簡單的語法格式讓 HTML 的設計者也能簡單學會 � Java. Script 可以處理事件(Events) � Java. Script can handling Events �Java. Script 可以在當使用者做了某些動作時做出相對的反應，例如當使用者點選按鈕時，出現的提示訊息 � Java. Script 可以讀取(Read)與寫入(Write) HTML 元素 � Java. Script can read and write HTML element dynamically �Java. Script 可以用來更改 HTML 顯示的內容來達到互動的效果

使用 <SCRIPT> 標籤 Use <SCRIPT> tags �使用 <SCRIPT> 標籤 �<SCRIPT type="text/javascript"> �. . . some Java. Script. . . �</SCRIPT> �type 用來指定 SCRIPT 的類型 �目前有 VBScript 及 Java. Script 兩種 �可以放在 <HEAD> 或 <BODY> 中 �Java. Script 執行的順序會依放置的位置由上到下執行 �因此放在 <HEAD> 中的 Java. Script 會最先執行

第一個 Java. Script 程式 First Java. Script program �<script type="text/javascript"> �alert("Hello world"); �</script> �Java. Script 程式要放在 <script> 當中 �Java. Script must put in <script> tags. �Java. Script 需以分號結尾 �Java. Script need semi-colon after every statement. �圓括號內的資料為 alert 的參數(Argument) �“Hello World” in parentheses is argument of the function alert. �alert 會以對話窗的方式跳出訊息, 提示使用者 �alert function will prompt message to user.

幾個簡單顯示結果的方式 �alert("Message"); �會跳出視窗顯示 �Will popup message. Old way. �console. log("Message"); �會顯示於開發人員具 �Will show message in developer tools console. Recommand.

註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double slashes

練習 Practice �使用開發人員具宣告以下兩個變數，並輸入變數名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name to get variable content �var case_matters = 'lower'; �var CASE_MATTERS = 'upper';

練習 Practice �試著於開發人員具輸入以下算式，並查看結果是否符合預期 �Try to enter following statements and see whether the results same as expected. >>> var a = 1; >>> var b = 2; >>> a + b >>> b - b >>> a * b >>> a / b >>> a % b

陣列 Array � 陣列宣告 �var my. Cars= [] �var my. Cars= ["Saab", "Volvo", "BMW"]; � 陣列的使用 �置入資料 � my. Cars[3] = "TOYOTA"; �取出資料 � my. Cars[3]; // TOYOTA �指定索引 � my. Cars[0]="Saab"; � my. Cars[1]="Volvo"; � my. Cars[2]="BMW"; �刪除資料 � delete my. Cars[2];

比較運算子 Comparison operators 運算子 == 說明等於 Equal to 範例 x==8 為 false x==5 為 true === 完全等於 (同時比較變數型態與值) x===5 為 true x==="5" 為 false Equal value and equal type != 不等於 Not equal x!=8 為 true > 大於 Greater than x>8 為 false < 小於 Less then x<8 為 true >= 大於等於 Greater then or equal to x>=8 為 false <= 小於等於 Less then or equal to x<=8 為 true

練習 Practice �試著於開發人員具輸入以下算式，並查看結果是否符合預期 �Try to enter following statements and see whether the results same as expected. >>> "123" == 123; >>> "123" === 123;

邏輯運算子 Logical operators 運算子描述範例 && || ! 且 And 或 Or 否 Not (x < 10 && y > 1) is true (x==5 || y==5) is false !(x==y) is true 用法 • • if (age < 18 && age > 12) alert("Your are is around 12 to 18. "); • if( !(x==10) ) alert("The number is not 10. ");

條件敘述句 If … else If condition �格式 �if (condition 1) { code to be executed if condition 1 is true } else if (condition 2) { code to be executed if condition 2 is true } else { code to be executed if neither condition 1 nor condition 2 is true }

條件敘述句 Switch statement �格式 �switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

迴圈敘述句 While loops �以條件式做為判斷是否執行的迴圈 �格式 �while (condition) { code to be executed } �範例: 1 到 100 的加總 Sum of 1 to 100 �var i = 0; var total = 0; while(i<=100) { total = total + i; }

迴圈中的 Continue 敘述句 Continue statement � 在迴圈當中可以使用 continue 來跳過目前執行的項目, 繼續執行下一個項目 � The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop. � var i=0; for (i=0; i<=10; i++) { if (i==3) { continue; } alert("The number is " + i); } � 會顯示 1, 2, 4, 5, 6, 7, 8, 9, 10

迴圈中的 Break 敘述句 Break statement � 在迴圈當中也可以使用 break 敘述句來中斷整個迴圈不繼續執行 � The break statement breaks the loop and continues executing the code after the loop (if any) � var i=0; for (i=0; i<=10; i++) { if (i==3) { break; } alert("The number is " + i); } � 會顯示 1, 2

練習 Practice �寫一迴圈顯示 1到 100的質數 �質數-除了1與本身不能被其他數整除的數字 �Write a loop display of a prime number from 1 to 100 �Primes - numbers that can not be divisible other digital except 1 and itself

函數的使用 Use function �A Java. Script function is executed when "something" invokes it (calls it). �函數的呼叫(Call) �functionname(var 1, var 2); �var 1, var 2 為 functionname 所需要的參數以逗號(, )相隔 �functionname 函數執行完的結果會存到 a 變數

練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI

函數中的 Return 敘述句 Return statement � 與數學函數一樣, 函數可以有傳入值, 而函數中的程式可以根據不同的傳入值, 回應不同的結果 � 函數中可以透過 return 敘述式來回應函數處理完的結果 � Functions often compute a return value. The return value is "returned" back to the "caller": Function is called, return value will end up in � var x = my. Function(4, 3); function my. Function(a, b) { Function returns the product of a and b return a * b; } � 紅色為傳入值(Arguments) � 綠色為傳回值(Return value)

練習 �定義一個函數會回傳 BMI �Define a function will return BMI

練習 Practice � 定義兩個函數會分別會回傳銷售額與稅額 �銷售額+稅額必須與原來的總額相等 � Define two functions will return sale amount and tax amount �Sale amount + Tax amount must equal to Total amount � function get. Tax. Amount. By. Total. Amount(total. Amount) � function get. Sale. Amount. By. Total. Amount(total. Amount) if( total. Amount == get. Tax. Amount. By. Total. Amount(total. Amount) + get. Sale. Amount. By. Total. Amount(total. Amount) ) { console. log("good"); }

練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range

彈性的函數用法 � 由於 Java. Script 是屬於 Script 語言，在 Java. Script 中所有的函數都是以資料的型式儲存就像變數一樣，如以下寫是其實是相同的 � Functions are Data in Java. Script. function f(){return 1; } var f = function(){return 1; } � 比起一般程式語言寫法較寬鬆且有彈性，因此在使用 Java. Script 的函數常會有以下的彈性用法 �Anonymous Functions �Callback Functions �Self-invoking Functions �Inner (Private) Functions �Functions that Return Functions

匿名函數 Anonymous Functions �匿名函數指的是沒有函數名稱的函數，如: >>> function(a){return a; } �匿名函數有以下特色 �可以隨著變數被傳遞並且執行 �Can be pass by variable and execute. �若函數只需要執行一次可以宣告完並馬上執行 �If function only need execute once, can use anonymous function. �在 Java. Script 有很多的函數用法衍伸自匿名函數 <button id="test. Button">Button</button> document. get. Element. By. Id("test. Button"). onclick = function () { alert("Clicked"); };

Java. Script 物件 Java. Script Object � 在程式語言中物件是集合一群同樣用途的變數(Variable)及函數(Function)所集合而成的 � 在物件中的變數稱做屬性(Property)，在物件中的函數稱為方法(Method) �Variable in object, called property �Function in object, called method � 例如: 在賽車遊戲中的車子，我們會在程式中宣告一個 Car 物件來代表車子，車子要移動，我們會在 Car 物件裡宣告一個 move() 函數來撰寫相關的程式 �The characteristics of the object are called properties in OOP and the actions are called methods. � 在 Java. Script 中要執行物件中的函數透過點. �例如: Car. move(); � Java. Script 中所提供預設的函數都存放在物件當中 �Java. Script defaults provide many object

Java. Script 提供的基本物件 Fundamental object Java. Script provide � Boolean object �布林值處理 � Number object �數值處理 � String object �字串處理 � Array object �陣列處理 � Date object �日期/時間處理 � Math object �算數處理 � Reg. Exp object �正規表式法

練習 Practice � 試著於開發人員具輸入以下算式，並查看結果是否符合預期 � Try to enter following statements and see whether the results same as expected. var s_obj = new String('something'); var s_prim = 'something'; s_obj == s_prim; var obj = new String('Hello'); obj. concat(" world"); "Hello world" var arr 1 = ["A", "B", "C"]; var arr 2 = new Array() arr. push("A"); arr. push("B"); arr. push("C"); arr 1 arr 2