JavaScript

一、JavaScript语言特点

JavaScript是基于对象和事件驱动的(动态的)
JavaScript是跨平台的

二、JavaScript的变量

1、定义变量

var name = "jack";
let age = 20;
const isMan = true;

var的作用范围可以跨块级，类似在if里的属性用到外面的属性值 let定义的值可以重新赋值 const定义的值不能再次赋值，常量，需要初始化

2、变量类型

undefined - 如果变量是 Undefined
类型的boolean - 如果变量是 Boolean
类型的number - 如果变量是 Number
类型的string - 如果变量是 String
类型的object - 如果变量是一种引用类型或 Null 类型的

3、字符串

字符串和其他类型属性一起使用时，通常使用的是字符串拼接

console.log('My name is ' + name + 'and my age is' + age);

es6后出现类似于占位符方式，开发更为高效注意使用的是反引号 '`` ' 包裹字符串

console.log(`My name is ${name} and my age is ${age}`);

输出结果

3.1、字符串的属性和方法

length属性
注意：属性没有括号

const str = 'hello world';
console.log(str.length);    //11

toUpperCase() 方法

console.log(str.toUpperCase()); //HELLO WORLD

其他属性和方法查阅文档 www.w3school.com.cn/

4、数组

4.1 、创建数组

const names = new Array('a','b','c',5);
const names2 = ['a','v',20];

注意：数组可以存放不同类型的数据

4.2、末尾追加数据

const names = new Array('a','b','c',5);
names.push('c');

4.3、向开头添加数据

const names = new Array('a','b','c',5);
names.unshift('c');

4.4、去除最后一项

const names = new Array('a','b','c',5);
names.pop();

4.5、获取指定值的索引

const names = new Array('a','b','c',5);
names.indexOf('a');

三、JavaScript对象

1、对象字面量

const person = {
    firstname:'Jack',
    lastName:'An',
    age:30,
    hobbies:['aa','bb','cc'],
    address:{
        street:'abc',
        city:'hn'
    }
}

console.log(person);

输出结果

2、数组对象

const person = [
    {
        id:1,
        name:'a',
        age:20
    },
    {
        id:2,
        name:'b',
        age:20
    },
    {
        id:3,
        name:'c',
        age:20
    }
]

转为JSON

const person = [
    {
        id:1,
        name:'a',
        age:20
    },
    {
        id:2,
        name:'b',
        age:20
    },
    {
        id:3,
        name:'c',
        age:20
    }
]

const toJSON = JSON.stringify(person);
console.log(toJSON);

输出结果

四、JavaScript的循环语句

1、for循环数组

for(let i = 0; i < person.length; i++) {
    console.log(person[i]);
}

输出结果

//使用for of效果相同
for(let one of person) {
    console.log(one)
}

2、for each

person.forEach(function(one){
    console.log(one);
});

3、for map

返回值是一个数组

const personTest = person.map(function(one){
    return one;
});
console.log(personTest);

输出结果

4、for filter

const personTest = person.filter(function (one) {
    return one.id;
});

配和map使用可以筛选指定条件的值，就是所谓的函数编程

const personTest = person.filter(function (one) {
    return one.id === 1;
}).map(function(one){
    return one;
});
console.log(personTest);

输出结果

五、JavaScript的条件语句

1、if

const i = '10';
if(i == 10) {
    console.log(`i=10`);
}   //true

注意：这里的==相当于两个值都作为字符串来作比较，也就是说，当i的值为字符串10，结果也是true。若想连类型也一起比较就要使用===（绝对等于）

if(i === 10) {
    console.log(`i=10`);
}   //false

2、三元运算符

const i = 10;
const result = i > 10 ? 'y' : 'n';
console.log(result);

3、switch

const i = 10;
switch (i) {
    case 5:
        console.log(5);
    case 10:
        console.log(10);
    default:
        console.log("other"); 
}

六、JavaScript的函数

1、function

function add(num1, num2){
    return(num1 + num2);
}
console.log(add(10, 20));

2、箭头函数

箭头函数更为简洁，并且不需要写返回值

const add = (num1, num2) => num1 + num2;
console.log(add(10, 20));

七、JavaScript面向对象

1、函数对象

//定义函数对象
function Person(name,age,birthday){
    this.name = name;
    this.age = age;
    this.birthday = new Date (birthday);
}
//实例化对象
const person1 = new Person('jack','12','2001-01-02')
console.log(person1);

2、类

