Day one

JavaScript介绍

它是一种运行在**客户端（浏览器）**的编程语言，实现人机交互效果。

作用：
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据, 渲染到前端)
服务端编程(node.js)

组成

组成：
ECMAScript：规定了js基础语法核心知识
Web APIs :包含DOM和BOM

• DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作
• BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
  

书写位置

（1）内部：直接写在html文件里，用script标签包住。
script标签写在/body上面
alert页面弹出警告对话框

我们将script放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript 期望修改其下方的HTML，那么它可能由于HTML 尚未被加载而失效。因此，将JavaScript 代码放在HTML页面的底部附近通常是最好的策略。

(2)外部加入：
1.script标签中间无需写代码，否则会被忽略！
2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

（3）页面加入：

注释

结束符

英文符号；代表语句结束，可写可不写。
换行符（回车）会被识别成结束符。
所以一个完整的语句，不要手动换行

输入输出

输出语法：

document.write("要输出的内容”);
//向body输出内容，如果内容写的是标签也会被解析成页面元素

alert("要输出”);
//页面弹出警告

console.log("控制台打印");
//控制台输出语法，调试

1
2
3
4
5
6
7
8
9

输入语法：

prompt("你好”）
//输出语句（显示一个对话框，对话框中有一条提示信息）
1
2

字面量

字面量（literal）是在计算机中描述事/物。

变量

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
（1）先声明后使用

let 变量名//关键字+变量名（标识符）
变量名=1//赋值
1
2

（2）变量名不能用关键字，只能用下划线、字母、数字、$组成，且数字不能开头。
（3）let 和var区别：let 为了解决var的一些问题.var声明:可以先使用在声明(不合理).var声明过的变量可以重复声明(不合理).比如变量提升、全局变量、没有块级作用域等等
(4)数组：let arr=[]
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
数组. splice(start,deleteCount)方法删除指定元素

数据类型

为什么要给数据分类？

1. 更加充分和高效的利用内存
2. 也更加方便程序员的使用数据

数字类型：正数，负数，小数
字符串类型：单引号 双引号 反引号
（1）无论单引号或是双引号必须成对使用
（2）单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
（3）必要时可以使用转义符\，输出单引号或双引号
布尔类型：true false
未定义类型：undefined
我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

空类型：null(把null 作为尚未创建的对象)
undefined 表示没有赋值
null 表示赋值了，但是内容为空

//检测数据类型
console.log(age)
console.log(typedef age)
1
2
3

类型转换

JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

Day Two

运算符

算术运算符：+ - * / %(取模）
赋值运算符：+= -= *= /= %=(左边必须是容器）
一元运算符：++（前置自增和后置自增单独使用没有区别）

参与运算的时候，++在前先加，++在后后加

比较运算符：

 > ：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边是否相等
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean类型，即只会得到true或false
1
2
3
4
5
6
7
8

字符串比较:
(1)比较的字符对应的ASCII码,从左往右依次比较
(2如果第一位一样再比较第二位
note:
(1)NaN不等于任何值，包括它本身
(2)尽量不要比较小数，因为小数有精度问题
(3)不同类型之间比较会发生隐式转换,最终把数据隐式转换转成number类型再比较.
所以开发中，如果进行准确的比较我们更喜欢=== 或者!==

逻辑运算符：

语句

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果。
语句是js整句或者命令（可加分号也能不加）
表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

循环结构

断点调试

点击F12——>找到source——>选择代码文件

Day Three

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

function 函数名（）{
 函数体
}
1
2
3

返回值：
在函数体中使用return 关键字能将内部的执行结果交给函数外部使用。
函数内部只能出现1次return，并且return 后面代码不会再被执行，所以return 后面的数据不要换行写。
return会立即结束当前函数。
函数可以没有return，这种情况函数默认返回值为undefined

作用域：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看。

匿名函数：
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式、

let fn=function(){}
fn()
1
2

立即执行函数：避免全局变量之间的污染。

Day Four

对象（object）：JavaScript里的一种数据类型,可以理解为是一种无序的数据集合.
用来描述某个事物，例如描述一个人,如果用多个变量保存则比较散，用对象比较统一/

比如描述班主任信息：
(1)静态特征
(姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
(2)动态行为
(点名, 唱, 跳, rap) => 使用函数表示

let 对象名={
   属性名：信息或者特征，
   方法名：函数
}
//多个属性之间用,分隔
//属性名可以使用"" 或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

person.变量名
person['变量名’]
person.方法名（）
1
2
3
4
5
6
7
8
9
10

let person={
 name;'andy',
 swim:function(){
   console.log(name)
  }
  }
  //增加
  person['sex']='男‘’
  person.hobby="足球”
  person.move=function(){
    document.write("移动一点点”）
   }
1
2
3
4
5
6
7
8
9
10
11
12

遍历对象：对象没有像数组一样的length属性,所以无法确定长度对象里面是无序的键值对,没有规律.不像数组里面有规律的下标。

for (let k in obj){
 console.log(k)//打印属性名
 consloe.log(obj[k])//打印属性值
}
1
2
3
4

内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用。

//获取时间
var now = new Date();
// 1. 用于获取对象的原始值

console.log(date.valueOf())	
console.log(date.getTime())	

// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();
1
2
3
4
5
6
7
8
9
10
11

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

1
2
3
4
5
6
7
8
9
10
11

术语拓展

Day Five

javascript代码执行的时候分为俩步（预解析+代码执行）
预解析：代码执行之前，浏览器会把带有var和function生命的变量在内存中提前声明或者定义
代码执行：从上向下执行js语句
变量预解析（变量提升）：变量的声明会提升到当前作用域的最上面，变量的值不会提升。

console.log(num)
var.num=10
1
2

函数提升：函数的声明会被提升到当前作用域的上面，但是不会调用函数。