Javascript的使用
JavaScript的使用
背景知识
在Javascript中没有类的概念
由于没有类的概念所以使用JavaScript中的概念,区别其他的语言的使用。
-
问题一:Javascript的作用是什么?
问题背景:
在HTML前端开发中web 语言分为三类
- HTML定义了网页的内容
- CSS定义了网页的布局
- JavaScript 规定了网页的行为
- javaScript都涉及那些内容?
JavaScript 中涉及到JavaScript内置对象,浏览器(Browser)对象,HTML DOM 对象(HTML DOM 定义了访问和操作 HTML 文档的标准)。
第一部分JavaScript 中对象
-
问题一:对象的概念是什么?
这里的对象类似于默认继承类的默认类,类似Java类的基本类,这些基本类可以实现基本的数据类型的创建工作。 -
问题二:属性和方法?
每个数据类型都有默认的属性,(类似于类的静态成员变量),对象拥有的方法类似静态成员方法。
举例:
对应的调用属性和方法
关于全局对象和全局属性
结论:
具体的内容参考网页:JavaScript中的两种全局对象 详细讲述了全局对象的内容。浏览器端JavaScript编程时,只需关心“window全局对象”即可。
第二部分浏览器(Browser)对象,浏览器对象模型 (BOM)
- window对象
表示浏览器中打开的窗口。 - Navigator 对象
包含有关浏览器的信息。
属性举例 - Screen 对象
包含客户端显示屏幕的信息 - History 对象
显示浏览器窗口中访问过得URL。
第三部分 DOM 对象
- 问题一:什么是DOM对象?
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
发展现状
开始的时候,JavaScript和DOM是交织在一起的,但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容,因此我们可以写成这个近似的等式:
API (web 或 XML 页面) = DOM + JS (脚本语言)
- 问题二:DOM中的基本概念
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点
- 文档是一个文档节点
- 所有的HTML元素是元素节点
- 有的HTML属性是属性节点
- 文本插入到HTML元素是文本节点
- 注释是注释节点
DOM对象的基本分类
-
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
-
问题三:Document 对象形成的基础是什么?
答:在浏览器加载文档会形成一个文档对象(Document)在JavaScript中访问即可代表访问当前的文档。 -
什么是事件对象?
背景
-
问题一:事件对象的由来?
答:事件对象,在事件(onclick)产生时,会浏览器会产生一个事件对象,然会传递给事件监听函数,在不同 的时间模型中,传递event对象的方式是不同的。 -
问题二:如何注册事件处理函数?
三种方式可以为DOM元素注册事件处理函数 -
问题三:关于关于注册事件处理方式的区别?
使用DOM0的方式,myobject.οnclick=function()。。。只能注册一个,多个重复使用,后一个覆盖掉前一个。 使用DOM2方式注册事件addeventlistener()注册多个事件,不会覆盖,会同时起作用:https://www.runoob.com/try/try.php?filename=tryjs_addeventlistener_add_many -
如何传递事件event对象?
在处理函数中,将event对象作为第一个参数参数,可以访问 DOM Event 接口
https://developer.mozilla.org/zh-CN/docs/Web/API/Event#DOM_Event_interface -
CSSStyleDeclaration 对象
CSSStyleDeclaration 对象表示一个 CSS 属性-值(property-value)对的集合。对应于元素的style 属性的值。 -
关于HTML collection 对象的使用
答案:collection 对象使用并不复杂
问题:collection 与NodeList的区别是什么?
参考网址:https://segmentfault.com/a/1190000006782004
难点补充:
关于事件模型的难点是:
https://blog.****.net/iefreer/article/details/8573940
DOM0 的规定事件处理阶段为:冒泡阶段
w3c 的事件注册处理方式,规定了addeventlistener(。。。,) 参数element2.addEventListener(‘click’,doSomething,false) 最后一个参数为true,则代表事件在捕获阶段被处理,false则代表事件在冒泡阶段被处理。