前端-JS基础

JS书写位置

1.行内式，写在标签的属性中
2.内嵌式 ，写在HTML文件中;需要写在script标签中  script标签可以有多个；通常放在body中；
3.外链式，外部定义一个JS文件，通过script标签引入，src属性中写JS文件路径；
细节点：外链式的script标签中，不能再写JS代码了

JS各种弹框

1.alert(内容)
2.confirm(内容) 确认框
3.prompt(内容) 输入确定框
4.console.log()在控制台打印   使用最多
5.console.dir() 以对象的形.式打印出来
6.document.write('hello world ') 向浏览器中写内容;能够识别标签

JS变量和常量

js中变量或者常量定义的时候是无需指定数据类型的  弱类型语言
变量：表示变化的
	var 或 let （ES6支持） 用来定义一个变量；建议使用let
常量 是不可变的；
	使用 const 定义
    1.常量的定义必须要给值
    2.赋值之后不能改动
<script>
    var a = 10;
    let b = 20;
    a = "aaaaa";
    console.log(a);
    const c = 10;
</script>

JS数据类型

基本数据类型(值类型)
    string 字符串类型 对 单引号 双引号都支持
    number 数值类型(包含整形和浮点型)
    boolean 布尔类型 true false
    null 空类型 null
    undefined 未定义的 undefined 尚未赋值的
    Symbol
    基本数据类型使用 typeof 查看
引用数据类型
    Object
    Function
    Array
    引用数据类型使用 instanceof 查看

JS数据类型转换

数据类型之间的转换
1.数值转字符串
	10 + '';(常用)  在JS中单引号双引号是一样的
	toString();
2.字符串转数值
	parseInt(c),parseFloat(c)
	c-0
	+c
3.其他数据类型转布尔类型
	0 空字符串 null undefined NaN 转boolean为false 其他都会转为true
4.isNaN()表示是 不是一个数字吗
	true 表示不是数字
	false 表示是一个数字

JS运算符

赋值运算符
    =
算术运算符
    + - * / %  += -= /= *= %=
条件运算符 得到布尔类型的结果
    > < >= <= == !=  不同的： ===  !==
逻辑运算符
    & && | || ！ 建议使用 && ||
三目运算符
    条件？表达式1：表达式2

JS数组

Js中数组和Java数组不同；
js中数组长度可变 存不同的数据类型 和Java集合很像
1.定义的几种方式：
    1.直接赋值 常用的  let ar = [];// 空数组
    2.new Array(长度|数组元素)
    3.相关函数 Array.of(...items)
    4.string转为数组, Array.from(str)

2.数组的长度 有个属性length 数组长度
    数组索引值从0开始，0到length-1
    取值：
        数组名[索引]
    赋值
        数组名[索引] = 值
        分为2种情况 如果索引存在就是替换 不存在就是新增
3.遍历方式
    1.普通for循环
    2.增强for循环
    3.forEach
<script>
    let arr = [10, 20, 30, 40, 50];
    // 1.普通for循环
    for (let i = 0; i < arr.length; i++) {
        // console.log(arr[i]);
    }
    // 2.增强for循环
    for (let a of arr) {
        // console.log(a);
    }
    // 2.使用 in是索引值
    for (let i in arr) {
        // console.log(i);
    }
    // 3.forEach 箭头函数
    arr.forEach((a, index) => {
        console.log(index + "  : " + a);
    })
</script>

JS数组方法

push()表示追加,可以追加多个元素,会影响源数组
pop()删除数组最后一个元素,返回的是删除的元素；会影响源数组
unshift()从数组头部进行插入，可以添加多个；会影响源数组
shift()删除的是数组的第一个元素； 会影响源数组
slice(startIndex,endIndex) 数组的截取，返回新的数组 [)，不会改动源数组
concat(newArray)数组的拼接 会返回拼接后的新的数组 不会改动源数组
reverse() 翻转数组，会影响源数组
arr.join('-') 把数组元素按照指定的连接符拼接为字符串；默认使用逗号连接
splice(index,number,newItem...) 根据index找到位置然后删除指定number个数组元素，然后把newItem插入进来
indexOf() 数组元素第一次出现的索引号
lastIndexOf()数组元素最后一次出现的索引号
findIndex() 找到符合要求的第一次索引号

