0330JS视频自学

视频链接
https://www.bilibili.com/video/BV1jE411T7ya?from=search&seid=753576681796098364

//object对象数组，数组中每个值是对象
const todos = [
    {
        id:1,
        text:'Take out trash',
        isCompleted:true
    },
    {
        id:2,
        text:'Meeting with boss',
        isCompleted:true
    },
    {
        id:3,
        text:'Dentist appt',
        isCompleted:false
    }
];
//for循环
for(let todo of todos){
    console.log(todo.text);
}
//forEach循环
todos.forEach(function(todo){
    console.log(todo.text);
});

//map  保存返回一个常规数组
const todoText = todos.map(function(todo){
    return todo.text;
});
console.log(todoText);

结果：

 ["Take out trash", "Meeting with boss", "Dentist appt"]
0: "Take out trash"
1: "Meeting with boss"
2: "Dentist appt"
length: 3

//filter可以根据条件创建新数组
const todoCompleted = todos.filter(function(todo){
    return todo.isCompleted == true;
});
console.log(todoCompleted);

结果：

(2) [{…}, {…}]
0: {id: 1, text: "Take out trash", isCompleted: true}
1: {id: 2, text: "Meeting with boss", isCompleted: true}
length: 2

//filter可以根据条件创建新数组,后面继续map，只输出符合条件的text内容
const todoCompleted = todos.filter(function(todo){
    return todo.isCompleted == true;
}).map(function(todo){
    return todo.text;
})
console.log(todoCompleted);

结果：

(2) ["Take out trash", "Meeting with boss"]
0: "Take out trash"
1: "Meeting with boss"
length: 2

1. == 与 ===

//if === 要匹配类型， == 不要‘10’== 10
 const x = 20;
 
 if(x === 10){
     console.log('x is 10');
 }else if(x > 10){
    console.log('x is larger than 10 ');
 } else{
     console.log('x is less than 10');
 }

//switch
const x = 10;
const color = 'blue';

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

//面向对象

//构造函数实例化对象
function Person(firstName, lastName, dob){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = dob;
}
//
const person1 = new Person('John','Doe' , '4-3-1980');
console.log(person1);

//Date（）
//构造函数实例化对象
function Person(firstName, lastName, dob){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);//Date 对象
    this.getFullName = function(){
        return `${this.firstName} ${this.lastName}`;
    }
}
//
const person1 = new Person('John','Doe' , '4-3-1980');
console.log(person1.dob.getFullYear());
console.log(person1.getFullName());

5. 原型

//Date（）
//构造函数实例化对象 
function Person(firstName, lastName, dob){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);//Date 对象
}
Person.prototype.getFullName = function(){  //原型：在function 外封装方法
    return `${this.firstName} ${this.lastName}`;
}
Person.prototype.getBirthYear = function(){
    return this.dob.getFullYear();
}
//
const person1 = new Person('John','Doe' , '4-3-1980

console.log(person1.getFullName());
console.log(person1.getBirthYear());
console.log(person1);

输出：

6. 面向对象 class

//class  面向对象给类添加方法=给原型添加方法
class Person{
    constructor(firstName, lastName, dob){
        this.firstName = firstName;
        this.lastName = lastName;
        this.dob = new Date(dob);//Date 对象
    }

    getBirthYear(){
        return this.dob.getFullYear();
    }

    getFullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}
//
const person1 = new Person('John','Doe' , '4-3-1980');

console.log(person1.getFullName());
console.log(person1.getBirthYear());
console.log(person1);

结果同上

7. DOM
   如何从dom中选择元素，
   document.get
   
   document.getElementById("");
   document.getElementsByClassNAme("");
   document.getElementsByTagName("");

document.querySelector("");//推荐使用，功能强大
documen.querySelectorAll("");//推荐用这个

页面：

操纵/改变DOM中的东西

const btn = document.querySelector(".btn");
//创建事件监听,当用到事件，接受一个事件参数，这里用e表示
//下面这个例子会看到单击click闪现，闪现的原因：这是提交按钮，提交表单实际是提交文件，当对提交按钮使用click事件或有表单提交，必须要阻止默认的行为
//可以使用preventDefault方法，调用该方法就会阻止默认行为，控制台的click就不会闪现了，因为表单不再处于提交状态
//与用户界面有交互，点击submit,变成深背景白文本
btn.addEventListener('click',(e) => {
    e.preventDefault();
    document.querySelector('#my-form').style.background = '#ccc'; //选择id用#,选择类用.
    document.querySelector('body').classList.add('bg-dark'); //用qS抓取body,通过classList.add增加类，remove移除类,这里的bg-dark是样式表里的
    document.querySelector('.items').lastElementChild
    .innerHTML = '<h1>Hello</h1>';//单击submit后列表最后一个text变成hello
});

效果：

不同的事件监听，可以在MDN上看不同事件的文档

btn.addEventListener('mouseover',(e) => {  //其余同上，移入鼠标就会产生上述变化
btn.addEventListener('mouseout',(e) => {  //鼠标移入移出后就会出现上述样式变化

实用的小程序：输入用户，然后获取值，接着在下面输出
创建表单脚本main.js：要从DOM获取很多东西，然存到变量中