一、什么是JavaScript彻秆？

概念：JavaScript是運行在瀏覽器端的'腳本語言'，JavaScript是瀏覽器解釋執(zhí)行的

作用：JavaScript主要解決的是前端與用戶交互的問題结闸，包括'使用交互'與'數(shù)據(jù)交互'唇兑。 

意義：負責 '頁面行為'：部分動畫效果、頁面與用戶的交互桦锄、頁面功能扎附；

二、嵌入頁面的三種方式

1结耀、行間事件（主要用于事件）

<input type="button" name="" onclick="alert('ok留夜！');">

2、頁面script標簽嵌入

<script type="text/javascript">        
    alert('ok图甜！');
</script>

3香伴、外部引入——開發(fā)一般采用此方式

<script type="text/javascript" src="js/index.js"></script>

三、獲取元素的方法

• 方法一

使用內(nèi)置對象document上的 getElementById 方法來獲取頁面上設(shè)置了id屬性的元素具则，獲取到的是一個html對象即纲，然后將它賦值給一個變量;

避免獲取元素失敗的方法：
法一：將javascript放到頁面最下邊；
法二：將javascript語句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語句會在頁面加載完后才執(zhí)行博肋；（實際開發(fā)常用此方法）

• demo

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>
....
<div id="div1">這是一個div元素</div>

• 方法二

使用內(nèi)置對象document上的 getElementsByTagName 方法來獲取頁面上的某一種標簽;
獲取的是一個 選擇集 低斋，不是數(shù)組蜂厅，但是可以用 下標的方式 操作選擇集里面的標簽元素;

• demo

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出錯！不能同時設(shè)置多個li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

四膊畴、常用內(nèi)置對象

document

document.getElementById //通過id獲取元素
document.getElementsByTagName //通過標簽名獲取元素
document.referrer //獲取上一個跳轉(zhuǎn)頁面的地址(需要服務(wù)器環(huán)境)

location

window.location.href //獲取或者重定url地址
window.location.search //獲取地址參數(shù)部分
window.location.hash //獲取頁面錨點或者叫哈希值

Math

Math.random 獲取0-1的隨機數(shù)
Math.floor 向下取整
Math.ceil 向上取整

五掘猿、調(diào)試程序的方法

1、alert——以彈框的方式輸出
2唇跨、console.log——在瀏覽器的控制臺輸出
3稠通、document.title——在標簽頁的頭部輸出

六、操作元素屬性

• 流程

獲取元素
讀取屬性
寫屬性

• 屬性的寫法

1买猖、html的屬性和js里面屬性寫法一樣
2改橘、“class” 屬性寫成 “className”
3、“style” 屬性里面的屬性玉控，有橫杠的改成駝峰式飞主，比如：“font-size”，改成”style.fontSize”

• 操作屬性的二種方法
  *① 通過“.” 操作

<script type="text/javascript">
    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 寫(設(shè)置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a  id="link1">XXX</a>

• ②通過“[ ]”操作

<script type="text/javascript">
    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 寫(設(shè)置)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[sVal1] = sVal2;        
    }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a  id="link1">XXX </a>

特別地——innerHTML

功能：innerHTML可以讀取或者寫入標簽包裹的內(nèi)容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = '<a ;
    }
</script>
......
<div id="div1">這是一個div元素</div>

七高诺、基礎(chǔ)知識點

① 變量

• 定義變量需要用關(guān)鍵字 'var'
• 同時定義多個變量可以用","隔開碌识，公用一個‘var’關(guān)鍵字
  demo

 var iNum = 123;
 var sTr = 'asd';
 //同時定義多個變量可以用","隔開，公用一個‘var’關(guān)鍵字
 var iNum = 45,sTr='qwe',sCount='68';

變量類型

5種基本數(shù)據(jù)類型：
1虱而、number 數(shù)字類型
2筏餐、string 字符串類型
3、boolean 布爾類型 true 或 false
4牡拇、undefined undefined類型胖烛，變量聲明未初始化，它的值就是undefined
5诅迷、null null類型，表示空對象众旗，如果定義的變量將來準備保存對象罢杉，可以將變量初始化為null,在頁面上獲取不到對象，返回的值就是null;

1種復合類型：object

變量贡歧、函數(shù)滩租、屬性、函數(shù)參數(shù)命名規(guī)范

1利朵、區(qū)分大小寫
2律想、第一個字符必須是字母、下劃線（_）或者美元符號（$）
3绍弟、其他字符可以是字母技即、下劃線、美元符或數(shù)字

匈牙利命名風格：——業(yè)界常用命名習慣

對象o Object 比如：oDiv
數(shù)組a Array 比如：aItems
字符串s String 比如：sUserName
整數(shù)i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點數(shù)f Float 比如：fPrice
函數(shù)fn Function 比如：fnHandler
正則表達式re RegExp 比如：reEmailCheck

② 函數(shù)

• 函數(shù)定義與執(zhí)行

<script type="text/javascript">
    // 函數(shù)定義
    function fnAlert(){
        alert('hello!');
    }
    // 函數(shù)執(zhí)行
    fnAlert();
</script>

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

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

<script type="text/javascript">    
    fnAlert();       // 彈出 hello！
    alert(iNum);  // 彈出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

• 提取行間事件

