JS

弱型別語言，指令碼語言，解釋性語言，基於物件和事件驅動

性質

簡單性，安全性，動態性，跨平臺性

組成

ECMAScript.
DOM,
BOM

標籤

type
src
async

引入外部js

彈框

alert(“”)

寫入

document.write(“”)

單行註釋

//

宣告變數（見名知意）

var name=" ";

<script type="text/javascript">
    //宣告變數(見名知意)
    var name="";
    //給變數賦值  =  將等號右邊的值賦給左邊
    name="張三";
    //在彈框中如果寫的是變數名，那麼會將變數的值輸出
    alert(name);
    alert("我的名字："+name);
    document.write(name);
    //宣告變數的同時直接賦值
    var age= 20;
    alert("今年我長了一歲，我的年齡："+(age+1))
</script>
 

資料型別

var s1="星期一";
//typeof()
alert(s1);
alert(typeof (s1));//字串型別 string
alert(typeof (1000.01));//數字型別 number
alert(typeof (true));//Boolean true false
alert(typeof (s));//undefined 未定義
 

轉義字元

運算子

一元運算子 ++

a+=b:a=a+b
a/=b: a=a/b

//++:++在前：先增1，在運算；++在後，先運算，再自增1；
var a=10;//a=10
var b=++a;//b=10 a=11
var v=b++;//b=11 c=11

var x=5;
var y=(x++)+10; //x=6 y=15
var z=++y*x++; //y=16 z=96 x=7
alert(z);
alert(y);
alert(x);
 

比較運算子

邏輯運算子

 && 	and	（與）
||	or	（或）
！	 not 	（非）

三元運算子

由?:符號表示的，具體的含義其實就和if-else結構的含義差不多，這種運算子會將某個條件作兩種處理，如果滿足條件的話就執行第一個結果，如果不滿足的話就執行另外一個結果

Int A,B,C; 
A=2; 
B=3; 
C=A>B ? 100 :200; 
這條語句的意思是，如果A>B的話，就將100賦給C，否則就將200賦給C；

<< >>

2進位制位數移動幾位

迴圈

結構

順序
分支
迴圈

條件語句

if

/*
* if(條件表示式){//true/false(比較運算子|邏輯運算子)
*               當條件為true時，所執行的內容
*               }
* */
var age=20;
if (age>18){
    document.write("en ");
}
/*
* if (條件表示式){
*       true
*
* }else{
*       false
*
*       }
* */

if - else if

If -else if
/*
* if(){
*
*  }else if(){
*
*  }else if(){
*
*  }else if(){
*
*  }
* */

switch

/*
        switch (變數){
            case 值1:
                程式碼塊;
                break
            case 值2:
                程式碼塊;
                break
            default :
                程式碼塊；
                break
        }
*/

var sc=window.prompt(); //接受使用者輸入的內容
var s=isNaN(sc); //判斷是不是數字，不是返回的是true

迴圈語句

while

*
 * 1.起始條件
 * 2.終止條件
 * 3.迴圈步數
 * while(結束條件){
 *       迴圈體
 *       迴圈步數
 *       }
 * */

for

/*
* for迴圈確定次數
*   for(var 初始值;結束條件;迭代語句){
*   }
*   多層for迴圈
*   外層for迴圈執行一次，內層for迴圈執行全部
*   break
* */

js操作

1.可以通過document.getElementById(“id值”)——————獲取指定html元素；

document.getElementById("div1");

<div id="div1"></div>

2.Js事件：onclick（滑鼠單擊事件）、onmousemove（滑鼠移入事件）、onmouseout（滑鼠移出事件）；

<div onclick="a()" onmouseout="b()" onmousemove="c()"></div>

3.自定義函式：function 函式名（）{執行的內容}；

<script type="text/javascript">
        function a(){
            
        }
    </script>

4.Js操作HTML：innerHTML=””，新增文字

<script type="text/javascript">
	var div1=document.getElementById("div1");
        div1.innerHTML="hello";
    </script>

<div id="div1"></div>

5.Js操作css.style.屬性名=”屬性值”

<script type="text/javascript">
	var div1=document.getElementById("div1");
        div1.style.height="100px";
    </script>

<div id="div1"></div>

隨滾動條滾動

var leftT;
var leftL;
var rightT;//右側div距離頂部多少
var rightL;//右側div距離左邊多少
var objleft;//左側div文件物件
var objright;//右側div文件物件
//獲取文件載入時距離頂部跟左邊的屬性
function place(){
    objleft=document.getElementById("left");
    objright=document.getElementById("right");
    //左側div距離頂部多少 
     leftT=document.defaultView.getComputedStyle(objleft,null).top;
    //左側div距離左邊多少   
    leftL=document.defaultView.getComputedStyle(objleft,null).left;   
    rightL=document.defaultView.getComputedStyle(objright,null).left;   
    rightT=document.defaultView.getComputedStyle(objright,null).top;
}
//獲取滾動條滾動的畫素數
function move(){
    var scrollT=document.documentElement.scrollTop;
    var scrollL=document.documentElement.scrollLeft;
    //設定左側div距離頂部的畫素
    objleft.style.top=parseInt(leftT)+scrollT+"px";
    objleft.style.left=parseInt(leftL)+scrollL+"px";
    objright.style.top=parseInt(rightT)+scrollT+"px";
    objright.style.left=parseInt(rightL)+scrollL+"px";
}
window.onload=place;

獲取滾動條滾動的畫素數

var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;

延時載入

<script type="text/javascript">
    var now=1;//設定第一張圖片
    var max=3;//設定最大的圖片
    var i=1;//現在的圖片
    function show(){
        for(i=1;i<=max;i++){
            if(now==i){
	document.getElementById("adv"+i).style.display="block";
            }else{
      	document.getElementById("adv"+i).style.display="none";
            }
        }
        if(now==max){
            now=1;
        }else{
            now++;
        }
    }
    //重複載入
    window.setInterval(show,1000);
    //延時載入
    //window.setTimeout(xiaochu,1000);
</script>

重複載入

window.setInterval(show,1000); 1秒執行一次show()函式

延時載入

window.setTimeout(xiaochu,1000);1秒後執行xiaochu()函式