初学JavaScript（js基础）
2016-09-16 本文已影响31人
味蕾里的青春
一、将脚本放在哪里
脚本可以放在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>
