一個html頁面由那幾部分組成的？
html(超文本標記語言)、css(層疊樣式表)、js(動態(tài)腳本語言)(操作頁面上所有元素，讓元素具有動態(tài)的效果)

前端工程師工作的內容：
拿到UI設計圖：切圖---->html+css靜態(tài)布局----->用js寫一些動態(tài)效果----->ajax和后臺進行交互，把數(shù)據(jù)綁定到頁面上---->用nodejs服務平臺做源代碼的管理---->用nodejs做后臺

用到的開發(fā)工具有：
Dw、sublime、webstrom、hbuild、eclipse......

將css引入到頁面中的幾種方式？
1、行內樣式  style=””
2、內嵌式（將css樣式寫在style標簽塊中，放到head里面）
3、外鏈式  <link>
4、導入式 @import  “index.css”(不常用)

將js引入到頁面中的幾種方式？
1、行內引入（不推薦）onclick=”alert(‘xxx’)”
2、內嵌式 <script> </script>  將js代碼寫在script腳本塊中間
3、外鏈式 將js代碼寫在外面的文件中，通過src引入
（在外鏈式中，script腳本塊中間不可以寫js代碼，寫了也不執(zhí)行）

為什么先加載css，后加載js？
1、如果在網速慢的情況下，不先加載css，會先出現(xiàn)html結構然后出現(xiàn)css，會有短暫的亂碼狀態(tài)
2、js通常是獲取html標簽給予動態(tài)操作效果的

Js中常用的四種輸出方式？
alert() 瀏覽器的彈框
document.write() 頁面中輸出內容
console.log()  控制臺輸出
innerHTML/innerText:向指定元素中添加內容


Js層級關系？
瀏覽器---->文檔--->html----->head/body--->....

瀏覽器-----在js中叫做window，我們把window稱為瀏覽器對象
文檔------在js中叫做document，我們把document稱為文檔對象
Html、head、body叫做元素對象



js主要有哪幾大部分？
Js:javascript是一門輕量級的腳本語言，主要分為三大模塊：
1、ECMAScript:定義了js里面的命名規(guī)范、變量、數(shù)據(jù)類型、基本語法、操作語句等最核心的東西
2、DOM  document  object  model 文檔對象模型
3、BOM  browser  object  model 瀏覽器對象模型

Js有哪些命名規(guī)范？
1、js嚴格區(qū)分大小寫
2、使用駝峰命名法
   1>首字母小寫，其余每個有意義的單詞首字母大寫
   2?可以使用數(shù)字、字母、下劃線、$（數(shù)字不能作為首位
3、不能使用關鍵字和保留字


Js中的變量和數(shù)據(jù)類型？
Js中的變量是一個抽象的概念，變量是用來存儲值和代表值。

在js中定義一個變量非常簡單：
var name=’張三’; 定義一個變量name，把字符串張三賦給這個變量 。

Js中的變量是松散類型的：通過var變量名就可以存儲任何數(shù)據(jù)類型。
比如：
var num=12;
var name=”張三”
var boo=true
var n=null
var m=undefined
var obj={}        //對象數(shù)據(jù)類型
var ary=[1,2,3]    //數(shù)組  也是對象數(shù)據(jù)類型
var reg=/^\d$/    //正則  也是對象數(shù)據(jù)類型
var fn=function(){}  //函數(shù)數(shù)據(jù)類型

js中的數(shù)據(jù)類型分類：
1、基本數(shù)據(jù)類型：
   數(shù)字(number)、字符串(string)、布爾(boolean)、null、undefined/2、、引用數(shù)據(jù)類型： 
2、對象數(shù)據(jù)類型(object)
   函數(shù)數(shù)據(jù)類型(function)






數(shù)據(jù)類型詳細解讀：
number數(shù)據(jù)類型中的NaN、isNaN、Number、parseInt/parseFloat
boolean數(shù)據(jù)類型中的!和!!的作用
object數(shù)據(jù)類型是由屬性名和屬性值組成的
Js中常用的內置類：Object、Array、Date、ReExp、String