//定义类
class Person{
    constructor(name,age,birthday){
        this.name = name;
        this.age = age;
        this.birthday = new Date (birthday);
    }
    //类中增加方法(类中叫方法，不在类中叫函数)
    //获取年
    getBirthdayYear(){
        return this.birthday.getFullYear;
    }
    //获取名字
    getName(){
        return `${this.name}`;
    }
}
//实例化对象,调用方法
const person1 = new Person('jack','12','2001-01-02')
console.log(person1);
console.log(person1.getName());

输出结果

八、DOM（文档对象模型）

DOM是把html里面的各种数据当作对象进行操作的一种思路。比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

1、节点

DOM把所有的html都转换为节点

1.1、获取节点

从DOM中选择元素

<form id="my-form">
        <h1>Add user</h1>
        <div class="msg"></div>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" />
        </div>
        <div>
            <label for="email">Emain:</label>
            <input type="text" id="name" />
        </div>
        <input type="submit" value="Submit" />
    </form>   
 <ul class='items'>
        <li class="item">a</li>
        <li class="item">b</li>
        <li class="item">c</li>
        <li class="item">d</li>
    </ul>

<script>
    //元素选择器
    console.log(document.getElementById('my-form'));
    console.log(document.querySelector('h1'));
    //多元素选择器
    console.log(document.querySelectorAll('.item'));
</script>

输出结果

<script>
    //遍历节点元素
    const items = (document.querySelectorAll('.item'));
    items.forEach((item) => console.log(item));
</script>

1.2、操作节点

    //遍历节点元素
    const ul = document.querySelector('.items');
    //删除所有元素
    // ul.remove();
    //删除最后一个元素
    //ul.lastElementChild.remove();
    //改变第一个元素的值
    // ul.firstElementChild.textContent = 'hello';
    //获取第二个元素并改变html值
    //ul.children[1].innerHTML = '<h1>abc</h1>';
    //改变btn按钮的背景颜色
    const btn = document.querySelector('.btn');
    btn.style.background = 'red';

2、事件

const btn = document.querySelector('.btn');
    //创建单击监听事件
    btn.addEventListener('click',(e) =>{
        //阻止提交按钮的默认行为
        e.preventDefault();
        console.log('单击');
    });

当点击了提交按钮控制台就会输出语句

九、DOM小案例

通过表单提交，获取表单上的数据，并添加到页面元素上

<body>
    <form id="my-form">
        <h1>Add user</h1>
        <div class="msg"></div>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" />
        </div>
        <div>
            <label for="email">Emain:</label>
            <input type="text" id="email" />
        </div>
        <input class="btn" type="submit" value="Submit" />
    </form>
    <ul id="users"></ul>
    <!-- <ul class='items'>
        <li class="item">a</li>
        <li class="item">b</li>
        <li class="item">c</li>
        <li class="item">d</li>
    </ul> -->
</body>
<script src="main.js"></script>
<script>
    const myform = document.querySelector('#my-form');
    const email = document.querySelector('#email');
    const name = document.querySelector('#name');
    const msg = document.querySelector('.msg');
    const users = document.querySelector('#users');
    //监听表单提交
    myform.addEventListener('submit', onSubmit)
    function onSubmit(e) {
        //阻止提交默认行为
        e.preventDefault();
        //表单校验，只有两个选项都填了才能提交
        if (name.value === '' || email.value === '') {
            //使用msg变量显示错误
            msg.innerHTML = '请输入name和Email';
            //提示三秒后消失
            setTimeout(()=> msg.remove(),3000);
        } else {
            //输入了用户名和邮箱就给ul列表增加列表项
            //创建变量li
            const li = document.createElement('li');
            //插入节点
            li.appendChild(document.createTextNode(`${name.value} : ${email.value}`));
            //将li插入ul
            users.appendChild(li);
            //清空输入框
            name.value = '';
            email.value = '';
        }
    }
</script>

运行效果

JavaScript基础

JavaScript

一、JavaScript语言特点

二、JavaScript的变量

1、定义变量

2、变量类型

3、字符串

3.1、字符串的属性和方法

4、数组

4.1 、创建数组

4.2、末尾追加数据

4.3、向开头添加数据

4.4、去除最后一项

4.5、获取指定值的索引

三、JavaScript对象

1、对象字面量

2、数组对象

四、JavaScript的循环语句

1、for循环数组

2、for each

3、for map

4、for filter

五、JavaScript的条件语句

1、if

2、三元运算符

3、switch

六、JavaScript的函数

1、function

2、箭头函数

七、JavaScript面向对象

1、函数对象

2、类

八、DOM（文档对象模型）

1、节点

1.1、获取节点

1.2、操作节点

2、事件

九、DOM小案例