2015秋前端開發(fā)課件-js基礎(chǔ)-02javascript開發(fā)介紹_第1頁
2015秋前端開發(fā)課件-js基礎(chǔ)-02javascript開發(fā)介紹_第2頁
2015秋前端開發(fā)課件-js基礎(chǔ)-02javascript開發(fā)介紹_第3頁
2015秋前端開發(fā)課件-js基礎(chǔ)-02javascript開發(fā)介紹_第4頁
2015秋前端開發(fā)課件-js基礎(chǔ)-02javascript開發(fā)介紹_第5頁
已閱讀5頁,還剩38頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

本章內(nèi)容動態(tài)HTML如何創(chuàng)建DHTML?XHTML,

CSS,

JavaScript,

DOM介紹JavaScript網(wǎng)頁中的JavaScriptJavaScript語法彈出窗口JavaScript中的調(diào)試動態(tài)HTML在客戶端的動態(tài)行為DHTML?動態(tài)HTML(DHTML)讓一個網(wǎng)頁能夠應(yīng)對用戶的行為,而產(chǎn)生反應(yīng)并改變DHTML包含HTML+CSS+JavaScriptDHTMLXHTMLCSSJavaScriptDOMDHTML

=

HTML

+

CSS

+

JavaScriptHTML定義了 內(nèi)容,通過語義 (頁眉,文段,列表,等)CSS為表現(xiàn)每個HTML文檔的外觀,定義了'規(guī)則'或'樣式'字體(語族,大小,顏色,權(quán)重,等)背景(顏 片,定位,重復(fù))定位和布局(頁面上的任何對象)JavaScript定義了動態(tài)行為為了用戶交互的編程邏輯,處理事件,等JavaScript網(wǎng)頁上的動態(tài)行為JavaScript語言,由網(wǎng)景公司為動態(tài)內(nèi)容開JavaScript是前端發(fā)輕量級,但是能力有限能夠用作面 象語言嵌入到你的HTML頁面中通過Web瀏覽器解釋和桌面技術(shù)客戶端,簡單和靈活操作DOM很強JavaScript優(yōu)勢JavaScript允許如下交互:實現(xiàn)表單驗證對用戶行為產(chǎn)生反應(yīng),如處理鍵盤在鼠標移動在 上時改變它頁面的段落顯示和內(nèi)容加載和改變動態(tài)化性能復(fù)雜的計算自定義HTML控件,如可滾動的表格實現(xiàn)AJAX功能JavaScript能做什么?能處理事件能讀和寫HTML元素并修改DOM樹能從數(shù)據(jù)驗證能

/修改瀏覽器緩存能檢測用戶的瀏覽器和操作系統(tǒng)能用面

象語言能處理異常能執(zhí)行異步服務(wù)器調(diào)用(AJAX)JavaScript引擎依賴于瀏覽器Chrome的V8,

IE的Chakra,

Firefox的Spidermonkey,

Safari的JavaScriptCore,

等服務(wù)內(nèi)存管理/GC

回收Just-in-Time即時編譯類型系統(tǒng)等第一個<html><body><script

type="text/javascript">o

JavaScript!');alert('</script></body></html>第一個JavaScript演示使用JavaScript代碼JavaScript代碼能夠位于:head中的<script>body中的<script> –并不外部文件,通過head中的<script>文件通常有.js擴展名高度建議.js文件可在瀏覽器緩存<script

src="scripts.js"

type="text/javscript"><!–

code

placed

here

will

not

be

executed!--></script>JavaScript–何時執(zhí)行?JavaScript代碼在網(wǎng)頁加載時執(zhí)行,或當瀏覽器觸發(fā)一個事件所有的語句在頁面加載時執(zhí)行一些語句僅定義為能夠在隨后調(diào)用的函數(shù)沒有編譯時間檢查屬性附著于"事件處理函數(shù)調(diào)用或代碼能夠通過器"當瀏覽器觸發(fā)事件時執(zhí)行<img

src="logo.gif"

onclick="alert('clicked!')"

/>從事件處理器調(diào)用JavaScript函數(shù)示例<html><head><script

type="text/javascript">function

test

(message)

{alert(message);}</script></head><body><img

src="logo.gif"onclick="test('clicked!')"

/></body></html>事件處理演示使用外部文件使用外部 文件:<html><head><script

src="sample.js"

