115 JS(javascript)

文章目錄

一、引言

1.1 JavaScript 簡介

1.1.1 前端三要素

1.2 JavaScript組成部分
1.3 JavaScript 發展史
1.4JavaScript環境搭建

二、JavaScript基本文法

2.1變量聲明
2.2基本類型
2.3引用類型
2.4數組類型
2.5運算符

邏輯運算
關系運算
單目運算：自增自減
雙目運算符
三目運算符：？:

2.6條件分支結構
2.7循環結構
2.8函數【重點】
2.9常見彈窗函數
2.10事件
2.11正規表達式

三、JavaScript的DOM對象【重點】

3.1概述
3.2查找HTML元素
3.3 改變HTML
3.4 CSS變化
3.5 DOM事件
3.6 EventListener

添加事件的參數：
事件傳遞的兩種方式

3.7操作元素

四、浏覽器BOM

4.1 window
4.2 JavaScript定時器

一、引言

1.1 JavaScript 簡介

JavaScript—種解釋性腳本語言，是一種動态類型、弱類型、基于原型繼承的語言，内置支援類型。
它的解釋器被稱為JavaScript引擎，作為浏覽器的一部分，廣泛用于用戶端的腳本語言，用來給HTML網頁增加動态功能。

1.1.1 前端三要素

HTML (結構) :超文本标記語言(Hyper Text Markup Language)，決定網頁的結構和内容
CSss (表現) :層疊樣式表(Cascading Style Sheets)，設定網頁的表現樣式
JavaScript (行為) :是一種弱類型腳本語言，其源代碼不需經過編譯,而是由浏覽器解釋運作，

用于控制網頁的行為

1.2 JavaScript組成部分

ECMAScript 文法
文檔對象模型（DOM Document Object Model)
浏覽器對象模型(BOM Browser Object Model)

1.3 JavaScript 發展史

它是由Netscape公司的Brendan Eich用10天設計出來一門腳本語言，JavaScript是甲骨文公司的注冊商标。完整的JavaScript實作包含三個部分：ECMAScript，文檔對象模型，浏覽器對象模型。
Netscape在最初将其腳本語言命名為LiveScript，後來Netscape在與Sun合作之後将其改名為JavaScript。JavaScript最初受Java啟發而幵始設計的，目的之一就是“看上去像Java”，是以文法上有類似之處，一些名稱和命名規範也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協定的結果。為了取得技術優勢，微軟推出了JSaipt來迎戰JavaScript的腳本語言。兩者都屬于ECMAScript的實作，為了互用性，ECAM (歐洲計算機制造商協會）建立了ECMA-262标準（ECMAScript)。ECMAScript最新版本是2015釋出的 ECMAScript6 (ES6)。
發展初期，JavaScript的标準并未确定，同期有Netscape的JavaScript, 微軟的JScript和CEnvi的ScriptEase

三足鼎立。1997年，在ECMA (歐洲計算機制造商協會)的協調下，由Netscape、 Sun、微軟、Borland組

成的工作組确定統一标準: ECMA-262。

1.4JavaScript環境搭建

使用HBuilder進行頁面開發
建立工程：檔案-> 建立->Web項目

建立一個< script >< /script >标簽

運作

還可以使用外部引用的形式：把原本的JavaScript代碼寫到一個檔案裡，之後再引用過來

<html>
  <body>
    <script src="js/my.js"></script>
  </body>
</html>

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo1 js導入方式</title>
  </head>
  <body>
    <script type="text/javascript">.write("hello world");</script>
    
    <script type="text/javascript" src="demo1.js"></script>
  </body>
</html>

demo1.js檔案：

document.write("hello js!");

二、JavaScript基本文法

2.1變量聲明

在JavaScript中，任何變量都用var關鍵字來聲明，var是variable的縮寫。
var是聲明關鍵字，a是變量名，語句以分号結尾。

var a;

這裡值得注意的是，JavaScript中的關鍵字，不可以作為變量名。就像在Java中你不可以寫（“ int int = 1;”）一樣。

JavaScript的部分關鍵字:

abstracts else、 instanceof、 super、 boolean、 enum、 int、 switch、 break、 export、 interface、 synchronized、 byte、 extends、 let、 this、 case、 false、 long、 throw、 catch、 final、 native、 throws、 char、 finally、 new、 transient、 class、 float、 null、 true、 const、 for、 package、 try、 continue、 function、 private、 typeof、 debugger、 goto、 protected、 var、 default、 if、 public、 void、 delete、 implements、 return、 volatile、 do、 import、 short、 while、 double、 in、 static、 with。

2.2基本類型

變量的基本類型有Number、String、Boolean、Undefined(未指派)、Null五種。
來聲明一個數字Number類型，如下：

var a = 1;

來聲明一個字元串String類型。你可以使用：

var a = "r";

來聲明一個布爾Boolean類型。你可以使用：

var a = false;

在Java中，當一個變量未被初始化的時候，Java中是null或者基本資料類型的預設值。
在JavaScript中，當一個變量未被初始化的時候，它的值為undefined。
下面是示範undefined的情況：（當一個引用不存在時，它為Null。這個現象我們在之後的引用類型時再詳細探讨)

