您的位置: 首页  >  文章  >  Javascript的使用

Javascript的使用

分类: 文章 • 2024-05-23 08:37:52

JavaScript的使用

背景知识

  1. 在Javascript中没有类的概念
  2. 由于没有类的概念所以使用JavaScript中的概念，区别其他的语言的使用。
  • 问题一：Javascript的作用是什么？
    问题背景：

在HTML前端开发中web 语言分为三类

  • HTML定义了网页的内容
  • CSS定义了网页的布局
  • JavaScript 规定了网页的行为
  • javaScript都涉及那些内容?
    JavaScript 中涉及到JavaScript内置对象，浏览器（Browser）对象，HTML DOM 对象（HTML DOM 定义了访问和操作 HTML 文档的标准）。

第一部分JavaScript 中对象

Javascript的使用

  • 问题一：对象的概念是什么？
    这里的对象类似于默认继承类的默认类，类似Java类的基本类，这些基本类可以实现基本的数据类型的创建工作。
  • 问题二：属性和方法？
    每个数据类型都有默认的属性，（类似于类的静态成员变量），对象拥有的方法类似静态成员方法。
    举例：
    Javascript的使用
    对应的调用属性和方法
    Javascript的使用
    关于全局对象和全局属性
    结论：Javascript的使用
    具体的内容参考网页：JavaScript中的两种全局对象 详细讲述了全局对象的内容。
    浏览器端JavaScript编程时，只需关心“window全局对象”即可。

第二部分浏览器（Browser）对象，浏览器对象模型 (BOM)

Javascript的使用

  1. window对象
    表示浏览器中打开的窗口。
  2. Navigator 对象
    包含有关浏览器的信息。
    属性举例
    Javascript的使用
  3. Screen 对象
    包含客户端显示屏幕的信息
  4. 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对象的基本分类
Javascript的使用
Javascript的使用

  • Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

  • 问题三：Document 对象形成的基础是什么？
    答：在浏览器加载文档会形成一个文档对象（Document）在JavaScript中访问即可代表访问当前的文档。

  • 什么是事件对象？
    背景

DOM0,DOM2,DOM3级事件模型
事件处理程序中event参数的传递

  • 问题一：事件对象的由来？
    答：事件对象，在事件（onclick）产生时，会浏览器会产生一个事件对象，然会传递给事件监听函数，在不同 的时间模型中，传递event对象的方式是不同的。

  • 问题二：如何注册事件处理函数？
    三种方式可以为DOM元素注册事件处理函数

  • 问题三：关于关于注册事件处理方式的区别？
    使用DOM0的方式，ｍyobject.ο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
    Javascript的使用

  • CSSStyleDeclaration 对象
    CSSStyleDeclaration 对象表示一个 CSS 属性-值（property-value）对的集合。对应于元素的style 属性的值。

  • 关于HTML collection 对象的使用
    答案：collection 对象使用并不复杂
    Javascript的使用
    问题：collection 与NodeList的区别是什么？
    参考网址：https://segmentfault.com/a/1190000006782004
    Javascript的使用
    难点补充：
    关于事件模型的难点是：
    https://blog.****.net/iefreer/article/details/8573940
    DOM0 的规定事件处理阶段为：冒泡阶段
    w3c 的事件注册处理方式，规定了addeventlistener(。。。，) 参数element2.addEventListener(‘click’,doSomething,false) 最后一个参数为true，则代表事件在捕获阶段被处理，false则代表事件在冒泡阶段被处理。

相关推荐