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

JavaScript Basic For 6 Weeks(1/6)

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

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