本节主要说明,在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. CSS的垂直居中和水平居中总结

    内联元素居中方案 水平居中设置: 行内元素 设置 text-align:center: Flex布局 设置display:flex;justify-content:center;(灵活运用) 垂直居中 ...

  2. PAT 乙级 1003

    题目 题目地址:PAT 乙级 1003 题解 规律观察题,本题的关键在于把题读懂,同时还有几个比较容易疏忽的地方需要注意:总之这道题要考虑的东西更多,细节上也要特别注意: 规律:“如果 aPbTc 是 ...

  3. spring data事务

    事务在spring data中的使用 1:事务一般在service层.因为一个service方法可能会多次调用不同的dao,为了保证事务的完整性,那么多次的dao都放到一个方法里面 2:读的时候可以不 ...

  4. 【JAVA】JVM常用工具

    JDK内置工具使用 jps(Java Virtual Machine Process Status Tool)    查看所有的jvm进程,包括进程ID,进程启动的路径等等. jstack(Java ...

  5. 网站动态加载JS脚本

    Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...

  6. atm-interface-shopping

    from db import db_handlerfrom interface import bank def shopping_interface(name, cost, shoppingcart) ...

  7. 关于web.xml配置中的<url-pattern>

    标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标签,例: <servlet><servlet-n ...

  8. Patrick and Shopping

    Patrick and Shopping 今天 Patrick 等待着他的朋友 Spongebob 来他家玩.为了迎接 Spongebob,Patrick 需要去他家附近的两家商店  买一些吃的.他家 ...

  9. windows下pip安装python模块时报错【转】

    windows下pip安装python模块时报错总结 请给作者点赞--> 原文链接 1 权限问题 C:\Users\ljf>pip install xlwt Exception: Trac ...

  10. Markdowm语法学习

    Markdowm语法学习 标题 一级标题 一级标题 #一级标题 二级标题 二级标题 ##二级标题 六级标题 六级标题 ######六级标题 引用 引用 >引用 代码块 if(i == 0) { ...