HTML Javascript CSS林鉦育

本週目標

• 討論上週習題

• 完成第一個自介網頁 - 學會撰寫”靜態”網頁

• 另外一個世界 - Javascript 的使用

綠色變小的芭樂很簡單吧 !

今日的目標很簡單吧 !

需要的程式碼

HTML - head

• title 標題

• meta 提供編碼 , 網頁關鍵字 , 網頁描述

• script 提供動態網頁功能與事件處理

• css 提供網頁呈現格式設定

HTML - body

• a 連結

• div span 顯示區塊

• table 表格 td 欄位 tr 列 th 網頁標頭

• br 換行 hr 水平線

• form 表單 input 輸入資料

CSS

• #id

• .class

• tag

JS - Types of Variable• 整數 1 2 3 浮點數 1.1 1.2

• 文字 “ aha“

• 陣列 [‘a’,1,2]

• dictionary {a:’ 安安’ ,b:’ 你好嘛’ }

• function function(x,y){ return x+y; }

• object

JS- Scope

• 所有變數都綁在 window 底下

• 變數從裡到外一直找到同名的

• { } 就是定變數區域 [ES5 以前限函數內 ]

• var 是在目前區域 [ 函數 ] 內設立變數

• ES6 增加 let 可以在 control statement

JS - JSON Object

• 就是 Javascript Object Notation

• 就是剛剛看到的 dictionary

• 沒有更多特別的了 ... 以上

JS - Basic

• document.getElementById([ID])

• document.getElementsByTagName([Tag name])

• setTimeout([function],[time])

• document.write([HTML code])

jQuery

• <script src=“http://code.jquery.com/jquery-2.1.3.min.js” />

• 萬能的 $

• 起手 $(function(){ /* 做你要做的 */ });

Events

• HTML onLoad onClick …. on 系列

• Javascript

• jQuery

最後的兩件事情

• 做出個人自介網頁

• [Optional][Hard] 請設計網頁，在按下按鈕之後，每隔一秒在螢幕上增加一個數字，這個數字等於前兩個數字和，而第一與第二個數字是 1 ，同時文字顏色依序為 紅綠藍