一、將腳本放在哪里
腳本可以放在html頁面的兩個位置:
腳本總是需要包圍在<script>
和</script>
的html
標簽之間。
1.<head>
和</head>
標簽之間(稱為頭腳本);
2.<body>
和</body>
標簽之間(稱為體腳本);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My first javascript</title>
</head>
<body >
<style type="text/css">
body {background-color:red;}
</style>
<h1>
<script type="text/javascript"> //script開始標簽,告訴瀏覽器后面代碼為javascript而不是html
document.write("hello,world"); //分號告訴瀏覽器這一行結束了
</script> //結束javascript,表示后面為html代碼
</h1>
</body>
</html>
output:
腳本
二、函數
函數由function
加上函數名組成。函數名后面是圓括號,在后面是左花括號。組成函數內容的語句出現在后面的行上,然后在用右花括號結束這個函數。
function saySomething () {
alert (" Four score and seven years ago")
}
三、使用外部腳本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My second javascript</title>
</head>
<body >
<style type="text/css">
body {background-color:red;}
</style>
<h1 id="helloMessage">
<script type="text/javascript" src="script2.js"> </script>//在script標簽中添加src屬性,可以調用.js文件
</h1>
</body>
</html>
script2.js代碼:
window.onload=writeMessage; //當窗口完成加載時,運行writeMessage 函數
function writeMessage () { //創建函數“writeMessage () ”
document.getElementById ("helloMessage").innerHTML="hello,world";
}
四、向用戶發出警告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>my js page</title>
<script type="text/javascript" src="script3">
</script>
</head>
<body>
<noscript> //在不支持javascript的瀏覽器上,會顯示一條消息“This page requires Javascript”
<h2>This page requires Javascript</h2>
</noscript>
</body>
</html>
script3:
alert("Welcome to my Javascript page!");
output:
javascript page
五、確認用戶的選擇(條件語句)
if (confirm("Are you sure you want to do that?")){
alert("You said yes");
}
else{
alert("You said no");
}
output:
conrirme
then
else
結構:
if(confirm()){
alert(); //then部分,表示返回true值時執行的代碼;
}
else{
alert(); //表示返回值為false值時執行的代碼;
}
六、提示用戶
var ans=prompt("Are you sure you want to do that?","");//var變量關鍵字;ans變量;prompt詢問;用逗號分隔兩段信息,向用戶詢問的問題和默認回答;
if(ans){
alert("You said "+ans);//返回用戶的響應
}
else {
alert("You refused to answer");//ans為null
}
output:
prompt
ans
null
七、用鏈接對用戶進行重定向
1.以下html頁面基于鏈接隊用戶進行重定向;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Welcome to our site</title>
<script type="text/javascript" src="script4">
</script>
</head>
<body>
<h1 align="center">
<a href="script5.html" id="redirect">
Welcome to our site</a>
</h1>
<noscript>
<h2>This page requires Javascript</h2>
</noscript>
</body>
</html>
2.通過重定向功能嵌入在代碼中,用戶甚至不知道你的腳本干預了鏈接的行為;
window.onload=initAll;
function initAll(){
document.getElementById("redirect").onclick=initRedirect;
}
function initRedirect() {
window.location="welcome.html";
return false;
}
3.以下時啟用了javascript功能的用戶將看到的另一個html頁面;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Our Site</title>
<script type="text/javascript" src="script4">
</script>
</head>
<body>
<h1 >
Welcome to our web site,
which features lots of cutting-edge Javascript.
</h1>
</body>
</html>