开发者社区> 幸运券发放> 正文

细谈在HTML中使用JavaScript

简介: 细谈在HTML中使用JavaScript 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌入网页的方法 1、<script>元素直接嵌入代码 <script ty.
+关注继续查看

细谈在HTML中使用JavaScript

前言

JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果

JavaScript代码嵌入网页的方法

1、<script>元素直接嵌入代码

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

2、<script>元素加载外部脚本

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

<script>标签相关属性

type属性

  • <script>标签默认就是JavaScript代码,嵌入javascript脚本时,type属性可以省略
  • 如果type属性的值,浏览器不认识,就不会执行其中的代码,所以可以在<script>标签中嵌入任意的文本内容,只要加上一个浏览器不认识的type属性就行,浏览器不会执行也不会显示它的内容,但是这个<script>节点依然存在于DOM之中,可以使用<script>节点的text属性读取它的内容

defer属性

<script src="a.js" defer></script>
<script src="b.js" defer></script>

defer属性的运行流程:

  1. 浏览器开始解析HTML网页
  2. 解析过程中,发现带有defer属性的<script>元素
  3. 浏览器继续往下解析HTML网页,同时并行下载<script>元素加载的外部脚本
  4. 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本

需要注意:

  • 异步加载资源
  • 按照顺序执行脚本
  • 使用defer加载的外部脚本不应该使用document.write方法

async属性

<script src="a.js" async></script>
<script src="b.js" async></script>

async属性的运行流程:

  1. 浏览器开始解析HTML网页
  2. 解析过程中,发现带有async属性的<script>标签
  3. 浏览器继续往下解析HTML网页,同时并行下载<script>标签中的外部脚本
  4. 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
  5. 脚本执行完毕,浏览器恢复解析HTML网页

需要注意:

  • 异步加载资源
  • 并不会按照顺序执行JS,谁先下载完,谁就先执行
  • 使用async加载的外部脚本不应该使用document.write方法

async和defer属性归纳

  • 都能解决“阻塞效应”
  • 都是异步加载资源,但执行顺序不一样
  • 如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性

动态生成脚本

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});
  • 不会阻塞页面渲染
  • async设置为false可以保证b.js在a.js后面执行
  • 在这段代码后面加载的脚本文件,会等在b.ja执行完成后再执行

相关知识点总结

  1. 包含在<script>标签内部的JavaScript代码,将被从上到下一次解析
  2. 无论以哪种方式嵌入代码,只要不存在defer和async属性,浏览器都会按照<Script>标签在页面中出现的先后顺序对它们进行解析
  3. 加载外部脚本的优点:可维护性、可缓存、适应未来
  4. <script>放在底部的原因1、避免“阻塞效应”。2、避免,在DOM结构生成之前调用DOM节点,而产生错误

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一篇文章教会你使用html+css3制作炫酷效果
一篇文章教会你使用html+css3制作炫酷效果
498 0
JavaScript使用原型判断对象类型
1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们并没有给这个对象添加过constructor,这个属性是从哪儿来的呢?讲过原型之后,我们知道这个属性是原型中的,所以一般重写原型时也都会把constructor补上。
1216 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27907 0
使用JavaScript动态的添加组件
使用JavaScript进行动态的网页窗体组件的添加是一件很方便也很容易实现的事情。话不多说,边看代码边做解释吧。 准备工作 由于html页面中不可以添加java代码,所以我在jsp页面中进行了测试。
877 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20076 0
使用JavaScript和Canvas打造真实的雨滴效果
使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js  。我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗更复杂的JavaScript。
1070 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23535 0
使用JavaScript在HaaS EDU K1上实现文字显示
当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了,这块开发板带着OLED屏,而底层的AliOS Things已经支持图形库,所以可以通过轻应用的开发方式,尝试进行GUI相应的开发。
195 0
+关注
幸运券发放
阿里云代金码bieryun.com
370
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载