9草在线精品,韩日精品区,久久爆乳一区二区

JavaScript作為前端中的腳本語言，能夠?qū)崿F(xiàn)部分動(dòng)畫效果、頁面與用戶的交互、頁面功能等等。

1、JavaScript嵌入頁面的方式

需要注意的是，除了<script>標(biāo)簽之外，類似<input>這樣的語句也屬于JavaScript。

1）行間事件（主要用于事件）

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

2）頁面script標(biāo)簽嵌入

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

3）外部引入

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

2、變量

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

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

JavaScript中的注釋使用//或者/**/，每條語句以分號(hào)；結(jié)尾。
變量類型

5種基本數(shù)據(jù)類型：
1、number 數(shù)字類型
2、string 字符串類型
3、boolean 布爾類型 true 或 false
4、undefined undefined類型，變量聲明未初始化，它的值就是undefined
5、null null類型，表示空對(duì)象，如果定義的變量將來準(zhǔn)備保存對(duì)象，可以將變量初始化為null,在頁面上獲取不到對(duì)象，返回的值就是null

1種復(fù)合類型：
object

JavaScript的變量命名區(qū)分大小寫。

3、獲取元素方法（一）

可以使用內(nèi)置對(duì)象document上的getElementById方法來獲取頁面上設(shè)置了id屬性的元素，獲取到的是一個(gè)html對(duì)象，然后將它賦值給一個(gè)變量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個(gè)div元素</div>

上面的語句，如果把javascript寫在元素的上面，就會(huì)出錯(cuò)，因?yàn)轫撁嫔蠌纳贤录虞d執(zhí)行的，javascript去頁面上獲取元素div1的時(shí)候，元素div1還沒有加載，解決方法有兩種：

第一種方法：將javascript放到頁面最下邊

....
<div id="div1">這是一個(gè)div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二種方法：將javascript語句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語句會(huì)在頁面加載完后才執(zhí)行，就不會(huì)出錯(cuò)了。

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

4、操作元素屬性

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

操作屬性的方法
1、“.” 操作
2、“[ ]”操作

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

兩種方法和字典的操作方式類似，舉兩個(gè)例子：

<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 href=# id="link1">txt</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; 沒反應(yīng)
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href=# id="link1">txt</a>

innerHTML
innerHTML可以讀取html標(biāo)簽中的文本，并對(duì)其進(jìn)行修改操作。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = '<a href=#>這是一個(gè)文本<a/>';
    }
</script>

......

<div id="div1">這是一個(gè)div元素</div>

5、函數(shù)

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

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

變量與函數(shù)預(yù)解析
函數(shù)的調(diào)用可以放在定義的前面，但是變量的調(diào)用要放到后面，不然就會(huì)自動(dòng)賦值為undefined。

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

提取行間事件
定義的函數(shù)可以在html行中直接調(diào)用，也可以賦予ID或其他屬性，然后在JavaScript腳本中調(diào)用，例如：

<!--行間事件調(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ù)

定義的函數(shù)可以不給名稱，這個(gè)叫做匿名函數(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ù)'return'關(guān)鍵字
函數(shù)中'return'關(guān)鍵字的作用：

返回函數(shù)執(zhí)行的結(jié)果
結(jié)束函數(shù)的運(yùn)行
-阻止默認(rèn)行為

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //彈出7
</script>

6、條件語句

和c語言極為類似，if/else和switch/case兩種模式：

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

var iNow = 1;

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

7、數(shù)組及操作方法

數(shù)組就是一組數(shù)據(jù)的集合，javascript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的。

定義數(shù)組的方法

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

操作數(shù)組中數(shù)據(jù)的方法

1)獲取數(shù)組的長(zhǎng)度：aList.length;

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

2)用下標(biāo)操作數(shù)組的某個(gè)數(shù)據(jù)：aList[0];

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

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

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() 返回?cái)?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個(gè)元素開始，刪除1個(gè)元素，然后在此位置增加'7,8,9'三個(gè)元素
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;

8、循環(huán)語句

格式同c語言，for和while兩種：

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

9、獲取元素方法（二）

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

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

10、Javascript組成

1、ECMAscript javascript的語法（變量、函數(shù)、循環(huán)語句等語法）
2、DOM 文檔對(duì)象模型操作html和css的方法
3、BOM 瀏覽器對(duì)象模型操作瀏覽器的一些方法