number數(shù)據(jù)類型：整數(shù)、負數(shù)、0、小數(shù)、NaN (NaN != NaN )
isNaN():檢測一個值是否為有效數(shù)字，是有效數(shù)字返回false
思考:isNaN('123')；
Number():強制將其他的數(shù)據(jù)類型轉換為number類型，要求如果是字符串，字符串中一定都需要是數(shù)字才可以轉換

非強制數(shù)據(jù)類型轉換
parseInt()  從左到右，一個個字符查找，把是數(shù)字的轉換為有效數(shù)字，中途如果遇到了一個非有效數(shù)字，就不繼續(xù)查找了
parseFloat()和上面一樣，可以多識別一個小數(shù)點

boolean數(shù)據(jù)類型：true  false
! 一個嘆號是取反，首先將值轉換為布爾類型的，然后再取反
!! 兩個嘆號：相當于轉換為布爾類型

數(shù)據(jù)類型轉換的規(guī)則:
1、如果只有一個值，判斷這個值是真假，遵循：只有0  NaN  “”  null   undefined,返回的是false，其余的是true
2、如果兩個值比較是否相等，遵循這個原則：val1==val2 兩個值可能不是同一類型的，如果是==比較的話，會進行默認類型轉換
  1>對象==對象  永遠不相等
  2>對象==字符串   先將對象轉換為字符串(調用toString()方法)，然后在進行比較。
                     注意：[] 轉換為字符串是””     {}轉換成字符串"[object Object]" 

      3>對象==布爾類型  對象先轉換為字符串(toString()),然后把字符串再轉換為數(shù)字(Number())類型,布爾類型也轉換為數(shù)字(true是1  false是0)，最后讓兩個數(shù)字比較。
                             注意：Number("")空字符串轉換成Number類型---->0
                             思考: []==0   []==false   [""]==false     ?

      4>對象==數(shù)字  對象先轉換為字符串(toString()),然后把字符串轉換為數(shù)字(Number)
      5>數(shù)字==布爾  布爾類型轉換為數(shù)字     思考：2==true
      6>數(shù)字==字符串 字符串轉換為數(shù)字
      7>字符串==布爾  都換為數(shù)字
      8>null==undefined  結果是true
      9> null或者undefined和其他數(shù)據(jù)類型比較都不相等
3、除了==是比較，===也是比較(判斷是否絕對相等)，如果數(shù)據(jù)類型不一樣
   例如：var1===val2 如果數(shù)據(jù)類型不一樣，肯定不相等    思考:0==false  0===false

數(shù)據(jù)類型-object對象數(shù)據(jù)類型
特點：由多組鍵值對組成，由多組[屬性名和屬性值]組成
屬性名和屬性值是用來描述這個對象特征的比如：var obj={name:’張三’,age:18}

創(chuàng)建對象有2種方式：
1、字面量創(chuàng)建方式  var obj={}
2、實例創(chuàng)建方式    var obj=new Object();
  1>給對象添加屬性名和屬性值  obj.name=’張三’  或者 obj[“name”]=’張三’
  2>修改對象的屬性名和屬性值  obj[“name”]=’李四’
  3>獲取屬性名和屬性值  console.log(obj[“name”]) 或者 console.log(obj.name) 如果屬性民不存在默認返回undefined
  4>刪除屬性名和屬性值  obj.name=null//假刪除    delete obj.name//真刪除

對象數(shù)據(jù)類型中的object對象數(shù)據(jù)類型，還可以細分：對象類(Object)、數(shù)組類(Array)、正則類(RegExp)、時間類(Date)、Math數(shù)學函數(shù)等等對應的實例對象、數(shù)組、正則、時間等等

