资讯专栏INFORMATION COLUMN

客户端的js js脚本的引入 js的解析过程

李文鹏 / 1728人阅读

摘要:浏览器中的浏览器中的通常称为客户端的客户端对象是所有客户端特性和的主要接入点。浏览器不会执行之间的代码中的事件处理程序当脚本所在的文件被载入的时候。可以达到延迟脚本的执行,直到文档载入和解析完成,才方可操作。

web浏览器中的JavaScript
web浏览器中的js通常称为客户端的JavaScript

客户端 JavaScript

window对象是所有客户端JavaScript特性和api的主要接入点。
即,表示web浏览器一个窗口或窗体。使用标识符window来完成引用。

属性

window对象定义了一些属性,用来指定当前窗口的一些信息。通过该属性的引用,可以获取当前窗口的信息

// web API 接口 获取当前页面的信息,返回一个页面信息的对象
window.location
// 所有的必须小写,为只读属性。
// 设置localtion属性,完成跳转到一个新的页面,即使是原来的链接也会完成跳转
window.location = "https://www.google.com.hk";

注意,该属性为只读属性,不可进行修改,能进行赋值操作,并不意味着能进行修改。进行赋值以后会完成页面的跳转,而让其达到被修改的目的。

方法

window还定义了一些方法,alert()弹出对话框,以及setTimeout()注册一个函数,在给定的一段时间以后触发回调

> setTimeout(() => {alert("hello word!");}, 2000);
2

返回值为一个定时器的编号,该定时器和window.setInterval(重复调用一个函数,或执行一段代码)共用一个编码池。
该代码,并没有显式的使用window属性。但是依然隐式的使用了window属性。因为window为全局对象,即window对象处于作用域链的顶部,其属性以及方法为全局变量和全局函数。在没有直接说明的时候,自动从作用域链往上寻找,直到window顶部。window对象有一个引用自身的属性,即window,如果要引用其窗口本身,可以用window这个属性。
即上方代码和下方代码等价

> window.setTimeout(() => {alert("hello word!");}, 2000);
2
一个属性document

该属性引用Document对象,为window对象的一个属性。该属性有一些方法。该方法同时也为document属性的一些方法(因为是引用关系)
例如

// 寻找 id = "timestamp" 的元素
> var timestamp = document.getElementById("timestamp");
undefined
> timestamp;
// 获取脚本的内容 > timestamp.firstChild #text "2222222" // 插入当前时间 > timestamp.appendChild(document.createTextNode(new Date().toString()))
html嵌入js

html嵌入js有四种方法

内联,放置在

标签对之间

放置在


    


    

Digital Clock

外部文件中脚本

使用

的src属性进行引用
可以在标签内部加上版权以及配置

定义了一个配置项,由core.js读取。将页面的参数传入库的一种手法。在

之间的代码是纯文本。在core.js执行的时候读取这段文本,然后动态执行一次。浏览器不会执行之间的代码

html中的事件处理程序

当脚本所在的html文件被载入的时候。脚本里的js会执行一次。为了可交互,js会定义事件处理程序即web浏览器先注册函数,并在之后调用其作为事件的响应。其中事件处理程序的属性可以包含任意条js语句。相互之间用逗号分隔。该语句会成为一个函数体,然后这个函数体成为对应事件处理程序属性的值。

url中的js

应用用途 书签
通过协议类型指定url内容为任意字符串,该字符串是会被js解释器运行的js代码,其会被当成多带带的一行代码实现。即语句之间必须使用分号作为分割。
即,书签的实现。如果书签是javascript:url,那么将会保存一小段脚本。该脚本是一个小型程序,即可以在浏览器菜单或工具栏里启动。该代码执行会像页面上的脚本一样,查询和设置文档的内容,呈现和行为(不能有返回值,会重新促使浏览器渲染)即通过书签,操作文档,将文档替换成为新的内容

js程序的执行

这些代码都会功用同一个全局window对象。即都能共享全局函数和全局变量的集合。即一个页面中js都会在执行后对所有的全局变量和函数都可见。
如果使用的窗体,