當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS基础篇2：

發(fā)布時(shí)間：2023/12/18 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS基础篇2：小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

1. JS變量
- 1.1 局部變量和全局變量
2. JS函數(shù)
3. 數(shù)據(jù)類型
4. 事件

1. JS變量

注意：JS是弱編程語(yǔ)言，不論何種數(shù)據(jù)類型，賦值方式：

聲明：var 變量名；
賦值：變量名=值；
變量聲明后，沒(méi)手動(dòng)賦值時(shí)，系統(tǒng)默認(rèn)賦值是undefined.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>關(guān)于JS中的變量</title> </head> <body><script type="text/javascript">/** 1.javaScript當(dāng)中的變量，如何聲明，怎么賦值？* --聲明：var 變量名；* 賦值：變量名=值；* var i=100;i=false;i="abc";* i=new Object(); i=3.123;* 2.重點(diǎn)：javaScript是一種弱類型編程語(yǔ)言。* *///在JS中，當(dāng)一個(gè)變量沒(méi)有手動(dòng)賦值的時(shí)候，系統(tǒng)默認(rèn)是undefined.var i;//undefined在JS中是一個(gè)具體存在值。alert("i="+i);//i=undefinedalert(undefined);var k=undefined;alert("k="+k);//一個(gè)變量沒(méi)有聲明/定義，直接訪問(wèn)？//alert(age);//語(yǔ)法錯(cuò)誤：'age' is not defined，變量age不存在，沒(méi)聲明。var a,b,c=400.5;alert("a="+a);alert("b="+b)alert("c="+c);a=false;alert(a);a="hsdj";alert(a)a=1.2;alert(a)</script> </body> </html>

1.1 局部變量和全局變量

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS的局部變量和全局變量</title> </head> <body><script type="text/javascript">/** 全局變量：* 在函數(shù)體之外聲明的變量屬于全局變量，全局變量的生命周期是：* -瀏覽器打開時(shí)聲明，瀏覽器關(guān)閉時(shí)銷毀，盡量少用。因?yàn)槿肿兞繒?huì)一直在瀏覽器的內(nèi)存當(dāng)中，耗費(fèi)內(nèi)存空間。* -能使用局部變量盡量使用局部變量。* 局部變量：* 在函數(shù)體當(dāng)中聲明的變量，包括一個(gè)函數(shù)的形參都屬于局部變量，* 局部變量的生命周期是：函數(shù)開始執(zhí)行時(shí)局部變量的內(nèi)存空間開辟，函數(shù)執(zhí)行結(jié)束之后，局部變量的內(nèi)存空間釋放。* 局部變量生命周期較短。* *///全局變量var i=100;function accessI() {//訪問(wèn)的是全局變量alert("i="+i);}accessI();//全局變量var username="jack";function accessUsername() {//局部變量var username="李四";//就近原則:訪問(wèn)局部變量alert("username="+username)}//調(diào)用函數(shù)accessUsername();//訪問(wèn)全局變量，上面函數(shù)執(zhí)行結(jié)束之后，局部變量的內(nèi)存空間釋放。alert("username ="+username);function accessAge() {var age=60;alert("年齡="+age);}accessAge();//alert("age="+age);//報(bào)錯(cuò)(語(yǔ)法不對(duì))，局部變量已經(jīng)釋放了//以下語(yǔ)法很奇怪function myfun() {//當(dāng)一個(gè)變量聲明的時(shí)候沒(méi)有使用var關(guān)鍵字，那么不管這個(gè)變量是在哪里聲明的，都是全局變量。myname="吳京";alert("myfun是"+myname)//myfun是吳京}myfun();alert("myfun="+myname)//myfun=吳京,還是會(huì)輸出，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語(yǔ)言中的方法，函數(shù)是一段可以被* 重復(fù)利用的片段。** 2.JS語(yǔ)法格式： 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="點(diǎn)擊" onclick="sayHello('JACK')"/><input type="button" value="求和" onclick="sum(10,18)"/> </body> </html>

