-
JavaScript簡介
- JavaScript 是腳本語言;
- JavaScript 是一種輕量級的編程語言;
- JavaScript 是可插入 HTML 頁面的編程代碼;
- JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行.
-
JavaScript加入HTML兩種方式
- 方式一 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function xx(){
xxx;
}
</script>
</head>
<body>
<script>
var xxx;
if (xxx) {
xxx
}
function xx(){
xxx;
}
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可以在head或body中加入script標(biāo)簽加入js代碼;
2.一般情況下,將函數(shù)定義在head中,或body的尾部,便于閱讀理解代碼;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="myScript.js" />
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.可在head或body內(nèi),通過引人js文件的方式
- 此類關(guān)鍵字在JavaScirpt中擁有自己特殊的含義;
- 在定義標(biāo)識符時,不可與關(guān)鍵字重復(fù).
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
- 保留字是為將來的關(guān)鍵字所預(yù)留的;
- 和關(guān)鍵字一樣,保留字也不要作為標(biāo)識符.
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
① 寫入HTML輸出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>這是標(biāo)題HTML</h1>
<p>這是段落HTML</p>
<hr />
<script>
document.write("<h1>這是標(biāo)題JS</h1>");
document.write("<p>這是段落JS</p>")
</script>
<hr />
<button onclick="myFunction()">Click</button>
<script>
function myFunction(){
document.write("點(diǎn)擊后,會覆蓋原加載的文檔流!")
}
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.write(),輸出文檔寫內(nèi)容;
2.若文檔加載完成后,執(zhí)行此方法,會覆蓋原整個HTML文檔.
② 點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button type="button" onclick="alert('彈出框')">點(diǎn)擊</button>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.button:定義一個按鈕;
2.onclick:定義點(diǎn)擊事件,當(dāng)點(diǎn)擊時,執(zhí)行等號后面的動作;
3.alert():彈出框,攜帶提示信息.
③ 改變元素內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>這是標(biāo)題HTML</h1>
<p id="contentP">這是段落HTML</p>
<hr />
<script>
function changeContent(){
contentP = document.getElementById("contentP");//通過id定位到元素
contentP.innerHTML = "改變后的段落JS";//更改元素內(nèi)容
}
</script>
<button onclick="changeContent()">Click</button>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.document.getElementById():可以通過元素的id定位到元素;
2.innerHTML:可以改變元素內(nèi)容.
④ 改變圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
function changeImage(){
image1 = document.getElementById("image");//通過id定位到元素
//判斷圖片來源字符串中所包含的字符串值,即判斷當(dāng)前圖片是哪一個
if (image1.src.match("small")) {
image1.src = "img/big.png";
image1.title = "big";//若當(dāng)前是small,則點(diǎn)擊更改為big
} else{
image1.src = "img/small.png";
image1.title = "small";//若當(dāng)前不是small,則點(diǎn)擊更改為small
}
}
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.src:定位到元素的src屬性,且可通過賦值修改其屬性值;
2.element.title:定位到元素的title屬性,且可通過賦值修改其屬性值;
3.match():此方法可對字符串進(jìn)行匹配.
⑤ 改變樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p id="demo">點(diǎn)擊按鈕,我會變色!</p>
<button type="button" onclick="changeColor()">點(diǎn)擊</button>
<script>
function changeColor(){
x = document.getElementById("demo");//通過id定位到元素
//判斷元素顏色,進(jìn)行相應(yīng)的改變
if(x.style.color.match("red")){
x.style.color = "black";
}else{
x.style.color = "red";
}
}
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.style:獲取到元素的樣式,顏色,大小等;
2.style.color:獲取到元素的顏色并進(jìn)行賦值修改.
⑥ 驗(yàn)證輸入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h3>請輸入數(shù)字</h3>
<input id="demo" type="text"/>
<button type="button" onclick="verifyNums()">校驗(yàn)</button>
<script>
function verifyNums(){
Nums = document.getElementById("demo").value;//獲取元素值
//判斷是否為空或是否不是數(shù)字
if (Nums == "" || isNaN(Nums)) {
alert("不是數(shù)字");
}else{
alert("是數(shù)字")
}
}
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.element.value:獲取當(dāng)前元素的值;
2.isNaN:判斷是否為非數(shù)字,非數(shù)字為True,數(shù)字為False.
