前言:建议花5-10分钟把这篇文章通读一遍。若不能理解，建议放慢学习节奏，回到HTML标记的学习章节。
第一种默认使用的方法，也是不建议使用的方法-直接嵌入JavaScript代码:在<head>标记中插入<script>标记。显示效果为下图：显示效果1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慧玲家园</title>
<script type="text/javascript">
function hi(){
document.write("<h1>Hello World!</h1>");
//当前网页源码代码中写入HTML字符串"<h1>Hello World!</h1>"
//document表示DOM网页文档对象，document.write()表示调用Document对象的write()方法.
}
hi(); //调用hi()函数。
</script>
</head>
<body>
</body>
</html>
另外的小细节：现代的浏览器默认<script>标签的类型为JavaScript脚本，因此省略type属性，依然能够被正确执行。--------------也就是说type="text/javascript"，可以被删掉，不影响浏览器的识别。
这种方法是比较提倡的方法--包含外部JavaScript文件
这时候就需要另外再写一个JavaScript文件，后缀为js,文件名自定义。
在这里我建立一个名字为test1.js的文件，代码编辑截图为下图：代码文档编辑命名
function hi(){
alert("Hello World"); //调用Windows对象方法，将弹出一个提示对话框，显示参数字符串“Hello World”
}
这里我创建了一个名为extern-JavaScript.html的文件。
显示效果截图为下图：Chrome浏览器显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慧玲家园</title>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
hi();
</script>
</head>
<body>
</body>
</html>
浏览器解析JavaScript代码时，我们需要明白一个道理：
所有<script>标签都会按照它们在HTML中出现的先后顺序依次被浏览器解析。在不使用<script>标签的defer和async属性的情况下，只有在解析完前面<script>标签中的代码之后，才会开始解析后面的代码。
上面的例子中所有<script>标签都应该放在页面头部的<head>标签中，这样就可以把所有外部文件（CSS文件和JavaScript文件）的引用都放在相同地方。但是，在文档的<head>标签中包含所有JavaScript文件，意味着必须等到全部Javascript都被下载，解析，执行完成以后，才能开始呈现页面的内容。如果页面需要很多JavaScript代码，这样无疑会导致浏览器在呈现出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。
为了避免延迟问题，现代web应用程序一般都会把JavaScript引用放在<body>标签中页面的后面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慧玲家园</title>
</head>
<body>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
hi();
</script>
</body>
</html>