(2)JS語(yǔ)法隨意，"+"也表示字符串拼接。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS函數(shù)初步</title> </head> <body> <script type="text/javascript">/** java中的方法有重載機(jī)制，JS中的函數(shù)能重載嗎？* JS當(dāng)中的函數(shù)在調(diào)用的時(shí)候，參數(shù)的類型沒(méi)有限制，并且參數(shù)的個(gè)數(shù)也沒(méi)有限制，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變量沒(méi)有賦值，系統(tǒng)默認(rèn)賦值undefinedalert(retValue2);//JACKundefinedvar retValue21=sum(3,"號(hào)是科比");alert(retValue21);//3號(hào)是科比var retValue3=sum();alert(retValue3);//NaN (NaN是一個(gè)具體存在的值，該值表示不是數(shù)字)var retValue4=sum(1,2,3,4);alert(retValue4)//3,1+2=3 后面數(shù)字作廢/** 在JS中，函數(shù)的名字不能重名，當(dāng)函數(shù)重名的時(shí)候，后聲明的函數(shù)會(huì)將之前聲明的同名函數(shù)覆蓋。* */function test1(username) {alert("test1");}function test1() {alert("test1,test1,test1");}test1("陳浩民")//這個(gè)調(diào)用的是第二個(gè)test1()函數(shù)。test1,test1,test1 </script> </body> </html>

3. 數(shù)據(jù)類型

