js 前端編程語言

JavaScript概述

ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

ECMAScript的歷史

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變動
1999	ECMAScript 3	添加正則表達式 添加try/catch
	ECMAScript 4	沒有發佈
2009	ECMAScript 5	添加"strict mode"嚴格模式 添加JSON支持
2011	ECMAScript 5.1	版本變動
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增長指數運算符（**） 增長Array.prototype.includes

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

• 核心（ECMAScript） 
• 文檔對象模型（DOM） Document object model (整合js，css，html)
• 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

JavaScript 很容易學習。

1  js 的引入方式：

　　1 內部引用：

<script>
    alter("wo")   引入帶html中  web上彈出一筐
</script>

　　2 外部引用：

　

<script  src="01.js"></script>  引用

2 基本語法：

註釋（註釋是代碼之母）

// 這是單行註釋

/*
這是
多行註釋
*/

結束符

JavaScript中的語句要以分號（;）爲結束符。

變量聲明:

1. JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。
2. 聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
var age = 18;

注意：

變量名是區分大小寫的。

推薦使用駝峯式命名規則。

保留字不能用作變量名。

補充：

ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令

for (let i=0;i<arr.length;i++){...}

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

複製代碼
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
複製代碼

保留字

JavaScript數據類型

數值(Number)

JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

經常使用方法：

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

拼接字符串通常使用「+」

複製代碼
string.slice(start, stop)和string.substring(start, stop)：

二者的相同點：
若是start等於end，返回空字符串
若是stop參數省略，則取到字符串末
若是某個參數超過string的長度，這個參數會被替換爲string的長度

substirng()的特色：
若是 start > stop ，start和stop將被交換
若是參數是負數或者不是數字，將會被0替換

silce()的特色：
若是 start > stop 不會交換二者
若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)
複製代碼

silce與substring區別

/ 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

布爾值(Boolean)

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

• null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
• undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。

對象(Object)

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉
.join(seq)	將數組元素鏈接成字符串
.concat(val, ...)	鏈接數組
.sort()	排序
.forEach()	將數組的每一個元素傳遞給回調函數
.splice()	刪除元素，並向數組添加新元素。
.map()	返回一個數組元素調用函數處理後的值的新數組

關於sort()須要注意：

若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。

若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

關於遍歷數組中的元素，可使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

forEach()：

語法：

forEach(function(currentValue, index, arr), thisValue)

參數：

參數	描述
function(currentValue, index, arr)	必需。 數組中每一個元素須要調用的函數。 函數參數: 參數 描述 currentValue 必需。當前元素 index 可選。當前元素的索引值。 arr 可選。當前元素所屬的數組對象。
thisValue	可選。傳遞給函數的值通常用 "this" 值。 若是這個參數爲空， "undefined" 會傳遞給 "this" 值

 

splice()

語法：

splice(index,howmany,item1,.....,itemX)

參數： 

 

參數	描述
index	必需。規定從何處添加/刪除元素。 該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany	必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。 若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
item1, ..., itemX	可選。要添加到數組的新元素

 

map()

語法：

map(function(currentValue,index,arr), thisValue)

參數：

參數	描述
function(currentValue, index,arr)	必須。函數，數組中的每一個元素都會執行這個函數 函數參數: 參數 描述 currentValue 必須。當前元素的值 index 可選。當期元素的索引值 arr 可選。當期元素屬於的數組對象
thisValue	可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值爲 "undefined"

補充：

ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

• undefined - 若是變量是 Undefined 類型的
• boolean - 若是變量是 Boolean 類型的
• number - 若是變量是 Number 類型的
• string - 若是變量是 String 類型的
• object - 若是變量是一種引用類型或 Null 類型的

運算符：
　　基本運算符： + - * / % ++ --
　　比較符： > >= < <= != ==（弱等於）     !==       ===(強等於)
　　邏輯運算符： && || !

　　賦值： = += -= *= /=

對象：

var person = {
　　name: "xiao",
　　age: 38,

　　sexy: true
}
person.name 取值 = person['name']

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if-else if-else 

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

while:
            var  age=10
            while (age <= 18) {
                console.log("終於")；
                age  ++；
        }

三元運算

三元運算：var  c  = a > b ? a ： b條件成立  c = a  ，不成立 c = b

 

函數

參考博客：https://www.cnblogs.com/liwenzhou/p/8004649.html

函數定義：

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數
console.log((function(a, b){
  return a + b;
})(1, 2));

若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：

var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;
}

函數中的arguments參數

function f3(a,b) {
    console.log(arguments[0])
    console.log(arguments[1])
}
f3("xiao","long")

函數的全局變量和局部變量

