一、簡單了解和基礎知識
1.js引入方式
第一種：直接在body標簽下面引入js文件或者直接在下面寫js代碼；
第二種：直接在body標簽里面引入js文件或者直接在里面寫js代碼；
第三種：直接在head標簽里面引入js文件或者直接在里面寫js代碼；但是因為代碼的執行順序是從上到下的，避免js代碼最先被執行，所以要在script標簽里面加上window.onload=function(){},在這個里面寫入代碼。
2.js注釋
單行注釋的雙斜杠//
多行注釋/****/
注釋的作用：節約交流和閱讀成本
3.用于代碼調試
console.log()和alert()都可以用于調試代碼，但是alert會阻斷線程的執行，所以不經常使用。
document.write()如果文檔輸出寫在當前頁面加載完畢之后，那么當前頁面會被關閉，會新開一個頁面輸出信息。
4.js變量的命名規范
什么是變量？什么是常量（直接量）？
程序運行期間可以發生改變的量就是變量。
自始至終在程序的運行過程中不能改變的量就是常量。常量放在常量區，常量區的值有且只有一份，所以不能改變。
變量的命名規范：
①以數字、字母、下劃線、$符組成，并且數字不能開頭。
②不能以關鍵字或者保留字命名。
③見名知義，駝峰命名法。
④區分大小寫。
⑤區別于c語言，變量名可以重復命名，但是后面的會覆蓋前面的。
聲明一個變量為空，有空間沒有值 ? ?var ?num=null;
聲明一個未定義的變量，沒有值沒有空間 ? ?var num1；
5.js數據類型
number ? string ? object ?undefined ?boolean
類型轉換有兩種：顯式類型轉換（強類型轉換） ? ? ? ?隱式類型轉換（弱類型轉換）
顯式類型轉換（強類型轉換）的例子：
String()可以將一個數值轉換為字符串
var ? a=123;
console.log(String(a),typeof ?String(a));//123,string
Number()可以將字符串轉換為數值類型，要么字符串全是數字，要么字符串數字加一個小數點，小數點只能有一個，如果有多個，轉換后的結果是NaN，但是還是number類型。如果字符串里面包含了字母，并不是全數字，那么轉換后的就不是數字，而是NaN，但是還是number類型。
var ? str="123";
console.log(Number(str),typeofNumber(str));//123,number
var ?str1="123abc";//有字母轉換不了
console.log(Number(str1),typeofNumber(str1));//NaN,number
parseInt將字符串轉換成整型數字。必須滿足第一個字符為數字，將從第一個字符取到第一個不是數字的字符為止。
var ?str3="12.3abc";
console.log(parseInt(str3));
與parseInt對應的是parseFloat取得浮點型
隱式類型轉換（弱類型轉換）的例子：
運算符重載：+號會根據式子兩邊式子的類型采取行為，如果兩邊是數值，相加，如果兩邊是字符串，拼接，如果一邊是數值一邊是字符串也是拼接。
取正操作：將數字字符串，轉換成數值，必須保證全部為數字字符，否則將不起作用
var ?num2="12";
console.log(typeof ?+num2);
純數字的字符串減0，也可以得到數字
var ? a="12";
console.log(typeof ?a-0);
隱式類型轉換，先轉換再運算：
var ? a="12";
var ? b="10";
alert(a-b); ?//7
var ? a=5,b="5";
alert(a==b);//true
alert(a===b);//false ? ? ? === 就是不轉換類型，直接比較
6.js運算符
js是弱類型語言，只有數值類型，沒有分浮點型和整型之分。
算術運算符 +，—，*，/,%,++,--
復合運算符 +=，-=，/=,*=,%=
關系運算符 ?> ? ?< ? ?<= ? ? >= ? ? === ? ?== ? ?!= ? ? ?!== ? ? ? ? ?!=和==對立，!==和===對立
邏輯運算符? ? 邏輯與&&? ? ? 邏輯或 || ? ? ? ? ? 邏輯非 !取反
三目運算符，也叫條件運算符：var a=表達式1？表達式2：表達式3；
如果表達式1結果為真，a結果為表達式2的值，如果表達式1結果為假，a結果為表達式3的值。相當于if else語句
邏輯與 && 鏈接的表達式。如果前面的表達式為真，整體的值，與最后一個表達式有密切的關系。如果最后一個表達式有算術表達式鏈接，就是一個具體的數值。如果最后一個表達式由關系運算符鏈接，就是true或者false。如果最后一個表達式是0，就是0。一假則假,前面為假，后面就不走了。
邏輯或 ? ? ? ? 同假為假 ? ? ? ? ?一真即真
只要是用關系運算符鏈接的表達式，返回的值類型都是boolean值
==只需要滿足值相等就為真，不判斷類型，還有一種理解就是，== 先轉換類型，然后比較
var ? ? ? ?istrue=(3=="3");//true
var ? ? ? ? ?istrue=(3!="3");//false?
===數值和類型都相等才為真，不僅數值要相等，類型也要相同，=== 不轉換類型，直接比較
var ? ? ? ? istrue=(3==="3");//false
var ? ? ? ? istrue=(3!=="3");//true
num++, ?num+=1, ? num=num+1
++在前先++再賦值，++在后先賦值再++
先賦值再運算（i++就是i=i+1）
var ? ?b1=11;
b2=b1++;//先把b1的值賦給b2，b1在加1
console.log("b2的值是"+b2,"b1的值是"+b1)//11 ? ?12
var ? c1=11;
c2=++c1;//c1先加1，再賦值給c2+
console.log("c2的值是"+c2,"c1的值是"+c1)//12 ? 12
賦值運算符“=”,將等號右邊的值 賦值 給左邊
多個打印內容區分時，以逗號隔開
可以單獨打印變量或者常量的值，逗號隔開
可以打印格式化字符串，中間使用占位符%d %f %s ,帶占位符的打印，帶占位符的要放在第一個
7.js元素獲取
1.通過ID名稱獲取，因為ID名不能重復，所以獲取的元素唯一
var ? ?div=document.getElementById("myDiv");
2.通過標簽名稱獲取元素，得到的是一個數組（就算只有一個值，也是一個數組）。如果想要將數組中的其中某一個取出來，必須需要用到數組下標。數組下標從0 開始，最大是數組長度減一。
var ? ?first=document.getElementsByTagName("div")[0];
3.通過行間屬性name獲取元素，得到的也是一個數組
var ? ?secondbtn=document.getElementsByName("btn")[1];
4.通過標簽的類名獲取元素。獲取到得也是一個數組
var ? ?p=document.getElementsByClassName("text")[1];
5.通過元素的css選擇器獲取元素，選擇器的名稱一定要寫全，并且css選擇器名稱都可以寫在里面，如果獲取到多個元素，只會選取第一個。
var ? ?myDiv=document.querySelector("#myDiv");
6.通過元素的css選擇器名稱獲取元素,但是獲取的是一個數組，使用的時候需要加下標
var ? ?myDiv3=document.querySelectorAll(".test")[0];
8.通過js給元素加類名
給元素加類名后，類名相當于重新賦值，所以會覆蓋原來的類名，要想原來的類名也起作用，就要把原來的類名也寫上。多個類名中間用空格隔開
myDiv.className="test text";
使用animate.css，就是采用添加類名的方法
在head里面引入文件
<link ? rel="stylesheet" ? ?type="text/css" ? ? ?href="css/animate.css"/>
在script里面加類名
var ? div=document.getElementsByTagName("div")[0];
div.onmouseover=function(){
this.className="animated shake"
//this.style.animation="shake 2s";
}
div.onmouseout=function(){
//this.style.animation="bounce 2s";
this.className="animated bounce";
}
9.事件綁定
1.點擊事件
div.onclick=function(){
alert("hahaha!");
}
2.鼠標移入事件
div.onmouseover=function(){
//this永遠指向所在函數的所有者，如果沒有所有者時指向window
this.style.width="800px";
}
3.鼠標移除事件
div.onmouseout=function(){
this.style.height="400px";
}
4.window.onload事件，load事件: 當頁面完全加載后再window上面觸發.一般用于head中的script代碼段.保證在執行js代碼之前, 頁面已經完全加載完畢.如果沒有在頁面加載完畢，將獲取不到元素。
UI事件指的是那些不一定與用戶操作有關的事件.
二、js分支結構
1.布爾類型
布爾類型，代表非真即假的一種數據類型。它的值只有兩個，true真或false假。非0即為真。0是假的，字符串“0”是真的?？諡榧?，null是假
布爾類型的命名規則：
習慣以is，has，can開頭? 例如：isTrue isBoy isHight isLoading hasMoney hasBoyFriend canFly ? ?canEat
2.js分支語句
分支語句其實有兩種，if語句，switch語句
if語句有三種形式：
第一種：if(條件表達式){語句}，當條件表達式為真時執行語句，否則什么都不執行
第二種：if(條件表達式){語句一}else{語句二}，當條件表達式為真時執行語句一，否則為假執行語句二
第三種：if語句集聯式，if(條件表達式1){語句一}else if(條件表達式2){語句二}else{語句三}。當條件表達式1為真執行語句一，當條件表達式1為假，并且條件表達式2為真，執行語句二，否則執行語句三
如果是比較字符串之間的大小，就先從第一位開始比較，第一位最大的就是最大的
所以如果獲取的值是字符串，要轉換成數字
使用switch通常用來解決多分支，并且多分支的情況是值是確定的。case 里面的值是具體的。
var ? ? ?num=10;
switch(num){
case ? ?10:
alert(num);
//break;
case ? ?0://如果第一個滿足條件，沒有break，就會接著執行第二個，
//并且不需要進行判斷，只到找到break再終止
alert("哈哈哈");
break;
default:
alert("呵呵呵");
break;
}
var ? n=8;
switch(n){
case8:
case9:
case10:
case11:
alert(num);
break;
default:
alert("呵呵呵");
break;
}
三、js循環結構
什么是循環？當滿足特定時，反復執行同一段代碼就是循環。
for循環 ? while循環 ? ?do..while循環
循環必不可少的四部分：
1.循環變量初始化；2.循環條件；3.循環增量；4.循環執行的語句
1.while循環
while（條件表達式）{循環語句}? ? 當條件滿足表達式的時候，反復執行語句，直到條件表達式為假跳出循環
var ?a=1;
while(a<101){
if((7!=a%10)&&(0!=a%7)&&(7!=parseInt(a/10))) {
console.log(a);
}
a++;
}
2.do..while..循環
do{循環語句}while（條件表達式）
先執行語句，再判斷是否滿足循環條件，如果滿足繼續循環，否則跳出循環
var ?num=1;
do{
if(num%7==0) {
console.log(num);
}
num++;
}while(num<101);
while循環與do..while..循環的區別在于，while循環先判斷再執行，可能出現一次都不執行的情況，do..while..循環先執行再判斷，至少會執行一次
3.for循環
for (循環變量初始化；循環條件；循環增量) {循環語句}
通過判斷循環條件是否成立，決定是否執行循環語句。
for循環的執行次數為：不滿足條件的第一個值減去滿足條件的第一個值除以循環增量
for(var ? i=1;i<101;i++) {
if(i%7==0) {
console.log(i);
}
}
for循環與數組的聯合使用非常方便。
數組有容量，數組還有下標，這兩個一個作為循環條件，一個作為循環變量
for循環用于知道循環次數的情況
while循環用于只知道循環條件的情況，未知循環次數的情況
do...while循環不常用
4.js循環控制
continue跳出本次循環，循環繼續
break結束本層循環，循環終止
var ? sum=0;
for(var ? i=1; i<101; i++) {
if(i%2==0) {
continue;
}
sum+=i;
}
console.log(sum);
for(var ? ?i=1; i<101; i++) {
console.log(i);
if(i%13==0) {
break;
}
}
