1.封裝ajax方法
'use strict'
// console.log('a');
/*********************封裝函數(shù)************************/
// Document.prototype.getByClassName = function(className){
// var allDomArr = Array.prototype.slice.call(document.getElementsByTagName('*'),0);
// // console.log(allDomArr);
// var filterArr = [];
// function dealClassName(dom){
// var reg = /\s+/g;
// var itemArr = dom.className.replace(reg, ' ').trim().split(' ');
// return itemArr;
// }
// allDomArr.forEach(function (ele, index) {
// var itemArr = dealClassName(ele);
// for(var i = 0; i < itemArr.length; i++) {
// if(className == itemArr[i]){
// filterArr.push(ele);
// break;
// }
// }
// })
// return filterArr;
// }
// console.log(document.getByClassName('demo'));
/********************ajax****************/
// form:
// method: get, post
// action: 服務(wù)器地址
// enctype: application/x-www-form-urlencoded(默認(rèn)值)(表示文件發(fā)送前編碼成字符格式)multipart/form-data(把文件變成文件上傳表單)
// ajax技術(shù)能局部獲取數(shù)據(jù)，還不刷新頁面、且異步獲取數(shù)據(jù)
// new XMLHttpRequest()可以創(chuàng)建ajax對(duì)象但I(xiàn)E不認(rèn)識(shí)
// newa ActiveXObject('Microsoft.XMLHTTP')主流瀏覽器創(chuàng)建ajax文檔
/*****************兼容性寫法**************************/
// 流程：
// 1.手機(jī)/電腦
// 2.app
// 3.商家 商品 地址
// 4.提交訂單 交錢
// 5.監(jiān)控 物流信息
// 6.拿到餐 處理掉
// 1.瀏覽器
// 2.Ajax對(duì)象
// 3.open('GEt', 'URL'，'true');
// 4.send('data');
// 5.onreadystatechange readyState==4//readyState有四個(gè)值（0：:未初始化，1：讀取中蜕依， 2：:已讀取妥衣， 3：交互中， 4：:完成status =（404 ： 文件沒找到益缠，用戶端錯(cuò)誤，200：成功基公， 500 ：服務(wù)器內(nèi)部錯(cuò)誤幅慌， 303 : 服務(wù)器錯(cuò)誤
// 6.callback
// var xml = null;
// if(window.XMLHttpRequest{
// xml = new XMLHttpRequest();
// }else{
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// xml.open('GET', 'getNews.php', true);
// xml.send();
// xml.onreadystatechange = function(){
// if(xml.readyState == 4){
// if(xml.status == 200){
// console.log('3333');
// }
// }
// }
function Ajax(method, url, flag, data, callback){
var app = null;
if(window.XMLHttpRequest){
app = new window.XMLHttpRequest();
}else{
app = new window.ActiveXObject('Microsoft.XMLHTTP');
}
method = method.toUpperCase();
if(method === 'GET'){
app.open(method, url + '?' + data, flag);
app.send();
}else if (method === 'POST'){
app.open(method, url, flag);
app.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
app.send(data);
}
app.onreadystatechange = function(){
if(app.readyState === 4){
if(app.status === 200){
callback(app.responseText);
}else{
alert('error');
}
}
}
}
/*************************************************/
// var aaa = 'username=aimee&age=18';
// function ajax(method, url, flag, data, callback) {
// var xml = null;
// if(window.XMLHttpRequest){
// xml = new XMLHttpRequest();
// }else {
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// if(method == 'GET') {
// xml.open(method, url + '?' + data, flag);
// xml.send();
// }else if(method == 'POST') {
// xml.open(method, url, flag);
// xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// xml.send(data);
// }
// xml.onreadystatechange = function () {
// if(xml.readyState == 4) {
// if(xml.status == 200) {
// callback(xml.responseText);
// }
// }
// }
// }
// function showData(data) {
// console.log(data)
// }
// function alertData(data) {
// alert(data);
// }
// ajax('GET', 'post.php', true, aaa, alertData);
2.js時(shí)間線
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--<script type="text/javascript" src="js-timeline-717.js" defer>
開啟異步加載外部文件
像名是defer值是defer的屬性我們可以縮寫
加載完成之后拿回來先不執(zhí)行，
1.直到dom文檔解析完成之后（是指domtree解析完成）
2.它只有IE能用
3.它里面也可以寫東西轰豆，在引入外部文件的情況下(ie6之前)
</script>-->
<!-- // <script type="text/javascript" src="js-timeline-717.js" async>
開啟異步加載外部文件
1.它什么時(shí)候加載完成胰伍，什么時(shí)候執(zhí)行
2.它是主流瀏覽器所采用的，也是w3c標(biāo)準(zhǔn)所用的
3.它里面不能寫腳本
</script> -->
<!-- 以上兩個(gè)都不阻塞頁面 酸休，但不適合做兼容性寫法骂租，因此這兩個(gè)都不用-->
</head>
<body>
<!-- dom tree css tree
dom css結(jié)合形成
rander tree(渲染樹)
-->
<!-- <img src="" alt=""> 先把標(biāo)簽塞到dom 樹，然后異步加載圖片-->
<!-- 實(shí)現(xiàn)按需加載-->
<style type="text/css">
.div{
display: inline-block;
width: 60px;
height: 30px;
border-top:0px;
border-bottom:solid 1px black;
border-left:0px;
border-right:solid 1px black;
}
</style>
<div class="div"align='center'style=""valign="top">name</div>
<script>
var obj = {
'number': '序號(hào)',
'teamname': '隊(duì)名',
'name':'姓名'
}
oDiv = getElementsByTagName('div');
console.log(odiv.value);
// obj1 = new object(){
// }
// var oBtn = document.getElementsByTagName('button')[0];
// oBtn.onclick = function(){
// var oScript = document.createElement('script');
// oScript.src="js-timeline-717.js";
// document.body.appendChild(oScript);
// }
// var oBtn = document.getElementsByTagName('button')[0];
// oBtn.onclick = function(){
// canLoad();
// }
// function canLoad(){
// var oScript = document.createElement('script');
// oScript.src="js-timeline-717.js";
// document.body.appendChild(oScript);
// setInterval(function(){
// test();
// },(1000))
// }
// canLoad();
// function canLoad(url,callback){ //異步加載封裝函數(shù)
// var oScript = document.createElement('script');
// oScript.src=url;
// if(oScript.readyState){
// oScript.onreadystatechange = function(){
// oScript.onreadystatechange = null;
// if(oScript.readyState == "complete"||oScript.readyState == 'loaded'){
// obj[callback]();
// }
// }
// }else{
// oScript.onload = function(){ //IE沒有onload斑司，但I(xiàn)E有readystate ： loading complete||loaded
// oScript.onload = null;
// obj[callback]();
// }
// }
// document.body.appendChild(oScript);
// }
// canLoad('js-timeline-717.js','test');
// js加載時(shí)間線渗饮，目的提高頁面加載效率
// 給他一個(gè)監(jiān)聽
// document.onreadystatechange = function(){
// console.log(document.readyState)
// }
// document.addEventListener('DOMContentLoaded',function(){
// console.log('DOMContentLoaded');
// })
</script>
</body>
</html>
//js代碼
'use strict'
// // console.log('a');
// // Json是一種數(shù)據(jù)格式,屬性名必須用雙引號(hào)
// var obj = {"name" : "byron","age" :18};
// //這種格式是為了規(guī)范標(biāo)準(zhǔn)前后端
// // 數(shù)據(jù)包以字符串或者數(shù)字傳送
// // ajax async javascript and xml 用javascript異步的獲取數(shù)據(jù)格式
// var obj = {"name" : "byron","age" :18};
// console.log(JSON.stringify(obj));//把對(duì)象封裝成字符串
// var obj = '{"name" : "byron","age" :18}';
// console.log(JSON.parse(obj));//把字符串還原為對(duì)象
// 異步加載js
var obj = {
test:function(){
console.log('js-timeline-717.js')
}
}
'use strict'
// console.log('a');
// BOM: Browser Object Model
//window對(duì)象
// 集合
// iframe也可以引用窗口
// 方法
// alert()
// clearInterval()
// clearTimeout()
// open(URL/name/features/replace)
// close()
// confirm()//給出彈窗，返回布爾值
// print()//打印頁面
// prompt()//顯示可提示用戶輸入的對(duì)話框
// resizeTo(width,heigh)//用于設(shè)置寬高
// scrollBy()
// scrollTo()
// 屬性
// closed
// function scrollWindow()
// {
// window.scrollTo(1000,500)
// }
// navigator
// history
// location :hash host herf pathname port protocol search
// Doctype渲染模式
// lable
// 標(biāo)簽上面天生就有的叫特性宿刮，沒有的叫做屬性
// setAttribute('key', 'value')互站；可以強(qiáng)制給標(biāo)簽加屬性
// 圖片預(yù)加載
// var oImg = new Image();
// oImg.src = 'xxx.jpg';
// oImg.onLoad = function(){
// document.body.appendChild(oImg);
// }
// 圖片懶加載：需要才加載
// Math.random();生成一個(gè)[0，1）的隨機(jī)數(shù)
// var oUl = document.getElementsByTagName('ul')[0];
// for(var i = 0; i < 1000; i++){
// var oLi = document.createElement('li');
// oUl.appendChild(oLi);
// }
// console.log('a');
var oUl = document.getElementsByTagName('ul')[0];
var oFrag = document.createDocumentFragment();//創(chuàng)建文檔碎片
for(var i = 0; i < 1000; i++){
// debugger;//可以這樣設(shè)置斷點(diǎn)找錯(cuò)誤僵缺，也可以在瀏覽器里面設(shè)置斷點(diǎn)
var oLi = document.createElement('li');
oFrag.appendChild(oLi);//用文檔碎片先裝li
}
oUl.appendChild(oFrag);//將文檔碎片插ul中
// cdn緩存服務(wù)器胡桃，解決網(wǎng)絡(luò)擁塞問題，它可以實(shí)現(xiàn)瀏覽器的緩存
3.前端基礎(chǔ)（h,p,ul,ol,li,img,)
<!-- <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>This is paragraph</p>
<h1>標(biāo)題</h1>
<h2>標(biāo)題</h2>
<h3>標(biāo)題</h3>
<h4>標(biāo)題</h4>
<h5>標(biāo)題</h5>
<h6>標(biāo)題</h6>
<strong>
<em>斜體</em>
</strong>
<del>188</del>
<div style="width:100px;height:100px"></div>
html編碼
   1 空格