Js對象、類、實例的區(qū)別：對象是泛指，js中萬物皆對象，類是對象的組成部分，實例是類中的一個具體的事物

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別
思考：
var num1=12;
var num2=num1;
num2++;
console.log(num1);

var obj1={name:’張三’};
var obj2=obj1;
obj2.name=’李四’
console.log(obj1.name)

發(fā)現(xiàn)：基本數(shù)據(jù)類型沒有跟著改變，引用數(shù)據(jù)類型跟著改變了。
結論：基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的本質區(qū)別：基本數(shù)據(jù)類型操作的是值，而引用數(shù)據(jù)類型操作的是內存地址

typeof檢測數(shù)據(jù)類型
typeof
返回值是字符串，包含了數(shù)據(jù)類型字符  “number”、 “string” 、“boolean” 、“undefined” “object” 、“function”
typeof的局限性：不能檢查object下細分的類型，檢查返回的都是“object” 

思考:console.log(typeof (typeof (typeof  [])) )

js中的三個判斷
If else、三元運算符、switch  case
1>If  else if  else 最常用的判斷，能都解決所有的判斷需求
2>三元運算符：應用于簡單的if else情況
3>switch  case：應用于不同情況下的不同操作
作業(yè)：背景切換

Js中的三個循環(huán)
For循環(huán)
For in循環(huán)
While循環(huán)

for循環(huán)四部曲：
1、設置初始值  var i=0
2、設置循環(huán)執(zhí)行條件  i<5
3、執(zhí)行循環(huán)體中的內容 {包起來的部分}
4、每一輪循環(huán)完成后都執(zhí)行我們的i++累加操作

break、continue
相同點：
在循環(huán)體中，只要遇到這2個關鍵字，循環(huán)體中break、continue后面代碼就不執(zhí)行了
不同點：
break:在循環(huán)體中，出現(xiàn)break，整個循環(huán)就直接的結束了,i++最后的累加操作也不執(zhí)行
continue：在循環(huán)體中，出現(xiàn)continue，當前的這一輪循環(huán)結束，繼續(xù)進行下一輪的循環(huán),
I++繼續(xù)執(zhí)行
思考：
for(var i=0;i<10;i++){
    if(i<=5){
        i+=2;
        continue;
    }
    i+=3;
    break;
    console.log(i);
}
console.log(i);
for in 循環(huán):用來循環(huán)一個對象中的屬性名和屬性值
對象中有多少鍵值對我們就循環(huán)多少次
順序問題：首先循環(huán)數(shù)字的屬性名（按照從小到大），在把剩下的屬性名按照我們寫的順序循環(huán)
 for(var key in value){
     console.log(key)//每一次循環(huán)獲取的屬性名
     console.log(value[key])//獲取屬性值
 }
作業(yè)：隔行變色
      選項卡切換
      隔行變色的99乘法表
    
數(shù)據(jù)類型中的函數(shù)數(shù)據(jù)類型
 1、function 函數(shù)---->具備某個功能的一個方法，方法本身沒有什么意義的，只有執(zhí)行這個方法實現(xiàn)了對應功能才有自己的價值
 2、函數(shù)由兩部分組成：創(chuàng)建一個函數(shù)、執(zhí)行這個函數(shù)
 3、創(chuàng)建一個函數(shù)可以執(zhí)行多次，一般情況下，每次執(zhí)行函數(shù)和上一次執(zhí)行沒有任何的關系

舉例：
function sum(){
    var total=null;
    total=1+1;
    console.log(total);
}
sum;//sum后面不加()，代表的就是當前函數(shù)本身 sum
sum();//sum后面加(),代表的是執(zhí)行當前函數(shù)  
函數(shù)執(zhí)行的目的：把函數(shù)之前存儲的那些字符串編程js代碼，讓后讓js代碼從上到下依次執(zhí)行

