第二章 在HTML页面里使用javaScript

目录:

一、在html里使用js的方式

二、<script>标签的参数

三、javaScript代码的位置

四、<noscript>标签的意思

一、主要有两种方式:

1、第一种是在HTML里嵌入:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>高3</title>
</head>
<body>
<h1>HTML里使用javaScript</h1>
<script>
alert("hello world!");
</script>
</body>
</html>

运行此代码会弹出显示hello world!的对话框。

2、外部引入javaScript:

  HTML代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>高3</title>
</head>
<body>
<h1>HTML里使用javaScript</h1>
<script src="lesson1.js"></script>   <!-- 这里引用了外部文件,文件名为lesson1.js -->
</body>
</html>

  lesson1.js代码:

alert("hello world!");

二、<script>标签的参数:

<script>标签有好几个参数,如下:

  • async:可选。表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或其他脚本。只对外部脚本有效,也就是第二种方式加这个参数才有效。
  • charset:可选。表示通过src属性置顶的代码的字符集,第二种方式才有用,不过实际意义基本没用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效,也就是第二种方式。IE7以前对嵌入式脚本也有效。
  • language:可选。没用处。。。。。
  • src:可选。但是第二种方式必须。
  • type:可选。代表编写代码使用的脚本语言的内容类型。用与不用都行,建议不用。(因为不加的话默认就有的,跟MIME有关)

async和defer的区别:这两个都是延迟执行脚本,也就是页面加载完后执行脚本,但是如果外部引用多个脚本的话,defer会按照引用顺序执行,async就不能保证了。

三、javaScript在页面的位置:

目前推荐的是放在</body>之前,其实随意放在哪都可以,为什么放在页面最后呢?是主要因为两个原因:

一、放在head里的话,浏览器的内容会在全部JavaScript代码都被下载、解析、执行完成以后,才开始呈现页面内容(浏览器碰到body标签才开始展示内容)。如果代码很多,会花一定时间来进行前边的各种操作,进而导致浏览器有空白期。(外部脚本可以通过上边的defer,async属性解决)

二、DOM找不到的问题,有些在初始化里操作DOM,但是实际DOM浏览器还没解析出来,会导致报错。

四、<noscript>标签:

浏览器不支持脚本或者禁用脚本的时候,<noscript></noscript>标签里的内容会被显示出来。

<noscript>
您的浏览器不支持javaScript
</noscript>
时间: 2024-11-02 16:56:11

第二章 在HTML页面里使用javaScript的相关文章

Javascript高级程序设计——第二章:在HTML中使用Javascript

第二章:在HTML中使用Javascript <script>元素 向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性: async:可选.表示应该立即下载脚本,但不妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本,只针对外部脚本有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只针对外部脚本有效. src:可选.表示包含要执行代码的外部文件. type:可选.表示编写代码使用

第二章—在HTML文件中添加JavaScript

一.运行脚本的最常见方式是在HTML文档中使用HTML<script>和</script>标记,在HTML文档的头部和主体部分加入均可. 二.<script>标记有6中特性:type.language(已不建议使用).charset(大多数浏览器不识别,不建议使用).src.defer(defer告诉浏览器正常加载外部脚本文件,但直到页面完全解析即</html>标记被加载之后才执行脚本).async(告诉浏览器可以不等待脚本的加载,而继续加载其他代码,在文档

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

JavaScript高级程序设计学习笔记第二章

1.向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素 2.HTML 4.01中定义了<script>元素的六个属性(方便记忆,可将6个属性分为3组) 第一组: async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.(使用<script>不属于外部脚本) defer:可选.表示脚本可以立即下载,但是延迟到文档完全被解析和显示之后再执行.只对外部脚本文件有效. 第

Javascript高级程序设计读书笔记(第二章)

第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到整个页面都解析完毕后再运行.相当于告诉浏览器立即下载,但延迟执行.HTML5规定要求脚本按照它们出现的先后顺序执行. 异步脚本(async)如果有多个脚本文件,执行顺序不确定,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容. XHTML代码的规则比编写HTML严格得多,下面

[书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript并发编程方面的实践. 完整书籍翻译地址:https://github.com/yzsunlei/javascript_concurrency_translation .由于能力有限,肯定存在翻译不清楚甚至翻译错误的地方,欢迎朋友们提issue指出,感谢. 本书第一章我们探讨了JavaScri

JavaScript高级程序设计:第二章

在HTML中使用JavaScript 1.<script>元素:向HTML页面中插入JavaScript的主要方法就是使用<scritp>元素.HTML4.01为<script>定义了下列6个属性. (1)async:可选.表示立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. (2)charset:可选.表示通过src属性指定的代码的字符集.由于大多数浏览器会忽略它的值,因此这个属性很少有人用. (3)defer:可选.

第二章 在HTML中使用Javascript --《Javascript高级程序设计》

一.<script>元素 向HTML 页面中插入JavaScript 的主要方法,就是使用<script>元素. HTML 4.01 为<script>定义了下列6 个属性. (1)async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.  async [??s??k] 异步 非同步 (2) charset:可选.表示通过src 属性指定的代码的字符集.由于大多数浏览器会忽略它的值,因此这个属性很少有

JavaScript 数据访问(通译自High Performance Javascript 第二章) [转]

JavaScript 数据访问(通译自High Performance Javascript 第二章) 提问者:lilei335260(ID:160310) | 悬赏 0.0 希赛币 | 回答数:12 | 关注度:32 | 提问时间:2014-05-03 JavaScript 数据访问(翻译自High Performance Javascript 第二章) 计算机科学中一个经典的问题是决定如何存储数据,以便进行快速的读取和写入操作. 在代码执行期间,数据如何存储将会关系到它们的检索速度.在Jav