文章目录
预备知识
JavaScript web 开发人员必须学习的 3 门语言中的一门:
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
如何编写JavaScript?
可以用任何文本编辑器来编写 JavaScript 。常用工具:
1)VisualStudio Code
2)Sublime Text
3)NotePad++
注意:不可以用Word或写字板来编写 JavaScript 或 HTML,因为带格式的文本保存后不是纯文本文件,无法被浏览器正常读取。也尽量不要用记事本编写,它会自作聪明地在保存UTF-8格式文本时添加BOM头。
如何运行JavaScript
要让浏览器运行 JavaScript,必须先有一个 HTML 页面,在 HTML 页面中引入 JavaScript,然后让浏览器加载该 HTML 页面,就可以执行 JavaScript 代码。
使用 JavaScript的两种方式
1. 脚本是直接写在 HTML 页面
直接将JavaScript代码写在 <script></script>
中间,形如: <script>
JavaScript 脚本内容 </script>
说明:
<script>
标签既可以放在 <head>
部分,也可以放在 <body>
部分, 一般放在结束标签 </body>
之前。
原因:
浏览器是遇到 <body>
标签开始呈现内容,如果将所有的 <script>
标签都放在 <head>
中,那么网页必须等到所有脚本加载完成之后才开始呈现内容,这样在加载完成之前页面将一片空白。为了避免这个问题,所以建议将所有的 <script>
放在 <body>
结束标签之前。
可以比较以下示例 3 和 4 的展示效果。
2. 通过外部脚本文件导入
单独写一个脚本文件(以.js结尾的文件)然后在 HTML 页面通过“<script src="..."></script>”
引入这个文件。
说明:
1)如果在 script 标签是用来导入外部脚本文件的,那么不可以在开始标签和结束标签之间再去添加代码了
2)外部脚本文件中不能包含 <script>
标签
3)把JavaScript放在一个单独的.js文件中,更利于维护代码,并且多个页面可以各自引用同一份.js文件。
script 标签
无论脚本是直接写在 HTML 页面中,还是通过导入外部脚本文件,都需要用到 script 标签。
script标签的属性:
1)src 可选,表示包含要执行代码的外部文件。
2))type 可选,可以看成是 language 的替代属性,表示编写代码使用的脚本语言的类型。
默认的type就是"text/JavaScript"。
3)defer 可选,延迟脚本, 只适用于外部脚本文件
该属性的用途告诉浏览器,立即下载脚本,但是延迟到整个页面都解析完毕后再运行。
此时,即使将 <script>
标签放在 <head>
元素中,其中的脚本也会延迟到浏览器遇到 </html>
再执行。
4)async 可选,延迟脚本,只适用于外部脚本文件
该属性的用途是告诉浏览器,立即下载脚本,但是延迟到整个页面都解析完毕再运行。
与 defer 不同的是,标记为 async 的脚本并不保证按照指定他们的先后顺序执行。
5)charset 可选,表示通过 src 属性指定的代码的字符集,很少使用。
示例
示例一:
<!DOCTYPE html>
<html>
<head>
<title>First Javascript</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
示例二:
//script 标签放在 <body> 中
<!DOCTYPE html>
<html>
<head>
<title>First Javascript</title>
</head>
<body>
<script type="text/javascript">
alert("Hello World!");
</script>
</body>
</html>
示例三
<!DOCTYPE html>
<html>
<head>
<title>First Javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
<p>
第一个 JavaScript 示例.
</p>
</body>
</html>
示例四
<!DOCTYPE html>
<html>
<head>
<title>First Javascript</title>
</head>
<body>
<p>
第一个 JavaScript 示例.
</p>
</br>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
示例五
<html>
<head>
<script src="/JavaScript/abc.js"> </script>
</head>
</html>
在根目录下创建abc.js, 内容如下(注意:仅有如下一行,没有script标签):
alert("hello world");
参考
http://www.51zxw.net/list.aspx?cid=563
http://www.runoob.com/js/js-tutorial.html
《JavaScript 高级程序设计》
声明:
本博客的所有内容,仅是自己的一些学习笔记,如有错误,欢迎指正。如有侵权,请告知修改。