JavaScript学习笔记（一）在Html中如何使用Javascript

时间 2019-11-29

标签 javascript 学习笔记 html 如何使用栏目 JavaScript 繁體版

原文原文链接

这是我学习javascript的第一篇学习日记，一开始写这篇bolg的时候感受很基础以致于无处可写，无非就是把javascript代码放到<script>元素标签中，运行文件时可让javascript代码被加载解析就好了。但细细思考，其实还有不少细节的地方须要注意，好比script标签放的位置不一样会有不一样的效果，为何会出现<script>放置位置不一样效果不一样、script同步加载与异步加载的有何不一样等等。因此写了这篇博客，算是本身学习javascript的第一步吧 ( ^_^ )。其实学习一门语言不会须要太长的时间，很快会入门，但同时也会很快忘记。这就须要把重要的知识点记录下来，我本身用的是有道云笔记，新学到的知识或者不会的问题，经过查阅资料解决的都把他们记录下来。效果也不错，每周均可以回顾查看。另外写了这篇博客后，本身也有了一些新的感悟，咱们往往感叹许多技术大牛，博客名人如何厉害，其实咱们本身就能够成为技术上的leader，其一就是知识及项目经验的不断积累，其二，我认为就是学习知识时对细节的把握，其三，能够锲而不舍，不断的学习新技术，平时不断的回顾，“温故而知新”。好了，说的有点偏题，开始进入正题咯。对了，本人也是小白一枚，正在学习的路上，写博客是为了总结每日所学，反思自身。古人说“吾日三省吾身”是颇有道理的喔。javascript

在Html中如何使用Javascript

主要内容：css

1.1　　javascript简介html
1.2　　<script>元素java
1.3　　延迟脚本和异步脚本web

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可普遍用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 很容易学习。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增长动态功能。编程

javascript由下面三种不一样的部分组成：浏览器

ECMAScript，提供核心语言功能。服务器
　　文档对象模型（DOM），提供访问和操做网页内容的方法和接口。app
浏览器对象模型（BOM），提供与浏览器交互的方法和节课。异步

HTML DOM （文档对象模型）

当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

经过可编程的对象模型，JavaScript 得到了足够的能力来建立动态的 HTML。

JavaScript 可以改变页面中的全部 HTML 元素
JavaScript 可以改变页面中的全部 HTML 属性
JavaScript 可以改变页面中的全部 CSS 样式
JavaScript 可以对页面中的全部事件作出反应

关于JavaScripthe、BOM和DOM能够参考 javascript的参考手册。

<script>

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> alert("My First JavaScript"); </script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。如今已经没必要这样作了。JavaScript 是全部现代浏览器以及 HTML5 中的默认脚本语言。

使用<script>的方式有两种，一种是直接在页面中嵌入Javascript代码，另外一种是包含外部JavaScript文件。包含在<script>内的javascript代码将被自上而下的依次解释。也能够把脚本保存到外部文件中。外部文件一般包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

另外经过<script>元素的src属性还能够设置来自外部域的javascript文件，这一点让<script>倍显强大，这与<img>元素有点类似，它的src属性能够指向HTML页面之外的某个域的完整URL；通俗的说就是<script>元素的src属性能够某个网站的javascript代码文件。

<!DOCTYPE html>
<html>
<body>
<p>welcome my blog ----MasterHanBlog</p>
<script src="myScript.js" src="http://www.somewhere.com.afile.js"></script>
</body>
</html>

这样位于外部域的代码也会被加载解析，不管如何，只要不存在 defer 和 async 属性（后面会讲解），浏览器就会按照<script>元素中的代码前后顺序进行依次解析。换句话说，第一个<script>中的代码解析完后，第二个<script>包含的代码才会被解析到，而后第三个。。。。

标签的位置

按照传统作法，全部的<script>元素都应放在<head>标签里面，这样作的目的是把全部的外部文件（css文件和javascript文件）都放在相同的地方，便于管理。但是放在<head>中就意味着必须等全部的javascript代码下载、解析、执行完以后，页面要呈现的内容才会被加载（浏览器在遇到<body>元素的时候才会加载呈现页面内容）。对于那些要执行不少javascript代码的页面来讲，这无疑会致使浏览器在呈现页面时会出现很明显的延时，而延时期间页面一片空白，（等待javascript加载，未执行到<body>元素），这对于用户体验来讲是没法容忍的，为避免这个问题，现代web程序通常都把javascript用于放到<body>元素中页面内容的最后面，即结束标签</body>以前。如上个程序代码所示。

延迟脚本和异步脚本

HTML脚本的执行只在默认状况下是同步和阻塞的。<script>标签中可有defer和async属性，这能够改变脚本的执行方式。这些都是布尔属性，没有值；只须要出如今标签里便可。

defer属性使得浏览器延迟脚本的执行，直到文档的载入和解析完成，才能够操做。即脚本被延迟到整个页面解析完毕后在运行。所以设置这个属性至关于告诉浏览器当即下载javascript文件，但延迟执行。HTML5规定defer只使用于外部脚本文件，对于内嵌脚本会忽略给嵌入脚本设置的defer属性。

async属性使得浏览器能够尽快地执行脚本，而不用在下载脚本时阻塞文档解析。指定async的目的是不让页面等待脚本的下载与执行，从而异步加载页面其余内容。所以，建议异步脚本不要在加载期间修改DOM。一样，HTML5规定async只使用于外部脚本文件，对于内嵌脚本会忽略给嵌入脚本设置的async属性。

若是浏览器同时支持两个属性，会听从async属性而忽略defer属性。注意延迟的脚本会按他们在文档里出现的顺序执行。而异步在它们载入后执行，这意味着它们可能会无序执行。在不支持async属性的浏览器里，经过动态建立<script>元素并把它插入到文档中，来实现脚本的异步载入和执行。

function loadasync(url){ varhead = document.getElementsByTagName("head")[0]; vars = document.createElement("script"); s.src = url; head.appendChild(s); }

本第二天记小结：

知识延伸：