Java Script Java Script Java Script Introduction Java
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-1.jpg)
![Java. Script Java. Script](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-2.jpg)
![Java. Script 簡介 Java. Script Introduction �在了解 Java. Script 前您必須先了解 �HTML 與 CSS �何謂 Java. Script 簡介 Java. Script Introduction �在了解 Java. Script 前您必須先了解 �HTML 與 CSS �何謂](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-3.jpg)
![Java 與 Java. Script 相同嗎? Is Java and Java. Script are same? �Java 與 Java 與 Java. Script 相同嗎? Is Java and Java. Script are same? �Java 與](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-4.jpg)
![Java. Script 能做的事 What can Java. Script do � 提供 HTML 的設計者開發程式的 具 � Java. Script 能做的事 What can Java. Script do � 提供 HTML 的設計者開發程式的 具 �](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-5.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-6.jpg)
![使用 <SCRIPT> 標籤 Use <SCRIPT> tags �使用 <SCRIPT> 標籤 �<SCRIPT type="text/javascript"> �. . . 使用 <SCRIPT> 標籤 Use <SCRIPT> tags �使用 <SCRIPT> 標籤 �<SCRIPT type="text/javascript"> �. . .](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-7.jpg)
![第一個 Java. Script 程式 First Java. Script program �<script type="text/javascript"> �alert("Hello world"); �</script> �Java. 第一個 Java. Script 程式 First Java. Script program �<script type="text/javascript"> �alert("Hello world"); �</script> �Java.](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-8.jpg)
![幾個簡單顯示結果的方式 �alert("Message"); �會跳出視窗顯示 �Will popup message. Old way. �console. log("Message"); �會顯示於開發人員 具 �Will show 幾個簡單顯示結果的方式 �alert("Message"); �會跳出視窗顯示 �Will popup message. Old way. �console. log("Message"); �會顯示於開發人員 具 �Will show](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-9.jpg)
![註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double 註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-10.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-11.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-12.jpg)
![練習 Practice �使用開發人員 具宣告以下兩個變數,並輸入變數 名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name 練習 Practice �使用開發人員 具宣告以下兩個變數,並輸入變數 名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-13.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-14.jpg)
![練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the 練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-15.jpg)
![陣列 Array � 陣列宣告 �var my. Cars= [] �var my. Cars= ["Saab", "Volvo", "BMW"]; 陣列 Array � 陣列宣告 �var my. Cars= [] �var my. Cars= ["Saab", "Volvo", "BMW"];](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-16.jpg)
![比較運算子 Comparison operators 運算子 == 說明 等於 Equal to 範例 x==8 為 false x==5 比較運算子 Comparison operators 運算子 == 說明 等於 Equal to 範例 x==8 為 false x==5](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-17.jpg)
![練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the 練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-18.jpg)
![邏輯運算子 Logical operators 運算子 描述 範例 && || ! 且 And 或 Or 否 邏輯運算子 Logical operators 運算子 描述 範例 && || ! 且 And 或 Or 否](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-19.jpg)
![條件敘述句 If … else If condition �格式 �if (condition 1) { code to be 條件敘述句 If … else If condition �格式 �if (condition 1) { code to be](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-20.jpg)
![條件敘述句 Switch statement �格式 �switch(n) { case 1: execute code block 1 break; case 條件敘述句 Switch statement �格式 �switch(n) { case 1: execute code block 1 break; case](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-21.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-22.jpg)
![迴圈敘述句 While loops �以條件式做為判斷是否執行的迴圈 �格式 �while (condition) { code to be executed } �範例: 迴圈敘述句 While loops �以條件式做為判斷是否執行的迴圈 �格式 �while (condition) { code to be executed } �範例:](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-23.jpg)
![迴圈中的 Continue 敘述句 Continue statement � 在迴圈當中可以使用 continue 來跳過目前執行的項目, 繼續 執行下一個項目 � The continue 迴圈中的 Continue 敘述句 Continue statement � 在迴圈當中可以使用 continue 來跳過目前執行的項目, 繼續 執行下一個項目 � The continue](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-24.jpg)
![迴圈中的 Break 敘述句 Break statement � 在迴圈當中也可以使用 break 敘述句來中斷整個迴圈 不繼續執行 � The break statement 迴圈中的 Break 敘述句 Break statement � 在迴圈當中也可以使用 break 敘述句來中斷整個迴圈 不繼續執行 � The break statement](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-25.jpg)
![練習 Practice �寫一迴圈顯示 1到 100的質數 �質數-除了1與本身不能被其他數整除的數字 �Write a loop display of a prime number 練習 Practice �寫一迴圈顯示 1到 100的質數 �質數-除了1與本身不能被其他數整除的數字 �Write a loop display of a prime number](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-26.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-27.jpg)
![函數的使用 Use function �A Java. Script function is executed when "something" invokes it (calls 函數的使用 Use function �A Java. Script function is executed when "something" invokes it (calls](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-28.jpg)
![練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI 練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-29.jpg)
![函數中的 Return 敘述句 Return statement � 與數學函數一樣, 函數可以有傳入值, 而函數中的程式 可以根據不同的傳入值, 回應不同的結果 � 函數中可以透過 return 函數中的 Return 敘述句 Return statement � 與數學函數一樣, 函數可以有傳入值, 而函數中的程式 可以根據不同的傳入值, 回應不同的結果 � 函數中可以透過 return](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-30.jpg)
![練習 �定義一個函數會回傳 BMI �Define a function will return BMI 練習 �定義一個函數會回傳 BMI �Define a function will return BMI](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-31.jpg)
![練習 Practice � 定義兩個函數會分別會回傳銷售額與稅額 �銷售額+稅額必須與原來的總額相等 � Define two functions will return sale amount and 練習 Practice � 定義兩個函數會分別會回傳銷售額與稅額 �銷售額+稅額必須與原來的總額相等 � Define two functions will return sale amount and](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-32.jpg)
![練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range 練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-33.jpg)
![彈性的函數用法 � 由於 Java. Script 是屬於 Script 語言,在 Java. Script 中 所有的函數都是以資料的型式儲存就像變數一樣,如以 下寫是其實是相同的 � 彈性的函數用法 � 由於 Java. Script 是屬於 Script 語言,在 Java. Script 中 所有的函數都是以資料的型式儲存就像變數一樣,如以 下寫是其實是相同的 �](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-34.jpg)
![匿名函數 Anonymous Functions �匿名函數指的是沒有函數名稱的函數,如: >>> function(a){return a; } �匿名函數有以下特色 �可以隨著變數被傳遞並且執行 �Can be pass by 匿名函數 Anonymous Functions �匿名函數指的是沒有函數名稱的函數,如: >>> function(a){return a; } �匿名函數有以下特色 �可以隨著變數被傳遞並且執行 �Can be pass by](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-35.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-36.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-37.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-38.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-39.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-40.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-41.jpg)
![Java. Script 物件 Java. Script Object � 在程式語言中物件是集合一群同樣用途的變數(Variable)及 函數(Function)所集合而成的 � 在物件中的變數稱做屬性(Property),在物件中的函數稱為 方法(Method) �Variable in Java. Script 物件 Java. Script Object � 在程式語言中物件是集合一群同樣用途的變數(Variable)及 函數(Function)所集合而成的 � 在物件中的變數稱做屬性(Property),在物件中的函數稱為 方法(Method) �Variable in](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-42.jpg)
![Java. Script 提供的基本物件 Fundamental object Java. Script provide � Boolean object �布林值處理 � Number Java. Script 提供的基本物件 Fundamental object Java. Script provide � Boolean object �布林值處理 � Number](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-43.jpg)
![練習 Practice � 試著於開發人員 具輸入以下算式,並查看結果是否符合預 期 � Try to enter following statements and see 練習 Practice � 試著於開發人員 具輸入以下算式,並查看結果是否符合預 期 � Try to enter following statements and see](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-44.jpg)
- Slides: 44
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-1.jpg)
![Java Script Java. Script](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-2.jpg)
Java. Script
![Java Script 簡介 Java Script Introduction 在了解 Java Script 前您必須先了解 HTML 與 CSS 何謂 Java. Script 簡介 Java. Script Introduction �在了解 Java. Script 前您必須先了解 �HTML 與 CSS �何謂](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-3.jpg)
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 與 Java. Script 相同嗎? Is Java and Java. Script are same? �Java 與](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-4.jpg)
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 的設計者開發程式的 具 Java. Script 能做的事 What can Java. Script do � 提供 HTML 的設計者開發程式的 具 �](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-5.jpg)
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 顯示的內容來達到互動 的效果
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-6.jpg)
![使用 SCRIPT 標籤 Use SCRIPT tags 使用 SCRIPT 標籤 SCRIPT typetextjavascript 使用 <SCRIPT> 標籤 Use <SCRIPT> tags �使用 <SCRIPT> 標籤 �<SCRIPT type="text/javascript"> �. . .](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-7.jpg)
使用 <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 typetextjavascript alertHello world script Java 第一個 Java. Script 程式 First Java. Script program �<script type="text/javascript"> �alert("Hello world"); �</script> �Java.](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-8.jpg)
第一個 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.
![幾個簡單顯示結果的方式 alertMessage 會跳出視窗顯示 Will popup message Old way console logMessage 會顯示於開發人員 具 Will show 幾個簡單顯示結果的方式 �alert("Message"); �會跳出視窗顯示 �Will popup message. Old way. �console. log("Message"); �會顯示於開發人員 具 �Will show](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-9.jpg)
幾個簡單顯示結果的方式 �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 註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-10.jpg)
註解 Comment �註解用在程式當中註明一些說明事項 �Java. Script 的註解以 // 表示 �Comment in Java. Script use double slashes
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-11.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-12.jpg)
![練習 Practice 使用開發人員 具宣告以下兩個變數並輸入變數 名稱看顯示的數值是否不同 Try declare following two variables and typing variable name 練習 Practice �使用開發人員 具宣告以下兩個變數,並輸入變數 名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-13.jpg)
練習 Practice �使用開發人員 具宣告以下兩個變數,並輸入變數 名稱看顯示的數值是否不同 �Try declare following two variables, and typing variable name to get variable content �var case_matters = 'lower'; �var CASE_MATTERS = 'upper';
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-14.jpg)
![練習 Practice 試著於開發人員 具輸入以下算式並查看結果是 否符合預期 Try to enter following statements and see whether the 練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-15.jpg)
練習 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 陣列 Array � 陣列宣告 �var my. Cars= [] �var my. Cars= ["Saab", "Volvo", "BMW"];](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-16.jpg)
陣列 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 範例 x8 為 false x5 比較運算子 Comparison operators 運算子 == 說明 等於 Equal to 範例 x==8 為 false x==5](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-17.jpg)
比較運算子 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 練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-18.jpg)
練習 Practice �試著於開發人員 具輸入以下算式,並查看結果是 否符合預期 �Try to enter following statements and see whether the results same as expected. >>> "123" == 123; >>> "123" === 123;
![邏輯運算子 Logical operators 運算子 描述 範例 且 And 或 Or 否 邏輯運算子 Logical operators 運算子 描述 範例 && || ! 且 And 或 Or 否](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-19.jpg)
邏輯運算子 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 條件敘述句 If … else If condition �格式 �if (condition 1) { code to be](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-20.jpg)
條件敘述句 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 格式 switchn case 1 execute code block 1 break case 條件敘述句 Switch statement �格式 �switch(n) { case 1: execute code block 1 break; case](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-21.jpg)
條件敘述句 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 }
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-22.jpg)
![迴圈敘述句 While loops 以條件式做為判斷是否執行的迴圈 格式 while condition code to be executed 範例 迴圈敘述句 While loops �以條件式做為判斷是否執行的迴圈 �格式 �while (condition) { code to be executed } �範例:](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-23.jpg)
迴圈敘述句 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 迴圈中的 Continue 敘述句 Continue statement � 在迴圈當中可以使用 continue 來跳過目前執行的項目, 繼續 執行下一個項目 � The continue](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-24.jpg)
迴圈中的 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 迴圈中的 Break 敘述句 Break statement � 在迴圈當中也可以使用 break 敘述句來中斷整個迴圈 不繼續執行 � The break statement](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-25.jpg)
迴圈中的 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 練習 Practice �寫一迴圈顯示 1到 100的質數 �質數-除了1與本身不能被其他數整除的數字 �Write a loop display of a prime number](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-26.jpg)
練習 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
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-27.jpg)
![函數的使用 Use function A Java Script function is executed when something invokes it calls 函數的使用 Use function �A Java. Script function is executed when "something" invokes it (calls](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-28.jpg)
函數的使用 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 練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-29.jpg)
練習 �將 BMI 作業放到函數當中並且執行 �Define a function will display BMI
![函數中的 Return 敘述句 Return statement 與數學函數一樣 函數可以有傳入值 而函數中的程式 可以根據不同的傳入值 回應不同的結果 函數中可以透過 return 函數中的 Return 敘述句 Return statement � 與數學函數一樣, 函數可以有傳入值, 而函數中的程式 可以根據不同的傳入值, 回應不同的結果 � 函數中可以透過 return](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-30.jpg)
函數中的 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 練習 �定義一個函數會回傳 BMI �Define a function will return BMI](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-31.jpg)
練習 �定義一個函數會回傳 BMI �Define a function will return BMI
![練習 Practice 定義兩個函數會分別會回傳銷售額與稅額 銷售額稅額必須與原來的總額相等 Define two functions will return sale amount and 練習 Practice � 定義兩個函數會分別會回傳銷售額與稅額 �銷售額+稅額必須與原來的總額相等 � Define two functions will return sale amount and](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-32.jpg)
練習 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 練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-33.jpg)
練習 �定義一個函數會回傳質數陣列 �Define a function will return prime numbers array in specify range
![彈性的函數用法 由於 Java Script 是屬於 Script 語言在 Java Script 中 所有的函數都是以資料的型式儲存就像變數一樣如以 下寫是其實是相同的 彈性的函數用法 � 由於 Java. Script 是屬於 Script 語言,在 Java. Script 中 所有的函數都是以資料的型式儲存就像變數一樣,如以 下寫是其實是相同的 �](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-34.jpg)
彈性的函數用法 � 由於 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 匿名函數指的是沒有函數名稱的函數如 functionareturn a 匿名函數有以下特色 可以隨著變數被傳遞並且執行 Can be pass by 匿名函數 Anonymous Functions �匿名函數指的是沒有函數名稱的函數,如: >>> function(a){return a; } �匿名函數有以下特色 �可以隨著變數被傳遞並且執行 �Can be pass by](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-35.jpg)
匿名函數 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"); };
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-36.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-37.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-38.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-39.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-40.jpg)
![](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-41.jpg)
![Java Script 物件 Java Script Object 在程式語言中物件是集合一群同樣用途的變數Variable及 函數Function所集合而成的 在物件中的變數稱做屬性Property在物件中的函數稱為 方法Method Variable in Java. Script 物件 Java. Script Object � 在程式語言中物件是集合一群同樣用途的變數(Variable)及 函數(Function)所集合而成的 � 在物件中的變數稱做屬性(Property),在物件中的函數稱為 方法(Method) �Variable in](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-42.jpg)
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 Java. Script 提供的基本物件 Fundamental object Java. Script provide � Boolean object �布林值處理 � Number](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-43.jpg)
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 練習 Practice � 試著於開發人員 具輸入以下算式,並查看結果是否符合預 期 � Try to enter following statements and see](https://slidetodoc.com/presentation_image/51d4ed778130b8493761fad443e6cc8c/image-44.jpg)
練習 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
Event introduction script
Event introduction script
Thesis defense introduction script
Moderator script for webinar sample
Script de java
Data types in javascript
Java script wikipedia
"java script"
"java script"
"java script"
Java script course
Java script
"java script"
Java khan academy
Java script examples
Inside which html element do we put javascript?
Java script email
Java script ide
"language fundamentals"
"java script"
Java script classes
Intro paragraph layout
Problem solving
Daniel liang introduction to java programming
Java an introduction to problem solving and programming
Bdk java
Java introduction to problem solving and programming
Introduction to java programming 10th edition quizzes
Java swings tutorial
Import java.lang.*
Import java.util.*
Import java.awt.*
Java import scanner
Import java.io.file;
Import java.util.scanner;
Java import java.util.*
Import java.io.* in java
Import java.util.*;
Java import java.io.*
Perbedaan awt dan swing
Import java.awt.event.*
Java interpreter
Ejb in javatpoint
Audition script
Stage directions in a script