當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS基础篇2：

發布時間：2023/12/18 javascript 21 豆豆

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

文章目錄

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

1. JS變量

注意：JS是弱編程語言，不論何種數據類型，賦值方式：

聲明：var 變量名；
賦值：變量名=值；
變量聲明后，沒手動賦值時，系統默認賦值是undefined.

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>關于JS中的變量</title> </head> <body><script type="text/javascript">/** 1.javaScript當中的變量，如何聲明，怎么賦值？* --聲明：var 變量名；* 賦值：變量名=值；* var i=100;i=false;i="abc";* i=new Object(); i=3.123;* 2.重點：javaScript是一種弱類型編程語言。* *///在JS中，當一個變量沒有手動賦值的時候，系統默認是undefined.var i;//undefined在JS中是一個具體存在值。alert("i="+i);//i=undefinedalert(undefined);var k=undefined;alert("k="+k);//一個變量沒有聲明/定義，直接訪問？//alert(age);//語法錯誤：'age' is not defined，變量age不存在，沒聲明。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">/** 全局變量：* 在函數體之外聲明的變量屬于全局變量，全局變量的生命周期是：* -瀏覽器打開時聲明，瀏覽器關閉時銷毀，盡量少用。因為全局變量會一直在瀏覽器的內存當中，耗費內存空間。* -能使用局部變量盡量使用局部變量。* 局部變量：* 在函數體當中聲明的變量，包括一個函數的形參都屬于局部變量，* 局部變量的生命周期是：函數開始執行時局部變量的內存空間開辟，函數執行結束之后，局部變量的內存空間釋放。* 局部變量生命周期較短。* *///全局變量var i=100;function accessI() {//訪問的是全局變量alert("i="+i);}accessI();//全局變量var username="jack";function accessUsername() {//局部變量var username="李四";//就近原則:訪問局部變量alert("username="+username)}//調用函數accessUsername();//訪問全局變量，上面函數執行結束之后，局部變量的內存空間釋放。alert("username ="+username);function accessAge() {var age=60;alert("年齡="+age);}accessAge();//alert("age="+age);//報錯(語法不對)，局部變量已經釋放了//以下語法很奇怪function myfun() {//當一個變量聲明的時候沒有使用var關鍵字，那么不管這個變量是在哪里聲明的，都是全局變量。myname="吳京";alert("myfun是"+myname)//myfun是吳京}myfun();alert("myfun="+myname)//myfun=吳京,還是會輸出，myname未使用var,是全局變量</script> </body> </html>

2. JS函數

函數表示的2種方式：

第一種方式：
function 函數名(形式參數列表){
函數體;
}
第二種方式：
函數名=function(形式參數列表){
函數體;
}

