JavaScript入門（基礎）
阿新 • • 發佈：2018-10-11
prompt 比較 ava pac 存在 window對象 表示 區分大小寫 default
一、JS語言介紹
1.概述
- 瀏覽器腳本語言
- 可以編寫運行在瀏覽器上的代碼程序
- 屬於解釋性、弱語言類型編程語言
2.組成
- ES語法：ECMAScript、主要版本有ES5和ES6
- DOM:文檔對象模型(Document Object Model),是W3C組織推薦的處理可擴展標準語言的標準編程接口。
- BOM瀏覽器對象模型(Browser Object Model),提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構，且由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
二、JS的基本語法
1.三種存在位置(HTML中)
1.1行間式：存在於行間的時間中
<body id='bd' onload="body.style.backgroundColor='cyan'">
</body>1.2內聯式：存在於頁面的script標簽中
<body id ='bd'>
<style>
bd.style.backgroundColor='cyan';
</style>
</body>- 一般情況下，內聯可以放在
</body>下 或者</body>上，最終被解析在</body>上方 - 內聯式也可以出現在
<head>標簽底部，一般應用於依賴性JS庫
1.3外聯式：存在於外部JS文件，通過script標簽的src屬性鏈接
html文件：
<script src='js/test.js'></script>
js文件：
bd.style.backgroundColor='cyan';<script src="js/02.js"> alert(123) </script> 擁有src的外聯script標簽，會自動屏蔽標簽內部的代碼塊
1.4總結
- 內聯使用場景：某頁面的特有邏輯，可以書寫在該頁面的script標簽內
- 外聯的使用場景：適用於團隊開發，js代碼具有復用性
- 出現在head標簽底部：依賴型JS庫；出現在body標簽底部：功能型JS腳本
2.JavaScript註釋
//單行註釋
/*
多行註釋
*/3.變量的定義
3.1變量的命名規範
- 標識符由字母數字下劃線，$組成，不能以數字開頭(駝峰命名法)
- 標識符不能與關鍵字及保留字重名
- 區分大小寫
保留字：
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
3.2ES5定義變量
var num = 10; //無塊級作用域變量
num = 10; //全局變量3.3ES6定義變量
let num = 10; //局部變量
const NUM=10; //常量 常量名全大寫 不允許修改註：ES5標準下無塊級作用域，只有方法可以產生實際的局部作用域
// 方法的自調用，就會產生一個局部的作用域
(function () {
var x=10;
y=20;
})()ES6有塊級作用域
4.三個基本彈出框
alert() //一個彈出框只能彈出一條消息，多個值，後面的值會被忽略
confirm() // 確認框 有返回值， true | false
prompt() //輸入框 確定為輸入值，取消為null5.函數監測
typeof(100)5.數據類型
5.1值類型
5.1.1數字類型Number
數值範圍：-5e324 ~ 1.7976931348623157e+308超過範圍，會顯示為 Infinity(正無窮) 或 -Infinity(負無窮),不像其它語言，JS的數字類型包含了小數。
特殊的Number值 NaN:表示Not A Number，非數字類型
和任何值都不相等
與任何值運算,結果還是NaN
isFinite() //函數判斷是否在範圍內
isNaN() //函數 判讀是否是 NaN5.1.2字符串類型String
聲明方式：
雙引號
單引號
模板字符串(ES6新增)
content = ` 打紮好，我寺${username}. 是兄弟，就來砍我 今晚八點，不見不散 ` //多行，${}方式 嵌入變量。 傳統方式變量字符串連接必須用字符串連接符
5.1.3布爾類型Boolean true |false
var a = true;
console.log(a, typeof a);5.1.4未定義類型Undefined
undefined 表示'缺少值'
var c = undefined
console.log(c,typeof c);5.2引用類型
5.2.1函數類型function
var m = function(){
console.log(m,typeof m);
}5.2.2對象類型：object
var obj = {};
console.log(obj,typeof obj);
obj = new Object();
//console.log(obj,typeof obj); //對象類型判斷一般用instanceof
console.log(obj instanceof Object);5.3具體的對象類型
5.3.1空對象：null
var o = null;
//console.log(o,typeof o);
//空的判斷用==
console.log(o == null);5.3.2數組對象：Array
o = new Array(1,2,3,4,5);
//console.log(o,typeof o);
//判斷
console.log(o instanceof Array);5.3.3時間對象：Date
o = new Date();
console.log(o,instanceof Date);5.3.4正則對象：ReExp
o = new ReExp();
console.log(o, instanceof ReExp);6.數據類型轉換
6.1顯示轉換
//1.num,bool => str //String|toString
var a = 10;
var b=true;
var c =String(a);
c = a.toString();
//2.bool,str => num //Number |+?
var aa =true;
var bb = '10';
var cc = Number(aa);
cc = +aa; //'1' number
cc = +bb; //'10' number
//針對字符串 //parseFloat|parseInt
cc = parseFloat('3.14.15.16');
console.log(cc,typeof cc); //3.14 number
cc = parseInt('10.35abc');
console.log(cc,typeof cc); //10 number
//字符串以非數字開頭，結果為NaN
//1.非數字類型
//2.不與任何數相等，包含自己
//3.通過isNaN()進行判斷
var res = parseInt('abc10def');
console.log(res,isNaN(res));6.2隱性轉換
5 + null //5
'5' +null //'5null'
'5' +1 //'51'
'5' -1 //47.運算符
7.1算數運算符
- 加法運算符 +
- 減法運算符 -
- 乘法運算符 *
- 除法運算符 /
- 模運算符 %
- 負號運算符 -
- 正號運算符 +
- 遞增運算符 ++
- 遞減運算符 --
註：++/--在前先自身運算，再做其他運算，++/--在後先做其他運算，再自運算
//a = 5
var res = a++;
console.log('res:'+res+'a:'+a); //5 6
//a =5
var res = ++a;
console.log('res:'+res+'a:'+a); //6 67.2賦值運算符
前提：x=5，y=5
| 運算符 | 例子 | 等同於 | 運算結果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
7.3比較運算符
前提：x=5
| 運算符 | 描述 | 比較 | 結果 |
|---|---|---|---|
| == | 等於 | x=="5" | true |
| === | 絕對等於 | x==="5" | false |
| != | 不等於 | x!="5" | fales |
| !== | 不絕對等於 | x!=="5" | true |
| > | 大於 | x>5 | false |
| < | 小於 | x<5 | false |
| >= | 大於等於 | x>=5 | true |
| <= | 小於等於 | x<=5 | true |
7.4邏輯運算符
前提：n=5
| 運算符 | 描述 | 例子 | 結果 |
|---|---|---|---|
| && | 與 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
&&運算，有假即假，前面有假，後面不會被執行，稱為短路||運算，有真，即真，前面為真，後面不執行 短路
7.5三目運算符(三元運算符)
expression ? sentence1 : sentence2
當expression的值為真時執行sentence1，否則執行 sentence2
var tq = prompt('天氣(晴|雨)')
var res =tq =='晴'?'今天天氣挺好':'請假回家';
console.log(res);7.6其他運算符
- 條件運算符
?: typeof運算符 判斷操作數類型delete運算符 刪除對象屬性或者數組元素void運算符 忽略操作數的值- 逗號運算符
, - 字符串連接
+
補：四種調試方式
- alert()
- console.log()
- document.write()
- 瀏覽器斷點調試
JavaScript入門（基礎）