第一天--js基礎語法
第一天–js基礎語法
JavaScript的組成
核心(ECMAScript)
文件物件模型（DOM）
瀏覽器物件模型（BOM）
樹：
DOM樹就是html標籤樹
css根據DOM樹結構形成了CSS樹
DOM樹和CSS樹合併形成DOM渲染樹
JavaScript引入及寫法
內部書寫：在HTML檔案中直接進行程式碼書寫，標籤要寫在body中，標籤是按順序執行的。
外部引入：所有的
<script src="./js/a.js"></script>
所有src 指向的檔案中所用到的地址都是指向相對當前頁面的
相對路徑要加./
直接寫在標籤內：
<button onclick="alert(111)">按鈕</button>
href：
<link rel="stylesheet" href="./css/a.css">
所有href 指向檔案中所用到的地址都是指向這個對於連結檔案的，而不是指向當前網頁的
在超連結中 href內可以直接寫入JavaScript語句
<!-- 阻止頁面的重新整理，歷史生成，和地址的變化 -->
<a href="javascript:void(0)">超連結</a>
<a href="javascript:alert(123)">超連結</a>
href="./css/a.css"與src="./js/a.js"的區別：
所有href 指向檔案中所用到的地址都是指向這個對於連結檔案的，而不是指向當前網頁的
所有src 指向的檔案中所用到的地址都是指向相對當前頁面的
註釋：
//註釋單行 ctrl+?
// /* */ 註釋塊和註釋多行 alt+shift+a
// 你好，/* 歡迎 */來到這裡
// 註釋的作用
// 1、可以解釋程式碼內容
// 2、將部分程式碼暫時封存
同步非同步：
script和link載入外部檔案時是一個載入完成後在繼續載入下一個，這種叫做同步
img標籤在載入過程中，是並行同時載入，這叫做非同步
async非同步載入，不需要等待a.js載入完就可以繼續向後同時載入b.js
所有的js被載入後立即執行
defer 當所有內容載入完成後執行當前js內容
<!-- <script src="./js/a.js" async></script> -->
<!-- <script src="./js/b.js" async defer></script> -->
常用方法：
console.log("aaa") //控制檯列印aaa
console.dir("aaa");
alert("aaa") // 彈出對話方塊，只有OK
console.trace("aaa");//顯示在第幾行
console.error("錯誤"); //在控制檯報錯
var a=confirm("是否願意晚上吃一頓便飯?");//確定取消對話方塊,可以得到確定或者取消的結果true，false
prompt("問題文字"，"預設文字");
var a=prompt("你今年多大歲數了?","20歲"); //彈出輸入框，允許使用者輸入，並且返回輸入的結果
console.log(1)
console.log(2)
console.log(3)
console.log(4);debugger//載入停止
console.log(5)
console.log(6)
獲取元素：
docunment.body 獲取body標籤
document.body.innerHTML="你好";//將body中內容換成你好字元
document 文件
document.write("你好");//在文件中寫入你好
write是隻針對document的，innerHTML是針對所有標籤的
根據id在文件中獲取div1的元素
var div1=document.getElementById("div1");
div1.innerHTML="你好";
點選事件
div1.onclick=function(){
div1.innerHTML="不錯，你點中了";
}
給div1 新增行內樣式
div1.style.width="50px";
div1.style.height="50px";
div1.style.backgroundColor="red";
變數：
可變的量 var定義:
在ES5中
如果沒有定義直接賦值，該變數就是這個值
a=3
console.log(a)//結果就是a=3
如果沒有定義和賦值，直接呼叫就會報錯
console.log(a) //結果報錯
如果定義了沒有賦值，直接呼叫的結果是undefined
var a;
console.log(a);//結果是undefined
變數名：
所有變數名稱必須使用字母或者下劃線開頭，後面的內容包含有字元，數字和下劃線。
命名中含有大小寫的方式叫做駝峰式命名，如： namesNum
變數名是表意，不能用中文
_width 臨時變數，引數，類中使用
關鍵詞。保留字,不能使用window屬性命名（JS的根物件就是window）
常量：
常量設定後，不能被重新賦值
要求const定義常量時必須全部字母大寫，單詞使用下劃線區分
const RECT_WIDTH=200;
資料型別：
數值型別：number
var a=1;//整型
var a=1.1;//浮點型
var a=-5;
var a=3e+2;//3*10(2)
var a=3e-2;//3*10(-2);
var a=065;//8進位制寫法，不允許出現大於7的值，ES6取消不能使用
var a=0xFF;//16進位制寫法
字元型：string
被雙引號，單引號，`所引起來的都是字元型
var a="a";
var a="10";
var a='abc';
var a=`abc`;
布林型：boolean（可以用於開關）
var a=true;
var b=false;
undefined型別：
未定義，定義了變數沒有賦值
var a=undefined;
var b;
null型別：
將物件設定為空值
一個變數以指標的形式指向堆中的地址，當不需要再指向時，就必須設定該變數的值為 null
var a=null;//object型別
typeof 判斷型別
物件型：
object
var a={a:1,b:2}
不規定變數的型別，可以任意修改型別的語言叫做弱型別
JS是弱型別，如果沒有給變數定義型別，那麼這個變數可以隨便改變值的型別，所以要考慮變數型別，才能操作
資料型別的轉換：
字元型轉換為數值型：
NaN非數值 ，他是數值型別
var a="FF";//字串只要含有非數字就會轉換為NaN，否則轉換為數值
a=Number(a);//強制轉換
console.log(a);//結果NAN
parsetInt 轉換為整型數值
var a="4.15a";
a=parseInt(a);//轉換為整型數值，從開始向後轉換遇到字元停止（如果開始是數值就可以轉換）
console.log(a);//結果4
var a="11";
a=parseInt(a,16);//將字串按照指定的進位制型別轉換，第二個是進位制型別
console.log(a);//結果17
var a="101011";
a=parseInt(a,2);//可以將 進位制字串轉換為數值
console.log(a);//結果43
parseFloat 浮點數
var a="4.15a";
a=parseFloat(a);//轉換為浮點數
console.log(a);//結果4.15
布林型轉化為數值：
var a=true;//1
var a=false;//0
a=Number(a);//強制轉換為數值
undefined null轉換為數值：
var a=undefined;//NaN
var a=null;//0
a=Number(a);
console.log(a);
object 轉換為數值：
console.log(Number({a:1}));//NAN
轉換字元：
數值轉換為字元：
var a=255;
a=String(a);//強制轉換為字串
console.log(a);//列印出是字串
將數值按照指定進位制型別轉換為字串，進位制2-36
var a=255;
a=a.toString(16);
console.log(a);//ff
toFixed
var a=255;
a=a.toFixed(2);//保留小數點後2位,結果255.00
var a=2.555;
a=a.toFixed(1);//保留小數點後1位,四捨五入,保留1位注意誤差
a=a.toPrecision(2);//保留數值的數量
a=a.toExponential(2);//保留2位小數 科學技術法
a=a.toLocaleString();//本地字串，跟隨計算機設定
產生誤差的原因：因為電腦只識別二進位制，輸入的十進位制先轉換為二進位制錄入，在進行轉字元時再轉為十進位制就會產生誤差
解決方法：儘量不要保留一位小數，保留一位小數時，先*100取整後再除以100
布林值，undefined，null 轉換為字串：
var a=true;
var a=foles;
a=a.toString();//toString是物件的方法，不能轉換null，undefined，
var a=null;
var a=undefined;
a=String(a);
console.log(a);
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(![]==[]);//true
// ![]-->false;
// [1,2,3]--->"1,2,3";
// []--->""
console.log(b);//true
var a="";
if(!a){
// a可以有6種
}//遇到!需要將值轉換為布林值取反
var a=true;
a=Object(a);
console.log(a);//看他是什麼型別，結果是Boolean
運算子：
算數運算子：
數值的+ ， - ，* ， / , %(取模)和數學運算完全相同
小數點運算時會產生誤差
var a=0.1;
var b=0.2;
var s=a+b;
console.log(s);//0.30000000000000004
+運算：
var a="4";
var b=1;
var s=a+b;
console.log(s); //41
var a="4";
var b=true;
var s=a+b;
console.log(s); //4true
var b;//4undefined
var b=null;//4null
var b={a:1};//4[object Object]
var b=[];//4
var b=[1];//41
只要有一個是字元型別，另一個會被轉換為字元型別，並且首尾相連
(隱式轉換)所有的隱式轉換都是使用強制轉換方法
一側是布林值，重要是另一側值，會根據另一側轉換
如果兩測都沒有字元或者數值，就會都轉換為數值運算
var a=true;
var b=1;//2
var b="1";//true1
var b;//NAN
var b=null;//1
var b={a:1};//true1,一旦遇到物件都會隱式轉換為字元相加
var b=[];//true
var s=a+b;
console.log(s);
任何- * / % 全部遵照於數值運算規則，兩測都轉換為數值運算
轉換為數值：
var a="10.35";
a=a-0;//轉換數值
a-=0;//轉換為數值
轉換為字元：
var a=10;
a=a+"";//快速轉換為字元
console.log(a);
賦值運算：
看到一個=號時，就是表示將等號右側的結果賦值給等號左側，並且返回一個值
a+=5;//在原來的基礎上增加5
a*=2;
a/=2;
a%=5;//連續取模是沒有意義的
一元運算子：
a++;//先返回值再增加
++a;//先增加再返回值
// 都會轉換為數值型別運算
// ++a(a++)還是--a(a--) 全部是用數值運算
例子：
var a=5;
var s=++a + a++ + a + a++ + a
var s=a++*++a;
console.log(s,a);//80 10
關係運算子：
< ,> ,<= ,>= ,== (比較運算，會發生隱式轉換) ,=== （精確的比較運算） ,! = ,!==
var a=3;
var b=4;
// 關係運算子返回一個布林值
console.log(a>b);
與布林值比較運算的隱式轉換：
console.log("3"==3);//true
console.log("3"==true);//false
console.log(" "==true);//false
console.log(" "==true);//false 布林值轉換為字串
console.log(2==true); //false 布林值轉換為數值
console.log(undefined==false);//false 不能轉換為undefined，所以不相同
console.log(null==false);//false 不能轉換為null，所以不相同
console.log({a:1}==true);//false 不能轉換為物件，所以不相同
console.log([]==false);//true,陣列比較時，如果比較布林值，優先將陣列轉換為字串，再比較
console.log(![]==false);//true,![] 優先將[]看做物件，所以[]就是true ，取反後變成false
console.log(![]==[]);//true,有感嘆號先轉化為布林值，沒有先轉換為字串再轉換為布林值
與字串比較運算的隱式轉換：
console.log("3"==3);//true
console.log("0"==0);//true
console.log(""==0);//true 空字串是邏輯的 false == 0是邏輯的false
console.log("undefined"==undefined);//false undefined,null不能toString
console.log("null"==null);//false
console.log(""==null);//false
console.log(""==undefined);//false
console.log("[object Object]"=={a:1});//true
console.log({a:1}.toString());//[object Object]
console.log(["a"].toString())//a
console.log("a"==["a"]);//true 陣列轉換為字串
// 當字元型別和引用型別比較時，優先將引用型別執行toString()轉換為字元型別
注：
0 是邏輯的 false
1 是邏輯的 true
空字串是邏輯的 false
null 是邏輯的 false
NaN 是邏輯的 false（NaN是個特殊的存在,NaN==任何 都是false）
console.log(0=="");//true
console.log(""==false);//true
console.log(0==false);//true
console.log(undefined==null);//true
console.log(NaN==NaN);//false
console.log(isNaN(Number("a")));//true
能使下列函式能執行的a：
//a "",undefined,0,null,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對應的值
var a="" && 10;
console.log(a);//""
||:一個為真就是真
true || true =true; 第一個遇到true的對於值
true || false =true; 返回true對應的值
false || true =true; 返回true對應的值
false || false =false 返回最後一個false對應的值
var a= 20 || 10;
console.log(a);//20
! 遇到！ 優先將後面的內容先轉換布林值再取反
案例：按鈕切換背景顏色
var bn0=document.getElementById("bn0");
var bn1=document.getElementById("bn1");
bn0.onclick=function(){
bn1.checked=!bn0.checked;
}
// document.documentElement HTML標籤
var bool=false;
var bn0=document.getElementById("bn0");
bn0.onclick=function(){
bool=!bool;
if(bool){
document.documentElement.style.backgroundColor="#000000";
}else{
document.documentElement.style.backgroundColor="#FFFFFF";
}
}
二進位制：
1010011=12(6)+12(4)+1*2(1)+1=83
位運算：
位非運算子：~
var a=5;
a=~a;
console.log(a);
//數值加一取負
& 與運算：
console.log(56&35);//32
步驟：
1.先把56和35 換成二進位制
111000----56
100011----35
2.對照每一位
1&1=1
1&0=0
0&1=0
0&0=0
3. 111000----56
100011----35
100000----32
|位或運算：
console.log(35|34);
// 100011
// 100010
// 100011=35
1|1=1
1|0=1
0|1=1
0|0=0
^位異或運算：
console.log(35^26);
// 100011
// 011010
// 111001=57
// 1^1=0
// 0^0=0
// 1^0=1
// 0^1=1
<< >>:
// console.log(24<<2);
// 1100000//左移後補兩個0
// console.log(96>>2);//刪除最後的2位
// console.log(1<<30);//2的n次冪,最大為30次
案例：
var color=0x0000FF;
var div1=document.getElementById("div1");
div1.style.backgroundColor="#"+color.toString(16).padStart(6,"0");//一共幾位，其餘補零
document.onclick=function(){
color=color<<1;
div1.style.backgroundColor="#"+color.toString(16).padStart(6,"0");
}
三目運算子：
var a=3;
// 如果a大於5時，返回2，否則返回1
// 前面的條件判斷，如果返回ture，就將第一個結果返回前面，否則將第二個結果返回前面
// var b=a>5 ? 2 : 1;
// 要注意的問題
// 當三元運算子遇到返回布林值時，直接返回條件即可
var a=3;
var b=a>5 ? 0 : a<2 ? 1 : -1;
console.log(b);
//解釋
if(a>5){
b=0;
}else if(a<2){
b=1;
}else{
b=-1;
}
如果條件是判斷為true或者false
var a=3;
var b=a>5 ? false : true;//如果條件是判斷為true或者false
var b=a<=5;//可以簡寫成
console.log(b)//true
var a=1;
var b=a-- ? a++ : ++a;
console.log(a,b);//1 0
三目優先順序高於賦值運算 += -=…
var a=1;
var b=a-=0 ? a+=1 : a+=2;//相當於 var b=a-= （0 ? a+=1 : a+=2）;先判斷
console.log(b);//-2
運算優先順序：
條件語句：
if語句：
三目運算子不能判斷一次，解決多個問題，但是 if 語句可以
if（條件）{
滿足條件後執行的內容；
}else{
不滿足條件時執行的內容
}
表示式如果不是布林值就會隱式轉換為布林值
如果條件後執行的語句塊僅有一句，可以省略{}
if(a>5){
b=6;
}
if(a>5) b=6;
if(a>5){
b=10;
}else{
b=0;
}
if(a>5) b=10;
else b=0;
多分支語句：
if(a>5){
}else if(a<2){
}else if(a==3){
}else{
}
switch語句：
表示式不一定返回布林值，所以不會做隱式轉換
表示式與值1，值2，值3是否相等，這個相等是===的絕對相等，包括型別相同
break 跳出該條件語句
defalut 預設情況，如果以上值都不相同，則執行預設內容語句塊
注意：
case 值: 這裡是:指要執行的語句塊內容，並沒有｛｝，：代表開始
結束是需要break，如果沒有break就會向下繼續執行，直到遇到break或者全部執行完畢
如果沒有break，完成下一個內容穿越時，不需要判斷是否與該值相同，這種情況叫穿越
switch中表示式可以是任何內容，重要的是表示式返回的值
switch是一個判斷是否絕對相等的條件，因此不能做其他型別的判斷
default一般寫在switch最後，並且一般不加break
switch可以在內容與if等語句混合使用
switch一般用於狀態機
switch(表示式){
case 10:
break;
case 20:
break;
case 30:
break;
default:
// break;
}
var a=3;
var b;
switch(a){
case 3:
case 4:
case 5:
b=1;
break;
case 6:
case 7:
b=2;
break;
}
// 直穿 等同於邏輯或
if(a===3 || a===4 || a===5){
}else if(a===6 || a===7){
}
穿越過程中會經歷程式碼
減少重複程式碼的目的,要注意程式碼經過是必須執行的，所以要多考慮執行的順序和必要性
switch中的表示式如果描述true，就可以完成多元條件的判斷
但是因為switch就是一個絕對相等，所以不支援隱式轉換，判斷是後面的內容需要主動轉換為布林型別
var a=98;
switch(true){
case a>=90 && a<=100:
break;
case a>=80:
break;
case a>=70:
break;
case a>=60:
break;
default :
}
各種條件語句的順序問題
兩個條件有可能都進入
if (a > 3) {
}
if (a > 4) {
}
僅進入第一個或者第二個
// 僅進入第一個或者第二個
var a=10;
if (a > 3) {
// console.log("aaa");
} else if (a > 4) {
// console.log("bbb");
}
進入順序是表示式先後順序
var a = 4;
switch (true) {
case a > 4:
console.log("aaa");
case a > 3:
console.log("bbb");
break;
}
相關文章
- Vuejs 基礎與語法VueJS
- JSP/Servlet基礎語法JSServlet
- js最基礎語法有哪些？JS
- Java學習--jsp基礎語法JavaJS
- Java基礎-語法基礎Java
- 基礎語法
- 英語語法基礎
- scala基礎語法-----Spark基礎Spark
- Dart語法基礎Dart
- Vue基礎語法Vue
- Java 基礎語法Java
- CSS 基礎語法CSS
- jQuery基礎語法jQuery
- Scala基礎語法
- redis 基礎語法Redis
- mysql基礎語法MySql
- jQuery 基礎語法jQuery
- Go 基礎語法Go
- Markdown 基礎語法
- JavaScript 基礎語法JavaScript
- JAVA語法基礎Java
- markdow基礎語法
- Markdown基礎語法
- CSS基礎語法CSS
- JavaScript 基礎卷（一）：基礎語法JavaScript
- Python基礎：語法基礎（3）Python
- 【Java基礎】--深入剖析基礎語法Java
- Dart語法篇之基礎語法(一)Dart
- Golang 基礎之基礎語法梳理 (三)Golang
- Drools之基礎語法
- kotlin基礎語法Kotlin
- C++基礎語法C++
- JAVA基礎語法（一）Java
- Dart的基礎語法Dart
- Python 基礎語法Python
- Java基礎語法1Java
- Scala 的基礎語法
- JavaSE的基礎語法Java