JavaScript Web Development

JavaScript Web Development Introduction (1/2) Vito Jeng [email_address]

Agenda

Web 2.0 & Ajax Architecture
Unobtrusive 非侵入性
JavaScript
CSS

Web 2.0 Technology

AJAX
JavaScript
CSS
HTML

AJAX Architecture Browser HTTP Request HTML new page Classic Web Server Browser Asynchronous Request AJAX Web Server HTTP Request HTML new page Asynchronous Response (HTML/XML/JSON/Raw data)‏ simple javascript function ajax library

Ajax Running Scenario Browser Asynchronous Request Web Server HTTP Request HTML new page JSON Response

input URL

after page loaded: GET data

Asynchronous Request JSON Response click: for GET data Asynchronous Request JSON Response click: for POST data Asynchronous Request JSON Response

ready for user browsing

Unobtrusive 非侵入性

網頁三劍客 : HTML, CSS, JavaScrript

Content, Layout, Interaction

Example

內容 , 版面 Content, Layout

http://transcendingcss.com/
http://jquery.com/

內容 , 版面 , 互動 Content, Layout, Interaction

http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx

JavaScript

Advantage

Standard - most important things in the web world
Stable - save our investment
Widespread - every browser include
Script
Simple

Disadvantage

Some different implement in browser

javascript
object behavior in browser

Not easy
No strong IDE support

CONTENT ONLY !! Content

使用 HTML tag 組織文字內容
增強 SEO ( S earch E ngine O ptimization)
只使用與內容編排有關的 tag

div, hx, ul, li, a, ...
font, b, strong, ...

Layout

Use CSS to organize static layout

p { font-size:100%; margin-right:20px; } #content { padding:0.5em 0 1em; }

Interaction MOUSE OVER

Use JavaScript to improve dynamic & interaction effect

JavaScript 使用JavaScript將HTML(內容)切割至不同的分頁(Tab) 使用JavaScript將HTML(內容)做篩選(Filter) 提昇客戶瀏覽體驗

JavaScript feature

C like
dynamic type – duck typeing

If it walks like a duck and quacks like a duck, I would call it a duck.

prototype based
runtime evaluation

eval function

variable scope varA = ‘Hello’; console.log(varA); console.log(window.varA); function testScope (){ var varB = ‘javascript’; console.log(varB); } testScope(); console.log(varB); function logMessage (msg){ console.log(msg); }; logMessage('Hi'); window['logMessage']('Hi');

Array var cars = new Array(car1, car2, car3); var cars = [car1, car2, car3]; // array initializer cars.push( car4 ); var mix = [100, ‘Good’, [1,2,3], cars];

Object var customer = { name: ‘John’, address: ‘Taiwan’, tel: ‘123456’, orders: [ {pid: 1, qty: 3, amount: 120}, {pid: 8, qty: 1, amount: 800} ] }; var car = new Object(); var car = {color:’red’, price: 1500}; // object initializer car.color = ‘red’; car.price = 1500; car[‘door’] = 2; console.log( car[‘color’] ); console.log( car[‘price’] ); console.log( car.door ); delete car.price; if ('price' in car) car.price = 1200; if (car.price !== undefined) car.price = 1600

JSON data format var customer = { name: ‘John’, address: ‘Taiwan’, tel: ‘123456’, orders: [ {pid: 1, qty: 3, amount: 120}, {pid: 8, qty: 1, amount: 800} ] }; var data="{name: ‘John’,address: ‘Taiwan’,tel: ‘123456’,orders: [{pid: 1, qty: 3,amount: 120},{pid: 8, qty: 1, amount: 800}]}"; var customer = eval ('(' + data + ')');

JavaScript Object Notation

http://json.org/
widespread use
small ,simple to convert

Loop var cars = [] for (var i=0; i<cars.length; i++){ // do something... } var car = {color:’red’, price: 1500000}; // object initializer for (var name in car) { console.log(car[name]); }

Function function sum(a, b) { return a+b; } console.log(sum(1,2)); var sum = function(a, b){ return a+b; } var b = sum; console.log( b(1,2) ); var sum = function(){ var a = arguments[0]; var b = arguments[1]; return a+b; } console.log( sum(1,2) ); var ftp = { download: function(file){ // do something }, upload: function(file){ // do something } }

Function // constructor var Customer = function(name, address){ this.name = name; this.address = address; this.say = function(msg){ alert(this.name+':'+msg); } } var c1 = new Customer('vito', 'Hsinchu'); var c2 = new Customer('john', 'Taipei'); console.log(c1); console.log(c2); c1.say('JavaScript'); c2.say('Python'); c1.say.call(c2, 'JavaScript');

Why CSS ?

CSS

解除 HTML 的混亂狀態
強大的樣式指令
撰寫容易
重覆使用
JavaScript Library 支援

CSS .css file: p {font-size: 12px} h1,h2,h3,h,h5,div {color: red;} .content { font-size:12px; color:red; }

CSS .html file: <style type='text/css'> p {font-size: 12px} h1,h2,h3,h,h5,div {color: red;} .content { font-size:12px; color:red; } </style>

CSS inline style: <div style='font-size:12px; color:red;'> <p></p> <p></p> </div>

CSS outline p { font-size: 12px; color: red; } p -> selector font-size, color -> property 12px, red -> value font-size: 12px; -> declaration

Selector 選取項

最強大的指令 – 大海撈針
全部選取 ( 群組 ): ＊
標籤選取 ( 群組 ) : div, p, ...
類別選取 ( 群組 ) : .class_name
ID 選取 ( 單一 ): # id_name

Selector 選取項 * {font-size:12px;} .content {color:red;} div[class] {color: red;} div[class=‘content’] {color: red;}

階層式選取 div {color: black;} div p a {color: blue;} div.content p a {color: mediumblue;} #special p a {color: navy;}

Case study

Tutorials:Live Examples of jQuery

http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

Ajax using jQuery

load HTML/JSON data

http://docs.jquery.com/Ajax/load
http://docs.jquery.com/Ajax/jQuery.getJSON

callback function

http://docs.jquery.com/How_jQuery_Works#Callbacks_and_Functions

Learning path sharing

選擇一個你喜歡的 Library, 持續使用 .

Database WebAP: 使用 ExtJS
Content Web: 使用 jQuery

立刻使用 Firefox 並裝上 Firebug !!
拒絕使用 document.getElementById(), 提高生產力
跨瀏覽器的問題 (javascript, css, browser) - 避免正面衝突

直接使用 Library, 避開大部份問題

透過 community 學習 : example, document
逐步提昇 javascript 基本概念即可 .
CSS 能力 :

Database WebAP: 具備 CSS 基本能力即可 +Firebug
Content Web: 提昇 CSS 能力 , 進入 Zen Garden 層次

進入前 , 挑選稱手的工具吧

Ajax - Aptana
Html / CSS – Dreamweaver(commerical)
Javascript – Spket, Aptana
Debug – FireBug
Other

Web Developer
PSPad

結論 : 沒有萬能工具

謝謝 !!

Home work

安裝 Firefox(FF) 及 Firebug(FB)
建立一個空白 HTML 頁面 , 在 FF 開啟 FB, 在 Console 頁面使用 console api 顯示 "Hello World"( 分別以 info, error, log, warn 顯示 )
請在 FB 的畫面手動輸入 p.15 內的程式 , 執行並觀察 window 物件的內容
請在 FB 的畫面手動輸入 p.18 內的程式 , 執行並觀察 customer 物件的內容
參考 p.20 建立 ftp 物件 , 並實際呼叫其方法

以下作業有時間 , 有興趣挑戰的同學 , 請完成 .