HTML：負責了一個頁面的結構
css: 負責了一個頁面的樣式
javascript: 負責與用戶進行交互。
javascript的歷時：
微軟： 蓋茨認爲未來是"視窗"的世界。
網景： 1995年推出了一款瀏覽器（導航者）和liveScript(校驗功能)，非常受歡迎
和sun公司合作，借用了Java的名字，把liveScript改名成JavaScript。70%市場份額
JavaScript的特點：
1、跨平臺
2、安全性（JavaScript的代碼不能直接訪問硬盤的內容）
JavaScript與Java的區別：
1、JavaScript是屬於網景公司產品，Java是sun公司的產品
2、JavaScript是基於對象的語言，Java是面向對象的語言。
3、JavaScript是解釋型語言，Java是解釋、編譯型語言
4、JavaScript是弱類型語言，Java是強類型語言
Java中聲明變量的時候必須要明確該變量的數據類型。
JavaScript聲明變量不需要明確是何種數據類型，任何的變量都是使用一個關鍵字var去聲明即可
如何編寫JavaScript的代碼？
方式一：可以使用<script> 進行編寫
格式：
<script type="text/javascript">
js代碼;
</script>
例：<scripttype = "text/javascript">
alert("哈哈");
</script>
方式二：引入外部的JavaScript文件
格式：<scriptsrc="1JavaScript.js"type="text/javascript"></script>
注意：1、<script>是有開始標籤與結束標籤的，千萬不要在一個標籤中結束了。
2、如果<script>已經用於引入了js文件，那麼該<script>標籤體就不能再寫js代碼了
javascript常用的函數：
alert("顯示的內容..“);彈出框
document.write("數據");//向頁面輸出數據...
網頁的註釋：
html <!--
css的註釋 /* 註釋的內容 */
JavaScript //註釋的內容單行註釋 /* 註釋的內容 */ 多行註釋
控制流程語句
if語句
格式：
if(判斷條件){
符合條件執行的代碼
}
if語句的特殊之處：
1、在JavaScript中的if語句條件不單止可以寫布爾表達式，還可以寫任何的數據
number 非0位true，0爲false
string 內容不能空是true，內容空的時候是false
undefinedfalse
NaNfalse
var workAge = 2;
var str = null;
var b;
if(b){
document.write("welcome");
}else{
document.write("baibai");
}
選擇語句：
switch(變量){
case 值1
break;
case值2
break;
case值3
break;
}
特殊之處：
1、 在JavaScript中case後面可以跟常量與變量還可以跟表達式
javascript的變量聲明：
格式：
var 變量名 = 數據;
聲明變量要注意的事項：
1、在JavaScript中聲明變量是 使用var關鍵字聲明的，JavaScript中的變量可以存儲任意的數據類型數據
2、JavaScript中變量數據類型是根據存儲的值決定的，可以隨時更改存儲數據的類型。
3、定義了多個同名的變量時，後定義的同名變量是覆蓋前面定義的同名變量。
4、聲明變量的時候可以省略var關鍵字，但是不建議省略
javascript的數據類型
typeof 查看變量的數據類型
使用格式：typeof 變量名
number 小數與整數
string 字符串 注意：JavaScript中沒有字符的概念，只有字符串，字符串可以卸載單引號或者雙引號中
boolean 布爾數據類型
undefined undefined代表該變量沒有定義呢
運算符：
+（加法、正數、連接符）
true 是1，false 是0；
vara = 1;
a =a + 1;
document.write("a+1="+ a +"<br/>");// 2
document.write("1+false:"+(1+false)+"<br/>");//1
document.write("1+true:"+ (1+true)+"<br/>");// 2
document.write("hello"+1);// hello1
document.write("<br/>");
除法：
vara = 10;
varb = 3;
document.write("除法運算是：" + (a/b) + "<br/>");// 如果兩個整數相除不能整除的時候結果還是小數
比較運算符
字符串與字符串的比較規則是：
情況1：能找到對應位置上的不同字符，那麼就比較第一個不同字符的大小
情況2：不能找到對應位置上的不同字符，這時候比較的是兩個字符串的長度
document.write("10大於3嗎？"+(10>3)+"<br/>");//true
document.write("10字符串大於3字符串嗎？"+("10">"3")+"<br/>");//false字符串與字符串比較
document.write("10大於字符串9嗎？"+(10>"9")+"<br/>");//true 字符串還可以和數字進行比較 凡是數字與字符串進行比較，會先把字符串轉換成
數字再進行 比較的。
邏輯運算符：
//沒有單與的
document.write((true&&true)+"<br/>");// true
document.write((true&&false)+"<br/>");// false
document.write((false&&true)+"<br/>");// false
document.write((false&&false)+"<br/>");// false
document.write((true||true)+"<br/>");// true
document.write((true||false)+"<br/>");// true
document.write((false||true)+"<br/>");// true
document.write((false||false)+"<br/>");// false
三目運算符
布爾表達式？值1：值2;
varage = 19;
document.write(age>18?"成年人":"未成年人");
字符串轉數字
parseInt() 可以把一個字符串轉換成整數
parseFloat() 可以把一個字符串轉換成小數
var a = "12";
a = 12.54;
a = "12354abcad1232";
a = "a112";// NAN not a number(不是一個數字)
a = "012";// 如果首位是0，那麼就先去除0再進行轉換
a = "0x10";// 如果一個字符串是以0x開頭，那麼會把字符串中的內容當成十六進制的數據處理的
var b = parseInt(a);/*parseInt 方法如果接收的字符串含有非數字的字符，那麼parse方法會從字符串的首個字符開始尋找，一直知道非數組字符爲止，然後就是用前面的數字字符轉換成數字*/
document.write("結果：" + b+ "<br/>");
var c = "3.14";
c = "10";//如果一個字符串是整數的，那麼使用parseFloat還是轉換成整數
c = "100a";
c = "a100";
c = parseFloat(c);
document.write("結果："+c+"<br/>");
javascript 提供了一個 isNaN 的方法讓我們判斷該字符串是否是一個數字
is not a number 不是一個數字
不是一個數字返回true，是一個數字返回false
document.write("123不是一個數字嗎？"+isNaN("123")+"<br/>");
循環語句0702：
if
switch
switch 語句的特殊之處：case後面可以跟常量與變量或者是表達式
循環語句：
while
格式：
while(判斷的條件){
循環體內容
}
var count = 0;
while(count<5){
document.write("helloworld"+"<br/>");
count++;
}
dowhile循環語句
do{
循環語句
}while(判斷條件);
//計算1-100奇數的總和
var num = 1;
var result = 0;
do{
if(num%2!=0){
result += num;
}
num++;
}while(num<=100);
document.write("結果："+result+"<br/>");
for循環語句：
格式
for(初始化語句;判斷的條件;循環後的語句){
循環體語句；
}
//需求：計算1-100偶數的總和
var result = 0;
for(var i = 1; i<=100; i++){
if(i%2==0){
result += i;
}
}
document.write("結果："+result+"<br/>");
//正方形* 5行5列
for(var i = 0; i<5; i++){
for(var j = 0; j<5; j++){
document.write("* ")
}
document.write("<br/>");
}
document.write("<hr/>");
//直角三角形
for(var i = 0; i < 5; i++){
for(var j = 0; j <= i; j++){
document.write("* ");
}
document.write("<br/>");
}
document.write("<hr/>");
//乘法口訣
for(var i = 1; i <= 9; i++){
for(var j = 1; j <= i; j++){
document.write(j+"*"+i+"="+(i*j)+" ");
}
document.write("<br/>");
}
for-in語句：
for(數據類型變量名 : 遍歷的目標){
}
for-in語句的格式：
for(var 變量名 in 遍歷的目標){
}
for-in語句的作用：
1、可以用於遍歷數組的元素 注意：使用for-in語句遍歷數組元素的時候遍歷出來是數組的下標。
2、可以用於遍歷對象的所有屬性數據 注意：使用for-in語句遍歷對象的屬性的時候，遍歷出來的是對象的屬性名。
with語句：有了with語句，在存儲對象屬性和調用方法時就不用重複指定對象
格式：
with(對象){
}
函數：
函數的定義格式：
function 函數名(形參列表){
函數體;
}
javascript的函數要注意的細節：
1、在JavaScript中函數 定義形參時是不能使用var關鍵字聲明變量的。
2、在JavaScript中的函數是沒有返回值類型的，如果函數需要返回數據給調用者，直接返回即可，如果不需要返回則不返回。
3、在JavaScript中是沒有函數重載的概念得，後定義的同名函數會直接覆蓋前面定義的同名函數。
4、在JavaScript中任何的函數內部都隱式的維護了一個arguments（數組）的對象，給函數傳遞數據的時候，是會先傳遞到arguments對象中，然後再由arguments 對象分配數據給形參
var str1 = new String("hello");
varstr2 = new String("hello");
document.write("兩個字符串的對象一樣嗎？"+(str1.toString()==str2.toString()));
創建一個字符串的方式：
方式1：
newString("字符串的內容");
方式2：
varstr = "字符串的內容";
字符串常用的方法：
Anchor() 生產錨點
Blink() 爲元素添加blink標籤
charAt() 返回指定索引位置處的字符
charCodeAt() 返回一個整數，代表指定位置上字符的Unicode編碼
concat() 返回字符串值，該值包含了兩個或更多個提供的字符串的連接
fontcolor() 把帶有COLOR屬性的一個HTML<FONT>標記放置在String對象中的文本兩端
indexOf() 返回String對象內第一次出現子字符串的字符位置
italics() 把HTML<I>標記放置在String對象中的文本兩端
link() 把一個有HREF屬性的HTML錨點放置在String對象中的文本兩端
replace() 返回根據正則表達式進行文字替換後的字符串的複製
split() 切割
substr() 截取子串
toUpperCase() 轉大寫
toLowerCase() 轉小寫
日期對象（Date)
var date = new Date();// 獲取到當前的系統時間
document.write("年:"+date.getFullYear()+"<br/>");
document.write("月:"+(date.getMonth()+1)+"<br/>");
document.write("日:"+date.getDate()+"<br/>");
document.write("時："+date.getHours()+"<br/>");
document.write("分："+date.getMinutes()+"<br/>");
document.write("秒："+date.getSeconds()+"<br/>");
定時方法
window.setInterval("代碼","每隔指定的毫秒數");//setInterval 定時方法，第一個參數要指定調用的代碼，第二個參數是每隔指定的毫秒數調用指定的代碼
Number 對象
創建Number對象的方式：
方式1：
var 變量 = new Number(數字);
方式2：
var 變量 = 數字;
常用的方法：
toString() 把數字轉換成指定進制形式的字符串
toFixed() 指定保留小數位,而且還帶有四捨五入
Math 對象常用的方法：
ceil() 向上取整
floor() 向下取整
random() 隨機數方法// 產生的僞隨機數介於 0 和 1 之間（含0，不含1）
round() 四捨五入
Array數組對象：
創建數組的方式1：
var 變量名 = new Array();// 創建一個長度爲0的數組
創建數組的方式2：
var 變量名 = new Array(長度); // 創建一個指定長度的數組對象
創建數組的方式3：
var 變量名 = new Array("元素1","元素2",......);// 給數組指定元素創建數組的對象
創建數組的方式4：
var 變量名 = ["元素1","元素2",......];
數組要注意的細節：
1、 在JavaScript中數組的長度是可以發生變化的，
數組常用的方法：
concat() 把arr1與arr2的數組元素組成一個新的數組返回
join() 使用指定的分隔符把數組中的元素拼裝成一個字符串返回
pop() 移除數組中的最後一個元素並返回該元素
push() 將新元素添加到一個數組中，並返回數組的新長度值
reverse() 翻轉數組的元素
shift() 移除數組中的第一個元素並返回該元素
slice() 指定數組的開始索引值與結束索引值截取數組的元素，並且返回子數組
sort() 返回一個元素已經進行了排序的Array對象
splice() 從一個數組中移除一個或多個元素，如果必要，在所移除元素的位置上插入新元素，
自定義對象：
在JavaScript中沒有類的概念，只要有函數即可創建對象
自定義對象的方式1：使用無參的函數創建對象
例子：
function Person(){}
var p = new Person();// 創建了一個Person對象了
p.id = 110;
p.name = "張三";
方式2：使用帶參的函數創建對象
function Person(id,name){
this.id = id;
this.name = name;
this.say = function(){
alert(name+"呵呵");
}
}
varp = new Person(110,"李四");// 創建對象
方式3：使用Object函數創建對象
var p = new Object();
p.id = 110;
p.name = "張三";
方式4：使用字面量的方式創建
var p = {
id : 110,
name : "張三",
say : function(){
alert(this.name+"哈哈");
}
}
需求：想把getMax與searchEle方法添加到數組對象中
function Array(){
this.prototype= new Object();
}
prototype(原型):
prototype注意的細節：
1、prototype是函數(function)的一個必備屬性（書面一點的說法是"保留屬性")(只要是function，就一定要一個prototype屬性）
2、prototype的值是一個對象
3、可以任意修改函數的prototype屬性的值
4、一個對象會自動擁有prototype的所有成員屬性和方法
JavaScript組成部分：
1、EMCAScript(基礎語法)
2、BOM(BrowserObject Model)瀏覽器對象模型
3、DOM
瀏覽器對象模型中把瀏覽器的各個部分都是用了一個對象進行描述，如果我們要操作瀏覽器的一些屬性，我就可以通過瀏覽器對象模型的對象進行操作
window 代表了一個新開的窗口
location 代表了地址欄對象
screen 代表了整個屏幕的對象
window 對象常用的方法：
oper() 打開一個新的窗口
// resizeBy() 更改窗口的當前位置縮放指定的x和y偏移量 //過時，瀏覽器不支持了
resizeTo() 將窗口的大小更改爲指定的寬度和高度值
moveBy() 相對於原來的窗口移動指定的x,y值
moveTo() 將窗口左上角的屏幕位置移動到指定的x和y位置
setInterval() 每經過指定毫秒值後就會執行指定的代碼
clearInterval() 根據一個任務的ID取消定時任務
setTimeout() 經過指定毫秒值後執行指定的代碼一次
注意：使用window對象的任何屬性與方法都可以省略window對象不寫的
事件：
註冊事件的方式：
方式一：直接在html元素上註冊
<body οnlοad="ready()">
function ready(){
alert("body的元素被加載完畢了。。。");
}
方式二：可以用js代碼先找到對應的對象再註冊 // 推薦使用
var bodyNode =document.getElementById("body");
bodyNode.onload = function(){
alert("body的元素被加載完畢...");
}
常用的事件：
鼠標點擊相關：
onclick 在用戶用鼠標左鍵單擊對象時觸發
ondblclick 當用戶雙擊對象時觸發
onmousedown 當用戶用任何鼠標按鈕單擊對象時觸發
onmouseup 當用戶在鼠標位於對象之上時釋放鼠標按鈕時觸發
鼠標移動相關：
onmouseout 當用戶將鼠標指針移出對象邊界時觸發
onmousemove 當用戶將鼠標劃過對象時觸發
焦點相關的：
onblur 在對象失去輸入焦點時觸發
onfocus 當對象獲得焦點時觸發
其他：
onchange 當對象或選中區的內容改變時觸發
onload 在瀏覽器完成對象的裝載後立即觸發
onsubmit 當表單將要被提交時觸發
地址欄對象(Location)：
href 設置以及獲取地址欄的對象
reload() 刷新當前的頁面
Screen 對象
availHeight 獲取系統屏幕的工作區域高度，排除Microsoft Windows 任務欄
availWidth 獲取系統屏幕的工作區域寬度，排除Windows 任務欄
height 獲取屏幕的垂直分辨率
width 獲取屏幕的水平分辨率
DOM(Document Object Model)文檔對象模型
一個HTML頁面被瀏覽器加載的時候，瀏覽器就會對整個HTML頁面上的所有標籤都會創建一個對應的對象進行描述，我在瀏覽器上看到的信息只不過就是這些html對象的屬性信息而已。我們只要能找到對應的對象操作對象的屬性，則可以改變瀏覽器當前顯示的內容
varallNodes = document.all;// 獲取html文件中的所有標籤節點
for(var i=0; i<allNodes.length; i++){
alert(allNodes[i].nodeName);//標籤的名字 nodeName;
}
通過html元素的標籤屬性找節點
document.getElementById("html元素的id");//根據ID屬性值找元素
document.getElementsByTagName("標籤名");// 根據標籤名獲取所有的標籤對象
document.getElementsByName("html元素的name");// 根據標籤的name屬性值去找對應的標籤，返回的是一個數組
// innerHTML 是用於設置標籤體的內容的，value是用於設置標籤的value屬性值
通過關係（父子關係、兄弟關係）找標籤
parentNode 獲取當前元素的父節點
childNodes 或取當前元素的所有下一級子元素
firstChild 獲取當前節點的第一個子節點
lastChild 獲取當前節點的最後一個子節點
nextSibling 獲取當前節點的下一個節點 （兄節點）
previousSibling 獲取當前節點的上一個節點（弟節點）
我們可以通過標籤的類型進行判斷篩選
文本節點的類型：3
註釋的節點類型：8
標籤節點的類型：1
創建節點、插入節點、設置節點的屬性
document.createElement("標籤名") 創建新元素節點
elt.setAttribute("屬性名","屬性值") 設置屬性
elt.appendChild(e) 添加元素到elt中最後的位置
插入目標元素的位置
elt.insertBefore(new,child); 添加到elt中，child之前 // 參數1：要插入的節點
elt.removeChild(eChild) 刪除指定的子節點
插入目標元素的位置
elt.insertBefore(newNode,oldNode); 添加到elt中，child之前
注意：elt必須是oldNode的直接父節點
elt.removeChild(child) 刪除指定的子節點
注意：elt必須是child的直接父節點
正則表達式的創建方式：
方式1：
/正則表達式/模式
方式2：
newRegExp("正則表達式",模式);
正則表達式對象常用的方法：
test 使用正則對象去匹配字符串，如果匹配成功返回true，否則返回false
exec 根據正則表達式去查找字符串符合規則的內容
模式：
g (全文查找出現的所有 pattern)
i (忽略大小寫)