版權(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年三季度報天津地區(qū)A股資產(chǎn)總計排名前十大上市公司
- 課題申報參考:家庭與政府養(yǎng)老互動視角下養(yǎng)老保險改革的經(jīng)濟影響與政策優(yōu)化研究
- 2025年兩個責(zé)任學(xué)習(xí)心得樣本(4篇)
- 基于2025年度標準的智能交通系統(tǒng)設(shè)計與施工勞務(wù)分包合同
- 2025年個人數(shù)據(jù)安全保密與風(fēng)險評估合同3篇
- 二零二五版網(wǎng)絡(luò)安全評估與整改服務(wù)合同2篇
- 基于2025年度市場預(yù)測的商品銷售框架協(xié)議3篇
- 2024系統(tǒng)采購合同
- 2024珠寶玉器買賣合同
- 2025版酒店客房裝修與綠色環(huán)保材料使用合同3篇
- 不同茶葉的沖泡方法
- 光伏發(fā)電并網(wǎng)申辦具體流程
- 建筑勞務(wù)專業(yè)分包合同范本(2025年)
- 企業(yè)融資報告特斯拉成功案例分享
- 五年(2020-2024)高考地理真題分類匯編(全國版)專題12區(qū)域發(fā)展解析版
- 《阻燃材料與技術(shù)》課件 第8講 阻燃木質(zhì)材料
- 低空經(jīng)濟的社會接受度與倫理問題分析
- 法考客觀題歷年真題及答案解析卷一(第1套)
- 央國企信創(chuàng)白皮書 -基于信創(chuàng)體系的數(shù)字化轉(zhuǎn)型
- 6第六章 社會契約論.電子教案教學(xué)課件
- 運動技能學(xué)習(xí)與控制課件
評論
0/150
提交評論