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

 

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

 

在Html中如何使用Javascript

主要内容：

  • 1.1　　javascript简介

  • 1.2　　<script>元素

  • 1.3　　延迟脚本和异步脚本

 

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

javascript由下面三种不同的部分组成：

  1.            ECMAScript，提供核心语言功能。

  2. 　　     文档对象模型（DOM），提供访问和操作网页内容的方法和接口。

  3.            浏览器对象模型（BOM），提供与浏览器交互的方法和节课。

HTML DOM （文档对象模型）

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

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

HTML DOM 树

DOM HTML 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

  • JavaScript 能够对页面中的所有事件做出反应

关于JavaScripthe、BOM和DOM可以参考    javascript的参考手册  。

<script>

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

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript：

<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);

}

本次日记小结：

知识延伸：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/HanBlogs/p/5960733.html