web前端-js

JS 是一门跨平台，面向对象的脚本语言 控制网页行为
与java基础语法类似

01
JS引入方式：
内部脚本：任何位置
外部脚本：script标签不能自闭合

书写语法：区分大小写，分号可有可无，注释//与/*
输出语句三种

/* 弹出警告框 */
    window.alert("hellojs1");
    /* 写在html页面中 */
    document.write("hellojs2");
    /* 控制台输出 */
    console.log("hellojs3");

变量 var，let，const
var的作用域比较大，全局变量
可以重复定义
新增两个关键字let（局部，不可以重复定义），const(用来声明一个只读的常量，不能改值，提高安全性)

数据类型
原始类型：number, string, boolean, null, undefined
运算符 ===不进行类型转换
number类型转boolean,只有0和NaN为false
string类型转boolean,只有空格为false
null, undefined转boolean，均为false
string转number，字面值不是数字就转为nan

函数
弱类型，参数不需要类型，返回值也不需要类型

function add(a, b) {
        return a + b;
    }
    var c = add(12, 20)
    alert(c);

JS对象
JS基础对象array,String,JSON
浏览器对象BOM
文档对象DOM

array 长度可变，类型可变
forEach() 方法按顺序为数组中的每个元素调用一次函数
对于没有值的数组元素，不执行forEach() 方法

//foreach函数，函数写在括号内
    arr.forEach(function(e){
        console.log(e);
        
    })
    //箭头函数简化函数定义
    arr.forEach((e) => {
        console.log(e);
        
    })

    //push添加元素，splice删除元素
    arr.push(7,8,9);
    arr.splice(2,2);
    console.log(arr);
    

JSON
就是通过JS对象标记法书写的文本，现多用于作为数据载体，在网络中进行数据传输

//定义json
    var jsonstr = '{"name":"Tom","age":17,"addr":["北京","南京","上海"]}';//现在还是个字符串
    //JSON字符串转化为JS对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);
    
    //js对象转化为json字符串
    alert(JSON.stringify(obj));

BOM Browser Object Model浏览器对象模型
重点了解window和location对象
浏览器窗口对象 几个方法

//confirm方法
    var flag = confirm("确定吗？");//有返回值
    alert(flag);

    //setInterval()周期性地执行某个函数
    var i = 0;
    setInterval(() => {
        i++;
        console.log("定时器执行了"+i+"次");
        
    }, 2000);

    //setTimeout执行一次
    setTimeout(() => {
        alert("ps");
    }, 3000);

地址栏对象 属性href

DOM 文档对象模型 JS通过DOM和事件监听控制网页行为
将标记语言的各个组成部分封装为对应的对象：Document，Element，Attribute，Text，Comment
DOM分为三个部分：Core DOM,XML DOM,HTML DOM

html中几乎所有标签都有class属性，只有一部分有name属性（比如与表单相关的元素）
JS获取元素的四种方式

 /* 根据ID获取 */
    /* var img = document.getElementById('h1');
    alert(img); */
    /* 根据标签名称来获取 */
    /* var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
        
    } */
    /* 根据name属性来获取 */
    /* var ins = document.getElementsByName("hobby");
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
        
    } */
    /* 根据class属性获取 */
    var cls = document.getElementsByClassName('cls');
    for (let i = 0; i < cls.length; i++) {
        alert(cls[i]);

JS通过DOM操作HTML的过程
获取元素对象 ===》调用元素对象中的属性或者方法，来控制这个元素

   //更改img的src值
   var img = document.getElementById('h1')//获取元素对象
   img.src = "img/on.gif";//调用元素对象中的属性或者方法，来控制这个元素
   //加上红色的very good
   var divs = document.getElementsByTagName('div');
   for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML +="<font color='red'>very good</font>";
}
    //全选复选框
    var ins = document.getElementsByName("hobby");
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked=  true;
    }

Q:innerHTML不是修改了div吗，const量不是不能修改吗
引用数据类型：如 object、array、function 等，使用 const 声明后，变量存储的是对象的引用地址，const 保证的是这个引用地址不能改变，但对象内部的属性或元素是可以修改的
修改 div.innerHTML 并不是在重新赋值 div 这个变量本身，而是在修改 div 所引用的 DOM 元素的 innerHTML 属性。也就是说，div 这个常量存储的引用地址并没有改变，改变的只是该引用地址指向的对象（DOM 元素）的内部属性。

事件绑定 常见事件
绑定有两种方式
常见事件：onclick,onblur,onfocus