版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
JavaScript1第三節(jié)一、JavaScript簡(jiǎn)介HTML給網(wǎng)絡(luò)信息傳遞帶來(lái)了極大的便利，但是，單純地使用HTML代碼進(jìn)行編輯具有一定的缺陷，它只能靜態(tài)地顯示一些已經(jīng)提供的固有資源，缺乏必要的用戶與客戶端、
用戶和服務(wù)器之間的交互，這使網(wǎng)頁(yè)的使用友好度受到一定限制。JavaScript的出現(xiàn)，滿足了用戶與客戶端互動(dòng)的需求，使得頁(yè)面和用戶之間不僅僅只是顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了動(dòng)態(tài)的可交互式的表達(dá)能力。什么是JavaScript？JavaScript被設(shè)計(jì)用來(lái)向HTML頁(yè)面添加交互行為。 JavaScript是一種腳本語(yǔ)言（腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言）。JavaScript由數(shù)行可執(zhí)行計(jì)算機(jī)代碼組成。JavaScript通常被直接嵌入HTML頁(yè)面。 JavaScript是一種解釋性語(yǔ)言（就是說(shuō)，代碼執(zhí)行不進(jìn)行預(yù)編譯）。所有的人無(wú)需購(gòu)買許可證均可使用JavaScript。2JavaScript是世界上最流行的編程語(yǔ)言。這門語(yǔ)言可用于
HTML
和web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。值得注意的是，雖然JavaScript與Java有緊密的聯(lián)系，但卻是兩種不同的語(yǔ)言。Java是SUN公司推出的面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，特別適合于Internet應(yīng)用程序開(kāi)發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴(kuò)展Netscape瀏覽器功能，而開(kāi)發(fā)的一種可以嵌入Web頁(yè)面中的基于對(duì)象和事件驅(qū)動(dòng)的解釋性語(yǔ)言。32.JavaScript示例：4寫(xiě)入HTML
輸出；對(duì)事件作出反應(yīng)；改變HTML
內(nèi)容；改變HTML
圖像；改變HTML
樣式；驗(yàn)證輸入；（1）寫(xiě)入HTML
輸出5<!DOCTYPE
html><html><body><p>JavaScript
能夠直接寫(xiě)入HTML
輸出流中：</p><script>document.write("<h1>This
is
a
heading</h1>");document.write("<p>This
is
a
paragraph.</p>");</script></body></html>（2）對(duì)事件作出反應(yīng)6<!DOCTYPEhtml><html><body><h1>我的第一段JavaScript</h1><p>JavaScript
能夠?qū)κ录鞒龇磻?yīng)。比如對(duì)按鈕的點(diǎn)擊：</p><button
type=“button"onclick="alert('e!')">點(diǎn)擊這里</button></body></html>（3）改變HTML
內(nèi)容7//找到元素//改變內(nèi)容<!DOCTYPE
html><html><body><h1>我的第一段JavaScript</h1><p
id="demo">JavaScript
能改變HTML
元素的內(nèi)容。</p><script>function
myFunction(){x=document.getElementById("demo");x.innerHTML="Hello
JavaScript!";}</script><button
type="button"onclick="myFunction()">點(diǎn)擊這里</button></body></html>（4）改變HTML
圖像8<!DOCTYPE
html><html><body><script>function
changeImage(){
element=document.getElementById('myimage')if
(element.src.match("bulboff")){
element.src="eg_bulbon.gif";
}else{
element.src="eg_bulboff.gif";
}}</script><img
id="myimage"
onclick="changeImage()"
src="eg_bulboff.gif"><p>點(diǎn)擊燈泡來(lái)點(diǎn)亮或熄滅這盞燈</p></body></html>（5）改變HTML
樣式9<!DOCTYPE
html><html><body><h1>我的第一段JavaScript</h1><p
id="demo">JavaScript
能改變HTML
元素的樣式。</p><script>function
myFunction(){x=document.getElementById("demo")//找到元素//改變樣式x.style.color="#ff0000";}</script><button
type="button"
onclick="myFunction()">點(diǎn)擊這里</button></body></html>（6）驗(yàn)證輸入10<!DOCTYPE
html><html><body><h1>我的第一段JavaScript</h1><p>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</p><input
id="demo"
type="text"><script>function
myFunction(){
var
x=document.getElementById("demo").value;if(x==""||isNaN(x)){
alert("Not
Numeric");
}}</script><button
type="button"onclick="myFunction()">點(diǎn)擊這里</button></body></html>3.在HTML中包含JavaScript11與在HTML中插入CSS樣式表不同，網(wǎng)頁(yè)設(shè)計(jì)者可以選擇在HTML頁(yè)面的任意位置添加JavaScript代碼。添加方法有兩種，一是在HTML文件當(dāng)中使用＜script＞標(biāo)記直接編寫(xiě)
JavaScript代碼，二是從外部的JavaScript文件導(dǎo)入到HTML文件中。兩種方式的語(yǔ)法格式如下：直接在HTML中添加JavaScript代碼<script
language="javascript">JavaScript代碼；……<
/script>導(dǎo)入JavaScript文件<script
language="JavaScript"
src="JavaScript文件地址"></script><i>
<body>
中的JavaScript12在本例中，JavaScript
會(huì)在頁(yè)面加載時(shí)向HTML
的<body>
寫(xiě)文本：<!DOCTYPEhtml><html><body><script>document.write("<h1>This
is
a
heading</h1>");document.write("<p>This
is
a
paragraph</p>");</script></body></html><ii><head>中的JavaScript
函數(shù)13您可以在HTML
文檔中放入不限數(shù)量的腳本。腳本可位于HTML的<body>或<head>部分中，或者同時(shí)存在于兩個(gè)部分中。通常的做法是把函數(shù)放入<head>部分中，或者放在頁(yè)面底部。這樣就可以把它們安置到同一處位置，不會(huì)干擾頁(yè)面的內(nèi)容。<!DOCTYPE
html><html><head><script>functionmyFunction(){
document.getElementById("demo").innerHTML="My
First
JavaScript
Function";
}</script></head><body><h1>My
Web
Page</h1><p
id="demo">A
Paragraph</p><button
type="button"
onclick="myFunction()">Try
it</button></body></html><iii>外部的JavaScript14<!DOCTYPEhtml><html><body><scriptsrc="myScript.js"></script></body></html>二、HTML
DOM
（文檔對(duì)象模型）（Document
Object
Model）15通過(guò)HTML
DOM，可訪問(wèn)JavaScript
HTML
文檔的所有元素。當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。HTML
DOM
模型被構(gòu)造為對(duì)象的樹(shù)。1.HTML
DOM
樹(shù)16通過(guò)可編程的對(duì)象模型，JavaScript
獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的HTML。JavaScript
能夠改變頁(yè)面中的所有HTML
元素；JavaScript
能夠改變頁(yè)面中的所有HTML
屬性；JavaScript
能夠改變頁(yè)面中的所有CSS
樣式；JavaScript
能夠?qū)?yè)面中的所有事件做出反應(yīng)；17查找HTML
元素：通常，通過(guò)JavaScript，您需要操作HTML
元素。為了做到這件事情，您必須首先找到該元素。有三種方法來(lái)做這件事：通過(guò)id
找到HTML
元素通過(guò)標(biāo)簽名找到HTML
元素通過(guò)類名找到HTML
元素18(1)通過(guò)id
查找HTML
元素19<!DOCTYPE
html><html><body><p
id="intro">Hello
World!</p><p>本例演示<b>getElementById</b>方法！</p><script>x=document.getElementById("intro");document.write('<p>id="intro"
的段落中的文本是：'+x.innerHTML+'</p>');</script></body></html>(2)通過(guò)標(biāo)簽名查找HTML
元素20<!DOCTYPE
html><html><body><p>Hello
World!</p><div
id="main"><p>The
DOM
is
very
useful.</p><p>本例演示<b>getElementsByTagName</b>方法。</p></div><script>var
x=document.getElementById("main");var
y=x.getElementsByTagName("p");document.write('id
為"main"
的div
中的第一段文本是：'+
y[0].innerHTML);</script></body></html>JavaScript
語(yǔ)句 JavaScript
語(yǔ)句是向?yàn)g覽器發(fā)出的命令。語(yǔ)句的作用是告
訴瀏覽器該做什么。瀏覽器會(huì)按照編寫(xiě)順序來(lái)執(zhí)行每條語(yǔ)句；通常我們?cè)诿織l可執(zhí)行的語(yǔ)句結(jié)尾添加分號(hào)（在JavaScript
中，用分號(hào)來(lái)結(jié)束語(yǔ)句是可選的）；JavaScript
對(duì)大小寫(xiě)是敏感的。JavaScript
是腳本語(yǔ)言。瀏覽器會(huì)在讀取代碼時(shí)，逐行地執(zhí)行腳本代碼。而對(duì)于傳統(tǒng)編程來(lái)說(shuō)，會(huì)在執(zhí)行前對(duì)所有代碼進(jìn)行編譯。21三、JavaScript語(yǔ)言概覽JavaScript
變量 變量可以使用短名稱（比如x和y），也可以使用描述性更好的名稱（比如age,sum,
totalvolume）。變量必須以字母開(kāi)頭，變量也能以$
和_
符號(hào)開(kāi)頭（不過(guò)我們不推薦這么做）變量名稱對(duì)大小寫(xiě)敏感（y
和Y
是不同的變量）提示：JavaScript
語(yǔ)句和JavaScript
變量都對(duì)大小寫(xiě)敏感。223.JavaScript
運(yùn)算符JavaScript
算術(shù)運(yùn)算符23JavaScript
賦值運(yùn)算符24用于字符串的+運(yùn)算符：+運(yùn)算符用于把文本值或字符串變量加起來(lái)（連接起來(lái)）。Eg：txt1="What
a
very";txt2="nice
day";
txt3=txt1+txt2;對(duì)字符串和數(shù)字進(jìn)行加法運(yùn)算：x=5+5;
document.write(x);x="5"+"5";
document.write(x);25x=5+"5";x="5"+5;document.write(x);document.write(x);比較運(yùn)算符=、！=、>、>=、<、<====全等（值和類型）邏輯運(yùn)算符！
&&
||條件運(yùn)算符variablename=(condition)?value1:value226代碼;27時(shí)執(zhí)行其他代碼;來(lái)執(zhí)行;分支語(yǔ)句:if
語(yǔ)句:只有當(dāng)指定條件為true
時(shí)，使用該語(yǔ)句來(lái)執(zhí)行if...else
語(yǔ)句:當(dāng)條件為true
時(shí)執(zhí)行代碼，當(dāng)條件為falseif...else
ifelse
語(yǔ)句:使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一switch
語(yǔ)句:使用該語(yǔ)句來(lái)選擇多個(gè)代碼塊之一來(lái)執(zhí)行;循環(huán)語(yǔ)句:JavaScript
支持不同類型的循環(huán)：for-循環(huán)代碼塊一定的次數(shù)；for/in-循環(huán)遍歷對(duì)象的屬性；while-當(dāng)指定的條件為true
時(shí)循環(huán)指定的代碼塊；do/while-同樣當(dāng)指定的條件為true
時(shí)循環(huán)指定的代碼塊；28For/In
循環(huán)JavaScript
for/in
語(yǔ)句循環(huán)遍歷對(duì)象的屬性；<!DOCTYPE
html><html><body><p>點(diǎn)擊下面的按鈕，循環(huán)遍歷對(duì)象"person"
的屬性。</p><button
onclick="myFunction()">點(diǎn)擊這里</button><p
id="demo"></p><script>function
myFunction(){ var
x,
txt="",
person={fname:"Bill",lname:"Gates",age:56};for
(x
in
person){ txt=txt
+
person[x];
}document.getElementById("demo").innerHTML=txt;}</script></body></html>29for/in語(yǔ)句的語(yǔ)法：for
(variable
in
object)statement;提供了一種遍歷對(duì)象屬性的方法。30Json格式（JavaScript
Object
Notation）：Json是一種輕量級(jí)的數(shù)據(jù)交換格式。21世紀(jì)初，DouglasCrockford尋找一種簡(jiǎn)便的數(shù)據(jù)交換格式，能夠在服務(wù)器之間交換數(shù)據(jù)。當(dāng)時(shí)通用的數(shù)據(jù)交換語(yǔ)言是XML，但是DouglasCrockford覺(jué)得XML的生成和解析都太麻煩，所以他提出了一種簡(jiǎn)化格式，也就是Json。Json的規(guī)格非常簡(jiǎn)單，只用一個(gè)頁(yè)面幾百個(gè)字就能說(shuō)清楚，而且DouglasCrockford聲稱這個(gè)規(guī)格永遠(yuǎn)不必升級(jí)，因?yàn)樵撘?guī)定的都規(guī)定了。31JSON語(yǔ)法規(guī)則：數(shù)據(jù)在名稱/值對(duì)中；數(shù)據(jù)由逗號(hào)分隔；花括號(hào)保存對(duì)象；方括號(hào)保存數(shù)組；32“北京市的面積為16800平方公里，常住人口1600萬(wàn)人。上海市的面積為6400平方公里，常住人口1800萬(wàn)?！睂?xiě)成json格式就是這樣：[{"城市":"北京","面積":16800,"人口":1600},{"城市":"上海","面積":6400,"人口":1800}]33json簡(jiǎn)單說(shuō)就是javascript中的對(duì)象和數(shù)組，通過(guò)這兩種結(jié)構(gòu)可以表示各種復(fù)雜的結(jié)構(gòu)。對(duì)象：對(duì)象在js中表示為“{}”括起來(lái)的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為：{key:value,
key:value,...}在面向?qū)ο蟮恼Z(yǔ)言中，key為對(duì)象的屬性，value為對(duì)應(yīng)的屬性值，取值方法為“對(duì)象.key”獲取屬性值。數(shù)組：數(shù)組在js中是中括號(hào)“[]”括起來(lái)的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為：[value1,value2,...]取值方式和所有語(yǔ)言中一樣，使用索引獲取。34var
people
=35{
"programmers":
[
{
"firstName":
"Brett",
"lastName":"McLaughlin","email":
"aaaa"
},
{
"firstName":
"Jason","lastName":"Hunter","email":
"bbbb"
},
{"firstName":
"Elliotte",
"lastName":"Harold","email":
"cccc"}
],"authors":
[
{
"firstName":
"Isaac",
"lastName":
"Asimov","genre":"science
fiction"
},
{
"firstName":
"Tad",
"lastName":
"Williams","genre":
"fantasy"
},
{
"firstName":
"Frank",
"lastName":
"Peretti","genre":
"christian
fiction"
}
],"musicians":
[
{"firstName":
"Eric","lastName":
"Clapton","instrument":
"guitar"
},
{"firstName":
"Sergei","lastName":"Rachmaninoff",
"instrument":
"piano"
}
]}？grammers[0].lastName;6.JavaScript
輸出36<!DOCTYPE
html><html><body><h1>My
First
Web
Page</h1><p
id="demo">My
First
Paragraph</p><script>
document.getElementById("demo").innerHTML="My
First
JavaScript";</script></body></html>寫(xiě)到文檔輸出：下面的例子直接把<p>元素寫(xiě)到HTML
文檔輸出中：37<!DOCTYPE
html><html><body><h1>My
First
Web
Page</h1><script>document.write("<p>My
First
JavaScript</p>");</script></body></html>
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 擠壓模擬課程設(shè)計(jì)
- 銀行支行的行政后勤工作綜述
- 寵物服務(wù)員工作總結(jié)
- 港口貨物裝卸合同三篇
- 三年級(jí)科學(xué)學(xué)科的教學(xué)工作總結(jié)
- 門診護(hù)士年終總結(jié)
- 【八年級(jí)下冊(cè)歷史】期中達(dá)標(biāo)測(cè)試卷
- 2024年統(tǒng)計(jì)員年終工作總結(jié)篇
- 2024-2025學(xué)年北京門頭溝區(qū) 初三（上）期末物物理試卷（含答案）
- 分包采購(gòu)委托合同（2篇）
- 《機(jī)修工基礎(chǔ)培訓(xùn)》課件
- 品質(zhì)黃燜雞加盟活動(dòng)策劃
- DLT 754-2013 母線焊接技術(shù)規(guī)程
- 設(shè)立數(shù)字經(jīng)濟(jì)產(chǎn)業(yè)園公司商業(yè)計(jì)劃書(shū)
- 部編版小學(xué)道德與法治五年級(jí)上冊(cè)單元復(fù)習(xí)課件(全冊(cè))
- 仙桃市仙桃市2023-2024學(xué)年七年級(jí)上學(xué)期期末數(shù)學(xué)檢測(cè)卷(含答案)
- 智慧農(nóng)場(chǎng)整體建設(shè)實(shí)施方案
- 航空公司個(gè)人年終總結(jié)（共12篇）
- 產(chǎn)品供貨方案、售后服務(wù)方案
- 蘇教版小學(xué)數(shù)學(xué)六年級(jí)上冊(cè)第4單元解決問(wèn)題的策略重難點(diǎn)練習(xí)【含答案】
- 安徽省池州市貴池區(qū)2023-2024學(xué)年高二數(shù)學(xué)第一學(xué)期期末綜合測(cè)試模擬試題含解析
評(píng)論
0/150
提交評(píng)論