JavaScript語法專題知識講座公開課一等獎市優質課賽課獲獎課件_第1頁
JavaScript語法專題知識講座公開課一等獎市優質課賽課獲獎課件_第2頁
JavaScript語法專題知識講座公開課一等獎市優質課賽課獲獎課件_第3頁
JavaScript語法專題知識講座公開課一等獎市優質課賽課獲獎課件_第4頁
JavaScript語法專題知識講座公開課一等獎市優質課賽課獲獎課件_第5頁
已閱讀5頁，還剩31頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第一章JavaScript語法課程目標熟悉JavaScript的數據類型： 數值型、字符型、邏輯型、空值掌握JavaScript的表達式與運算符掌握JavaScript控制語句、內部對象掌握JavaScript自定義對象體驗項目——<顯示問候語> 想知道如何在瀏覽器中顯示早上（中午、晚上）好，同時顯示系統的當前日期和星期數嗎？打開記事本或者其他文本編輯器，輸入相關代碼，將其保存為后綴是“.html”的文件，通過瀏覽器打開該文件，就可以在瀏覽器窗口中看到如圖所示的顯示效果:知識結構1.1數據類型1.2表達式與運算符1.3控制語句1.4內部對象1.5自定義對象數據類型 JavaScript是一種基于客戶端瀏覽器、面向（基于）對象、事件驅動式的網頁腳本語言。JavaScript提供的腳本語言編程與C++非常相似，它只是去掉了C語言中有關指針等容易產生錯誤的內容，并提供了功能強大的類庫。JavaScript的格式JavaScript對書寫格式有如下要求：JavaScript語言區分大小寫。JavaScript腳本程序須嵌入到Html文件中。JavaScript腳本程序中不能包含Html標記代碼。使用JavaScript編寫程序時，一行只能寫一條語句。JavaScript語句末尾可以加分號，此時多條語句可以寫在一行，語句中間以分號隔開。JavaScript腳本程序可以獨立保存為一個外部文件，其中不包含<script></script>標簽。JavaScript腳本程序的幾種基本格式： 我們以在瀏覽器中顯示“HelloWorld!!!”為例，說明JavaScript腳本程序的幾種基本格式：（1） <script> document.write("HelloWorld!!!"); </script>（2） <scriptlanguage="JavaScript"> document.write("HelloWorld!!!"); </script>（3） <scriptlanguage="JavaScript"type="text/JavaScript"> document.write("HelloWorld!!!"); </script>（4） <scriptlanguage="JavaScript1.2">

document.write("HelloWorld!!!"); </script>（5） <scriptsrc="hello.js"></script> 語句document.write(“HelloWorld!!!”)保存在一個外部文件“hello.js”中（6） <scriptlanguage="JavaScript"> <!-- document.write("HelloWorld!!!"); --> </script>（7）使用JavaScript協議： <ahref="JavaScript:alert('HelloWorld!!!')">請單擊</a>或：<ahref="#"onclick="alert('HelloWorld!!!')">請單擊</a>或：<ahref="JavaScript://"onclick="alert('HelloWorld!!!')">請單擊</a>下面是將JavaScript腳本加入Web文檔中的例子：<html><head></head><body><scriptlanguage="JavaScript"> document.write("這是清華培訓基地");</script></body></html>基本數據類型JavaScript的四種基本數據類型如下：數值：整數型、浮點數型邏輯值：布爾型（True或False）字符串型空值JavaScript采用弱類型的形式，因而一個數據變量或常量不必先做聲明，而是在使用或賦值時確定其數據類型。常量整型常量 其整型常量可以使用十六進制、八進制和十進制的形式表示其值，例如：3721、0007、0xaff、（0Xaff）等實型常量 實型常量是由整數部分和小數部分組成，如12.32、193.98。可以使用科學計數法或標準方法表示：5E7、4e5、12.68等布爾值 布爾常量只有兩種狀態，True或False。它主要用來表示或說明一種狀態，用于控制操作流程字符型常量 是使用單引號（‘’）或雙引號（“”）括起來的一個或多個字符。如“ThisisabookofJavaScript”、“3245”、“ewrt234234”等字符型常量中也可以包含轉義字符轉義字符表轉義字符意義\b退格（Backspace）\f換頁（FormFeed）\n換行（NewLine）\r返回（CarriageReturn）\t制表符（Tab）\'單引號（'）\"雙引號（"）\\反斜線（\）變量 變量的主要作用是存取數據、提供存放信息的容器。 對于變量必須明確變量的命名、變量的類型、變量的聲明及其變量的作用域。 變量命名規則：首字符必須是大寫或小寫的字母或下劃線（_）或美元符（$）。后續的字符可以是字母、數字、下劃線或美元符。變量名稱不能是保留字。長度可以是任意。區分大小寫。約定：集中置頂。使用局部變量。易于理解：studentId避免混亂：usrname、usrName表達式與運算符表達式 在定義完變量后，就可以對它們進行賦值、改變、運算等一系列操作了，這一過程通常由表達式來完成。可以說它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術表達式、字串表達式、賦值表達式以及布爾表達式等。運算符 運算符是完成操作的一系列符號，在JavaScript中的算術運算符有：“+”、“-”、“*”、“/”等；比較運算符有：“!=”、“==”等；布爾邏輯運算符，如：“！”（邏輯非）、“|”（位或）、“||”（邏輯或）；字串運算符，如：“+”、“+=”等。雙目運算符單目運算符操作數1運算符操作數2運算符操作數操作數運算符算術運算符JavaScript中的算術運算符有單目運算符和雙目運算符。雙目運算符： +（加）、-（減）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位與)、<<（左移）、>>（右移）、>>>（右移，零填充）。

