JavaScript简介与使用方法

时间 2019-11-30

标签 javascript 简介使用方法栏目 JavaScript 繁體版

原文原文链接

1.JavaScript简介

1.1.JavaScript简史

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

微软加入：因为JavaScript发展的特别好，软件决定加入，为了避免在名字上侵权，就叫JScripthtml

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

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>