2.1 如何用网页表达复杂的内容

(1)网页语言 - Html5

(2)网页元素的样式语言 - CSS3

(3)使用前端样式框架 - Bootstrap、WeUI、jQueryWeUI

2.2 编程控制网页

(1)JavaScript 基本语法

参考资料:(阮一峰 ECMAScript 6 入门)[https://www.bookstack.cn/read/es6-3rd/sidebar.md]

(2)JavaScript 中的面向对象编程 - 对象与类的概念

JavaScript 中的类的写法

(3)BOM 总体结构与 DOM 的关系

BOM 及 DOM 是浏览器及网页的一组可编程对象。网页编程的基本原理:
【1】取得一个对象
【2】修改其属性可以改变其状态
【3】调用其方法,可以使用它提供的功能
【4】为其发生的事件添加处理程序,可以处理互动


有哪些对象可以被编程?
BOM 浏览器对象模型,这是浏览器提供的,封装好的一些对象
参考资料: https://blog.csdn.net/lhjuejiang/article/details/79453407
参考资料:https://www.jianshu.com/p/b685a0f19f74

  window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
  document 对象,文档对象;
  location 对象,浏览器当前URL信息;
  navigator 对象,浏览器本身信息;
  screen 对象,客户端屏幕信息;
  history 对象,浏览器访问历史信息;

DOM 文档对象模型:https://www.runoob.com/htmldom/htmldom-tutorial.html

通过 BOM 的 document 对象提供的下列方法,可以操控 DOM 对象
getElementById(id) - 获取带有指定 id 的节点(元素)
appendChild(node) - 插入新的子节点(元素)
removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点
  

实例:

//  操作属性的实例
// 【1】取得对象,location 对象是 BOM 提供的
// 【2】location 的 href 属性代表当前加载的网址,直接修改会改变网页的内容 
location.herf = 'https://www.qq.com'  

//  调用方法
// 【1】取得对象 history 为 BOM 提供的
// 【2】想通过 history 的 back 方法,让浏览器后退或前进
history.back()  
history.forward()

// 处理事件
// 【1】取得对象,html中的元素都是 DOM 对象
// 【2】onclick 是元素对象的事件接口,为事件添加处理代码,就可以对接相应的事件,从而达成互动的目的
<button type="button" onclick="alert('Hi,world')">点击我</button>

// 综合代码实例
// 应用案例:网页上有一个文字标签,点击后会提示密码
<p id="lblPass">这是我的密码,点击后提供提示</p>

// 【1】取得对象,想要对文字标签操作,先得拿到对象,此处通过 document 的 getElmentById 方法取得
let lbl = document.getElementById("lblPass");
// 【2】为对象添加
lbl.onclick = function(){
    console.log(this);
    this.innerHTML = "your password is 123456";
}

2.3 使用JavaScript程序库

外部库有两种引用方式:NodeJS方式引用、Browser方式
NodeJS方式支持 NodeJS 应用程序开发,也支持 Web 前端开发,一般是通过安装程序 npm install 将外部的源代码下载到本地,引入当前程序或 Web 网页中,需要通过编译步骤,比较复杂。
Browser方式就是直接在网页中引用外部的 js 文件。

(1)jQuery 与 Zepto.js

(2)Moment.js 实例 - NodeJS 与 Browser 两种引用方式

(3)Lodash 实例

posted on 2022-05-15 11:19  精思入神  阅读(187)  评论(0编辑  收藏  举报