本节主要说明,在HTML中嵌入自定义 JavaScript。通过HTML的script标签加载JavaScript文件

  • 为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部,例如下面的代码。

           <script type="text/javascript" src="dreamdu.js"></script>
    </body>
    </html>

    通常JavaScript文件可以使用script标签加载到网页的任何一个地方,但是标准的方式是加载在head标签内。

  • JavaScript文件可以包含任何的JavaScript代码,比如dreamdu.js文件中
    document.write("www.dreamdu.com");
    document.write("梦之都");
    function jsTest(){
    /* 该函数可以在 其他的 JS 文件中直接访问;
    访问方式与定义在同个文件中的访问方式相同,eg:jsTest();
    但需记得在其他 JS 引用时,必须将该文件放在引用它的文件前面。比如:dreamdu2.js 中使用了dreamdu.js 中的 jsTest() 函数,则必须先加载 dreamdu.js(放上面),后加载 dreamdu2.js(放下面)*/
      alert("测试自定义 JS 的 function 部分");
    console.log("测试自定义 JS 的 function 部分");
    }
  • JavaScript文件外部加载的好处

    • 避免使用<!-- ... //-->,骇客技术。
    • 避免使用CDATA。
    • 统一定义JavaScript代码,方便查看,方便维护。
    • 使代码更安全,可以压缩,加密单个JavaScript文件。
    • 浏览器可以缓存JavaScript文件,减少宽带使用(当多个页面同时使用一个JavaScript文件的时候,通常只需下载一次)。
  • JavaScript文件外部加载的注意事项

    • 不要把JavaScript分为多个文件,多个文件会增加服务器的负担,增加服务器的HTTP请求。
    • 一个JavaScript文件也会增大HTTP请求。
    • 为什么有些网站的JavaScript文件后面有一串数字?比如:
<scripttype="text/javascript"src="dreamdu.js?1217128319"></script>

有两种可能:

    • JavaScript文件更新后,此版本将增加或改变,浏览器会因此判断这是一个新的JavaScript文件,从而更新缓存中以前的JavaScript文件。
    • 这个JavaScript文件是由应用程序生成的因此带有版本,便于管理。

JavaScript 笔记(7) -- 在HTML中嵌入 js (外部引用)的更多相关文章

  1. JavaScript:学习笔记(1)——在HTML中使用JS

    在HTML中使用JavaScript <script>元素 1.直接在网页中嵌入JS代码 说明: 请不要在代码的任何地方出现</script>字符串 这是由于解析嵌入式代码的规 ...

  2. JavaScript笔记01——数据存储(包括.js文件的引用)

    While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is for intera ...

  3. 怎样在网页中嵌入JS代码

    有四种方法: 方法1: 在<script>标签内直接写代码 <body> <button id="btn">click</button&g ...

  4. 《JavaScript高级程序设计》笔记:在HTML中使用Javascript(二)

    script元素 向html页面中插入js的主要方法就是使用<script>元素.使用<script>元素的方式有两种:直接在页面中嵌入js代码和包含外部js文件.直接在页面中 ...

  5. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  6. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  7. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  8. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  9. 学习 JavaScript(二)在 HTML 中使用 JS

    基本用法 在 HTML 中使用 <script> 元素引入 Javascript , <script> 有以下 4 个常用属性: async: 异步加载,只对外部脚步有效. d ...

随机推荐

  1. 利用原生JS实现类似浏览器查找高亮功能(转载)

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  2. vue切换路由时动画

    安装个包 npm i nprogress 直接导入使用 最终的效果就是

  3. 九、Shell 流程控制

    Shell 流程控制 和Java.PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法): <?php if (isset($_GET["q"])) { ...

  4. 水平垂直居中图片及文字(兼容IE6+)实例

    直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  5. B1019 数字黑洞 (20分)

    B1019 数字黑洞 (20分) 给定任一个各位数字不完全相同的 4 位正整数,如果我们先把 4 个数字按非递增排序,再按非递减排序,然后用第 1 个数字减第 2 个数字,将得到一个新的数字.一直重复 ...

  6. mysql不能登陆

    前些天还正常运行的mysql,不知怎么就不能登陆了.错误提示为 :ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (1 ...

  7. OpenCV学习笔记(九) 重映射、仿射变换

    重映射 通过重映射来表达每个像素的位置  : 这里  是目标图像,  是源图像,  是作用于  的映射方法函数.想象一下我们有一个图像  , 我们想满足下面的条件作重映射:,图像会按照  轴方向发生翻 ...

  8. 如何排查Java内存泄漏?看完我给跪了!

    没有经验的程序员经常认为Java的自动垃圾回收完全使他们免于担心内存管理.这是一个常见的误解:虽然垃圾收集器做得很好,但即使是最好的程序员也完全有可能成为严重破坏内存泄漏的牺牲品.让我解释一下. 当不 ...

  9. 【Combination Sum II 】cpp

    题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...

  10. 2017腾讯Web前端实习生招聘笔试题总结

    指针与引用的区别 考察margin塌陷 考察C++继承和~符号 考察TCP通讯过程 位码 三次握手 为什么不是两次握手 为什么不是四次握手 四次挥手 为什么要四次握手 TCP的状态 考察严格模式 进程 ...