JavaScript基础知识之_day01 在HTML中使用JavaScript

在HTML页面中使用JavaScript有两种方式:

嵌入的JavaScript代码

这种方式是直接将JavaScript代码写在HTML中,相应的用法是:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>在HTML中使用Javascript - Javascript测试页面</title>
    <script type="text/javascript">
        alert("欢迎使用Javascript");
    </script>
</head>
<body>
</body>
</html>

除了可以在head中,JavaScript代码还可以放在body中:

<body>
    <h1>在HTML中使用Javascript</h1>
    <script type="text/javascript">
        //嵌入在body中的Javascrip代码
        alert("这是Javascript");
    </script>
</body>

我们在body中加入script标签,并让他弹出以对话框,当浏览器加载到这段代码后会将其解释执行!

两种方法都可以被执行,既没有推荐与不推荐写法之分,更没有正确与错误之别,主要看你的具体用法:如果你希望页面在加载之初就开始执行javascript代码,就应该将它放在head中;如果你希望在页面加载到某个标签之后执行Javascript代码,就将其放在相应标签的后面。

引用独立的js文件

将Javascript代码内嵌在HTML标签中固然方便,但也容易造成页面代码混乱,通常情况下,我们会将Javascript代码存放在一个js文件中,然后在HTML中引用js文件,写法如下:
HTML文件:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>在HTML中使用Javascript - Javascript测试页面</title>
    <script type="text/javascript" src="js/new_file.js"></script>
</head>
<body>
</body>
</html>

new_file.js 文件:

alert("欢迎使用Javascript");

需要注意的是,加载外部JS文件是线程阻塞的,在没有加载完成的时候,页面不会继续加载其后面的标签,所以通常我们将引用的JS放在body的后面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 吴山青,越山青。一江流水相寄情,浪水拍崖清; 君心盈,妾心盈。万家灯火满穹星,明月照两心。
    真爱你的云阅读 339评论 0 2
  • 水边路边,夕阳缓缓。行人晚风,过往淡淡。垂柳飞絮,薄尘漫漫,市井居间,嘈声喧喧。
    爱笑木偶阅读 191评论 0 1
  • 曾经以为你是那么的遥远 远的让人不敢去想 没想到也不过是一张车票的距离 曾经以为你是那么遥不可及 那么难以到达 难...
    李在在阅读 165评论 0 1