JavaScript作为一门脚本语言广泛应用在网页前端制作中,其特别之处在于只需要浏览器即可进行编译,因此不要配置环境。在JavaScript中使用爬虫时可以直接将爬虫结果用于前端网页的展示内容,非常灵活。
Hello world:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" Content = "text/html; Charset =utf-8">
<title>HelloWorld.js</title>
</head>
<body>
<p id = "demo"></p>
<script>
document.getElementById("demo").innerHTML = ("Hello,world");
</script>
</body>
</html>
利用这种用法可以编写函数,通过用户的交互来改变网页内容,例如,当用户点击按钮时,调用js函数改变指定文字:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>ChangeWords.js</title>
<!--定义一个函数-->
<script>
function fChangeWords(){
document.getElementById("demo").innerHTML = ("内容已改变");
}
</script>
</head>
<body>
<p id = "demo">原始内容</p>
<!--点击按钮时引用函数-->
<button type = "button" onclick = "fChangeWords()">改变页面内容</button>
</body>
</html>
js脚本语言可以在html文档的任何位置插入,也可以以js文件的身份被引入,通常为了网页的加载速度,会将js文件在body的最后部分引入。引入js文件的方式同引入css文件相同:
<script src = "js文件名.js"></script>
文件路径可以是本地的相对路径、绝对路径,也可以是一个远程的js文件网址。
JavaScript可以用多种方式显示数据:
- 使用
window.aler()
写入警告框 - 使用
document.write()
写入HTML文件 - 使用
innerHTML
写入HTML元素 - 使用
console.log()
写入浏览器控制台
假如我们想用这四种方法来显示1+5
的结果,innerHTML可以参看之前的Hello world的例子,其他三种方法如下:
window.alert:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>警告框.js</title>
</head>
<body>
<script>
window.alert(5+6)
</script>
</body>
</html>
注意:5+6如果带双引号会被认为是字符型的数据,不带双引号则被认作数字型的数据
document.write:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>document.write.js</title>
</head>
<body>
<script>
document.write(5 + 6);
</script>
</body>
</html>
console.log:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>控制台.js</title>
</head>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
用F12激活浏览器的控制台,并在菜单中选择控制台,即可看到显示的信息。