JavaSpcript基礎

函數

代碼的複用：寫一遍屢次使用》把特定的功能語句打包放在一塊兒

語法：function 名字（0，1，1多個參數）{

                      執行的語句 }

返回值return，把語句返回給函數

例子：

function add（x，y）{
var z=x+y；
return z；
}

var rs=add（1，2）；
console.log（「1+2=」+rs）；

動態參數

function add（）{
      var z=0；
      for（var i=0；i<arguments.length；i++）{
      z + = arguments[i]；}

      return z
}
var rs=add (1,2,4,5,23);
console.log("1+2 4,5,23= "rs);

rs=add(3,4);
console.log("3+4= "+rs);

 

做用域：可訪問變量的集合（對象、函數）

咱們定義了一個變量，這個變量能夠被使用的地府，可使用的範圍

var a=10；

全局做用域>全局變量>在函數外定義的變量>在全部地方都能被訪問

局部做用域>局部變量>在函數裏面的變量>函數裏面被訪問到

function add(){
y=100;//不設置var y=100的局部變量只設定y=100的時候 系統自動默認全 
                                                                                          局變量
console.log("add():y="+y);
}

add();
console.log("全局y="+y)；

 

預解析：瀏覽器在得到JS文件的時候，不是馬上去執行代碼，全篇快速掃描一遍

               把變量預先解析

               變量  把變量的聲明提早  例如

console.log("x= "+x);
var x=10;
add();//函數也是變量
function add(){
console.log("add()");}
順序不一樣也能夠正常顯示

可是若是在函數內部的全局變量加載順序在console.log後面 會報錯。因此注意順序

 

閉包：變量的 私有化問題

<script type="text/javascript">//簡化寫法 函數聲明和當即執行放在一塊兒。

        var plus=(function() {
            var counter = 0;

            return function () {
                counter++;
                console.log("counter=" + counter);
            }

        })( );
        plus();
        plus();
        plus();
        console.log(counter);

 

對象

變量var

函數function：一對語句的集合

對象：一對變量+一堆函數的集合

var  boj1={X：0，y:1，z：function（）{console.log（「」「」）；}}}

屬性：  名字：   值。

名字：string：    隱式轉化爲string

x123-> 能夠不加引號 

若是包含了特殊字符->必須加引號 例如「first name」：「cc」

若是函數構造大致相同還能夠建立類

例如var person2=new person（）；

 

對象：屬性的基本操做： 增長  刪除  修改屬性值  查詢獲取屬性的值  遍歷；

查詢獲取屬性的   點. []   例子

var name = person1.name；->「xiaoming」只能用沒有雙引號的名稱 

name=person["name"];

name="xiaoming"

修改

person1["name"]="xiaoming2";

person1.name="xiaoming2";

增長：修改屬性的時候，若是對象裏面沒有這條屬性，自動加上

person1.height=170;

刪除

delete person1.name

遍歷：

for(var 屬性名 in person1){

console.log("名"+pN);}

 

 

引用、自定義類

//定義了對象

//var person1 = {

      name:"xiaoming",

      sex:"male",

      age:"19",

      slogen:function(){

      console.log("w s x m");}}

//xiaohong 對象 人
//用類的形式建立對象
//人的類：class
//      var person2=new PersonClass（）；
//ES5 是 function -》ES6更新成class   F須要加（） C不須要加（）
//爲了區分函數和類 類
function PersonClass(pName,pSex,pAge){
this.name="pName";
this.sex="pSex";
this.age="pAge"
this.slogan=function(){
console.log("w s"+this.name);}
}
//構造函數方式
var person1=new PersonClass("xiaoming","male","18");
var person2=new PersonClass("xiaohong","femle","15");

 

命名空間：多我的命名本身的建立的變量

var cc={};    cc.Age=100; cc能夠是dd能夠是ee，本身建立的

 

系統提供不少類->用的方法

//對象  類   自定義類

//對象和類

//對象var obj1={}    //var obj2=new Object();//空的對象 這兩個建立的是一樣的空對象

對象：值+方法

Object->打包  最底層  類

值     萬物都是對象+值+方法：類型轉換

數字123 ->對象   類型   Number

字符串「abc」      String

布爾值true   false  Boolean

轉換例子：  var n1=123；var str1=n1.toString（）；更多的本身查屬性詞典

 

//時間相關；Date（）

//計算代碼的性能：耗時

var time1=new Date（）；//獲取了當前的時間 本地電腦的時間

