網頁設計 RITA TEACHING JavaScript ENTER 講師 : 田甜甜 http://jumpdesign.tw
JavaScript Basic\ 基本概念 JavaScript 基本概念 JavaScript 傳輸方式 : 請求網頁 瀏覽器 回應 html 網頁 伺服器 JavaScript 網頁用法 : 1. 舊型態 :<script language= javascript > 2. MIME 型態 :<script type= text/javascript > 3. 為支援舊瀏覽器 :<script type= text/javascript language= javascript > // 加入外部連結 :<script type= text/javascript language= javascript src="your_js_link.- js"> 4. HTML5 型態 :<script> 其他可以省略, 因為預設就是 javascript // 加入外部連結 :<script src="your_js_link.js"> 5. <script> 可以放在網頁中的任何位置, 可放置於 <head> 檔頭區或網頁程式碼最下方 6. javascript 語法有區分英文大小寫 7. 分號 ; 可作為單一程式敘述結束符號 8. 大刮號 { 可作為程式區塊, 由單一程式或多個程式敘述組成 9. javascript 註解寫法 : // 單行註解內容 JavaScript 基本功能 : 1. 互動性動態文件內容網頁 2. 重新定義網頁內容 html 標籤及屬性樣式 3. 表單驗證和送出 4. 處理網頁或 html 標籤事件 5. 建立 web 應用程式
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 程式 "); /*document.write() 可於 html 文件中寫入字串, 還可以包含 HTML 的標籤, 例如換行或顯示圖片 */ </head>
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> <!-- 改變 src 屬性 --> <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>
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> 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 { 不成立時執行指令
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 Variables\ JavaScript 變數 JavaScript 變數命名注意事項 : 變數命名 1. 不可使用 javascript 語法保留字 2. 建立多個詞彙時, 建議使用 駝峰式拼寫法 3. 命名開頭字, 除底線符號 _ $ 以外, 不可使用數字 句號或任何符號, 但仍不建議使用符號 4. 命名中間, 不可使用 空格 或 + - 符號; 可使用其他符號或數字 宣告變數 1. javascript 使用 var 變數關鍵字建立一個容器, 用來儲存資料和進行運算的基本程式功能, 我們必須為變數指定一個合適的名稱, 才能進一步操作 2. 同時宣告多個變數, 使用逗號, 分隔連續宣告 3. 宣告變數時, 可不指定變數值 :var strname,intbalance; 亦可同時指定變數值 :var strname = Rita 田 4. 具有動態型別, 就算不指定型別, 程式碼執行時也會自動找出該使用的型別 5. + 可用於數字相加, 也可以是聯字串的運算子 6. 當變數未指定變數的值時, 變數值為 undefined ( 未定義 ) 7. 當變數沒有值時, 可指定變數值為 null ( 沒有值 ) 8. 變數範圍 (Scope) 可區分為 全域變數 (global) 和 區域變數 (local) 9. JavaScript 中允許省略 var 這個關鍵字來給定變數初始值 10. 所有省略 var 指令建立的變數皆為全域變數( 不建議省略 ) /* JavaScript 中會先解析 var, 所以即使程式後面才出現宣告, 前面就先使用了也不算是未宣告, 算是宣告而未給初始值 : console.log(m); // undefined var m = 1; */
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 + + 2 =? level>=5 當 level =10 結果等於 :(true/false)? 當 level=5 結果等於 :(true/false)? Color! = pink 當 Color 為 blue 結果等於 :(true/false)? ( 2 * math.pi ) * r (math.pi =3.1415) r =3 時, 結果等於 :? numorstring1 = 3 + 4 =? numorstring2 = 3 * 4 =? var x = 15+5+ Rita =? var x = Rita +15+5 =?
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 ); 物件 方法 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 ;
JavaScript Loop\ JavaScript 迴圈 while 迴圈 for 迴圈 while 迴圈 while 迴圈 + alert 警告視窗 :window.alert() <!doctype html> <head> <script type="text/javascript"> var cup = 10; while ( cup > 0 ) { alert ( 還有多餘的咖啡 ) ; cup = cup - 1 ; </head> alert ( 沒有咖啡人生是黑白的 ) ; 陳述式 方法 while alert //while 迴圈以某個條件不確定數量時, 作為控制條件
JavaScript Loop\ JavaScript 迴圈 while 迴圈 for 迴圈 for 迴圈 for 迴圈 :window.alert() <!doctype html> <head> <script type="text/javascript"> for ( cup = 10 ; cup > 0 ; cup -- ) { alert ( 還有多餘的咖啡 ) ; </head> alert ( 沒有咖啡人生是黑白的 ) ; 陳述式 方法 for alert //for 迴圈以固定數量, 作為控制條件
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 有緣再相會 "); <h3> 先執行 script 才執行後續內容 </h3> 條件陳述式 方法 if / else alert
JavaScript If/Else \ JavaScript 判斷式 if 判斷式 - 判斷大小 :window.alert() <!doctype html> <head> <script type="text/javascript"> for ( cup = 10 ; cup > 0 ; cup -- ) { if ( cup < 3 ) { alert (" 請補充咖啡 " ) ; else if ( cup < 5) { alert(" 剩沒幾杯咖啡了 ") ; else { alert ( " 還有多餘的咖啡 " ) ; </head> 陳述式 條件陳述式 方法 for if / else alert
JavaScript Function\ JavaScript 函式值 <script type="text/javascript"> function init () { alert ( " 自訂函數 " ) ; window.onload = init ; 簡化 <script type="text/javascript"> window.onload = function() { alert ( " 自訂函數 " ) ; 物件 事件 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
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 + " 成年人!" ;
JavaScript Prompt\ JavaScript 提示 ScriptTag.js window.onload = function() { var welcome = document.getelementbyid("demo"); welcome.innerhtml = "Hello!" + prompt ("Input your name")+"! "; ; 物件 事件 window onload 物件 特性 welcome innerhtml js- 外部連結練習 : <!doctype html> <head> <meta charset="utf-8"> <title>js- 外部連結練習 </title> <script type="text/javascript" src="js/scripttag.js"> </head> <span id="welcome"></span>
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];
JavaScript Array\ JavaScript 陣列 js-array+ 外部連結練習練習 : <!doctype html> <head> <meta charset="utf-8"> <title>array+ 外部連結練習 </title> <script type="text/javascript" src="js/scriptarray.js"> </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 +" 小時前的溫度 : " + the- Temp; window.onload = showtemps; 物件特性方法物件特性物件特性 window document getelementbyid li innerhtml window onload
END.