局部變量：

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除。

做用域:

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //輸出結果是？

列2

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

3  閉包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

詞法分析（嘗試理解）

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

列1
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()以後的結果是？

列2

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？

詞法分析過程：
一、分析參數，有一個參數，造成一個 AO.age=undefine;
二、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

最終，AO上的屬性只有一個age，而且值爲一個函數聲明

執行過程：
注意：執行過程當中全部的值都是從AO對象上去尋找

一、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2
三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

內置對象和方法：

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等

注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象：

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

2. new關鍵字形式
var person = new object(); 建立一個空對象
person.name="xiao"
person.age=38

擴展：

// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};

繼承

Date對象：

/方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON對象：

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

Math對象：

console.log(Math.abs(s1))

abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。

View Code

RegExp對象

//RegExp對象

//建立正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 建立RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字符串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 建立方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true

建立對象

// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 注意事項1：
// 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。
// 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 仍是返回true
// 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，必定要加上^和$符號。

// 注意事項2(說出來你可能不信系列)：
// 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

View Code

 

BOM與DOM

參考博客：https://www.cnblogs.com/liwenzhou/p/8011504.html

BOM：是瀏覽器對話模式，他能使javascript 與瀏覽器進行對話

DOM ： 是對文件對象，可讓javascript實現對html文件的操做

Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

*若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。

*沒有應用於 window 對象的公開標準，不過全部瀏覽器都支持該對象。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些經常使用的Window方法：

• window.innerHeight - 瀏覽器窗口的內部高度
• window.innerWidth - 瀏覽器窗口的內部寬度
• window.open() - 打開新窗口
• window.close() - 關閉當前窗口

navigator對象（瞭解便可）

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

screen對象（瞭解便可）

屏幕對象，不經常使用。

一些屬性：

• screen.availWidth - 可用的屏幕寬度
• screen.availHeight - 可用的屏幕高度

history對象（瞭解便可）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

　　

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面

　　

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁
history.back()  // 後退一頁

location對象

window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面

經常使用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面

彈出框

能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert("你看到了嗎？");

確認框（瞭解便可）

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("你肯定嗎？")

提示框（瞭解便可）

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("請在下方輸入","你的答案")

計時相關

經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

setTimeout()    設定在多少秒以後執行

var t = setTimeout("alert(123)",1000);  1秒以後執行彈出123 窗口

SetTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

舉個例子：

// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);

setInterval和clearInterval： 

　　setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。  可重複操做的

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)

返回值

一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);

實例定時器：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定時器練習</title>
</head>
<body>
<input id="i1" type="text">
<input id="start" type="button" value="開始">
<input id="stop" type="button" value="中止">
<script>

    // 聲明一個全局的t,保存定時器的ID
    var t;
    // 在input框裏顯示當前時間
    // 1. 獲取當前時間
    function foo() {
        var now = new Date();
        var nowStr = now.toLocaleString();
        // 2. 把時間字符串填到input框裏
        var i1Ele = document.getElementById("i1");
        i1Ele.value = nowStr;
    }


    // 點開始讓時間動起來
    // 找到開始按鈕,給它綁定事件
    var startButton = document.getElementById("start");
    startButton.onclick=function () {
        foo();
        // 每隔一秒鐘執行foo
        if (t===undefined){
            t = setInterval(foo, 1000);  // 把定時器的ID複製給以前聲明的全局變量t
        }
    };
    // 點中止
    // 找到中止按鈕,給它綁定事件
    var stopButton = document.getElementById("stop");
    stopButton.onclick=function () {
        // 清除以前設置的定時器
        clearInterval(t);  // 清除t對應的那個定時器,t的值還在
        console.log(t);
        t = undefined;
    }

</script>
</body>
</html>

View Code

DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。 

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

HTML DOM 樹

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

• 文檔節點(document對象)：表明整個文檔
• 元素節點(element 對象)：表明一個元素（標籤）
• 文本節點(text對象)：表明元素（標籤）中的文本
• 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
• 註釋是註釋節點(comment對象)　

JavaScript 能夠經過DOM建立動態的 HTML：

• JavaScript 可以改變頁面中的全部 HTML 元素
• JavaScript 可以改變頁面中的全部 HTML 屬性
• JavaScript 可以改變頁面中的全部 CSS 樣式
• JavaScript 可以對頁面中的全部事件作出反應

查找標籤

直接查找

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取
document.getElementsByTagName     根據標籤名獲取標籤合集

間接查找

parentElement            父節點標籤元素
children                 全部子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM查找標籤</title>
</head>
<body>

