如何利用编程显示网页内容?(How to use programming to display web content?)

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

(1)浏览器的基本原理 – BOM

(2)如何构造网页 – DOM

(3)网页语言 – Html5

(4)网页元素的样式语言 – CSS3

(5)使用前端样式框架 – Bootstrap、WeUI、jQueryWeUI

2.2 编程控制网页-JavaScript原生程序

(1)对象模型 – 属性、方法、事件

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

实例:

//  操作属性的实例
// 【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";
}

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

(2)

2.3 使用JavaScript程序库

(1)jQuery 与 Zepto.js

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

(3)Lodash 实例

————————

2.1 how to use web pages to express complex content

(1) Basic principles of browser – BOM

(2) How to construct web pages – dom

(3) Web language – HTML5

(4) Style language of web elements – CSS3

(5) Use front-end style framework – bootstrap, weui, jqueryweui

2.2 programming control web page – Javascript native program

(1) Object model – properties, methods, events

Basic principles of Web Programming:
【1】 Get an object
【2】 Modifying its properties can change its state
【3】 By calling its methods, you can use the functions it provides
【4】 Add handlers for the events that occur to handle interactions

example:

//  操作属性的实例
// 【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";
}

BOM object:
Window object is the top-level object of JS, and other BOM objects are the attributes of window object;
Document object, document object;
Location object, browser current URL information;
Navigator object, information of browser itself;
Screen object, client screen information;
History object, the browser accesses history information;

(2)

2.3 使用JavaScript程序库

(1)jQuery 与 Zepto.js

(2)Moment. JS instance – nodejs and browser

(3) Lodash instance