青训营笔记 day6 前端语言串讲

前端语言的基本能力

HTML 相当于骨架
CSS 相当于皮肤
JavaScript相当于肌肉

CSS

由Selector和Declaration组成，Declaration又由Property与Value组成

JavaScript

借鉴C语言的基本语法
借鉴Java语言的数据类型和内存管理
借鉴Scheme语言，将函数提升到“第一等公民”的地位
借鉴Self语言，使用基于原型（prototype）的继承机制

七种基本类型

String
Number
Boolern
Null
Undefined
Symbol
Object
- Array
- Function 新增了BigInt

变量声明：var和let

var关键字

var的声明作用域

function test(){
   var message = "hi"; //局部变量
}
test();
console.log(message); //出错

在上面的代码中，message是一个在函数内部定义的局部变量，在函数退出时即被销毁
不过，在定义变量时可以省去var操作符，这样就会得到一个全局变量

function test(){
   message = "hi"; //局部变量
}
test();
console.log(message); //hi

只要调用一次test，就会定义message这个变量

注意：不推荐使用var定义全局变量，在局部作用域下定义的全局变量很难维护，也会造成困惑，不能一下子断定出省略var是不是有意而为之。在严格模式下，这样声明变量会抛出ReferenceError

var声明提升

使用var声明的变量会自动提升到函数作用域顶部

function foo(){
   console.log(age)
   var age = 26;
}
foo(); //undefined

//等同于

function foo(){
   var age;
   console.log(age)
   var age = 26;
}

此外，反复使用var声明同一个变量也没有问题

let声明

let与var最明显的区别是，let声明的范围是块作用域，var声明的范围是函数作用域

let不允许在同一个块作用域中出现冗余声明

var name;
let name; //SyntaxError

let name;
var name; //SyntaxError

可见两个关键词声明的并不是不同类型的变量，而是指出变量的相关作用域如何存在

另一个重要区别，就是let声明的变量不会在作用域中被提升

暂时性死区
在let声明之前的执行瞬间被称为“暂时性死区”，在此阶段引用任何后面才声明的变量都会抛出ReferenceError
全局声明
与var不同，使用let在全局作用域中声明的变量不会称为window对象的属性
条件声明
在使用var声明变量时，多余的变量声明会在作用域顶部合并为一个声明。而因为let作用域是块，所以不可能检查前面是否已经使用let声明国同名变量。
for循环中的let声明
在let出现之前，for循环定义的迭代变量会渗透到循环体外部

for(var i=0;i<5;i++){
   //循环逻辑
}
console.log(i);  //5

改成使用let这个问题就消失了，因为迭代变量的作用域仅限于for循环内部
使用var最常见的问题就是对迭代变量的奇特声明和修改

for(var i=0;i<5;++i){
   setTimeOut( () => console.log(i) , 0)   
}
//并不会输出0、1、2、3、4
//会输出5、5、5、5、5

//原因：在退出循环时，迭代变量保存的是导致循环退出的值：5。所有的i都是同一个变量，因而输出的是同一个值
//而在使用let声明迭代变量时，JavaScript引擎会在后台为每个迭代循环都声明一个新的迭代变量。

const声明

const行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，并且尝试修改const声明的变量会导致运行时出错修改const引用对象内部的属性并不违反const的限制
不能用于for循环中的迭代变量（因为迭代变量会自增），但在声明一个不会被修改的for循环变量时可以使用。对for-in和for-of很有意义

Browser

输入URL按下回车后浏览器的行为： V8 现有工作流程

前端语言的协作配合

CSS in HTML

JavaScript in HTML

EVENT LOOP

JavaScript将任务分为同步任务和异步任务，同步任务进入主线中中，异步任务首先到Event Table进行回调函数注册。
当异步任务的触发条件满足，将回调函数从Event Table压入Event Queue中。
主线程里面的同步任务执行完毕，系统会去Event Queue中读取异步的回调函数。
只要主线程空了，就会去Event Queue读取回调函数，这个过程被称为Event Loop。

HTML

HTML DTD

HTML并非图灵完备，它只是一门标记语言
图灵完备：如果一个计算系统可以计算每一个图灵可计算函数，那么这个系统就是图灵完备的；或者说，这个系统可以模拟通用图灵机。

图灵完备性也可以用来描述计算机语言的计算能力。

基本语法：

标签Element
文本Text
注释Comment
DTD Document Type Defination
处理信息 ProcessingInstruction

标签分类

head标签

HTML ARIA

ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义

HTML5 语义化标签

1、代码结构清晰，易于阅读，利于开发和维护

2、提高用户体验，在样式加载失败时，页面结构清晰

3、方便其他设备解析（如屏幕阅读器）根据语义渲染网页。

4、有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

HTML5 表单增强

增加了许多Type

前端语言串讲 | 青训营笔记 day6