(1)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS函數初步</title> </head> <body> <script type="text/javascript">/** 1.JS中的函數：等同于JAVA語言中的方法，函數是一段可以被* 重復利用的片段。** 2.JS語法格式： JS的函數不需要指定返回值類型，返回什么類型都行。* 第一種方式：* function 函數名(形式參數列表){* 函數體;* }* 第二種方式：* 函數名=function(形式參數列表){* 函數體;* }* */function sum(a,b) {//a和b都是局部變量，他們都是形參(a和b都是變量名，變量名隨意)alert(a+b)}//函數只有調用才能執行的sum(12,34)//定義函數sayHellosayHello=function (username) {alert("hello "+username)}//調用函數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函數初步</title> </head> <body> <script type="text/javascript">/** java中的方法有重載機制，JS中的函數能重載嗎？* JS當中的函數在調用的時候，參數的類型沒有限制，并且參數的個數也沒有限制，JS就是這么隨意。(弱類型)* */function sum(a,b) {return a+b;}//調用sum函數var retValue=sum(2,4);alert(retValue)//6//字符串拼接 "+"是連接的作用var retValue2=sum("JACK");//JACK賦值給a變量，b變量沒有賦值，系統默認賦值undefinedalert(retValue2);//JACKundefinedvar retValue21=sum(3,"號是科比");alert(retValue21);//3號是科比var retValue3=sum();alert(retValue3);//NaN (NaN是一個具體存在的值，該值表示不是數字)var retValue4=sum(1,2,3,4);alert(retValue4)//3,1+2=3 后面數字作廢/** 在JS中，函數的名字不能重名，當函數重名的時候，后聲明的函數會將之前聲明的同名函數覆蓋。* */function test1(username) {alert("test1");}function test1() {alert("test1,test1,test1");}test1("陳浩民")//這個調用的是第二個test1()函數。test1,test1,test1 </script> </body> </html>

3. 數據類型

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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS的數據類型</title> </head> <body><script type="text/javascript">/** 1.雖然JS的變量在聲明的時候不需要指定數據類型，但是賦值，每一個數據還是有類型的。所以也需要學習* JS包括哪些數據類型。* 原始類型：Undefined、Number、String、Boolean、Null* 引用類型：Object以及Object的子類* 2.ES規范，在ES6之后，又基于以上的6種類型外添加一種新的類型：* Symbol* 3.JS中有一個運算符叫作typeof，這個運算符可以在程序的運行階段動態獲取變量的數據類型。* --typeof運算符的語法格式：typeof 變量名* --typeof運算符的運算結果是以下6個字符串之一：注意字符串都是小寫。* "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+"必須都是數字！");//false,abc必須都是數字！}var retValue=sum(false,"abc");alert(retValue);//undefined,function函數沒有返回值，則retValue就是默認值undefinedretValue1=sum(3,5);alert(retValue1);//8,函數返回了值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>

數據類型
(1)undefined

(2)Number

(3)Boolean

(4)String(常用函數)

第一種：var s = “abc”;
第二種：(使用JS內置的支持類String)：var s2=new String(“abc”);

(5)Object類型

JS中的Object類型：
1.Object類型是所有類型的超類，自定義的任何類型，默認繼承Object。
2.Object類包括哪些屬性？
* prototype屬性(常用的，主要是這個)：作用是給類動態的擴展屬性和函數。
* constructor屬性
3.Object類包括哪些函數？
* toString()/valueOf()/toLocaleString()
4.在JS當中定義的類默認繼承Object，會繼承Object類中所有屬性以及函數。自己定義的類也有prototype屬性。

(6)null

4. 事件

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

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

(2)代碼執行順序

<body onload="ready()"><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"/>

以后以下面代碼執行

<body> <script type="text/javascript">/*把body里的onload直接放到JS代碼塊中*1.頁面打開時，將a函數注冊給了load事件，* 2.頁面加載完畢之后，load事件發生了，此時執行回調函數a* 3.回調函數a執行的過程中，把b函數注冊給了id="btn1"的click事件* 4.當id="btn1"的節點發生click事件之后，b函數被調用并執行。*/window.onload=function () {//這個回調函數加做adocument.getElementById("btn1").onclick=function () {//這個回調函數叫做balert("hello 你好");}}//下面的window需要重新建一個，懶得建了，不允許2個重復的，否則后面覆蓋前面window.onload=function () {document.getElementById("btn3").onclick=function () {var mytext=document.getElementById("btn2");//一個節點對象中只要有的屬性都可以"."mytext.type="checkbox";}} </script> <input type="button" value="hello2" id="btn1"/><input type="text" id="btn2"/> <input type="button" value="將文本框修改為復選框" id="btn3"/> </body>

(3)捕捉鍵盤keydown事件

(4) void運算符

<head><meta charset="UTF-8"><title>JS的void運算符</title> </head> <body> <a href="javascript:void(100)" onclick="window.alert('test code')">既保留住超鏈接的樣式，同時用戶點擊該超鏈接的時候執行一段JS代碼，但頁面還不能跳轉。</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循環 6.break語句 7.continue語句* 8.for...in語句 9.with語句* *///創建JS數組,數據類型不統一,元素的個數隨意var arr=[false,true,1,2,"abc",3.12];//遍歷數組for(var i=0;i<arr.length;i++){alert(arr[i]);}//for..in,數組下標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>

總結

以上是生活随笔為你收集整理的JS基础篇2：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

js
基础

上一篇： Android(root)设备HTTPS
下一篇：线性规划（一）：基本概念