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)