在html行間調(diào)用的事件可以提取到j(luò)avascript中調(diào)用脱篙，從而做到結(jié)構(gòu)與行為分離娇钱。

<!--行間事件調(diào)用函數(shù)   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="彈出" onclick="fnAlert()">

<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="彈出" id="btn1">

• 函數(shù)傳參

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

• 函數(shù)'return'關(guān)鍵字

函數(shù)中'return'關(guān)鍵字的作用：
1、返回函數(shù)執(zhí)行的結(jié)果
2绊困、結(jié)束函數(shù)的運行
3文搂、阻止默認行為

③ 條件語句

• 運算符

1、算術(shù)運算符： +(加)考抄、 -(減)细疚、 *(乘)、 /(除)川梅、 %(求余)
2疯兼、賦值運算符：=、 +=贫途、 -=吧彪、 *=、 /=丢早、 %=
3姨裸、條件運算符：==、===怨酝、>傀缩、>=、<农猬、<=赡艰、!=、&&(而且)斤葱、||(或者)慷垮、!(否)

• if else

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = '大于';
}
else
{
    sTr = '小于';
}
alert(sTr);

• 多重if else語句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

• switch語句

多重if else語句可以換成性能更高的switch語句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

④ 循環(huán)語句

• for循環(huán)

for(var i=0;i<len;i++)
{
    ......
}

• while循環(huán)

var i=0;

while(i<8){
    ......
    i++;
}

⑤ 數(shù)組及操作方法

• 定義數(shù)組的方法

//對象的實例創(chuàng)建
var aList = new Array(1,2,3);
//直接量創(chuàng)建
var aList2 = [1,2,3,'asd'];

• 操作數(shù)組中數(shù)據(jù)的方法
  1、獲取數(shù)組的長度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

2揍堕、用下標操作數(shù)組的某個數(shù)據(jù)：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

3料身、join() 將數(shù)組成員通過一個分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4

4、push() 和 pop() 從數(shù)組最后增加成員或刪除成員

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4

5衩茸、unshift()和 shift() 從數(shù)組前面增加成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

6芹血、reverse() 將數(shù)組反轉(zhuǎn)

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1

7、indexOf() 返回數(shù)組中元素第一次出現(xiàn)的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在數(shù)組中增加或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始祟牲，刪除1個元素隙畜，然后在此位置增加'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4

• 多維數(shù)組
  多維數(shù)組指的是數(shù)組的成員也是數(shù)組的數(shù)組。

var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //彈出2;

⑥ 字符串處理方法

1说贝、字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //彈出36
alert(iNum01+sNum03);  //彈出1212 數(shù)字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 彈出12abc

2议惰、parseInt() 將數(shù)字字符串轉(zhuǎn)化為整數(shù)

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //彈出36
alert(sNum03)   //彈出數(shù)字12 將字符串小數(shù)轉(zhuǎn)化為數(shù)字整數(shù)

3、parseFloat() 將數(shù)字字符串轉(zhuǎn)化為小數(shù)

var sNum03 = '12.32
alert(parseFloat(sNum03));  //彈出 12.32 將字符串小數(shù)轉(zhuǎn)化為數(shù)字小數(shù)

4乡恕、split() 把一個字符串分隔成字符串組成的數(shù)組

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //彈出['2017','4','2']
alert(aRr2);  //彈出['2','0','1','7','-','4','-','2','2']

5言询、charAt() 獲取字符串中的某一個字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //彈出 #

6、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2

7傲宜、substring() 截取字符串

用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //彈出 de
alert(sTr3); //彈出 bcdefghijkl

8运杭、toUpperCase() 字符串轉(zhuǎn)大寫

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF

9、toLowerCase() 字符串轉(zhuǎn)小寫

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef

字符串反轉(zhuǎn)

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);

⑦ 類型轉(zhuǎn)換

1函卒、直接轉(zhuǎn)換 parseInt() 與 parseFloat()
2辆憔、隱式轉(zhuǎn)換 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 彈出'相等'
alert('10'-3);  // 彈出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 彈出123
alert( parseInt('abc123') );  // 彈出NaN

⑧ 封閉函數(shù)

• 一般定義的函數(shù)和執(zhí)行函數(shù)：

function myalert(){
    alert('hello!');
};
myalert();

• 封閉函數(shù)：

(function myalert(){
    alert('hello!');
})();

封閉函數(shù)的好處 :
封閉函數(shù)可以創(chuàng)造一個獨立的空間报嵌，在封閉函數(shù)內(nèi)定義的變量和函 數(shù)不會影響外部同名的函數(shù)和變量虱咧，可以避免命名沖突，在頁面上引入多個js文件時锚国，用這種方式添加js文件比較安全;

⑨ 匿名函數(shù)

• 匿名函數(shù)

定義的函數(shù)可以不給名稱腕巡，這個叫做匿名函數(shù)，可以將匿名函數(shù)直接賦值給元素綁定的事件來完成匿名函數(shù)的調(diào)用血筑。

<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接將匿名函數(shù)賦值給綁定的事件
    oBtn.onclick = function (){
        alert('ok!');
    }
}
</script>

還可以在函數(shù)定義前加上“~”和“!”等符號來定義匿名函數(shù)

!function myalert(){
    alert('hello!');
}()