原始類型：Undefined、Number、String、Boolean、Null
引用類型：Object以及Object的子類
typeof運(yùn)算符的運(yùn)算結(jié)果是以下6個(gè)字符串之一：注意字符串都是小寫。
“undefined” “number” “string” “boolean” “object” “function”

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS的數(shù)據(jù)類型</title> </head> <body><script type="text/javascript">/** 1.雖然JS的變量在聲明的時(shí)候不需要指定數(shù)據(jù)類型，但是賦值，每一個(gè)數(shù)據(jù)還是有類型的。所以也需要學(xué)習(xí)* JS包括哪些數(shù)據(jù)類型。* 原始類型：Undefined、Number、String、Boolean、Null* 引用類型：Object以及Object的子類* 2.ES規(guī)范，在ES6之后，又基于以上的6種類型外添加一種新的類型：* Symbol* 3.JS中有一個(gè)運(yùn)算符叫作typeof，這個(gè)運(yùn)算符可以在程序的運(yùn)行階段動(dòng)態(tài)獲取變量的數(shù)據(jù)類型。* --typeof運(yùn)算符的語(yǔ)法格式：typeof 變量名* --typeof運(yùn)算符的運(yùn)算結(jié)果是以下6個(gè)字符串之一：注意字符串都是小寫。* "undefined" "number" "string" "boolean" "object" "function"** 4.在JS中比較字符串是否相等使用"=="完成。* */function sum(a,b) {if (typeof a=="number" && typeof b=="number"){return a+b;}alert(a+","+b+"必須都是數(shù)字！");//false,abc必須都是數(shù)字！}var retValue=sum(false,"abc");alert(retValue);//undefined,function函數(shù)沒(méi)有返回值，則retValue就是默認(rèn)值undefinedretValue1=sum(3,5);alert(retValue1);//8,函數(shù)返回了值a+b=8var i;alert(typeof i);//undefinedvar k=10;alert(typeof k);//numbervar o="虎哥";alert(typeof o);//stringvar p=false;alert(typeof p);//booleanvar d=null;alert(typeof d);//objectvar obj=new Object();alert(typeof obj);//objectfunction f() {}alert(typeof f);//function</script> </body> </html>

數(shù)據(jù)類型
(1)undefined

(2)Number

(3)Boolean

(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屬性(常用的，主要是這個(gè))：作用是給類動(dòng)態(tài)的擴(kuò)展屬性和函數(shù)。
* constructor屬性
3.Object類包括哪些函數(shù)？
* toString()/valueOf()/toLocaleString()
4.在JS當(dāng)中定義的類默認(rèn)繼承Object，會(huì)繼承Object類中所有屬性以及函數(shù)。自己定義的類也有prototype屬性。

(6)null

4. 事件

JS的常用事件：
* （1）blur失去焦點(diǎn)，focus獲得焦點(diǎn)；
* （2）change下拉列表選中項(xiàng)改變，或文本框內(nèi)容改變；
* （3）select文本被選定
* （4）load頁(yè)面加載完畢
* （5）click鼠標(biāo)單擊，dblclick鼠標(biāo)雙擊
* （6）keydown鍵盤按下，keyup鍵盤彈起
* （7）mousedown鼠標(biāo)按下，mouseover鼠標(biāo)經(jīng)過(guò)，mousemove鼠標(biāo)移動(dòng)，mouseout鼠標(biāo)離開，mouseup鼠標(biāo)彈起
* （8）reset表單重置，submit表單提交
*
* 任何事件都會(huì)對(duì)應(yīng)一個(gè)事件句柄，事件句柄就是在事件前面加on,
* 事件句柄以屬性的形式存在

(1)事件注冊(cè)的2種方式：

(2)代碼執(zhí)行順序

<body onload="ready()"><script type="text/javascript">function ready() {//這個(gè)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.頁(yè)面打開時(shí)，將a函數(shù)注冊(cè)給了load事件，* 2.頁(yè)面加載完畢之后，load事件發(fā)生了，此時(shí)執(zhí)行回調(diào)函數(shù)a* 3.回調(diào)函數(shù)a執(zhí)行的過(guò)程中，把b函數(shù)注冊(cè)給了id="btn1"的click事件* 4.當(dāng)id="btn1"的節(jié)點(diǎn)發(fā)生click事件之后，b函數(shù)被調(diào)用并執(zhí)行。*/window.onload=function () {//這個(gè)回調(diào)函數(shù)加做adocument.getElementById("btn1").onclick=function () {//這個(gè)回調(diào)函數(shù)叫做balert("hello 你好");}}//下面的window需要重新建一個(gè)，懶得建了，不允許2個(gè)重復(fù)的，否則后面覆蓋前面window.onload=function () {document.getElementById("btn3").onclick=function () {var mytext=document.getElementById("btn2");//一個(gè)節(jié)點(diǎn)對(duì)象中只要有的屬性都可以"."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事件

(4) void運(yùn)算符

<head><meta charset="UTF-8"><title>JS的void運(yùn)算符</title> </head> <body> <a href="javascript:void(100)" onclick="window.alert('test code')">既保留住超鏈接的樣式，同時(shí)用戶點(diǎn)擊該超鏈接的時(shí)候執(zhí)行一段JS代碼，但頁(yè)面還不能跳轉(zhuǎn)。</a> </body>

(5) 控制語(yǔ)句

<head><meta charset="UTF-8"><title>JS的控制語(yǔ)句</title> </head> <body><script type="text/javascript">/*1.if語(yǔ)句 2.switch 3.while 4.do...while..* 5.for循環(huán) 6.break語(yǔ)句 7.continue語(yǔ)句* 8.for...in語(yǔ)句 9.with語(yǔ)句* *///創(chuàng)建JS數(shù)組,數(shù)據(jù)類型不統(tǒng)一,元素的個(gè)數(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語(yǔ)句可以遍歷對(duì)象的屬性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是一個(gè)字符串alert(u[shuXinMing])//張三 123 本身就是string類型，不需要加“”}with(u){//u代替了u.username中的ualert(username+","+password)}</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的JS基础篇2：的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

js
基础

上一篇： Android(root)设备HTTPS
下一篇： SpringCloud（8）— 使用El