原生Javascript1
本篇文章主要介紹js的語言基礎及流程控制陳述句
語言基礎
Javascript歷史
布蘭登·艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript，
JavaScript誕生于1995年，它當時的目的是為了驗證表單輸入的驗證，一開始JavaScript叫做LiveScript，但是由于當時Java這個語言特別火，所以搭上Java的順風車，就改名為JavaScript，
同時期還有其他的網頁語言，比如VBScript、JScript等等，但是后來都被JavaScript打敗，所以現在的瀏覽器中，只運行一種腳本語言就是JavaScript，
經過許多年的發展，JavaScript從一個簡單的輸入驗證成為一門強大的編程語言
2003年之前，JavaScript被認為“牛皮鮮”，用來制作頁面上的廣告，彈窗、漂浮的廣告，什么東西讓人煩，什么東西就是JavaScript開發的，所以瀏覽器就推出了屏蔽廣告功能，
2007年喬布斯發布了iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網，JavaScript在移動頁面中，也是不可或缺的，并且這一年，互聯網開始標準化，按照W3C規則三層分離，人們越來越重視JavaScript了，
今天，JavaScript工程師是能夠和iOS、Android工程師比肩，毫不遜色的，
JavaScript是一種具有面向物件能力的、解釋型的程式設計語言，更具體一點，它是基于物件和事件驅動并具有相對安全性的客戶端腳本語言，
Javascript的組成
- 核心（ECMAScript）
- 檔案物件模型（DOM）
Document Object Model - 瀏覽器物件模型（BOM）
Browser Object Model
Javascript引入及寫法
- 內部書寫
在html檔案中直接進行代碼的書寫
1.位于head部分的腳本
當把腳本放置在head部分后，必須等到全部的JavaScript代碼都被下載，決議和執行完成后，才能呈現頁面的內容（瀏覽器在遇到body標簽才開始呈現內容），
2.位于body部分的腳本
為了避免上述問題，現代web應用程式一般b把javascript參考放在body中，放在頁面內容后面，這樣，在決議包含的JavaScript代碼之前，頁面內容也將完整呈現
- 外部引入
所有的<script>元素都放在頁面的<head>元素中
<link rel="stylesheet" href="./css/a.css">
所有herf指向檔案中所用到的地址都是指向這個對于鏈接檔案的，而不是指向當前網頁的
<script src="./js/a.js" async> </script>
<script src="./js/b.js" defer> </script>
所有src指向的檔案中所用到的地址都是指向相對當前頁面的
async 異步加載，不需要等待a.js加載完就可以繼續向后同時加載b.js
所有的js被加載后立即執行
defer 當所有內容加載完成后執行當前js內容（即在形成DOM渲染樹之后開始執行）
同步與異步
script和link加載外部檔案時是一個加載完成后再繼續加載下一個，這種叫做同步
img標簽在加載程序中，是并行同時加載，這就叫做異步
樹
DOM樹就是html標簽樹
css根據DOM樹結構形成了CSS樹
DOM樹與CSS樹合并形成DOM渲染樹
在加載圖片
defer在執行
- 直接寫在標簽
<p onlick="alert(“你好”);">點擊我</p>
<a href="javascript:void(0)">超鏈接</a>
<a href="javascript:alert(123)">超鏈接</a>
阻止頁面的重繪，歷史生成和地址的變化
注釋
- 單行注釋
//注釋內容 不可換行
//快捷鍵 ctrl + /
- 塊級/多行注釋
/* 注釋內容
可以換行 */
/* 快捷鍵
CTRL+shift+/ */
除錯
這里主要介紹一下Console控制臺
Console控制臺：
用于列印和輸出相關的命令資訊，其實console控制臺除了我們熟知的報錯，列印console.log資訊外，還有很多相關的功能，
比如打斷點正好執行到獲取的資料上，由于資料都是層層嵌套的物件，這個時候查看里面的key/value不是很方便，既可用這個指令開查看，obj的json string格式的key/value，即可一目了然
常用方法
- console.log()
輸出日志檔案 控制臺輸出
- alert()
警告訊息框
彈出框or對話框
只有一個確認按鈕
- confirm()
確認訊息框
確認取消對話框
可以得到確認或者取消的結果true ， false
- prompt()
提示訊息框 專門用來給用戶提供輸入視窗的
prompt("你今年多大了？"，"20歲");
//彈出輸入框，允許用戶輸入，并且回傳結果
//prompt（輸入框的提示內容，默認結果）- document
//document.body 獲取body標簽
document.body.innerHTML="你好"; //將body里面的內容換成你好字符
//doucument 檔案
document.write("你好"); //在檔案中寫入你好
//write是只針對document的，innerHTML是針對所有標簽的//根據id在檔案中獲取div1的元素
var div1=documnent.getElementById("div1");
div1.innerHTML="你好";
//點擊事件
div1.onclick=function(){
div1.innerHTML="不錯，你點中了";
}
//給div1增加行內樣式
div1.style.width="50px";
div1.style.height="50px";
div1.style.backgroundColor="red";陳述句塊
陳述句塊(blocks)是由一些相互有關聯的陳述句構成的陳述句集合
通常來說，用{}括起來的一組JavaScript陳述句稱為陳述句塊（blocks）
在陳述句塊里面的每句陳述句以分號（;）表示結束，但是陳述句塊本身不用分號
陳述句塊（blocks）通常用于函式和條件陳述句中，
變數
- JavaScript關鍵字
可用于表示控制陳述句的開始或結束，或者用于執行特定操作等
按照規則，關鍵字也是語言保留的，不能用作識別符號！！！
break do instanceof typeof case else new var catch finally return void continue for
switch while function this with default if throw delete in try
- JavaScript保留字
保留字是指有可能以后被當作關鍵字來使用，不能用作識別符號！
abstract int short boolean export interface static byte extends ling super char final native class float
throws const goto private double importn public
- JavaScript變數
變數 可變的量 var定義
所有變數名稱必須使用字母或下劃線開頭，后面的內容包含有字母，數字和下劃線
變數名要表意且不能命名中文
一個變數不能由數字開頭
在JS中嚴格區分大小寫 =>num Num NUm NUM 這是四個變數
不能使用關鍵字或保留字
不能使用window屬性命名
var status = 10;_width 臨時變數，引數，類中使用
補充：
//ESS5中
a = 3;
console.log(a);
//如果沒有定義直接賦值，該變數就是這個值
console.log(a);
//如果沒有定義和賦值，直接呼叫就會報錯
var a;
console.log(a);
//如果沒有賦值，直接呼叫就是undefined1.一次宣告一個變數，例句如下：
var a；
2.同時宣告多個變數，變數之間用都逗號相隔，例句如下：
var a,b,c;
3.宣告一個變數時，同時賦予變數初始值，例句如下：
var a = 2;
4.同時宣告多個變數，并且賦予這些變數初始值，變數之間用逗號相隔，例句如下：
var a = 2,b = 5;
- JavaScript常量
const
const RECT_WIDTH=200;常量設定值后，不能重新賦值
要求const定義常量時，必須全部字母大寫，單詞之間使用下劃線區分
資料型別
//不規定變數的型別，可以任意修改型別的語言叫做弱型別
var a = 3;
a = "abc";
a = ture;- 數字
Number 數值
+一切十進制表示的數字 var a = 3；
+一切浮點數（小數） var a = 3.33;
+其他進制表示的數字
=>十六進制，以0x開頭 var a = 0xff;
=>八進制，以0開頭，不允許出現大于7的值，ES6取消使用
=>二進制，以0b開頭
+科學計數法
=>比較大的數字使用科學計數法表示
=>var a = 2e+5; 2*10的5次方
=> var a = 2e-5; 2*10的-5次方
+NaN
=>Not a Numnber
//補充：在控制臺輸出任何其他進制數字的時候，都會自動轉換成十進制
- 字串
String 字串
+在JS里面一切使用引號（雙引號，單引號，反引號）包裹的內容都是字串
+表示一段文本內容，是一個字符一個字符連接起來的內容
=>'hello'
=>"hello"
=>`hello`
+當你在字串里面只寫數字的時候，也不是數值型別
=>也是字串型別
+在字串里面，空格是占位的
- 布爾
var a = true;
var b = false;Boolean 布爾
+在JS里面，布爾只有兩個值
=>true 表示真，在計算機存盤的時候就是1
=>false表示假，在計算機存盤的時候就是0
+在運算程序中有什么意義
=>主要用來做判斷
=>例子
-> a>b 如果得到ture，表示這個運算式是真的
-> a<b 如果得到false，表示這個運算式是假的
- Null
Null 這里有一個值 有一個空值
- Undefined
這里本該有有一個值，但是沒有 就是undefined
未定義 定義了沒有賦值
var a = undefined;
var b;
console.log(a,b); //undefined undefined- 物件
Object 物件
var a = {a:1,b:2};- 補充
檢測資料型別
+在運算程序中，有的資料不是我們自己寫的
+有可能是通過運算得到的，有可能是別人給的
+為了保證程式的正確運行，我們需要檢測資料型別變數
關鍵字 Typeof
是用來檢測變數的資料型別
+兩種用法
1.typeof 變數
=>語法：typeof 要檢測的變數
=>回傳值（結果）：以字串的形式給你的變數資料型別
2.typeof（變數）、
=>語法：typeof（要檢測的變數）
=>回傳值：以字串的形式給你的變數資料型別
+兩種語法的區別
1.typeof 只能檢測緊跟著的一個變數
2.typeof（）先運算小括號里面的結果，然后使用typeof去檢測結果的資料型別
+typeof的回傳值
=>注意：typeof的回傳值是一個字串
=>當兩個及以上typeof連用的時候，一定得到string
=>只能準確的檢測基本資料型別
->數值：number
->字串：string
->布爾：boolean
->undefined：undefined
->null： object
var n1 = 100;
var n2 = 200;
var res2 = typeof n1 + n2;
console.log(res2); //number20
var res3 = typeof(n1 + n2);
console.log(res3); //number
var res = typeof typeof n1;
console.log(res); //string
console.log(typeof 100); //number
console.log(typeof '100'); //string
console.log(typeof true); //boolean
console.log(typeof undefined); //undefined
console.log(typeof null); //object資料型別轉換
- xx轉數值型
a = Number(a); //強制轉換
a -= 0;
a = parseFloat(a); //轉換為浮點數
//從頭開始 決議到字串末尾或者決議到一個無效的浮點數值字符為止
a = parseInt(a);//轉換為整型數值
//從頭開始向后轉換遇到字符停止(如果開始是數值就可以轉換)
a = parseInt(a,16);//將字串按照指定的進制型別轉換，第二個是進制型別1.字符型轉為數值型
NaN非數值-->數值型別
1)字串只要含有非數字就會轉換為NaN，否則轉換為數值
2）空字串（不包含字符），直接回傳0；
2.布林值
true 轉換為1
false 轉換為0
3.數值直接回傳
4.null回傳0
5.undefined回傳NaN
6.物件Object回傳NaN
- ----->轉字符
a = String(a); //強制轉換
a += "0";
a = a.toString();
a = a.toString(36);//將數值按照指定進制型別轉換為字串，進制2-36
a = a.toFixed();//保留整數部分 四舍五入
a = a.toFixed(2);//保留小數點后2位
a = a.t0Exponential(2);//保留兩位小數科學計數法
a = a.toPrecision(2);//保留數值的數量
a = a.toLocaleString();//本地字串
//布林值，undefined，null
//轉換為字串toString();
//"true" "false"
//"undefined"
//"null"
//object轉換為字串
var a = {a:1,b:2};
var a = {a:2,c:4};
a = String(a);
console.log(a);//[object,Object]- ----->轉布林值
"",0,undefined,null,false,NaN轉換后都是false 除此之外都是true
//陣列Array
var arr = [];
var b = Boolean(arr);
console.log(b);//true
console.log(![]==[]);//true
//![]-->false;
//[1,2,3]--->"1,2,3"
//[]--->""--->false;
//陣列進行比較時，如果遇到布林值，優先將陣列轉換為字串
//遇到！先轉換為布林值，再取反var a ="";
if(!a){
//只有當a為""，0，null，NaN，undefined，false時才進入
}
//遇到！需要將值轉換為布林值取反
var a = 3;
a = Object(a);
console.log(a==3); //true 運算子
- 算術運算子
+ 加
——（隱式轉換）所有的隱式轉換都是使用強制轉換方法
1.只要有一個是字符型別，另一個就會被轉換為字符型別，并且首尾相連
2.若一側是布林值，就會根據另一側轉換
3.如果兩側都沒有字符或數值，就會轉換為數值運算
4.一旦遇到物件就會隱式轉換為字符型別相加
var a = true;
var b = 1;
console.log(a+b);//2
var b = "1";
console.log(a+b);//true
var b;
console.log(a+b);//NaN
var b = null;
console.log(a+b);//1
var b = {a:1};//一旦遇到物件都會隱式轉換為字符相加
console.log(a+b);//true[object Object]
var b = [];
console.log(a+b);//true任何- * / %全部遵照數值運算規則，兩側都轉換為數值運算
- 減
* 乘
/ 除
% 求余數（保留整數） 連續取模是沒有意義的
- 一元運算子
++ 累加
++a 先進行+1運算 在回傳a的值
a++ 先回傳a的值 在進行+1運算
-- 遞減
規則同累加相同
不論是++a(a++)還是--a(a--)全部都是數值運算
- 關系運算子
關系運算子結果回傳一個布林值
< > <= >= == === != !===
==（比較運算）
//1）字串與布林值比較，數值與布林值比較都是布林值轉換成相應的字串或數值，在進行比較
//2）undefined，null，物件與布林值進行比較時 布林值無法轉換為相應的型別 所以不同 即false
//3）陣列[]與布林值比較 優先將陣列轉換為字串 在比較
//![]優先將[]看作物件，所以[]就是true，取反后變成false
console.log("3" == 3);//true
console.log("3" == true);//false
console.log("" == true);//false
console.log(2 == true);//false
console.log(undefined == false);//false
console.log(null == false);//false
console.log({a:1} ==true);//false
console.log([] == false);//true
console.log(![] == false); //true
console.log(![] == []);//false
console.log("" == 0);//true
console.log(undefined == undefined);//false
console.log("null" == null);//false
console.log("" == null );//false
console.log("" == undefined);//false
console.log("[object Object]" == {a:1});//true
console.log("a" == ["a"]);//陣列轉換為字串 true
//當字符型別和參考型別比較時，優先將參考型別執行toString（）轉換為字符型別
console.log(undefined == null);//true
console.log(NaN ==NaN);//false
console.log(isNaN(Number("a")));//true 判斷是不是NaN=== 精確比較運算子
//a 為 "" 0 null undefined false NaN
if(!a){
}
//a 為 0 "" false
if(a == false){
}
//a 為 null undefined
if(a == undefined){
}
//a 為 undefined
if(a === undefined){
}
//Object.is 類似于===
console.log(Object.is("3",3));//false
console.log(Object.is(3,3));//true
console.log(Object.is(NaN,NaN));//true- 邏輯運算子
! 邏輯非
&& 邏輯與
true && true =true 回傳最后一個值
true && false =false 回傳false對應的值
false && true =false 回傳false對應的值
false && false =false 回傳第一次遇見false對應的值
|| 邏輯或
true || true =true; 第一個遇到true的對于值
true || false =true; 回傳true對應的值
false || true =true; 回傳true對應的值
false || false =false 回傳最后一個false對應的值
- 賦值運算子
var a = 1;
//看到一個=號，就是表示將符號右側的結果賦值給等號左側，并且回傳一個值乘法/賦值（*=）
除法/賦值（/=）
取模/賦值（%=）
加法/賦值（+=）
減法/賦值（-=）
左移/賦值（<<=）
有符號右移賦值（>>=）
無符號右移/賦值（>>>=）
- 位運算子
~ 位非運算子
~-1 == 0；//實質上是對其加一取負
var str = "abcdef";
console.log(str.indexOf("c"));//3
if(~str.indexOf("z"));{
console.log("找到了z");//因為str字串內不含z 所以回傳-1 進行位非運算后得0 即不可進入
}
//indexOf()方法 可回傳某個指定的字串值在字符中首次出現的位置
// 如果要檢索的字串值沒有出現，則該方法回傳-1
& 位與運算子
進行二進制計算 兩個數位都是1 才為1
1&1=1
1&0=0
0&1=0
0&0=0
| 位或運算子
二進制運算 兩個數位都是0 才為0 都為1 仍取0
1|0=1
0|1=1
0|0=0
1|1=1
^ 位異或運算子
二進運算 當只有一個數位存放的是1時，才回傳1 可用于加密解密
1^1=0
0^0=0
1^0=1
0^1=1
var pass = 7856;
var key = 2534;
var value = pass^ key;
console.log(pass ^ key);// 5974 加密
console.log(value ^ key); //解密<< 左移位運算子
左移位運算由兩個小于號表示(<<)
它把數字中的所有數位向左移動指定的數量，
例如，把數字2（等于二進制中的10）左移5位，結果為64（等于二進制中的1000000）
>>右移位運算子
有符號右移運算子由兩個大于號表示(>>)，
它把32位數字中的所有數位整體右移，同時保留該數的符號（正號或負號），
有符號右移運算子恰好與左移運算子相反
例如，把64右移5位，將變為2
- 條件運算子（三目運算子）
variable = boolean_expression？true_value:false_value;
var b = a>5 ? 2 : 1;
//前面的條件判斷 如果回傳true 就將第一個結果回傳前面 否則將第二個結果回傳前面
//當三元運算子遇到回傳布林值時，直接回傳條件即可
//三目優先級高于賦值運算 += -= ...運算子優先級
補充：instanceof運算子用來檢測constructor.prototype是否存在與引數object的原型鏈上
運算式
javascript運算式（expressions）相當于JavaScript語言中的一個短語，包括變數、字面量和運算子，
這個短語可以判斷或者產生一個值，這個值可以是任何一種合法的JavaScript型別-數字、字串、物件等
最簡單的運算式是字符：
運算式示例：
3.9//數字字符
“Hello！” //字串字符
false //布爾字符
null //null值字符
Age + 3
以下是比較復雜的運算式示例：
3 * （4/5）+ 6
Math.PI * radins * radius + 12
流程控制陳述句
條件陳述句
各類條件陳述句的順序問題
- if
//if就是”如果“的意思
if(條件運算式){
陳述句1
}
陳述句2
運算式為真時，執行if控制的陳述句
//運算式如果不是布林值就會隱式轉換為布林值
if(運算式){
//滿足條件后執行的陳述句塊
}
if(a>5){
}
//如果條件后執行陳述句就一句，可以省略{}
if(a>5){
b =6;
}
if(a>5)b =6;- if else
if(條件運算式){
陳述句1
}else{
陳述句2
}
陳述句3
//if陳述句也稱為“選擇陳述句”，“條件判斷陳述句”
//意味著條件后的一句運算式 為滿足該條件執行 其他不執行
if(a>5)
b = 6;
a++;
if(a>5){
b = 6;
}
a++;
if(a>5){
b = 10;
}else{
b = 0;
}
if(a>5) b = 10;
else b =0;
- if else if
if...else if...else陳述句：使用該陳述句來選擇多個代碼塊之一來執行
if(條件運算式1){
陳述句1
}else if(條件運算式2){
陳述句塊2
}else if(條件運算式3){
陳述句塊3
}
...
else{
陳述句塊4
}
陳述句塊5
//用戶輸入成績，如果成績大于等于85，那么提示優秀；
//否則如果成績大于等于70，提示良好；
//否則如果成績60~69，提示及格；
//否則，不及格
var value = 79；
if(value >= 85){
console.log("優秀");
}else if(value >= 70){
console.log("良好");
}else if(value >60 && value <69){
console.log("及格");
}else{
console.log("不及格");
}
- if陳述句的嵌套
if(條件){
if(條件){
}
}- switch case
switch(n){
case 1:
代碼塊1
break；
case 2:
代碼塊2
break；
default;
n與case 1和case 2 不同時執行的代碼
}
//作業原理：首先設定運算式 n（通常是一個變數）
//運算式的值與結構中的每個case的值作比較
//存在則執行與該case關聯的代碼塊/使用break來阻止代碼自動地向下一個case運行，switch()中的運算式不一定回傳布林值 所以不會做隱私轉換
運算式與值1，值2，值3是否相等（絕對相等）、
break 跳出該條件陳述句
default 默認情況，如果以上值都不相同，則執行默認內容陳述句塊·
注意：
case值：這里是：指要執行的陳述句塊內容，并沒有{}，：代表開始
結束時需要break，如果沒有break就會向下執行，直到遇到break或者全部執行完畢
如果沒有break，完成下一個內容穿越時，不需要判斷是否與該值相同，這種情況叫穿越
switch中運算式可以是任何內容，重要的是運算式回傳的值
switch是一個判斷是否絕對相等的條件，因此不能做其他型別的判斷
default一般寫在switch最后，并且一般不加break
switch可以在內容與if等陳述句混合使用
switch一般用于狀態機
重點在于遇到沖突時 磁區塊處理
1.直穿 等同于邏輯或
2.穿越中會經歷代碼
少代碼的目的，要注意代碼經過是必須執行的，所以要多考慮執行的順序和必要性
switch中的運算式如果描述的是true就可以完成多元條件的判斷
但是因為switch就是一個絕對相等，
所以不支持隱式轉換，判斷是后面的內容需要主動轉換為布爾型別
回圈陳述句
- while
//語法格式
while(判斷陳述句){
回圈體；
}
陳述句2
//while陳述句是一種先判斷，后運行的回圈陳述句，
//也就是說，必須滿足條件了之后，方可運行回圈體，
var i = 1; //賦初值陳述句
while(i <= 10) //控制回圈條件
{
document.write("hello world!</br>");//回圈體
i++； //回圈增量
}關于while回圈：
while回圈先判斷運算式，后執行回圈體，回圈體有可能一次也不執行
回圈體應包含有使回圈趨向結束的陳述句：
下列情況，退出while回圈
條件運算式不成立
回圈體內遇break
死回圈出現的兩種情況，
1.條件不對
2.沒有向條件運行的程序
while回圈三個重要部分
1.起始值
2.條件
3.向條件外運行的程序
雙重回圈時，內部回圈需要重置
//生成一個串列
var str = "<ul>";
var i = 1;
while(i <= 10){
str += "<li>"+i+"</li>";
i++;
}
str +="</ul>";
document,body.innerHTML= str;
- do while
賦初值；
do{
回圈體；
回圈增量；
}while(回圈條件);
//do...while陳述句是一種先運行，后判斷的回圈陳述句，
//也就是說，不管條件是否滿足，至少先運行一次回圈體
var i = 1;
do{
docunment.write("hello world!</br>");
i++;
}while(i <= 10);
//回圈三要素：
//運算式1，判斷運算式2，運算式3
//回圈變數賦初值，回圈判定條件，回圈增量）
//回圈體：需要重復執行的陳述句，
for(運算式1；判斷運算式2；運算式3）
{
回圈體；
}
陳述句5
- for
for(var i = 0; i<10;i++){
console.log(i)
}- 回圈嵌套
for (var i = 0;i < 10; i++){
for(var j = 0;j< 10; j++){
console.log(i,j,i*j);
}
}break
//break陳述句會立即退出回圈，
//強制繼續執行回圈后面的陳述句，結束本層回圈，
//一般出現在回圈陳述句和switch中
//滿足條件跳出回圈，不會在進入回圈
var i = 0;j = 0;
loveYou:while(i<10){
console.log(i+"+++++++++++");
j= 0;
while(j<10){
if(i*j===30)break loveYou;
console.log(i+"----------------------------------");
j++;
}
i++;
}
continue
//continue陳述句僅用于回圈陳述句，雖然也是立即退出回圈，但是退出回圈后會從回圈的頂部繼續執行，結束本次出現回圈進行下一次
//出現在回圈陳述句中
for(var box = 1;box <= 10; box++){
if(box == 5）break； /如果box是5，就退出當前回圈
documnent.write(box);
docunment.write("</br>");
}
js解釋性語言 ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/197230.html
標籤：其他
下一篇：CSS提高篇（復合選擇器）