超詳細的JavaScript基本語法規(guī)則
01 JavaScript (簡稱:js)
js分三個部分:
- ECMAScript 標準----js的基本的語法
- DOM------Document Object Model 文檔對象模型
- BOM------Browser Object Model 瀏覽器對象模
JavaScript是什么？
- 是一門腳本語言（不需要編譯,直接執(zhí)行,常見的腳本語言:t-sql,cmd）
- 是一門解釋性語言
- 是一門動態(tài)類型的語言
- 是一門基于對象的語言
注意：
1.編譯語言是需要把代碼翻譯成計算機所認知的二進制語言,才能夠執(zhí)行
2.前端基礎(chǔ)是HTML（標記語言,展示數(shù)據(jù)的）
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 操作符
操作符:一些符號-----用來計算
- 算數(shù)運算符: + - * / %
- 算數(shù)運算表達式:由算數(shù)運算符連接起來的表達式
- 一元運算符: 這個操作符只需要一個操作數(shù)就可以運算的符號 ++ –
- 二元運算符: 這個操作符需要兩個操作數(shù)就可以運算,
- 三元運算符: 條件表達式?表達式1:表達式2
- 復合運算符: += -= *= /= %=
- 復合運算表達式:由復合運算符連接起來的表達式
var num=10; num+=10;------>就是:num=num+10; console.log(num);20
- 賦值運算符: =
關(guān)系運算符:
> < >= <=
==不嚴格的
===嚴格的
!=不嚴格的不等
!==嚴格的不等
關(guān)系運算表達式:
由關(guān)系運算符連接起來的表達式
關(guān)系運算表達式的結(jié)果是布爾類型
邏輯運算符:
&&—邏輯與–并且
||—邏輯或—或者
!—邏輯非—取反–取非
邏輯運算表達式:
由邏輯運算符連接起來的表達式
- 表達式1&&表達式2
如果有一個為false,整個的結(jié)果就是false
- 表達式1||表達式2
如果有一個為true,整個的結(jié)果為true
- !表達式1
表達式1的結(jié)果是true,整個結(jié)果為false
表達式1的結(jié)果是false,整個結(jié)果為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的余數(shù)
console.log(parseInt(result)
var num=20;
var result=num%3;//num變量與3取余--->10/3的余數(shù)
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.不能使用關(guān)鍵字(系統(tǒng)自帶的一些單詞,不能使用)
聲明變量并初始化—變量的初始化----聲明變量賦值
聲明了一個num的變量存儲了一個數(shù)字100
var num=110;
輸出這個變量的值
alert(num);//彈框
瀏覽器的控制臺在瀏覽器中的開發(fā)人員工具中(快捷鍵:F12)的console的選項中
console.log(num);//把內(nèi)容輸出在瀏覽器的控制臺中
聲明多個變量然后一個一個的賦值
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;
注意：操作的數(shù)據(jù)都是在內(nèi)存中操作
- js中存儲數(shù)據(jù)使用變量的方式(名字,值—>數(shù)據(jù))
- js中聲明變量都用var---->存儲數(shù)據(jù),數(shù)據(jù)應(yīng)該有對應(yīng)的數(shù)據(jù)類型
- js中的字符串類型的值都用雙引號或者單引號
04 JS變量作用
變量的作用是存儲數(shù)據(jù)的或者是操作數(shù)據(jù)
變量聲明(有var 有變量名字,沒有值)
變量初始化(有var 有變量名字,有值)
變量聲明的方式:
var 變量名字;
var number;//變量的聲明,此時是沒有賦值的,
//一次性聲明多個變量
var x,y,z,k,j;//都是聲明,沒有賦值
//變量的初始化(變量聲明的同時并且賦值了)
// = 的意義:賦值的含義
//存儲一個數(shù)字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
第二種方式交換:一般適用于數(shù)字的交換
var num1 = 10;
var num2 = 20;
// 把num1的變量中的值和num2變量中的值,取出來相加,重新賦值給num1這個變量
num1 = num1 + num2;//30
// num1變量的值和num2變量的值取出來,相減的結(jié)果重新賦值給num2
num2 = num1 - num2;//10
// num1變量的值和num2變量的值取出來,相減的結(jié)果重新賦值給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.多行注釋 /**/
//單行注釋:一般用在一行代碼的上面
/多行注釋:一般是用在函數(shù)或者是一段代碼的上面/
//注釋后的代碼不執(zhí)行了
//console.log("哈哈,我又變漂亮了");
//console.log("第二行");
//聲明變量并初始化
// var num=10;
07 JS的數(shù)據(jù)類型
值類型(基本類型)：
字符串（String）
數(shù)字-整數(shù)和小數(shù)(Number)
布爾(Boolean)
對空（Null）
未定義（Undefined）
Symbol
引用數(shù)據(jù)類型：
對象(Object)
數(shù)組(Array)
函數(shù)(Function)
var num;
console.log(num+10);//NaN-----not an number---->不是一個數(shù)字
var num;
console.log(num);
如何獲取這個變量的數(shù)據(jù)類型是什么? 使用typeof 來獲取
//typeof 的使用的語法
* 都可以獲取這個變量的數(shù)據(jù)類型是什么!
* 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的數(shù)字類型
// 數(shù)字類型:整數(shù)和小數(shù) var num = 12; num=20; // 整數(shù) num=98.76; // 小數(shù)(其他的語言中,浮點型---單精度,雙精度浮點) // 所有的數(shù)字都是屬于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);
注意：
想要表示十進制:就是正常的數(shù)字
想要表示八進制:以0開頭
想要表示十六進制:0x開頭
10 NaN
不要用NaN驗證是不是NaN
var num;
console.log(num+10==NaN);
console.log("您好"=="我好");
如何驗證這個結(jié)果是不是NaN,應(yīng)該使用isNaN()
var num;//-----變量聲明了,沒有賦值,結(jié)果是:undefined 是不是不是一個數(shù)字----->不是一個數(shù)字嗎？NaN--->不是一個數(shù)字 console.log(isNaN(10));
判斷結(jié)果不是一個數(shù)字可以使用isNaN(變量名)
var str="您好"; var num; var sum=num+10;//NaN console.log(sum); console.log(isNaN(sum));//不是數(shù)字為true,是數(shù)字結(jié)果為false
注意：不要使用NaN判斷是不是NaN，應(yīng)該使用isNaN(值或者是變量)
11 類型轉(zhuǎn)換
1.parseInt();//轉(zhuǎn)整數(shù)
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()//轉(zhuǎn)小數(shù)
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();//轉(zhuǎn)數(shù)字
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
注意:想要轉(zhuǎn)整數(shù)用parseInt(),想要轉(zhuǎn)小數(shù)用parseFloat()
想要轉(zhuǎn)數(shù)字:Number();要比上面的兩種方式嚴格
其他類型轉(zhuǎn)字符串類型
1 .toString()
// var num=10; // console.log(num.toString());//字符串類型 // //2 String(); // var num1=20; // console.log(String(num1));
如果變量有意義調(diào)用.toString()使用轉(zhuǎn)換
如果變量沒有意義使用String()轉(zhuǎn)換
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));
其他類型轉(zhuǎn)布爾類型
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中的每一行代碼結(jié)束都應(yīng)該有分號;(寫代碼有分號的習慣)
- js中的大小寫是區(qū)分的: var N=10; n
- js中的字符串可以使用單引號,也可以使用雙引號,目前我們暫時使用雙引號
以上就是超詳細的JavaScript基本語法規(guī)則的詳細內(nèi)容，更多關(guān)于JavaScript語法規(guī)則的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript中FOREACH數(shù)組方法使用示例
本文給大家介紹的是Array.prototype.forEach()的使用方法示例，希望對大家學習javascript能夠有所幫助。2016-03-03
JavaScript字符串對象charAt方法入門實例（用于取得指定位置的字符）
這篇文章主要介紹了JavaScript字符串對象charAt方法入門實例,charAt方法用于取得指定位置的字符,需要的朋友可以參考下2014-10-10
Web Inspector：關(guān)于在 Sublime Text 中調(diào)試Js的介紹
本篇文章小編將為大家介紹，Web Inspector：關(guān)于在 Sublime Text 中調(diào)試Js的介紹。需要的朋友可以參考一下2013-04-04
JavaScript字符串對象substring方法入門實例（用于截取字符串）
這篇文章主要介紹了JavaScript字符串對象substring方法入門實例,substring方法通過指定開始和結(jié)束位置來截取字符串,需要的朋友可以參考下2014-10-10
Keycode對照表,整理了一下方便大家以后使用參考。2009-10-10
這篇文章主要介紹了詳解JavaScript中的blink()方法的使用,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
淺談js和css內(nèi)聯(lián)外聯(lián)注意事項
下面小編就為大家?guī)硪黄獪\談js和css內(nèi)聯(lián)外聯(lián)注意事項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascript Math ceil()、floor()、round()三個函數(shù)的區(qū)別
Round是四舍五入的。。。Ceiling是向上取整。。float是向下取整2010-03-03
js判斷瀏覽器的比較全的代碼...2007-02-02
JavaScript bold方法入門實例（把指定文字顯示為粗體）
這篇文章主要介紹了JavaScript字符串對象的bold方法入門實例,bold方法用于把指定文字顯示為粗體,需要的朋友可以參考下2014-10-10