var a;
document.write(a);

2.3引用類型

在Java中需要類定義，然後再執行個體對象:

public class Student{
    public int id; 
    public String name;
    public int age;
}

public class Test{
    public static void main(String [] args){ 
        Student student=new Student(); 
        student.id=1; 
        student.name="張三"; 
        student.age=18;
    }
}

在JavaScript中對象可以直接寫出來：

var student={id:1, name:"張三", age:18};  /*引用類型*/
document.write(student.id); 
document.write(student.name);
document.write(student.age);

事實上，student被指派為了一個JSON, JSON就是我們在Java基礎階段學過的，全稱是JavaScript Object Notation,叫做JavaScript對象标記，也就是說，在JavaScript中，JSON是用于标記一個對象的。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo2 變量聲明、引用類型</title>
  </head>
  <body>
    <script type="text/javascript">var num = 100; /*聲明變量，該變量并沒有值*/
      document.write(num);
      
      var student={id:1,name:"xiaosan",age:10};/* 引用類型*/
      document.write(student.id);
      document.write(student.name);
      document.write(student.age);</script>
  </body>
</html>

2.4數組類型

數組就是和我們之前了解的數組概念一緻，而在JavaScript中成為Array類型。
我們說JSON可以标記一個對象，那麼它同樣可以标記一個數組，就是Java基礎時我們學過的JSONArray。

var a=[1,2,3.4];

上述代碼，我們說a是一個數組，在a中角标為0的元素是1。可以說這很簡單。
接下來我們來嘗試把之前的JSON放入數組中：

