JavaScript

最新推荐文章于 2024-04-29 20:33:39 发布

BlackDatura_

最新推荐文章于 2024-04-29 20:33:39 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/BlackDatura_/article/details/104836059

版权

JavaScript

网页的生成

HTML代码转化为DOM
CSS代码转化为CSSOM(CSS Object Model)
结合DOM和CSSOM，生成一棵渲染树，包含每个节点的视觉信息
生成布局(layout), 将所有渲染树的所有节点进行平面整合-耗时5.将布局绘制( paint )在屏幕.上-耗时

渲染render

生成布局flow和绘制paint这两步合称为渲染
网页生成时至少渲染一次，用户访问过程中会不断重新渲染
●修改DOM
●修改样式表
●用户事件
重新渲染包含:重排( reflow )和重绘( repaint),但重绘不一定需要重排，重排必定重绘

JavaScript的应用场景

网页特效
服务端开发(Node.js)
命令行工具(Node.js)
桌面程序( Electron)
App( Cordova)
控制硬件-物联网( Ruff )
游戏开发( cocos2d-js)

JavaScript的组成

●ECMAScript: JavaScript的核心，定义了JavaScript的语法规范

●BOM:浏览器对象模型，操作浏览器功能的API集合,通过BOM可以操作浏览器窗口，比如:弹出框、控制浏览器跳转、获取分辨率等

●DOM:文档对象模型，操作页面元素的API集合，DOM把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

数据类型

●简单数据类型: Number、 String、 Boolean、 Undef ined和Nu1ll●复杂数据类型: 0bject

●获取变量类型: typeof

●. 数据类型转换: toString( )、String()、 num+""、 Number( )、 parseInt(str)、parseFloat(str)、 Boolean( )

●布尔类型的隐式转换

●转换为true:非空字符串、非0数字、true、任何对象

●转换成false:空字符串、0、false、 null、 undefined

数组:掌握数组的定义、获取、遍历、新增

<script>
//定义

var arr = ["red", "green", "blue"]

//获取

console.1og(arr[0]);

//遍历

arr . forEach(el => {

//数组遍历

console.1og(e1);

});

//替换

arr[0] = "yellow";

//新增

arr[3] = "pink";

</script>

函数

●函数是一种数据类型，是js中的一等公民

●掌握函数的定义、调用、参数设置、arguments等基础概念

●高阶应用:函数作为数据类型可以作为参数、返回值

函数的定义方式

函数声明方式: function关键字(命名函数)
函数表达式(匿名函数)
new Function( ):执行效率低,较少使用
所有的函数都是Function的实例对象

作用域

●全局变量:不使用var声明的变量(不推荐使用)，关闭网页或浏览器才会销毁

●局部变量:固定代码片段内可访问的变量，如:函数内部

●块级作用域: ES6之前没有

●词法作用域:

●函数允许访问函数外的数据

●整个代码结构只有函数可以限定作用域

●若当前作用规则中已有名字，则不考虑外面的名字

//作用域

var num = 123;function foo() {

console.1og(num);foo();

if(false) {

var num = 123;}

console.1og( num) ;// undefined

闭包

●闭包(closure) 指有权访问另一个函数作用域中变量的函数

●简单理解:一个作用域可以访问另外-个函数内部的局部变量

●作用:延伸变量的作用域

应用:计算打车价格(打车起步价13(3公里内)，之后每多-公里增加5块钱。用户

var car = (function () {
var start = 13; //起步价局部变量
var total = 0; //总价局部变量return {

//正常的总价

price: function (n) {

if(n<=3){

total = start;

} else {

total=start+(n-3)*5return total;

}，//拥堵之后的费用

yd: function (flag) {

输入公里数就可以计算打车价格，如果有

return flag ? total + 10 : total;

拥堵情况，总价格多收取10块钱拥堵费)

})();

JS代码的执行过程

●JavaScr ipt代码的执行是由浏览器中的JavaScri pt解析器来执行的。

●JavaScript解析器执行JavaScri pt代码的时候，分为两个过程:预解析过程和代码执行过程。

●预解析过程

●把变量的声明提升到当前作用域的最前面，只会提升声明,不会提升赋值。

把函数的声明提升到当前作用域的最前面，只会提升声明,不会提升调用。

●先提升var,再提升function

//声明提升

vara=25;

function abc() {

alert(a); // undefinedvara=10;

abc();

//如果变量和函数同名的话，函数优先console.1og(a);

function a() {

console.1og( "aaaaa" );

vara=1;

console.1og(a);

JavaScr ipt对象分类

内置对象、浏览器对象、文档模型对象、自定义对象

●内置对象

Math/ Array/ Number/String/Boolean… .
通过MDN( https:/ /developer。mozilla. org/zh-CN/ )或
W3C( https://www. w3school. com.cn/ )查询

●浏览器对象BOM

window对象:顶层对象，所有全局JS对象、函数和变量都自动成为Window对象的成员。
screen/ locat ion/history/navigator/cookies

●文档模型对象DOM

document

自定义对象

无序属性的集合特征–属性
特性 - - 属性
行为 - -方法

●对象创建方式:

对象字面量
new 0bject()
工厂函数创建对象
自定义构造函数

//1.对象字面值
var person = {

name: 'niit',

age:18,

sex: true,

sayHi: function() {

console. log(this . name);}
}

console . log(person);

// 2. new Object()

var person = new object();

person.name = "lisi";

person.age = 35

person.job = ' actor'

person.sayHi = function() {

console.log('hello, everybody')}

console.log(person)

// 3.工厂函数.

function createPerson(name, age, job) {

var person = new Object();

person.name = name;

person.age = age

person.job = job

person.sayHi = function() {

console .log( 'hello, everybody')

return person; 

console.log(createPerson('张三', 22, ' student'));// 4.自定义构造函数

function Person(name, age, job) {

this.name = name;

this.age = age

this.job = job

this.sayHi = function() }

console. log('hello, everybody')

  }

}

console.log(new Person('张三', 22, 'student'));