JS函数

java 头等公民 对象
JS  头等公民 函数
    js的函数就是Java的方法,定义函数时形参只写名字 没有数据类型；有return就是有返回值 没有return就是没有返回值
    js的函数定义分为2种
        1.普通命名函数
            function 函数名(){
                逻辑代码；
            }
        2.变量的方式
            let me = function(){
                逻辑代码；
            }
        函数调用的方式都是一样的；函数名(实参);
    匿名函数，立即执行的函数
<script>
    // 1， 普通命名函数
    function add() {
        console.log("function invoked");
        console.log("function invoked");
    }
    // 有参数和返回值的情况
    function add3(a, b) {
        let c = a + b;
        // console.log(c);
        return c;
    }
    // 2, 变量的方式
    let add2 = function () {
        console.log("add2 invokd");
    };
    // 有参数和返回值的情况
    let add4 = function (a, b) {
        return 10;
    }
    let d = add3(10, 20);
    console.log(d);
    (function f() {
        console.log("立即执行");
    })();
    // add2();
    //函数的调用
    // add();
</script>

JS对象

JS对象中
    属性
    方法
对象是引用数据类型
    属性的取值 stu.name stu['age']
    对属性进行赋值,当属性名存在就是替换属性值，如果不存在就是新增属性
        stu.age = 88;
        stu['age'] = 16;
    删除对象的属性 delete stu.name;
<script>
    let obj = {}; // 空对象
    let obj1 = new Object(); // obj obj1等价
    let stu = {
        // 注意点：属性名不要加引号 成员与成员之间要加逗号
        name: 'tom',
        age: 12,
        study: function () {
            console.log('学生在学习');
        },
        // 方法的简写
        study1() {
            console.log('学生在学习too');
        }
    };
    // 取属性值的2种写法
    console.log(stu.name);
    console.log(stu['name']);
    console.log(stu);
    stu.study1();
    console.log(stu instanceof Object);
    stu.name = 'jerry';
    stu.gender = 'f';
    // 删除对象属性
    delete stu.gender;
    console.log(stu);
    
    // 1， for循环对象成员的遍历 取处对象的成员
    for (let key in stu) {
        console.log(key);
    }

    // 2,Object.keys(对象) 返回keys的数组
    let strings = Object.keys(stu);
    console.log(strings);
</script>

JS内置对象

内置对象 表示js当中本身就存在的对象
Math
    Math.PI
    Math.pow()
    Math.ceil() 向上取整（最小）
    Math.floor() 向下取最大
    Math.round()
    Math.random() 0-1之间的随机值
String 对象
    和Java方法大都一样
    length属性 得到字符串的长度
    charAt()
    trim() 去除前后空格
    indexOf() 首次出现的索引值
    lastIndexOf() 最后出现的索引值
    split() 按指定的字符进行切分
    subString(start,end) 截取字串，包含start索引对应的字符但是不包含end对应的字符
    subStr(start,length) 截取字串，从start索引开始截取length长度的字串
    startWith() 前缀的判断
    endWith() 后缀的判断

JS日期对象

日期对象 Date
    常用方法
        getFullYear()
        getMonth()
        getDate()
        getHours()
        getMinutes()
        getDay()
   格式化
        toLocaleDateString()
        toISOString()
        toDateString()

JS查找页面标签

查找页面标签
    getElementById(标签的id) 返回的只是一个dom对象，因为ID不能重复
    getElementsByClassName('c1')根据类名进行查找，返回的是个伪数组
    getElementsByTagName('div')根据标签名查找元素，返回的也是个伪数组

    querySelector('选择器')通过选择器查找元素，返回查找到的第一个元素， 选择器写法与CSS一致
    querySelectorAll('选择器')通过选择器查找元素,返回所有；返回的是一个真数组；
    伪数组和真数组的区别：
    伪数组可以使用for循环遍历数组元素 但是不能使用数组的方法；

