JavaScript

• JavaScript是運(yùn)行在瀏覽器端的腳本語言，主要解決的是前端與用戶交互的問題，包括使用交互與數(shù)據(jù)交互

# js作用
1.制作網(wǎng)頁的行為動作
2.表單驗(yàn)證
#注釋
// 單行注釋

/* 多行注釋
    1、...
    2、...
*/
# 前端三大塊
1.HTML: 頁面結(jié)構(gòu)（Html--結(jié)構(gòu)--內(nèi)容）
2.CSS: 頁面表現(xiàn)：元素大小、顏色、位置、隱藏或顯示、部分動畫效果（Css--樣式表現(xiàn)---美化）
3.JavaScript: 頁面行為: 部分動畫效果、頁面與用戶的交互、頁面功能（Js--行為--頁面動作）

JavaScript嵌入頁面的方式

1.行間事件（需要用戶觸發(fā)事件）
<input type="button" name="" onclick="alert("ok!");">
2.頁面script標(biāo)簽嵌入
<script type="text/javascript">
    alert("ok")；
</script>
3.外部引入
<scrit type="text/javascript" src="js/index.js"></script>

DOM

• 文檔對象模型（Document Object Model,簡稱DOM),它給文檔提供給了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式

#根標(biāo)簽（元素）HTML
#DOM通過自己的表現(xiàn)方式：把所有的html標(biāo)簽形成一個倒置的樹狀結(jié)構(gòu)圖（各個節(jié)點(diǎn)）

獲取元素的方法

• 可以使用內(nèi)置對象那個document 的getElementByld方法來獲取頁面上設(shè)置了id屬性的元素，獲取到一個html對象，然后將它復(fù)制給一個變量

#將javascript語句放到window.onload觸發(fā)的函數(shù)里面，獲取元素的語句會在頁面加載完后才執(zhí)行
<script type="text/javascript">
    #js入口函數(shù)
    #需求：保證瀏覽器先讀取html+css，讀取完之后，返回讀取的js命令
    #js中小括號一般寫參數(shù)或條件；大括號都是書寫命令
    #當(dāng)瀏覽器窗口加載完成后(html+css讀取完成之后)，要執(zhí)行大括號里面的命令
    window.onload = function(){
        #document是整個網(wǎng)頁文檔，搜索范圍最大
        #getElementById--通過id名查找元素，保證頁面確實(shí)有這個id
        var oDiv1 = document.geteElementById("div1");        
    }
</script>
..................
<div id ="div1">這是一個div元素</div>

操作元素屬性

• 獲取的頁面元素，就可以對頁面元素的屬性進(jìn)行操作，屬性的操作包括屬性的讀和寫

#操作元素屬性
var 變量 = 元素.屬性名 （讀取屬性）
元素.屬性名 = 新屬性值 （改寫屬性）
<script>
var oLink = document.geteElementById("link");
        oLink.;
..............
<a href="###" id="link">超鏈接</a>
</script>

# 屬性名在js中的寫法
1. html的屬性和js里面的屬性寫法一樣
2. "class"屬性寫成"className"
3. "style"屬性里面的屬性，有橫杠的改成駝峰式，比如："font-size",改成"fontSize"
4. innerHTML可以讀取或者寫入標(biāo)簽包裹的內(nèi)容

變量

• JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。定義變量需要用關(guān)鍵字"var"

# 5種基本數(shù)據(jù)類型：
1. number 數(shù)字類型
2. string 字符串類型
3. boolean 布爾類型 true 或 false
4. undefined 未定義類型， 變量聲明未初始化，它的值就是undefined
5. 對象類型 null空對象類型，有值的對象類型，如果定義的變量將來準(zhǔn)備保存對象，可以將變量初始化為null，在頁面上獲取不到對象，返回的值就是null
#檢測數(shù)據(jù)類型
typeof(數(shù)據(jù))
#同時定義多個變量可以用","隔開，公用一個"var" 關(guān)鍵字
var iNum = 45, sTr = "qwe"， sCount = "68";

# 變量、函數(shù)、屬性、函數(shù)參數(shù)命名規(guī)范
1. 區(qū)分大小寫
2. 第一個字符必須是字母、下劃線（_）或者美元符號（$）
3. 其他字符可以是字母、下劃線、美元符號或數(shù)字

函數(shù)

• 函數(shù)就是重復(fù)執(zhí)行的代碼片

# 函數(shù)的定義和執(zhí)行
<script type="text/javascript">
    // 函數(shù)定義 
    function fnAlert(){
        alert(sTr);
    };
    // 調(diào)用函數(shù)
    fnAlert(); 
</script>

# 變量與函數(shù)預(yù)解析

- JavaScript 解析過程分為兩個階段， 先是編譯階段，然后執(zhí)行階段，在編譯階段會將function定義的函數(shù)提前，并且將var定義的變量聲明提前，將它賦值為undefined

<script type="text/javascript">
        fnAlert();   // 彈出 hello！
        alert(iNum)；   // 彈出 undefied 說明變量不支持預(yù)解析
        function fnAlert(){
            alert("hello！")；
        };
        var iNum = 123；
</script>

• 函數(shù)傳參: javascript的函數(shù)中可以傳遞參數(shù)， 參數(shù)不能設(shè)置缺省值

#return 關(guān)鍵字的作用
1.返回函數(shù)中的值或者對象
2.結(jié)束函數(shù)運(yùn)行

條件語句

• 通過條件來控制程序的走向， 就需要用到條件語句

#條件運(yùn)算符
==、===、>、>=、<、<=、!=、&&（并且）、||（或者）、！（否）

事件屬性及匿名函數(shù)

• 事件屬性：元素上除了有樣式，id等屬性外，還有事件屬性,將函數(shù)名稱賦值給元素事件屬性，可以將事件和函數(shù)關(guān)聯(lián)起來
• 匿名函數(shù)：定義的函數(shù)可以不給名稱?？梢詫⒛涿瘮?shù)的定義直接賦值給元素的事件屬性來完成事件和函數(shù)的關(guān)聯(lián)，這樣可以減少函數(shù)命名，并且簡化代碼。函數(shù)如果做公共函數(shù)，就可以寫成匿名函數(shù)形式

#常用的事件屬性
鼠標(biāo)點(diǎn)擊事件屬性（onclick）
鼠標(biāo)滑過事件屬性（onmouseover）
鼠標(biāo)離開事件屬性（onmouseout）

#*****語法：事件源.事件類型 = 匿名函數(shù)
#***事件源：操作的對象
#***事件類型：操作方法
#匿名函數(shù)：function(){}--放命令