for（var i=0；<1000000；i++）{

        t++；}

 var time2=new Date（）；

var n=time2.getTime（）-time1.getTime();

 

*****Math  -》 數學相關 Math 對象並不像 Date 和 String 那樣是對象的類，所以沒有構造函數 Math()，像 Math.sin() 這樣的函數只是函數，不是某個對象的方法。您無需建立它，經過把 Math 做爲對象使用就能夠調用其全部屬性和方法。

隨機數

Math.random()

 

DOM彈窗（瀏覽器的彈窗）

同步：阻斷

alert（）彈窗直接彈出

confirm（）boolean類型彈窗，肯定爲ture 取消爲false 例子以下

//var bcf=confirm（「confirm彈窗」）；

//console.log("點擊："+baf)

//if（bcf）{提交}else

prompt（）

//var strpt=prompt（「prompt 輸入：」，「默認是CC」）；

console.log（「填了：」+strpt）；

 

瀏覽器的導航欄的信息

//window.location 對象

//屬性：url的各個部分

//location.href;

//location.toString()

//刷新頁面，打開新的頁面 例子：

//var bcf=confirm("confirm彈窗")；

//if（bcf）{location.replace（「http：//www.baidu.com/」）}

//else location.reload();

 

瀏覽器的歷史記錄：前進 後退

history

瀏覽器的信息：版本 廠家

navigator

 

//計時器

循環執行：var sil=setInterval（函數名，時間）；意識是每隔多少時間執行一次函數

        停掉：clearInterval（sil）；

一次執行：var sil=setTimeout（函數名，時間）；

                  clearTimeout（sil）；

例子  var   num=0；

function add（）{

console.log("num="+ ++num);}

var sil = setInterval(add,1000);

function end(){

console.log("setTimeout  clearInterval");

clearInterval(sil);}

setTimeout(end,10000);

 

Dom  - > 文檔對象模型

Dom樹：

                 html文件 -》 人 - 》網頁的數據

                 瀏覽器 -》 數據結構 - 》方便 查找 修改 遍歷

                 樣子 - 》 樹

                 DOM樹

數據結構：

線性：單鏈表  循環列表  隊列  棧  數組

樹形： 二叉樹  平衡樹  紅黑樹

網狀：有向圖 無向圖   - 》尋路算法  A*算法

DOM樹

document 節點：只有一個

標籤節點 元素節點：

文本節點：

 

標籤節點 元素節點： 樣子 樣式 

找到這些節點

3中最經常使用的方法：

1經過ID來查找

2經過標籤名來查找

3經過class來查找

 

//  ID-》惟一性：

         var  p1  = document.getElementById("p1");

// JS時間線

           var  ps     =      document.getElementsByTagName("p1");//返回數組

           var  p1     =      ps[ 0 ];節點

 

var ps = documentgetElementsByClassName("txt");//返回數組

ps【0】節點

 

******三個方法的區別：

1 ID -》節點

            Tag（標籤）Class  -》數組

1.1   id-》document.getElementById只能用document來獲取

            Tag   Class-》在標籤任意節點上使用 

 

建立節點，添加到DOM樹  刪除節點

 var div1   =      document.getElementsByTagName("div1");

//建立一個標籤

 var p1   =      document.createElement("p");建立標籤類節點

//建立一個文本節點

var ptxt = document.creatTextNode("p1");建立文本類節點

p.appendChild(p1txt)；須要添加的節點

//添加節點

div1.appenChild（p）；父節點

//刪除節點

removeChild（）； 

例子刪除div2

var div2 = document.getElementById("div2");

div1.removeChild(div2); 

一樣也能夠用父節點元素進行刪除操做

div2.parentNode.removeChild（div2）；

 

對節點的屬性 內容

html定義好的屬性    用點   .    對象的點  獲取  修改

var img1 = document.getElementById("img1");

img1.id 經過獲取img1  能夠進行加. 進行修改

 

//class   由於在JS中是關鍵詞    類  因此要用className地臺

//img1.className=

 

//CSS樣式的修改 在style後面能夠加·在加屬性進行修改

例如：img1.style.width=「100px」

 

//獲取屬性  修改本身建立的例如ID屬性

img1.getAttribute("dat");

getAttribute()

ing1.setAttribute("dat(屬性的名字)","1（屬性的值）") 

 

經常使用的操做屬性：

getAttribute("")    setAttribute("")    removeAttribute("")

 

