Javascript篇章四：瀏覽器對象，前端模塊化

1.條件判斷以及prompt() 方法

多條件判斷：if…else if…else if…else
prompt(text,defaultText)方法用於顯示可提示用戶進行輸入的對話框（即輸入數據）,參數一表示提示文本，參數二表示默認值
var name=prompt(“Please enter your name”,“ritian zhao”)

2.循環

1. for(i=1;i<=1000;i++){}

2.for (item in items){} (不推薦)

3.while(){}

3. return終止函數

1.return後面的語句不執行
2.JavaScript裏的return只能返回一個數值（區別於python可以返回多個）

4.Map與Set運用

Map是一組鍵值對的結構，具有很快的查找速度

舉個例子，假設要根據同學的名字查找對應的成績，如果用Array實現，需要兩個Array：

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

給定一個名字，要查找對應的成績，就先要在names中找到對應的位置，再從scores取出對應的成績，Array越長，耗時越長。

如果用Map實現，只需要一個“名字”-“成績”的對照表，直接根據名字查找成績，無論這個表有多大，查找速度都不會變慢。用JavaScript寫一個Map如下

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

Map的方法（初始化Map需要一個二維數組，或者直接初始化一個空Map）

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67,獲取值
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

由於一個key只能對應一個value，所以，多次對一個key放入value，map函數會把後面的值會把前面的值沖掉

Set()

Set和Map類似，也是一組key的集合，但不存儲value。

由於key不能重複，所以，在Set中，沒有重複的key。要創建一個Set，需要提供一個Array作爲輸入，或者直接創建一個空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); //一個Array含1, 2, 3

重複元素在Set中自動被過濾：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

通過add(key)方法可以添加元素到Set中，可以重複添加，但不會有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

全局作用域

1.不在任何函數內定義的變量就具有全局作用域，實際上，JavaScript默認有一個全局對象window，全局作用域的變量實際上被綁定到window的一個屬性。
window.屬性/window.方法
2.ES6引入了新的關鍵字let，用let替代var可以申明一個塊級作用域的變量
3.ES6標準引入了新的關鍵字const來定義常量，const與let都具有塊級作用域

瀏覽器對象：window,navigator,screen,Location，document

window對象不僅充當全局作用域，而且表示瀏覽器的窗口

window.innerWidth和window.innerHeight:可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等佔位元素後，用於顯示網頁的淨寬高

windows.outerWidth和outerHeight屬性，可以獲取瀏覽器窗口的整個寬高

navigator對象表示瀏覽器信息

navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設置的語言；
navigator.platform：操作系統類型；
navigator.userAgent：瀏覽器設定的User-Agent字符串

screen表示屏幕信息

screen.width：屏幕寬度，以像素爲單位；
screen.height：屏幕高度，以像素爲單位；
screen.colorDepth：返回顏色位數，如8、16、24。

Location對象表示當前頁面的URL信息

location.protocol; // ‘http’
location.host; // ‘www.example.com’
location.port; // ‘8080’
location.pathname; // ‘/path/index.html’
location.search; // ‘?a=1&b=2’
location.hash; // ‘TOP’
location.href 獲取完整url
window.location.href=“新的跳轉url”：跳轉到指定的頁面
location.assign()：加載一個新頁面，可以調用
location.reload()：如果要重新加載當前頁面

document對象表示當前頁面

高階函數

map/reduce函數，與python的map，reduce作用相同

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
// 對於reduce函數：函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

instanceof關鍵字

這個關鍵字的用法是：A instanceof B ，返回值爲boolean類型。用來判斷A是否是B的實例對象或者B子類的實例對象。如果是則返回true,否則返回false

//Man是Person的子類
p = new Person() ; //
m = new Man() ; 
a = new Animal() ;
m instanceof Man //返回true
m instanceof Animal//返回false
m instanceof Person//返回true

操作表單

文本框，對應的<input type=“text”>，用於輸入文本；

口令框，對應的<input type=“password”>，用於輸入口令；

單選框，對應的<input type=“radio”>，用於選擇一項；

複選框，對應的<input type=“checkbox”>，用於選擇多項；

下拉框，對應的<select>，用於選擇一項；

隱藏文本，對應的<input type=“hidden”>，用戶不可見，但表單提交時會把隱藏文本發送到服務器。

獲取值

如果我們獲得了一個<input>節點的引用，就可以直接調用value獲得對應的用戶輸入值，使用樣例：
       變量名.value可以應用於text、password、hidden以及select。但是，對於單選框和複選框，value屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是用戶是否“勾上了”選項，所以應該用checked判斷：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

面向對象編程

構造函數

構造函數與普通函數的區別就是調用方式不同：普通函數是直接調用，而構造函數需要使用new關鍵字來調用
PS:構造函數的函數名一般默認首字母大寫；構造函數裏可以使用this;參考：本質與python的構造函數相同

function Person(name,age) {
    this.name=name;
    this.age = age;
    this.sayHi = function() {
        alert(this.name)  
    }
}
// 創建一個對象per
var per = new Person();
console.log(per);

indexOf()方法

strings.indexOf(“目標字符串”):可返回某個指定的字符串值在字符串中首次出現的位置

var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world"));
/*
* 0
*-1
*6
 */

indexOf() 方法對大小寫敏感！:如果要檢索的字符串值沒有出現，則該方法返回 -1,而且索引值默認起始值爲0

Timing事件

setTimeout(function,milliseconds):等待指定的毫秒數後執行函數
setInterval(function,milliseconds):等同於setTimeout()，但在每個給定的時間間隔內重複執行該函數

var myVar = setInterval(myTimer, 3000);
 
function myTimer() {
    var d = new Date();
    console.log(d.getFullYear())
}
// setInterval在每隔3秒就打印一次當前的月份

clearTimeout(變量名) 方法停止執行 setTimeout() 中規定的函數。

<!--使用setTimeout等待執行函數，clearTimeout停止執行函數--->
<button onclick="myVar = setTimeout(myFunction, 3000)">試一試</button>

<button onclick="clearTimeout(myVar)">停止執行</button>

5.前端模塊化(node.js)

1.模塊暴露

我們編寫了一個hello.js文件，這個hello.js文件就是一個模塊，模塊的名字就是文件名（去掉.js後綴），所以hello.js文件就是名爲hello的模塊

'use strict';

var s = 'Hello';

function greet(name) {
    console.log(s + ', ' + name + '!');
}

module.exports = greet;

module.exports把函數greet作爲模塊的輸出暴露出去，這樣其他模塊就可以使用greet函數了

2.模塊引入

'use strict';

// 引入hello模塊:
var greet = require('./hello');

var s = 'Michael';

greet(s); // Hello, Michael!

3.多模塊暴露

我們不妨深入♂一下：將某個模塊暴露出來，並訪問該模塊內的多個函數

// hello.js
'use strict';
var s = "hello python";
function conn(name){
    console.log(s+','+name+'!');
    return(s+","+name+"!") 
}
function printer(n){
    let ab = [];
    if(n>=1){
        for(var i = 0;i<n;i++){
            ab.push(i)}
        console.log(ab)
    }else{
        console.log("輸入錯誤")
    }
}
// 將模塊暴露出來，以便於其它模塊調用，採用對象的形式
module.exports ={conn:conn,printer:printer};

然後我們來訪問hello模塊，來玩♂一♀玩(注意模塊裏的函數調用方式)

// 主模塊mian.js
'use strict';
var greet = require('./hello');
var s = "chd";
greet.conn(s);
greet.printer(10)