//我是注釋 
/*我也是注釋*/
var students =[
  {id：1, name: "張三",age: 18},  
  {id：2, name: "李四",age: 18},  
  {id：3, name: "王五", age: 19}  
];
document.write(students[0].id);
document.write(students[0].name);
document.write(students[0].age);
document.write("<br>"）;  //這個是html的換行的意思
document.write(students[1].id);
document.write(students[1].name);
document.write(students[1].age);
document.write( "<br>");
document.write(students[2].id);
document.write(students[2].name);
document.write(students[2].age);

通路students這個數組，第0個，第1個，第2個元素，都可以。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo3 數組類型</title>
  </head>
  <body>
    <script type="text/javascript">/*js中數組中元素類型不需要統一*/
      var n=[100,true,"hello",{name:"lisi",age:20}]; /*數組類型中嵌套引用類型*/
      //alert(n.length);//彈出框
      //alert(n[1]);
      //alert(n[n.length-1]);
      alert(n[n.length-1].name);</script>
  </body>
</html>

代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo3 數組類型</title>
  </head>
  <body>
    <script type="text/javascript">/*js中數組中元素類型不需要統一*/
      var n=[100,true,"hello",{name:"lisi",age:20}];
      //alert(n.length);//彈出框
      //alert(n[1]);
      //alert(n[n.length-1]);
      alert(n[n.length-1].name);</script>
  </body>
</html>

2.5運算符

邏輯運算

名稱	運算符	描述
與	&&	要求表達式左右兩邊的表達式同為true,整體結果才為true
或	II	要求表達式左右兩邊的表達式隻要有一個為true,整體結果就為tme
非	!	将布爾值取反操作

var a =false;
var b=true;

//非的邏輯 
//!a->true; 
//!b->false;

//與的邏輯 
//a&&a->false; 
//a&&b->false; 
//b&&a->false;
//b&&b->true; 

//或的邏輯 
//a||a->false; 
//a||b->true; 
//b||a->true; 
//b||b->true;

關系運算

名稱	運算符
等于	=
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	1=
值和類型相同	===

var a=1;
var b=2;

//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false

//這裡三個等于和兩個等于差別：
//前者相當于比較兩個引用，後者相當于比較兩個值。 
//當比較兩個值得時候，不考慮資料類型。
//也就是說1=="1"是true的。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo4 邏輯，關系運算符</title>
  </head>
  <body>
    <script type="text/javascript">//邏輯運算符
      var left_num=true;
      var right_num=true;
      document.write(left_num&&right_num);
      document.write("<hr>");
      left_num=false;
      right_num=false;
      document.write(left_num||right_num);
      document.write("<hr>");
      document.write(!left_num);
      document.write("<hr>");
      
      var num1=20,num2=30;
      document.write(num1>num2);document.write("<hr>");
      document.write(num1<num2);document.write("<hr>");
      document.write(num1>=num2);document.write("<hr>");
      document.write(num1<=num2);document.write("<hr>");
      document.write(num1==num2);document.write("<hr>");
      document.write(num1!=num2);document.write("<hr>");
      
      var n1="100",n2=100;
      document.write(n1==n2);//比較值,不考慮類型
      document.write("<hr>");
      document.write(n1===n2);//類型和值都要求相等</script>
  </body>
</html>

單目運算：自增自減

名稱	運算符	描述
自增	++	變量的值每次加1,再賦給變量
自減	–	變量的值每次減1,再賦給變量

var a=1;
a++;//自增 
a—;//自減 
++a;//自增 
--a;//自減 
//上述規則和Java—樣。

雙目運算符

名稱	運算符
加	+
減	-
乘	*
除	/
求餘	%
指派	=
加等	+=
減等	-=
除等	/=
乘等	*=
求餘等	%=

var a=1;
var b=2;   
a+b    //相加   
a-b    //相減  
a*b    //相乘   
a/b    //相除    
a%b    //求餘   
a=b    //指派  
a+=b;  a= a+b; //相加後指派 
a-=b;//相減後指派 
a/=b;//相除後指派 
a*=b;//相乘後指派 
a%=b;//求餘後指派 
//上述規則和Java—樣。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo5 單目，雙目運算符</title>
  </head>
  <body>
    <script type="text/javascript">var n=1;
      //++n;//n++;
      //document.write(n++);//先使用變量原來的值，再執行加1操作
      document.write(++n);//先執行加1操作，再在語句中使用
      document.write("<br>");
      document.write(n);
      document.write("<br>");
      var m=4;
      
      document.write(m+n);//+
      document.write("<br>");
      m+=n;//相當于m=m+n; 6
      document.write(m);//+=
      document.write("<br>");
      document.write(n/m);///
      document.write("<br>");
      m/=n;
      document.write(m);///=
      document.write("<br>");
      document.write(m%n);//%</script>
  </body>
</html>

三目運算符：？:

var kk = 100;
document.write(kk>100?true:false);

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo6 三目運算符</title>
  </head>
  <body>
    <script type="text/javascript">var kk="helloworld";
      var res=kk=="hello"; //用res接收 kk=="hello" 的結果
      document.write(res?true:false);</script>
  </body>
</html>

2.6條件分支結構

if-else 分支

var a=1 ;
var b=1 ; 
if(a==b){
  document.write("相等"）;
}else{
  document.write ("不相等");
}

//很明顯，運作結果是相等
//這就是if-else的結構，和Java語言是一樣的。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo7 條件分支結構</title>
  </head>
  <body>
  <script type="text/javascript">var n1,n2;
    //if
    n1=10;
    n2=20;
    if(n1<n2){
      //alert("大于");
    }
    //if-else
    if(n1>n2){
      //alert("大于");
    }else{//else中不加條件表達式，它的預設條件就是if以外的其它情況
      //alert("小于等于");
    }
    //if-else嵌套
    if(n1>n2){
      //alert("大于");
    }else{//else中不加條件表達式，它的預設條件就是if以外的其它情況
      if(n1==n2){
        alert("等于");
      }else{
        alert("小于");
      }
    }</script>
  </body>
</html>

switch分支

var a=2; 
switch(a){
    case1:
        document.write("值為1"); 
        break; 
    case 2:
        document.write ("值為2");
        break;
    case 3:
        document.write("值為3"); 
        break; 
    default:
    document.write('值不是3也不是2也不是1");
}

代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo8 switch分支</title>
  </head>
  <body>
    <script type="text/javascript">//每個case的break不省略
      //default的執行順序：不受定義順序影響(與break有關) ；定義順序：可以任意定義；
      var n=11;
      switch(n){
        case 1:
          document.write(n);
          break;
        case 2:
          document.write(n);
          break;
        case 3:
          document.write(n);
          break;
        default:
          document.write(n);
      }</script>
  </body>
</html>

2.7循環結構

for循環

var a=0;
for(var i=1;i<=100;i++){ 
    a+=i;
}
document.write(a);

//上述代碼是對1〜100求和。

while循環

var a=0; 
var i=1; 
while(i<=100){ 
    a+=i;
    i++；
}
document.write(a);

//上述代碼是對1〜100求和。

do-while 循環

var a=0; 
var i=1; 
do{
    a+=i;
    i++;
}while(i<=100); 
document.write(a);

//上述代碼是對1〜100求和。

break 與continue 關鍵字

break用于結束循環 (結束整個循環)
continue用于結束本次循環

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo9 循環</title>
  </head>
  <body>
    <script type="text/javascript">//for
      for(var k=1;k<=10;k+=2){
        document.write(k+"<br>");
      }
      document.write("<hr>");
      //while
      k=1;
      while(k<=10){
        document.write(k+"<br>");
        k++;
      }
      document.write("<hr>");
      //do-while
      k=100;
      do{
        document.write(k+"<br>");
        k--;
      }while(k>=90);
      document.write("<hr>");
      //for-while互相轉換
      //初始值
      //條件
      //循環體
      //疊代變量
      k=1;
      while(k<=10){
        document.write(k+"<br>");
        k+=2;
      }
      document.write("<hr>");
      k=101;
      while(k>=91){
        k--;
        if(k==95)
          break;
          //continue;
        document.write(k+"<br>");
        
      }</script>
  </body>
</html>

2.8函數【重點】

函數定義：用function關鍵字來聲明，後面是方法名字，參數清單裡不寫var。整個方法不寫傳回值類型。

function functionName(parameters){
//執行的代碼
}

方法的定義與調用舉例:

function add(a,b){
 return a+b;
}
var c=1; 
var d=2; 
var e=add(1,2); 
document.write(e);

//上述代碼運作結果是3
//這裡定義了一個add方法，參數是兩個，與Java不同，參數的資料類型并沒有。
//因為就算是寫，全都是var，為了保證文法的簡潔性，全寫var索性就設計成全都不用寫了。
//傳回值也是同樣的道理，差別是，如果你寫了傳回值，那麼有傳回值，如果沒寫return，就沒有傳回值。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo10 函數</title>
  </head>
  <body>
    <script type="text/javascript">//定義函數
      function fuc(){
        document.write("hello");
        document.write("<br>");
        document.write("world");
      }
      //調用函數
      //1.直接調用
      fuc();
      
      //2.結合事件調用函數?
      
      //3.定時器調用函數?
      //定義函數的不同形式：參數/傳回值
      //入參數和傳回值
      function fuc2(num1,num2){
        //類型
        return num1-num2;
      }
      var res=fuc2(10,"hello");
      alert(res);</script>
  </body>
</html>

2.9常見彈窗函數

alert彈框：這是一個隻能點選确定按紐的彈窗
alert方法沒有傳回值，也就是說如果用一個變量去接受傳回值，将會得到undefined。無論你點選“确定”還是右上角的那個關閉。

alert("你好");

confirm彈框：這是一個你可以點選确定或者取消的彈窗
confirm方法與alert不同，他的傳回值是boolean,當你點選“确定”時，傳回true,無論你點選“取消”還是右上角的那個‘X“關閉，都傳回false。

confirm("你好");

prompt彈框：這是一個你可以輸入文本内容的彈窗
第一個參數是提示資訊，第二個參數是使用者輸入的預設值。

•當你點選确定的時候，傳回使用者輸入的内容。當你點選取消或者關閉的時候，傳回null。

prompt("你喜歡學習嗎","喜歡");

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo11 彈窗函數</title>
  </head>
  <body>
    <script type="text/javascript">//alert

      alert("加入購物車成功！");
      
      //confirm
      //确定/取消
      var res=confirm("确定删除嗎？");//傳回一個布爾值
      if(res){
        alert("執行删除");
      }else{
        alert("撤消删除");
      }
      
      //prompt
      var num=prompt("請輸入一個數");
      if(num>0){
        alert("正數");
      }else{
        aler("非正數(0/負數)");
      }</script>
  </body>
</html>

2.10事件

是和html标簽元素一起結合使用的

事件名稱	描述
onchange	HTML元素内容改變
onclick	使用者點選HTML元素
onmouseover	使用者将滑鼠移入一個HTML元素中
onmousemove	使用者在一個HTML元素上移動滑鼠
onmouseout	使用者從一個HTML元素上移開滑鼠
onkeyup	鍵盤
onkeydown	使用者按下鍵盤按鍵
onload	浏覽器已完成頁面的加載
onsubmit	表單送出

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo12 事件</title>
    <style type="text/css">#dd{width:100px; height:50px; background-color:#f00;}</style>
  </head>
  <body>
    <script type="text/javascript">function ff(){
        //document.write();
        //alert();
        //prompt();
        confirm("确定删除？");
      }
      
      function ff2(){
        alert('mouse is in....');
      }</script>
    
    <div>
      <!--事件關聯JS代碼-->
      <button onclick="alert('hello');">普通按鈕</button>
      <!--事件關聯函數-->
      <button onclick="ff()">觸發函數</button>
    </div>
    <div>
      <div id="dd" onmouseover="ff2()">  
      </div>
    </div>
  </body>
</html>

2.11正規表達式

正規表達式是描述字元模式的對象。
正規表達式用于對字元串模式比對及檢索替換，是對字元串執行模式比對的強大工具。
文法：

var patt=new RegExp(pattem,modifiers);
var patt=/pattern/modifiers;

var re = new RegExp("\\w+"); 
var re = /\w+/;

修飾符：用于執行區分大小寫和全局比對:

修飾符	描述
i	執行對大小寫不敏感的比對。
g	執行全局比對（查找所有比對而非在找到第一個比對後停止）。
m	執行多行比對。

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo13 正規表達式</title>
  </head>
  <body>
    <script type="text/javascript">//str 中是否包含字元a,後面的mg是修飾符
      var reg=/a/mg;
      var str="Ahel\nalAoaa";
      //alert(reg.test(str));
      alert(str.match(reg));</script>
  </body>
</html>

方括号：用于查找某個範圍内的字元

表達式	描述
[abc]	查找方括号之間的任何字元。
[^abc]	查找任何不在方括号之間的字元。
[0-9]	查找任何從0至9的數字。
[a-z]	查找任何從小寫a到小寫z的字元。
[A-Z]	查找任何從大寫A到大寫Z的字元。
[A-z]	查找任何從大寫A到小寫z的字元。
[adgk]	查找給定集合内的任何字元。
[^adgk]	查找給定集合外的任何字元。
(red\|blue\|green)	查找任何指定的選項。

元字元（Metacharacter):是擁有特殊含義的字元:

元字元	描述
•	查找單個字元，除了換行和行結束符。
\w	查找單詞字元。
\W	查找非單詞字元。
\d	查找數字。
\D	查找非數字字元。
\s	查找空白字元。
\S	查找非空白字元。
\b	比對單詞邊界。
\B	比對非單詞邊界。
\0	查找NULL字元。
\n	查找換行符。
\f	查找換頁符。
\r	查找回車符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八進制數)cxx規定的字元。
\xdd	查找以十六進制數dd規定的字元。
\uxxxx	查找以十六進制數xxxx規定的Unicode字元。

量詞：用于表示重複次數的含義

量詞	描述
n+	比對任何包含至少一個n的字元串。例如，/a+/比對"candy’中的"a", "caaaaaaandyn中所有的a”。
n*	比對任何包含零個或多個n的字元串。例如，/bo*/比對“A ghostbooooed"中的”boooo”, “Abirdwarb“中的"b”,但是不比對"A goat grunted"。
n?	比對任何包含零個或一個n的字元串。例如，/e?le?/比對"angel”中的"el”，"angle"中的”le”。
n{X}	比對包含X個n的序列的字元串。例如，/a{2}/不比對"candy,“中的"a”，但是比對"caandy，”中的兩個"a"，且比對”caaandy"1 中的前兩個"a"。
n{X,}	X是一個正整數。前面的模式n連續出現至少X次時比對。例如，/a{2,}/不比對"candy”中的”a”，但是比對”caandy"和 “caaaaaaandy"中所有的"a”。
n{X,Y}	X和Y為正整數。前面的模式n連續出現至少X次，至多Y次時比對。例如，/a{l,3}/不比對"cndy”，比對"candy,”中的 “a”, “caandy"中的兩個"a”，比對ncaaaaaaandyn中的前面三個”a“。注意，當比對”caaaaaaandy“時，即使原始字元串擁有更多的"a", 比對項也是"aaa"。
n{X}	前面的模式n連續出現X次時比對
n$	比對任何結尾為n的字元串。
^n	比對任何幵頭為n的字元串。
?=n	比對任何其後緊接指定字元串n的字元串。
?!n	比對任何其後沒有緊接指定字元串n的字元串。

RegExp對象方法

方法	描述
compile	編譯正規表達式。
exec	檢索字元串中指定的值。傳回找到的值，并确定其位置。
test	檢索字元串中指定的值。傳回true或false。

支援正規表達式的String對象的方法

方法	描述
search	檢索與正規表達式相比對的值。
match	找到一個或多個正規表達式的比對。
replace	替換與正規表達式比對的子串。
split	把字元串分割為字元串數組。

正規表達式的使用

test方法：搜尋字元串指定的值，根據結果并傳回真或假
exec()方法：檢索字元串中的指定值。傳回值是被找到的值。如果沒有發現比對，則傳回null。

var patt1=new RegExp("e");  
document.write(patt1.test("The  best things in life are free"）;
                          
var patt2=new RegExp("e"); 
document.write(patt2.exec("The best things in life are  free"));

三、JavaScript的DOM對象【重點】

3.1概述

通過HTML DOM,可通路JavaScript HTML文檔的所有元素。
當網頁被加載時，浏覽器會建立頁面的文檔對象模型DOM（Document Object Model)。
HTMLDOM模型被構造為對象的樹：

通過可程式設計的對象模型(DOM)，JavaScript獲得了足夠的能力來建立動态的HTML。

JavaScript能夠改變頁面中的所有HTML元素。
JavaScript能夠改變頁面中的所有HTML屬性。
JavaScript能夠改變頁面中的所有CSS樣式。
JavaScript能夠對頁面中的所有事件做出反應。

3.2查找HTML元素

通常，通過JavaScript，您需要操作HTML元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過id找到HTML元素

在DOM中查找HTML元素的最簡單的方法，是通過使用元素的id。
方法：document.getElementByld(“id屬性值”)；
如果找到該元素，則該方法将以對象（在x中）的形式傳回該元素。
如果未找到該元素，則x将包含null。

通過标簽名找到HTML元素方法：

geElementsByTagName(“合法的元素名”)；

通過類名找到HTML元素

方法：geElementsByClassName(“class屬性的值”)；

3.3 改變HTML

改變HTML輸出流：document.write()可用于直接向HTML輸出流寫内容

<!DOCTYPE html> 
<html>
    <body>
        <script>.write("Hello world,I'm JavaScript");</script>
    </body>
</html>

改變HTML内容：使用innerHTML屬性

<html>
    <body>
        <p id="p1"> Hello World!</p>
        <script>.getElementById("p1").innerHTML="abcd";</script>
    </body>
</html>

改變HTML屬性：document.getElementByld(id).attribute=新屬性值
将attribute替換成真實的屬性名

<html>
    <body>
        <img id="image" src="1.gif"/>
        <script>.getElementById("image").src="2.gif";</script>
    </body>
</html>

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo14 改變HTML</title>
    <style type="text/css">#dd{width: 200px; height:200px; background-color: yellow;}</style>
  </head>
  <body>
    <div id="dd"></div>
    
    <script type="text/javascript">//獲得對象
      var dd=document.getElementById("dd");
      //改變HTML内容
      dd.innerHTML="内容已被改變 已被改變 已被改變";
      //改變HTML屬性
      dd.align="center";</script>
  </body>
</html>

3.4 CSS變化

對象.style.property=新樣式
将property替換成真實的css屬性名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p id="p1">He11o World!</p>
        <p 1d="p2">Hello World!</p>
        <script>.getElementById("p2").style.color=" blue";
            document.getElementById("p2").style.fontFamily="Arial";
            document.getElementById("p2").style.fontSize="larger";</script>
        <p>以上段落通過腳本修改。</p>
    </body>
</html>

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo15 css變化 </title>
    <style type="text/css">#dd{width:200px; height: 200px; background-color: yellow;}</style>
  </head>
  <body>
    <div id="dd" class="dd"></div>
    <script type="text/javascript">//獲得對象
      var dds = document.getElementsByClassName("dd");//數組（類選擇器名字）
      //修改CSS屬性
      dds[0].style.width="400px";
      dds[0].style.backgroundColor="blue";
      dds[0].style.height=250+"px";</script>
  </body>
</html>

3.5 DOM事件

HTML DOM允許我們通過觸發事件來執行代碼
比如以下事件:

元素被點選。
頁面加載完成。
輸入框被修改。

本例改變了id=“id1” 的HTML元素的樣式，當使用者點選按鈕時

<!DOCTYPE html>
<html>
    <body>
        <h1 id="id1" >myH1</h1>
        <button type= "button"                                                                οnclick="document.getElementById('id1').style.color='red'">button</button>
    </body>
</htm1>

點選前

點選後

HTML DOM使JavaScript有能力對HTML事件做出反應。
在本例中，當使用者在h1元素上點選時，會改變其内容

<!D0CTYPE html>
<html>
    <body>
        <h1 onclick="this.innerHTML='Ooops'">點選文本！</h1> 
    </body>
</html>

本例從事件處理器調用一個函數：

<!D0CTYPE html>
<html>
    <head>
        <script>function changetext(id){
                id.innerHTML="Ooops!";
            }</script>
    </head>
    <body>
        <h1 onclick="changetext(this)">點選文本！</h1>
    </body>
</html>

如需向HTML元素配置設定事件，您可以使用事件屬性。

<button onclick="displayDate()">點這裡</button>

HTML DOM允許您使用JavaScript來向HTML元素配置設定事件

<script>.getElementById("MmyBtn").onclick=function(){(displayDate()};</script>

代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo16 DOM事件</title>
    <style type="text/css">#focus{width: 200px; height: 200px; background-color: red;}</style>
  </head>
  <body>
    <script type="text/javascript">function ff(){
        //通過該函數設定div層的屬性
        //1.獲得層
        var fc=document.getElementById("focus");
        //2.設定屬性
        var x,y,z;
        x=Math.ceil((Math.random()*255));//随機顔色
        y=Math.ceil((Math.random()*255));//
        z=Math.ceil((Math.random()*255));//
        fc.style.backgroundColor="rgb("+x+","+y+","+z+")";//rgb(100,123,255)
      }</script>
    
    <div id="focus"></div>
    <div>
      <button onclick="ff()">change focus</button>
    </div>
  </body>
</html>

3.6 EventListener

addEventListener()方法
在使用者點選按鈕時觸發監聽事件

document.getElementById("myBtn").addEventListener( "click", displayDate); //(事件，函數)

addEventListener()方法用于向指定元素添加事件句柄。
addEventListener()方法添加的事件句柄不會覆寫已存在的事件句柄。
你可以向一個元素添加多個事件句柄。
你可以向同個元素添加多個同類型的事件句柄，如：兩個"click”事件。
你可以向任何DOM對象添加事件監聽，不僅僅是HTML元素。如：window對象。
addEventListenerO方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用addEventListener()方法時，JavaScript從HTML标記中分離開來，可讀性更強，在沒有控制HTML标記時也可以添加事件監聽。
你可以使用removeEventListener（）方法來移除事件的監聽。

添加事件的參數：

.addEventListener(event,function,useCapture);

添加事件的參數（三個）：

參數名	描述
event	事件的類型（如"click"或"mousedown")
function	事件觸發後調用的函數
useCapture	用于描述事件是冒泡還是捕獲。該參數是可選的

當使用者點選元素時彈出"Hello World!":

element.addEventListener("click", myFunction);//定義事件

function myFunction() {
  alert ("Hello World!");
}

addEventListener()方法允許向同個元素添加多個事件，且不會覆寫已存在的事件:

element.addEventListener("click", myFunction); 
element.addEventListener("click", mySecondFunction);

你可以向同個元素添加不同類型的事件:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction); 
element.addEventListener("mouseout"， myThirdFunction);

addEventListener（）方法允許你在HTML DOM對象添加事件監聽，HTML DOM對象如：HTML元素，HTML文裆，window對象。或者其他支出的事件對象如:xmlHttpRequest對象。
當使用者重置視窗大小時添加事件監聽：

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo17 eventlistener事件監聽器1 </title>
    <style type="text/css">#d1{ width:200px; height: 100px; background-color: #ccf;}
      #d2{ width:200px; height: 100px; background-color: #Fcf;}</style>
  </head>
  <body>
    <div id="d1"></div>
    <div id="d2"></div>
    <script type="text/javascript">//添加事件監聽
      var d1=document.getElementById("d1");//先擷取元素
      d1.addEventListener("mouseover",ff);//為元素添加事件監聽器
      function ff(){
        alert(this+"----事件監聽機制^_^");
      }
      //同一進制素綁定多個相同僚件
      d1.addEventListener("mouseover",function (){
        alert("事件監聽機制^_^^_^");
      })
      //同一進制素綁定多個不同僚件
      d1.addEventListener("mousemove",function(){
        alert("事件監聽機制^_^move");
      })
      var d2=document.getElementById("d2");
      d2.addEventListener("mouseover",ff);</script>  
  </body>
</html>

事件傳遞的兩種方式

事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。如果你将 P 元素插入到 div 元素中，使用者點選p元素，哪個元素的"click”事件先被觸發呢？

在”冒泡“中，内部元素的事件會先被觸發，然後再觸發外部元素，即：P元素的點選事件先觸發，然後會觸發div元素的點選事件。
在”捕獲“中，外部元素的事件會先被觸發，然後才會觸發内部元素的事件，即: div元素的點選事件先觸發，然後再觸發p 元素的點選事件。

addEventListener（）方法可以指定"useCapture"參數來設定傳遞類型：

addEventListener(event, function, useCapture);

預設值為false,即冒泡傳遞，當值為true時,事件使用捕獲傳遞。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener()方法移除由addEventListener()方法添加的事件句柄：

element.removeEventListener("mousemove", myFunction);

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo18 eventlistener事件監聽器2</title>
    <style type="text/css">#div{width:200px; height: 200px; background-color: #ccc;}
      #p{width:100px; height: 100px; background-color: #ff0;}</style>
  </head>
  <body>
    <div id="div">
      <p id="p"></p>
    </div>
    <script type="text/javascript">//獲得對象
      var div=document.getElementById("div");
      var p=document.getElementById("p");
      //添加監聽
      div.addEventListener("mouseover",function(){
        alert("div event listener");
      },true);
      p.addEventListener("mouseover",function(){
        alert("p event listener");
      });
      /*注意，在添加第三個元素（傳遞方式）時，要設定為捕獲（true）,要加在外層元素上或者全都加
       隻加在内層元素上是不起作用的*/</script>
  </body>
</html>

3.7操作元素

如需向HTML DOM添加新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素。

建立元素：document.createElement() 。
追加元素：appendChild()

<div id="div1" >
    <p id="p1">這是一個段落。</p> 
    <p id="p2">這是另一個段落。</p> 
</div>

<script>var para=document.createElement("p");
    var node=document.createTextNode("這是一個新段落");
    para.appendChild(node);
    
    var element=document.getElementById("divl"); 
    element.appendChild(para);</script>

删除已有的HTML元素
使用方法：removeChild()

<div id="div1" >
    <p id="p1">這是一個段落。</p> 
    <p id="p2">這是另一個段落。</p> 
</div>

<script>var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);</script>

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>demo19 DOM操作元素</title>
  </head>

  <body>
    <table id="tab" border="1" cellspacing="0" width="400">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>内容</th>
        <th>日期</th>
        <th>備注</th>
      </tr>
    </table>
    <button id="btn">留言</button>
    <button id="btn2">删除留言</button>
    <script type="text/javascript">var btn = document.getElementById("btn");
      //獲得對象
      var tab = document.getElementById("tab");
      btn.addEventListener("click", function() {
        //建立對象
        var tr = document.createElement("tr");
        var th1 = document.createElement("th");
        th1.innerHTML = "1";
        tr.appendChild(th1);
        var th2 = document.createElement("th");
        th2.innerHTML = "張三";
        tr.appendChild(th2);
        var th3 = document.createElement("th");
        th3.innerHTML = "一個懶家夥";
        tr.appendChild(th3);
        var th4 = document.createElement("th");
        th4.innerHTML = new Date();
        tr.appendChild(th4);
        var th5 = document.createElement("th");
        th5.innerHTML = "..";
        tr.appendChild(th5);
        //将建立的對象添加到所獲得的對象内部
        tab.appendChild(tr);
      });
      
      var btn2=document.getElementById("btn2");
      btn2.addEventListener("click",function(){
        tab.removeChild(tab.children[1]);
        
      })</script>
  </body>

