Enviar búsqueda
Cargar
Javascript 入門 - 前端工程開發實務訓練
•
37 recomendaciones
•
8,875 vistas
Joseph Chiang
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 60
Descargar ahora
Descargar para leer sin conexión
Recomendados
Kotlin/Native 「使ってみた」の一歩先へ
Kotlin/Native 「使ってみた」の一歩先へ
Takaki Hoshikawa
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
JP1/AJS2オペレータ勉強会
JP1/AJS2オペレータ勉強会
mizuky fujitani
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
IgaHironobu
今日から使おうSmalltalk
今日から使おうSmalltalk
Sho Yoshida
会社でClojure使ってみて分かったこと
会社でClojure使ってみて分かったこと
Recruit Technologies
Recomendados
Kotlin/Native 「使ってみた」の一歩先へ
Kotlin/Native 「使ってみた」の一歩先へ
Takaki Hoshikawa
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
JP1/AJS2オペレータ勉強会
JP1/AJS2オペレータ勉強会
mizuky fujitani
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
IgaHironobu
今日から使おうSmalltalk
今日から使おうSmalltalk
Sho Yoshida
会社でClojure使ってみて分かったこと
会社でClojure使ってみて分かったこと
Recruit Technologies
MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良
Shinya Sugiyama
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
Phpをいじり倒す10の方法
Phpをいじり倒す10の方法
Moriyoshi Koizumi
PHP と SAPI と ZendEngine3 と
PHP と SAPI と ZendEngine3 と
do_aki
招生策略一~企業經營大師黃聰亮教授演講投影片
招生策略一~企業經營大師黃聰亮教授演講投影片
vincent8899
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
Junichiro Kazama
20150219 初めての「embulk」
20150219 初めての「embulk」
Hideto Masuoka
今さら聞けないDiとspring
今さら聞けないDiとspring
土岐 孝平
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
Writing Spring WebFlux more esay with kotlin
Writing Spring WebFlux more esay with kotlin
賢太郎 前多
systemd 再入門
systemd 再入門
Kazuhiro Nishiyama
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
一希 大田
Springを何となく使ってる人が抑えるべきポイント
Springを何となく使ってる人が抑えるべきポイント
土岐 孝平
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
決済サービスのSpring Bootのバージョンを2系に上げた話
決済サービスのSpring Bootのバージョンを2系に上げた話
Ryosuke Uchitate
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
FlutterでGraphQLを扱う
FlutterでGraphQLを扱う
IgaHironobu
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
Satoshi Kubo
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Java script patterns essentials
Java script patterns essentials
Jason Wang
JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14
BO Hong LI
Más contenido relacionado
La actualidad más candente
MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良
Shinya Sugiyama
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
Phpをいじり倒す10の方法
Phpをいじり倒す10の方法
Moriyoshi Koizumi
PHP と SAPI と ZendEngine3 と
PHP と SAPI と ZendEngine3 と
do_aki
招生策略一~企業經營大師黃聰亮教授演講投影片
招生策略一~企業經營大師黃聰亮教授演講投影片
vincent8899
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
Junichiro Kazama
20150219 初めての「embulk」
20150219 初めての「embulk」
Hideto Masuoka
今さら聞けないDiとspring
今さら聞けないDiとspring
土岐 孝平
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
Writing Spring WebFlux more esay with kotlin
Writing Spring WebFlux more esay with kotlin
賢太郎 前多
systemd 再入門
systemd 再入門
Kazuhiro Nishiyama
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
一希 大田
Springを何となく使ってる人が抑えるべきポイント
Springを何となく使ってる人が抑えるべきポイント
土岐 孝平
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
決済サービスのSpring Bootのバージョンを2系に上げた話
決済サービスのSpring Bootのバージョンを2系に上げた話
Ryosuke Uchitate
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
FlutterでGraphQLを扱う
FlutterでGraphQLを扱う
IgaHironobu
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
Satoshi Kubo
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
La actualidad más candente
(20)
MySQL 5.7とレプリケーションにおける改良
MySQL 5.7とレプリケーションにおける改良
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Phpをいじり倒す10の方法
Phpをいじり倒す10の方法
PHP と SAPI と ZendEngine3 と
PHP と SAPI と ZendEngine3 と
招生策略一~企業經營大師黃聰亮教授演講投影片
招生策略一~企業經營大師黃聰亮教授演講投影片
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
20150219 初めての「embulk」
20150219 初めての「embulk」
今さら聞けないDiとspring
今さら聞けないDiとspring
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Writing Spring WebFlux more esay with kotlin
Writing Spring WebFlux more esay with kotlin
systemd 再入門
systemd 再入門
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
Springを何となく使ってる人が抑えるべきポイント
Springを何となく使ってる人が抑えるべきポイント
JSON SchemaとPHP
JSON SchemaとPHP
決済サービスのSpring Bootのバージョンを2系に上げた話
決済サービスのSpring Bootのバージョンを2系に上げた話
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
FlutterでGraphQLを扱う
FlutterでGraphQLを扱う
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
Destacado
Java script patterns essentials
Java script patterns essentials
Jason Wang
JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14
BO Hong LI
Javascript
Javascript
Ryan Chung
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Joseph Chiang
Why API Security Is More Complicated Than You Think (and Why It’s Your #1 Pri...
Why API Security Is More Complicated Than You Think (and Why It’s Your #1 Pri...
ProgrammableWeb
Google Map Android API V2 setup guide
Google Map Android API V2 setup guide
CAVEDU Education
初心者 Git 上手攻略
初心者 Git 上手攻略
Lucien Lee
Best Practices for API Security
Best Practices for API Security
MuleSoft
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Kuro Hsu
Destacado
(10)
Java script patterns essentials
Java script patterns essentials
JS and NG - ntut iLab 2015/07/14
JS and NG - ntut iLab 2015/07/14
Javascript
Javascript
前端工程開發實務訓練
前端工程開發實務訓練
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Why API Security Is More Complicated Than You Think (and Why It’s Your #1 Pri...
Why API Security Is More Complicated Than You Think (and Why It’s Your #1 Pri...
Google Map Android API V2 setup guide
Google Map Android API V2 setup guide
初心者 Git 上手攻略
初心者 Git 上手攻略
Best Practices for API Security
Best Practices for API Security
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Similar a Javascript 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Joseph Chiang
Maintainable PHP Source Code
Maintainable PHP Source Code
Bo-Yi Wu
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
雲端運算20150521
雲端運算20150521
勝億 曾
180518 ntut js and node
180518 ntut js and node
Peter Yi
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
PHP & MySQL 教學
PHP & MySQL 教學
Bo-Yi Wu
Js的国(转载)
Js的国(转载)
Leo Hui
程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號
鍾誠 陳鍾誠
程式人雜誌 2015年五月
程式人雜誌 2015年五月
鍾誠 陳鍾誠
SCJP ch14
SCJP ch14
r82093403
Uliweb框架思想与编程
Uliweb框架思想与编程
modou li
D2-ETao-show
D2-ETao-show
leneli
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Symfony簡介
Symfony簡介
Ricky Su
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Similar a Javascript 入門 - 前端工程開發實務訓練
(20)
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Maintainable PHP Source Code
Maintainable PHP Source Code
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
AngularJS training in Luster
AngularJS training in Luster
雲端運算20150521
雲端運算20150521
180518 ntut js and node
180518 ntut js and node
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
PHP & MySQL 教學
PHP & MySQL 教學
Js的国(转载)
Js的国(转载)
程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號
程式人雜誌 2015年五月
程式人雜誌 2015年五月
SCJP ch14
SCJP ch14
Uliweb框架思想与编程
Uliweb框架思想与编程
D2-ETao-show
D2-ETao-show
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Symfony簡介
Symfony簡介
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
Más de Joseph Chiang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Let's Redux!
Let's Redux!
Joseph Chiang
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
Joseph Chiang
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
Joseph Chiang
JavaScript Promise
JavaScript Promise
Joseph Chiang
F2E for Enterprise
F2E for Enterprise
Joseph Chiang
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
F2E, the Keystone
F2E, the Keystone
Joseph Chiang
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Joseph Chiang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
Joseph Chiang
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Joseph Chiang
Git - The Social Coding System
Git - The Social Coding System
Joseph Chiang
miiiCasa is Fun
miiiCasa is Fun
Joseph Chiang
分享無名小站 API
分享無名小站 API
Joseph Chiang
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
Joseph Chiang
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
Joseph Chiang
不用不可之 Fiddler Debugging Proxy!
不用不可之 Fiddler Debugging Proxy!
Joseph Chiang
Open platform
Open platform
Joseph Chiang
Más de Joseph Chiang
(20)
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Let's Redux!
Let's Redux!
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
JavaScript Promise
JavaScript Promise
F2E for Enterprise
F2E for Enterprise
JavaScript Code Quality
JavaScript Code Quality
F2E, the Keystone
F2E, the Keystone
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Git - The Social Coding System
Git - The Social Coding System
miiiCasa is Fun
miiiCasa is Fun
分享無名小站 API
分享無名小站 API
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
不用不可之 Fiddler Debugging Proxy!
不用不可之 Fiddler Debugging Proxy!
Open platform
Open platform
Javascript 入門 - 前端工程開發實務訓練
1.
1
賦予生命 JavaScript 前端工程開發實務訓練 (3/8) 講師:蔣定宇 / josephj Copyright © 2012 FITPI. All rights reserved.
2.
2
HTML JavaScript CSS Copyright © 2012 FITPI. All rights reserved.
3.
3
正確認知 以漸進式支援的方式來開發網站 你的 HTML 規劃了結構、再用了 CSS 給予外觀 你的網站以可讓人觀看所有內容 JavaScript 是最後才實作的 Layer 主要目的在於增強網頁行為、讓使用者更好用 應避免一定要 JavaScript 才能使用的限制 Copyright © 2012 FITPI. All rights reserved.
4.
4
正確認知 ๏ 跟 Java 是完全不同的兩種語言。 ๏ JavaScript 並不只存在 Browser 中 ❖ Command-Line 命令行 ❖ Server-side 後端伺服器語言 ๏ Browser 裡多了 DOM 的 API、讓 JavaScript 能存取 HTML。 Copyright © 2012 FITPI. All rights reserved.
5.
5
JavaScript 的使用方式 著重於瀏覽器上的開發 Copyright © 2012 FITPI. All rights reserved.
6.
6
行間 JavaScript 直接在標籤內使用 on<事件> 屬性 <p on<事件>="JS 程式碼">...</p> 直接在 a 標籤的 href 屬性使用屬性 <a href="javascript:JS程式碼">...</a> 不推薦!將破壞 HTML 只有結構的原則! Copyright © 2012 FITPI. All rights reserved.
7.
7
嵌入式 JavaScript 直接將 JavaScript 寫在 HTML 內的作法 <script></script> 標籤 type 可省略 <script type="text/javascript"> JavaScript 程式碼 </script> 建議放置位置:</body> 之前 不推薦!將破壞 HTML 只有結構的原則! 只有入口網站需要(速度較快) Copyright © 2012 FITPI. All rights reserved.
8.
8
外部 JavaScript 引用外部 JavaScript 檔案(建議附檔名為 .js) <script/> 標籤配合 src 屬性 type 可省略 <script type="text/javascript" src="JS 案路徑"></script> 與外部檔案連結 var name = “Awoo”; alert(“Hello ” + name); ※ 不需 script 標籤 推薦!維持 HTML 只有結構的原則! Copyright © 2012 FITPI. All rights reserved.
9.
9
練習用 HTML http://f2eclass.com/lab/js/_template.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> // 在這邊寫 JavaScript 程式碼 </script> </body> </html> 雖然不推薦嵌入式,但這樣練習起來比較方便 :) Copyright © 2012 FITPI. All rights reserved.
10.
10
JavaScript 基礎 雖然不怎麼有趣、但對基礎是很重要的喔! Copyright © 2012 FITPI. All rights reserved.
11.
11
JavaScript 語法 我的第一個 JavaScript Hello! <Name> 字串需用引號 宣告 變數名稱(大小寫有別) 變數值 單雙引號皆可 var name = "Awoo"; alert("Hello! " + name); 字串合併、數值的加號都是用 + Copyright © 2012 FITPI. All rights reserved.
12.
12
JavaScript 語法 我的第一個 JavaScript Hello! <Name> var name = "Awoo"; alert("Hello! " + name); 練習看看 http://f2eclass.com/lab/js/hello.html Copyright © 2012 FITPI. All rights reserved.
13.
13
Variable 變數 顧名思義是變動的 var name = "Awoo"; name = name + " Chiang"; alert(name); //"Awoo Chiang" Copyright © 2012 FITPI. All rights reserved.
14.
14
Variable 變數 未定義型別 http://f2eclass.com/lab/js/undefined.html Uncaught ReferenceError: fruits is not defined alert(fruits); 執行到未宣告的變數, 會產生錯誤並中止執行 var fruits; alert(fruits); // undefined 有宣告就不會錯誤 http://f2eclass.com/lab/js/undefined-2.html Copyright © 2012 FITPI. All rights reserved.
15.
15
Variable 變數 數字型別 var age = 18; Copyright © 2012 FITPI. All rights reserved.
16.
16
Variable 變數 型別間的轉換 型別是非常鬆散的 可以用 typeof 關鍵字觀看型別 var age = 18 + ""; // "18" age = age*2; // 36 Copyright © 2012 FITPI. All rights reserved.
17.
17
Variable 變數 布林 型別 true / false var isBoy = true; Copyright © 2012 FITPI. All rights reserved.
18.
18
Variable 變數 陣列型別 var fruits = ["kiwifruit", "grape", "orange", "starfruit", "guava"]; alert(fruits[0]); // "kiwifruit" alert(fruits[4]); // "guava" alert(fruits[5]); // undefined 陣列的索引從 0 開始計算 Copyright © 2012 FITPI. All rights reserved.
19.
19
Variable 變數 物件型別 var students = { knock: { gender: "male", position: "manager" }, allen: { gender: "male", position: "engineer" } }; alert(students.knock.position); // "manager" 目前網路上主要的資料交換型態 - JSON Copyright © 2012 FITPI. All rights reserved.
20.
Variable 變數 20
函式 大括號、可換行 var getStudentNames = function () { // do something here... }; 要有分號! 不能省略 Copyright © 2012 FITPI. All rights reserved.
21.
Variable 變數 21
函式 - 參數、回傳 參數:讓函式使用起來更彈性 var getStudentPosition = function (data) { return data.knock.position; }; 回傳值(不一定要有) 函式的使用: var position = getStudentPosition(students); alert(position); Copyright © 2012 FITPI. All rights reserved.
22.
22
JavaScript 函式缺乏... ๏ 不提供 private(有替代作法) ๏ 多載 Overload - 無法依參數數量不同 執行同名但不同的函式。 ๏ 無法直接替參數指定預設值。 Copyright © 2012 FITPI. All rights reserved.
23.
23
Closure 函式中有非區域變數也非參數的變數 var foo = 1; var doSomething = function () { alert(foo); foo = foo + 1; foo 並不屬於此函式、是外界的變數 }; doSomething(); alert(foo); // 2 不同時期執行 foo 值會有所不同 doSomething(); 證明了:foo 是被保存變數而非變數值 alert(foo); // 3 Copyright © 2012 FITPI. All rights reserved.
24.
24
Closure 更複雜一點... var doOne = function () { var x = 10; return function (y) { return x + y; }; }; x 並不屬於此函式、是外界的變數 var doOther = doOne(); alert("doOther(10) : " + doOther(10)); alert("doOther(20) : " + doOther(20)); x 變數仍然被 Closure 保留著。 Copyright © 2012 FITPI. All rights reserved.
25.
25
Scope 作用域 var foo = 1; doSomething = function () { var foo = 2; 函式會形成一個作用域 foo = foo + 1; }; doSomething(); alert(foo); // ? Copyright © 2012 FITPI. All rights reserved.
26.
26
全域變數 未透過 var 或在底層宣告的,會影響所有的 JS var doSomething = function () { foo = 1; }; 缺乏 var 宣告,一旦 doSomething 執行、 doSomething(); foo 會變成全域變數。 <script type="text/javascript"> var foo = 1; </script> 在最上層宣告,同樣是全域變數 注意:禁止使用全域變數、會非常混亂! Copyright © 2012 FITPI. All rights reserved.
27.
27
匿名函式 函式不一定都需要有名字的 foo.onclick = doSomething; 點選時執行某個具名函式 foo.onclick = function () { 點選時執行匿名函式 // doSomething; }; <script type="text/javascript"> (function () { var foo = 1; 透過匿名函式產生作用域 }()); 解決全域變數的問題! </script> Copyright © 2012 FITPI. All rights reserved.
28.
運算子 Operator 23
加減乘除 令人混淆、避免使用! http://www.w3schools.com/js/js_operators.asp Copyright © 2012 FITPI. All rights reserved.
29.
運算子 Operator 24
比較運算子 http://www.w3schools.com/js/js_comparisons.asp Copyright © 2012 FITPI. All rights reserved.
30.
運算子 Operator 25
邏輯運算子 http://www.w3schools.com/js/js_comparisons.asp Copyright © 2012 FITPI. All rights reserved.
31.
運算子 Operator 26
Conditional 運算子 狀況成立 狀況不成立 variable = (condition) ? value1 : value2; 狀況 http://www.w3schools.com/js/js_comparisons.asp Copyright © 2012 FITPI. All rights reserved.
32.
流程判斷 27
if... else... if (狀況1) { } else if (狀況2) { } else if (狀況3){ } else { // 其他所有情況 } Copyright © 2012 FITPI. All rights reserved.
33.
28
練習:if... else... ๏ 寫一個判斷式,hour 變數在: ❖ 6 ~ 11 時:顯示 Good morning! ❖ 12 ~ 17 時:顯示 Good afternoon! ❖ 18 ~ 23 時:顯示 Good evening! ❖ 24 ~ 5 時:顯示 Good night! http://class.josephj.com/lab/js/js-if-else.html Copyright © 2012 FITPI. All rights reserved.
34.
29
var weekday = 1; switch (weekday) { case 1: alert("星期一"); break; case 2: alert("星期二"); 流程判斷 break; case 3: alert("星期三"); break; case 4: alert("星期四"); switch break; case 5: alert("星期五"); break; case 6: alert("星期六"); break; case 7: alert("星期日"); break; default: alert("什麼日子都不是!"); } Copyright © 2012 FITPI. All rights reserved.
35.
迴圈 30
for loop for (i = 開始 ; i < 結束 ; i++) { } 很多資料處理、重複性工作都需要用到迴圈 問題:從 1 加到 10 該怎麼做? Copyright © 2012 FITPI. All rights reserved.
36.
迴圈 31
foreach 主要針對物件類型的變數做處理 foreach (i in obj) { alert(i); // 此物件的第 n 個屬性的屬性名稱 alert(obj[i]); // 此物件的第 n 個屬性的屬性 } 練習:列出所有學生的名字 http://class.josephj.com/lab/js/js-foreach.html Copyright © 2012 FITPI. All rights reserved.
37.
22
練習:函式 var getStudentPosition = function (data) { return data.knock.position; }; var students = { knock: { gender: "male", position: "manager" }, allen: { gender: "male", position: "engineer" } }; var position = getStudentPositoin(students); alert(position); Copyright © 2012 FITPI. All rights reserved.
38.
33
物件導向基礎 簡單介紹物件導向 Copyright © 2012 FITPI. All rights reserved.
39.
34
物件導向基本觀念 ๏ 物件是獨立的個體,有自己的屬性及方法(人) ❖ 屬性是此個體的資料 例如人的「姓名」、「身高」、「體重」 ❖ 方法是此個體的動作 例如人「講話」、「走路」 ❖ 事件是此個體會 到的狀況 通常在方法執行後,例如人走路後 到了「跌倒」事件 Copyright © 2012 FITPI. All rights reserved.
40.
35
關於物件 如果把一個人當成一個物件... 屬性 綽號:小莊 事件 英文名:Kevin 烹 到 性別:男 方法 烹 完畢 星座:巨蟹 烹 var kvzhuang = { 攀岩完畢 "綽號": "小莊", "英文名": "Kevin", 走路 程式有蟲 "性別": "男", "星座": "巨蟹", 攀岩 "心情指數": 10, "烹 ": function () {}, 寫程式 "走路": function () {}, "攀岩": function () {}, "寫程式": function () {} }; Copyright © 2012 FITPI. All rights reserved.
41.
36
JavaScript 中、所有的型別都是物件! 都擁有自己的屬性跟方法!! Copyright © 2012 FITPI. All rights reserved.
42.
字串物件 37
任何字串變數都有以下屬性或函式 ๏ length 此字串總長度 ๏ replace(from, to) 把 from 改為 to ๏ indexOf(str) 從字串中找到 str 的位置 ๏ substr(x, y) 以索引 x 開始取 y 個字 ๏ substring(x, y) 以索引 x ~ y 取得部份內容 ๏ split() 拆開成陣列 http://www.w3schools.com/jsref/jsref_obj_string.asp Copyright © 2012 FITPI. All rights reserved.
43.
陣列物件 38
任何陣列變數都有以下屬性或函式 ๏ length 此陣列項目數量 ๏ push(item) 將 item 放入此陣列中 ๏ join(str) 將此陣列用 str 合併為字串 ๏ pop() ๏ splice() http://www.w3schools.com/jsref/jsref_obj_array.asp Copyright © 2012 FITPI. All rights reserved.
44.
日期物件 39
任何日期變數都有以下函式! ๏ getHours() 幾點 (0~23) ๏ getDate() 幾號 (1~31) ๏ getMinutes() 幾分 (0~59) ๏ getTime() 從 1970/1/1 0 時所經歷的毫秒數 (timestamp) http://www.w3schools.com/jsref/jsref_obj_string.asp Copyright © 2012 FITPI. All rights reserved.
45.
40
BOM 瀏覽器物件模型 ๏ Browser Object Model ๏ 由 Netscape 瀏覽器所制定 ๏ 提供了 JS 對瀏覽器存取的 API 介面 ๏ 核心物件為 window ๏ 不算是標準,但有時還是得用 Copyright © 2012 FITPI. All rights reserved.
46.
41
BOM 現今較少使用 BOM 中 document 以下的物件 Copyright © 2012 FITPI. All rights reserved.
47.
DOM 42
文件物件模型 ๏ Document Object Model ๏ 提供了 JS 對瀏覽器存取的 API 介面 ๏ 核心物件為 document ๏ 由 W3C 持續維護的標準 ๏ DOM 將整個 HTML 視為許多的節點、並提供 許多 API 方法存取、新增、刪除、修改節點 ๏ 我們只是透過 JavaScript 來操作 DOM API Copyright © 2012 FITPI. All rights reserved.
48.
43
DOM Tree <!DOCTYPE html> <html> <head> <title>Trees, trees, everywhere</title> </head> <body> <h1>Trees, trees, everywhere</h1> <p>Welcome to a <em>really</em> boring page.</p> <div> Come again soon. <img src="come-again.gif" /> </div> </body> </html> 標籤、文字、屬性都是 DOM 的一部分 Copyright © 2012 FITPI. All rights reserved.
49.
44
如何存取這些節點? <div id="article"> <h1>新店市好吃的餐廳</h1> <ul class="restaurant"> <li>可愛村便當:台北縣新店市大豐街8號</li> <li>阿輝現炒黃牛肉:台北縣新店市中興路三段225號</li> <li>黑人牛肉麵:台北縣新店市中興路三段176號</li> <li>蘇杭:台北縣新店市民權路25號2F</li> <li>王家包子:台北縣新店市國校路25號之1</li> <li>辣。四川成都小炒:台北縣新店市吉安路2-1號</li> <li>山東餃子館:台北縣新店市中央路133巷19號1樓</li> <li>樂陶然健康小火鍋:台北縣新店市中央五街2號</li> <li>六六火鍋:台北縣新店市中央路89號</li> <li>龍門客棧:台北縣新店市中央路98號之1</li> <li>麵對麵:台北縣新店市中央路33號</li> </ul> </div> Copyright © 2012 FITPI. All rights reserved.
50.
45
如何取得節點 ๏ document.getElementById() ๏ document.getElementsByTagName() ๏ document.getElementsByClassName() ๏ BOM 所提供的方法(不建議) ๏ 很長一串?後面介紹 JavaScript 函式庫時都 可以輕鬆解決! http://f2eclass.com/lab/js/dom-access.html http://class.josephj.com/lab/js/js-dom-access.html Copyright © 2012 FITPI. All rights reserved.
51.
常用的屬性或方法 46
๏ innerHTML 讀寫其內容 ๏ nodeName 取得標籤名稱 ๏ nodeValue 取得標籤的值 ๏ style 設定此標籤的樣式 ๏ 遊走節點:parentNode, childNodes, nextSibling, previousSibling ๏ 處理節點:appendChild, removeChild, cloneNode http://f2eclass.com/lab/js/dom-attribute.html http://class.josephj.com/lab/js/js-dom-method.html http://f2eclass.com/lab/js/dom-method.html Copyright © 2012 FITPI. All rights reserved.
52.
節點的操作 52
๏ 新增一個節點到網頁 (DOM) 中。 ❖ 建立物件參考(還沒實際放到 DOM 中) ✦ var el = document.createElement("標籤名稱"); ❖ 設定此節點的屬性與內容,例如: ✦ el.innerHTML = "blahblahblah" ❖ 針對要掛載的母節點、使用 appendChild / insertBefore 屬性 ✦ var list = document.getElementById("photos"); list.appendChild(el); ๏ 刪除一個節點 ❖ 先取得此節點參考,再以母節點做刪除。 ❖ el.parentNode.removeChild(el); // 有夠囉嗦的 XD ๏ 複製使用 cloneNode、移動使用 appendChild Copyright © 2012 FITPI. All rights reserved.
53.
53
練習:建立節點 http://f2eclass.com/lab/js/dom-appendchild.html 將陣列轉換為 li 列表 var items = [ "可愛村便當:台北縣新店市大豐街8號", "阿輝現炒黃牛肉:台北縣新店市中興路三段225號", "黑人牛肉麵:台北縣新店市中興路三段176號", "蘇杭:台北縣新店市民權路25號2F", for (var i = 0, j = items.length; i < j; i++) { "王家包子:台北縣新店市國校路25號之1", "辣。四川成都小炒:台北縣新店市吉安路2-1號", items[i]; // 項目 i 的值 "山東餃子館:台北縣新店市中央路133巷19號1樓", "樂陶然健康小火鍋:台北縣新店市中央五街2號", } "六六火鍋:台北縣新店市中央路89號", "龍門客棧:台北縣新店市中央路98號之1", "麵對麵:台北縣新店市中央路33號" ]; 練習前面學到的迴圈、DOM 的取得與操作 Copyright © 2012 FITPI. All rights reserved.
54.
54
DOM Event ๏ JavaScript 跟其他語言最大的不同: 「事件驅動」(Event-driven) ๏ 當使用者做了什麼事情時,就去執行某 個函式 ๏ DOM 提供了多樣化的 Event: 滑鼠事件、鍵盤事件、表單事件、手機 事件... Copyright © 2012 FITPI. All rights reserved.
55.
48
事件列表 ๏ click 滑鼠點擊 ๏ focus 焦點 ๏ dblclick 滑鼠雙點擊 ๏ reset 表單重設 ๏ mousemove 滑鼠移動 ๏ select 選取文字 ๏ mouseover 滑鼠移入 ๏ submit 表單送出 ๏ mouseout 滑鼠移出 ๏ abort 中止傳送 ๏ mouseup 滑鼠點選方開 ๏ error 錯誤發生 ๏ keydown 按鍵壓到底 ๏ load 讀取完畢 ๏ keypress 按鍵開始壓 ๏ resize 文件改變大小 ๏ keyup 按鍵彈起來 ๏ scroll 滑鼠滾輪事件 ๏ blur 焦點移除 ๏ unload 文件卸除 ๏ change 內容改變 ๏ beforeunload Copyright © 2012 FITPI. All rights reserved.
56.
49
DOM Event 綁法 ๏ 直接在標籤內使用 on<事件> 屬性 ❖ <p on<事件>="JS 程式碼">...</p> ❖ 不建議。會破壞 HTML 只負責結構的原則。 ๏ 物件參考.on("事件名稱", 指定函式); ❖ 缺點:一個物件只能對一種事件綁一次,後面指定的會覆寫。 ๏ 物件參考.addEventListener("事件名稱", 指定函式); ❖ 優點:一個物件可以對多個事件綁多次,後面指定的優先執行。 ❖ 缺點:IE 舊版本的瀏覽器不支援。(IE 是用 attachEvent) Copyright © 2012 FITPI. All rights reserved.
57.
57
練習:結合事件 http://f2eclass.com/lab/js/dom-event.html 新增、刪除、修改節點的動作都由使用者操作 動作快的同學請幫我結合 Bootstrap! Copyright © 2012 FITPI. All rights reserved.
58.
事件處理機制 50
比較少用 常用 有時要綁的物件可能有幾百個, 可以用氣泡的概念綁最外層的即可 (委任) Copyright © 2012 FITPI. All rights reserved.
59.
課程回顧 59
๏ 漸進式支援:替網頁加上 JavaScript 後,提 供了行為、方便使用者操作。(但非必須) ๏ JavaScript 是程式語言,可存在於各種平台。 ๏ 處理瀏覽器的節點與事件由 DOM API 所提供 的、JavaScript 只是媒介。 ๏ DOM API 在每個瀏覽器的實作不同,寫起來 也麻煩,因此造就了像 YUI 與 jQuery 這樣 JavaScript Library 的誕生。 ๏ 本課程主要在建立基礎與正確認知,未來的 DOM 操作會使用 Library 來取代。 Copyright © 2012 FITPI. All rights reserved.
60.
60
Q&A Copyright © 2012 FITPI. All rights reserved.
Descargar ahora