11、字符串處理方法

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() 把一個(gè)字符串分隔成字符串組成的數(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() 獲取字符串中的某一個(gè)字符

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

10、字符串反轉(zhuǎn)

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

alert(str2);

12、類型轉(zhuǎn)換

1、直接轉(zhuǎn)換 parseInt() 與 parseFloat()

alert('12'+7); //彈出127
alert( parseInt('12') + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert('5.6'+2.3);  // 彈出5.62.3
alert(parseFloat('5.6')+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9

2、隱式轉(zhuǎn)換 “==” 和 “-”

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

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

3、NaN 和 isNaN

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

13、調(diào)試程序的方法

1、alert
2、console.log
3、document.title

14、定時(shí)器

定時(shí)器在javascript中的作用:
1、制作動(dòng)畫
2、異步操作
3、函數(shù)緩沖與節(jié)流
舉一個(gè)倒計(jì)時(shí)的例子:

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2016,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距離2016年9月12日晚24點(diǎn)還剩下'+day+'天'+hour+'時(shí)'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

15、封閉函數(shù)

JavaScript中的變量分為全局變量和局部變量?jī)煞N，同C語言。
封閉函數(shù)是javascript中匿名函數(shù)的另外一種寫法，創(chuàng)建一個(gè)一開始就執(zhí)行而不用命名的函數(shù)。

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

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

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

封閉函數(shù)可以創(chuàng)造一個(gè)獨(dú)立的空間，在封閉函數(shù)內(nèi)定義的變量和函數(shù)不會(huì)影響外部同名的函數(shù)和變量，可以避免命名沖突，在頁面上引入多個(gè)js文件時(shí)，用這種方式添加js文件比較安全，比如：

var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

16、常用內(nèi)置對(duì)象

1、document

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

2、location

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

3、Math

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript掃盲

JavaScript掃盲

1、JavaScript嵌入頁面的方式

1）行間事件（主要用于事件）

2）頁面script標(biāo)簽嵌入

3）外部引入

2、變量

3、獲取元素方法（一）

4、操作元素屬性

5、函數(shù)

6、條件語句

7、數(shù)組及操作方法

定義數(shù)組的方法

操作數(shù)組中數(shù)據(jù)的方法

多維數(shù)組

8、循環(huán)語句

9、獲取元素方法（二）

10、Javascript組成

11、字符串處理方法

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

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

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

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

5、charAt() 獲取字符串中的某一個(gè)字符

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

7、substring() 截取字符串用法： substring(start,end)（不包括end）

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

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

10、字符串反轉(zhuǎn)

12、類型轉(zhuǎn)換

13、調(diào)試程序的方法

14、定時(shí)器

15、封閉函數(shù)

16、常用內(nèi)置對(duì)象

1、document

2、location

3、Math

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript掃盲

1、JavaScript嵌入頁面的方式

1）行間事件（主要用于事件）

2）頁面script標(biāo)簽嵌入

3）外部引入

2、變量

3、獲取元素方法（一）

4、操作元素屬性

5、函數(shù)

6、條件語句

7、數(shù)組及操作方法

定義數(shù)組的方法

操作數(shù)組中數(shù)據(jù)的方法

多維數(shù)組

8、循環(huán)語句

9、獲取元素方法（二）

10、Javascript組成

11、字符串處理方法

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

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

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

4、split() 把一個(gè)字符串分隔成字符串組成的數(shù)組

5、charAt() 獲取字符串中的某一個(gè)字符

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

7、substring() 截取字符串 用法： substring(start,end)（不包括end）

8、toUpperCase() 字符串轉(zhuǎn)大寫

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

10、字符串反轉(zhuǎn)

12、類型轉(zhuǎn)換

13、調(diào)試程序的方法

14、定時(shí)器

15、封閉函數(shù)

16、常用內(nèi)置對(duì)象

1、document

2、location

3、Math

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、JavaScript嵌入頁面的方式

2、變量

3、獲取元素方法（一）

4、操作元素屬性

5、函數(shù)

6、條件語句

8、循環(huán)語句

9、獲取元素方法（二）

10、Javascript組成

11、字符串處理方法

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

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

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

5、charAt() 獲取字符串中的某一個(gè)字符

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

7、substring() 截取字符串用法： substring(start,end)（不包括end）

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

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

10、字符串反轉(zhuǎn)

12、類型轉(zhuǎn)換

14、定時(shí)器

15、封閉函數(shù)

16、常用內(nèi)置對(duì)象

1、document

2、location

3、Math