</html>

四、浏覽器BOM

浏覽器對象模型(BOM-Browser Object Model）使JavaScript有能力與浏覽器"對話”。
由于現代浏覽器已經（幾乎）實作了 JavaScript互動性方面的相同方法和屬性，是以常被認為是BOM的方法和屬性。

4.1 window

所有浏覽器都支援window對象。它表示浏覽器視窗。
所有JavaScript全局對象、函數以及變量均自動成為window對象的成員。
全局變量是window對象的屬性。
全局函數是window對象的方法。
甚至HTML DOM的document也是window對象的屬性之一：
window的尺寸：

對于Internet Explorer、Chrome、Firefoxs Opera 以及 Safari：

window.innerHeight-浏覽器視窗的内部高度(包括滾動條)
window.innerWidth -浏覽器視窗的内部寬度(包括滾動條}

對于 Internet Explorer 8、7、6、5:

document-document Element.clientHeight
document.documentElement.clientWidth

或者
document.body.clientHeight
document.body.clientWidth

var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

Window Screen

可用寬度：screen.availWidth屬性傳回通路者螢幕的寬度，以像素計，減去界面特性，比如視窗工作列
可用高度：screen.availHeight屬性傳回通路者螢幕的高度，以像素計，減去界面特性，比如視窗工作列

document.write("可用寬度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);

Window Location

window.location對象用于獲得目前頁面的位址(URL),并把浏覽器重定向到新的頁面。
window.location對象在編寫時可不使用window這個字首。一些例子：

location.hostname傳回web主機的域名
location.pathname傳回目前頁面的路徑和檔案名
location.port 傳回 web 主機的端口（80 或 443)
location.protocol 傳回所使用的 web 協定（http:// 或 https://)
location.href屬性傳回目前頁面的URL
location.assign()方法加載新的文檔

<html>
    <head>
        <script>function newDoc(){
            window.location.assign("http://www.baidu.com/")</script>
    </head>
    <body>
        <input type= "button" value= "Load new document" οnclick= "newDoc()">
    </body>
 </html>

Window History:

window.history對象包含浏覽器的曆史。
window.history對象在編寫時可不使用window這個字首。

history. back()
history.forward()

一些方法示例如下：

history.back() -與在浏覽器點選後退按鈕相同

<html>
    <head>
        <script>function goBack(){
                window.history.back()
            }</script>
    </head>
    <body>
        <input type= ”button" value= ”Back" οnclick=" goBack()">
    </body>
</html>

history.forward() -與在浏覽器中點選按鈕向前相同

<html>
    <head>
        <script>function goForward(){
                  window.history.forward()
            }</script>
    </head>
    <body>
        <input type- "button" value="Forward" οnclick= ”goForward()">
    </body>
</html>

Window Navigator

window.navigator對象在編寫時可不使用window這個前綴。

<div id="example"></div>
<script>= "<p>浏覽器代号:" + navigator.appCodeName + "</p>";
    txt+= "<p>浏覽器名稱：" + navigator.appName + "</p>";
    txt+= "<p>浏覽器版本："+ navigator.appVersion +  "</p>";
    txt+= "<p>啟用Cookies：" + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬體平台："+ navigator . platform +  "</p>";
    txt+= "<p>使用者代理："+ navigator . userAgent + "</p>";
    txt+= "<p>使用者代理語言：" + navigator. systemLanguage + "</p>";

    document.getElementById("example").innerHTML=txt;</script>

4.2 JavaScript定時器

定義定時器：

setlnterval('調用函數’，毫秒時間)：每間隔固定毫秒值就執行一次函數
setTimeoutC調用函數’，毫秒時間)：在固定時間之後執行一次調用函數

關閉定時器：

clearlnterval(定時器名稱)
dearTimeout(定時器名稱）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo20 BOM定時器</title>
    <style type="text/css">#dd{
        width: 200px;height:200px; background-color: #f00;
      }</style>
  </head>
  <body>
    <div id="dd"></div>
    <button id="btn">stop</button>
    <script type="text/javascript">function ff(){
        var dd=document.getElementById("dd");
        var r=Math.ceil(Math.random()*255);//0-255 //随機顔色
        var g=Math.ceil(Math.random()*255);//0-255
        var b=Math.ceil(Math.random()*255);//0-255
        dd.style.backgroundColor="rgb("+r+","+g+","+b+")";
      }
      
      //定時器
      A=window.setInterval("ff()",1000);
      
      document.getElementById("btn").addEventListener("click",function(){
        clearInterval(A); //省略了window
      })</script>
  </body>
</html>

115 JS(javascript)

文章目錄

一、引言

1.1 JavaScript 簡介

1.1.1 前端三要素

1.2 JavaScript組成部分

1.3 JavaScript 發展史

1.4JavaScript環境搭建

二、JavaScript基本文法

2.1變量聲明

2.2基本類型

2.3引用類型

2.4數組類型

2.5運算符

邏輯運算

關系運算

單目運算：自增自減

雙目運算符

三目運算符：？:

2.6條件分支結構

2.7循環結構

2.8函數【重點】

2.9常見彈窗函數

2.10事件

2.11正規表達式

三、JavaScript的DOM對象【重點】

3.1概述

3.2查找HTML元素

3.3 改變HTML

3.4 CSS變化

3.5 DOM事件

3.6 EventListener

添加事件的參數：

事件傳遞的兩種方式

3.7操作元素

四、浏覽器BOM

4.1 window

4.2 JavaScript定時器

繼續閱讀