1 / 67

JavaScript

JavaScript. 鄧姚文 http://www.ywdeng.idv.tw. JavaScript 簡介. Client-Side JavaScript (CSJS) Mozilla Foundation implementation of the ECMAScript standatd JavaScript is NOT Java Java 和 JavaScript 在語法方面相似,但是在變數宣告、資料型別與物件導向方面有許多差異

pillan
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related