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

下載本文檔

版權(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論