<>
a<br>換行b
有序列表
大家喜歡的marvel英雄
orderlist
<ol type="a" reversed="reverded"start="5">
<li>精鋼狼</li>
<li> 變形精鋼 </li>
<li> 美國隊(duì)長 </li>
<li> 23 </li>
square
disc
</ol>
<ul type="circle">
<li>精鋼狼</li>
<li> 變形精鋼 </li>
<li> 美國隊(duì)長 </li>
<li> 用于功能子項(xiàng)的編寫 </li>
list item
</ul>
注釋的作用：1.備注 2.調(diào)錯(cuò)
快捷鍵ctri+?
<img src="網(wǎng)址" alt="這是xx" title="">
1.網(wǎng)上的url
2.相對(duì)地址 (在同一文件夾下磕潮，可以略寫)
3.絕度地址（全寫）
alt 圖片占位符
title 圖片提示符
<!-- 英語趣配音 英語流利說 -->
<!-- <a href="" target="-">www.baidu.com</a>超文本引用 -->
<!-- 1.超級(jí)鏈接 a的縮寫anchor
2.錨點(diǎn)
3.發(fā)郵件/打電話
4.協(xié)議限定符-->
<!-- <div id="one">愛心</div>
<br>
<a href="#one">123</a>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
div+css
</body>
</html> --> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul>li{
float: left;
margin: 0 8px;
padding: 0 5px;
font-weight:bold;
font-size: 14px;
height: 26px;
line-height: 26px;
color: #f40;
}
ul>li:hover{
background-color: #f40;
color: #fff;
border-radius: 15px;
}
</style>
</head>
<body>
<!-- <div style="width:100px;height:100px;background-color:yellow;">a 2<3>1</div>
-->
<!-- <ul type="square" >
<li>天貓</li>
<li>聚劃算</li>
<li>天貓超市</li>
</ul> -->
<!-- /*<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul>li{
float: left;
margin: 0 8px;
font-weight:bold;
font-size: 14px;
height: 26px;
line-height: 26px;
color: #f40;
}
</style>*/ -->
<!--
a<br>b換行 -->
<!-- <img src="F:\相冊(cè)\thumb\IMG_20160916_095010.jpg.JPG" alt="這是湖面" title="湖面"> -->
<!-- <a target="_blank">www.baidu.com</a> -->
<a href="javascript:while(true){alert('你想多了吧')}">高清美圖</a>
</body>
</html>
4.前端基礎(chǔ)(css選擇器,權(quán)重,select,form)
/*span{
width:100px;
height:100px;
background-color: yellow;
}
#only {width:200px;
height:200px;
background-color: red;
}*/
div.demo{
display: inline-block;
background-color: red;
background-image: url("C:\Users\BYRON\Desktop\成績單.png");
}
/*s*/
/*div{
width:100px;
height:100px;
background-color:yellow;
}*/
/*span{
width:100px;
}*/
/* *{
background-color:black;
width:400px;
height:400px;
}*/
#only{
width:250px;
height:250px;
background-color:blue;
}
/*優(yōu)先級(jí):*+!important>行間樣式>id>class>標(biāo)簽>通配符
但id與class不能疊加
div里層層遞減
一個(gè)人可以對(duì)應(yīng)幾個(gè)class--.*/
/* 權(quán)重：
*——0
tag——1
class——10
id——100
行間——1000
翠胰！important——無限大*/
/*西部世界
黑鏡*/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- <form method="get" action="地址">
<!--組件 數(shù)據(jù)名 數(shù)據(jù)值 -->
<!-- <p>賬戶：<input type="text" name="username"></p>
<p>密碼：<input type="password" name="password"></p>
<input type="submit">
1.蘋果<input type="radio" name="fruit" value="蘋果"> --><!-- 單選框 --><!-- name值相同 --><!-- checkbox復(fù)選框 -->
<!-- 2.西游<input type="radio" name="fruit" >
3.茄子<input type="radio" name="fruit">
<input type="submit">
<h1>chose your sex</h1>
<p>female:<input type="radio" name="sex" value="female"checked="checked"></p>
<p> male:<input type="radio" name="sex" value="male"></p>
<input type="submit"value="登錄">
<input type="text" name="username" style="color:#999" value="請(qǐng)輸入關(guān)鍵字" onfocus="if(this.value==''){this.value='請(qǐng)輸入關(guān)鍵字'懊纳；this.style.color='#424242'}" onblur="if(this.value==''）{this.value='請(qǐng)輸入關(guān)鍵字'">
<h1>PROVINCE</h1>
<select name="province">
<option>黑龍江</option>
<option>吉林</option>
<option>遼寧</option
</select>
</form> -->
<!-- css的引入 -->
<!-- 1.行間樣式 -->
<!-- 2.頁面級(jí)css -->
<!-- 3.外部css文件 -->
<!-- 4.@import -->
<!-- 1.id選擇器 -->
<!-- 2.class選擇器 -->
<!-- 3.標(biāo)簽選擇器 -->
<!-- 4.通配符選擇器 -->
<div id="only">123</div>
<!-- <div id="only1">234</div>
darryRing -->
<div class="demo">123</div>
<!-- 1.優(yōu)先級(jí)
2.標(biāo)簽分類 -->
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<form method="get" action="">
<p>
username:<input type="text" name="username" style="color:#999" onfocus="if(this.value=='請(qǐng)輸入關(guān)鍵字'){this.value=''; this.style.color='#424242';}"onblur="if(this.value==''){this.value='請(qǐng)輸入關(guān)鍵字';this.style.color='#999'}"value="請(qǐng)輸入關(guān)鍵字">
</p>
<p>
password:<input type="password" name="password">
</p>
<h6>choose your city!!!</h6>
<select name="province">
<option value="bei">北</option>
<option value="shang">上</option>
<option value="guang">廣</option>
<option value="sheng">深</option>
</select>
<input type="submit" value="提交">
</form>
<!-- 1.行間引入
<div style="width:100px;height:100px;background-color:red;">123456789</div> -->
<!-- 2.頁面級(jí)css
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div>5616</div> -->
<!-- 3.外部引入
<link rel="stylesheet" type="text/css" href="lesson3.css">-->
<!-- 選擇器
1.id
2.class
3.標(biāo)簽
4.通配符*
5.父子/派生
直接子元素
css88參考手冊(cè)
例子：
<div id="only"class="only1">
<span>159753</span>
</div>
<div class="only1">
<span>159753</span>
</div>-->
</body>
</html>
5.前端基礎(chǔ)(其余所有標(biāo)簽)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson4.css">
</head>
<body>
<div>123</div>
<span>123s</span>
<div>叫你撒看</div>
<!-- <div>塊級(jí)元素：
1.可以設(shè)置寬和高
2.獨(dú)自占據(jù)一行
div p ol li ul form address
行級(jí)元素：
1.不能設(shè)置寬和高
2.根據(jù)自身內(nèi)容決定占據(jù)空間大小
塊級(jí)元素列表:
<address>定義地址
<caption>定義表格標(biāo)題
<dd>定義列表中定義條目
<div>定義文檔中的分區(qū)或節(jié)
<dl>定義列表
<dt>定義列表中的項(xiàng)目
<fieldset>定義一個(gè)框架集
<form>創(chuàng)建 HTML 表單
<h1>定義最大的標(biāo)題
<h2>定義副標(biāo)題
<h3>定義標(biāo)題
<h4>定義標(biāo)題
<h5>定義標(biāo)題
<h6>定義最小的標(biāo)題
<hr>創(chuàng)建一條水平線
<legend>元素為
<fieldset>元素定義標(biāo)題
<li>標(biāo)簽定義列表項(xiàng)目
<noframes>為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內(nèi)部
<noscript>定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容
<ol>定義有序列表
<ul>定義無序列表
<p>標(biāo)簽定義段落
<pre>定義預(yù)格式化的文本
<table>標(biāo)簽定義 HTML 表格
<tbody>標(biāo)簽表格主體（正文）
<td>表格中的標(biāo)準(zhǔn)單元格
<tfoot>定義表格的頁腳（腳注或表注）
<th>定義表頭單元格
<thead>標(biāo)簽定義表格的表頭
<tr>定義表格中的行
行級(jí)塊元素
1.可以設(shè)置寬高
2.根據(jù)自身內(nèi)容決定占據(jù)空間大小
img input
行內(nèi)元素列表:
<a>標(biāo)簽可定義錨
<abbr>表示一個(gè)縮寫形式
<acronym>定義只取首字母縮寫
<b>字體加粗
<bdo>可覆蓋默認(rèn)的文本方向
<big>大號(hào)字體加粗
<br>換行
<cite>引用進(jìn)行定義
<code>定義計(jì)算機(jī)代碼文本
<dfn>定義一個(gè)定義項(xiàng)目
<em>定義為強(qiáng)調(diào)的內(nèi)容
<i>斜體文本效果
<img>向網(wǎng)頁中嵌入一幅圖像
<input>輸入框
<kbd>定義鍵盤文本
<label>標(biāo)簽為
<input> 元素定義標(biāo)注（標(biāo)記）
<q>定義短的引用
<samp>定義樣本文本
<select>創(chuàng)建單選或多選菜單
<small>呈現(xiàn)小號(hào)字體效果
<span>組合文檔中的行內(nèi)元素
<strong>語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容
<sub>定義下標(biāo)文本
<sup>定義上標(biāo)文本
<textarea>多行的文本輸入控件
<tt>打字機(jī)或者等寬的文本效果
<var>定義變量
盒模型
</div> -->
</body>
</html>
6.前端基礎(chǔ)(position定位,bfc,文檔流)
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
<!--
bfc
標(biāo)準(zhǔn)文檔流布局
層模型
position:absolution;
1.被抽離更高的層面上了亡容，后面元素看不到
2.他以最近離他有定位的父級(jí)進(jìn)行定位嗤疯，如果沒有以瀏覽器邊框?yàn)樽鴺?biāo)軸定位
3.Z-index提層
相對(duì)定位
position:relative;
固定定位 position:fixed;
1.脫離原來位置進(jìn)行定位
2.一瀏覽器邊框進(jìn)行定位
經(jīng)典布局：三列布局
-->
<div class="q">
<div class="w">djfk</div>
</div>
</body>
</html>
7.javascript基礎(chǔ)語法
// var a=123;
// document.write(a);
// var num=1&&2;
// 1<2&&document.write('舉案說法你看得見')
// var score = parseInt( window.prompt('input'));
// if(score>90&&score<=100){
// document.write('alibaba');
// }
// if(score>80&&score<=90){
// document.write('tencent')
// }
// if(score>70&&score<=80){
// document.write('新浪')
// }
// if(score>60&&score<=70){
// document.write('蘑菇街')
// }
// if(score<=60){
// document.write('shit!!!');
// }
// 比較三個(gè)數(shù)的大小：
// var a = parseInt(window.prompt('input'));
// var b = parseInt(window.prompt('input'));
// var c = parseInt(window.prompt('input'));
// if(a>b) {
// if(a>c){
// document.write(a);
// }else{
// document.write(c);
// }
// }else{
// if(b>c){
// document.write(b);
// }else{
// document.write(c);
// }
// }
// var count=0;
// for(var i=0;i<10;i++){
// count+=i;
// }
// document.write(count);
// for(i=0;i<100;i++){
// document.write(i+' ')
// }
// var i=100;
// for(;i--;){
// document.write(i+" ")
// }
// for(var i=0;i<100;i++){
// if(i%2!=0&&i%3!=0){
// document.write(i+" ")
// }
// }
// var count=0;
// for(var i=0;i<1000;i++){
// count+=i;
// if(count>=200){
// document.write(i);
// i=2000;
// }
// }
// never-ending loop(無限死循環(huán))
// 作業(yè)
// 1.計(jì)算2的n次冪闺兢，n可輸入茂缚，n為自然數(shù)。
// var num = parseInt(window.prompt('input'));
// var mi=1;
// if(num>0){
// for(var i=1;i<=num;i++){
// count*=2;
// }
// document.write(count)
// }else {
// document.write('1');
// }
// 2.計(jì)算n的階乘屋谭，n可輸入
// var num = parseInt(window.prompt('input'));
// var jiecheng=1;
// if(num>0){
// for(var i=1;i<=num;i++){
// jiecheng*=i;
// }
// document.write(jiecheng)
// }else {
// document.write('1');
// }
// 3.著名的斐波那契額數(shù)列
// var n = parseInt(window.prompt('input'));
// var f1=1;
// var f2=1;
// var temp=1;
// for (var i=3;i<=n+1;i++){
// var temp = f2;
// f2 = f1 + f2;
// f1 = temp;
// }
// document.write(temp);
// 1 1 2 3 5 8 13 21
// var n = prompt("請(qǐng)輸入數(shù)字n")
// var num1 = 1;
// var num2 = 1;
// for(var i = 3; i <= n; i++) {
// var temp = num2;
// num2 = num1 + num2;
// num1 = temp;
// }
// alert(num2);
// 4.編寫一個(gè)程序脚囊，輸入一個(gè)三位數(shù)的正整數(shù)，輸出時(shí)反向輸出
// var num = parseInt(window.prompt('input'));
// var b=num%1000;
// var s=num%100;
// var g=num%10;
// document.write(g*100+(s-g)+(b-s)/100);
// 5.輸入a,b,c三個(gè)數(shù)字桐磁，打印出最大的悔耘。
// var a = parseInt(window.prompt('input'));
// var b = parseInt(window.prompt('input'));
// var c = parseInt(window.prompt('input'));
// if(a>b) {
// if(a>c){
// document.write(a);
// }else{
// document.write(c);
// }
// }else{
// if(b>c){
// document.write(b);
// }else{
// document.write(c);
// }
// }
// 6.打印出100以內(nèi)的質(zhì)數(shù)
// var count=0;
// for( var i=1;i<=100;i++){
// for( var j = 0 ;j<=i;j++){
// if(i%j==0){
// count++;
// }
// }
// if(count==2){
// document.write(i+" ");
// }
// count=0;
// }
// var count=0;
// for( var i=2;i<=100;i++){
// for( var j = 1 ;j<=Math.sqrt(i);j++){
// if(i%j==0){
// count++;
// }
// }
// if(count==1){
// document.write(i+" ");
// }
// count=0;
// }
<!-- 塊級(jí)元素可以放塊級(jí)元素
p子元素不能放div -->
<!-- ASCII
65 A 66 B
97 a 98 b
'2'>'10'
unfined=null!=0;
邏輯詞：
$$規(guī)則：
1.先判斷第一個(gè)表達(dá)式的運(yùn)算結(jié)果，然后往后看
2.如果第一位運(yùn)算結(jié)果為假我擂，則返回第一位結(jié)果衬以。
實(shí)例：
1.用在if語句
2.用作短路語句
||規(guī)則：
找到真為止
實(shí)例：
1.if
2.后續(xù)要用到e在，在IE瀏覽器中e沒有值校摩，在google chrome下有值看峻，用于瀏覽器的兼容性
!
1.把后面的值先轉(zhuǎn)換成布爾值，然后取反
2.Ｑ梅浴互妓！把字符串轉(zhuǎn)換成布爾值
if語句：if(條件成立){執(zhí)行的代碼}else{不成立執(zhí)行的代碼};
for循環(huán)執(zhí)行順序
8.javascript數(shù)據(jù)類型
// var s=4;
// document.write(s);
// 課堂記錄
// switch (){
// case 1:
// document.write();
// break;
// case 2:
// document.write();
// break;
// default:
// document.write(error);
// }
// 不受值類型約束
// break用于跳出循環(huán)語句
// continue結(jié)束本次循環(huán)
// 數(shù)組 對(duì)象
// var a="01010101";
// var b=Number(null);
// document.write(b);
// var c = parseInt("a" , 2);
// var d = c.toString(16);
// document.write(d);
// for(var i=0;i<10;i++){
// if(i%5==0){
// continue;
// }
// document.write(i);
// }
// var arr=[1,2,3,4,5];
// document.write(arr);
// document.write(arr.length);
// var obj={
// lastname : 'deng',
// age : 50,
// sex : "undefined",
// wife : { lastname : "xiaobao"}
// }
// obj.lastname="xiaoddeng";
// var num=NaN;
// document.write(typeof(num));
// var num=parseInt('1234a');
// console.log(num);
// 作業(yè)：
// var num=10101010;
// console.log(alert(typeof(num)));
// console.log(alert(typeof(undefined)));
// console.log(alert(typeof(NaN)));
// alert(typeof(null));object
// var a="123abc"
// alert(typeof(+a));number
// alert(typeof(!!a));boolean
// alert(typeof(a+''));toString
// alert(1=='1');true
// alert(NaN==NaN);false
// alert(NaN==undefined);false
// alert(11=='11');true
// alert(1==='1');false
// alert(parseInt("123abc"));123
// var num = 123123.345789;
// alert(num.toFixed(3));123123.346;
// alert(typeof(typeof(a)));String
9.javascript函數(shù),預(yù)編譯
// function bar(){
// return foo;
// foo=10;
// function foo(){}
// var foo=11;
// }
// console.log(bar());
// console.log(bar());
// function bar(){
// foo = 10;
// function foo(){}
// var foo = 11;
// return foo;
// }
// function fn(a){
// var a=123;
// function a(){}
// var b = function (){}
// function d () {}
// }
// fn(1);
//第一二步
//var AO = {
// a : undefined,
// b : undefined
// }
// 第三步
//var AO = {
// a : 1,
// b : undefined
// }
// 第四步
//var AO = {
// a : function a () {},
// b : undefined，
// d : function d () {}
// }
// 5.1lesson9
// 預(yù)編譯
// 在執(zhí)行前坤塞，形成ao對(duì)象
// Ao{
// }
// 找形參和變量聲明
// a : undefind,
// b : undefind,
// 執(zhí)行期上下文
// 作用域解釋
// 閉包
// 累加器
// function demo(){
// var count = 0;
// function a(){
// count ++;
// console.log(count);
// }
// return a;
// }
// var add = demo();
// add();
// add();
// add();
// add();
// function eater () {
// var food = "";
// var obj = {
// eat : function(){
// if(food){
// console.log('I am eating ' + food);
// food = "";
// }else{
// console.log("empty")
// }
// },
// pushFood : function (myFood){
// food = myFood;
// }
// }
// return obj;
// }
// var eater1 = eater();
// eater1.pushFood('apple');
// eater1.eat();
// eater1.eat();
// 立即執(zhí)行函數(shù)：
// （特點(diǎn)：執(zhí)行完就再也找不到了,有初始化的作用）
// var num = (function b (a,b){
// console.log('a');
// return a + b
// }(1,2));
// num=3
// 能被執(zhí)行的一定是表達(dá)式
// 函數(shù)只能被定義或者被執(zhí)行冯勉，但只能實(shí)現(xiàn)一個(gè)
// 前面加一元正負(fù)運(yùn)算符（除*/外）
// (function (){
// console.log('a');
// }())
//w3c提倡的形式
// function test (){
// var arr =[];
// for (var i = 0; i < 10; i ++){
// arr[i] = function(){
// console.log(i);
// }
// }
// return arr
// }
// var myArr = test();
// for (var j = 0; j < 10; j ++){
// myArr[j]();
// }
// function test (){
// var arr =[];
// for (var i = 0; i < 10; i ++){
// (function (j){
// arr[j] = function(){
// console.log(j);
// }
// }(i));
// }
// return arr
// }
// var myArr = test();
// for (var j = 0; j < 10; j ++){
// myArr[j]();
// }
10.對(duì)象，及增刪改查
// 對(duì)象
// var mrDeng = {
// lastName : "Deng",
// firstName : "baobao",
// age : 36,
// sex : "male",
// health : undefined,
// wife : {
// name : "xiaoliu"
// },
// card : ['visa','master','unionpay'],
// girlfriend :{
// name : 'xiaowang'
// },
// smoke : function(){
// console.log('I am smoking, cool!~~~');
// }
// }
// 增摹芙，刪灼狰，改，查
// 對(duì)象的創(chuàng)建方法
// 1.對(duì)象字面量/對(duì)象直接量 plain Object
// var obj = {
// }
// 2.構(gòu)造函數(shù) （1.系統(tǒng)自帶2.人工自定義）
// var obj = new Object();
// Date ();
// function Car(color){
// 隱式創(chuàng)建 var this = {}
// this.color = color;
// this.heigth = 1400;
// this.lang = 4950;
// this.width = 1900;
// this.wheel = 4;
// this.health = 100;
// this.run = function(){
// this.health --;
// return this;
// }
// }
// var car = new Car('red');
// var car1 = new Car('green');
// function Student(name,sex, age){
// this.name = name;
// this.sex = sex;
// this,age = age;
// this.school = 'duyi';
// this.grade = '9qi';
// this.teacher = 'prof.ji';
// }
// 小駝峰式/大駝峰式（命名方法）
// 1.用new就會(huì)隱式創(chuàng)建 var this = {}
// 2.封裝
// 3.后面會(huì)返回this
// 包裝類 ：目的為了不報(bào)錯(cuò)
// 原始值 沒屬性和方法(原始值不可更改)
// 引用值
// var str = 'abcd';
// //new String('abcd').length -->4
// str.length;
// //delete
// 只有表達(dá)式能執(zhí)行
// 當(dāng)一個(gè)表達(dá)式被執(zhí)行之后瘫辩，它就會(huì)失去對(duì)原有函數(shù)的引用
// 解釋伏嗜，動(dòng)態(tài) pathy腳本類語言
// 每次執(zhí)行完，就會(huì)消失
// 作業(yè)
// 1.
// a = 100;
// function demo(e) {
// function e() {}
// arguments[0] = 2;
// document.write(e + " ");
// if(a) {
// var b = 123;
// function c() {
// // 豬都能做出來
// }
// }
// var c;
// a = 10;
// var a;
// document.write(b + " ");
// f = 123;
// document.write(c + " ");
// document.write(a + " ");
// }
// var a;
// demo(1);
// document.write(a + " ");
// document.write(f + " ");
// 2.
// var str = false + 1;
// document.write(str);
// var demo = false == 1;
// document.write(demo);
// if(typeof(a)&&-true + (+undefined) + ""){
// document.write('基礎(chǔ)扎實(shí)');
// }
// if(11 + "11" * 2 == 33) {
// document.write('基礎(chǔ)扎實(shí)');
// }
// !!" " + !!"" - !!false||document.write('你覺得能打印伐厌，你就是豬');
// lesson12
// 大樣本隨機(jī)對(duì)照雙盲測(cè)試
// 對(duì)象 object 讓存儲(chǔ)更清晰，更直白
// 存放方法和屬性
// 可以執(zhí)行的操作增刪改查
// var mrDeng = {
// name : "deng",
// age : 35,
// sex : "male",
// son : "xiaodeng",
// wife : {name : 'nvwang'},
// MyName : function() {
// console.log('we are human!');
// }
// }
// delete mrDeng.age
// plainobject 對(duì)象字面量/對(duì)象直接量
// 構(gòu)造函數(shù) 工廠
// var obj = new object();
// 自定義構(gòu)造函數(shù)（大駝峰式）
// function Person() {}
// var person = new Person();
// 可以通過傳遞參數(shù)改變
// 系統(tǒng)內(nèi)部原理
// 原始值不能有屬性不能有方法
// 包裝類
// 當(dāng)訪問值時(shí)系統(tǒng)會(huì)構(gòu)造一個(gè)對(duì)象然后銷毀
// String 有長度
// function Person(name, age, sex){
// this.name
// }
// 改變this指向裸影，參數(shù)列表不同
11.繼承(圣杯模式)
// 圣杯模式：
// 第一種
// var inherit = (function () {
// var F = function () {};
// return function (Origin, target){
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// }())
// 第二種
// function inherit(Origin,Target){
// function F(){};
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
12.函數(shù)原型挣轨、原型鏈
// 原型
// Person.prototype = {
// abc = 123
// }
// 這個(gè)屬性天然就有
// 對(duì)象 有屬 性，有方法
// 一切皆對(duì)象5
// 原型定義 ：原型是function對(duì)象的一個(gè)屬性
// 轩猩，它定義了構(gòu)造函數(shù)制造出的對(duì)象的公共祖先卷扮。
// 通過該構(gòu)造函數(shù)產(chǎn)生的對(duì)象荡澎，可以繼承該原型的屬性和方法。
// 原型也是對(duì)象
// 增
// 改 不能通過改變自己而改變?cè)?// 但可以通過改變?cè)透淖儍鹤拥膶傩?// 刪 .detele
// 查
// Person.prototype.abc = '123';
// function Person(){
// this.name = 'laodeng';
// this.sex = 'male'
// }
// var person = new Person();
// var person1 = new Person();
// Person.prototype.LastName = 'yinxuan';
// Person.prototype.sex = 'female';
// 優(yōu)點(diǎn)1：可以利用原型特點(diǎn)和概念晤锹，提取共有屬性
// 優(yōu)化前
// function Car(color){
// this.height = 1400;
// this.width = 1900;
// this.length = 4900;
// this.color = color;
// this.name = "BMW";
// }
// var car = new Car('red');
// var car1 = new Car('green');
// 代碼重復(fù)較多摩幔，效率較低
// 優(yōu)化后
// Car.prototype.height = 1400;
// Car.prototype.width = 1900;
// Car.prototype.length = 4900;
// Car.prototype.name = "BMW";
// function Car(color){
// //var this = {
// // __proto__ : Car.prototype
// //}
// this.color = color;
// }
// var car = new Car('red');
// var car1 = new Car('green');
// Person.prototype.lastName = "Cong";
// function Person(){
// }
// var person = new Person();
// var obj = {
// lastName : "Luo"
// }
// 4.constructor 建筑物 構(gòu)造器
// var person2 = new person.constructor();
// 原型鏈
//一個(gè)對(duì)象查看一個(gè)屬性，如果這個(gè)對(duì)象上面沒有這個(gè)
//屬性鞭铆，那么系統(tǒng)就會(huì)沿著這個(gè)對(duì)象的————proto————去繼續(xù)找這個(gè)屬性或衡，
//而且，基本每個(gè)對(duì)象都有————proto————
// 原型上面可以有原型
// Grand.prototype.lastName = "Ji";
// function Grand(){
// }
// var grand = new Grand();
// Father. prototype = grand;
// function Father(){
// }
// function Person(){
// }
// var person = new Person();
// var father = new Father();
// Son.prototype = fatrer;
// 絕大多數(shù)對(duì)象都繼承自object.prototype
// javascript 里面絕大多數(shù)對(duì)象都繼承自object.prototype
// var demo = {
// name : '123'
// }
// var obj = Object.create(null);
// document.write(demo.toString());
// obj.toString = function(){
// return "他可以有toString屬性"
// }
// document.write(obj);
// document.write(123);
// document.write({});
// document.write([1,3,5,3,6]);
// document.write("abc");
// Object.prototype.toString.call(123);
// 目的把數(shù)字文本化展現(xiàn)出來
// 做題 （用友筆試題）
// display : none;別展示出來车遂，能讓元素徹底隱藏
// visibility : false; 含蓄的隱藏
// a標(biāo)簽里面不能包含a標(biāo)簽
// div里面不能包含p標(biāo)簽
// parseInt用于截?cái)嘧址械姆菙?shù)字部分
// 引用值比的是地址
13.this
// document.write(123);
// function Person(){
// this.name = 'peter';
// this.age = 23;
// }
// var person = new Person();
// var obj = {
// sex : "female"
// }
// Person.call(obj);//call 改變了this的指向
// function Person(name, age){
// this.name = name;
// this.age = age;
// }
// var person = new Person();
// var obj = {
// sex : "female"
// }
// Person.call(obj, 'Byron', 22);
//用途:改變this指向封断，傳參列表不同
// function Person(name, age, sex){
// this.name = name;
// this.age = age;
// this.sex = sex;
// }
// function Student(name, age, sex, grade, teacher){
// Person.call(this, name, age, sex);
// this.grade = grade;
// this.teacher = teacher;
// }
// var student = new Student('Byron', 20, 'male', 100, 'Ji');
//apply的用法和call類似，不過它里面只能傳除this之外的一個(gè)參數(shù)舶担，
//所以如果要傳多個(gè)參數(shù)時(shí)坡疼，可以采用數(shù)組的方法
//上面的這個(gè)等價(jià)于下面
// function Person(name, age, sex){
// this.name = name;
// this.age = age;
// this.sex = sex;
// }
// function Student(name, age, sex, grade, teacher){
// Person.apply(this, [name, age, sex]);
// this.grade = grade;
// this.teacher = teacher;
// }
// var student = new Student('Byron', 20, 'male', 100, 'Ji');
// 共享原型
// Person.prototype.lastName = "Byron";
// function Person(){
// }
// Son.prototype = Person.prototype
// function Son(){
// }
// var son = new Son();
//A構(gòu)造函數(shù)， 想繼承衣陶， B構(gòu)造函數(shù)的原型
//共享原型的方式
// function inherit(Origin, Target){
// Target.prototype = Origin.prototype;
// }
// Person.prototype.lastName = 'Byron';
// function Person(){
// }
// function Son(){
// }
// // 圣杯模式
//1.
// function inherit(Origin, Target){
// function F(){};
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// inherit(Person, Son);
//2.雅虎YUI3
// var inherit = (function(){
// var F = function () {};
// return function(Origin, Target){
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// }())
// 閉包的作用私有化變量
// 14.第二小節(jié)
// 命名空間柄瑰，管理變量,避免變量污染，適用于模塊開發(fā)
// var org{
// department1 : {
// jicheng : {
// timer : 12;
// speed : 123;
// }
// },
// department2 : {
// }
// }
// var Jicheng = org.department1.jicheng
// Jicheng.timer
// 操作屬性剪况，屬性名拼接狱意，不能用點(diǎn)
// 枚舉，遍歷(專門為對(duì)象)
// for in （對(duì)人工定義的原型沒有刪選能力）
// hasOwnProperty(用來刪選自己原型上的東西拯欧，過濾方法)常與for in 連用
// ...（屬性）in...（對(duì)象） 用來判斷 前面屬性是后面對(duì)象上的
// ...(A)instanceof...(B) 看A是否是由B構(gòu)造出來的{a的原型鏈?zhǔn)欠裼蠦的原型}
14.遞歸详囤，克隆，
// document.write('hello world!!!');
// var a = 123;
// RS coin
// 比特幣
// 作業(yè)type
// this
// 1.函數(shù)預(yù)編譯過程中this-->window
// function test(){
// console.log(arguments);
// }
// test();
// 2.在全局作用域中this-->window
// 3.call/apply可以改變this的指向
// 4.誰調(diào)用函數(shù)镐作，this就指向誰
// 遞歸
// function fn(n){
// if(n == 1){
// return 1;
// }
// return n * fn(n - 1);
// }
// fn(10);
// arguements.callee代表自身的引用
// var num = (function (n){
// if (n == 1){
// return 1;
// }
// return n * arguments.callee(n - 1);
// }(10))
// function test(){
// console.log(arguments.callee);
// }
// test();
// caller執(zhí)行本函數(shù)的環(huán)境的應(yīng)用
// function test(){
// demo();
// }
// function demo(){
// console.log(demo.caller);
// }
// test();
// 克隆 完全相同
// 找到一個(gè)對(duì)象里面里的所有屬性藏姐，
// 1.判斷是否是引用值typeof（） object boolean undefined number function string
// 2.查看 for in拆分
// 3.查看具體的類型 （區(qū)別一個(gè)對(duì)象是數(shù)組還是對(duì)象三種方法1.Object.prototype.toString 2.constructor構(gòu)造器3.instanceof(判斷前后的原型鏈?zhǔn)欠裣嗤?分別判斷類型）
// 4.Object.prototype.toString constructor instanceof(判斷前后的類型是否相同)分別判斷類型
// function deepClone(origin,target){
// var tostr = Object.prototype.toString,
// compare = '[object Array]';
// for (var prop in origin){
// }
// }
// 方法一（存在問題，引用值不獨(dú)立）
// function clone(origin,target){
// for(var prop in origin){
// if(origin.hasOwnProperty(prop)){//origin.hasOwnProperty(prop)對(duì)屬性的判斷该贾，是不是自己的屬性,而不是原型鏈上的東西
// target[prop]=origin[prop];
// }
// }
// }
// var obj = {
// name : "abc",
// age : 100,
// sex : "female",
// card : ['visa','daad','dada','deas']
// }
// var demo = {
// }
// // clone(obj,demo);
// // 方法二
// function deepClone(origin,target){
// var toStr = Object.prototype.toString,
// compare = '[object,Array]';
// for (var prop in origin){
// if(origin.hasOwnProperty(prop)){
// //判斷每一個(gè)屬性羔杨，是否是原始值
// if(typeof(origin[prop]) == 'object'){
// if(toStr.call(origin[prop]) == compare){
// target[prop] = [];
// }else{
// target[prop] = {};
// }
// deepClone(origin[prop], target[prop])
// }else{
// target[prop] = origin[prop];
// }
// }
// }
// }
// 三目運(yùn)算符 2 > 1 ? 1 : 0 簡化版的if，關(guān)注運(yùn)算結(jié)果
// function deepClone(origin,target){
// var toStr = Object.prototype.toString,
// compare = '[object,Array]';
// for (var prop in origin){
// if(origin.hasOwnProperty(prop)){
// //判斷每一個(gè)屬性杨蛋，是否是原始值
// if(typeof(origin[prop]) == 'object'){
// target[prop] = (toStr.call(origin[prop]) == compare) ? [] : {};
// deepClone(origin[prop], target[prop])
// }else{
// target[prop] = origin[prop];
// }
// }
// }
// }
15.數(shù)組
// 數(shù)組 定義兩種方法 1.var arr = []; 2.var arr = new Array(20)
//var arr = [20] != var arr = new Array[20]
// 如果里面沒有數(shù)組不報(bào)錯(cuò) 只會(huì)為undefined
// 稀松數(shù)值 var arr = [1, 2, , , 3, 6]
// var arr = [1, 2, 3];
// 數(shù)組的讀寫
// 改變?cè)瓟?shù)組的數(shù)組方法
// push在尾部加?xùn)|西
//（追加的小知識(shí)點(diǎn)
// Person.prototype = {
// name : "proto",
// callName : function (){
// console.log(this.name);
// }
// }
// function Person(name){
// this.name = name;
// }
// var person = new Person('Jack');
// person.callName();
// var arr = [2, 4, 1, 6, 25, 3, 6, 2, 0]
// Array.prototype.push = function(){
// // this.[this.length] = target;
// for(var i = 0; i < arguments.length; i ++){
// this[this.length] = arguments[i];
// }
// }
// arr.push(4);
// document.write(arr);
// pop從后往前依次剪切（類似于棧操作first in last out）
// shift依次從頭往出拿走
// unshift從頭往里面加?xùn)|西
// reversre倒敘
// splice(從第幾位切兜材，切多少長度，往切口插數(shù))切片
// sort 排序（按ascall碼大谐蚜Α）
// 當(dāng)function 返回值為負(fù)數(shù)時(shí)曙寡，那么兩相比較的數(shù)，前面的數(shù)在前
// 當(dāng)function 返回值為正數(shù)時(shí)寇荧，那么兩相比較的數(shù)举庶，后面的數(shù)在前
// arr.sort(function(a, b){
// if(a > b){
// return-1;
// }else{
// return 1;
// }
// return a-b;
// a-b升序
// b-a降序
// });
// var deng = {
// name : "deng",
// sex : "male",
// age : 45
// }
// var cheng = {
// name : "st",
// sex : "male",
// age : 21
// }
// var sitong = {
// name : "charlie",
// sex : "male",
// age : 31
// }
// var arr = [sitong, cheng, deng];
// arr.sort(function(a, b){
// return a.age - b.age;
// })
// 亂序排序
// arr.sort(function(){
// return Math.random() - 0.5;
// });
// 不可改變?cè)瓟?shù)組
// toString把數(shù)組取出來
// concat連接
// slice(從第幾位開始截取，截取幾位) 內(nèi)部原理：用負(fù)數(shù)加上長度
// join用“ ”連起來
// split 以什么為拆分點(diǎn)來拆分?jǐn)?shù)組
// var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// arr = arr.join("_");
// 原因散列操作要比棧操作塊
// 但實(shí)際應(yīng)用棧操作塊
// 作業(yè)
// 1. type 封裝一個(gè)類 function type(target){} 當(dāng)傳一個(gè)數(shù)返回一個(gè)結(jié)果類如 type(123)--> number
// 2.javascript模式 58頁
// 3.javascript權(quán)威指南 32 - 200頁
// 數(shù)組去重
// var arr = [1, 3, 2, 4, 4, 4, 5, 12, 20, 5, undefined, undefined];
// // Array.prototype.unique = function () {
// arr.sort(function(a, b){
// return a - b;
// });
// }
// 第一題
// function type(target){
// if(target = null || undefined){
// if(typeof(target) == undefined){
// return undefined;
// }else{
// return null;
// }
// } else {
// if(target.constructor == function Object() { [native code] }){
// return 'Object';
// }else if(target.constructor == function Array() { [native code] }){
// return 'Array';
// }else if(target.constructor == function Number() { [native code] }){
// return 'Number';
// }else if(target.constructor == function Boolean() { [native code] }){
// return 'Boolean';
// }
// }
// type(123); function Object() { [native code] }
// type('123');function String() { [native code] }
// type({}); function Object() { [native code] }
// type([]); function Array() { [native code] }
// type(true); function Boolean() { [native code] }
// type(undefined);無constructor
// type(null);無constructor
// js六大數(shù)據(jù)類型：number揩抡、string户侥、object镀琉、Boolean、null蕊唐、undefined
// console.log(typeof(undefined));
// 第二題數(shù)組去重
// function deleteAgain(target){
// target.sort(function (a, b){//排序
// return a - b;
// })
// for(var i = 0; i < target.arguments, i ++){
// if(target[i] = target[i + 1]){
// target.slice(i, 1);
// }
// }
// return target;
// }
// deleteAgain(arr);
// arr.sort(function (a, b){//排序
// return a - b;
// }) // 能運(yùn)行通過
// function deleteAgain(target){
// target.sort(function (a, b){//排序
// return a - b;
// })
// }
// deleteAgain(arr); // 能通過
lesson16
// "use strict";//字符串不報(bào)錯(cuò)
// var a = 'hello world!!!';
// console.log(a);
// Object.prototype.toString.call();//-->[object, null]
// var a = [1, 2, 5, 3, 3, 2, 1, 5];
// Array.prototype.unque = function(){
// var obj = {};
// var arr = [];
// var len = this.length;
// if(!obj[this[i]]){
// obj[this[i]] = "123";
// arr.push(this[i]);
// }
// return arr
// }
// 類數(shù)組 的核心是length
// var obj = {
// "0" :
// }
// function Person(){
// }
// console.log(Person.callee);
// try {
// } catch (e){
// }
// with(){}
//*****課后習(xí)題****
//1. // type判斷類型
// function type(target){
// //typeof 可以判斷的類型 undefined boolean number function string
// // 不能判斷的類型 null object array 包裝類 -->object
// if(target === null){
// return null;
// }
// var strTemple = typeof(target);
// var toStr = Object.prototype.toString;
// if(strTemple == 'object'){
// switch (toStr.call(target)){
// case "[object Array]":
// return 'array';
// case "[object Object]":
// return 'object';
// case "[object Number]":
// return 'object--Number';
// case "[object String]":
// return 'object--String';
// case "[object Boolean]":
// return 'object--Boolean';
// }
// }else{
// return strTemple;
// }
// }
//2. //數(shù)組去重
// var arr = ['a', 'a', 'b', 'b', undefined, undefined, 0, 0];
// Array.prototype.unique = function (){
// var obj = {};
// var arr = [];
// var len = this.length;
// for(var i = 0; i < len; i ++){
// if(!obj[this[i]]){
// obj[this[i]] = 'temple';
// arr.push(this[i]);
// }
// }
// return arr;
// }
//正式課程部分
// 類數(shù)組
// function test(){
// console.log(arguments)
// console.log(arguments.length);
// console.log(push(1));//沒有這個(gè)方法
// }
// test(1,2,3,4);
// var obj = {
// "0" : 'a',
// "1" : 'b',
// "2" : 'c',
// "length" : 3,
// "push" : Array.prototype.push
// }
// obj.push(123);
// Array.prototype.push = function(target){
// this[this.length] = target;
// this.length ++
// }
// 阿里筆試題
// var obj = {
// "1" : 'a',
// "2" : 'b',
// "length" : 4,
// "push" : Array.prototype.push,
// "splice" : Array.prototype.splice
// }
// obj.push('c');
// obj.push('d');
// 結(jié)果
// obj = {
// "1" : 'a',
// "2" : 'b',
// "4" : 'c',
// "5" : 'd',
// "length" : 6,
// }
// 報(bào)錯(cuò)調(diào)試
// try...catch(try只能捕捉邏輯錯(cuò)誤不能捕捉語法解析錯(cuò)誤)
// try{
// // console.log('a');
// console.log(a);
// }catch(e){
// // console.log('b');
// console.log(e.name + " :" + e.message);
// }finally{}
// console.log('next');
// EvalError
// RefereenceError 非法或不能識(shí)別的引用數(shù)值
// SyntaxError 語法解析錯(cuò)誤
// TypeError 操作數(shù)類型錯(cuò)誤
// ecmascript --> es es5.0 es3.0 es6.0
// es5嚴(yán)格模式
// function demo(){
// console.log(arguments.callee);
// }
// demo();
// function test(){
// "use strict" //局部嚴(yán)格模式
// console.log(arguments.callee);
// }
// test();
// with它能夠改變作用域鏈
// Dom操作
// var div = document.getElementsByTagName('div');
// var target = document.getElementsByClassName('target');
// var demo = document.getElementById('demo');
// var speed = 0.5;
// setInterval(function(){
// speed += speed / 7;
// demo.style.left = parseInt(demo.style.left) + speed + 'px';
// demo.style.top = parseInt(demo.style.top) + speed +'px';
// },100);
16.DOM部分(增刪改查)
"use strict"
// console.log('q');
// Document Object Model
// dom 查
// var div = document.getElementsByTagName('div');
// var div = document.getElementById('only');
// var div = document.querySelector('.warrper span');
// var div = document.getElementByName('div')[0];
// w3c標(biāo)準(zhǔn) IE9一下不兼容
// 節(jié)點(diǎn)的四個(gè)屬性
// nodeName 只讀
// nodeValue 可讀可寫
// nodeType
// attributes 節(jié)點(diǎn)行間屬性
// function test(){
// console.log(arguments.callee)
// }
// test();
// console.log(Object.prototype.caller(test));
// 筆記部分
// Document Object Model 文檔對(duì)象模型
// DOM定義了表示和修改文檔所需的對(duì)象屋摔、
// 這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。
// DOM對(duì)象即為宿主對(duì)象替梨，由瀏覽器廠商定義钓试，
// 用來操作html和css功能的一類對(duì)象的集合。
// 也有人稱DOM是對(duì)HTML以及XML的標(biāo)準(zhǔn)編程接口耙替。
// 查
// var div = document.getElementById('only');
// 注意點(diǎn)在IE8一下亚侠，不區(qū)分ID的大小寫，且返回匹配name屬性的元素
// var div = getElementsByTagName('div')[0];通過標(biāo)簽名選擇(*表示全選) 實(shí)時(shí)的選擇
// var div = document.getElementsByClassName('');IE8及IE8一下無法使用
// var div = document.getElementsByName();但只能用于form img ifrome
// .remove();表示銷毀
// var span = document.querySelector('.warrper > .content span'); > 表示直接子元素選擇器 非實(shí)時(shí)修改
// var span = document.querySelectorAll('.warrper > content span')IE7及IE7以下沒有
// node 節(jié)點(diǎn)俗扇； tag 標(biāo)簽硝烂； Element 元素
// 遍歷節(jié)點(diǎn)樹
// var Strong = getElementsByTagName('strong');
// 打印臺(tái) Strong.parentNode 頂層為document Strong.childNodes
// 節(jié)點(diǎn)的類型：元素節(jié)點(diǎn)--1 屬性節(jié)點(diǎn)--2 文本節(jié)點(diǎn)--3 注釋節(jié)點(diǎn)--8 document--9 DocumentFragment--11 不能跨級(jí)訪問
// div.firstChild div.lastChild
// css文本類屬性，可以繼承
// div.nextSibling 下一個(gè)兄弟節(jié)點(diǎn) div.previousSibling 前一個(gè)兄弟節(jié)點(diǎn)
// 基于元素節(jié)點(diǎn)樹的遍歷
// parentElement返回當(dāng)前父元素節(jié)點(diǎn) 頂層是html
// children只返回當(dāng)前元素的元素子節(jié)點(diǎn)
// childElementCount 返回子元素的個(gè)數(shù)
// firstElementChild返回的是第一個(gè)元素子節(jié)點(diǎn)
// lastElementChild返回的是最后一個(gè)元素子節(jié)點(diǎn)
// 節(jié)點(diǎn)的四個(gè)屬性：
// 節(jié)點(diǎn)的標(biāo)簽名:nodeName 只讀不可寫
// 節(jié)點(diǎn)的內(nèi)容：nodeValue 可讀可寫（text comment）
// 獲取節(jié)點(diǎn)的類型 nodeType 返回值為一個(gè)數(shù)字
// 一個(gè)節(jié)點(diǎn)行間所有屬性的集合铜幽，是類數(shù)組：attributes
// DOM結(jié)構(gòu)樹
// |Document —— |HTMLDocument
// |HTMLHeadElement
// |Text |HTMLBodyElement
// |CharacterData —— |Comment |HTMLTitleElement
// Node |HTMLParagraphElement
// |HTMLInputElement
// |Element —— HTMLElement ——|HTMLTableElement
// |.....etc.
// |Attr
// getElementById方法定義在Document.prototype上滞谢，即Element節(jié)點(diǎn)上不能使用
// getElementsByName方法定義在HTMLDocument.prototype上
// getElementsByTagName方法定義在Document.prototype以及Element.prototype
// document.body = body
// document.head = head
// document.documentElement = html
// 作業(yè)：
// 1.遍歷元素節(jié)點(diǎn)樹（在原型鏈上編程）
// 2.封裝函數(shù)，返回元素e的第n層祖先元素節(jié)點(diǎn)
// function retParent(e, n){
// while(e && n){
// e = e.parentNode;
// n --;
// }
// return e;
// }
// var em = document.getElementsByTagName('em')[0];
// 3.封裝函數(shù)除抛，返回元素e的第n個(gè)兄弟元素節(jié)點(diǎn)狮杨，n為正，返回后面的兄弟元素節(jié)點(diǎn)到忽，n為負(fù)返回前面的橄教，n為0，返回自己喘漏。（要兼容全部瀏覽器）
// function retSibling(e, n){
// while(e && n){
// if(n > 0){
// if(e.nextElementSibling){
// e = e.nextElementSibling;
// }else{
// for(e = e.nextSibling; e && e.nodeType != 1;e = e.nextSibling);
// }
// n --;
// }else{
// if(e.previousElementSibling){
// e = e.previousSibling;
// }else{
// for(e = e.previousSibling; e && e.nodeType != 1;e = e.previousSibling);
// }
// n ++;
// }
// }
// return e;
// }
// em = document.getElementsByTagName('em')[0];
// 4.編輯函數(shù)护蝶，封裝myChildren功能，解決以前部分瀏覽器的兼容性問題
// function hasChildren(){
// var div = document.getElementsByTagName('div')[0];
// var child = div.childNodes;
// var arr = [];
// var len = child.length;
// for(var i = 0; i < len; i ++){
// if(child[i].nodeType == 1){
// arr.push(child[i]);
// }
// }
// return arr;
// }
// hasChildren();
// 5.自己封裝hasChildren()方法翩迈，不可用children屬性
// Element.prototype.hasChildren = function(){
// var child = this.childNodes,
// len = child.length;
// for(var i = 0; i < len; i ++){
// if(child[i].nodeType == 1){
// return true;
// }
// }
// return false;
// }
// var div = document.getElementsByTagName('div');
lesson18
'use strict'
// 創(chuàng)建節(jié)點(diǎn)
// var div = document.createElement('div');
// var text = document.createTextNode('dadad');
// var comment = document.createComment('this is ');
// 插入節(jié)點(diǎn)
// document.body.appendChild(div); 插入到最后面
// document.body.insertBefore(a, b) 插入a 在b 之前持灰， 有剪切的功能
// 刪除節(jié)點(diǎn)
// div,removeChild(text); 剪切 子節(jié)點(diǎn)
// div.remove(); 自毀
// 替換節(jié)點(diǎn)
// parentNode.replaceChild(newChild, originChild); 也是剪切
// 元素節(jié)點(diǎn)操作(操作臺(tái))
// div.innerHTML = '' 能讀能寫（多用于改值）
// div.innerText 能讀能寫（多用于取值）
// 請(qǐng)編寫一段JavaScript腳本生成下面這段DOM結(jié)構(gòu)。要求：使用標(biāo)準(zhǔn)的DOM方法或?qū)傩浴?// <div class="example">
// <p class="slogan">姬成负饲，你最帥!</p>
// </div>
// var div = document.createElement('div');
// var p = document.createElement('p');
// var text = document.createTextNode('成哥堤魁，帥');
// p.appendChild(text);
// div.appendChild(p);
// document.body.appendChild(div);
// div.className = 'example';
// p.setAttribute('class','slogan');
// 作業(yè)
// 1.封裝函數(shù)insertAfter();功能類似insertBefore();
Element.prototype.insertAfter = function(origin, target){
var nextDom = target.nextElementSibling;
var parentDom = this;
if(!nextDom){
parentDom.appendChild(origin);
}else{
parentDom.insertBefore(origin, nextDom);
}
}
// 2.將目標(biāo)節(jié)點(diǎn)內(nèi)部的節(jié)點(diǎn)順序倒置
// 3.怎么將紅色的小方框動(dòng)起來
lesson19
'use strict'
// 插入一個(gè)Dom在一個(gè)元素的后面即定義一個(gè)insertAfter()方法
// var oWrapper = document.getElementById('wrapper');
// // oWrapper.insertBefore(contentb,contenta);
// Element.prototype.insertAfter = function(origin, target){
// var nextDom = target.nextElementSibling;
// var parentDom = this;
// if(!nextDom){
// parentDom.appendChild(origin);
// }else{
// parentDom.insertBefore(origin, nextDom);
// }
// }
// oWrapper.insertAfter(contentb, contentc);
// 創(chuàng)造一個(gè)remove()方法可以自己銷毀自己
// Element.prototype.remove =function(){
// return this.parentNode.removeChild(this);
// }
// var oContenta = contenta.remove();
// 將目標(biāo)元素逆序輸出
// Element.prototype.reverseDom = function(){
// var arr = Array.prototype.slice.call( this.children).reverse();
// this.innerHTML = '';
// console.log(arr);
// for(var i = 0; i < arr.length; i ++){
// this.appendChild(arr[i]);
// }
// }
// wrapper.reverseDom();
// 數(shù)組方法： forEach map filter reduce reduceRight
// var arr = [{name: "鹿晗", flowers: 99959, sex: "male"},
// {name: "黃子韜", flowers: 66656, sex: "male"},
// {name: "吳彥祖", flowers: 22256,sex: "male" },
// {name: "趙麗穎", flowers: 65446, sex: "female"},
// {name: "宋茜", flowers: 45659, sex: "female"},
// {name: "黃磊", flowers: 88888, sex: "male" },
// {name: "趙薇", flowers: 64561, sex: "female"},
// {name: "楊冪", flowers: 16115, sex: "female"}]
// // 1.把所有男星選出來
// // arr.filter(function(ele, index){
// // return ele.sex == "male";
// // })
// // 2.根據(jù)flowers排序
// var orderArr = arr.filter(function(ele, index){
// return ele.sex == "male";
// }).sort(function(a, b){
// return a.flowers - b.flowers;
// });
// // 3.添加Dom
// orderArr.forEach(function(ele, index){
// var oLi = document.createElement('li');
// oLi.innerText = ele.name + 'flowers' + ele.flowers
// demo.appendChild(oLi);
// });
// arr.forEach(function(ele, index){
// console.log(ele, index);
// })
// map
// Array.prototype.map = function(func){
// var arr = this;
// var newArr = [];
// for(var i = 0; i < arr.length; i ++){
// newArr.push(func(arr[i], index));
// }
// return newArr;
// }
// arr.map(function(ele, index){
// console.log(ele, index);
// ele.componey = 'cst'
// return ele;
// })
// filter 過濾
// Array.prototype.filter = function(func){
// var arr = this;
// var newArr = [];
// for(var i = 0, i < arr.length, i++){
// if(func(arr[i], i)){
// newArr.push(arr[i]);
// }
// }
// return newArr;
// }
// console.log(arr.filter(function (ele, index){
// if(ele.sex == 'male'){
// return true;
// }else{
// return false;
// }
// }));
// var oDate = new Date();
// oDate.getTime();
// 計(jì)時(shí)器
// setTimeout(function(){
// alert('輝帥')
// }, 3000);
// setInterval(function(){
// console.log('輝哥帥');
// },3000);
// var flag = true;
// setTimeout(function(){
// flag = false;
// }, 2000)
// clearInterval()
17.setInterval和setTimeout
// // 定時(shí)器
// setInterval(function(){
// console.log('a');
// },1000)
// 兩個(gè)參數(shù)，先等1000毫秒
// setTimeout(function(){
// console.log('a');
// },1000)
// 延遲執(zhí)行
// var count = 0;
// var timer = setInterval(function(){
// console.log('a');
// },1000)
// clearInterval(timer)
// clearTimeout(timer)
// 它們都是window屬性 this指向windows
// 計(jì)時(shí)器 三分鐘
// var minute = document.getElementsByTagName('input')[0];
// var second = document.getElementsByTagName('input')[1];
// var minuteCount = 0;
// var secondCount = 0;
// var timer = setInterval(function(){
// secondCount ++;
// if(secondCount == 59){
// minuteCount ++;
// second = 0;
// }
// minute.value = minuteCount;
// second.value = secondCount;
// if(minuteCount == 3){
// clearInterval(timer);
// }
// },1000)
// 查看滾動(dòng)條位置(w3c標(biāo)準(zhǔn) IE8及以下IE8以下不兼容)
// window.pageXOffset
// window.pageYOffset
// document.body.scrollLeft + document.documentElement.scrollLeft（ IE8及以下IE8）
// 查看滾動(dòng)條的方法
// function getScrollOffset(){
// if(window.pageXOffset){
// return{
// x : window.pageXOffset,
// y : window.pageYOffset
// }
// }else{
// return{
// x : document.body.scrollLeft + document.documentElement.scrollLeft
// y : document.body.scrollTop + document.documentElement.scrollTop
// }
// }
// }
// 查看可視化窗口的尺寸
// window.innerWidth
// window.innerHeight
// 混雜模式能兼容之前的標(biāo)準(zhǔn)（向后兼容）
// function getViewportOffset(){
// if(window.innerWidth){
// return{
// w : window.innerWidth,
// h : window.innerHeight
// }
// }else if(document.compatMode == "CSS1Compat"){
// return{
// w : document.documentElement.clienWidth,
// h : document.documentElement.clienHeight
// }
// }else{
// return{
// w : document.body.clienWidth,
// h : document.body.clienHeight
// }
// }
// }
// DTD文檔類型聲明
// document.compatMode可以判斷是不是混雜模式
// 查看元素的幾何尺寸
// getBoundingClientRect(); 返回一個(gè)對(duì)象 兼容性很好
// 返回的結(jié)果不是實(shí)時(shí)的
// offsetWidth offsetHeight
// offsetLeft offsetTop
// offsetParent 找它的父級(jí)
// 滾動(dòng)條移動(dòng) window.scroll(x, y) y是定位
// window.scrollBy(x, y) y是累價(jià)值
// 腳本化CSS
// div.style
// window.getComputedStyle(div, false) 獲取的都是絕對(duì)值 獲取的是展示出來的樣式
// 獲取屬性方法
// function getStyle(elem, prop){
// if(window.getComputedStyle){
// return window.getComputedStyle(elem, false)[prop];
// }else{
// return elem.currentStyle[prop];
// }
// }
// 作業(yè):1.求出其相對(duì)文檔的定位坐標(biāo)getElementPostion
// 2.輪播圖
18.事件
'use strict'
// 事件
// 舉個(gè)例子
// demo.onclick = function(){
// alert('跪下')
// }
// 背景變色
// var times = 1;
// demo.onclick = function(){
// if(times ++ % 2 !== 0){
// demo.style.backgroundColor = 'red';
// }else{
// demo.style.backgroundColor = 'orange';
// }
// }
// demo.onmouseenter = function(){
// demo.style.backgroundColor = 'red';
// }
// demo.onmouseleave = function(){
// demo.style.backgroundColor = "orange";
// }
// 1.綁定事件(對(duì)象.的方式會(huì)產(chǎn)生覆蓋返十，但w3c標(biāo)準(zhǔn)不可以)
// 給div綁定鼠標(biāo)點(diǎn)擊事件 讓它對(duì)點(diǎn)擊這種事件可以進(jìn)行處理妥泉， 執(zhí)行綁定事件
// addEventListener（w3c標(biāo)準(zhǔn)方法，不會(huì)覆蓋但如果綁定相同的函數(shù)時(shí)吧慢，就只執(zhí)行一次）
// demo.addEventListener('click', function(){ //匿名函數(shù)
// alert('帥')
// }, false);
// [] !== [] {}!=={} function(){} !==function(){}
// demo.onclick =function(){
// alert('帥')
// demo.onclick = null;//撤銷
// }
// IE8以前 attachEvent();
// demo.attachEvent('onclick', test); // 如果test不同就會(huì)依次執(zhí)行涛漂，不會(huì)省略
// 綁定事件的兼容方法
// function addEvent(dom, type, handle){
// if(dom.addEventListener){
// dom.addEventListener(type, handle, false);
// }else if(dom.attachEvent){ //detachEvent()
// function temp(){
// handle.call(dom);
// }
// temp.name = handle;
// dom[type] = [].push(temp);
// dom.attachEvent('on' + type, temp);
// }else{
// dom['on' + type] = handle;
// }
// };
// addEvent(demo, type, handle)
// 取消默認(rèn)事件 ele.onclick
// function removeEvent(dom, type, handle){
// if(dom.removeEventListener){
// dom.removeEventListener(type, handle, false);
// }else if (dom.detachEvent){
// for(var i = 0; i < dom.click.length; i++){
// if(dom.click[i].name === handle){
// dom.detachEvent('on' + type, dom.click[i]);
// }
// }
// }else{
// dom.['on' + type] = null;
// }
// }
// removeEvent(demo, 'click', testCst)
// 事件處理模型 事件冒泡，事件捕獲
// 事件冒泡
// oD.addEventListener('click', function(){
// console.log('oD bubble');
// },false);
// oC.addEventListener('click', function(){
// console.log('oC bubble');
// },false);
// oB.addEventListener('click', function(){
// console.log('oB bubble');
// },false);
// document.addEventListener('click',function(){
// console.log('document bubble');
// },false);
// // 事件捕獲
// oD.addEventListener('click', function(){
// console.log('oD catch');
// },true);
// oC.addEventListener('click', function(){
// console.log('oC catch');
// },true);
// oB.addEventListener('click', function(){
// console.log('oB catch' );
// },true);
// document.addEventListener('click',function(){
// console.log('document catch');
// },true);
// 結(jié)論對(duì)于整個(gè)模型來說事件都是先捕獲后冒泡
// 然而對(duì)于事件源來說那個(gè)事件先注冊(cè)检诗，哪個(gè)事件先執(zhí)行
// focus（聚焦input外面不可能有input匈仗，所以沒有必要冒泡）, blur, change, submit, reset, select等事件不冒泡
// 作業(yè)：女星排行榜（沒做）
lesson22
'use strict'
oWrapper.onclick = function(){
alert('wrapper');
}
oContent.onclick = function(){
alert('content');
// window.location.;
window.location.href = oContent.getAttribute('href');
}
oBox.onclick = function(e){
alert('box');
// e.stopPropagation(); //w3c標(biāo)準(zhǔn)阻止冒泡的方法
// e.cancelBubble = true; IE8以下版本瀏覽器
// return false;
}
// 阻止默認(rèn)事件
var a = document.getElementsByTagName('a')[0];
console.log(a.getAttribute('href'));
19.運(yùn)算符和條件語句
比較運(yùn)算符：
1.通過比較得出結(jié)果為布爾值，側(cè)重結(jié)果逢慌；
2.賦值符號(hào)==悠轩；
3.不等于！=攻泼；
3.'a'<'b'=true;
4.0-127 ASCI 0-255 ASCII unicode(萬國碼)
65 A 66 B 97a 98b火架。
5.‘10’ <‘2’=true（字符串的值作比較）;
6.undifined=null！=0忙菠；
7.被認(rèn)定為false的值 undefined,null,NaN,"",0,false何鸡。
8.邏輯運(yùn)算$$ || !
9.與運(yùn)算&& ： 如果第一位計(jì)算結(jié)果為真，那么計(jì)算第二個(gè)表達(dá)式的結(jié)果牛欢，
并且返回第二個(gè)表達(dá)式的結(jié)果骡男，如果第一位計(jì)算結(jié)果為假，那么返回第一個(gè)表達(dá)式的運(yùn)算結(jié)果
10.短路語句（舉例1>2&&document.write('舉案說法你看得見')）傍睹。
11.或運(yùn)算 || 如果第一個(gè)表達(dá)式計(jì)算結(jié)果為真隔盛，那么直接返回第一個(gè)表達(dá)式運(yùn)算結(jié)果，
如果第一個(gè)表達(dá)式運(yùn)算結(jié)果為假拾稳，那么計(jì)算第二個(gè)表達(dá)式吮炕，并將第二個(gè)表達(dá)式的運(yùn)算結(jié)果返回。
12.e:后需要用到這個(gè)E,在IE下访得，E沒有值龙亲，但有window.event在goole chrome下有值，
或運(yùn)算符會(huì)多用于兼容性的寫法悍抑。
13.ｖ：把后面的值，先轉(zhuǎn)換成布爾值传趾，然后再取反迎膜。
14.if( 條件){ 如果條件成立執(zhí)行這里面的語句 }else{ 不成立則執(zhí)行這里面的語句}
15.互聯(lián)網(wǎng)公司0-100分劃分（H1B工作簽證 60W-20W）
90-100 （螞蟻金服） alibaba microsoft facebook goole
80-90 tencent toutiao 美團(tuán) 網(wǎng)易
70-80 百度 攜程 小米 新浪（渣浪） 58同城
60-70 蘑菇街 去哪網(wǎng)
60以下 怎么可能
var score = parseInt( window.prompt('input'));
if(score>90&&score<=100){
document.write('alibaba');
}
if(score>80&&score<=90){
document.write('tencent')
}
if(score>70&&score<=80){
document.write('新浪')
}
if(score>60&&score<=70){
document.write('蘑菇街')
}
if(score<=60){
document.write('shit!!!');
}
16.為了使語句互斥用else if(必須條件互斥)
var score = parseInt( window.prompt('input'));
if(score>90&&score<=100){
document.write('alibaba');
}
else if(score>80&&score<=90){
document.write('tencent')
}
else if(score>70&&score<=80){
document.write('新浪')
}
else if(score>60&&score<=70){
document.write('蘑菇街')
}
else if(score<=60){
document.write('shit!!!');
}
else{
document.write('error');
}
17.當(dāng)短路語句不在關(guān)注返回結(jié)果時(shí)，就可以用短路語句代替if語句
18.輸入三個(gè)數(shù)浆兰，判斷大小并輸出
var a = parseInt(window.prompt('input'));
var b = parseInt(window.prompt('input'));
var c = parseInt(window.prompt('input'));
if(a>b) {
if(a>c){
document.write(a);
}else{
document.write(c);
}
}else{
if(b>c){
document.write(b);
}else{
document.write(c);
}
}
19.for循環(huán)
真正的for循環(huán)我們關(guān)注的是順序
for（ 1;2 ;3）{4}
首先執(zhí)行1
然后判斷2是否成立-->判斷2結(jié)果是否為true
然后執(zhí)行4
然后執(zhí)行3
然后判斷2是否成立-->判斷2結(jié)果是否為true
當(dāng)2的結(jié)果為false時(shí)停止循環(huán)
例子：
for(i=0;i<100;i++){
document.write(i+' ')
}
var i=100;
for(;i--;){
document.write(i+" ")
}
for(var i=0;i<100;i++){
if(i%2!=0&&i%3!=0){
document.write(i+" ")
}
} var count=0;
for(var i=0;i<1000;i++){
count+=i;
if(count>=200){
document.write(i);
i=2000;
}
}
20.正則
'use strict'
// console.log('a');
/*********************封裝函數(shù)************************/
// Document.prototype.getByClassName = function(className){
// var allDomArr = Array.prototype.slice.call(document.getElementsByTagName('*'),0);
// // console.log(allDomArr);
// var filterArr = [];
// function dealClassName(dom){
// var reg = /\s+/g;
// var itemArr = dom.className.replace(reg, ' ').trim().split(' ');
// return itemArr;
// }
// allDomArr.forEach(function (ele, index) {
// var itemArr = dealClassName(ele);
// for(var i = 0; i < itemArr.length; i++) {
// if(className == itemArr[i]){
// filterArr.push(ele);
// break;
// }
// }
// })
// return filterArr;
// }
// console.log(document.getByClassName('demo'));
/********************ajax****************/
// form:
// method: get, post
// action: 服務(wù)器地址
// enctype: application/x-www-form-urlencoded(默認(rèn)值)(表示文件發(fā)送前編碼成字符格式)multipart/form-data(把文件變成文件上傳表單)
// ajax技術(shù)能局部獲取數(shù)據(jù)磕仅，還不刷新頁面、且異步獲取數(shù)據(jù)
// new XMLHttpRequest()可以創(chuàng)建ajax對(duì)象但I(xiàn)E不認(rèn)識(shí)
// newa ActiveXObject('Microsoft.XMLHTTP')主流瀏覽器創(chuàng)建ajax文檔
/*****************兼容性寫法**************************/
// 流程：
// 1.手機(jī)/電腦
// 2.app
// 3.商家 商品 地址
// 4.提交訂單 交錢
// 5.監(jiān)控 物流信息
// 6.拿到餐 處理掉
// 1.瀏覽器
// 2.Ajax對(duì)象
// 3.open('GEt', 'URL'簸呈，'true');
// 4.send('data');
// 5.onreadystatechange readyState==4//readyState有四個(gè)值（0：:未初始化榕订，1：讀取中， 2：:已讀取蜕便， 3：交互中劫恒， 4：:完成status =（404 ： 文件沒找到，用戶端錯(cuò)誤，200：成功两嘴， 500 ：服務(wù)器內(nèi)部錯(cuò)誤丛楚， 303 : 服務(wù)器錯(cuò)誤
// 6.callback
// var xml = null;
// if(window.XMLHttpRequest{
// xml = new XMLHttpRequest();
// }else{
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// xml.open('GET', 'getNews.php', true);
// xml.send();
// xml.onreadystatechange = function(){
// if(xml.readyState == 4){
// if(xml.status == 200){
// console.log('3333');
// }
// }
// }
function Ajax(method, url, flag, data, callback){
var app = null;
if(window.XMLHttpRequest){
app = new window.XMLHttpRequest();
}else{
app = new window.ActiveXObject('Microsoft.XMLHTTP');
}
method = method.toUpperCase();
if(method === 'GET'){
app.open(method, url + '?' + data, flag);
app.send();
}else if (method === 'POST'){
app.open(method, url, flag);
app.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
app.send(data);
}
app.onreadystatechange = function(){
if(app.readyState === 4){
if(app.status === 200){
callback(app.responseText);
}else{
alert('error');
}
}
}
}
/*************************************************/
// var aaa = 'username=aimee&age=18';
// function ajax(method, url, flag, data, callback) {
// var xml = null;
// if(window.XMLHttpRequest){
// xml = new XMLHttpRequest();
// }else {
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// if(method == 'GET') {
// xml.open(method, url + '?' + data, flag);
// xml.send();
// }else if(method == 'POST') {
// xml.open(method, url, flag);
// xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// xml.send(data);
// }
// xml.onreadystatechange = function () {
// if(xml.readyState == 4) {
// if(xml.status == 200) {
// callback(xml.responseText);
// }
// }
// }
// }
// function showData(data) {
// console.log(data)
// }
// function alertData(data) {
// alert(data);
// }
// ajax('GET', 'post.php', true, aaa, alertData);
21.CSS3媒體查詢
<html lang="en">
<head>
<meta charset="utf-8">
<title>meitichaxun</title>
<style type="text/css">
.content{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.content .time{
display: inline-block;
flex-grow: 1;
width: 20%;
}
.content .time img{
width: 100%;
}
@media screen and (max-width: 180px){
.content .time{
display: inline-block;
width: 100%;
}
}
/* @media screen and (min-width: 180px) and (max-width: 370px){
.content .time{
display: inline-block;
width: 50%;
}
}*/
/* @media screen and (min-width: 370px) and (max-width: 540px){
.content .time{
display: inline-block;
width: 33.33%;
}
}*/
/* @media screen and (min-width: 540px) and (max-width: 800px){
.content .time{
display: inline-block;
width: 25%;
}
}*/
/* @media screen and (min-width: 800px) and (max-width: 1190px){
.content .time{
display: inline-block;
width: 20%;
}
}*/
/* @media screen and (orientation: portrait){ 豎屏
.content div{
width: 50px;
height: 50px;
background: red;
}
}
@media screen and (orientation: landscape){ 橫屏
.content div{
width:60px;
height: 60px;
background: orange;
}
} */
/* .wrapper{
position: relative;
perspective: 1200px;
perspective-origin: 50% 50%;
top: 110px;
left: 110px;
height: 233px;
width: 233px;
}
.wrapper .item{
transform-style: preserve-3d;
width: 100px;
height: 100px;
background: orange;
transform: translateZ(0px);
} */
</style>
</head>
<body>
<div class="content">
<!-- <div></div> -->
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
<div class="time"><img src="4 白鳳.jpg" alt=""></div>
</div>
<!-- box-shadow影響性能 -->
<!-- <div class="wrapper">
<div class="item">A</div>
</div> -->
</body>
</html>
行、塊級(jí)元素
<!-- ============================================ -->
<!-- ================= 塊屬性 ================== -->
<!-- ============================================ -->
<!-- <div>憔辫、<p>趣些、<h1>…<h6>、<ol>贰您、<ul>坏平、<li>、<address>锦亦、<blockquote>舶替、<form> -->
<!--
1.每一個(gè)快屬性標(biāo)簽都是從新的一行開始，而且之后的元素也都會(huì)從新的一行開始
（因?yàn)槊恳粋€(gè)塊屬性標(biāo)簽都會(huì)直接占據(jù)一整行的內(nèi)容杠园，導(dǎo)致下面的內(nèi)容也只能從新的一行開始）
2.塊屬性標(biāo)簽都是可以設(shè)置寬度巍实、高度溺职，行高敢朱，距頂部距離窟蓝，距底部距離
3.塊屬性標(biāo)簽的寬度假如不做設(shè)置，會(huì)直接默認(rèn)為父元素寬度的100%
4.塊屬性標(biāo)簽是可以直接嵌套的
5.p標(biāo)簽中不能嵌套div標(biāo)簽
-->
<!-- ============================================ -->
<!-- ================= 行屬性 ================== -->
<!-- ============================================ -->
<!--
<a>篮绿、<span>孵延、<i>、<em>亲配、<strong>尘应、<label>、<q>吼虎、<var>犬钢、<cite>、<code>等
-->
<!--
1.行屬性標(biāo)簽它和其它標(biāo)簽處在同一行內(nèi)
2.行屬性標(biāo)簽無法設(shè)置寬度思灰，高度 行高 距頂部距離 距底部距離
3.行屬性標(biāo)簽的寬度是直接由內(nèi)部的文字或者圖片等內(nèi)容撐開的
4.行屬性標(biāo)簽內(nèi)部不能嵌套行屬性標(biāo)簽（a鏈接內(nèi)不能嵌套其他鏈接）
-->
筆試題
1玷犹、inline：<span></span>,<strong></strong>,<em></em>,<a></a>,<del></del>
block:<p></p>,<ol></ol>,<li></li>,<ul></ul>,<div></div>,<form></form>,<adress></adress><table></table><h1-6>;
行內(nèi)元素轉(zhuǎn)化為塊級(jí)元素：display : block;
2、css代碼三中引入方式：
行間樣式
頁面級(jí)css
引入css文件 link
style標(biāo)簽下寫 @import url();
3洒疚、web標(biāo)準(zhǔn)：行為歹颓、樣式、結(jié)構(gòu)相分離
4油湖、簡化代碼：
<style type="text/css">
*{
margin: 0 10px;
padding: 0;
}
#content{
background:#ffffff;
}
#content div{
font-size: 14px;
text-align: center;
color: #e9e9e9;
}
#nav{
background-color: #e0e0e0;
}
5巍扛、瀏覽器中margin默認(rèn)值為8px；
6乏德、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
body{
padding: 0;
margin: 0;
}
#my-defined{
width: 100px;
height: 100px;
padding: 0 100px;
margin: 10px 20px 30px 40px;
border: 1px solid orange;
background: orange;
}
</style>
</head>
<body>
<div id="my-defined"></div>
</body>
</html>
html中orange顏色的區(qū)域?qū)挾仁?02px
orange區(qū)域距離頁面左邊40px撤奸，上10px
7、用css、html編寫一個(gè)兩列布局的頁面胧瓜，要求右側(cè)寬度為200px矢棚；左側(cè)自動(dòng)擴(kuò)展。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
.right{
float: right;
width: 200px;
height: 100px;
background:red;
}
.left{
height: 100px;
margin-right: 200px;
background: black;
}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>
8贷痪、居中一個(gè)浮動(dòng)元素：
<style type="text/css">
#my-defined{
position: absolute;
width: 300px;
height: 500px;
left: 50%;
right: 50%;
margin-left: -150px;
margin-top: -250px;
}
</style>
9幻妓、畫出下圖示意圖：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
#page{
width: 520px;
}
.nav{
width:200px;
float: right;
background: orange;
}
.main{
width: 200px;
float: left;
padding-left: 110px;
background: black;
}
.sub{
width: 100px;
float: left;
margin:10px 0 10px -100px;
}
.nav,.sub{
border: 10px deshed #000;
height: 300px;
background: orange;
}
.sub{
height: 280px;
}
</style>
</head>
<body>
<div id="page">
<div class="main"><div class="sub"></div></div>
<div class="nav"></div>
</div>
</body>
</html>
10蹦误、form表單中method屬性值及其區(qū)別：
（1）GET 使用URL 或Cookie 傳參劫拢，而POST將數(shù)據(jù)，放在BODY中强胰。
（2）GET 的URL會(huì)有長度上的限制舱沧， POST可以傳輸很多數(shù)據(jù)。
（3）POST比GET安全偶洋。
但其實(shí)HTTP協(xié)議里沒有規(guī)定POST數(shù)據(jù)就要放在BODY里熟吏， 也沒有要求GET數(shù)據(jù)就一定要放在URL中而不能放在BODY中。
HTTP協(xié)議對(duì)GET和POST 都沒有對(duì)數(shù)據(jù)的長度進(jìn)行限制玄窝，兩方面原因造成數(shù)據(jù)限制的原因
①早起瀏覽器會(huì)對(duì)URL長度進(jìn)行限制（瀏覽器URL輸入框）
②瀏覽器會(huì)對(duì)Content-length進(jìn)行限制牵寺，這是為了服務(wù)器安全和穩(wěn)定。
11恩脂、去掉ul>li結(jié)構(gòu)中前面的圓點(diǎn)帽氓，并且解決li前面的空余、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
ul {
height: 100px;
padding: 0;
list-style: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul><li></li></ul>
</body>
</html>
12俩块、JavaScript中typeof可能返回的結(jié)果：12.Number,string,boolean,object,undefined,function;
13黎休、已知數(shù)組var arr = ["goole","microsoft","oracle","阿里"，"freewheel","IBM","愛立信"玉凯，"百度"势腮，"企鵝"，"美團(tuán)"漫仆，"去哪兒"捎拯，"58同城"，"新浪"盲厌，"搜狐"署照，"大眾點(diǎn)評(píng)"，"360","汽車之家"狸眼，"巨人網(wǎng)絡(luò)"藤树，"攜程"，"4399","鳳凰網(wǎng)"拓萌，"人民網(wǎng)"]岁钓，親們，如果你想進(jìn)前十的公司，請(qǐng)用效率最高的方法將此數(shù)組按照順序鏈接成字符屡限。
<script type="text/javascript">
var arr = ["goole","microsoft","oracle","阿里","freewheel","IBM","愛立信","百度","企鵝","美團(tuán)","去哪兒","58同城","新浪","搜狐","大眾點(diǎn)評(píng)","360","汽車之家","巨人網(wǎng)絡(luò)","攜程","4399","鳳凰網(wǎng)","人民網(wǎng)"];
console.log(arr.join(','));
</script>
14品嚣、寫出html、css钧大、JavaScript注釋代碼形式：
html：<!-- -->
css:/* */
js://
15翰撑、編寫一段JavaScript腳生成下面這段DOM結(jié)構(gòu)。
<div class="exmple">
<p class="slogan">成哥啊央，你最帥!</p>
</div>
<script type="text/javascript">
var $Div = document.createElement('div');
var $P = document.createElement('p');
$Div.className = "exmple";
$P.className = "slogan";
$Div.appendChild($P);
document.body.appendChild($div);
$P.innerHTML = "成哥眶诈，你最帥！";
</script>
16瓜饥、為html元素綁定一個(gè)事件逝撬，如點(diǎn)擊事件。寫出兼容各個(gè)瀏覽器的事件綁定方法乓土。
<script type="text/javascript">
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if (elem.attachEvent) {
elem['temp' + type + handler] = handler;
elem[type + handler]= function (){
elem['temp' + type + handler].call(elem);
};
elem.attachEvent('on' + type,elem[type + handler])
}else{
elem['on'+type]=handler;
}
}
</script>
17宪潮、Call,apply:作用都是改變this指向；
區(qū)別：傳參的方式不同趣苏，call直接傳狡相，apply利用數(shù)組的形式傳參；
18食磕、封裝ajax
<script type="text/javascript">
function ajax(method, url, flag, callback, data){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new window.XMLHttpRequest();
}else{
xhr = new ActiveXObject('Mirosoft.XMLHTTP')
}
if(method === 'GET'){
xhr.open('GET', url + '?' + data, flag);
xhr.send();
}else if(method === 'POST'){
xhr.open('POST', url, flag);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
if(xhr.status === 200){
callback(xhr.responseText);
}
}
}
}
</script>
19尽棕、數(shù)組去重 eg：var arr = ['a','b',234,23,'a','b',3,1,234]
<script type="text/javascript">
Array.prototype.unique = function () {
var arr = [],
obj = {},
len = this.length;
for(var i = 0;i < len;i++){
if(!obj[this[i]]){
obj[this[i]] = "11";
arr.push(this[i]);
}
}
return arr;
}
</script>
20、如今有個(gè)ul芬为，如果有十億個(gè)li萄金；要求點(diǎn)擊li觸發(fā)事件，彈出對(duì)應(yīng)li的內(nèi)容
<ul>
<li></li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerHTML);
}
</script>
21媚朦、阻止事件冒泡和事件默認(rèn)時(shí)間
<script type="text/javascript">
//取消冒泡
function stopBubble(e) {
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
//阻止默認(rèn)事件
function cancelHandler(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
</script>
22氧敢、什么是DOM：
DOM是操作css，html的一套編程接口询张；
DOM對(duì)象即為宿主對(duì)象孙乖，瀏覽器廠商定義的；
DOM定義了表示和修改文檔所需的方法份氧。
對(duì)html和xml編程借口不是css
23唯袄、利用JavaScript取非行間樣式，要求兼容性各個(gè)瀏覽器
<script type="text/javascript">
function getComputedStyle(obj,styleProp){
if (window.getComputedStyle) {
return window.getComputedStyle(obj,false)[styleProp];
}else{
return obj.currentStyle[styleProp];
}
}
</script>
24蜗帜、運(yùn)行test()和new test()的結(jié)果是什么：
<script type="text/javascript">
var a = 5;
function test(){
a=0;
alert(a);
alert(this.a);
var a;
alert(a);
}
</script>
結(jié)果是：0 5 0 , 0 undefined 0
25恋拷、有字符串"aaaaabbbccccddddeeefgaa",轉(zhuǎn)換為連續(xù)不重復(fù)的字符串
<script type="text/javascript">
var str = "aaaaabbbccccddddeeefgaa";
var reg = /(.)\1*/g;
console.log(str.replace(reg,"$1"));
</script>
26、一串連續(xù)數(shù)字實(shí)現(xiàn)打點(diǎn)功能：100000000轉(zhuǎn)換成：1.000.000.000
<script type="text/javascript">
var str = "1000000000";
var reg = /(?=(\B)(\d{3})+$)/g;
console.log(str.replace(reg,"."));
</script>
27厅缺、寫出運(yùn)算結(jié)果：
<script type="text/javascript">
alert(typeof(a))--undefined
alert(typeof(undefined))--undefined
alert(typeof(NaN))--number
alert(typeof(null))--object
var a = "123abc";
alert(typeof(+a));--number
alert(typeof(!!a));--boolean
alert(typeof(a + ""));--string
alert(1 == "1"); --true
alert(NaN == NaN); --flase
alert(NaN == undefined);--flase
alert("11" + 11);--1111
alert(1==="1")--flase
alert(parseInt("123abc"))--123
var num = 1232123.3456789;
alert(num.toFixed(3));--1232123.346
//toFixed只在number類型上可以用蔬顾，保留幾位有效數(shù)字宴偿，四舍五入
// typeof(typeof(a))--string
</script>
28、打印當(dāng)前年月時(shí)分秒
<script type="text/javascript">
var date = new Date();
console.log(date.getFullYear + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"+ date.getHours() + "時(shí)" + date.getMinutes() + "分" + date.getSeconds() + "秒");
</script>
29诀豁、css中窄刘，font-size設(shè)置的是字體的高；單位是px舷胜，em是相對(duì)值娩践。
30、有html結(jié)構(gòu)：
<div style="background-color:red;margin:0 0 100px 0;">123</div>
<div style="background-color:red;margin:200px 0 0 0;">234</div>
他們之間的間距是：200px
31烹骨、簡單說說自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象的原理：
在函數(shù)的最前面隱式的加上 this = {}翻伺；最后隱式的返回 return this；
32展氓、寫出一種原型鏈實(shí)現(xiàn)繼承的方式：圣杯模式
<script type="text/javascript">
var inherit =(function(){
var F = function(){};
return function(P,C){
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
C.prototype.uber = P.prototype;
}
}());
</script>
33穆趴、深度克隆：
<script type="text/javascript">
Array.prototype.deepClone = function (parent, child) {
var child = {} || child;
var toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in parent){
if(parent.hasOwnProperty(prop)){
if(typeof(parent[prop]) === "object"){
child[prop] = (toStr.call(parent[prop]) === arrStr) ? []:
{};
deepClone(parent[prop], child[prop]);
}else{
child[prop] = parent[prop];
}
}
}
}
</script>
34遇汞、描述預(yù)編譯過程：
（1）創(chuàng)建AO對(duì)象；
（2）找形參和變量聲明簿废，將變量和形參作為AO對(duì)象的屬性名空入，值為undefined；
（3）將實(shí)參和形參相統(tǒng)一族檬；
（4）在函數(shù)體里找函數(shù)聲明歪赢，將函數(shù)聲明作為AO對(duì)象的屬性名，將函數(shù)體作為賦值對(duì)象賦予函數(shù)名单料。
35埋凯、介紹js語言特點(diǎn)：
單線程；腳本語言扫尖；解釋性語言白对，解釋一行執(zhí)行一行；ECMA標(biāo)注换怖；弱數(shù)據(jù)類型語言甩恼；可以跨平臺(tái)；
36沉颂、介紹主流瀏覽器以及他們相應(yīng)的內(nèi)核条摸，介紹瀏覽器分為哪幾部分，內(nèi)核呢铸屉？
瀏覽器分為：shell與內(nèi)核（js引擎钉蒲，渲染引擎，其他）
主流瀏覽器：IE（trident）彻坛；chrome（webkit/blink）顷啼；safari（webkit）帆赢；Firefox（Gecko）；Opera（presto）线梗；
37椰于、簡述js時(shí)間線的順序：
1、創(chuàng)建Document對(duì)象仪搔，開始解析web頁面瘾婿。document.readyState = 'loading'。
2烤咧、遇到link外部css偏陪，創(chuàng)建線程加載，并繼續(xù)解析文檔煮嫌。
3笛谦、遇到script外部js，并且沒有設(shè)置async昌阿、defer饥脑，瀏覽器加載，并阻塞懦冰，等待js加載完成并執(zhí)行該腳本灶轰，然后繼續(xù)解析文檔。
4刷钢、遇到script外部js笋颤，并且設(shè)置有async、defer内地，瀏覽器創(chuàng)建線程加載伴澄，并繼續(xù)解析文檔。對(duì)于async屬性的腳本阱缓，腳本加載完成后立即執(zhí)行非凌。（異步禁止使用document.write()）
5、遇到img等茬祷，先正常解析dom結(jié)構(gòu)清焕，然后瀏覽器異步加載src，并繼續(xù)解析文檔祭犯。
6秸妥、當(dāng)文檔解析完成，document.readyState = 'interactive'沃粗。
7粥惧、文檔解析完成后（就是所有dom節(jié)點(diǎn)都解析完），所有設(shè)置有defer的腳本會(huì)按照順序執(zhí)行最盅。（注意與async的不同,但同樣禁止使用document.write()）;
8突雪、document對(duì)象觸發(fā)DOMContentLoaded事件起惕，這也標(biāo)志著程序執(zhí)行從同步腳本執(zhí)行階段，轉(zhuǎn)化為事件驅(qū)動(dòng)階段咏删。
9惹想、當(dāng)所有async的腳本加載完成并執(zhí)行后、img等加載完成后督函，document.readyState = 'complete'嘀粱，window對(duì)象觸發(fā)load事件。
10辰狡、從此锋叨，以異步響應(yīng)方式處理用戶輸入、網(wǎng)絡(luò)事件等宛篇。
38娃磺、異步加載js的幾種方案：
defer async
異步加載兼容性寫法：
<script type="text/javascript">
function asyncLoaded (url,callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readySate) {
script.onreadystatechange = function (){
if (script.readySate == "complete" || script.readySate == "loaded") {
obj[callback]();
script.onreadystatechange = null ;
}
}
}else{
script.onload = function(){
obj[callback]();
}
}
script.src = url ;
document.head.appendChild(script);
}
</script>
39、打印結(jié)果：
<script type="text/javascript">
var a = (10*3-4/2 + 1)%2,
b = 3;
b %= a + 3;
console.log(a++);
console.log(--b);
</script>
結(jié)果：1 2
40叫倍、使用原生js偷卧，addEventListener,給每個(gè)li元素綁定一個(gè)click事件，輸出他們的順序段标。
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<script type="text/javascript">
var liCollection = document.getElementsByTagName('li'),
len = liCollection.length;
for (var i = 0; i < len; i++) {
(function(j){
liCollection[j].addEventListener('click',function(){
console.log(j);
}false);
}(i))
}
</script>
41涯冠、一個(gè)字符串由[a-z]組成，找出第一個(gè)只出現(xiàn)一次的字母
<script type="text/javascript">
Array.prototype.unique = function() {
var len = this.length,
obj = {},
arr = [];
for(var i = 0; i < len; i++){
if(!obj[this[i]]) {
obj[this[i]] = "1";
arr.push(this[i]);
}
}
return arr;
}
var str = "abaadf";
var arr = str.split("");
var arr1 = arr.unique();
console.log(arr1[0]);
</script>
42逼庞、打印結(jié)果：
<script type="text/javascript">
var name = "222";
var a = {
name:"111",
say:function(){
console.log(this.name);
}
}
var fun = a.say;
fun();
a.say();
var b = {
name:"333",
say:function(fun){
fun();
}
}
b.say(a.say);
b.say=a.say;
b.say();
</script>
結(jié)果： 222 111 222 333
43、
<script type="text/javascript">
var str = "你成哥很帥";
str.length = 3;
console.log(str);
</script>
執(zhí)行結(jié)果為：你成哥很帥
原因：原始值不可改變
44瞻赶、請(qǐng)用多種方法創(chuàng)造對(duì)象：
字面量 var obj = {}赛糟；
構(gòu)造函數(shù) var obj = new Object{};
var obj = Object.create(原型)
45、解決污染全局變量
命名空間砸逊，閉包
46璧南、枚舉一個(gè)對(duì)象中所有自有屬性：
<script type="text/javascript">
Person.prototype.lastName = "ji";
function Person(name,age){
this.name = name;
this.age = age ;
}
var oPerson = new Person ('cheng',123);
for(var prop in oPerson){
if(oPerson.hasOwnProperty(prop)){
console.log(oPerson[prop]);
}
}
</script>
47、讓數(shù)組里的數(shù)據(jù)從大到小排列：
<script type="text/javascript">
arr.sort(function(a,b){
return a - b;
}());
</script>
48师逸、es5嚴(yán)格模式如何使用司倚，應(yīng)該注意些什么：
<script type="text/javascript">
全局嚴(yán)格模式:直接加 字符串："use strict";
局部函數(shù)內(nèi)嚴(yán)格模式（推薦）
function test(){
"use strict";
}
注意：不支持with,arguments.callee,func.caller,變量賦值前必須聲明，局部this必須被賦值(Person.call(null/undefined) 賦值什么就是什么),拒絕重復(fù)屬性和參數(shù)
</script>
49篓像、選擇html元素節(jié)點(diǎn)幾種方法动知，以及他們各自的兼容性問題及特點(diǎn)：
<script type="text/javascript">
getElementsByTagName()[0];
getElementById();
getElementsByName();
getElementByClassName(); interactive8及以下不兼容
querySelectorAll();非實(shí)時(shí)ie7及以下不兼容
querySelector();非實(shí)時(shí)ie7及以下不兼容
1.getElementById方法定義在Document.prototype上，即Element節(jié)點(diǎn)上不能使用员辩。
2.getElementsByName方法定義在HTMLDocument.prototype上盒粮，即非html中的document以外不能使用(xml document,Element)
3.getElementsByTagName方法定義在Document.prototype 和 Element.prototype上
4.HTMLDocument.prototype定義了一些常用的屬性，body,head,分別指代HTML文檔中的<body><head>標(biāo)簽奠滑。
5.Document.prototype上定義了documentElement屬性丹皱，指代文檔的根元素妒穴，在HTML文檔中，他總是指代<html>元素
6.getElementsByClassName摊崭、querySelectorAll讼油、querySelector在Document,Element類中均有定義
</script>
50、說出節(jié)點(diǎn)類型的值為1,2,3,8,9的值對(duì)應(yīng)的節(jié)點(diǎn)是什么：
元素節(jié)點(diǎn) —— 1
屬性節(jié)點(diǎn) —— 2
文本節(jié)點(diǎn) —— 3
注釋節(jié)點(diǎn) —— 8
document —— 9 單獨(dú)成一類 文檔節(jié)點(diǎn)
<!-- DocumentFragment —— 11 文檔碎片 -->
<!-- 獲取節(jié)點(diǎn)類型 nodeType -->
51呢簸、鼠標(biāo)事件的觸發(fā)順序：
mousedown; focus; mouseup; click;
右鍵事件：
<script type="text/javascript">
elem.onmousedown = function (e) {
if(e.button == 2){
alert("右鍵點(diǎn)擊")
}
}
</script>
52矮台、數(shù)據(jù)格式JSON轉(zhuǎn)換為字符串，以及把字符串轉(zhuǎn)換為JSON的方法
<script type="text/javascript">
JSON.parse(); string — > json字符串
JSON.stringify(); json — > string
</script>
53阔墩、BOM對(duì)象及其功能：
Window JavaScript 層級(jí)中的頂層對(duì)象嘿架，表示瀏覽器窗口。
屬性：
closed 返回窗口是否已被關(guān)閉啸箫。
document 對(duì) Document 對(duì)象的只讀引用耸彪。
history 對(duì) History 對(duì)象的只讀引用。
innerheight 返回窗口的文檔顯示區(qū)的高度忘苛。
innerwidth 返回窗口的文檔顯示區(qū)的寬度蝉娜。
方法：
alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。
blur() 把鍵盤焦點(diǎn)從頂層窗口移開扎唾。
clearInterval() 取消由 setInterval() 設(shè)置的 timeout召川。
Navigator 包含客戶端瀏覽器的信息。
屬性：
appCodeName 返回瀏覽器的代碼名胸遇。
方法：
javaEnabled() 規(guī)定瀏覽器是否啟用 Java荧呐。
Screen 包含客戶端顯示屏的信息。
屬性：
availHeight 返回顯示屏幕的高度 (除 Windows 任務(wù)欄之外)纸镊。
availWidth 返回顯示屏幕的寬度 (除 Windows 任務(wù)欄之外)倍阐。
width 返回顯示器屏幕的寬度。
History 包含了瀏覽器窗口訪問過的 URL逗威。
屬性：
length 返回瀏覽器歷史列表中的 URL 數(shù)量峰搪。
方法：
back() 加載 history 列表中的前一個(gè) URL。
forward() 加載 history 列表中的下一個(gè) URL凯旭。
go() 加載 history 列表中的某個(gè)具體頁面概耻。
Location 包含了當(dāng)前 URL 的信息。
屬性：
href 設(shè)置或返回完整的 URL罐呼。
方法：
assign() 加載新的文檔鞠柄。
reload() 重新加載當(dāng)前文檔。
replace() 用新的文檔替換當(dāng)前文檔弄贿。
54春锋、說明position定位的值有什么區(qū)別，如果有不能兼容的問題差凹，如何解決
absolute 絕對(duì)定位
relative 相對(duì)定位
fixed 相對(duì)可視區(qū)定位期奔，而且脫離原來位置 ie6不能用
sticky回去查一查
55瘩例、添加css代碼使得ul外觀可以包住li：
<style type="text/css">
ul{
list-style: none;
padding: 0;
}
ul>li{
float: left;
}
ul:after{
content:"";
display:inline-block;
clear:both;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
56澄成、熟知的選擇優(yōu)先級(jí)關(guān)系（權(quán)重）
！important 無窮大
style（行間樣式） 1000
id 100
class/屬性/偽類 10
標(biāo)簽/偽元素 1
通配符* 0
57、display值及含義
display值： inline---行級(jí)元素收擦，不沾滿整行开财，不可以改變寬高
block----塊級(jí)元素 沾滿整行 可以改變寬高
inline-block----行級(jí)塊元素 不占滿整行 可以改變寬高
58始鱼、寫一個(gè)輸入框千埃，帶有js功能，鼠標(biāo)聚焦提示消息信息赠堵，失去焦點(diǎn)顯示提示信息
<style type="text/css">
input{
border: 1px solid black;
color: #999;
}
.fontGrey{
color: #999;
}
.fontNormal{
color: #424242;
}
</style>
</head>
<body>
username:<input tyoe="text" value="請(qǐng)輸入用戶名"onfocus="if(this value='請(qǐng)輸入用戶名'){this.value='';this.className='fontNormal'}"onblur="if(this.value==''){this.value='請(qǐng)輸入用戶名';this.className='fontGrey'}" onchange="console.log(this.value)">
</body>
59小渊、寫出打印結(jié)果并說明原因：
<script type="text/javascript">
function fn(a,b){
arguments[0] = 1;
console.log(a);
fn(2,1);
}
打印：1;
原因：實(shí)參茫叭，形參相統(tǒng)一;
</script>
60酬屉、將下列變量轉(zhuǎn)化為小駝峰形式：my-first-name->myFirstName
<script type="text/javascript">
var str = "my-first-name";
var reg =/-(\w)/g;
var test = str.replace(reg,function($,$1){
return $1.toUpperCase();
});
console.log(test);
</script>
61、將aaaaabbbb字符串調(diào)換成bbbbaaaa形式
<script type="text/javascript">
var str = "aaaabbbb";
var reg = /(\w{4})(\w{4})/g;
console.log(str.replace(reg,"$2$1"));
</script>
