JavaScript 程式設計

JavaScript程式設計課程 Kevin Zhuang

本投影片致謝  感謝蔡秉諺以及 Josephj

JavaScript 緣起  1995年 NetScape, Brendan Eich開發  原名LiveScript 
NetScape看 Java當年的 Java Applet在Web很紅，於是更名為 JavaScript  JavaScript 不等於 Java

JavaScript 不等於 Java  語法部分類似 Java  Self 的 prototype
 Perl 的 Regular expression  Scheme的 function

ECMAScript  ECMA - European Computer Manufacturers Association  1996年,
Netscape把 JavaScript提交給 ECMAS 變成工業標準  ECMAScript  根據ECMAScript實作的語言  ActionScript

JavaScript 正確認知  和 Java是完全不同的語言  Browser存在一個叫做 DOM (Document Object
Model) 的 API (Application Programming Interface)讓 JavaScript 可以存取 HTML

如何使用 JavaScript  直接在 HTML標籤使用  <p onclick=“javascript:alert(‘haha’);”>這是文章</p>  <a
href=“javascript:alert(‘haha’);”>這是連結</>  不推薦破壞 html結構  請搬到 <script>…</script>區段  不推薦過多程式碼，也是破壞 html結構  或是搬到 *.js檔案載入  <script src=“js檔案路徑”></script>  推薦

HTML Template <!DOCTYPE html> <html> <head> <meta char=“utf-8”> <title> JavaScript
Sample</title> <script> //…. Code… </script> </head> <body> </body> </html>

JavaScript 資料型態  五種 Primitive type  number – var
a = 10;  String – var a = “I am string”;  Boolean – var a = true;  null  undefined  其他都是物件  Object  Function  Array  其他自訂擴充物件

JavaScript 宣告變數  JavaScript為弱型別語言  var name = “Kevin”; //
name為字串  name = 10; // name變為數字

number  數值  10進位 1234567  8進位 01234567 
16進位 0x1234567  科學記數法 1.234567E6  IEEE 754  精準度只到 15位數  超級不準確 parseInt('010'); // ECMAScript 5 前吐 8 // ECMAScript 5 後吐 10 1.1 + 1.1 + 1.1 // 3.3000000000000003

string  沒有 char，char 陣列  單雙引號均可  特殊字元 
\n \r \t \' \" \\  string 中的單一字元  用 8 進位表示  \101 A  用 16 進位表示  \x41 A  用 Unicode 表示  \u0041 A  UTF-16 Big Endian

bool  true/ false  你要我掰出什麼特別的布林值我也想不出來。

null 與 undefined  兩者都是是資料型態也是資料型態唯一的值  not defined 和
undefined 不一樣  not defined 是 JavaScript 錯誤 var a; alert(a); // undefined var b = null; alert(b); // null b = undefined; alert(b); // undefined alert(c); // ReferenceError: c is not defined

物件  除了 Primitive type 外都是 Object  Array
Function 也是 Object  Object 最大特性可以有屬性  Primitive type 不可以有屬性  除了使用 .存取屬性以外也可以使用 [] 存取 var a = new Object(); a.b = 2; alert(a.b); // 2 var a = 1; a.b = 2; alert(a.b); // undefined var a = new Object(); a[b] = 2; alert(a[b]); // 2 沒有錯誤訊息但寫不進去

JSON物件- JavaScript Object Notation http://www.json.org/ { "menu": { "id": "file",
"value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } } }

function var getPoint = function ( value) { // code…
}; getPoint(10);

練習  試著在裡面寫一個加法的 function

Object的屬性可以是任何東西  可以是 number, string, Boolean, null, undefined, Object, Array,
Function … 任何東西 var o = new Object(); o.p = 1; o.p = 'abc'; o.p = true; o.p = new Object(); o.p = new Array(); o.p = function() { alert('!'); };

Object 屬性可以動態新增修改刪除 var o = new Object(); o.p = 1;
o.p = function(){ alert('f'); } o.p(); // f delete o.p; // delete(o.p)

Undefined VS not defined  Object 屬性不存在是 undefined  變數不存在是
not defined var o = new Object(); alert(o.p); // undefined o.p = 1; alert(o.p); // 1 delete o.p; alert(o.p); // undefined alert(a); // ReferenceError: c is not defined

JavaScript 程式設計

JavaScript 程式設計

kvzhuang

More Decks by kvzhuang

Featured

Transcript