單目運算符 ~（取補）、++（遞加1）、--（遞減1）比較運算符 比較運算符的基本操作過程是：首先對它的操作數進行比較，然后返回一個布爾值True或False。

>（大于）、<（小于）、 <=（小于等于）、 >=（大于等于）、 ==（等于）、!=（不等于）、 ===（值及類型等于）、!==（值及類型不等于）

布爾邏輯運算符 在JavaScript中增加了幾個布爾邏輯運算符 !（邏輯非）、&=（與之后賦值）、&（位與）、 |=（或之后賦值）、|（位或）、 ^=（異或之后賦值）、^（位異或）、 ?：（三目操作符）、||（邏輯或）、==（等于）、!=（不等于）其中三目操作符的主要格式如下：操作數？結果１：結果２

若操作數的結果為真，則表達式的值為結果1，否則為結果2。控制語句 JavaScript常用的程序控制結構及語句 if語句的基本格式如下： if（表達式） { 語句段； }if-else語句的基本格式如下： if（表達式） { 語句段1； } else { 語句段2； }若表達式的值為True，則執行語句段1；否則執行語句段2。if-else語句是JavaScript中最基本的控制語句，通過它可以改變語句的執行順序。表達式中必須使用關系運算來實現判斷，它是由一個布爾值來估算的。它將零和非零的數分別轉化成False和True。若if后的語句有多行，則必須使用花括號將其括起來。if語句的嵌套if-else-if語句的基本格式如下：if（表達式1） 語句1；elseif（表達式2） 語句2；……elseif（表達式n） 語句n；else 語句n+1；

for循環for循環語句的基本格式： for（初始化；條件；增量） { 語句集； }功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體。說明：初始化參數：告訴循環的開始位置，必須賦予變量的初值。條件：用于判別循環的條件。若條件滿足，則執行循環體，否則跳出。增量：主要定義循環控制變量在每次循環時按什么方式變化。三個主要語句之間，必須使用分號分隔。

