引入

Day 4

现在的前端过于快餐化，基础牢，才能走得更远。

知识点

box-size 盒模型尺寸

box-sizing: content-box;（默认样式）
box-sizing: border-box;

前者的高度和宽度属性等于元素内容的高度和宽度（border和padding不包括在内）

后者的border和padding会占用元素高度、宽度（元素内容的空间会被压缩）

float属性和clear属性

浮动属性允许元素四处移动，使得其他元素可以环绕在它们的周围

浮动只能左右浮动，且浮动的元素会尽可能的向相应方向移动

当一行填满后，溢出的元素将简单地浮动到下一行

如果某块级元素的左右侧出现浮动元素（影响了正常的布局），可以清除浮动clear

clear属性可取none, left, right, both

清除浮动使该元素的左/右侧不存在浮动元素。

css盒模型

又称作“框模型”，其实就是从外向内分为多层方框

margin -> border -> padding -> content

所以元素具体高度宽度指的是什么要看使用什么box-size属性（或者是什么盒模型）

默认content-box仅仅包括content （即标准盒模型，W3C盒模型）

可选border-box则包括border -> padding -> content （IE盒模型，怪异盒模型）

position:absolute

默认的position属性为static文档常规流

此时 top, right, bottom, left 和 z-index 属性无效

对于absolute定位类型，该元素会被移出正常文档流，并不为元素预留空间

可以设置top, bottom, left, right来调整偏移量

通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。

（常常给父元素补充一个relative定位，从而使绝对定位的子元素可以相对父元素进行偏移）

固定布局、流动布局

固定布局（固定宽度布局）

指的是页面的主体容器被设置了特定的宽度，在窗口分辨率不符合时效果较差
流动布局（流式布局）

指的是页面的主体不使用指定宽度的布局（在很窄或很宽的屏幕中也能保持总体的设计美感）

但为了避免窗口过小导致元素堆叠，可以为主体容器设置min-width属性

overflow:hidden可以将溢出的背景也隐藏

文档对象模型

即DOM（Document Object Model)，属于树状结构

可以通过document.images["id_or_index"]访问dom中的图片元素

document对象部分属性: URL, title, referrer(只读), cookies, links

页面生命周期

HTML 页面的生命周期包含三个重要事件：

DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。
load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
beforeunload/unload —— 当用户正在离开页面时。

注意：

DOMContentLoaded 事件发生在 document 对象上，

要用document.addEventListener("DOMContentLoaded", func)来捕获

其他的事件发生在window对象上，用window.addEventListener(eventName, func)来捕获

window对象

浏览器对象层次结构的顶部为window对象，代表浏览器窗口

部分子对象：document, location, history, navigator

history包含当前窗口浏览位置记录和跳转到其他位置的方法

location包含当前加载的URL的相关信息和方法:

可通过修改其href属性或使用assign(url)跳转到其他URL, replace(url)则会覆盖当前url的历史记录来跳转，reload()则重载

visibility样式可以修改元素是否可见，但是仍然会占据空间

数组排序

创建：

let arr;
arr = [3,2,1];
arr = new Array(3,2,1);
arr = new Array(3); arr[0]=3; arr[1]=2; arr[2]=1;

arr.sort((a,b)=>a-b); \\自定义排序规则，a>b时需要交换，即大的排在后面

\\sort的默认排序方式也是升序

js中的自定义对象

工厂函数

js中对象并没有那么严格的要求，所以完全可以创建一个临时对象而无需构造函数

function createPerson (name, age) {
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}

var p1 = createPerson("Mike", 18);

构造函数方式

比工厂函数更加优雅

function Student(name, score) {
  this.name = name;
  this.score = score;
  this.printScore = function() {
    console.log('姓名：' + this.name + '  ' + '成绩：' + this.score);
  }
}

var std = new Student('Michael', 98); //注意要使用 new
std.printScore();

ES6中的Class

ES6 的 Class 可以看作只是一个语法糖，与构造函数方式等效

但是类的内部所有定义的方法，都是不可枚举的，而function的是可以枚举的

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

Object.keys(Point.prototype)
// [] 即不可枚举，若使用function方式则可枚举出"toString"
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

为构造函数或Class扩展属性和方法

原理为：

当一个对象的属性被访问或者方法被调用时

javascript引擎通过以下算法和顺序来检索：(有点就近原则的感觉)

在对象自身上面找
如果1.找不到，就到对象的__proto__上面找
如果2.找不到，就到__proto__.__proto__上面找...

所以可以修改构造函数或者Class的prototype属性来实行添加或修改方法或者属性

Person.prototype.nationality = "English";
Person.prototype.hi = ()=>console.log("hello");

几种遍历循环

forEach

forEach为Array.prototype.forEach()所以用于数组对象

缺点是无break, continue

someObject.forEach((val, key)=>console.log(val, key)); //key可以省略

for ... in

for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性

对于数组会迭代下标，但是不推荐对数组使用，推荐用于遍历对象

for (var key in someObject) {
  console.log(key, someObject[key]);
}

for ... of

ES6中为了解决forEach的问题，新增的for变体。

可以用于循环可迭代对象，比如Array，Map，Set，String等等

虽然不能直接遍历普通对象，但可以通过Object.keys(obj)方法得到属性迭代器进行遍历

for (var value of iterable) {
  console.log(value);
}

for in 和 for of 区别

for...in 语句以任意顺序迭代对象的可枚举属性（一般多于for...of)

for...of 语句遍历可迭代对象定义要迭代的数据

事件处理程序

英文为event handler，表示用于检测和响应事件的程序。

鼠标点击、鼠标移动，加载完页面等等都存在事件，是js用于是web文档具有交互性的关键方法。

最简单的事件添加的几种方式:

在元素html代码中加上onclick="console.log("click!");"
在js中执行someElement.onclick= event=>console.log("click!", event);
js中执行someElement.addEventListener("click", event=>console.log("click!", event));

addEventListener的好处是可以对一个事件添加多个事件监听

对于鼠标右键，onclick或许没有效果，最可靠的方式是监听onmousedown事件

点击的类型可以通过event内的属性进行判断

键盘按键也能进行监听，通过onkeydown, onkeypress, onkeyup事件处理程序进行处理

顺序为down->press->up, up只会触发一次，前两个在长按时会不断触发。

一般用于文本框，此时只有文本框处于焦点时才会触发事件处理程序。

也可以用于body进行全局监听。

具体参考: juejin.cn/post/703468…

window对象的应用

window最方便的应用即新建新窗口（或者说新标签页)，参考菜鸟教程

var newWindow = window.open("https://moteditor.ruchuby.top", "测试", "width=500,height=500,toolbar=0")

（QQ的网页登陆就是用了无toolbar的新窗口）

window.close()尝试关闭窗口

更多操作还有移动窗口，窗口大小调整等等。

对话框

对话框有三种类型 (都是window的方法，但是window可以省略)

alert(msg)：显示消息
confirm(msg): 显示消息，用户点击确认返回true, 否则返回false
prompt(msg, default): 显示消息，提示用户输入内容，返回输入框内容，若取消返回null

navigator对象

是window的属性之一，包含了浏览器的一些信息

表单提交

在name属性中使用方括号（［］）指示处理脚本将把所有值放在这一个变量（数组）中

<input type="text" name="username[]" value="Jason" />
<input type="text" name="username[]" value="Tom" />
<input type="text" name="username[]" value="Goe" />

HTML、CSS和JavaScript入门经典 学习笔记（04）

引入

知识点