更改節點中文字或者其餘 例如<p id="p1">  p1  </p>中的p1文字   裏面能夠添加任何東西 也能夠加超文本連接等等

var p1 = document.getElementById("p1");

p1.inner（ID=P1標籤內的全部內容）HTML（表明格式） = "這是innerHTML"；

若是想單純添加文字內容用   textContent

 

什麼是事件：

JS-》交互  人能夠去操做界面

js -》 事件驅動的方式

用戶-》操做html元素-》產生一個事件-》事件 主動的調用 設定 方法 函數

事件源：產生事件的地方

事件的類型：點擊 鍵盤

事件對象：記錄好 信息

事件的處理程序：函數

兩種方式：

1 html的屬性：

屬性名：on+時間的名字 onclick

屬性值：方法

            直接在html設定

            經過js的元素對象來設定

點擊事件例子：

var num =0;

function add(){

console.log("點擊："+  ++num)；}

var div1 = docume.getelemengtById（「div1」）；

div1.onclick=add；

也能夠刪除 div1.onclick=null;

2 經過調用 系統提供的方法

div1.addEventlistener(事件類型click，函數add，事件的處理方式能夠不屑類型是布爾類型)

 

//事件函數：發生的時候-》操做 function

var div1 = document.getElementById("div1");

div1.addEventlistener("click",add);

事件對象 event:提供了事件的詳細信息;

具體發生事件的元素,鼠標的位置,點擊的狀態,鍵盤的按鍵

function add(event){

          console.log("事件函數");}

// var e = event || window.event; // IE8採用的方法

          console.log（event）；

//想要取消默認打開的超連接頁面

event.preventDefault(); 用對象方法時用這個

//return false；用on來綁定事件函數的時候 用這個

}

var a1=document.getElementById("a1");

a1.addEventListener(「click」，add)；

//用綁定方法也能夠替代上兩行代碼。取消默認方法時return false；

a1.onclick=add;

上述js代碼相對應的Html代碼是
<body>
<div id = "div1">div1</div>
      <input type="text" name="a" id="input1">
      <script src="19.js"></script>
      <a herf="http:www.baidu.com" target="_blank" id="a1">
              百度</a>
</body>

 

事件的傳播：

多個標籤，相互嵌套的，點擊頁面的時候，點擊事件

是否是被點中的標籤纔會發生點擊時間（在html文件中 div2的父元素是div1）

var div1 = document getElementById("div1");

var div1 = document getElementById("div2");

 

div1.addEventListener("click",div1click)；

div1.addEventListener("click",div2click)；

 

function div1Click（）{console.log（「div1  click」）}；

function div1Click（）{console.log（「div2  click」）}；

事件的傳播：

在默認的狀況下，點擊頁面的一個標籤，處在傳播路徑上的標籤都會監聽到對應的事件

傳播路徑：就是dom樹的分層結構圖。結構下的均可以獲取到

 

事件流：對應標籤接受到事件的順序

               兩大階段：

                                捕獲階段：從起始點》目標階段

                                冒泡階段：目標位置》起始位置

例如head1.addEventListener（「click」，head1Click，事件的傳播，false or true）

false》head1Click  對應的函數會在冒泡階段執行

ture》 head1Click  對應的函數會在捕獲階段執行

H5文件
<head><style>
#div1{ width：200px；height：200px；background：green；}
#div2{margin-left：200px； width：100px；height：100px；background：red；}</style></head>
<body>
<div id="div1">div1<div id="div2">div2</div></div>
<script src="20.js"></script>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</body>

JS文件
var div1 = document getElementById("div1");

var div1 = document getElementById("div2");


//捕獲階段
div1.addEventListener("click",div1clicktrue，true)；

div1.addEventListener("click",div2clicktrue，true)；



function div1Clicktrue（）{console.log（「捕獲階段 div1  click」）}；

function div1Clicktrue（）{console.log（「捕獲階段 div2  click」）}；
//冒泡階段
var div1 = document getElementById("div1");

var div1 = document getElementById("div2");



div1.addEventListener("click",div1click，false)；

div1.addEventListener("click",div2click，false)；



function div1Click（）{console.log（「冒泡階段 div1  click」）}；

function div1Click（）{console.log（「冒泡階段 div2  click」）}；

//冒泡階段事件代理利用冒泡流程機制
var ul1=document.getElementsByTagName("ul")[0];
ul1.addEventListener("click",ulClick);
function ulClick(event){
          console.log(event.target);}