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

javascript

dya50 javascript

發布時間：2023/12/20 javascript 32 豆豆

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

01-JAVAscript 簡介：

　　HTML：從語義的角度，描述頁面結構。

　　CSS：從審美的角度，描述樣式（美化頁面）

　　JavaScript:從交互的角度，描述行為（提升用戶體驗）

Java中需要定義如下變量：

int a;float a;double a;String a;boolean a;

而JavaScript中，只用定義一個變量：

var a;

JavaScript不用關心其他的一些事情（比如內存的釋放、指針等），更關心自己的業務。

?

JavaScript是前臺語言

JavaScript的組成

JavaScript基礎分為三個部分：

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
BOM：操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。

JavaScript的特點

（1）簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程序。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

（3）基于對象：內置大量現成對象，編寫少量程序可以完成目標

第一個JavaScript代碼：

代碼格式：

alert語句(警告彈出框)：

　　alert('Json')

</script>

語法規則：

　　1.JavaScript對換行、縮進、空格不敏感。 # 但是每一條語句末尾末尾都要加上分號。雖然分分號不是必須加的，但是為了程序今后要壓宿，如果不加分號壓縮之后將不能運行。

　　2.所有的符號，都要是英文的，比如括號、引號、分號、

　　3.JavaScript的注釋：

　　　　單行注釋：

// 我是注釋

　　　　多行注釋：

/*多行注釋1多行注釋2 */

備注：我們常用的sublime中：??

　　單行注釋的快捷鍵： ctrl+/

　　多行注釋的快捷鍵： ctrl +shift+ /

JavaScript:

　　彈出警告框：alert('')

　　控制臺輸出： console.log('')

　　用戶輸出：prompt('今天天氣好嗎？')

代碼示例：

注意：prompt()語句中，用戶不管輸入什么內容，都是字符串。

alert和prompt的區別：

alert('Are You Ok ?');

var a = prompt('請輸入一個數字')；

常量：數字、字符串。

1.alet(886);

2.字符串必須要加上引號（單、雙無所謂）

變量的定義：

var a = 1;

var 是'variant' 變量的縮寫。后面一定要用一個空格和變量名割開。

　　——定義變量：var是一個關鍵字，用來定義變量。

　　——變量的賦值：等號表賦值，把右邊的值賦給左邊的變量

注意：在JavaScript中：永遠都是用var來定義變量

JavaScript: (變量命名規范)：

　　變量命名：只能由英文、數字、字母、下劃線、$符號構成，且不能以數字開頭、不能是JavaScript的保留字（關鍵字）；

JavaScript中的關鍵字：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

JavaScript中的一些常見數據類型：

數值型 : number<script type = 'text/javascript'>

var a = 100;console.log(typeof a);
</script>

typeof() 表示 “獲取變量類型” ：

格式： typeof 變量

在JavaScript中，只要是數，就是數值類型的（number）.無論正負、浮點數（小數）、等都是number類型的。

字符串類型：string

