javascri創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第1頁
javascri創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第2頁
javascri創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第3頁
javascri創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第4頁
javascri創(chuàng)新教育基礎(chǔ)與實(shí)踐課件_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第八章JavaScript介紹孫燾重點(diǎn)：CSS常用屬性

4JavaScript的基本語法

1JavaScript的事件

2document對(duì)象

3難點(diǎn)：JavaScript的事件機(jī)制

1document對(duì)象的結(jié)構(gòu)和常用屬性

2CSS格式與應(yīng)用

38.1JavaScript概述JavaScript的功能JavaScript的特性為什么要用JavaScriptJavaScript版的HelloworldJavaScript的編程方法8.1JavaScript概述8.1.1JavaScript的功能JavaScript（JS）是現(xiàn)在在Web上應(yīng)用最為廣泛的客戶段腳本編程語言。它能處理相當(dāng)多的任務(wù)，包括對(duì)表單數(shù)據(jù)的確認(rèn)到創(chuàng)建復(fù)雜的用戶界面。JS將成為WEB開發(fā)人員不得不掌握的語言。8.1JavaScript概述8.1.2JavaScript的特性JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁面中連接多個(gè)對(duì)象，與Web客戶交互作用。它是通過嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。8.1JavaScript概述8.1.3為什么要用JavaScriptJavaScript的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，是Java與HTML折中的選擇。與HTML配合使用。HTML只能顯示靜態(tài)頁面；JavaScript則可以實(shí)現(xiàn)動(dòng)態(tài)地進(jìn)行頁面編輯，輸入驗(yàn)證，提交表單等。8.1JavaScript概述8.1.4JavaScript版HelloWorld<html><body><scriptlanguage="javascript">

document.write("HelloWorld!");</script></body></html>8.1JavaScript概述8.1.4JavaScript版HelloWorldHtml代碼我們都已經(jīng)很熟悉了，其中僅僅多了一句<scriptlanguage="javascript">

document.write("HelloWorld!");</script>其中<script>標(biāo)簽表示要插入腳本代碼，其中l(wèi)anguage屬性表示是js代碼，隨后標(biāo)簽內(nèi)中的的document：文檔對(duì)象document是JavaScript中window（表示當(dāng)前窗口）和frames（表示當(dāng)前框架）對(duì)象的一個(gè)屬性，是顯示于窗口或框架內(nèi)的一個(gè)文檔。document.write()——可以向當(dāng)前文檔對(duì)象寫入一段字符串。8.1JavaScript概述8.1.4JavaScript版HelloWorld因?yàn)檫\(yùn)行腳本涉及到本地安全的問題，因此會(huì)出現(xiàn)下面這種情況，這是由于瀏覽器的安全性設(shè)置導(dǎo)致的。