<div id="d1">div</div>
<p class="c1">p標籤</p>
<p class="c1">p標籤2</p>
<p class="c2">第二個p標籤</p>

<div id="d2">
    <div id="d3">d2裏面的d3</div>
    <div id="d4">d2裏面的d4</div>
    <div id="d5">d2裏面的d5</div>
</div>
</body>
</html>

html代碼

var d3Ele = document.getElementById('d3')
d3Ele.parentElement     查找父標籤

View Code

var d2ele = document.getElementById("d2")

d2ele.children   查找子標籤

d2ele.firstElementChild   第一個子標籤

d2ele.lastElementChild   最後一個子標籤

var d4ele = document.getElementById("d4")

d4ele.previousElementSibling     上一個兄弟標籤

d4ele.nextElementSibling    下一個兄弟標籤

 

節點操做

建立節點

語法：

createElement(標籤名)

示例：

var divEle = document.createElement("div");

添加節點

語法：

追加一個子節點（做爲最後的子節點）

somenode.appendChild(newnode)；

把增長的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

示例：

var imgEle=document.createElement("img");      創造標籤

var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);                     給d1 添加img子標籤

imgele.src="http://www.baidu.com"   給img 標籤添加src 值

var d2ele = document.getElementById("d2")   找到d2標籤
 var aele = document.createElement("a");   建立a標籤

var d3ele = document.getElementById("d3")    找到d3 標籤
d2ele.insertBefore(aele,d3ele)   在d2中d3前插入a 標籤

刪除節點：

語法：

得到要刪除的元素，經過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

d2ele.removeChild(aele);      在d2中刪除a子節點

 

替換節點：

 

語法：

 

somenode.replaceChild(newnode, 某個節點);

 

屬性節點

 

獲取文本節點的值：

 

var divEle = document.getElementById("d1")
divEle.innerText          獲取d1 標籤值
divEle.innerHTML

 

設置文本節點的值：

 

var divEle = document.getElementById("d1")
divEle.innerText="1"               給d1標籤設定值1
divEle.innerHTML="<p>2</p>"

 

attribute操做

 

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

 

 

獲取值操做

 

語法：

 

elementNode.value

 

適用於如下標籤：

 

• .input   
• .select
• .textarea 

 

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

 

class的操做

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>class相關操做</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: grey;
        }
        .c2 {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="c1 c2 c3" onclick="change(this);">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>

<script>
    function change(ths) {
        ths.classList.toggle("c2");
    }

//    第二種綁定事件的方式
    var divEles = document.getElementsByTagName("div");
    for (var i=0;i<divEles.length;i++){
        divEles[i].onclick=function () {
            this.classList.toggle("c2");
        }
    }
</script>
</body>
</html>

html代碼

 

className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

 

指定CSS操做

 

obj.style.backgroundColor="red"

var divEle = document.getElementsByTagName("div")
divEle[0].style.backgroundColor("blue")

 

JS操做CSS屬性的規律：

 

1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

 

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

 

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

 

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

 

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。

經常使用事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

 綁定方式：

方式一：

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

注意：

this是實參，表示觸發事件的當前元素。

函數定義過程當中的ths爲形參。

方式二：

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

事件示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>
</head>
<body>

<input type="text" id="i1" value="對子哈特">
<input type="button" value="搜索">

<script>
    // 找到input框
    var i1Ele = document.getElementById("i1");
    i1Ele.onfocus=function () {
        // 把value清空
        this.value="";
    };
    i1Ele.onblur=function () {
        // 失去焦點以後把若是值爲空就填回去
        if (!this.value.trim()){
            this.value="對子哈特";
        }
    }
</script>


</body>
</html>

05搜索框示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>select聯動示例</title>
</head>
<body>

<select id="s1">
    <option value="0">--請選擇--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

<select id="s2"></select>

<script>

    var data = {1: ["昌平區", "朝陽區", "海淀區"], 2: ["靜安區", "閔行區", "浦東區"]};
    // 給第一個select綁定事件,綁定的是onchange事件
    var s1Ele = document.getElementById("s1");
    s1Ele.onchange = function () {
        // 取到你選的是哪個市
        console.log(this.value);
        // 把對應市的區填到第二個select框裏面
        var areas = data[this.value];  // 取到市對應的區
        // 找到s2
        var s2Ele = document.getElementById("s2");
        // 清空以前的
        s2Ele.innerHTML="";
        // 生成option標籤
        for (var i = 0; i < areas.length; i++) {
            var opEle = document.createElement("option");
            opEle.innerText = areas[i];
            // 添加到select內部
            s2Ele.appendChild(opEle);
        }
    }
</script>
</body>
</html>

select 聯動