type="text/javascript"></script></head><body><button

onclick="sample()"

value="Call

JavaScriptfunction

fromsample.js"/></body></html>外部JavaScript文件:function

sample()

{alert(' o

from

sample.js!')}外部JavaScript文件演示JavaScript語法JavaScript語法JavaScript語法類似于C#運算符(+,*,=,!=,&&,++,…)變量(無類型)條件語句(if,else)循環(huán)(for,while)數(shù)組(my_array[])和關(guān)聯(lián)數(shù)組(my_array['abc'])函數(shù)(能夠返回值)函數(shù)變量(像C#的委托)標準彈出框框有文字和[OK]按鈕只在 框中顯示一條信息確認框包含文字,[OK]按鈕和[Cencel]按鈕:提示框包含文字,輸入字段和默認值:alert("Some

text

here");confirm("Are

you

sure?");prompt

("enter

amount",

10);彈出框演示瀏覽器內(nèi)建對象瀏覽器內(nèi)建對象瀏覽器提供了一些只讀數(shù)據(jù):windowDOM樹的最頂端節(jié)點呈現(xiàn)瀏覽器的窗口?保存當前加載文檔的信息screen保存用戶的顯示屬性browser保存瀏覽器信息DOM層級–示例windownavigatorscreenhistorylocationformbuttonformform打開新窗口–示例window.open()"<html><head><title>Sample

Title</title></head><body><h1>SampleText</h1></body>");newWindow.status

=" o

folks";window-open.htmlvar

newWindow

=

window.open("",

"sampleWindow","width=300,

height=100,

bar=yes,status=yes,

resizable=yes");newWindow.

.write(導(dǎo)航對象alert(window.navigator.userAgent);瀏覽器窗體中的導(dǎo)航對象用戶(瀏覽器ID)瀏覽器窗體屏幕對象screen對象包含顯示信息window.moveTo(0,

0);

x

=

screen.availWidth;y

=

screen.availHeight;window.resizeTo(x,

y);文檔和位置對象提供一些特定對象的內(nèi)建數(shù)組,在當前加載的頁面上?.location用于 當前打開URL或重定向瀏覽器.links[0].href

=

"

";.write("This

is

some

<b>bold

text</b>");.location

=

"ht

/";瀏覽器內(nèi)建對象演示其他JavaScript對象數(shù)學(xué)對象Math對象提供一些數(shù)學(xué)函數(shù)for

(i=1;

i<=20;

i++)

{var

x

=

Math.random();x

=

10*x

+

1;x

=

Math.floor(x);.write("Random

number

("

+i

+

")

in

range

"

+"1..10

-->

"

+

x

+"<br/>");}math.html日期對象Date對象提供日期/日程表函數(shù)dates.html<p

id="timeField"></p>…var

now

=

new

Date();var

result

=

"It

is

now

"

+

now;.ge ementById("timeField").innerText

=result;計時器:setTimeout()讓一些事情發(fā)生(一次),在一個固定延遲之后var

timer

=

setTimeout('bang()',

5000);clearTimeout(timer);5秒以后語句執(zhí)行,這個函數(shù)被調(diào)用取消計時器計時器:setInterval()按固定間隔,重復(fù)發(fā)生一些事情var

timer

=

setInterval('clock()',

1000);函數(shù)每一秒調(diào)用一次clearInterval(timer);停止計時器計時器-示例<script

type="text/javascript">function

timerFunc()

{var

now

=

new

Date();var

hour

=

now.getHours();var

min

=

now.getMinutes();var

sec

=

now.getSeconds();.ge ementById("clock").value

=""

+

hour

+

":"

+

min

+

":"+

sec;}setInterval('timerFunc()',

1000);</script><input

type="text"

id="clock"

/>timer-demo.html其他JavaScript對象演示調(diào)試JavaScript調(diào)試JavaScript中發(fā)生現(xiàn)代瀏覽器有JavaScript控制臺,報告錯誤的地方錯誤可能在不同瀏覽器中不同一些工具用來調(diào)試JavaScript微軟Script

EditorIE插件支持斷點,監(jiān)視JavaScript語句調(diào)試器;打開編輯器FirebugFirebug–Firefox插件,用來調(diào)試JavaScript,CSS,

HTML支持斷點,監(jiān)視,JavaScript控制臺編輯器同樣對CSS和

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論