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 树

透过可编程的靶子模型,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);

}

 

 

 

此次日记小结:

 

 


 

 

 

 

 

 

知识延伸: