版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
本章內(nèi)容動(dòng)態(tài)HTML如何創(chuàng)建DHTML?XHTML,
CSS,
JavaScript,
DOM介紹JavaScript網(wǎng)頁(yè)中的JavaScriptJavaScript語(yǔ)法彈出窗口JavaScript中的調(diào)試動(dòng)態(tài)HTML在客戶端的動(dòng)態(tài)行為DHTML?動(dòng)態(tài)HTML(DHTML)讓一個(gè)網(wǎng)頁(yè)能夠應(yīng)對(duì)用戶的行為,而產(chǎn)生反應(yīng)并改變DHTML包含HTML+CSS+JavaScriptDHTMLXHTMLCSSJavaScriptDOMDHTML
=
HTML
+
CSS
+
JavaScriptHTML定義了 內(nèi)容,通過(guò)語(yǔ)義 (頁(yè)眉,文段,列表,等)CSS為表現(xiàn)每個(gè)HTML文檔的外觀,定義了'規(guī)則'或'樣式'字體(語(yǔ)族,大小,顏色,權(quán)重,等)背景(顏 片,定位,重復(fù))定位和布局(頁(yè)面上的任何對(duì)象)JavaScript定義了動(dòng)態(tài)行為為了用戶交互的編程邏輯,處理事件,等JavaScript網(wǎng)頁(yè)上的動(dòng)態(tài)行為JavaScript語(yǔ)言,由網(wǎng)景公司為動(dòng)態(tài)內(nèi)容開(kāi)JavaScript是前端發(fā)輕量級(jí),但是能力有限能夠用作面 象語(yǔ)言嵌入到你的HTML頁(yè)面中通過(guò)Web瀏覽器解釋和桌面技術(shù)客戶端,簡(jiǎn)單和靈活操作DOM很強(qiáng)JavaScript優(yōu)勢(shì)JavaScript允許如下交互:實(shí)現(xiàn)表單驗(yàn)證對(duì)用戶行為產(chǎn)生反應(yīng),如處理鍵盤(pán)在鼠標(biāo)移動(dòng)在 上時(shí)改變它頁(yè)面的段落顯示和內(nèi)容加載和改變動(dòng)態(tài)化性能復(fù)雜的計(jì)算自定義HTML控件,如可滾動(dòng)的表格實(shí)現(xiàn)AJAX功能JavaScript能做什么?能處理事件能讀和寫(xiě)HTML元素并修改DOM樹(shù)能從數(shù)據(jù)驗(yàn)證能
/修改瀏覽器緩存能檢測(cè)用戶的瀏覽器和操作系統(tǒng)能用面
象語(yǔ)言能處理異常能執(zhí)行異步服務(wù)器調(diào)用(AJAX)JavaScript引擎依賴于瀏覽器Chrome的V8,
IE的Chakra,
Firefox的Spidermonkey,
Safari的JavaScriptCore,
等服務(wù)內(nèi)存管理/GC
回收J(rèn)ust-in-Time即時(shí)編譯類(lèi)型系統(tǒng)等第一個(gè)<html><body><script
type="text/javascript">o
JavaScript!');alert('</script></body></html>第一個(gè)JavaScript演示使用JavaScript代碼JavaScript代碼能夠位于:head中的<script>body中的<script> –并不外部文件,通過(guò)head中的<script>文件通常有.js擴(kuò)展名高度建議.js文件可在瀏覽器緩存<script
src="scripts.js"
type="text/javscript"><!–
code
placed
here
will
not
be
executed!--></script>JavaScript–何時(shí)執(zhí)行?JavaScript代碼在網(wǎng)頁(yè)加載時(shí)執(zhí)行,或當(dāng)瀏覽器觸發(fā)一個(gè)事件所有的語(yǔ)句在頁(yè)面加載時(shí)執(zhí)行一些語(yǔ)句僅定義為能夠在隨后調(diào)用的函數(shù)沒(méi)有編譯時(shí)間檢查屬性附著于"事件處理函數(shù)調(diào)用或代碼能夠通過(guò)器"當(dāng)瀏覽器觸發(fā)事件時(shí)執(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語(yǔ)法JavaScript語(yǔ)法JavaScript語(yǔ)法類(lèi)似于C#運(yùn)算符(+,*,=,!=,&&,++,…)變量(無(wú)類(lèi)型)條件語(yǔ)句(if,else)循環(huán)(for,while)數(shù)組(my_array[])和關(guān)聯(lián)數(shù)組(my_array['abc'])函數(shù)(能夠返回值)函數(shù)變量(像C#的委托)標(biāo)準(zhǔn)彈出框框有文字和[OK]按鈕只在 框中顯示一條信息確認(rèn)框包含文字,[OK]按鈕和[Cencel]按鈕:提示框包含文字,輸入字段和默認(rèn)值:alert("Some
text
here");confirm("Are
you
sure?");prompt
("enter
amount",
10);彈出框演示瀏覽器內(nèi)建對(duì)象瀏覽器內(nèi)建對(duì)象瀏覽器提供了一些只讀數(shù)據(jù):windowDOM樹(shù)的最頂端節(jié)點(diǎn)呈現(xiàn)瀏覽器的窗口?保存當(dāng)前加載文檔的信息screen保存用戶的顯示屬性browser保存瀏覽器信息DOM層級(jí)–示例windownavigatorscreenhistorylocationformbuttonformform打開(kāi)新窗口–示例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)航對(duì)象alert(window.navigator.userAgent);瀏覽器窗體中的導(dǎo)航對(duì)象用戶(瀏覽器ID)瀏覽器窗體屏幕對(duì)象screen對(duì)象包含顯示信息window.moveTo(0,
0);
x
=
screen.availWidth;y
=
screen.availHeight;window.resizeTo(x,
y);文檔和位置對(duì)象提供一些特定對(duì)象的內(nèi)建數(shù)組,在當(dāng)前加載的頁(yè)面上?.location用于 當(dāng)前打開(kāi)URL或重定向?yàn)g覽器.links[0].href
=
"
";.write("This
is
some
<b>bold
text</b>");.location
=
"ht
/";瀏覽器內(nèi)建對(duì)象演示其他JavaScript對(duì)象數(shù)學(xué)對(duì)象Math對(duì)象提供一些數(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日期對(duì)象Date對(duì)象提供日期/日程表函數(shù)dates.html<p
id="timeField"></p>…var
now
=
new
Date();var
result
=
"It
is
now
"
+
now;.ge ementById("timeField").innerText
=result;計(jì)時(shí)器:setTimeout()讓一些事情發(fā)生(一次),在一個(gè)固定延遲之后var
timer
=
setTimeout('bang()',
5000);clearTimeout(timer);5秒以后語(yǔ)句執(zhí)行,這個(gè)函數(shù)被調(diào)用取消計(jì)時(shí)器計(jì)時(shí)器:setInterval()按固定間隔,重復(fù)發(fā)生一些事情var
timer
=
setInterval('clock()',
1000);函數(shù)每一秒調(diào)用一次clearInterval(timer);停止計(jì)時(shí)器計(jì)時(shí)器-示例<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對(duì)象演示調(diào)試JavaScript調(diào)試JavaScript中發(fā)生現(xiàn)代瀏覽器有JavaScript控制臺(tái),報(bào)告錯(cuò)誤的地方錯(cuò)誤可能在不同瀏覽器中不同一些工具用來(lái)調(diào)試JavaScript微軟Script
EditorIE插件支持?jǐn)帱c(diǎn),監(jiān)視JavaScript語(yǔ)句調(diào)試器;打開(kāi)編輯器FirebugFirebug–Firefox插件,用來(lái)調(diào)試JavaScript,CSS,
HTML支持?jǐn)帱c(diǎn),監(jiān)視,JavaScript控制臺(tái)編輯器同樣對(duì)CSS和
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年個(gè)人小型制造企業(yè)股權(quán)轉(zhuǎn)讓合同3篇
- 2025年物流公司提供一站式國(guó)際快遞服務(wù)長(zhǎng)期合同2篇
- 文化旅游基礎(chǔ)設(shè)施與運(yùn)營(yíng)行業(yè)2024年信用回顧與2025年展望 -新世紀(jì)
- 二零二五年度人工智能算法技術(shù)服務(wù)采購(gòu)合同4篇
- 2025年銷(xiāo)售渠道拓展勞動(dòng)合同補(bǔ)充協(xié)議書(shū)3篇
- 餐飲業(yè)商模創(chuàng)新路演模板
- 二零二五版3海上貨物運(yùn)輸合同-海上貨物運(yùn)輸風(fēng)險(xiǎn)評(píng)估與控制協(xié)議2篇
- 二零二五年度金融衍生品質(zhì)押典當(dāng)交易協(xié)議4篇
- 充電樁工程建設(shè)資金籌集與使用合同3篇
- 2025年度古建筑修復(fù)與裝修工程合同樣本4篇
- 不同茶葉的沖泡方法
- 《阻燃材料與技術(shù)》課件 第8講 阻燃木質(zhì)材料
- 低空經(jīng)濟(jì)的社會(huì)接受度與倫理問(wèn)題分析
- GB/T 4732.1-2024壓力容器分析設(shè)計(jì)第1部分:通用要求
- 河北省保定市競(jìng)秀區(qū)2023-2024學(xué)年七年級(jí)下學(xué)期期末生物學(xué)試題(解析版)
- 《中電聯(lián)團(tuán)體標(biāo)準(zhǔn)-220kV變電站并聯(lián)直流電源系統(tǒng)技術(shù)規(guī)范》
- 年夜飯營(yíng)養(yǎng)分析報(bào)告
- 食管癌的早期癥狀和手術(shù)治療
- 垃圾分類(lèi)和回收利用課件
- 北侖區(qū)建筑工程質(zhì)量監(jiān)督站監(jiān)督告知書(shū)
- 法考客觀題歷年真題及答案解析卷一(第1套)
評(píng)論
0/150
提交評(píng)論