3-1 javascript v6.0

Size: px

Start display at page:

Download "3-1 javascript v6.0"

瞒裘
5 years ago
Views:

1 網頁設計田甜甜教案實驗室 RITA TEACHING JavaScript V6.0 ENTER

2 JavaScript Basic\ 基本概念 JavaScript 基本概念 JavaScript 傳輸方式 : 瀏覽器請求網頁回應 html 網頁伺服器 JavaScript 網頁用法 : 1 2 HTML5 型態 :<script> 其他可以省略, 因為預設就是 javascript MIME 型態 :<script type="text/javascript"> </script> 舊型態 :<script language="javascript"> </script> 為支援舊瀏覽器 :<script type="text/javascript" language="javascript"></script> 加入外部連結 :<script src="your_js_link.js"> <script> 可以放在網頁中的任何位置, 常放置於 <head> 檔頭區或網頁程式碼最下方 javascript 語法有區分英文大小寫分號 ; 可作為單一程式敘述結束符號大刮號 { 可作為程式區塊, 由單一程式或多個程式敘述組成 javascript 註解寫法 : // 單行註解內容 /* 多行註解內容 */ javascript 語法不會區分單引號或 " 雙引號 " JavaScript 基本功能 : 互動性動態文件內容網頁重新定義網頁內容 html 標籤及屬性樣式表單驗證和送出處理網頁或 html 標籤事件建立 web 應用程式

3 JavaScript Basic\ JavaScript 基本概念 JavaScript 可以顯示數據的方式 : JavaScript 沒有任何內置的列印或顯示功能 1 使用寫入 HTML 輸出的 document.write() 2 寫入到一個 HTML 元素, 使用的 innerhtml 3 寫入瀏覽器控制台, 使用的 console.log() 4 寫入一個警告框, 使用 window.alert() 第一份 Javascript:document.write() <!doctype html> <head> <script type="text/javascript"> //document 物件 ( 代表整份 HTML 文件 ) 的 write 方式輸出內容至瀏覽器顯示 document.write(" 第一份 JavvaScript 程式 "); </script> /*document.write() 可於 html 文件中寫入字串, 還可以包含 HTML 的標籤, 例如換行或顯示圖片 */ </head>

4 JavaScript Basic\ JavaScript 基本概念重新定義網頁內容 html 標籤及屬性樣式重新定義 HTML 網頁內容 :innerhtml document.getelementbyid("demo").innerhtml = "Hello JavaScript"; <!DOCTYPE html> <p id="demo">javascript 可以重新定義 HTML 網頁內容 </p> <button type="button" onclick="document.getelementbyid('demo').innerhtml = 'Hello JavaScript!' "> 按我 </button> 重新定義 HTML 元素屬性 : document.getelementbyid('myimage').src='xxx.png' <!DOCTYPE html>  <button onclick="document.getelementbyid('myimage').src='tvopen.png'"> 打開電視 </button> <img id="myimage" src="tvclose.png" style="width:510px"> <button onclick="document.getelementbyid('myimage').src='tvclose.png'"> 關閉電視 </button>

5 JavaScript Basic\ JavaScript 基本概念重新定義網頁內容 html 標籤及屬性樣式重新定義 CSS 樣式 :style document.getelementbyid('demo').style.color ='#f00'; <!DOCTYPE html> <p id="demo">javascript 可以重新定義 CSS 網頁樣式 </p> <button type="button" onclick="document.getelementbyid('demo').style.color ='#f00' "> 按我 </button>

6 JavaScript Event\ JavaScript 事件屬性 Event Attributes 鼠標事件屬性 onclick 腳本點擊鼠標點擊元素 ondblclick 腳本雙擊鼠標在元素上觸發 onmousedown 腳本在元素上按下鼠標按鍵時觸發 onmousemove 腳本當鼠標指針移動到元素上時觸發 onmouseout 腳本當鼠標指針移出元素時觸發 onmouseover 腳本當鼠標指針移到元素上時觸發 onmouseup 腳本在元素上釋放鼠標按鍵時觸發 onmousewheel 腳本已過時改用 onwheel 屬性 onwheel 腳本當鼠標滾輪在元素上滾動或下移時觸發 Event Attributes 鍵盤事件屬性 onkeydown 腳本當用戶按下某個鍵時觸發 onkeypress 腳本當用戶按下某個鍵時觸發 onkeyup 腳本當用戶釋放密鑰時觸發

7 JavaScript Variables\ JavaScript 變數變數是用來儲存數據值的容器 JavaScript 變數基本型態 (Primitive type): 此資料型態所佔用的記憶體大小是固定的 ( 除了字串, 其大小不固定, 因字數而定 ), 使用傳值 (pass by value) 的方式, 指派或傳遞傳遞複本 String ( 字串 ) Number 整數 / 浮點數 ( 數字 ) Boolean ( 布林 ) Null ( 空值 ) Undefined ( 未定義 ) 單引號 / 雙引號整數 / 浮點數 true / false JavaScript 變數參考型態 (Reference type): 此資料型態所佔用大小是不固定的, 使用傳址 (pass by reference) 的方式, 指派或傳遞傳遞複本陣列 (Array) 物件 (Object) 函式 (Function) Javascript 語法功能 : 敘述迴圈條件式指定值事物相加計算 javascript 函式庫 var cup = 96.3; var cup = 4; var cup = true; var cup = Rita ; cup = (Cup-32)*5/9; cup = cup+ 加油! ; var cup = Math.random(); 重複執行敘述 while 迴圈 for 迴圈根據程式狀態決定執行事項 if ( 條件 ) { 成立時執行指令 else { 不成立時執行指令

8 JavaScript Variables\ JavaScript 變數 JavaScript 變數命名注意事項 : 變數命名不可使用 javascript 語法保留字建立多個詞彙時, 建議使用駝峰式拼寫法命名開頭字, 除底線符號 _ $ 以外, 不可使用數字句號或任何符號, 但仍不建議使用符號 4 命名中間, 不可使用空格或 + - 符號 ; 可使用其他符號或數字宣告變數 1 javascript 使用 var 變數關鍵字建立一個容器, 用來儲存資料和進行運算的基本程式功能, 我們必須為變數指定一個合適的名稱, 才能進一步操作 2 3 同時宣告多個變數, 使用逗號, 分隔連續宣告宣告變數時, 可不指定變數值 :var strname,intbalance; 亦可同時指定變數值 :var strname = Rita 田具有動態型別, 就算不指定型別, 程式碼執行時也會自動找出該使用的型別 + 可用於數字相加, 也可以是聯字串的運算子當變數未指定變數的值時, 變數值為 undefined ( 未定義 ) 當變數沒有值時, 可指定變數值為 null ( 沒有值 ) 變數範圍 (Scope) 可區分為全域變數 (global) 和區域變數 (local) JavaScript 中允許省略 var 這個關鍵字來給定變數初始值所有省略 var 指令建立的變數皆為全域變數( 不建議省略 ) JavaScript 中會先解析 var, 所以即使程式後面才出現宣告, 前面就先使用了也不算是未宣告, 算是宣告而未給初始值 : console.log(m); // undefined var m = 1;

9 JavaScript Variables\ JavaScript 變數基本語法練習宣告變數指定值 : 等號 (=) 是一個轉讓操作符, 不是等於操作符 /* + 可用於數字相加, 也可以是聯字串的運算子 cup = cup 1 ; cup( 變數 ) =( 指定 ) cup-1( 運算式 ) ; */ 1. 浮點數 :var cup = 96.3 ; 2. 整數 :var cup = 4 ; 3. 布林值 :var cup = true ; 4. 字串 :var cup = Rita ; 5. 運算式 :cup = (cup-32)*5/9 ; 6. 事物相加 :cup = cup+ 加油! ; 7. 內部函式庫 :var cup = Math.random() ; 習題 : tempc=3 (10 / 5) + tempc + 50 =? Number =? level>=5 當 level =10 結果等於 :(true/false)? 當 level=5 結果等於 :(true/false)? Color! = pink 當 Color 為 blue 結果等於 :(true/false)? ( 2 * math.pi ) * r // (math.pi = ) r =3 時, 結果等於 :? numorstring1 = =? numorstring2 = 3 * 4 =? var x = Rita =? var y = Rita =?

10 JavaScript Variables\ JavaScript 變數基本語法練習宣告變數指定值 :document.write() <!doctype html> <script type="text/javascript"> // 宣告變數 var Name = "Rita 田 "; var Year = 18; var Sex = true; // 顯示變數內容 document.write( " 姓名 :" + Name + "<br>" ); document.write( " 性別 :" + Sex + "<br>" ); document.write( " 年齡 :" + Year ); </script> 物件方法 document write // var Name = "Rita 田 ",Year = 18,Sex = true; 宣告變數不指定值 :document.write() <script type="text/javascript"> // 宣告變數 var Name, Year, Sex ; // 指定變數值 Name = "Rita 田 " ; Year = 18 ; Sex = true ; </script>

11 JavaScript Loop\ JavaScript 迴圈 while 迴圈 for 迴圈 while 迴圈 while 迴圈 + alert 警告視窗 :window.alert() <!doctype html> <head> <script type="text/javascript"> </script> </head> var cup = 10; while ( cup > 0 ) { alert ( 還有多餘的咖啡 ) ; cup = cup - 1 ; alert ( 沒有咖啡人生是黑白的 ) ; 陳述式方法 while alert //while 迴圈以某個條件不確定數量時, 作為控制條件

12 JavaScript Loop\ JavaScript 迴圈 while 迴圈 for 迴圈 for 迴圈 for 迴圈 :window.alert() <!doctype html> <head> <script type="text/javascript"> for ( cup = 10 ; cup > 0 ; cup -- ) { alert ( 還有多餘的咖啡 ) ; alert ( 沒有咖啡人生是黑白的 ) ; </script> </head> 陳述式方法 for alert //JavaScript Operators( 運算符 ): //for 迴圈以固定數量, 作為控制條件

13 JavaScript If/Else \ JavaScript 判斷式 if 判斷式 +confirm() 函式 :window.confirm() <!doctype html> <h2>alert 警告視窗練習 (body 區的 javascript)</h2> <script type="text/javascript"> x=confirm(" 大家參加我的婚禮甘好?") if (x) { alert(" 相親相愛感情不會散 "); else { alert("bye bye 有緣再相會 "); </script> <h3> 先執行 script 才執行後續內容 </h3> 條件陳述式方法 if / else alert

14 JavaScript If/Else \ JavaScript 判斷式 if 判斷式 - 判斷大小 :window.alert() <!doctype html> <head> <script type="text/javascript"> for ( cup = 10 ; cup > 0 ; cup -- ) { </script> </head> if ( cup < 3 ) { alert (" 請補充咖啡 " ) ; else if ( cup < 5) { alert(" 剩沒幾杯咖啡了 ") ; else { alert ( " 還有多餘的咖啡 " ) ; 陳述式條件陳述式方法 for if / else alert

15 JavaScript Function\ JavaScript 函式值 <script type="text/javascript"> function init () { alert ( " 自訂函數 " ) ; window.onload = init ; </script> 簡化 <script type="text/javascript"> window.onload = function() { alert ( " 自訂函數 " ) ; </script> 物件事件 window onload /* window 物件的 onload 事件可以指定函式,onload 的功能為, 當瀏覽器完成整份 HTML 文件的解析後, 如果 onload 事件有設定函式, 就會予以呼叫 */ 物件 + 函式方法 : /* 需要重覆調用的語句, 可設定為 function 函式 */ function myalert() { alert( 你好 ); myalert(); var jolin = { name: " 蔡依林 ", height : 158, country : "Taiwan", job : [" 歌手 ", " 音樂總監 ", " 翻糖蛋糕師 " ], album : function () { alert ( " 我呸 " ) ; jolin.album(); 物件特性方法 jolin name height country job album alert

16 JavaScript Object\ JavaScript 物件 /* 可將參數傳送到 function 函式裡, 用 function 函式得到數據, 再利用 return 屬性回傳值 */ js- 物件 + 函式方法指定參數 Parameter 練習 : function myadd(a,b){ return(a+b); document.getelementbyid("demo").innerhtml=myadd(5,8); // 宣告變數 =tempage( 指定參數給 tempage) var KonanAge = tempage ( " 柯南 ", 7) ; alert ( KonanAge ) ; var KogoroAge = tempage ( " 毛利小五郎 ", 38) ; alert ( KogoroAge ) ; function tempage ( Name, Age ){ if ( Age < 18 ){ return Name + " 未成年!"; else { return Name + " 成年人!" ;

17 JavaScript Prompt\ JavaScript 提示 ScriptTag.js window.onload = function() { var welcome = document.getelementbyid("demo"); welcome.innerhtml = "Hello!" + prompt ("Input your name")+"! "; ; 物件 window 物件 welcome 事件 onload 特性 innerhtml js- 外部連結練習 : <!doctype html> <head> <meta charset="utf-8"> <title>js- 外部連結練習 </title> <script type="text/javascript" src="js/scripttag.js"></script> </head> <span id="welcome"></span>

18 JavaScript Array\ JavaScript 陣列 /* 可分配連續值給記憶體來儲存, 利用元素索引計算對應的儲存位址 */ //1 var myarray = new Array(); myarray [0] = "Apple"; myarray [1] = "Orange"; //2 myotherarray = ["dog","cat"]; //3 myotherarray.push("bear"); // 增加新的址 //4 myotherarray.splice( 0,1 ); // 指定的位置, 刪除幾個址 //5 指定的位置, 刪除幾個址, 要加入的址 ( 可加入多個址 ) myotherarray.splice( 2,0,"fox","bird"); //2 console.log(myotherarray ); // 查看瀏灠器記錄 //6 console.log(myotherarray.length); // 總共有幾個址 //1 document.getelementbyid("mybtn").onclick=function(){ document.getelementbyid("demo").innerhtml=myarray[0];

19 JavaScript Array\ JavaScript 陣列 js-array+ 外部連結練習練習 : <!doctype html> <head> <meta charset="utf-8"> <title>array+ 外部連結練習 </title> <script type="text/javascript" src="js/scriptarray.js"></script> </head> <h1> 溫度紀綠 </h1> <ul> <li id="temp0"></li> <li id="temp1"></li> <li id="temp2"></li> <li id="temp3"></li> <li id="temp4"></li> </ul> ScriptArray.js function showtemps ( ) { var tempbyhour = new Array(); tempbyhour [ 0 ] = 38.5 ; tempbyhour [ 1 ] = 37.8 ; tempbyhour [ 2 ] = 38 ; tempbyhour [ 3 ] = 37.6 ; tempbyhour [ 4 ] = 37 ; // 陣列亦可縮寫為實字陣列 : var tempbyhour = [38.5,37.8,38,37.6,37]; for ( var i = 0 ; i < tempbyhour. length ; i ++ ){ var thetemp = tempbyhour [ i ] ; var id = "temp" + i ; var li = document.getelementbyid ( id ); if ( i ==0 ){ li. innerhtml = " 現在的溫度 : " + thetemp; else { li. innerhtml = i +" 小時前的溫度 : " + thetemp; window.onload = showtemps; 物件特性方法物件特性物件特性 window document getelementbyid li innerhtml window onload

20 END.

3-1 javascript v4.1

3-1 javascript v4.1 網頁設計 RITA TEACHING JavaScript ENTER 講師 : 田甜甜 http://jumpdesign.tw JavaScript Basic\ 基本概念 JavaScript 基本概念 JavaScript 傳輸方式 : 請求網頁瀏覽器回應 html 網頁伺服器 JavaScript 網頁用法 : 1. 舊型態 :