超詳細的JavaScript基本語法規(guī)則
更新時間：2021年08月31日 17:20:11 作者：不吃西紅柿丶
這篇文章主要介紹了JavaScript基本語法規(guī)則,保姆級的詳細教程，萬字長文詳細的列出了JavaScript的各種語法，建議收藏系列，希望可以有所幫助
01 JavaScript (簡稱:js)
js分三個部分:
- ECMAScript 標準----js的基本的語法
- DOM------Document Object Model 文檔對象模型
- BOM------Browser Object Model 瀏覽器對象模
JavaScript是什么？
- 是一門腳本語言（不需要編譯,直接執(zhí)行,常見的腳本語言:t-sql,cmd）
- 是一門解釋性語言
- 是一門動態(tài)類型的語言
- 是一門基于對象的語言
注意：
1.編譯語言是需要把代碼翻譯成計算機所認知的二進制語言,才能夠執(zhí)行
2.前端基礎是HTML（標記語言,展示數據的）
CSS（美化頁面）
JavaScript（用戶和瀏覽器交互）這三大塊
js原名不是JavaScript,而是LiveScript
js的作用?
解決用戶和瀏覽器之間的交互的問題
js的代碼可以分三個地方寫:
1.在html的文件中,script的標簽中寫js代碼
2.js代碼可以在html的標簽中寫
<script>
//js代碼
alert("好好學習,天天向上"); //在頁面中彈出對話框
</script>
<input type="button" value="按鈕" onclick="alert('被點了');"/>
3.在js文件中可以寫js代碼,但是需要在html的頁面中引入 script的標簽中的src="js的路徑"
02 操作符
操作符:一些符號-----用來計算
- 算數運算符: + - * / %
- 算數運算表達式:由算數運算符連接起來的表達式
- 一元運算符: 這個操作符只需要一個操作數就可以運算的符號 ++ –
- 二元運算符: 這個操作符需要兩個操作數就可以運算,
- 三元運算符: 條件表達式?表達式1:表達式2
- 復合運算符: += -= *= /= %=
- 復合運算表達式:由復合運算符連接起來的表達式
var num=10; num+=10;------>就是:num=num+10; console.log(num);20
- 賦值運算符: =
關系運算符:
> < >= <=
==不嚴格的
===嚴格的
!=不嚴格的不等
!==嚴格的不等
關系運算表達式:
由關系運算符連接起來的表達式
關系運算表達式的結果是布爾類型
邏輯運算符:
&&—邏輯與–并且
||—邏輯或—或者
!—邏輯非—取反–取非
邏輯運算表達式:
由邏輯運算符連接起來的表達式
- 表達式1&&表達式2
如果有一個為false,整個的結果就是false
- 表達式1||表達式2
如果有一個為true,整個的結果為true
- !表達式1
表達式1的結果是true,整個結果為false
表達式1的結果是false,整個結果為true
var num1=10;
var num2=20;
console.log(num1==num2&&5>6 )
var num=20;
console.log(num>10||5<0 )
var flag=false;
console.log(!flag )
var num=10;
var sum=(num+10)*5;
console.log(sum
var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true) ;
console.log(result);
var num = 10;
var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22') ;
console.log(result2);
var num=20;
var result=num/3;//num變量與3取余--->10/3的余數
console.log(parseInt(result)
var num=20;
var result=num%3;//num變量與3取余--->10/3的余數
console.log(result )
var num=10;
var sum=(num+10)+1
var num = 20;
num %= 5;
// num=num-5;
console.log(num )
var str="5";
var num=5;
console.log(str===num )
console.log(5>10);//false
console.log(5>=5);//true
console.log(5>3);//true
console.log(5==10);//false
03 JS變量
變量名的注意問題—變量名的命名：
1.要遵循駝峰命名法（第一個單詞的首字母是小寫的,后面的所有的單詞的首字母都是大寫的）
2.變量名要有意義
3.變量名要規(guī)范
4.不能使用關鍵字(系統(tǒng)自帶的一些單詞,不能使用)
聲明變量并初始化—變量的初始化----聲明變量賦值
聲明了一個num的變量存儲了一個數字100
var num=110;
輸出這個變量的值
alert(num);//彈框
瀏覽器的控制臺在瀏覽器中的開發(fā)人員工具中(快捷鍵:F12)的console的選項中
console.log(num);//把內容輸出在瀏覽器的控制臺中
聲明多個變量然后一個一個的賦值
var num1,num2,num3;//聲明 //依次的賦值 num1=10; num2=20; num3=30;
聲明多個變量并且賦值
var num1=10,num2=20,num3=30; var num=10; var $break=10; var shuZi=10;
注意：操作的數據都是在內存中操作
- js中存儲數據使用變量的方式(名字,值—>數據)
- js中聲明變量都用var---->存儲數據,數據應該有對應的數據類型
- js中的字符串類型的值都用雙引號或者單引號
04 JS變量作用
變量的作用是存儲數據的或者是操作數據
變量聲明(有var 有變量名字,沒有值)
變量初始化(有var 有變量名字,有值)
變量聲明的方式:
var 變量名字;
var number;//變量的聲明,此時是沒有賦值的,
//一次性聲明多個變量
var x,y,z,k,j;//都是聲明,沒有賦值
//變量的初始化(變量聲明的同時并且賦值了)
// = 的意義:賦值的含義
//存儲一個數字10
var number = 10;
//存儲一個5
var number2 = 5;
//存儲一個人的名字
var name = "小黑";
//存儲真(true)
var flag = true;
//存儲一個null--->相當于是空
var nll = null;
//存儲一個對象
var obj = new Object();
05 JS變量的交換
使用第三方的變量進行交換
var num1=10; var num2=20; // 把num1這個變量的值取出來放在temp變量中 var temp=num1; // 把num2這個變量的值取出來放在num1變量中 num1=num2; // 把temp變量的值取出來放在num2變量中 num2=temp; console.log(num1);//20 console.log(num2);//10
第二種方式交換:一般適用于數字的交換
var num1 = 10;
var num2 = 20;
// 把num1的變量中的值和num2變量中的值,取出來相加,重新賦值給num1這個變量
num1 = num1 + num2;//30
// num1變量的值和num2變量的值取出來,相減的結果重新賦值給num2
num2 = num1 - num2;//10
// num1變量的值和num2變量的值取出來,相減的結果重新賦值給num1
num1 = num1 - num2;//20
console.log(num1, num2);
注意；變量的名字是不能重名，因為后面的會覆蓋 前面的
var num1=10; var num1=20; console.log(num1);
擴展的變量的交換:只需要看代碼,不需要理解（位運算）
var num1 = 10; var num2 = 20; num1 = num1 ^ num2; num2 = num1 ^ num2; num1 = num1 ^ num2; console.log(num1, num2);
06 注釋
注釋的方式:
- 1.單行注釋 //
- 2.多行注釋 /**/
//單行注釋:一般用在一行代碼的上面
/多行注釋:一般是用在函數或者是一段代碼的上面/
//注釋后的代碼不執(zhí)行了
//console.log("哈哈,我又變漂亮了");
//console.log("第二行");
//聲明變量并初始化
// var num=10;
07 JS的數據類型
值類型(基本類型)：
字符串（String）
數字-整數和小數(Number)
布爾(Boolean)
對空（Null）
未定義（Undefined）
Symbol
引用數據類型：
對象(Object)
數組(Array)
函數(Function)
var num;
console.log(num+10);//NaN-----not an number---->不是一個數字
var num;
console.log(num);
如何獲取這個變量的數據類型是什么? 使用typeof 來獲取
//typeof 的使用的語法
* 都可以獲取這個變量的數據類型是什么!
* typeof 變量名
* typeof(變量 名)
*
var num = 10;
var str = "小白";
var flag = true;
var nll = null;
var undef;
var obj = new Object();
//是使用typeof 獲取變量的類型
console.log(typeof num);//number
console.log(typeof str);//string
console.log(typeof flag);//boolean
console.log(String(nll));//是null
console.log(typeof nll);//不是null
console.log(typeof undef);//undefined
console.log(typeof obj);//object
console.log(typeof(num));
08 JS的數字類型
// 數字類型:整數和小數 var num = 12; num=20; // 整數 num=98.76; // 小數(其他的語言中,浮點型---單精度,雙精度浮點) // 所有的數字都是屬于number類型
09進制
js中可以表示哪些進制呢？
var num=10;//十進制
var num2=012;//八進制
var num3=0x123;//十六進制
var num=12;//十進制 console.log(num); var num2=012;//八進制 console.log(num2); var num3=0x1a;//十六進制 console.log(num3); var num=0x1f; console.log(num);
注意：
想要表示十進制:就是正常的數字
想要表示八進制:以0開頭
想要表示十六進制:0x開頭
10 NaN
不要用NaN驗證是不是NaN
var num;
console.log(num+10==NaN);
console.log("您好"=="我好");
如何驗證這個結果是不是NaN,應該使用isNaN()
var num;//-----變量聲明了,沒有賦值,結果是:undefined 是不是不是一個數字----->不是一個數字嗎？NaN--->不是一個數字 console.log(isNaN(10));
判斷結果不是一個數字可以使用isNaN(變量名)
var str="您好"; var num; var sum=num+10;//NaN console.log(sum); console.log(isNaN(sum));//不是數字為true,是數字結果為false
注意：不要使用NaN判斷是不是NaN，應該使用isNaN(值或者是變量)
11 類型轉換
1.parseInt();//轉整數
console.log(parseInt("10"));//10
console.log(parseInt("10afrswfdsf"));//10
console.log(parseInt("g10"));//NaN
console.log(parseInt("1fds0"));//1
console.log(parseInt("10.98"));//10
console.log(parseInt("10.98fdsfd"));//10
2.parseFloat()//轉小數
console.log(parseInt("10"));//10
console.log(parseInt("10afrswfdsf"));//10
console.log(parseInt("g10"));//NaN
console.log(parseInt("1fds0"));//1
console.log(parseInt("10.98"));//10
console.log(parseInt("10.98fdsfd"));//10
3.Number();//轉數字
console.log(Number("10"));//10
console.log(Number("10afrswfdsf"));//NaN
console.log(Number("g10"));//NaN
console.log(Number("1fds0"));//NaN
console.log(Number("10.98"));//10.98
console.log(Number("10.98fdsfd"));//NaN
注意:想要轉整數用parseInt(),想要轉小數用parseFloat()
想要轉數字:Number();要比上面的兩種方式嚴格
其他類型轉字符串類型
1 .toString()
// var num=10; // console.log(num.toString());//字符串類型 // //2 String(); // var num1=20; // console.log(String(num1));
如果變量有意義調用.toString()使用轉換
如果變量沒有意義使用String()轉換
var num2;
console.log(num2.toString());
var num3=null;
console.log(num3.toString());
//這個可以
var num2;
console.log(String(num2));
var num3=null;
console.log(String(num3));
其他類型轉布爾類型
console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean(11));//true
console.log(Boolean(-10));//true
console.log(Boolean("哈哈"));//true
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
12 JS基本的代碼規(guī)范
- js中聲明變量用var
- js中的每一行代碼結束都應該有分號;(寫代碼有分號的習慣)
- js中的大小寫是區(qū)分的: var N=10; n
- js中的字符串可以使用單引號,也可以使用雙引號,目前我們暫時使用雙引號
以上就是超詳細的JavaScript基本語法規(guī)則的詳細內容，更多關于JavaScript語法規(guī)則的資料請關注腳本之家其它相關文章！
相關文章
javascript編程起步（第三課）...2007-02-02
JavaScript bold方法入門實例（把指定文字顯示為粗體）
這篇文章主要介紹了JavaScript字符串對象的bold方法入門實例,bold方法用于把指定文字顯示為粗體,需要的朋友可以參考下2014-10-10
本文詳細講解了JavaScript操作DOM對象的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了javascript ajax的5種狀態(tài)介紹,它們分別是未初始化、載入、載入完成、交互、完成,也可稱之為ajax的5個過程,需要的朋友可以參考下2014-08-08
初學JS的的小例子 javascript replace高亮替換
初學JS的的小例子 javascript replace高亮替換...2007-12-12
這篇文章主要介紹了WEB前端設計師常用工具集錦，非常的全面，想成為一個優(yōu)秀的WEB前端設計師嗎？那本文你要好好研究研究了。2014-12-12
溫故知新——JavaScript中的字符串連接問題最全總結（推薦）
這篇文章主要介紹了JS中的字符串連接問題，ECMAScript 中最常見的一個問題是字符串連接的性能。在調用 join() 方法時才會發(fā)生連接操作，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
下面小編就為大家?guī)硪黄钊肜斫釰S函數的參數(arguments)的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄P于不同頁面之間實現(xiàn)參數傳遞的幾種方式討論。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了JavaScript中的splice()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06