JS操作标签属性

js操作标签属性 自带的属性和自定义的属性
    第一种方式：操作自带的属性 不能作用在自定义的属性
        和对象操作属性的方式一致
            querySelector['src'] = 'img/mg.jpg';
            querySelector.title = 'mg';
    第二种方式 操作自带的和自定义的属性
        getAttribute('属性名')
        setAttribute('属性名','属性值') 如果属性名不存在就是新增，否则就是替换值
    第三种方式 只用来操作自定义的属性
          data-*
          会把这些自定义的data-*的属性封装到dataset对象中，属性名中不再包含data

JS操作标签样式

js操作标签样式
    1.操作style属性
        querySelector.style.backgroundColor = 'red';
        querySelector.style.color='yellow';
    2.操作class属性
        querySelector.className='c1';

JS操作标签文本

js操作标签文本
    innerText,不识别标签
    innerHTML,识别标签
    有=就是赋值,否则就是取值

JS操作表单元素

表单元素：
	checked:表示复选框或者单选框的选中状态，在属性checked="checked"表示选中 与checked等价的
	disabled:表示标签的可点击状态 ，disabled="disabled" 表示不可用的
	js操作这些属性的时候可以使用true false

JS表单验证-正则

<!--
focus 聚焦
blur 失去焦点
-->

手机号： <input type="text" id="phone"> <span id="content"></span>
<script>
    let phone = document.querySelector('#phone');
    // 正则RegExp 对象
    let regEX = /^1[3|4|5|7|8]\d{9}$/;
    let span = document.querySelector('#content')
    //添加失焦事件
    phone.addEventListener('blur', function () {
        // 获取输入框内容
        console.log(phone.value);
        // test方法正则匹配 返回true
        if (regEX.test(phone.value)) {
            span.innerText = '格式匹配';
            span.style.color = 'green';
            console.log('格式匹配');
        } else {
            span.innerText = '格式不匹配';
            span.style.color = 'red';
            console.log('格式不匹配');
        }
    })
</script>

JS节点的查找

节点的操作：
    节点的查询
        父找子，只能是儿子不是隔代 children
        子找父，parentNode
        找哥哥,previousElementSibling,只能找一级 紧挨着的
        找弟弟，nextElementSibling,只能找一级
    节点的操作：
        增删修

JS节点的操作

节点的操作：
增删修
    A.appendChild(B)剪切移动的效果，B添加到A标签结束之前
    A.insertBefore(B,C),把B添加到A中，放到C之前
    A.replaceChild(B,C),在A中用B替换C
    A.removeChild(D),从A中把D给删除了

手动创建节点：
    createElement('标签名') 新增节点的方法
<script>
    let ul = document.createElement('ul');
    var li1 = document.createElement('li');
    li1.innerText = 'libiao1';
    var body = document.querySelector('body');
    ul.appendChild(li1);
    body.appendChild(ul);
</script>

JS-BOM

BOM browser object model 浏览器对象模型 ；会把浏览器上的一些功能封装到window对象
    调用window对象的内容是，window可以省略
window 2个事件
    onload:页面加载完成后触发
    unonload:页面关闭的时候触发

History

history： 用来做页面跳转
    back() 回到上一页
    forward() 下一页

Location对象

location对象
    href: 浏览器上地址栏中的地址，
    host:主机+端口号
    assign():页面跳转会记录跳转历史 可以回退
    replace():页面跳转不记录跳转历史 不能回退

<button onclick="location.replace('20.html')">跳转</button>
<script>
    console.log(location);
    console.log(location.href);
    console.log(location.pathname);
    console.log(location.host);
</script>

JS定时器

setTimeout(function,time) 返回值是定时器的id ,只执行一次,时间默认单位是毫秒
setInterval(function,time) 返回值是定时器的id ,每隔间隔时间之后执行
clearInterval(定时器的id）清除定时器
clearTimeout(定时器的id)