关于前端的碎碎念3-JavaScript基础1-将JavaScript 插入网页的方法

举报
花溪 发表于 2020/07/17 15:07:57 2020/07/17
【摘要】 将JavaScript 插入网页的方法

说完css装修,我们终于要给房子打造一些功能啦~follow me~

将JavaScript 插入网页的方法 

  使用<script>标签在网页中插入Javascript代码。

插入JavaScript与在网页中插入CSS的方式相似。使用下面的代码可以在网页中插入JavaScript:

<script type="text/JavaScript">

     ...

</script>

  其中的...就是代码的内容。JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论。

用JavaScript在网页中输出内容

  JavaScript使用document.write来输出内容。例如

<script type="text/JavaScript">
     document.write("我是菜鸟我怕谁!");
</script>

  将会输出在网页上输出:

我是菜鸟我怕谁!

  学过编程的人应该知道,“我是菜鸟我怕谁!”两侧双引号代表字符串的意思。不过不理解这个概念也无所谓,学到后面就知道什么时候应该加双引号,什么时候不需要加了。

对不支持JavaScript的浏览器隐藏代码

  有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码。

<html>
  <body>
      <script type="text/JavaScript">
          <!--
          document.write("我是菜鸟我怕谁!");
          -->
      </script>
  </body>
</html>

  <!-- -->里的内容对于不支持JavaScript的浏览器来说就等同于一段注释,而对于支持JavaScript的浏览器,这段代码仍然会执行。至于“//”符号则是JavaScript里的注释符号,在这里添加它是为了防止JavaScript试图执行-->。不过通常情况下,现在的浏览器几乎都支持JavaScript,即使是不支持的,也会了解如何合理地处理含有JavaScript的网页。

插入JavaScript的位置

  JavaScript脚本可以放在网页的head里或者body部分,而且效果也不相同。

Body里的JavaScript

  放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行,例如:

<html>
    <body>
        <script type="text/JavaScript">
            <!--
                document.write("我是菜鸟我怕谁!");
            -->
        </script>
</body>

Head里的JavaScript

  在head部分的脚本在被调用的时候才会执行,例如:

<html>
    <head>
        <script type="text/JavaScript">
            ....
        </script>
    </head>
</html>

添加外部JavaScript脚本

  也可以像添加外部CSS一样添加外部JavaScript脚本文件,其后缀通常为.js。例如:

<html>
    <head>
        <script src="scripts.js"></script>
    </head>
    <body>
    </body>
</html>

  如果很多网页都需要包含一段相同的代码,那么将这些代码写入一个外部JavaScript文件是最好的方法。此后,任何一个需要该功能的网页,只需要引入这个js文件就可以了。

  注意:脚本文件里头不能再含有<script>标签。

  注:放在body里的函数是一个例外,它并不会被执行,而是等被调用时才会执行。关于函数与调用的概念将在后面讲到。


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。