将JavaScript插入网页非常类似于插入任何其他HTML内容。用于在HTML中添加JavaScript的标签是<script>和</script>。由<script>和</script>标记包围的代码称为脚本博客。
<script>标记可以放在<head>和</head>标记之间, 也可以放在<body>和</body>标记之间。
类型属性是<script>标记的最重要属性。但是, 它不再使用。浏览器了解<script>标记中包含JavaScript代码。
<script type="text/javascript">
如何编写, 保存和运行代码:
方法1:
1.使用任何笔记编辑器,如Notepad, notepad++来编写代码。
2.用.html扩展名保存页面,并在web浏览器中加载。
方法2:
1.创建一个.js文件, 然后使用你喜欢的编辑器在该文件中编写JS代码。
2.添加<script src =" relative_path_to_file /file_name.js"> </script>到HTML文件内<body>标记的末尾。
将页面涂成浅蓝色的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor = "white">
<p>Paragraph 1</p>
<script type = "text/javascript">
document.bgColor ="lightblue";
</script>
</body>
<html>
输出如下:
网页的颜色为浅蓝色, 但是定义了开始正文标签以将背景色设置为白色。
<body bgcolor="white">
页面的背景色为浅蓝色, 因为使用JavaScript将文档的背景色设置为浅蓝色。
document.bgcolor="lightblue";
从代码中学习:
1.为了在网页中编写脚本, 页面被称为文档。
2.可以通过写文档, 后跟点, 后跟属性名称来引用文档的属性。该文档具有许多属性。
3.在<script>标签之后, 浏览器开始将文本解释为JavaScript, 直到</script>出现。
使用JavaScript将内容写入网页的代码:
让我们写
"你好, 世界!"
使用JavaScript转到空白页。
在网页上显示结果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p id = "ResultsP"></p>
<script type = "text/javascript">//Script Block 1
document.getElementById('ResultsP').innerHTML ='Hello World!';
</script>
</body>
<html>
输出如下:
从代码中学习:
1.以下行已添加到此代码中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
这使Web浏览器知道用户正在使用XHTML。它实际上对代码没有任何影响;如果没有多余的行, 它就可以正常工作。
2.请注意, 已使用id属性为<p>标记赋予了id。
<p id="ResultsP">
该ID在网页中必须是唯一的, 因为JavaScript使用它来标识以下行中的特定HTML元素:
document.getElementById(‘ResultsP’).innerHTML = ‘Hello World!’;
该代码仅表示:"获取具有id ResultsP的document元素, 并将该元素内的HTML设置为Hello World!"
重要的是, 访问该段落的代码应在该段落之后, 否则, 该代码将试图在该段落存在于页面中之前对其进行访问, 并会引发错误。