javascript
Web前端开发JavaScript基础(3)
JavaScript 一種直譯式腳本語言,是一種動態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型,它的解釋器被稱為JavaScript引擎,是瀏覽器的一部分,并且是被廣泛用于客戶端的腳本語言,JavaScript最早是在HTML網(wǎng)頁上使用,它是屬于網(wǎng)絡(luò)的腳本語言,現(xiàn)在已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果,通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的,現(xiàn)在隨著node.js引擎的出現(xiàn),使得JavaScript逐步成為了一種全棧開發(fā)語言了.
JavaScript 代碼引入
JS通常有兩種引入方式,理論上引入命令在body和head中都可以,但是推薦放在body代碼塊底部,因為Html代碼是從上到下執(zhí)行,如果Head中的js代碼耗時嚴重,就會導(dǎo)致用戶長時間無法看到頁面,如果放置在body代碼塊底部,那么即使js代碼耗時嚴重,也不會影響用戶看到頁面效果,只是js實現(xiàn)特效慢而已,規(guī)范化我們就直接將JS代碼統(tǒng)統(tǒng)放在body的最底部.
引入方式(1): 第一種引入方式就是在body標簽的區(qū)域內(nèi)直接使用<script></script>方式來引用代碼.
<body><script type="text/javascript">alert("hello lyshark")</script> </body>引入方式(2): 這是第二種引入方式,也就是在需要使用的地方直接引入一個外部js文件,通常寫在<head>標簽里.
<head><meta charset="UTF-8"><script src="test.js" type="text/javascript"></script><script src="/js/test.js" type="text/javascript"></script><script src="//cnd.mkdirs.com/test.js" type="text/javascript"></script> </head>JavaScript 定義變量
變量是程序設(shè)計語言里最重要、最基本的概念,與強類型語言不同的是 JavaScript 是弱類型語言,同一個變量可以一會存儲數(shù)值,一會存儲字符串,變量聲明有兩種方式,即顯式聲明和隱式聲明,根據(jù)變量定義的范圍不同,變量有全局變量和局部變量之分,直接定義的變量是全局變量,全局變量可以被所有的腳本訪問,在函數(shù)里定義的變量稱為局部變量,局部變量只在函數(shù)內(nèi)有效.如果全局變量和局部變量使用相同的變量名,則局部變量將覆蓋全局變量.
定義局部變量: 如下函數(shù)內(nèi)局部變量必須以var開頭,如果在函數(shù)內(nèi)未使用var,系統(tǒng)默認也是定義局部變量.
<body><script type="text/javascript">function func() {names = "lyshark"; //函數(shù)內(nèi)部默認轉(zhuǎn)成局部變量var age = 21; //定義局部變量標準寫法gender = "Man"; //默認局部變量alert("姓名:" + names);alert("年齡:" + age);alert("性別:" + gender);}func() //調(diào)用函數(shù),不掉用則不執(zhí)行</script> </body>定義全局變量: 如果我們想要定義全局變量,只需要在函數(shù)體外部定義,解釋器默認將外部變量當(dāng)成全局變量.
<body><script type="text/javascript">var func_names = "lyshark" //定義全局變量func_novar = "hello" //定義全局變量function func() {alert("打印全局變量:" + func_names)alert("打印全局變量:" + func_novar)}func() //調(diào)用函數(shù),不掉用則不執(zhí)行</script> </body>JavaScript 數(shù)據(jù)類型
JavaScript 是弱類型腳本語言,聲明變量時無需指定變量的數(shù)據(jù)類型, JavaScript 變量的數(shù)據(jù)類型是解釋時動態(tài)決定的,但 JavaScript 的值保存在了內(nèi)容中,也是有數(shù)據(jù)類型的 JavaScript 的基本數(shù)據(jù)類型有以下5種:
● 數(shù)值類型: 數(shù)值類型包含整數(shù)和浮點數(shù)
● 布爾類型: 布爾類型包括True和False
● 數(shù)組類型: 數(shù)組是一系列數(shù)據(jù)的集合
● 字符串類型: 字符串類型必須以雙引號引起來
● undefined: 用來確定一個已經(jīng)創(chuàng)建但沒有初始值的變量
● null: 用于表明某個變量的值為空
◆數(shù)值類型◆
與強類型語言,如C,JAVA,C++不同 JavaScript 的數(shù)值類型不僅包括所有的整型變量,也包括所有的浮點型變量, JavaScript 語言中的數(shù)值都以 IEEE754一1985 雙精度浮點數(shù)格式保存. JavaScript 中的數(shù)值形式非常豐富,完全支持用科學(xué)計數(shù)法表示.
整數(shù)變量: 使用顯式方式聲明三個變量,num1=1024,num2=5E2,num3=1.23e-3.
<body><script type="text/javascript">var num1 = 1024;var num2 = 0x1A;var num3 = 10;var num4 = 20;document.write("兩個數(shù)相加:" + (num3 + num4 ))</script> </body>浮點數(shù)變量: 分別聲明四個浮點數(shù)變量,其中表示方式可以有以下四種形式.
<body><script type="text/javascript">var num1 = 3.5659;var num2 = -8.1E12;var num3 = .1e12;var num4 = 32E-12;document.write("輸出一個浮點數(shù):" + num2)</script> </body>特殊的數(shù)值: 除了上面的數(shù)值表示類型外,JS默認定義了一些常量用來表示更多的類型值.
<body><script type="text/javascript">document.write("表示無窮大的特殊值:" + Infinity)document.write("特殊的非數(shù)字值:" + NaN)document.write("表示最大值:" + Number.MAX_VALUE)document.write("表示最小值:" + Number.MIN_VALUE)document.write("特殊的非數(shù)字值:" + Number.NaN)document.write("表示正無窮大的特殊值:" + Number.POSITIVE_INFINITY)document.write("表示負無窮大的特殊值:" + Number.NEGATIVE_INFINITY)</script> </body>數(shù)字轉(zhuǎn)換: parseInt(..)方法,可以實現(xiàn)將一個字符串轉(zhuǎn)換成整數(shù),如果不成功則返回NaN.
<body><script type="text/javascript">str = "1024";console.log(typeof str) //輸出字符串格式num = parseInt(str) //將字符串轉(zhuǎn)成數(shù)值,賦值給numconsole.log(num) //打印這個數(shù)值</script> </body>轉(zhuǎn)浮點數(shù)轉(zhuǎn)換: parseFloat(..)方法,可以實現(xiàn)將一個字符串轉(zhuǎn)換成浮點數(shù),如果不成功則返回NaN.
<body><script type="text/javascript">str = "1024";console.log(typeof str) //輸出字符串格式num = parseFloat(str) //將字符串轉(zhuǎn)成浮點數(shù),賦值給numconsole.log(num) //打印這個數(shù)值</script> </body>常用數(shù)值函數(shù): 這里舉三個例子,分別代表判斷有限值,保留小數(shù)點,和保留小數(shù)點后幾位.
<body><script type="text/javascript">var num1 = 1024;var num2 = 3.16159;var num3 = 100;document.write("判斷是否為有限值: " + isFinite(num1) + "<br>")document.write("指定要保留的小數(shù)點位數(shù): " + num2.toFixed(2) + "<br>")document.write("保留小數(shù)點后2位: " + num3.toFixed(2))</script> </body>◆字符串型◆
字符串是 JavaScript 中最常用的數(shù)據(jù)類型,幾乎每個程序都會用到字符串,字符串是由字符組成的數(shù)組,但在 JavaScript 中字符串是不可變的,可以訪問字符串任意位置的文本,但是JavaScript并未提供修改已知字符串內(nèi)容的方法,JS中有豐富的對字符串的操作函數(shù),常用的包括連接,查找替換,大小寫轉(zhuǎn)換等操作,如下是常用的操作格式:
obj.length 獲取字符串長度 obj.toString() 將數(shù)組轉(zhuǎn)換成字串 obj.trim() 移除字符串中空白 obj.trimLeft() 移除字符串中左邊空白 obj.trimRight() 移除字符串中右邊空白 obj.charAt(n) 返回字符串中的第n個字符 obj.concat(value, ...) 兩個或者多個字符串拼接obj.indexOf(substring,start) 返回指定字符串在字符串中首次出現(xiàn)的位置 obj.lastIndexOf(substring,start) 返回該元素在字符串中最后一次出現(xiàn)的位置 obj.substring(from,to) 提取字符串中介于兩個指定下標之間的字符obj.slice(start,end) 從已有字符串?dāng)?shù)組中返回選定的元素,切片 obj.split(delimiter,limit) 用于把一個字符串分割成字符串?dāng)?shù)組,分割 obj.toLowerCase() 將小寫字符串轉(zhuǎn)換成大寫 obj.toUpperCase() 將大寫字符串轉(zhuǎn)換成小寫obj.search(regexp) 從頭開始匹配,返回匹配成功的第一個字符串位置,g無效 obj.match(regexp) 全局搜索,如果正則中有g(shù)表示找到全部,否則只找到第一個 obj.replace(regexp,replacement) 正則替換,正則中有g(shù)則替換所有,否則只替換第一個匹配項$數(shù)字：匹配的第n個組內(nèi)容$&：當(dāng)前匹配的內(nèi)容$`：位于匹配子串左側(cè)的文本$'：位于匹配子串右側(cè)的文本$$：直接量$符號統(tǒng)計字串長度: 使用length方法獲取字符串的長度,并返回,可以直接返回,也可以賦值給變量.
<body><script type="text/javascript">var string = " hello lyshark 歡迎來到中國!";var num = string.length;document.write("統(tǒng)計字符串長度: " + string.length + "<br>")document.write("另一種統(tǒng)計長度的方法: " + num)</script> </body>移除字串空格: 通過使用trim()移除字符串兩邊空格,trimLeft(),trimRight()可以分別移除左邊和右邊空格.
<body><script type="text/javascript">var obj = " lyshark ";document.write("統(tǒng)計字符串大小: " + obj.length + "<br>")document.write("去除兩邊的空格: " + obj.trim() + "<br>")document.write("統(tǒng)計字符串大小: " + obj.length + "<br>")</script> </body>字符串拼接: 使用concat(,)將兩個或者多個字符串拼接在一起形成一個新的字符串.
<body><script type="text/javascript">var string1 = "hello ";var string2 = "lyshark";var string3 = "welcome";document.write("拼接一個字串: " + string1.concat(string2) + "<br>")document.write("拼接多個字串: " + string1.concat(string2,string3) + "<br>")</script> </body>字符串提取: 使用indexOf定位首次出現(xiàn)的位置,lastIndexOf定位最后出現(xiàn)的位置,substring實現(xiàn)提取任意字符串.
<body><script type="text/javascript">var str = "Hello World!";document.write("Hello 首次出現(xiàn)的位置: " + str.indexOf("Hello") + "<br/>")document.write("World 首次出現(xiàn)的位置: " + str.indexOf("World") + "<br/>")document.write("如果沒有出現(xiàn)過默認-1: " + str.indexOf("world"))</script> </body><body><script type="text/javascript">var str = "Hello World! Hello lyshark!";document.write("Hello 最后出現(xiàn)的位置: " + str.lastIndexOf("Hello") + "<br/>")document.write("World 最后出現(xiàn)的位置: " + str.lastIndexOf("World") + "<br/>")document.write("如果沒有出現(xiàn)過默認-1: " + str.lastIndexOf("world"))</script> </body><body><script type="text/javascript">var str = "Hello World!";document.write("從0偏移取數(shù)據(jù),向后取5個: " + str.substring(0,5) + "<br>")document.write("從0偏移取數(shù)據(jù),向后取11個: " + str.substring(0,11) + "<br>")document.write("從3偏移取數(shù)據(jù),向后取7個: " + str.substring(3,7))</script> </body>切片與分割: 通過使用slice()方法切割數(shù)組,split()方法用來切割字符串轉(zhuǎn)換成數(shù)組.
<body><script type="text/javascript">var array = new Array(5)array[0] = "LyShark";array[1] = "Admin";array[2] = "John";array[3] = "Adrew";document.write("返回整個數(shù)組: " + array + "<br>")document.write("返回[1]-[2]元素: " + array.slice(1,3) + "<br>")</script> </body><body><script type="text/javascript">var str = "hello world my names lyshark !";var test = "a:b:c:d:e:f:g:h"document.write("以空格作為分隔符分割字串: " + str.split(" ") + "<br>")document.write("將每個字母單獨變成一個數(shù)組: " + str.split("") + "<br>")document.write("以空格分隔,只分割前三個單詞: " + str.split(" ",3) + "<br>")document.write("以冒號作為分隔符,分割元素: " + test.split(":"))</script> </body>字符串查找: 查找字符串并返回所在位置,search() 和 match()方法作用基本一致,查找時支持正則匹配.
<body><script type="text/javascript">var string = "hello world my names lyshark my world !";document.write("精確查找字符串: " + string.search("lyshark") + "<br>")document.write("精確檢索字符串: " + string.search(/my/) + "<br>")document.write("忽略大小寫檢索: " + string.search(/world/i) + "<br>")</script> </body><body><script type="text/javascript">var string = "hello world my names lyshark my world 123 456 !";document.write("精確查找字符串: " + string.match("lyshark") + "<br>")document.write("全局匹配\d數(shù)字: " + string.match(/\d+/g) + "<br>")</script> </body>字符串替換: 查找并替換字符串,可以使用replace()方法,該方法也支持正則表達式.
<body><script type="text/javascript">var string = "hello world welcome to mkdirs.com hello lyshark HELLO mkdirs!";document.write("查找welcome替換成xxxx: " + string.replace(/welcome/,"xxxx") + "<br>")document.write("全局查找替換hello并替換: " + string.replace(/hello/g,"oooo") + "<br>")document.write("匹配替換并區(qū)分大小寫: " + string.replace(/HELLO/,"gggg") + "<br>")</script> </body>◆數(shù)組類型◆
任何編程語言中都存在數(shù)組,數(shù)組是一系列變量的集合,與其他強類型語言不同的是 JavaScript 中的數(shù)組元素的類型可以不相同,這也是動態(tài)語言的好處 JavaScript 語言本身只支持一維數(shù)組,但是也可以將兩個一維數(shù)組合起來變成一個二維數(shù)組使用,首先看一下常用的數(shù)組操作方法:
obj.length 獲取數(shù)組的大小 obj.push(ele) 給數(shù)組尾部追加元素 obj.pop() 從尾部獲取一個元素 obj.unshift(ele) 在數(shù)組頭部插入元素 obj.shift(ele) 在數(shù)組頭部移除元素obj.slice() 數(shù)組元素的切片 obj.concat(val,..) 多個數(shù)組相連接 obj.join(sep) 將數(shù)組連接起來變成字符串 obj.sort() 對數(shù)組元素進行排序 obj.reverse() 反轉(zhuǎn)數(shù)組中的元素obj.splice(n,0,val) 在數(shù)組指定位置插入元素 obj.splice(n,1,val) 在數(shù)組指定位置替換元素 obj.splice(n,1) 在數(shù)組指定位置刪除元素定義一維數(shù)組: 以下案例定義了3個數(shù)組,并且分別給數(shù)組賦值,然后打印結(jié)果.
<body><script type="text/javascript">var array = [1,2,3,4,5]; //創(chuàng)建數(shù)組,并有5個元素var array1 = []; //創(chuàng)建空數(shù)組var array2 = new Array() //同樣創(chuàng)建空數(shù)組array1[0] = "hello";array1[2] = "world";array2[0] = null;document.write("數(shù)組array大小: " + array.length + "<br>")document.write("數(shù)組array1大小: " + array1.length + "<br>")document.write("數(shù)組array2大小: " + array2.length)</script> </body>定義二維數(shù)組: 以下案例定義了3個數(shù)組,并且分別給數(shù)組賦值,然后通過循環(huán)語句打印數(shù)組值.
<body><script type="text/javascript">var value = [[1,2,3],[4,5,6],[7,8,9,10]]; //創(chuàng)建二維數(shù)組document.write("數(shù)組value大小: " + value.length + "<br>") //打印數(shù)組大小document.write("數(shù)組value[2]大小: " + value[2].length + "<br>") //打印數(shù)組大小for(var i=0;i<3;i++) //循環(huán)輸出數(shù)組元素{for(j in value[i]) //輸出每個數(shù)組元素的值{document.write(" " + value[i][j]);}document.write("<br>")}</script> </body>插入修改與刪除: 通過使用splice()方法,實現(xiàn)對元素的插入,增加,修改,刪除.
<body><script type="text/javascript">var array = new Array(5)array[0] = "admin";array[1] = "guest";array[2] = "lyshark";array[3] = "wall";document.write("當(dāng)前列表: " + array + "<br>")array.splice(2,1,"替換成我") //把第2個元素提換,替換1次document.write("替換列表: " + array + "<br>")array.splice(5,1,"插入元素") //在第5個位置上插入新元素document.write("插入列表: " + array + "<br>")array.splice(1,3,"刪除元素") //刪除第2個位置以后2個元素document.write("刪除列表: " + array + "<br>")</script> </body>PUSH/POP操作元素: 通過該命令可實現(xiàn)在數(shù)組結(jié)尾追加新元素,也可從結(jié)尾刪除元素.
<body><script type="text/javascript">var list = [1,2,3,4,5];document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")list.push(6)list.push(7) //在結(jié)尾添加新元素document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")list.pop()list.pop() //在結(jié)尾刪除元素document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")</script> </body>Shift/Unshift: 該命令可以實現(xiàn)在數(shù)組元素的頭部添加元素,或者是刪除頭部的元素.
<body><script type="text/javascript">var list = [4,5,6];document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")list.unshift(3)list.unshift(2)list.unshift(1) //在開頭添加元素document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")list.shift()list.shift() //從開頭刪除一個元素document.write("數(shù)組元素: " + list + " 總大小:" + list.length + "<br>")</script> </body>切片與連接: 使用slice()方法實現(xiàn)數(shù)組的切片,concat()實現(xiàn)數(shù)組連接,join()數(shù)組轉(zhuǎn)成字符串.
< ----------------------------[數(shù)組切片]---------------------------- > <body><script type="text/javascript">var array = new Array()array[0] = "admin";array[1] = "lyshark";array[2] = "Thomas";array[3] = "John";array[4] = "George";document.write("數(shù)組切片(從1號索引開始顯示元素): " + array.slice(1) + "<br>")document.write("數(shù)組切片(從3號索引開始顯示元素): " + array.slice(3) + "<br>")document.write("數(shù)組切片(只顯示1-2號元素切片): " + array.slice(1,3) + "<br>")</script> </body> < ----------------------------[數(shù)組連接]---------------------------- > <body><script type="text/javascript">var array = new Array();var a = [1,2,3,4,5];var b = [7,8,9,10];document.write("將數(shù)組連接: " + array.concat(a,b) + "<br>")document.write("直接連接并打印: " + a.concat(b) + "<br>")</script> </body> < ----------------------------[數(shù)組轉(zhuǎn)換]---------------------------- > <body><script type="text/javascript">var array = new Array(3);array[0] = "admin";array[1] = "guest";array[2] = "lyshark";document.write("直接連接成字符串: " + array.join() + "<br>")document.write("連接成字符串并添加一個分隔符: " + array.join("*") + "<br>")</script> </body>數(shù)組元素排序: 使用sort()方法實現(xiàn)數(shù)組的正向排列,reverse()則實現(xiàn)數(shù)組的反向排列.
<body><script type="text/javascript">var array = [12,65,77,89,32,-19,54,33,78]document.write("未排序前: " + array + "<br>")document.write("正向排序: " + array.sort() + "<br>")document.write("反向排序: " + array.reverse() + "<br>")</script> </body>◆布爾類型◆
在前面的案例中我們看了數(shù)值類型和字符串類型,該類型數(shù)據(jù)都有無窮大的數(shù)值,但是布爾行數(shù)據(jù)類型只有兩個取值,通常情況下布爾類型直接表示方式有兩個,True/False這兩個表示方式,分別代表真和假,它主要用于描述一種狀態(tài)或者標志,通常用來比較所得到的結(jié)果.
相等于不相等: 使用==雙等于號判斷兩數(shù)字是否相等,使用!=不等于號判斷兩數(shù)字是否不相等.
<body><script type="text/javascript">num1 = 1;num2 = 0;if(num1 == num2){document.write("兩數(shù)相等...")}else if(num1 != num2){document.write("兩數(shù)不相等...")}</script> </body>與運算與或運算: 使用||或運算符實現(xiàn)或運算,使用&&與運算符實現(xiàn)與運算.
<body><script type="text/javascript">num1 = "true";num2 = "false";num3 = "ok";if(num1 == num2 || num2 == num2){document.write("或運算的比較結(jié)果...")}if(num1 == num1 && num2 == num2){document.write("與運算的比較結(jié)果...")}</script> </body>◆類型轉(zhuǎn)換◆
JS是一種松散類型的程序設(shè)計語言,并沒有嚴格地規(guī)定變最的數(shù)據(jù)類型,己經(jīng)定義數(shù)據(jù)類型的變量可以在表達式中自動轉(zhuǎn)換數(shù)據(jù)類型,或通過相應(yīng)的方法來轉(zhuǎn)換數(shù)據(jù)類型,自動類型轉(zhuǎn)換有一定的規(guī)則,如果按照 JS的類型轉(zhuǎn)換規(guī)則,沒有轉(zhuǎn)換或者轉(zhuǎn)換的類型不對,就需要通過相應(yīng)的方法來進行轉(zhuǎn)換.
基本類型轉(zhuǎn)換: 基本類型轉(zhuǎn)換String:將字數(shù)字轉(zhuǎn)成字符串,Number:將其他類型轉(zhuǎn)為整數(shù),Boolean:其他類型轉(zhuǎn)成布爾類型.
<body><script type="text/javascript">document.write("其他類型轉(zhuǎn)換為字符串: " + String(1024) + "<br>");document.write("其他類型轉(zhuǎn)換為數(shù)值:" + Number("hello") + "<br>");document.write("其他類型轉(zhuǎn)換為布爾:" + Boolean(1) + "<br>");</script> </body>字符串轉(zhuǎn)成整數(shù): 字符串之間的數(shù)據(jù)轉(zhuǎn)換,與進制轉(zhuǎn)換實例.
<body><script type="text/javascript">document.write("將a轉(zhuǎn)換成整數(shù): " + parseInt("a") + "<br>");document.write("將a轉(zhuǎn)換成8進制,整數(shù): " + parseInt("a",8) + "<br>");document.write("將a轉(zhuǎn)換成2進制,整數(shù): " + parseInt("a",2) + "<br>");document.write("將a轉(zhuǎn)換成浮點數(shù): " + parseFloat("a") + "<br>");</script> </body>eval()計算: EVAL用于計算字符串表達式或語句的值.
<body><script type="text/javascript">var num = 10;var str = "1024";document.write("eval連接字符串: " + eval(str+num) + "<br>");</script> </body>JavaScript 流程控制
所謂流程就是程序代碼所執(zhí)行的順序,在任何一種語言中,程序控制流程是必須的,他能夠是整個程序減少混亂,使之順利的按照一定得方式執(zhí)行工作,在 JavaScript 中常用的程序流程有三種,順序結(jié)構(gòu),選擇結(jié)構(gòu),和循環(huán)結(jié)構(gòu),下面將依次演示他們的使用技巧.
if-else: 判斷if(num1>num2)如果條件滿足則執(zhí)行,否則判斷if(num2>num3),滿足執(zhí)行否則執(zhí)行else里面的代碼.
<body><script type="text/javascript">var num1 = 100;var num2 = 200;var num3 = 10;if(num1 > num2){var temp = num1 - num2;document.write("num1 大于 num2" + " 比num2多出:" + temp)}else if(num2 > num3){var temp = num2 - num3document.write("num2 大于 num3" + " 比num2多出:" + temp)}else{document.write("沒有合適的結(jié)果..")}</script> </body>switch: switch通常用于選擇結(jié)構(gòu),以下代碼用戶輸入一個數(shù)值,進入選擇結(jié)構(gòu)根據(jù)輸入數(shù)值執(zhí)行相應(yīng)代碼片段.
<body><script type="text/javascript">var temp;temp = prompt("請選擇輸入(1,2,*):","");switch(temp){case "1":document.write("你選擇了1號");break;case "2":document.write("你選擇了2號");break;default:document.write("你選擇了其他選項");break;}</script> </body>while: 循環(huán)執(zhí)行結(jié)構(gòu),while會一直循環(huán)下去,直到滿足(num <=100)的條件則跳出循環(huán),語句語法結(jié)構(gòu)如下.
<body><script type="text/javascript">var num = 0;var sum = 0;while(num <=100){sum = sum +num;num = num +1;document.write("當(dāng)前循環(huán): "+ num + " 當(dāng)前累加: " + sum);document.write("<br>")}document.write("從1+100...結(jié)果是:" + sum)</script> </body>for: 以下案例,通過for循環(huán)遍歷names列表,每次循環(huán)i++遞增,直到滿足(i<names.length)則退出循環(huán).
<body><script type="text/javascript">var names = ["admin","guest","lyshark","alex"]for(var i=0;i<names.length;i++){document.write("當(dāng)前位置: "+ i +"元素值: " + names[i])document.write("<br>")}</script> </body>for in: 這是一種類似python的語法格式,使用效果和python中的循環(huán)語句并無差異.
<body><script type="text/javascript">var names = ["admin","guest","lyshark","alex"]for(var index in names){document.write("當(dāng)前位置: "+ index +"元素值: " + names[index])document.write("<br>")}</script> </body>try..catch: 異常處理,當(dāng)try里面代碼出現(xiàn)問題的時候自動執(zhí)行catch拋出異常,最后無論是否異常都會執(zhí)行finally.
<body><script type="text/javascript">try {// 這段代碼從上往下運行,其中任何一個語句拋出異常該代碼塊就結(jié)束運行}catch(e){// 如果try代碼塊中拋出了異常,catch代碼塊中的代碼就會被執(zhí)行// e是一個局部變量，用來指向Error對象或者其他拋出的對象}finally{// 無論try中代碼是否有異常拋出(甚至是try代碼塊中有return語句),finally代碼塊中始終會被執(zhí)行}</script> </body>JavaScript 關(guān)于函數(shù)
函數(shù)為編程者提供了在整個程序中重復(fù)使用一個單元結(jié)構(gòu)的能力,在這個單元中封裝了完成指定任務(wù)或者功能的程序代碼,為了使用函數(shù),需要知道如何定義函數(shù),如何將變量傳遞給函數(shù),以及如何返問函數(shù)計算出的結(jié)果,另外 JavaScript 以其靈活性的特點,我們可以將一些開發(fā)環(huán)境中常用到的模塊進行封裝,然后再使用時直接調(diào)用即可,節(jié)約了開發(fā)周期.
◆函數(shù)的定義◆
JavaScript 中函數(shù)基本上可以分為三類,普通函數(shù),匿名函數(shù),自執(zhí)行函數(shù),此外需要注意的是對于 JavaScript中 函數(shù)參數(shù),實際參數(shù)的個數(shù)可能小于形式參數(shù)的個數(shù),函數(shù)內(nèi)的特殊值arguments中封裝了所有實際參數(shù).
普通無參函數(shù): 以下代碼,通過使用關(guān)鍵字function聲明了func()無參數(shù)的函數(shù).
<body><script type="text/javascript">function func(){document.write("這個無參數(shù)函數(shù)被執(zhí)行了..." + "<br>");return "ok";}var ret = func() //調(diào)用函數(shù),并將返回值賦值給ret變量document.write("函數(shù)的返回值是: " + ret);</script> </body>普通有參函數(shù): 以下代碼,通過使用關(guān)鍵字function聲明了func()有參數(shù)的函數(shù),其中形式參數(shù)有name,age,sex.
<body><script type="text/javascript">function func(name,age,sex){document.write("姓名: " + name + "年齡:" + age + "性別: " + sex + "<br>");return 0;}var ret = func("lyshark","22","Man") //調(diào)用函數(shù)document.write("函數(shù)的返回值是: " + ret);</script> </body>傳遞數(shù)組地址: 我們不僅僅可以傳遞單個的參數(shù),還可以將一個預(yù)定義好的數(shù)組傳遞到函數(shù)體內(nèi)部.
<body><script type="text/javascript">function show(temp){for(i in temp)document.write(temp[i] + " ");document.write("<br>");}var array = new Array(1,2,3,4,5,6,7,8,9,10);show(array) //傳遞一個數(shù)組到函數(shù)體,并執(zhí)行</script> </body>定義匿名函數(shù): 匿名函數(shù),就是沒有名字的函數(shù),需要我們手動進行調(diào)用,一般情況不會使用.
<body><script type="text/javascript">var func = function(x,y){document.write("參數(shù)1= " + x + "參數(shù)2= " + y);}func(10,20) //調(diào)用匿名函數(shù)</script> </body>自執(zhí)行函數(shù): 自執(zhí)行函數(shù),也就是說無論我們是否調(diào)用它,它都會被執(zhí)行,適合做初始化工作.
<body><script type="text/javascript">(function(name,url){document.write("姓名: " + name + "URL: " + url);})("lyshark","mkdirs.com")</script> </body>arguments: 使用特殊對象arguments,開發(fā)者無需明確指出參數(shù)名,就能訪問數(shù)據(jù)的內(nèi)部元素.
<body><script type="text/javascript">function func() {document.write("當(dāng)前參數(shù)長度: " + arguments.length + "<br>");}func(1,2,3,4,5);</script> </body>◆嵌套與遞歸◆
函數(shù)嵌套與遞歸式很多編程語言的通用屬性,同樣的 JavaScript 雖然是腳本語言,但是也支持嵌套和遞歸函數(shù)的實現(xiàn),函數(shù)嵌套是語言特性,遞歸調(diào)用是邏輯思想,這兩者有關(guān)但并不互斥,一個遞歸過程可以包含函數(shù)嵌套,同樣一個遞歸函數(shù)也可當(dāng)做是自身嵌套函數(shù),一般情況下不會使用這些特性.
函數(shù)的嵌套: 函數(shù)的嵌套是指在函數(shù)體的內(nèi)部再次嵌套一層函數(shù)體,并依次返回執(zhí)行結(jié)果,就是嵌套函數(shù).
<body><script type="text/javascript">function ext_func(){function func(){document.write("內(nèi)部函數(shù)執(zhí)行結(jié)果...." + "<br>")return 1024;}ret = func()return ret}ret = ext_func()document.write("內(nèi)部函數(shù)返回值: " + ret)</script> </body>函數(shù)的遞歸: 函數(shù)的遞歸是指函數(shù)不停地調(diào)用自身,直到滿足一定得條件才會自動的跳出循環(huán)體.
<body><script type="text/javascript">function func(temp){if(temp == 1){return 1;}else{return func(temp-1)+2;}}ret = func(5)document.write("內(nèi)部函數(shù)返回值: " + ret)</script> </body>函數(shù)的閉包: 通常情況下,我們想調(diào)用一個函數(shù)內(nèi)部的嵌套方法,我們可以使用閉包的形式來實現(xiàn).
<body><script type="text/javascript">function func1(){var array = [1,2,3,4,5];function func2() {return array;}return func2;}temp = func1() //調(diào)用語句返回函數(shù)func2對象document.write("函數(shù)返回對象: " + temp + "<br>");ret = temp() //調(diào)用這個對象,最終得到結(jié)果document.write("最終返回值: " + ret);</script> </body>◆常用內(nèi)置函數(shù)◆
除了可以在 JavaScript 中自己定義函數(shù)以外 JavaScript 自身也提供了一些內(nèi)部函數(shù),也稱為內(nèi)部方法,程序可以直接調(diào)用這些函數(shù)來完成某些功能,下面是 JavaScript 中的一些內(nèi)部函數(shù)的介紹.
encodeURI: 返回一個對URI字符串編碼后的結(jié)果,URI表示的范圍比URL要大.
<body><script type="text/javascript">var urlstr = encodeURI("http://www.mkdirs.com/index.html country=中國")document.write("URI中的轉(zhuǎn)義字符: " + urlstr + "<br>")var urlstr = encodeURIComponent("http://www.mkdirs.com/index.html country=中國")document.write("轉(zhuǎn)義URI組件中的字符: " + urlstr)</script> </body>decodeURI: 對一個編碼后的URI字符串進行解釋,翻譯成一個正常格式.
<body><script type="text/javascript">var urlstr = decodeURI("http://www.mkdirs.com/index.html%20country=%E4%B8%AD%E5%9B%BD")document.write("URI翻譯: " + urlstr + "<br>")var urlstr = decodeURIComponent("%2Findex.html%20country%3D%E4%B8%AD%E5%9B%BD")document.write("URI組件翻譯: " + urlstr)</script> </body>字符串轉(zhuǎn)換: 使用escape()方法對字符串進行轉(zhuǎn)義處理,unescape()則負責(zé)將代碼解碼.
<body><script type="text/javascript">var encode = escape("中國")document.write("字符串轉(zhuǎn)換: " + encode + "<br>")var decode = unescape("%u4E2D%u56FD")document.write("字符串解碼: " + decode)</script> </body>JSON序列化: 使用JSON方法將數(shù)組序列化存儲,方便數(shù)據(jù)傳輸.
<body><script type="text/javascript">array = [1,2,3,4,5]ret = JSON.stringify(array) //序列化,將其他類型轉(zhuǎn)換成字符串document.write("序列化后的類型: " + typeof(ret) + "<br>")document.write("反序列化,加載結(jié)果: " + JSON.parse(ret))</script> </body>轉(zhuǎn)載于:https://www.cnblogs.com/LyShark/p/11136268.html
總結(jié)
以上是生活随笔為你收集整理的Web前端开发JavaScript基础(3)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DE1-LINUX运行
- 下一篇： 【洛谷 1969】积木大赛