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.width:屏幕宽度，像素
-
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树的根节点。
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代码均为单线程。