當瀏覽器加載頁面的時候首先會提供一個供js代碼執(zhí)行的環(huán)境--->全局作用域
創(chuàng)建一個函數(shù) 3個步驟
1>開辟新的內存空間，瀏覽器為其分配一個16進制的地址，我們假設地址是xxxfff000
2>把函數(shù)體中的js代碼當做字符串存儲到內存當中,創(chuàng)建的時候都是一堆字符串，函數(shù)本身沒有任何意義
3>在把這個地址賦值給當前的函數(shù)名sum->sum

函數(shù)執(zhí)行 2個步驟
1>當函數(shù)執(zhí)行的時候，首先會提供一個函數(shù)體中代碼執(zhí)行的環(huán)境--->私有作用域
2>把函數(shù)體中的代碼字符串變?yōu)閖s代碼從上到下執(zhí)行

函數(shù)執(zhí)行的時候，首先會形成一個新的私有作用域，供函數(shù)體中的代碼從上往下執(zhí)行，形成的那個私有的作用域，保護了里面的私有變量的成員不受外界的干擾(外界也獲取不到也修改不了)-->我們把函數(shù)執(zhí)行的時候形成的這種保護機制叫做‘閉包’;

形參
案例：隨便傳入兩個數(shù)，求和
注意:如果是兩個形參(入口)，調用的時候只傳入一個實參，另一個默認的形參值是undefined。




返回值
return：當前函數(shù)提供的出口，因為不提供出口，閉包機制導致了函數(shù)外面無法獲取函數(shù)里面的這個值，如果想在外面用這個值的話，需要用return  把這個值返回出來——>返回值機制(外面想用哪個，就把哪個值返回)
函數(shù)中如果沒有return默認返回的是undefined
return;--->返回undefined
在函數(shù)體中return后面代碼都不會執(zhí)行了

arguments
案例：任意數(shù)求和：隨便給我?guī)讉€數(shù)（具體幾個不知道，就沒有辦法定義形參的個數(shù)了），求出和。
arguments：不管寫不寫形參，也不管是否傳遞值，arguments始終是存在的，用來接收函數(shù)傳來進來參數(shù)的的一個集合

匿名函數(shù)：
1>自執(zhí)行函數(shù):定義函數(shù)和執(zhí)行函數(shù)一起執(zhí)行了  （+ - ! ~） ()()
2>函數(shù)表達式 odiv.onclick= function () {}

數(shù)組
數(shù)組也是對象，我們看到的是它的屬性值，屬性名是索引。
length：數(shù)組的長度。  通過.或者[]來訪問   數(shù)組中有一個叫做length的屬性，這個屬性是瀏覽器天生就給數(shù)組添加的（不是我們自己編寫的屬性）
案例：for循環(huán)數(shù)組  for in循環(huán)

數(shù)組中的常用15個方法
1.方法的作用
2.需要傳遞那些參數(shù)
3.是否有返回值，返回值的什么
4.通過此方法是否對原來的數(shù)組產生了什么影響

關于數(shù)組的增加、修改、刪除
   添加數(shù)組末尾一項: arr.push()  或 arr[x]  或 arr[arr.length] 或splice()
   刪除數(shù)組最后一項：arr.pop() 或 arr.length--
   刪除數(shù)組中的首項：arr.shift()
   向數(shù)組開頭增加一項：arr.unshift()
   增、刪、改 arr.splice(n,m) 從索引n開始，刪除m個元素，把刪除的內容以一個新的數(shù)組返回，原來的數(shù)組改變
    刪除
   arr.splice(n) 從索引n開始，刪除到數(shù)組末尾
   arr.splice(0); 清空數(shù)組，把之前的數(shù)組克隆了一份一模一樣的
   arr.splice();一個參數(shù)也沒有，返回的是一個空數(shù)組
    修改
   arr.splice(n,m,x)從索引n開始，刪除m個元素，用x替換刪除的部分
     增加
   arr.splice(n,0,x)從索引n開始，一個都不刪（返回的是一個空數(shù)組），把x增加到索引n的前面，原來的數(shù)組改變
   思考：用splice的方法完成添加數(shù)組末尾一項，刪除一項
   如果直接是arr[n]=m; 如果n是前面不連續(xù)，數(shù)組中會出現(xiàn)undefined

