JavaScript

1. JavaScript 鄧姚文 http://www.ywdeng.idv.tw

2. JavaScript 簡介 • Client-Side JavaScript (CSJS) • Mozilla Foundation implementation of the ECMAScript standatd • JavaScript is NOT Java • Java 和 JavaScript 在語法方面相似，但是在變數宣告、資料型別與物件導向方面有許多差異 • Netscape 起初命名為 LiveScript，因為和 Sun Microsystems 合作，改名為 JavaScript

3. 環境設定 • Firefox：瀏覽器 • 官方網站： http://www.mozilla.com/ • Firebug：JavaScript 除錯附加元件 • 以 Firefox 開啟這個 下載點 • 或到 Firefox 附加元件網站https://addons.mozilla.org/搜尋 firebug

4. 練習：Hello JavaScript • 以 document.write 方法輸出字串 Hello JavaScript • JavaScript 程式碼必須以<script type="text/javascript"></script>夾住前後

5. 練習：印出從一到十的數字 • 以 document.write 輸出從 1 到 10 的數字 • 迴圈： • while (條件) { … } • for (初值; 條件; 改變) { … }

6. 練習：印出從一加到十的結果 • 以 document.write 輸出從 1 加到 10 的結果 • 條件判斷： • if (條件) { … } • if (條件) { … } else { … } • if ((條件1) && (條件2)) { … } • if ((條件1) || (條件2)) { … }

7. 語言特性 • Dynamically Typed 動態資料型別 • Interpreted 直譯，逐行編譯執行 • Functions as First-Class Objects 函式即物件

8. 語言特性 • Dynamically Typed 動態型別 • Data types are NOT declared • Data types are NOT known until execution time • Data type is associated to the value of the variable rather than the variable itself var x = 5; // set x to 5 (number) x = "Hello!"; // set x to "Hello!" (String)

9. 語言特性 • Interpreted 直譯式語言 • The code is stored as text and interpreted into machine instructions and stored in memory as the program runs. • Line by line

10. 語言特性 • Functions as First-Class Objects • Function is a type of built-in object • To invoke a function: use its name and parentheses, () • Group code into a callable block. • Functions are unique only by name, not by name plus arguments

11. 語言特性Functions as First-Class Objects var newMethod = new Function("alert('new method');"); newMethod(); // alerts "new method" function newMethod2() { alert('new method'); } newMethod2(); // alerts "new method"

12. 基本資料型別 • Primitive Data Types • boolean • number • string • Special values • undefined • null

13. 基本資料型別 • booleans 布林、真假、是否 • Possible values • true • false • 1相當於 true • 0相當於 false var x = false; var y = true; var z = 1; alert (y === z); // alerts 'true'

14. 基本資料型別 • Numbers 數字 • 64-bit values • Similar to double in Java • Order of Operation Precedence • Parentheses, () • Exponents, xn • Multiplication, * • Division, / • Addition, + • Subtraction, -

15. 基本資料型別 • Numbers 數字 • 進行整數運算時： • 先轉成 32-bit 整數（無條件捨去），運算完畢再轉回 64-bit number var x = 6; // x: 64-bit var y = x << 2; // x: 32-bit, y: 64-bit

16. Special Number Values

17. 基本資料型別 • Strings 字串 • A string is a sequence of zero or more Unicode values used to represent text. • Strings are immutable • Modification produces a new string • JavaScript 只有字串，沒有字元型別 • 單引號與雙引號皆可

18. Special Characters 跳脫字元

19. 物件 Objects • 除了 boolean, number, string 這些 Primitive Data Type 之外，其餘的一切都是物件 • Function • Date • Document Object Model (DOM) elements var myCar = new Object(); // the built-in Object type var myCar2 = {}; // the object literal

20. 物件 Objects • Object properties are stored using an associative array

21. Using a for … in loop

22. Object Functions

23. Object Literal Notation

24. Expando Properties myCar.print = null; delete myCar.print;

25. Primitive Data Type Wrapper Objects封裝物件 Boolean, Number, String Primitive data types just store data anddon’t have any methods or properties JavaScript silentlyconverts the primitive data types to and from the wrapper objects so thatwe can use methods without having to cast to another object first

26. instanceof • instanceof determines whether an object derives from a particular type

27. The constructor Property • 建構，在 new 時呼叫 • The constructor property references the function that created an object • can be used to determine an object’s type

28. Variables and Function Arguments • Equality 相等 • Equal == • 資料值相等 • Not equal != • 資料值不相等 • Strict equal === • compare both the value and type of the operands • 資料值和資料型別都相等 • Strict not equal !==

29. Variables and Function Arguments • Scope 變數有效範圍 • Only the global object (the window object in browsers) and functions are variable scope boundaries • Other blocks, such as if-then-else statements and while loops, don’t provide a variable scope boundary. • Variables declared inside a block other than the function block will be accessible outside that block

30. Function-Level Variable Scope

31. Globally Scoped Variables • The global window is the root of the DOM and is accessed through the window keyword

32. Undeclared Variables • Variables that aren’t declared before they are used are dynamically declared as a global variable

33. Null(空) and undefined(未定義) • null is a reserved word that means no value and is used to point a variable to no data so that memory can be reused • undefined is the default value of a newly declared variable • undefined is a primitive value and a type

34. Comparing null and the undefined Value

35. Comparing null to Itself • Comparing a null valued variable and an undefined valued variable will evaluate to true when using the nonstrict comparison and evaluate to false when using the strict comparison

36. Comparing Using the undefined Type • use undefined as a type

37. typeof 取得型別 • typeof returns a string based on the data type of its operand

38. typeof Evaluations

39. Function Arguments 參數 • Method arguments are always supplied to the function in a special local arguments variable • Local variable is accessible once inside the function through the arguments keyword

40. Implicit Arguments

41. Explicit Arguments

42. Undefined Arguments

43. Dynamic Arguments

44. callee 呼叫者 • The callee property available on a function’s local arguments variable accesses the function being executed • using arguments.callee to access the sayHello method

45. Recursive Anonymous Methods with arguments.callee

46. this • this in JavaScript points to the current owner of the executing method • can point to • the global window object if the executing method is procedural, • a DOM element if the executing method is handling a DOM event, or • an object if the executing method is contained within the object’s definition

47. The Different Uses of this

48. Error Handling • Try-Catch-Finally Mechanism • Code wrapped in a try block that causes an error to be thrown transfers control to the catch block, which receives as a parameter an instance of the built-in Error type describing the error that occurred

49. Standard Error Properties • The catch block accepts a single parameter, e, which is an instance of the Error type. The Error type has two standard properties

50. Nonstandard Error Properties