<script>for(vari=5;i>0;i--){ document.write("i=",i,"<BR>");}</script>while循環while循環語句的基本格式： while（條件） { 語句集； }while循環語句與for循環語句一樣，當條件為真時，重復循環，否則退出循環。<script> vari=5; while(i>0) { document.write("i=",i,"<BR>"); i--; }</script>do...while語句do…while語句的基本格式： do{

語句集； }while（表達式）<script> vari=5; do{ document.write("i=",i,"<BR>"); i--; }while(i>0)</script>break和continue語句 與C++語言相同，使用break語句使得循環從for或while循環中跳出，continue語句使得程序跳過循環內剩余的語句而進入下一次循環。 下面的例子使用break語句跳出循環，實現在while循環中只顯示i=5、i=4，當i=3時跳出循環。<script> vari=5; while(i>0) { if(i==3) break; document.write("i=",i,"<BR>"); i--; }</script> 下面的例子將用continue語句，實現在while循環中顯示i=4、i=2、i=1、i=0，當i=3時不輸出，直接進入下次的循環。<script> vari=5; while(i>0) { i--; if(i==3) continue; document.write("i=",i,"<BR>"); }</script>內部對象 JavaScript是基于對象的（Object-Based），而不是面向對象的（Object-Oriented）。之所以說它是一門基于對象的語言，主要是因為它沒有提供抽象、繼承、重載等有關面向對象語言的許多功能。而是把其它語言所創建的復雜對象統一起來，從而形成一個非常強大的對象系統。 雖然JavaScript語言是一門基于對象的語言，但它還是具有一些面向對象的基本特征。它可以根據需要創建自己的對象，從而進一步擴大JavaScript的應用范圍，編寫功能強大的Web文檔。對象的基礎知識對象的基本結構 JavaScript中的對象是由屬性（properties）和方法（methods）兩個基本元素構成的。前者是對象在實施其所需要行為的過程中，實現信息的裝載單位，從而與變量相關聯；后者是指對象能夠按照設計者的意圖而被執行，從而與特定的函數相聯。引用對象的途徑 一個對象要真正地被使用，可采用以下幾種方式獲得：引用JavaScript內部對象由瀏覽器環境中提供創建新對象 一個對象在被引用之前，這個對象必須存在，否則引用將毫無意義，而出現錯誤信息。有關對象的操作語句for...in語句with語句this關鍵字new運算符對象屬性的引用對象屬性的引用可由下列三種方式之一實現：使用點（.）運算符通過對象的下標實現引用通過字符串的形式實現對象的方法的引用在JavaScript中對象方法的引用是非常簡單的，比如： ObjectName.methods()假如引用university對象中的showmy()方法，則可使用： document.write(university.showmy())若引用Math內部對象中的cos()方法，則可以用： with(Math) document.write(cos(35)); document.write(cos(80));若不使用with則引用時相對要復雜些： document.write(Math.cos(35)) document.write(Math.cos(80))自定義對象 使用JavaScript可以創建自己的對象。雖然JavaScript內部和瀏覽器本身的功能已十分強大，但JavaScript還是提供了創建一個新對象的方法。使其不必像超文本標識語言那樣，求助于其它多媒體工具，就能完成許多復雜的工作。對象的定義JavaScript對象的定義，其基本格式如下：functionObject（屬性表）p1=prop1p2=prop2...this.meth=functionName1;this.meth=functionName2;...以下是一個關于university對象的定義：functionuniversity(name,city,Url){ =name; this.city=city; this.Url=Url;}創建對象實例一旦對象定義完成后，就可以為該對象創建一個實例了： NewObject=newObject(); 其中NewObject是新的對象，Object是已經定義好的對象。用上面的university對象創建實例：varU1=newuniversity("陜西省","西安市","");varU2=newuniversity("西安電子科技大學","西安","");

對象方法的使用 在對象中除了使用屬性外，有時還需要使用方法。對象的方法就是一個函數FunctionName，通過它實現自己的意圖。<script> functionuniversity(name,city,Url) { =name; this.city=city; this.Url=Url; this.showuniversity=showuniversity; } functionshowuniversity() { varstr=+""+this.city+""+this.Url; document.write("<LI>"+str); } varU1=newuniversity("陜西省","西安市",""); varU2=newuniversity("清華IT","北京","http:///"); U1.showuniversity(); U2.showuniversity();</script>

利用對象原型（prototype）為默認對象定義屬性

對象原型（prototype）的好處是可以接收變量傳來的值，例如下例中將實現一個字符串的替換，其中的對象原型用于接收一個函數的返回值。<script> Stotype.replaceAll=strReplace; functionstrReplace(findText,replaceText) { varstr=newString(this); while(str.indexOf(findText)!=-1){ str=str.replace(findText,replaceText); } returnstr; } myStr="告訴你—如果你正在做WEB開發,那么"+"JavaScript"+"會讓你事半功倍,功力大增."; document.write("<LI>原稿是：<BlockQuote>"+myStr+"</BlockQuote>"); document.write("<LI>利用replace()將「你」改成「您」："+"<BlockQuote>" +myStr.replace('你','您')+"</BlockQuote>"); document.write("<LI>利用自定義的字符串方法-全部取代" +"<BlockQuote>"+myStr.replaceAll('你','您')+"</BlockQuote>");</script>實踐項目——<顯示問候語> 首先輸入JavaScript標記，然后用newDate()生成一個日期對象。由于需要顯示早上（中午、晚上）

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論