關于數(shù)組的截取和拼接
arr.slice(n,m) 從索引n開始，一直到索引m（不含m），將找到的部分數(shù)組返回，原來的數(shù)組不變
arr.slice(n) 從索引n開始周一直找到數(shù)組末尾
arr.slice(0) 把原來的參數(shù)克隆一模一樣的
arr.concat(arr1):把兩個數(shù)組拼接到一起，原來的數(shù)組不變
arr.concat()把arr克隆一份一模一樣的數(shù)組

把數(shù)組轉換為字符串
arr.toString()把數(shù)組轉換為字符串，原來的數(shù)組不變
arr.join('+') 把數(shù)組按照指定的分隔符拼接成字符串，原來的數(shù)組不變
eval()  js中把字符串變成js表達式執(zhí)行的一個方法
思考:給數(shù)組中的每一項進行相加求和

排序和排列
   arr.reverse()把數(shù)組倒過來排序，原來的數(shù)組改變
    arr.sort()按照數(shù)組的第一位從小到大排序（只能處理10以內的數(shù)組進行排序）
      由小到大
      arr.sort(function (a,b) {
            return a-b;
      });
      由大到小
      arr.sort(function (a,b) {
            return b-a;
      })
只有在標準瀏覽器中兼容的方法，在ie6~8下不兼容
     indexOf()、lastIndexOf()  (字符串中也有這兩個方法,字符串中的這兩個方法兼容所有的瀏覽器，而數(shù)組的這兩個方法是不兼容的)
 indexOf()、lastIndexOf() 當前內容在數(shù)組中第一次/最后一次出現(xiàn)位置的索引，如果數(shù)組中沒有這一項，返回的結果是-1，如果有這一項，索引是幾就返回幾，原來的數(shù)組不變
forEach和map
forEach：數(shù)組中有幾項，我們的函數(shù)就執(zhí)行幾次，原來的數(shù)組不變
map和forEach的語法是一樣的，但是比forEach多加了一個把原來內容進行替換的功能,原來的數(shù)組不變，返回的新數(shù)組會變化 


遞歸：當前函數(shù)自己調用自己執(zhí)行    （了解）
思考：實現(xiàn)1-100之間求和（用遞歸的方法實現(xiàn)）

DOM

DOM：document object model 文檔對象模型
在DOM中提供了很多獲取元素的方法和之間的關系屬性以及操作這些元素的方法    
DOM模型就是描述整個html頁面中節(jié)點關系的圖譜

document.getElementById('tab');
document.getElementsByTagName('div')
document.getElementsByName('a')  //通過name來獲取一組元素  //在ie下只對表單元素起作用
document.getElementsByClassName('tab')//獲取多個這幾個方法，即使你獲取的一個，它也是一個集合    
document.documentElement//獲取html元素
document.body//獲取body元素
獲取頁面的寬度 兼容所有瀏覽器的獲取當前屏幕的寬度
var curWidth=document.documentElement.clientWidth||document.body.clientWidth;
在移動端獲取元素的常用方法(因為ie6~8下不兼容)
document.querySelector();//獲取一個
document.querySelectorAll();//獲取多個

練習:全選反選

獲取關系的屬性
    odiv.childNodes 獲取元素所有子節(jié)點
    odiv.children  獲取元素所有子元素
    odiv.parentNode 獲取元素父親節(jié)點
    odiv.previousSibling 獲取上一個哥哥節(jié)點
    odiv.previousElementSibling獲取上一個哥哥元素
    odiv.nextSibling 獲取下一個弟弟節(jié)點
    odiv.nextElementSibling 獲取下一個弟弟元素
    odiv.firstChild獲取所有子節(jié)點中的第一個節(jié)點
    odiv.lastChild獲取所有子節(jié)點中的最后一個節(jié)點