8.1JavaScript概述8.1.4JavaScript版HelloWorld8.1JavaScript概述8.1.5JavaScript編程方法腳本開發(fā)人員員可以通過文文檔對(duì)象的屬屬性、方法和和事件來掌控控、操縱和創(chuàng)創(chuàng)建動(dòng)態(tài)的網(wǎng)網(wǎng)頁元素。每每一個(gè)網(wǎng)頁元元素（一個(gè)HTML標(biāo)簽）都對(duì)應(yīng)應(yīng)著一個(gè)對(duì)象象（object，所謂“對(duì)象象”）。文檔對(duì)象模型型把整張網(wǎng)頁頁組織成這樣樣的一個(gè)樹狀狀的結(jié)構(gòu)，樹樹結(jié)構(gòu)中的每每一個(gè)元素都都被視為一個(gè)個(gè)節(jié)點(diǎn)（node）。包括JavaScript在內(nèi)的各種編編程語言都可可以通過文檔檔對(duì)象模型來來訪問和改變變網(wǎng)頁的各種種細(xì)節(jié)。8.2JavaScript的基本語法JS腳本的基本結(jié)結(jié)構(gòu)JS的數(shù)據(jù)類型與與變量JS的控制語句JS的函數(shù)與對(duì)象象JS嵌入到HTML8.2JavaScript的基本語法8.2.1腳本的基本結(jié)結(jié)構(gòu)<scriptlanguage="JavaScript"><!--JavaScript語句；--></script>其中標(biāo)簽<script>表示使用js腳本語言而<!---->標(biāo)簽內(nèi)為js語句，因?yàn)檫@這種標(biāo)簽屬于于html語言的注釋語語句，這樣如如果瀏覽器不不支持js，那么js語句也不會(huì)顯顯示出來。8.2JavaScript的基本語法8.2.2JS的數(shù)據(jù)類型與與變量JS是區(qū)分大小寫寫的腳本語言言，其語法與與c/c++，java語言很相近。。變量命名規(guī)規(guī)則基本相同同。JS有很多數(shù)據(jù)類類型，如整數(shù)數(shù)，小數(shù)，時(shí)時(shí)間，字符串串，數(shù)組等等等。JS是一種弱數(shù)據(jù)據(jù)類型的語言言，變量聲明明只要用var就可以了。例例如vari;JS中的變量可以以指向任何對(duì)對(duì)象，包括基基本數(shù)據(jù)類型型，和HTMLDOM中任意標(biāo)簽對(duì)對(duì)象。8.2JavaScript的基本語法8.2.3JS的控制語句JS的if…else,for(;;),while,swich…case等語句的用法法與c語言等完全相相同。同時(shí)swich()中的常量還不不僅僅限于整整數(shù)。例如for(vari=0;i<10;i=i+1){if(i==3)document.write(“No~”);elsedocument.write(i);}8.2JavaScript的基本本語法法8.2.4JS的函數(shù)數(shù)與對(duì)對(duì)象Js的函數(shù)數(shù)聲明明使用用function關(guān)鍵字字。例例如functionmyFun(a){alert(a);returnfalse;}a為形參參，不不用帶帶數(shù)據(jù)據(jù)類型型返回值值可有有可無無，根根據(jù)具具體情情況而而定。。每個(gè)函函數(shù)都都是js的一個(gè)個(gè)對(duì)象象。函函數(shù)內(nèi)內(nèi)部可可以使使用this，表示示對(duì)象象本身身。例例如：：functionstudent(id,name){this.sid=id;this.sname=name;}8.2JavaScript的基本本語法法8.2.5JS嵌入到到HTMLJs代碼可可以嵌嵌入在在html中的任任何地地方，，但一一般都都放在在head標(biāo)簽之之內(nèi)Js不必有有main函數(shù)。。Js代碼在在html中順序序執(zhí)行行。在在html頁面載載入后后就已已經(jīng)運(yùn)運(yùn)行完完了。。8.3JavaScript對(duì)象JavaScript對(duì)象概概述JavaScript對(duì)象基基礎(chǔ)JavaScript內(nèi)置對(duì)對(duì)象Document對(duì)象8.3JavaScript對(duì)象8.3.1JavaScript對(duì)象概概述Javascript的一個(gè)個(gè)重要要功能能就是是面向向?qū)ο笙蟮墓δ埽?，通過過基于于對(duì)象象的程程序設(shè)設(shè)計(jì)，，可以以用更更直觀觀、模模塊化化和可可重復(fù)復(fù)使用用的方方式進(jìn)進(jìn)行程程序開開發(fā)。。一組包包含數(shù)數(shù)據(jù)的的屬性性和對(duì)對(duì)屬性性中包包含數(shù)數(shù)據(jù)進(jìn)進(jìn)行操操作的的方法法，稱稱為對(duì)對(duì)象。。比如如要設(shè)設(shè)定網(wǎng)網(wǎng)頁的的背景景顏色色，所所針對(duì)對(duì)的對(duì)對(duì)象就就是document，所用用的屬屬性名名是bgcolor，如document.bgcolor="blue"，就是是表示示使背背景的的顏色色為藍(lán)藍(lán)色。。8.3JavaScript對(duì)象8.3.2JavaScript對(duì)象基基礎(chǔ)對(duì)象是是JavaScript的基礎(chǔ)礎(chǔ)。實(shí)實(shí)際上上JavaScript語言中中的一一切都都是對(duì)對(duì)象，，JavaScript的多數(shù)數(shù)能力力也正正起源源于此此。上節(jié)說說明了了創(chuàng)建建一個(gè)個(gè)JavaScript對(duì)象的的方法法，即即functionstudent(){}。其中中this關(guān)鍵字字所指指的就就是這這個(gè)JavaScript對(duì)象的的屬性性?？梢允故褂胣ew關(guān)鍵字字初初始化化一個(gè)個(gè)對(duì)象象8.3JavaScript對(duì)象8.3.3JavaScript內(nèi)置對(duì)對(duì)象Window對(duì)象表表示瀏瀏覽器器窗口口。Navigator包含客客戶端端瀏覽覽器的的信息息。Screen包含客客戶端端顯示示屏的的信息息。History包含了了瀏覽覽器窗窗口訪訪問過過的URL。Location包含了了當(dāng)前前URL的信息息。Document代表整整個(gè)HTML文檔，，Event代表事事件的的狀態(tài)態(tài)8.3JavaScript對(duì)象8.3.4Document對(duì)象8.3JavaScript對(duì)象8.3.4Document對(duì)象8.3JavaScript對(duì)象8.3.4Document對(duì)象8.4JavaScript事件JS事件概概述JS事件方方法JS事件應(yīng)應(yīng)用8.4JavaScript事件8.4.1JS事件概概述用戶與與網(wǎng)頁頁交互互時(shí)產(chǎn)產(chǎn)生的的操作作，稱稱為事事件。。絕大大部分分事都都由用用戶的的動(dòng)作作所引引發(fā)，，如：：用戶戶按鼠鼠標(biāo)的的按鈕鈕，就就產(chǎn)生生click事件，，若鼠鼠標(biāo)的的指針針的鏈鏈接上上移動(dòng)動(dòng)，就就產(chǎn)生生mouseover事件等等等。。8.4JavaScript事件8.4.2JS事件方方法傳統(tǒng)的的方法法就是是定義義元素素的on...事件，，例如如對(duì)于于表單單中的的一個(gè)個(gè)按鈕鈕<inputtype="submit"value="百度一一下““onClick=““alert(‘ok’’);”>其中onClick=““alert(‘ok’’);”就表示示，當(dāng)當(dāng)單擊擊該按按鈕的的時(shí)候候，響響應(yīng)一一個(gè)alert方法。。8.4JavaScript事件8.4.3JS事件應(yīng)應(yīng)用—驗(yàn)證表表單<head><scriptlanguage="javascript">functioncheck(form){if(form.username.value==""||form.pwd.value==""){alert("請(qǐng)?zhí)顚憣懲暾畔⑾ⅲ?);returnfalse;}else{returntrue;}}functionjsSubmit(form){if(check(form)){form.submit();}}</script><title>JavaScript提交表表單</title></head><body><formaction="HelloWorld.html"method="post"name="theform">用戶名名：<inputtype="text"name="username"/>密碼：：<inputtype="password"name="pwd"/><inputtype="button"name="jssubmit"value="js提交"onclick="jsSubmit(theform)"/></form></body>8.4JavaScript事件8.4.3JS事件應(yīng)應(yīng)用—驗(yàn)證表表單在用戶戶輸入入登錄錄信息息（用用戶名名、密密碼等等）并并提交交表單單時(shí)，，需對(duì)對(duì)用戶戶輸入入的完完整性性進(jìn)行行驗(yàn)證證。若若未通通過驗(yàn)驗(yàn)證，，則提提示錯(cuò)錯(cuò)誤信信息；；若通通過驗(yàn)驗(yàn)證，，則跳跳轉(zhuǎn)到到HelloWorld.html。(1)在用戶戶點(diǎn)擊擊“js提交””按鈕鈕時(shí)觸觸發(fā)了了onclick事件，，以表表單為為參數(shù)數(shù)自動(dòng)動(dòng)調(diào)用用jsSubmit()方法。(2)在jsSubmit()方法中，又又調(diào)用了check()方法；(3)在check()方法中，對(duì)對(duì)表單數(shù)據(jù)據(jù)進(jìn)行檢測(cè)測(cè)：①如果表單單填寫完整整，則返回回true以繼續(xù)提交交表單；②如果表單單填寫不完完整，則提提示“請(qǐng)?zhí)钐顚懲暾判畔?！”，，返回false以中止表單單提交；③若表單驗(yàn)驗(yàn)證正確，，則通過form.submit()方法提交表表單，跳轉(zhuǎn)轉(zhuǎn)到HelloWorld.html。8.4JavaScript事件8.4.3JS事件應(yīng)用—驗(yàn)證表單8.4JavaScript事件8.4.3JS事件應(yīng)用—正則表達(dá)式式<script>functionverifyEmail(email){varmyReg=/^[_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;if(myReg.test(email)){returntrue;}returnfalse;}</script>8.4JavaScript事件8.4.3JS事件應(yīng)用—正則表達(dá)式式在JavaScript中，正則表表達(dá)式是由由一個(gè)RegExp對(duì)象表示的的?？梢允故褂靡粋€(gè)RegExp()構(gòu)造函數(shù)來來創(chuàng)建RegExp對(duì)象,也可以用JavaScript1.2中的一個(gè)特特殊語法來來創(chuàng)建RegExp對(duì)象。就像像字符串直直接量被定定義為包含含在引號(hào)內(nèi)內(nèi)的字符一一樣,正則表達(dá)式式直接量也也被定義為為包含在一一對(duì)斜杠(/)之間的字符符。/^[_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/：[_A-Za-z0-9]表示下劃線線或大小寫寫的字母或或數(shù)字。test()方法用來測(cè)測(cè)試某段字字符串是否否匹配指定定的正則表表達(dá)式。若若匹配，則則返回true；否則返回回false。8.5CSS格式與應(yīng)用用HTML排版缺點(diǎn)用CSS改進(jìn)排版CSS語法用CSS美化網(wǎng)頁8.5CSS格式與應(yīng)用用8.5.1Html排版的缺點(diǎn)點(diǎn)HTML主要側(cè)重于于定義內(nèi)容容，比如<p>表示一個(gè)段段落，<h1>表示標(biāo)題，，而并沒有有過多設(shè)計(jì)計(jì)HTML的排版和界界面效果。。隨著Internet的迅猛發(fā)展展，HTML被廣泛應(yīng)用用，上網(wǎng)的的人們當(dāng)然然希望網(wǎng)頁頁做得漂亮亮些，因此此HTML排版和界面面效果的局局限性日益益暴露出來來。為了解解決這個(gè)問問題，人們們也走了不不少?gòu)澛?，，用了一些些不好的方方法，比如如給HTML增加很多的的屬性結(jié)果果將代碼變變得很臃腫腫，將文本本變成圖片片，過多利利用table來排版，用用空白的圖圖片表示白白色的空間間等。直到到CSS出現(xiàn)。8.5CSS格式與應(yīng)用用8.5.2用css改進(jìn)排版CSS可算是網(wǎng)頁頁設(shè)計(jì)的一一個(gè)突破，，它解決了了網(wǎng)頁界面面排版的難難題。HTML的Tag主要是定義義網(wǎng)頁的內(nèi)內(nèi)容(Content)，而CSS決定這些網(wǎng)網(wǎng)頁內(nèi)容如如何顯示(Layout)。DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)準(zhǔn)（或稱““WEB標(biāo)準(zhǔn)”）中中常用術(shù)語語之一，通通常為了說說明與HTML網(wǎng)頁設(shè)計(jì)語語言中的表表格（table）定位方式式的區(qū)別，，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)標(biāo)準(zhǔn)中，不不再使用表表格定位技技術(shù)，而是是采用DIV+CSS的方式實(shí)現(xiàn)現(xiàn)各種定位位。8.5CSS格式與應(yīng)用用8.5.3Css的基本語法法CSS又名，層疊疊樣式表，，一個(gè)樣式式(Style)的語法由三三部分構(gòu)成成：選擇器(Selector)屬性(Property)屬性值(Value)必須把樣式式表信息包包括在<style>和</style>標(biāo)記中，為為了使樣式式表在整個(gè)個(gè)頁面中產(chǎn)產(chǎn)生作用，，應(yīng)把該組組標(biāo)記及其其內(nèi)容放到到<HEAD>和</HEAD>中去。8.5CSS格式與應(yīng)用用8.5.3Css的基本語法法基本語法：：CSS的定義是由由三個(gè)部分分構(gòu)成：選選擇符（selector），屬性性（properties）和屬性性的取值值（value）?；颈靖袷饺缛缦拢簊elector{property:value}（選擇符符{屬性：值值}）8.5CSS格式與應(yīng)應(yīng)用8.5.3Css的基本語語法選擇符組組：可以把相相同屬性性和值的的選擇符符組合起起來書寫寫，用逗逗號(hào)將選選擇符分分開，這這樣可以以減少樣樣式重復(fù)復(fù)定義：：h1,h2,h3,h4,h5,h6{color:green}8.5CSS格式與應(yīng)應(yīng)用8.5.3Css的基本語語法類選擇符符：用類選擇擇符能夠夠把相同同的元素素分類定定義不同同的樣式式，定義義類選擇擇符時(shí)，，在自定定類的名名稱前面面加一個(gè)個(gè)點(diǎn)號(hào)。。假如想想要兩個(gè)個(gè)不同的的段落，，一個(gè)段段落向右右對(duì)齊，，一個(gè)段段落居中中，可以以先定義義兩個(gè)類類：p.rig

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論