(1)變量和函數(shù)預(yù)解析
變量預(yù)解析
alert(a);//只把變量a的聲明提前，賦值不提前，所以彈出undefined，表示它的值未定義
alert(c);報(bào)錯(cuò)，c沒(méi)有聲明，這是真正的未定義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量和函數(shù)預(yù)解析</title>
<script type="text/javascript">
var a = 123;
/*函數(shù)預(yù)解析*/
myalert();//彈出hello!
function myalert(){
alert('hello!');
}
</script>
</head>
<body>
</body>
</html>
(2)匿名函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函數(shù)</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*有名字的函數(shù)*/
// oDiv.onclick = myalert;
// function myalert(){
// alert('hello');
// }
/*匿名函數(shù)*/
oDiv.onclick = function(){
alert('hello');
}
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
(3)函數(shù)傳參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數(shù)傳參</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
changeStyle('color', 'gold');
changeStyle('background', 'red');
changeStyle('width', '300px');
changeStyle('height', '300px');
changeStyle('fontSize', '30px');
function changeStyle(styl, val){
oDiv.style[styl] = val;
}
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
(4)函數(shù)return關(guān)鍵字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數(shù)return關(guān)鍵字</title>
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');
//寫(xiě)入值
// oInput01.value = 10;
// oInput02.value = 5;
oBtn.onclick = function(){
var val01 = oInput01.value;
var val02 = oInput02.value;
var rs = add(val01, val02);
alert(rs);
}
function add(a, b){
var c = parseInt(a) + parseInt(b);
// alert('計(jì)算完成');//執(zhí)行
return c;//返回函數(shù)設(shè)定的值，同時(shí)結(jié)束函數(shù)的運(yùn)行
// return;//不返回值，僅結(jié)束函數(shù)的運(yùn)行
// alert('計(jì)算完成');//不執(zhí)行
}
}
</script>
</head>
<body>
<input id="input01" type="text" name="">
<input id="input02" type="text" name="">
<input id="btn" type="button" name="" value="相加">
</body>
</html>
(5)流程控制語(yǔ)句
流程控制語(yǔ)句
- JS中的程序是從上到下一行一行執(zhí)行的
- 通過(guò)流程控制語(yǔ)句可以控制程序執(zhí)行流程，
使程序可以根據(jù)一定的條件來(lái)選擇執(zhí)行
- 語(yǔ)句的分類(lèi)：
1.條件判斷語(yǔ)句
2.條件分支語(yǔ)句
3.循環(huán)語(yǔ)句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制語(yǔ)句</title>
<script type="text/javascript">
console.log('你好');
alert('hello');
</script>
</head>
<body>
</body>
</html>
(6)條件判斷語(yǔ)句
條件判斷語(yǔ)句：
- 使用條件判斷語(yǔ)句可以在執(zhí)行某個(gè)語(yǔ)句之前進(jìn)行判斷，
如果條件成立才會(huì)執(zhí)行語(yǔ)句，條件不成立則語(yǔ)句不執(zhí)行。
- if語(yǔ)句
- 語(yǔ)法一：
if(條件表達(dá)式){
語(yǔ)句...
if語(yǔ)句在執(zhí)行時(shí)，會(huì)先對(duì)條件表達(dá)式進(jìn)行求值判斷，
如果條件表達(dá)式的值為true，則執(zhí)行if后的語(yǔ)句，
如果條件表達(dá)式的值為false，則不會(huì)執(zhí)行if后的語(yǔ)句。
if語(yǔ)句只能控制緊隨其后的那個(gè)語(yǔ)句,
如果希望if語(yǔ)句可以控制多條語(yǔ)句，
可以將這些語(yǔ)句統(tǒng)一放到代碼塊中
if語(yǔ)句后的代碼塊（即{}）不是必須的，但是在開(kāi)發(fā)中盡量寫(xiě)上代碼塊，即使if后只有一條語(yǔ)句
- 語(yǔ)法二:
if(條件表達(dá)式){
語(yǔ)句...
}else{
語(yǔ)句...
}
if...else...語(yǔ)句
當(dāng)該語(yǔ)句執(zhí)行時(shí)，會(huì)先對(duì)if后的條件表達(dá)式進(jìn)行求值判斷，
如果該值為true，則執(zhí)行if后的語(yǔ)句
如果該值為false，則執(zhí)行else后的語(yǔ)句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件判斷語(yǔ)句</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: gold;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('box');
/*oBtn.onclick = function(){
if(oDiv.style.display == 'none'){
oDiv.style.display = 'block';
}else{
oDiv.style.display = 'none';
}
}*/
// alert(oDiv.style.display);//彈出空白提示框，因?yàn)閐iv沒(méi)設(shè)置過(guò)style屬性
oBtn.onclick = function(){
if(oDiv.style.display == 'block' || oDiv.style.display == ''){
oDiv.style.display = 'none';
}else{
oDiv.style.display = 'block';
}
}
}
</script>
</head>
<body>
<input type="button" value="切換" id="btn">
<br>
<div class="box" id="box"></div>
</body>
</html>
(7)多重條件判斷語(yǔ)句
if語(yǔ)句
語(yǔ)法三：
if(條件表達(dá)式){
語(yǔ)句...
}else if(條件表達(dá)式){
語(yǔ)句...
}else if(條件表達(dá)式){
語(yǔ)句...
}else{
語(yǔ)句...
}
if...else if...else
當(dāng)該語(yǔ)句執(zhí)行時(shí)，會(huì)從上到下依次對(duì)條件表達(dá)式進(jìn)行求值判斷
如果值為true，則執(zhí)行當(dāng)前語(yǔ)句。
如果值為false，則繼續(xù)向下判斷。
如果所有的條件都不滿(mǎn)足，則執(zhí)行最后一個(gè)else后的語(yǔ)句
該語(yǔ)句中，只會(huì)有一個(gè)代碼塊被執(zhí)行，一旦代碼塊執(zhí)行了，則直接結(jié)束語(yǔ)句
條件分支語(yǔ)句也叫switch語(yǔ)句
語(yǔ)法：
switch(條件表達(dá)式){
case 表達(dá)式:
語(yǔ)句...
break;
case 表達(dá)式:
語(yǔ)句...
break;
default:
語(yǔ)句...
break;
}
執(zhí)行流程：
switch...case..語(yǔ)句
在執(zhí)行時(shí)會(huì)依次將case后的表達(dá)式的值和switch后的條件表達(dá)式的值進(jìn)行全等比較，
如果比較結(jié)果為true，則從當(dāng)前case處開(kāi)始執(zhí)行代碼。
當(dāng)前case后的所有的代碼都會(huì)執(zhí)行，我們可以在case的后邊跟著一個(gè)break關(guān)鍵字，
這樣可以確保只會(huì)執(zhí)行當(dāng)前case后的語(yǔ)句，而不會(huì)執(zhí)行其他的case
如果比較結(jié)果為false，則繼續(xù)向下比較
如果所有的比較結(jié)果都為false，則只執(zhí)行default后的語(yǔ)句
switch語(yǔ)句和if語(yǔ)句的功能實(shí)際上有重復(fù)的，使用switch可以實(shí)現(xiàn)if的功能，同樣使用if也可以實(shí)現(xiàn)switch的功能，所以我們使用時(shí)，可以根據(jù)自己的習(xí)慣選擇。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多重條件判斷語(yǔ)句</title>
<script type="text/javascript">
var today = 4;
// if(today == 1){
// alert('語(yǔ)文');
// }else if(today == 2){
// alert('數(shù)學(xué)');
// }else if(today == 3){
// alert('英語(yǔ)');
// }else if(today == 4){
// alert('美術(shù)');
// }else if(today == 5){
// alert('舞蹈');
// }else{
// alert('不補(bǔ)習(xí)');
// }
switch(today){
case 1:
alert('語(yǔ)文');
break;//結(jié)束整個(gè)switch語(yǔ)句
case 2:
alert('數(shù)學(xué)');
break;
case 3:
alert('英語(yǔ)');
break;
case 4:
alert('美術(shù)');
break;
case 5:
alert('舞蹈');
break;
default:
alert('不補(bǔ)習(xí)');
break;//最后一個(gè)default可以不寫(xiě)break，但建議寫(xiě)上
}
</script>
</head>
<body>
</body>
</html>
(8)數(shù)組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組</title>
<script type="text/javascript">
//面向?qū)ο蟮姆绞絼?chuàng)建
var aRr01 = new Array(1,2,3,'abc');
//直接創(chuàng)建
var aRr02 = [1,2,3,'def'];//推薦使用，性能更高
//獲取數(shù)組的成員數(shù)量（長(zhǎng)度）
// alert(aRr02.length);//彈出4
// alert(aRr02[3]);//彈出cdf
var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
// alert(aRr03.length);//彈出3
// alert(aRr03[1].length);//彈出3
alert(aRr03[1][2]);//彈出c
</script>
</head>
<body>
</body>
</html>
(9)數(shù)組常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組常用方法</title>
<script type="text/javascript">
var aRr = [1,2,3,4];
//用-連接數(shù)組元素并轉(zhuǎn)為字符串
//var sTr = aRr.join("-");//用-連接數(shù)組元素并轉(zhuǎn)為字符串，彈出1-2-3-4
// var sTr = aRr.join('');//用空串連接
// alert(sTr);//彈出1234
//向數(shù)組最后追加元素
// aRr.push(5);
// alert(aRr);//1,2,3,4,5
//刪除末尾元素
// aRr.pop();
// alert(aRr);//1,2,3
//向最前面插入元素0
// aRr.unshift(0);
// alert(aRr);//0,1,2,3,4
//刪除第一個(gè)（索引為0的）元素
// aRr.shift();
// alert(aRr);//2,3,4
//反轉(zhuǎn)
// aRr.reverse();
// alert(aRr);//4,3,2,1
//查找字母'b'第一次出現(xiàn)的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
// alert(num);//1
//從第2索引元素開(kāi)始，刪除1個(gè)元素
// aRr2.splice(2,1);//刪除c
// alert(aRr2);//a,b,d,a,b,c,d
//從第2索引元素開(kāi)始，刪除1個(gè)元素，再插入e
// aRr2.splice(2,1,'e');//把c替換成e
// alert(aRr2);//a,b,e,d,a,b,c,d
//刪除后面的abcd，改為fghi
aRr2.splice(4,4,'f','g','h','i');
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
</head>
<body>
</body>
</html>