節(jié)點:元素  標簽 文字  注釋……都是節(jié)點
在js中我們需要掌握的節(jié)點類型
                        nodeType      nodeName     nodeValue
Js中的節(jié)點類型：          
元素節(jié)點（元素標簽）       1          大寫的標簽名    null
文本節(jié)點（文字）           3          #text            文字內容
注釋節(jié)點（注釋）           8          #comment        注釋內容
document                   9          #document       null



動態(tài)創(chuàng)建一個元素對象
對節(jié)點的操作
添加
父級.appendChild(要添加的元素) 追加子元素
父級.insertBefore(添加誰,被插入到誰之前) 在指定元素前面添加一個新的元素
刪除
父級.removeChild 刪除子節(jié)點
克隆
Obj.cloneNode()//克隆元素  true把元素里面的所有元素都克隆，默認是false，只克隆當前的
替換
父級.replaceChild(新節(jié)點，被替換的節(jié)點)

增加元素的屬性名和屬性值  
1>Obj.setAttribute(屬性名,屬性值)  更改頁面的結構 ，移除用removeAttribute
getAttribute獲取
2>通過.的形式設置  不改結構
練習：動態(tài)創(chuàng)建遮罩層

Math方法和應用
    Math.abs();
    Math.ceil();
    Math.floor();
    Math.round();
    Math.max();
    Math.min();
    Math.random(); //范圍是 >=0  <1
    Math.round();
思考：隨機取出0 或1
      隨機取出0-10之間的整數(shù) 
      隨機取出10-20之間的整數(shù)
      隨機取出20-30之間的整數(shù) 
      隨機取出n-m之間的整數(shù) 
結論：Math.round(Math.random()*(m-n)+n);

作業(yè)：點擊隨機出現(xiàn)驗證碼

字符串常用的方法及應用（String類介紹 ）
 一個字符串是由多個字符組成的   

str.length 獲取字符串中字符的個數(shù)
字符串中存在索引，也是從0開始的
空格、換行這些特殊符號也是一個字符

str.charAt(n); 獲取指定索引位置的字符
str.charCodeAt(n);獲取指定位置的字符對應的ASII值
ASII值：每一個字母、漢字、特殊符號都有一個對應的碼值(Unicode)

    字符串的截取
    var str='wo sohi zhaonwg xiao huoan';
    str.substr(n,m)從索引n截取m個字符
    str.substring(0,5);//從索引n開始，找到索引m處(不包含m)，將找到的字符返回
    str.slice(n,m);//從索引n開始，找到索引m處(不包含m)，將找到的字符返回  slice支持負值索引

    查找字符的索引
     str.indexOf(字符)//獲取指定字符在字符串中第一次出現(xiàn)的索引的位置
     str.lastIndexOf(字符)//獲取指定字符在字符串中最后一次出現(xiàn)的索引位置
     如果沒有這個字符，返回的是-1，基于這個理念，我們經常用這兩個方法來判斷字符串中是否包含某個字符

    大小寫轉換
      str.toLowerCase();
      str.toUpperCase()

     替換
       str.replace(要替換的老字符，替換成的新字符);
       在不使用正則的情況下，調用一次方法，只能替換一次
       一般情況下，都是作用正則來替換的

    字符串轉換為數(shù)組
    將字符串按照指定的分隔符拆分成數(shù)組
    string.split('+');根據(jù)+來拆分成數(shù)組
    string.split('');將每一個字符拆分成數(shù)組

作業(yè)：
   var time="2017-2-9  11:59:3";
   2017年02月09日  11點59分03秒    

Date日期

練習1：獲取當前時間
練習2：倒計時
練習3：鐘表