當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS基础篇2：
文章目錄
- 1. JS變量
- 1.1 局部變量和全局變量
- 2. JS函數(shù)
- 3. 數(shù)據(jù)類型
- 4. 事件
1. JS變量
注意：JS是弱編程語言，不論何種數(shù)據(jù)類型，賦值方式：
- 聲明：var 變量名；
- 賦值：變量名=值；
- 變量聲明后，沒手動賦值時，系統(tǒng)默認(rèn)賦值是undefined.
1.1 局部變量和全局變量
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS的局部變量和全局變量</title> </head> <body><script type="text/javascript">/** 全局變量：* 在函數(shù)體之外聲明的變量屬于全局變量，全局變量的生命周期是：* -瀏覽器打開時聲明，瀏覽器關(guān)閉時銷毀，盡量少用。因為全局變量會一直在瀏覽器的內(nèi)存當(dāng)中，耗費內(nèi)存空間。* -能使用局部變量盡量使用局部變量。* 局部變量：* 在函數(shù)體當(dāng)中聲明的變量，包括一個函數(shù)的形參都屬于局部變量，* 局部變量的生命周期是：函數(shù)開始執(zhí)行時局部變量的內(nèi)存空間開辟，函數(shù)執(zhí)行結(jié)束之后，局部變量的內(nèi)存空間釋放。* 局部變量生命周期較短。* *///全局變量var i=100;function accessI() {//訪問的是全局變量alert("i="+i);}accessI();//全局變量var username="jack";function accessUsername() {//局部變量var username="李四";//就近原則:訪問局部變量alert("username="+username)}//調(diào)用函數(shù)accessUsername();//訪問全局變量，上面函數(shù)執(zhí)行結(jié)束之后，局部變量的內(nèi)存空間釋放。alert("username ="+username);function accessAge() {var age=60;alert("年齡="+age);}accessAge();//alert("age="+age);//報錯(語法不對)，局部變量已經(jīng)釋放了//以下語法很奇怪function myfun() {//當(dāng)一個變量聲明的時候沒有使用var關(guān)鍵字，那么不管這個變量是在哪里聲明的，都是全局變量。myname="吳京";alert("myfun是"+myname)//myfun是吳京}myfun();alert("myfun="+myname)//myfun=吳京,還是會輸出，myname未使用var,是全局變量</script> </body> </html>2. JS函數(shù)
函數(shù)表示的2種方式：
第一種方式：
function 函數(shù)名(形式參數(shù)列表){
函數(shù)體;
}
第二種方式：
函數(shù)名=function(形式參數(shù)列表){
函數(shù)體;
}
(1)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS函數(shù)初步</title> </head> <body> <script type="text/javascript">/** 1.JS中的函數(shù)：等同于JAVA語言中的方法，函數(shù)是一段可以被* 重復(fù)利用的片段。** 2.JS語法格式： JS的函數(shù)不需要指定返回值類型，返回什么類型都行。* 第一種方式：* function 函數(shù)名(形式參數(shù)列表){* 函數(shù)體;* }* 第二種方式：* 函數(shù)名=function(形式參數(shù)列表){* 函數(shù)體;* }* */function sum(a,b) {//a和b都是局部變量，他們都是形參(a和b都是變量名，變量名隨意)alert(a+b)}//函數(shù)只有調(diào)用才能執(zhí)行的sum(12,34)//定義函數(shù)sayHellosayHello=function (username) {alert("hello "+username)}//調(diào)用函數(shù)sayHello("胡歌") </script><input type="button" value="點擊" onclick="sayHello('JACK')"/><input type="button" value="求和" onclick="sum(10,18)"/> </body> </html>(2)JS語法隨意，"+"也表示字符串拼接。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS函數(shù)初步</title> </head> <body> <script type="text/javascript">/** java中的方法有重載機制，JS中的函數(shù)能重載嗎？* JS當(dāng)中的函數(shù)在調(diào)用的時候，參數(shù)的類型沒有限制，并且參數(shù)的個數(shù)也沒有限制，JS就是這么隨意。(弱類型)* */function sum(a,b) {return a+b;}//調(diào)用sum函數(shù)var retValue=sum(2,4);alert(retValue)//6//字符串拼接 "+"是連接的作用var retValue2=sum("JACK");//JACK賦值給a變量，b變量沒有賦值，系統(tǒng)默認(rèn)賦值undefinedalert(retValue2);//JACKundefinedvar retValue21=sum(3,"號是科比");alert(retValue21);//3號是科比var retValue3=sum();alert(retValue3);//NaN (NaN是一個具體存在的值，該值表示不是數(shù)字)var retValue4=sum(1,2,3,4);alert(retValue4)//3,1+2=3 后面數(shù)字作廢/** 在JS中，函數(shù)的名字不能重名，當(dāng)函數(shù)重名的時候，后聲明的函數(shù)會將之前聲明的同名函數(shù)覆蓋。* */function test1(username) {alert("test1");}function test1() {alert("test1,test1,test1");}test1("陳浩民")//這個調(diào)用的是第二個test1()函數(shù)。test1,test1,test1 </script> </body> </html>3. 數(shù)據(jù)類型
- 原始類型：Undefined、Number、String、Boolean、Null
- 引用類型：Object以及Object的子類
- typeof運算符的運算結(jié)果是以下6個字符串之一：注意字符串都是小寫。
“undefined” “number” “string” “boolean” “object” “function”
數(shù)據(jù)類型
(1)undefined
(2)Number
<script type="text/javascript">/** 1.Number類型包括哪些值？* -1 0 1 2 2.3 3.14 100......NaN Infinity* 整數(shù)、小數(shù)、正數(shù)、負(fù)數(shù)、不是數(shù)字、無窮大都屬于Number類** 2.關(guān)于NaN(表示Not a Number,不是一個數(shù)字，但屬于Number類型)；* 什么情況出現(xiàn)NaN？* 運算結(jié)果本來應(yīng)該是一個數(shù)字，最后算完不是一個數(shù)字的時候，結(jié)果是NaN.* 3.isNaN函數(shù):true表示不是一個數(shù)字，false表示是一個數(shù)字。* 4.parseInt()函數(shù)* 5.parseFloat()函數(shù)* 6.Math.ceil()函數(shù)：向上取整* */var v1=1;var v2=213.32;var v3=-123;var v4=NaN;var v5=Infinity;//Numberalert(typeof v1);alert(typeof v2);alert(typeof v3);alert(typeof v4);alert(typeof v5);var a=100;var b="中國";alert(a/b);//除號顯然最后結(jié)果應(yīng)該是一個數(shù)字，但是運算的過程中導(dǎo)致最后不是一個數(shù)字，那么結(jié)果是NaN.var e=1213;var f="janjieshi";alert(e+f);//1213janjieshi,先進行字符串拼接運算//Infinity(當(dāng)除數(shù)為0的時候，結(jié)果為無窮大)alert(10/0);//Infinity//isNaN函數(shù)：結(jié)果是true表示不是一個數(shù)字，反之，是數(shù)字function sum(a,b) {if (isNaN(a)||isNaN(b)){alert("參與運算的必須是數(shù)字");return;}return a + b;}sum(100,"acv");alert(sum(100,200));//parseInt():可以將字符串自動轉(zhuǎn)換成整型數(shù)字，并且取整數(shù)位。alert(parseInt("3.9999"));//3alert(parseInt(3.9999));//3//parseFloat():可以將字符串自動轉(zhuǎn)換成浮點型數(shù)字。alert(parseFloat("3.434")+2);//5.434//Math.ceil()alert(Math.ceil(2.1));//3,向上取整。alert(10/3);//3.3333333333333335</script>(3)Boolean
<script type="text/javascript">/** 1.JS中Boolean類型有2個值：true和false;* 2.在Boolean類型中有一個函數(shù)叫做：Boolean()* 語法格式：Boolean(數(shù)據(jù))* Boolean()函數(shù)的作用是將非布爾類型轉(zhuǎn)換成布爾類型。* */var username="Jack";/*if(Boolean(username)){alert("歡迎你"+username);}else {alert("用戶名不能為空")}*/if(username){//可以省略，自動調(diào)Boolean函數(shù)轉(zhuǎn)換成boolean類型alert("歡迎你"+username);}else {alert("用戶名不能為空")}//規(guī)律：“有”就轉(zhuǎn)換成true,"沒有"就轉(zhuǎn)換成falsealert(Boolean(23));//truealert(Boolean(0));//falsealert(Boolean(""));//falsealert(Boolean("acdl"))//truealert(Boolean("null"));//falsealert(Boolean(NaN));//falsealert(Boolean("undefined"));//falsealert(Boolean(Infinity));//true//無限循環(huán)while (10/3){alert("啊哈哈");}</script>(4)String(常用函數(shù))
- 第一種：var s = “abc”;
- 第二種：(使用JS內(nèi)置的支持類String)：var s2=new String(“abc”);
(5)Object類型
JS中的Object類型：
1.Object類型是所有類型的超類，自定義的任何類型，默認(rèn)繼承Object。
2.Object類包括哪些屬性？
* prototype屬性(常用的，主要是這個)：作用是給類動態(tài)的擴展屬性和函數(shù)。
* constructor屬性
3.Object類包括哪些函數(shù)？
* toString()/valueOf()/toLocaleString()
4.在JS當(dāng)中定義的類默認(rèn)繼承Object，會繼承Object類中所有屬性以及函數(shù)。自己定義的類也有prototype屬性。
(6)null
<script type="text/javascript">//null NaN undefined 數(shù)據(jù)類型不一致alert(typeof null);//Null類型 objectalert(typeof NaN);//Number類型 numberalert(typeof undefined);//Undefined類型 undefined//null和undefinedkey可以等同alert(null==NaN);//falsealert(null==undefined)//truealert(undefined==NaN)//false//JS當(dāng)中有兩個比較特殊的運算符//==(等同運算符：只判斷值是否相等)//===(全等運算符：既判斷值是否相等，又判斷數(shù)據(jù)類型是否相等)alert(null===NaN);//falsealert(1==true)//truealert(1===true)//false,1是Number類型，true是Boolean類型</script>4. 事件
JS的常用事件：
* （1）blur失去焦點，focus獲得焦點；
* （2）change下拉列表選中項改變，或文本框內(nèi)容改變；
* （3）select文本被選定
* （4）load頁面加載完畢
* （5）click鼠標(biāo)單擊，dblclick鼠標(biāo)雙擊
* （6）keydown鍵盤按下，keyup鍵盤彈起
* （7）mousedown鼠標(biāo)按下，mouseover鼠標(biāo)經(jīng)過，mousemove鼠標(biāo)移動，mouseout鼠標(biāo)離開，mouseup鼠標(biāo)彈起
* （8）reset表單重置，submit表單提交
*
* 任何事件都會對應(yīng)一個事件句柄，事件句柄就是在事件前面加on,
* 事件句柄以屬性的形式存在
(1)事件注冊的2種方式：
<script type="text/javascript">function sayHello() {alert("hello,美好世界")}</script><!--注冊事件的第一種方式:直接在標(biāo)簽中使用事件句柄--><input type="button" value="hello" ondblclick="sayHello()"/><!--鼠標(biāo)雙擊出結(jié)果--><input type="button" value="hello2" id="mybtn"><input type="button" value="hello3" id="mybtn1"><input type="button" value="hello4" id="mybtn2"><script type="text/javascript">/** 第二種注冊事件的方式：使用JS代碼塊完成事件的注冊。* 第一步：先獲取這個按鈕對象(document和window一樣是全部小寫，內(nèi)置對象，可以直接用，document就代表整個HTML頁面)。* document代表瀏覽器窗口下的文本，window代表瀏覽器窗口。* 第二步：給按鈕對象的事件句柄屬性賦值* */function doSome() {alert("注冊事件的第二種方式")}//第一步：getElementById通過id獲取元素，document和window一樣//以后btnObj節(jié)點對象就代表<input type="button" value="hello2" id="mybtn">，可以調(diào)用其下屬性。var btnObj=document.getElementById("mybtn");//給按鈕onclick屬性賦值btnObj.onclick=doSome;//注意：別加小括號.doSome()錯誤寫法//這行代碼的含義是，將回調(diào)函數(shù)doSome注冊到click事件上var btnObj1=document.getElementById("mybtn1");btnObj1.onclick=function () {//這個函數(shù)沒有名字，叫做匿名函數(shù)，這也是回調(diào)函數(shù)。alert("test..........")}document.getElementById("mybtn2").onclick=function () {alert("test22222...")}</script>(2)代碼執(zhí)行順序
<body onload="ready()"><!--load事件是在頁面全部元素加載完畢之后才會發(fā)生--><script type="text/javascript">function ready() {//這個ready代表body οnlοad="ready()"document.getElementById("btn").onclick=function () {alert("hello JS!");}}</script><input type="button" value="hello" id="btn"/>以后以下面代碼執(zhí)行
<body> <script type="text/javascript">/*把body里的onload直接放到JS代碼塊中*1.頁面打開時，將a函數(shù)注冊給了load事件，* 2.頁面加載完畢之后，load事件發(fā)生了，此時執(zhí)行回調(diào)函數(shù)a* 3.回調(diào)函數(shù)a執(zhí)行的過程中，把b函數(shù)注冊給了id="btn1"的click事件* 4.當(dāng)id="btn1"的節(jié)點發(fā)生click事件之后，b函數(shù)被調(diào)用并執(zhí)行。*/window.onload=function () {//這個回調(diào)函數(shù)加做adocument.getElementById("btn1").onclick=function () {//這個回調(diào)函數(shù)叫做balert("hello 你好");}}//下面的window需要重新建一個，懶得建了，不允許2個重復(fù)的，否則后面覆蓋前面window.onload=function () {document.getElementById("btn3").onclick=function () {var mytext=document.getElementById("btn2");//一個節(jié)點對象中只要有的屬性都可以"."mytext.type="checkbox";}} </script> <input type="button" value="hello2" id="btn1"/><input type="text" id="btn2"/> <input type="button" value="將文本框修改為復(fù)選框" id="btn3"/> </body>(3)捕捉鍵盤keydown事件
<script type="text/javascript">window.onload=function () {var usernameElt=document.getElementById("username")//回車鍵的值是13，ESC鍵的鍵值是27usernameElt.onkeydown=function (event) {//獲取鍵值//對于“鍵盤事件對象”來說，都有keyCode屬性用來獲取鍵值alert(event);//object KeyboardEventalert(event.keyCode);//13. 回車鍵的值是13if(event.keyCode==13){alert("正在進行驗證.....")}}}</script>(4) void運算符
<head><meta charset="UTF-8"><title>JS的void運算符</title> </head> <body> <!---void運算符的語法:void（表達式）運算原理：執(zhí)行表達式，但不返回任何結(jié)果。javascript:void(0)其中javascript：作用是告訴瀏覽器后面是一段JS代碼，以下程序的javascript:是不能省略的，否則href會把雙引號里當(dāng)做路徑處理。 ---><a href="javascript:void(100)" onclick="window.alert('test code')">既保留住超鏈接的樣式，同時用戶點擊該超鏈接的時候執(zhí)行一段JS代碼，但頁面還不能跳轉(zhuǎn)。</a> </body>(5) 控制語句
<head><meta charset="UTF-8"><title>JS的控制語句</title> </head> <body><script type="text/javascript">/*1.if語句 2.switch 3.while 4.do...while..* 5.for循環(huán) 6.break語句 7.continue語句* 8.for...in語句 9.with語句* *///創(chuàng)建JS數(shù)組,數(shù)據(jù)類型不統(tǒng)一,元素的個數(shù)隨意var arr=[false,true,1,2,"abc",3.12];//遍歷數(shù)組for(var i=0;i<arr.length;i++){alert(arr[i]);}//for..in,數(shù)組下標(biāo)for(var i in arr){alert(i);alert(arr[i]);}//for..in語句可以遍歷對象的屬性User=function (username,password) {this.username=username;this.password=password;}var u=new User("張三","123");alert(u.username+","+u.password);//張三,123alert(u["username"]+","+u["password"]);//張三,123for(var shuXinMing in u){alert(shuXinMing)//username password 屬性名alert(typeof shuXinMing)//string string shuXinMing是一個字符串alert(u[shuXinMing])//張三 123 本身就是string類型，不需要加“”}with(u){//u代替了u.username中的ualert(username+","+password)}</script> </body> </html>總結(jié)
- 上一篇： Android(root)设备HTTPS
- 下一篇： SpringCloud（8）— 使用El