前端语言串讲
JavaScript
七个类型（6个原始类型+1个复合类型）
- 6个原始类型：数值（Number）、字符串（String）、布尔值（Boolean）、Null，undefined、Symbol
- Symbol数据类型：是由ES6带来的，为了解决对象的属性名冲突。
- 1个复合类型：对象（Object）
- Array（数组）和Function（函数）继承自对象
基础语法
var a = 7 + "2"
-
var、let、const 关键字
- var:定义变量，函数级作用域（只有函数才能隔绝其定义的变量）
- let:定义变量，块级作用域（顶替闭包的作用，在循环里起到较大作用）
- const：定义只读的常量
-
变量名：字母、美元符号($) 、下划线(_ ）和数字组成，其中数字不能开头
- 有一些保留关键字不可以作为变量名
-
= 操作符，类似的还有+=、-=、！=
-
7 + "2" 表达式
对象（Object）
- 可以在对象里面定义变量和方法
var user = {
name: 'Aziz Ali',
age: 13,
getName: function (name) {
return name;
}
}
函数方法（function）
function add(){
var num = 2;
console.log(num);
}
add() // 2
- 函数 = function命令 + 函数名 +{ 函数体 }
渲染
1.用户输入域名，然后DNS解析成IP地址
2.浏览器根据IP地址请求服务器
3.服务器响应http请求，并返回给浏览器
4.浏览开始渲染：
。根据html，生成DOM TREE
。根据css，生成CSS TREE
。将DOM TREE和CSS TREE结合生成Render Tree
。根据Render Tree渲染页面
。遇到script则暂停渲染，优先执行js，然后再继续渲染（因为js执行和渲染引擎公用一个进程，原因是js可能做了一些dom操作，一般会把js放到页面的底部）
。直至把Render Tree渲染页面
css in html （也就是在html里面引入css）
一共有三种方式：
- 内联样式——标签里面直接添加：
<p style="background: orange; font-size:24px;">CSS<p>
- 内联样式——html里面的head里面添加style
<head>
<style>
p{
background:red;
}
</style>
</head>
- 外联样式——使用
<link>标签在 （文档的）头部链接到样式表
<link rel="stylesheet" type="text/css" href="xxx.css">
javascript in Html（也就是在html里面引入js）
-
事件冒泡和事件捕获
-
js是单进程的，因此，执行任务时，有顺序之分
- 此处分为
Html in javascript（也就是在js里面修改Html）
- dom方法
- {{ 变量 }}
- jsx技术：渲染效率高
Css in javascript
- dom
- jsx
- vue
- css module
- jss
