1.使用<script>元素向HTML页面中插入Javascript

HTML4.01中<script>标签有6个属性：

（1）async：可选。表示立即下载脚本，不影响页面中其他资源的下载。只对外部脚本文件有效。

（2）charset：可选。表示通过scr属性指定的代码的字符集。（因为大多数浏览器会忽略它，所以很少人用）

（3）defer：可选。表示脚本会延迟到文档完全被解析和显示之后在执行。只对外部脚本有效。IE7及更早的嵌入式脚本也支持该属性。

（4）language：已废弃。原来表示编写代码使用的脚本语言。

（5）scr：可选。表示包含要执行代码的外部文件。

（6）type：可选。表示编写代码使用的脚本语言的内容类型（MIME类型）

　　　　MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

注：实际上服务器在传送Javascript文件时使用的MIME类型通常是application/x-javascript,但是在type中设置这个值可能导致脚本被忽略。

　　在非IE浏览器还可以使用：application/javascript和application/ecmascript。

考虑到浏览器的兼容性问题，目前的type属性用text/javascript，但是这个属性并不是必需的，没有指定时，其默认值仍是text/javascript。

2.使用<script>元素的两种方式：

（1）直接在HTML页面中嵌入Javascript代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Test</title>

 6     <script type="text/javascript">

       function sayHi(){

       alert("Hi !");

 }

 </script>

 </head>

 <body>

     <button type="button" onclick="sayHi()">Try it</button>

 </body>

 </html>

　　包含在<script>元素内部的Javascript将从从上到下依次解释，在解释器对<script>元素内部的所有内代码求值完毕以前，页面中的其余内容都不会被浏览器加载或是显示。

　　在使用<script>嵌入Javascript代码时，不能再代码中的任何地方出现</script>字符串。

　　eg：<script type="text/javascript">
      function sayHi(){
      alert("</script>");
       }
</script>

出现错误的原因：按照解析嵌入式代码的规则，当浏览器遇到字符串“</script>”时，会认为是结束的</script>标签。通过加转义字符“\”可以解决这个问题

<script type="text/javascript">
      function sayHi(){
      alert("<\/script>");
}
</script>

（2）使用src引用外部文件

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

　　与解析嵌入式Javascript代码一样，在解析外部Javascript文件，包括下载该文件时，页面的处理也会暂时停止。

　　（在XHTML中可以写成<script type="text/javascript" src="example.js"/>）

　　注：

　　　　（1）在带有src属性的<script>元素不应该在其<script>和<script/>标签之间在包含有额外的Javascript代码。如果包含了嵌入式代码，则只会下载并执行外部脚本文件，嵌入式的代码会被忽略。

　　　　（2）<script>元素的src属性还可以包含来自外部域的Javascript文件。

　　　　　　eg：

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

　　　　（3）无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

3.<script>标签的位置

　　传统的做法是吧script标签放在head头部内，这意味着必须等全部的Javascript代码都被下载，解析和执行完成以后，才开始呈现页面的内容，即body标签里的内容，所以当需要很多的Javascript代码时，会导致浏览器页面加载会出现明显的延迟情况，导致浏览器窗口将是一片空白。为了避免这样的情况，现代web应用程序一般都把Javascript引用放在body元素中页面内容的后面。

eg：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Test</title>

 </head>

 <body>

     <!--这里放内容-->

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

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

 </body>

 </html>

　　　　这样，在解析包含Javascript代码之前，页面的内容将完全呈现在浏览器中。用户也会因为浏览器显示空白页面的时间缩短而感到打开页面的速度加快了。

JS高程2.在HTML中使用Javascript（1）的更多相关文章

  1. JS高程2.在HTML中使用Javascript（2）

    1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...

  2. JS_高程2.在HTML中使用Javascript（1）

    1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...

  3. 第2章 两种调用JS的方法——在HTML中使用JavaScript

    一. <script>标记 第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上 ...

  4. JS_高程2.在HTML中使用Javascript（2）

    1.延迟脚本defer 在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行.<script>中的脚本会延迟到浏览器遇到</html> ...

  5. 吃透Javascript数组操作的正确姿势—再读《Js高程》

    Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...

  6. jQuery-vsdoc.js文件是vs中的JavaScript intellisense,

    在VS 2008中启用jQuery Intellisense的步骤 要在VS中启用jQuery的intellisense完成,你要遵循三个步骤: 第一步: 安装VS 2008 SP1 VS 2008 ...

  7. 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

  8. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

随机推荐

  1. Uvaoj 10048 - Audiophobia（Floyd算法变形）

    1 /* 题目大意: 从一个点到达另一个点有多条路径,求这多条路经中最大噪音值的最小值! . 思路:最多有100个点,然后又是多次查询,想都不用想,Floyd算法走起! */ #include< ...

  2. 【5.1送礼】国内第一部Matlab和C#.Net混合编程视频教程【免费】

                  本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新    Matlab和C#混合编程文章目录 :[目录]Matlab和C#混合编程文章目录 上一次写博客很久了 ...

  3. 在office2010的ppt中加入音乐

    Microsoft office Powerpoint,是微软公司设计的演示文稿软件.用户不仅可以在投影仪或者计算机上进行演示,也可以将演示文稿打印出来,制作成胶片,以便应用到更广泛的领域中.利用Mi ...

  4. APPSCAN使用外部浏览器

    在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...

  5. Windows Azure Cloud Service (36) 在Azure Cloud Service配置SSL证书

    <Windows Azure Platform 系列文章目录> 在某些时候,我们需要在Azure PaaS Cloud Service配置HTTPS连接.本章将介绍如何在本地创建证书,然后 ...

  6. 《ASP.NET SignalR系列》第一课 认识SignalR

    从现在开始相关文章请到: http://lko2o.com/moon 一.概述 ASP.NET signalr对ASP.NET开发者来说是一个新的程序库,它能让我们更加容易便捷地开发实时通信功能; s ...

  7. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  8. 前端模块化开发之seaJs

    了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...

  9. 解读 C 语言中的指针

    我想对很多学习C语言的新手来说,指针无疑是一个难点.但是,我觉得指针也是C语言特别重要的一个特性.也许,你在除了C和C++以外的编程语言中,很少看到指针.而C++中,也多用引用,而非指针.指针,作为一 ...

  10. WCF双工通讯以及客户端间的间接通讯

    由于学习计划安排不当,对WCF的认知一直停滞不前,最近工作上又用回了WCF,重拾一下,看到蒋老师介绍双工通讯的博文,实践一下,积累一下.原想着WCF的双工通讯就是原本的客户端能调用服务端的方法之余,服 ...