var a = 'abcde';var b = '路飛'；var c = '123123';var c = '索隆'；var e = ''; //空字符串 console.log(typeof a);
console.log(typeof b);console.log(typeof c);console.log((typeof d);console.log(typeof e);

鍵盤上的+可能是連字符，也可能是數字的加號。如下：

console.log("我" + "愛" + "你"); //連字符，把三個獨立的漢字，連接在一起了console.log("我+愛+你"); //原樣輸出console.log(1+2+3); //輸出6

總結：如果加號兩邊都是數值，此時是加。否則，就是連字符（用來連接字符串）。

變量值的傳遞（賦值）：

　　a = b;

var a = "3";var b = 2;console.log(a-b);

效果：（注意，字符串 - 數值 = 數值）

變量格式轉換：

　　字符串轉數字：

　　　parseInt()

parseInt()還具有以下特性：

（1）帶有自動凈化的功能；只保留字符串最開頭的數字，后面的中文自動消失。例如：

console.log(parseInt("2018你真帥！！");

（2）自動帶有截斷小數的功能：取整，不四舍五入。

var a = parseInt(5.8) + parseInt(4.7); console.log(a); var a = parseInt(5.8 + 4.7);console.log(a);

3、數據類型：

數據類型包括：基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

當我們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值還是引用類型值

1.基本數據類型

number

var a = 123; //typeof 檢查當前變量是什么數據類型 console.log(typeof a) //特殊情況 var a1 = 5/0; console.log(typeof e1) //Infinity 無限大. number類型

string

var str = '123' console.log(typeof str)

boolean

var b1 = false; console.log(typeof b1)

null

var c1 = null;//空對象. object console.log(c1)

undefined

var d1; //表示變量未定義 console.log(typeof d1)

2.引用數據類型

Function
Object
Arrray
String
Date

04-運算符

js中的運算符跟python中的運算符有點類似，但也有不同。所謂運算,在數學上，是一種行為，通過已知量的可能的組合，獲得新的量。

1.賦值運算符

以var x = 12,y=5來演示示例|

2.算數運算符

var a = 5,b=2

3.比較運算符

var x = 5;

4.特殊情況

字符串拼接+字符串運算特殊情況。python中有拼接字符串中更簡便的辦法，其實在js中也有，大家可以百度引擎搜索es6模板字符串。（擴展）

var firstName = '趙'; var lastName = '森'; var name = '伊拉克'; var am = '美軍'; // 字符串拼接 var str = "2003年3月20日,"+name+"戰爭爆發，以美軍為主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭后，"+am+"又一次取得的大規模壓倒性軍事勝利。" var fullStr = str; console.log(fullStr)var fullName = firstName +" "+ lastName; console.log(fullName) // 不能對字符串進行+運算只能拼接 var a1 = '1'; var a2 = '2'; console.log(a1-a2) //12 var b1 = 'one'; var b2 = 'two';// NaN. ==== not a number 是number類型 console.log(typeof(b1*b2))

05-數據類型轉換

語言中我們的數據類型有很多，在某個頁面中展示的數據類型也不同，比如說電話號碼我就要求number的類型，而輸入姓名的時候就要求string類型的。那么在適當的情況下我們可以將數據類型進行轉換。

1.將數值類型轉換成字符串類型

隱式轉換

var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隱式轉換 console.log(typeof n3);

強制類型轉換

// 強制類型轉換String(),toString() var str1 = String(n1); console.log(typeof str1);var num = 234; console.log(num.toString())

?

2.將字符串類型轉換成數值類型

var stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2)// parseInt()可以解析一個字符串并且返回一個整數 console.log(parseInt(stringNum)) console.log(parseFloat(stringNum));

3.任何數據類型都可以轉換為boolean類型

var b1 = '123'; var b2 = 0; var b3 = -123var b4 = Infinity; var b5 = NaN;var b6; //undefined var b7 = null;// 非0既真 console.log(Boolean(b7))

06-流程控制

1.if 、if-else、if-else if-else

2.邏輯與&&、邏輯或||

//1.模擬如果總分 >400 并且數學成績 >89分被清華大學錄入 //邏輯與&& 兩個條件都成立的時候才成立 if(sum>400 && math>90){console.log('清華大學錄入成功') }else{alert('高考失利') } //2.模擬如果總分>400 或者你英語大于85 被復旦大學錄入 //邏輯或只有有一個條件成立的時候才成立 if(sum>500 || english>85){alert('被復旦大學錄入') }else{alert('高考又失利了') }

3.switch

var gameScore = 'better';switch(gameScore){//case表示一個條件滿足這個條件就會走進來遇到break跳出。break終止循環。如果某個條件中不寫 break，那么直到該程序遇到下一個break停止case 'good':console.log('玩的很好')//break表示退出break;case 'better':console.log('玩的老牛逼了')break;case 'best':console.log('恭喜你吃雞成功')break;default:console.log('很遺憾')}

4.while循環

循環三步走：

1.初始化循環變量

2.判斷循環條件

3.更新循環變量

var i = 1; //初始化循環變量while(i<=9){ //判斷循環條件console.log(i);i = i+1; //更新循環條件 }

練習：將1-100所有是2的倍數在控制臺中打印。使用while循環

5.do_while

//不管有沒有滿足while中的條件do里面的代碼都會走一次 var i = 3;//初始化循環變量 do{console.log(i)i++;//更新循環條件}while (i<10) //判斷循環條件

6.for循環

for(var i = 1;i<=10;i++){console.log(i)}

課堂練習：

for(var i = 1;i<=100;i++){if(i%2==0){//是偶數console.log(i)} }

1-100之間所有數之和

var sum = 0; for(var j = 1;j<=100;j++){sum = sum+j } console.log(sum)

雙重fo循環

for(var i=1;i<=3;i++){for(var j=0;j<6;j++){document.write('*')}document.write('<br>')}

小作業：

1.在瀏覽器中輸出直角三角形

　　　　　　　　　 * ** ******************

代碼：

for(var i=1;i<=6;i++){for(var j=1;j<=i;j++){document.write("*")；}document.write('<br>')； }

2.在瀏覽器中輸出

* *** ***** ******* ********* ***********

代碼：

for(var i=1;i<=6;i++){ //行數//控制我們的空格數for(var s=i;s<6;s++){document.write(' ')}for(var j=1;j<=2*i-1;j++){document.write('*')}document.write('<br>')}

07-常用內置對象

所謂內置對象就是ECMAScript提供出來的一些對象，我們知道對象都是有相應的屬性和方法

數組Array

1.數組的創建方式

字面量方式創建（推薦大家使用這種方式，簡單粗暴）

var colors = ['red','color','yellow'];

使用構造函數（后面會講）的方式創建使用new關鍵詞對構造函數進行創建對象

var colors2 = new Array();

2.數組的賦值

var arr = []; //通過下標進行一一賦值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿'

3.數組的常用方法

3.1 數組的合并?concat()

var north = ['北京','山東','天津']; var south = ['東莞','深圳','上海'];var newCity = north.concat(south); console.log(newCity)

3.2 join()?將數組中的元素使用指定的字符串連接起來，它會形成一個新的字符串

var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|0

3.3?將數組轉換成字符串 toString()

var score = [98,78,76,100,0]; //toString() 直接轉換為字符串每個元素之間使用逗號隔開var str = score.toString(); console.log(str);//98,78,76,100,0

3.4 slice(start,end); 返回數組的一段，左閉右開

var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]

3.5 pop 移除數組的最后一個元素

var arr = ['張三','李四','王文','趙六']; var newArr = arr.pop(); console.log(newArr);//返回值是‘趙六’

3.6 push() 向數組最后添加一個元素

var arr = ['張三','李四','王文','趙六']; var newArr = arr.push('小馬哥'); console.log(newArr);// 返回值是5；

3.7 reverse() 翻轉數組

var names = ['alex','xiaoma','tanhuang','angle'];//4.反轉數組 names.reverse(); console.log(names);

3.8 sort對數組排序

var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names)；//?["alex", "angle", "tanhuang", "xiaoma"]

?3.9?判斷是否為數組：isArray()

布爾類型值 = Array.isArray(被檢測的值) ;

4.字符串String

字符串方法

4.1 chartAt() 返回指定索引的位置的字符

var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l

4.2 concat 返回字符串值，表示兩個或多個字符串的拼接

var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex

4.3 replace(a,b) 將字符串a替換成字符串b

var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755

4.4 indexof() 查找字符的下標，如果找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法一樣

var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1

4.5 slice(start，end) 左閉右開分割字符串

var str = '小馬哥'; console.log(str.slice(1,2));//馬

4.6 split('a',1) 以字符串a分割字符串，并返回新的數組。如果第二個參數沒寫，表示返回整個數組，如果定義了個數，則返回數組的最大長度

var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈'; console.log(str.split('a'));//["我的天呢,", "是嘛,你在說什么呢?", "哈哈哈"]

4.7 substr(statr,end) 左閉右開

var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢

4.8 toLowerCase()轉小寫

var str = 'XIAOMAGE'; console.log(str.toLowerCase())；//xiaomage

4.9 toUpperCase()轉大寫

var str = 'xiaomage'; console.log(str.toUpperCase());

特別：

//1.將number類型轉換成字符串類型 var num = 132.32522; var numStr = num.toString() console.log(typeof numStr) //四舍五入 var newNum = num.toFixed(2) console.log(newNum)

5.Date日期對象

創建日期對象只有構造函數一種方式,使用new關鍵字

//創建了一個date對象 var myDate = new Date();

//創建日期對象 var myDate=new Date();//獲取一個月中的某一天 console.log(myDate.getDate());//返回本地時間 console.log(myDate().toLocaleString());//2018/5/27 下午10:36:23

?注意：是‘toLocaleString’? 是? locale 而不是 local?

6.Math 內置對象

常用內置對象

?6.1 Math.ceil() 向上取整，'天花板函數'

var x = 1.234; //天花板函數表示大于等于 x，并且與它最接近的整數是2 var a = Math.ceil(x); console.log(a);//2

6.2 Math.floor 向下取整，'地板函數'

var x = 1.234; // 小于等于 x，并且與它最接近的整數 1 var b = Math.floor(x); console.log(b);//1

6.3 求兩個數的最大值和最小值

//求兩個數的最大值最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2

6.4 隨機數 Math.random()

var ran = Math.random(); console.log(ran);[0,1)

如果讓你取100-200之間的隨機數，怎么做？

背過公式：min - max之間的隨機數： min+Math.random()*(max-min)

函數：就是將一些語句進行封裝，然后通過調用的形式，執行這些語句。

函數的作用：

將大量重復的語句寫在函數里，以后需要這些語句的時候，可以直接調用函數，避免重復勞動。
簡化編程，讓編程模塊化。

console.log("hello world");sayHello(); //調用函數//定義函數：function sayHello(){console.log("hello");console.log("hello world");}

第一步：函數的定義

函數定義的語法：

function 函數名字(){}

解釋如下：

function：是一個關鍵字。中文是“函數”、“功能”。
函數名字：命名規定和變量的命名規定一樣。只能是字母、數字、下劃線、美元符號，不能以數字開頭。
參數：后面有一對小括號，里面是放參數用的。
大括號里面，是這個函數的語句。

第二步：函數的調用

函數調用的語法：

函數名字();

函數的參數：形參和實參

函數的參數包括形參和實參

注意：實際參數和形式參數的個數，要相同。

例子：

sum(3,4);sum("3",4);sum("Hello","World");//函數：求和function sum(a, b) {console.log(a + b);}

函數的返回值

例子：

console.log(sum(3, 4));//函數：求和function sum(a, b) {return a + b;}

09-偽數組 arguments

arguments代表的是實參。有個講究的地方是：arguments只在函數中使用。

（1）返回函數實參的個數：arguments.length

例子：

fn(2,4);fn(2,4,6);fn(2,4,6,8);function fn(a,b,c) {console.log(arguments);console.log(fn.length); //獲取形參的個數console.log(arguments.length); //獲取實參的個數console.log("----------------");}

結果：

（2）之所以說arguments是偽數組，是因為：arguments可以修改元素，但不能改變數組的長短。舉例：

fn(2,4);fn(2,4,6);fn(2,4,6,8);function fn(a,b) {arguments[0] = 99; //將實參的第一個數改為99arguments.push(8); //此方法不通過，因為無法增加元素}

清空數組的幾種方式：

var array = [1,2,3,4,5,6];array.splice(0); //方式1：刪除數組中所有項目array.length = 0; //方式1：length屬性可以賦值，在其它語言中length是只讀array = []; //方式3：推薦

轉載于:https://www.cnblogs.com/zsdbk/p/9113069.html

總結

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

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

JavaScript

上一篇：小米强推5G手机，自家的4G手机却被迫大
下一篇：表格控件SpreadJS助力上市企业明源