JavaScript基础入门

1 运行环境
可以在html文件里，也可以在console里，也可以在node里

2 打印用console.log，还有console.error，console.warn可以用

3 定义参数使用var let const
不再使用var因为是全局，在if里创建在外面也可以使用，会有冲突
Const变量可以修改，但是不能被重新定义

4 数据类型
String numbers booleen null undefined
数字类型没有float这个类型，小数也是numbers

5 字符串和参数连接
可以用const str = 'my name is' + name
也可以const str = my name is ${name}

6 数组
可以用const arr = new Array(1,2,3）
也可以用const arr = [1,2,3]
数组里面元素可以mix type

7 数组操作
数组最后添加元素：arr.push(4)
数组最前添加元素：arr.unshift(4)
删除最后一个元素：arr.pop()
查看变量是否数组：Array.isArray(arr)
查看元素index：arr.indexOf('orange')
查看数组长度：arr.length

8 对象

Const person = {
  name: "Alex",
  age: 30,
  hobbies: ["read", "run"],
  address: {
    city: "Beijing",
    street: "lalala"
  }
}

对象用大括号，里面可以包括变量，数组，对象等，多层嵌套。读取对象元素使用obj.name

9 一次读取对象内多个元素

Const { name, age, address: { city } } = person
console.log(name)

会出来Alex

10 添加对象元素

person.email = "ddd@ddd.com"

11 数组里的对象

Const todos = [
  {},
  {}
]

使用todos[0].name来读取

12 对象和JSON的区别
对象的key不用双引号，value可以用单引号
JSON的key和value都用双引号

13 将数组转成JSON

const todosJson = JSON.stringify(todos)

14 for循环

for (let i = 1; i < 10; i++) {
  console.log(i)
}
// 要循环输出数组，只需要将i<10改成i<arr.length

15 while循环

let i = 1
while (i < 10) {
  console.log(i)
  i++
}

16 for循环里的快速取值法

for (let todo of todos) {
  console.log(todo[0].text)
}

17 还可以使用forEach方法

todos.forEach((todo) => {
  console.log(todo.text)
})

18 map方法可以将数组元素中的某一项单独提取出来成为一个数组

const todoText = todos.map((todo) => {
  return todo.text
})
// todoText是一个以每一项的todo.text为元素的数组

19 filter可以根据元素条件来过滤元素

const todoCompleted = todos.filter((todo) => {
  return todo.isCompleted === true
})
// 会得到一个isCompleted为true的过滤后的todos

20 函数式编程

const todoCompleted = todos.filter((todo) => {
  return todo.isCompleted === true
}).map((todo) => {
  return todo.text
})
// 可以对一个数组进行多个方法操作，使用.连接

21 == 和 === 的区别
两个等号不匹配数据类型，'10'和10是相等的，推荐只使用===

22 && 和 || 表示“且”和“或”

23 三元表达式

const color = x > 10 ? 'red' : 'green'
// 如果x>10为true，取red，为false取green

24 switch方法

switch (color) {
  case 'red':
    console.log('color is red')
    break
  case 'green':
    console.log('color is green')
    break
  default:
    console.log('color is not red or green')
    break
}

25 定义方法时参数默认值

function addNum (num1 = 1, num2 = 1) {
  console.log(num1 + num2)
}

26 箭头函数

const addNum = (num1 = 1, num2 = 1) => num1 + num2

27 面向对象编程（ES5）

// 构建对象，里面可以带属性和方法
function Person (firstName, lastName, dob) {
    this.firstName = firstName
    this.lastName = lastName
    this.dob = new Date(dob)
    this.getBirthYear = function () {
  return this.dob.getFullYear()
}
    this.getFullName = () => `${this.firstName} ${this.lastName}`
}

// 创建实例
const person1 = new Person ('John', 'Doe', '4-3-1980')
const person2 = new Person ('Mary', 'Smith', '3-3-1983')

28 将日期字符串转成时间格式

const birthday = new Date('1980-1-1')
console.log(birthday.getFullYear()) // 还有很多其他get...方法
// 27的例子中，可以世界使用person2.getBirthYear()获取年

29 原型
将需要定义的方法定义在原型里，这样的话就不会每个新建的实例都会带着所有的方法了（为什么我现在还不太清楚）。

Person.prototype.getBrithYear = function () {
  return this.dob.getFullYear()
}

Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

这时候在console.log实例，就会发现这两个方法会挂在prototype里。

30 面向对象编程（ES6）
ES6和ES5实现的是一样的功能，只不过是一种便捷的写法。

class Person {
    constructor(firstName, lastName, dob) {
        this.firstName = firstName
        this.lastName = lastName
        this.dob = new Date(dob)
    }
    
    getFullYear() {
        return this.dob.getFullYear()
    }
    
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

31 window对象里面包含了众多API，比如document，比如fetch，比如localStorage

console.log(window)
// document.getElementById的全称是windows.document.getElementById

32 选择元素

// 单选
console.log(document.getElementById('my-form'))
console.log(document.querySelector('.container'))

// 多选
// 获得一个nodelist
console.log(document.querySelectorAll('.item'))
// 获得一个HTMLCollection
console.log(document.getElementsByClassName('item'))
// nodelist可以直接使用arry的方法，HTMLCollection需要先转成ANGLE_instanced_arrays
console.log(document.getElementsByTagName('li'))

33 使用array方法

const items = document.querySelectorAll('.item')
items.forEach((item) => console.log(item))

34 操作获取的数据，操作元素

const items = document.querySelector('.items')
items.lastElementChild.remove()
items.firstElementChild.textContent = 'hello'
items.children[1].innerText = 'hello'
items.lastElementChild.innerHTML = '<h1>hello</h1>'

const btn = document.querySelector('.btn')
btn.style.background = 'red' 

35 监听event时间

const btn = document.querySelector('.btn')
btn.addEventListner('click', (e) => {
  e.preventDefault()  // 默认会提交，此方法禁止提交刷新
  console.log(e.target.className) // 提交时间的元素存在e.target里
  document.querySelector('#my-form').style.background = 'red' // 点击修改颜色
  document.querySelector('body').classList.add('bg-dark') // 点击新增class
  document.querySelector('.items').lastElementChild.innerHTML = '<h1>hello</h1>'
})

36 除了click之外，还有很多别的事件，比如mouseover, mouseout等

37 使用js操作表单的一个实例

const myForm = document.querySelector('#my-form')
const nameInput = document.querySelector('#name')
const emailInput = document.querySelector('#email')
const msg = document.querySelector('.msg')
const userList = document.querySelector('#users')

myForm.addEventListener('submit', onSubmit)

function onSubmit (e) {
    e.preventDefault()
    if (nameInput.value === '' || emailInput.value === '') {
        msg.classList.add('error')
        msg.innerText = 'please enter something'
        setTimeout(() => msg.remove(), 3000) // 3秒后msg消失
    } else {
        const li = document.createElement('li')
        li.appendChild(document.createTextNode(`${nameInput.value} : ${emailInput.value}`))
        userList.appendChild(li)
        
        // 清除value
        nameInput.value = ''
        emailInput.value = ''
    }
}

38 课程链接