博学谷 > 资讯 > 前端 > JavaScript在HTML中的基础用法总结

原创 JavaScript在HTML中的基础用法总结

发布时间:2020-08-13 16:49:48 浏览 21 来源:博学谷 作者:照照

    网页主要由三部分组成,分别为HTMLCSSJavascript。如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂。因此,三者的联系与融合则至关重要。本文就来为大家讲解一下JavaScriptHTML的联系,即JavaScriptHTML中的基础用法。

     

    JavaScript基础用法

     

    我们能通过HTML实现页静态弹出框效果,但不能控制显示或隐藏弹出框,但有了Javascript的加入,可实现动态弹出框效果,我们通过点击按钮来控制显示和隐藏,赋予网页更多的生命力。如何在HTML文件代码中使用JavaScript呢?这就需要借助<script> 标签来实现!使用语法如下:

     

    <script type="MIME_type"></script>

     

    其中,type 属性规定脚本的 MIME 类型,标识 <script> </script> 标签之间的内容。MIME 类型包括两部分:media type subtype。对于 JavaScriptMIME 类型是 "text/JavaScript"MIME_type:规定脚本的 MIME 类型,其默认值是 "text/JavaScript"

     

    但是,在HTML5中浏览器能够确定类型,因此,MIME类型在HTML5中完全不重要,即在HTML5规范中type 属性的书写不再是必需,可以省略;简化掉type属性的语法格式,如下所示:

     

    <script>JavaScript代码</script>

     

    由上述语法格式可以看出:Javascript代码置于 <script></script> 标签之间,<script></script>决定JavaScript开始与结束的位置;标签<script></script>之间的代码行包含了JavaScript代码;Javascript脚本有两种放置方式,可被放置在HTML页面的  <head><body> 标签中。

     

    1head标签中的JavaScript

     

    HTML页面中,我们可以将<script>标签置于<head> 部分,然后在<head>标签中插入JavaScript脚本代码。JavaScript<head>标签中使用,如下:

     

    <!DOCTYPE html>

    <html>

    <head>

      <script>

           // JavaScript脚本显示在这里

      </script>

    </head>

    <body>

    </body>

    </html>

    如上述代码所示:JavaScript核心代码位于<head>标签中间。

     

    2body标签中的JavaScript

     

    HTML页面中,我们还可以将<script>标签置于<body> 部分,然后在<body>标签中插入JavaScript脚本代码。 JavaScript<body>标签中的代码,如下:

     

    <!DOCTYPE html>

    <html>

    <head>

      *

    </head>

    <body>

      <script>

           // JavaScript脚本显示在这里

      </script>

    </body>

    </html>

     

    我们可以清楚看到,<body>标签与<head>标签应用的整体代码结构基本一致,区别就在于JavaScript核心代码的显示位置;如上述代码所示:JavaScript核心代码位于<body>标签中间。

     

    3)引入外部JavaScript

     

    我们只需创建一个外部文件,将JavaScript脚本保存在该外部文件中,最后使用<script>标签中的src属性引用该文件即可!也就是说,需要运行 JavaScript脚本时,只需引用对应的外部文件,不需要再重复的书写脚本。引入外部Javascript文件示例代码如下:

     

    <script type="text/javascript" src="文件路径"></script>

     

    src 属性规定外部脚本文件的URL(地址)。有时,我们需要在网站的多个页面中运行 JavaScript,不需要重复编写相同的脚本,只需在单独的文件中创建 JavaScript,并以 .js 为后缀保存,然后使用 <script> 标签中的 src 属性引用该文件即可。如调用本地xx.js文件,示例如下:

     

    <script type="text/javascript" src="xx.js"></script>

     

    如调用网络文件xx.js,示例如下:

     

    <script type="text/javascript" src="http://www.xxx.com/xx.js"></script>

     

    综上,我们已经总结了JavascriptHTML中的的三种基本用法,而且三种用法均能实现相同的效果。可能有的人会有一个疑问:既然三种用法都能实现相同的效果,那在实际应用中要怎么选择呢? 其实,引入外部Javascript方式是实际应用中最为常用的!大家可以下来自己动手试试

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

领取成功
领取失败
上一篇:0基础前端开发需要学什么? 下一篇:培训班出来的前端好找工作吗?

相关推荐 更多

最新文章

扫描二维码,回复"前端"获取90G资料包

4887铁算结果开奖结果小说