首页 > 代码库 > JavaScript学习笔记(一)在Html中如何使用Javascript
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由下面三种不同的部分组成:
-
ECMAScript,提供核心语言功能。
-
文档对象模型(DOM),提供访问和操作网页内容的方法和接口。
-
浏览器对象模型(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> 和 </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);
}
本次日记小结:
知识延伸:
JavaScript学习笔记(一)在Html中如何使用Javascript