目录:

一、在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>


demo下载:HTML里使用JS

转载于:https://www.cnblogs.com/jingubang/p/4618659.html

第二章 在HTML页面里使用javaScript相关推荐

  1. JavaScript高级编程设计(第三版)——第二章:在html中使用javaScript

    系列文章目录 第三章:基本概念 目录 系列文章目录 前言 一.javaScript是什么? 1.有两种引入方式 1.1 嵌入式 1.2 外部引入 1.3 noscript标签 标签 1.4文档模式 2 ...

  2. 第二章:在HTML中使用JavaScript

    <script>元素的属性(html4): 1.asynv:可选,立即下载脚本但不妨碍页面中其它操作.只对外部脚本文件有效.异步脚本,有多个异步脚本时,并不规定执行顺序,所以要保持各异步脚 ...

  3. ajax请求返回整个页面,页面里的javascript执行问题(requireJS)

    需求背景 需求描述:功能需要是点击左侧的每个tab选项卡,后侧的内容随之改变,由于历史遗留问题,每次点击都是通过ajax来加载页面的,即没点击一个tab就发送一次ajax请求,把相关的html,css ...

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

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  5. ppk on JavaScript第二章:背景(完结篇)

    无障碍规则 尽管无法预见可能损害一个有脚本网站的可用性的所有情形,但我已经总结出一些可以帮助您在基础上不犯错的规则.不要把它们当作JavaScript和无障碍的终极规则,这只是能防止一些常见低级错误的 ...

  6. 【前端】第二章 HTML、CSS、JavaScript、DOM和JSON

    第二章 HTML.CSS.JavaScript.DOM和JSON 文章目录 第二章 HTML.CSS.JavaScript.DOM和JSON 一.HTML 1.表单 2.小票 3.注册页面 4.音视频 ...

  7. JavaScript 高级程序设计第二章

    第二章 教材: JavaScript 高级程序设计 目录 第二章 一. script元素 1. 介绍 2. 标签位置 2.1. 推迟执行脚本---defer属性 2.2. 异步执行脚本---async ...

  8. JavaWeb 第二章 JavaScript

    第二章 JavaScript 学习目标 了解JavaScript的起源与特性 掌握JavaScript的基本语法 掌握JavaScript的DOM 掌握JavaScript的事件绑定 掌握正则表达式的 ...

  9. 第二章(1)WEB 页面简介

    摘要:在这一章中,我们对Web Form 页面进行了介绍,通过几个实例,我们分别介绍了Server 控件,HTML Server 控件,以及Web Form的事件模型.在下面的章节中,我们将对本章所涉 ...

最新文章

  1. iOS已发布应用中对异常信息捕获和处理
  2. softmax函数理解
  3. boost::mp11::mp_partition_q相关用法的测试程序
  4. 全卷积网络FCN详解
  5. 软考系统架构师笔记-最后知识点总结(三)
  6. 信息学奥赛一本通(1321:【例6.3】删数问题(Noip1994))
  7. Android耗电优化
  8. EventLoop-浏览器与Node.js--整理
  9. 光纤尾纤的型号和作用有哪些?
  10. 苹果电池显示维修_苹果售后政策调整,iPhone非原装电池也提供维修!
  11. 谷歌发布智能绘画工具AutoDraw,只要有这个,谁都可以画画。
  12. C++ MFC日志Log类 棒棒的 控制台或文件或一起输出
  13. 张艺谋眼中的2020:科技的人间烟火味
  14. 对计算机专业英语的建议,中职计算机专业英语教学现况与建议论文
  15. 开发常用下载地址收藏
  16. 实体知识+字典树辅助jieba的分词(并对三国演义进行简单分析)
  17. 【奶妈级教程】Ubuntu18.04服务器远程连接指南
  18. 长沙拆除市区湖边别墅群 已“烂尾”近13年
  19. HTML5 视频直播一站式扫盲书目录
  20. 无源晶振匹配电容计算公式

热门文章

  1. 《越狱》完结 米帅迷应小心纹身网站挂马
  2. ADO.NET_05_OracleDataReader
  3. 计算机网络面试知识点
  4. url存在宽字节跨站漏洞_【XSS漏洞】XSS漏洞相关总结v1.0
  5. python如何制作一个工程软件_使用python制作一个解压缩软件
  6. VC++6.0 单步调试
  7. python 字符串 f_Python格式化字符串(f,F,format,%)
  8. 四阶行列式计算_四阶行列式的计算
  9. TokenInsight:BTC多头比例延续上升,人气保持高位
  10. SAP License:ERP的实施要点