JavaScript简介与使用方法

时间：2022-10-07 17:05:50

1.JavaScript简介

1.1.JavaScript简史

最初：网络通信很慢，网页上的数据要传送到数据库验证，然后再返回错误结果，找客观过程要等很久，于是，网景公司开发出一门新语言，当时Java非常热，于是就起名叫JavaScript。

微软加入：由于JavaScript发展的特别好，软件决定加入，为了不在名字上侵权，就叫JScript

标准确定：软件加入后，市场上就有两个版本了，为了统一ECMA协会组织了网景，微软等公司，共同确定了基本语法，叫做ECMAScript，各家公司在这个叫做ECMAScript的基本语法上做各自的JavaScript实现。

1.2.JavaScript的实现

虽然有了基本的语法ECMAScript，但是JavaScript一共包含了三部分的内容，分别是：ECMAScript语法+DOM+BOM

ECMAScript：

ECMAScript：提供了核心语言支持，这个规定了JavaScript的语法，类型，语句，关键字，保留字，操作符，对象等核心类型和语法。

文档对象模型：DOM

文档对象模型：Mocument Object Model提供访问和操作页面内的方法和接口 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层次的节点结构，通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权，借助DOM提供的API，开发人员可以轻松自如的删除，添加，替换或修改任何节点

浏览对象模型：BOM

浏览器对象模型：BOM Browser ObjectModel，提供与浏览器交互的方法和接口。开发人员使用BOM可以控制浏览器显示的页面以外的部分，即处理浏览器窗口和框架。普遍认为浏览器弹出新窗口，移动，缩放，关闭浏览器，对Cookie的支持等等。都算在BOM里面

2.在HTML中使用JavaScript

2.1.<Script>元素

<script>元素常见的属性有6个，都是可选的

  • async：表示要立即下载脚本，但不应妨碍页面中的其他操作。比如加载其他资源
  • charset：通过src指定的代码字符集，一般不用
  • defer：表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部文件有效
  • language:已废弃，原表示编写代码使用的脚本语言
  • src：表示包含要执行的外部js文件。
  • type：通常设置text/javascript,表示编写代码使用的脚本语言的内容类型。

在没有async和defer属性时，页面中的JavaScript是按照从上到下来执行的。JavaScript没有执行完是不会解析页面的。

不推荐使用<script type="text/javascript" src="example.js"/>没有</script>的方式，这样有些游览器会不认识

2.2.标签的位置

一般标签都放在<head>里面，这样便于集中管理，但是按照HTML解析的顺序，此时的JavaScript要先解析才能解析页面。所以现在更多的是将<script>元素放在<body>元素里面的最后面，这样只有当页面解析完之后，才会执行JavaScript。

2.3.延迟脚本

在<script>元素中使用使用defer属性，使JavaScript脚本会被延迟到整个页面都解析完毕之后再运行，因此使用此属性就是告诉浏览器，立即下载，但是延迟执行。

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

但是这个属性是之前给早期的浏览器的，其他浏览器可能会忽略这个属性，就像平常一样执行，所以最好的做法还是将<script>放在脚本底部

2.4.异步脚本

HTML5给<script>定义了async属性，该属性可以让脚本不按照顺序执行，指定async属性属性的目的是不让页面等待两个脚本下载执行，从而异步加载其他页面,不过建议异步脚本不要在加载期间修改DOM

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

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

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

</head>

<body>

</body>

</html>

上面两个<script>先后执行的顺序不一定。

在XHTM中使用async要设置成：async=“async”

3.使用外部文件的优点

<script>元素可以内嵌，也可以外部调用，但是一般推荐外部调用，优点是

  • 可维护性
  • 可缓存，浏览器缓存
  • 适应未来

4.<noscript>元素

<noscript>元素可以在指定不支持脚本的浏览器中显示替代内容，但在启用了脚本的情况下，浏览器不会显示<noscript>元素内任何内容。<noscript>元素可以放在<body>中

当出现以下两种情况时，浏览器会把<noscript>元素显示出来

  • 浏览器不支持脚本
  • 浏览器支持脚本，但脚本被禁用
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

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

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

</head>

<body>

<noscript>

    <p>本页面需要浏览器支持（启用），JavaScript。</p>

</noscript>

</body>

</html>

相关文章