带前端脚本的html页面,2.从头学前端之如何在html中使用javascript

使用

嵌入脚本与外部脚本

文档模式对JavaScript的影响

考虑禁用 JavaScript 的场景

使用

script 元素有6个属性：

async: 可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。(个人理解：如果多个js指定了async属性，无法保证js按照顺序加载；如果js中有可以阻断js运行的代码如报错，或者alert，还是可能会阻断页面中的操作的)

charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持这个属性。(个人理解：该属性和async一样，浏览器会单独开启一个线程去下载js,但是不会下载完成后和async一样立即执行，而是等到文档加载完成后再去解析，多个js文件使用defer属性可以保证加载的顺序)

language:已废弃。原来用于表示编写代码使用的脚本语言(如 JavaScript、JavaScript1.2 或 VBScript)。大多数浏览器会忽略这个属性，因此也没有必要再用了。

src:可选。表示包含要执行代码的外部文件。

type:可选。可以看成是 language 的替代属性;表示编写代码使用的脚本语言的内容类型(也称为 MIME 类型)。虽然 text/javascript 和 text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的 MIME 类型通常是 application/x–javascript，但在 type 中设置这个值却可能导致脚本被忽略。另外，在非 IE 浏览器中还可以使用以下值: application/javascript 和 application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是 text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为 text/javascript。

下图是google中js的类型(Content-Type即MIME)：

image.png

使用

直接在页面中嵌入 JavaScript 代码;

包含外部 JavaScript 文件。

在使用

function sayHi(){

alert("Hi!");

}

如果要通过

!!!需要注意的是，带有 src 属性的标签之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

无论如何包含代码，只要不存在 defer 和 async 属性，浏览器都会按照

标签的位置

Web 应用程序一般都把全部 JavaScript 引用放在

元素中页面内容的后面Example HTML Page

带前端脚本的html页面,2.从头学前端之如何在html中使用javascript相关推荐

从头学前端-35：溢出处理
大家好,我是一碗周,一个不想被喝(内卷)的前端.如果写的文章有幸可以得到你的青睐,万分有幸~ 这是[从头学前端]系列文章的第三十五篇-<溢出处理> 本篇文章介绍CSS中内容溢出的处理,主要 ...
web前端开发三个阶段和三要素，学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
如何在html中写javascript代码,如何在本地html代码中使用javascript脚本
我在jsfiddle中的代码正在工作,但是当我尝试在本地使用它时没有. 我不知道如何解决它,因为我认为代码是正确的. 我也尝试下载Jquery文件,并将其链接到代码中,但它不起作用.我确信这是一个愚蠢 ...
从头学前端-CSS基础02
一个工具: 前端快速开发插件Emmet Emmet 的前身就是 Zen Coding. 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷 ...
从头学前端-CSS基础01
CSS简介: CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表.CSS也是一种标记语言(和html一样,不是个编程语言): Html主要是页面结构,显示元素内容,CSS是美化页面,布局 ...
从头学前端-CSS基础03
页面布局三大核心,盒子模型,浮动和定位 1.盒子模型盒子模型组成: 盒子模型组成的主要有边框border,外边距margin ,内边距padding,内容content: 边框border: bo ...
从头学前端-CSS基础04
CSS高级技巧精灵图 css sprites 为了有效减少服务器接收和发送的频率,减轻服务器的压力:将许多的小图片放到一张大图片上去:就是精灵技术,CSS sprites; 精灵技术主要针对背景图片 ...
高级前端成长训练营|和阿龙一起学前端曝光——走进前端开发世界
关于作者余寒门出身,互联网从业已有10余年,一路走来实属不易,有过彻夜未眠的迷茫,有过挑灯夜战的疯狂编码,更有对美好生活的追求和向往,从最初的打杂到最 ...
java 执行javascript_说说如何在 Java 中执行 JavaScript 脚本
Java 是强类型的静态语言,即所有的代码在运行之前都必须先进行严格的类型检查并编译为 JVM 字节码.这样做虽然保证了安全与性能,但却牺牲了灵活性.而那些动态语言(JavaScript .Pytho ...

带前端脚本的html页面,2.从头学前端之如何在html中使用javascript

带前端脚本的html页面,2.从头学前端之如何在html中使用javascript相关推荐

最新文章

热门文章