javaScript基础

浏览器对象

window

window对象充当全局作用域和浏览器窗口。

console.log(window.innerWidth);     #内部宽度,出去菜单栏、工具栏、边框等元素
console.log(window.innerHeight);        #内部高度
console.log(window.outerWidth);     #外宽
console.log(window.outerHeight);        #外高
var i=1;        #全局变量，等价window.i=1

navigator

navagator对象表示浏览器的信息，常用属性包括：

navagator.appName:浏览器名称
navigator.appVersion:浏览器版本
navigator.language:浏览器设置的语言
navigator.platform:操作系统类型
navigator.userAgent: 浏览器设定的user-Agent字符串。

screen

screen对象表示屏幕的信息，常用的属性有：

screen.屏幕宽度，像素
screen.height:屏幕高度

location

location对象表示当前页面的URL信息。

// URL：http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.href;  //http://www.example.com:8080/path/index.html?a=1&b=2#TOP
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.assign("http://www.baidu.com")  //加载新页面
location.reload()       //重新加载页面

confire函数

if(confirm('are you sure!')){   //弹出对话框，让用户选择是否，返回布尔值
    location.reload();
}

document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>study coding</title>
</head>
<body>
    <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>
</body>
</html>

js可以动态改变DOM节点、属性、样式，以上面的html为例：

document.title="努力学习JavaScript";
var menu=document.getElementById("drink-menu");//通过id定位元素
var drinks=document.getElementsByTagName("dt");//通过标签名，返回数组

cookie是服务器发送的key-value标识符，用来标识用户或者网站的一些设置，如页面显示的语言。浏览器访问该网站会附上这个cookie。

为了避免安全隐患，服务器在设置cookie时可以使用httpOnly来禁止js代码读取cookie。

操作DOM

document.getElementById()可以直接定位到唯一的一个DOM节点。document.getElementsByTagName和document.getElementsByClassName()总是返回一组节点，可以先定位父节点，再从父节点开始选择。

//返回id为'test'的节点
var test=document.getElementById('test');

//先定位ID为'test-table'的节点，再返回其内部所有tr节点
var trs=document.getElementById("test-table").getElementsByTagName('tr');

//先定位ID为'test-div'的节点，再返回内部所有class包含red的节点
var reds = document.getElementById('test-div').getElementsByClassName('red')

//获取节点test下第一个，最后一个节点
var first=test.firstElementChild;
var last=test.lastElementChild;

更新DOM

innerHTML属性设置或获取元素的html文本。innerText和textContent只是设置或获取元素的纯文本。

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop='2em';

插入DOM

<!-- 原HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var
    list = document.getElementById('list'),
    haskell=document.createElement('p');	//新建p标签
haskell.id = 'haskell';	//设置属性
haskell.innerText = 'Haskell';
list.appendChild(haskell);

<!-- js插入DOM后 HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

使用parentElement.insertBefore(newElement,refer),新元素会插到参考元素之前。

var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

循环一个节点的所有子阶段，可以迭代children属性实现。

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c=list.children[i]// 拿到第i个子节点
}

删除节点

获取该节点和它的父节点，然后，调用父节点的removeChild删除。

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent=self.parentElement;
// 删除:
var removed=parent.removeChild(self);
removed === self; // true

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

文件

HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

var fileInput = document.getElementById('test-image-file');

var file = fileInput.files[0]; // 获取File引用:

// 读取文件:
    var reader = new FileReader();
// 以DataURL的形式读取文件:
    reader.readAsDataURL(file);

reader.onload = function(e) {
        var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
    };

以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

回调

reader.onload = function(e) {
    // 当文件读取完成后，自动调用此函数:
};

异步调用实质就是写好时间处理函数，等事件发生时由浏览器触发调用函数，JS代码均为单线程。