Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Basic For 6 Weeks(1/6)

Avatar for winwu winwu
September 15, 2015

JavaScript Basic For 6 Weeks(1/6)

Week 1(9/15 19:00-22:00)
JavaScript 簡介
JS 的用處
編輯器安裝 sublime
JavaScript Debugging Tools
變數與運算子
變數型態介紹
加減乘除, numbers

Avatar for winwu

winwu

September 15, 2015
Tweet

More Decks by winwu

Other Decks in Programming

Transcript

  1. About Win ‣ 
 
 
 ‣ 2-3 year X

    Web Development
 
 
 
 ‣ Recently…. :P @yiyingwu1990 Frontend HTML / CSS / JavaScript Backend PHP / Node.js … Engineer
  2. Agenda ๏ JavaScript Introduction ๏ IDE (Sublime…) ๏ JavaScript Debugging

    Tools ๏ 變數與運算⼦子 ๏ 變數型態介紹 ๏ 加減乘除, Numbers…
  3. Frontend Backend Rails / PHP / Java / Python Go

    / Node.js … HTML / CSS / JavaScript In software engineering, the terms "front end" and "back end" are distinctions which refer to the separation of concerns between a presentation layer and a data access layer respectively. - wiki Frontend v.s Backend mucho mucho!! mucho mucho!!
  4. JavaScript is Powerful HTML CSS JavaScript ⾝身體構造 打扮 ⾏行為/反應 HTML

    + CSS + JavaScript 可以讓網⾴頁達到互動性
 它也可以知道 user 跟 網⾴頁之間的互動是什麼
  5. JavaScrip can do… JavaScript Can Change HTML Content / Attributes

    / Styles (CSS) Validate Input Data Animation Ajax (不⽤用刷新網⾴頁,即能更新資料) Object base 任務不外乎三件事: (1)更新⾴頁⾯面 (2)取得伺服器的資料 (3)傳送資 料給伺服器。
  6. 瀏覽器如何執⾏行 JavaScript? • 循序執⾏行: 瀏覽器 load 到網⾴頁之後,載⼊入 JavaScript 之後就開 始執⾏行。


    
 • 事件驅動: 當使⽤用者跟網⾴頁產⽣生某些⾏行為之後,觸發 JavaScript 程式碼來執⾏行某些程式。 onClick, onMouseOver, onChange, onSelect…
  7. Script 標籤 <html> <head> <title>JavaScript for 6 weeks</title> <script type=“text/javascript”>

    alert(“hellowin~”); </script> </head> </html> ⽤用來讓 Browser 知道接下來是指令稿語⾔言,接著它 就會把這⼀一段當作是 script 處理⽽而⾮非 HTML。 script 必須要有結尾標籤
  8. Script 標籤 <html> <head> <title>JavaScript for 6 weeks</title> </head> <script

    src=“main.js” type=“text/javascript”></script> </html> main.js 把程式移到另⼀一個檔案裡
  9. Debugging Tools •按理,你無法在編輯器上寫程式的時候就知道會不會出現錯 誤。 (有些 Plugin 例外...,有的 Plugin 可以幫你檢查語法)。 •瀏覽器幾乎都會提供除蟲的⼯工具

    (錯誤主控台)。但每家瀏覽器 的作⾵風(⽤用法)都不太⼀一樣。 •相信⼀一家瀏覽器不代表你能相信所有的瀏覽器。 •初學時,其實⼤大部份時候是⼈人為疏失,真正的 Bug 還蠻少的。 •出錯的地⽅方可能很簡單,但⼀一個⼩小地⽅方⾜足以讓網⾴頁發⽣生悲劇。
  10. JavaScript 語彙結構 ⼀一個語⾔言的語彙結構講的就是指⼀一套基礎規則。 JavaScript 的語彙規則如下: 字元集: JavaScript 是⽤用 Unicode 字元集所撰寫。


    ⼤大⼩小寫之分: JavaScript 是區分⼤大⼩小寫 (case-sensitive) 的語⾔言。
 Unicode 轉義序列。
 正規化: Unicode 允許同⼀一個字元以⼀一種⼀一樣的⽅方式編碼。
 註解: ⽀支援兩種註解⽅方式。
 識別字: 識別字 (Identifier) ⽤用來為變數或是函式命名。
  11. 變數宣告注意事項 • 變數名稱⼤大⼩小寫有別,如 errorMessage 跟 errormessage 是不⼀一 樣的。
 • JavaScript

    是⼀一個很鬆散的語⾔言,就算你不⽤用 var 關鍵字也可以 宣告變數,但這不是好作法 (幾乎可以說千萬不要這樣做)。
 • 變數儲存的地⽅方是有範圍的,⼜又分為區域變數 (local variable) 跟 全域變數 (global variable),我們之後在函式的地⽅方會在介紹。 • 命名要合法,必須以字⺟母, 底線(_), 或是 $ 開頭。(注意不能⽤用數 字開頭!)
  12. 物件型別 (Object types) • ⼀一個物件是⼀一組特性(prop)的群集。 • 物件為⼀一組具名的無序群集⼜又稱為陣列 (Array)。 • function

    函式是⼀一種⽐比較特別的物件,⼀一個 function 是⼀一個 物件,⽽而是具有可執⾏行的能⼒力,他也可以被調⽤用(invoke), 所以函式的⾏行為跟其他物件不同。
  13. 算數運算 • 零除以零沒有明確定義的值,所以 JavaScript 會回傳 NaN。 • NaN: not a

    number value。 • NaN 對 JavaScript 是⼀一個『⾮非數』值,但是 NaN 的型態仍然會 被認為是 Number,⾮非數值有的特點是,他的值跟任何直都不相 等。所以當你要判斷⼀一個數值是不是 NaN 時,可以⽤用內建函數 isNaN。
  14. null 是⼀一個特殊的值,他代表沒有值存在,雖然 對 null ⽤用 typeof 你會拿到⼀一個 object 的字串, 然⽽而實務上典型的看法是

    null ⾃自成⼀一個型別,他 是這個型別唯⼀一的成員。 Null 跟 undefined undefined 代表值不存在(可能是沒有被宣告過的 變數...),undefined 是預先定義的全域變數,他 不像 null 是語⾔言關鍵字,undefined 也是這個型 別唯⼀一個成員。
  15. Mission 5 左邊是某位先⽣生⼩小姐的基本資料,請你⽤用變數的⽅方式,將他 的資料依序存到每個變數裡。 姓名 肚⼦子⼆二 年齡 26 職業 Engineer

    居住地 taiwan ⾝身⾼高 180 體重 68 是否吃素 否 var age = ?? var job = ?? var location = ?? var height = ?? var weight = ?? var isVegetarian = ??
  16. Sublime Text 必裝 Plugin Emmet http://emmet.io/download/ Sublime 有⾮非常多的 plugin,不過都得⾃自⼰己裝。 裝

    Plugin 之前,請你先安裝 Sublime 的 Package Control。 結束後請我或是助教幫忙 XD
  17. Reference • JavaScript ⼤大全,David Flanagan 著 (O’Reilly) 978-0-596-80552-4 • HTML5:

    The Missing Manual 國際中⽂文版 第⼆二版,Matthew MacDonald 著 (O’Reilly) 978-986-347-268-1 • 深⼊入淺出 JavaScript,Michael Morrison 著 (R’Reilly) 9789866840241