JavaScript笔记

1.引入

//1.内部引入  
<script>
        alert("hello,world")
</script>
//2.外部引入
<script src="../JavaScripe/firsttest.js"></script>
//同时：firsttest.js文件内容为 alert("hello,world")

2.基本语法-严格区分大小写

    <script>
        //定义变量
        var num=60;
        // 条件控制
        if(num>40&&num<50){
            alert("no")
        }else if(num>50&&num<60){
            alert("yes")
        }else{
            alert("other")
        }
        //在浏览器的控制台打印变量
        console.log(num)
    </script>

 浏览器必备须知：

2.1.数据类型

数值 文本 图形 音频 视频

变量
var 1a=..;错误  不可以以数字开头
var a1 = ..;


Number
123  //整数123
123.5  //小数123.5
1.2555e5  //科学计数法
-5213   //负数
NaN   //not a number
Infinity  //表示无限大

字符串
'abc' "abc"

布尔值
true false

逻辑运算
&& || ！

比较运算符
= ==(类型不一样，值一样，也会判断为true) ===(绝对等于 值一样 类型一样 结果为true) 

浮点数问题
console.log(1/3) === (1-2/3) 不相等 会有精度的损失

null和undefined
null:空
underfunded：未定义

数组：java的数组必需是相同类型的对象，而js中不需要是这样
保持代码的可读性，尽量使用[]
var arr[1,2,4,5,"hello",null,true];
new Array(1,1234,436,234,'hello');
数组下标越界了 ，就会显示underfunded

对象：每个属性之间使用逗号隔开，最后一个不需要添加
var person={
 name:"wuhu",
 age: 20,
 tags:['js','sjdkf']
 }
取对象的值：person.name person.age

2.2.严格检查格式

    <script>
        'use strict';
        //预防js的随意性导致产生的一些问题
        //而且必须写在第一行，
        //例如 直接谢 i=1；是错误的
        let i= 1;
    </script>

3.数据类型

3.1字符串

1.正常字符串我们使用的是单引号或者双引号包裹 要注意转义字符 同时还有多种转义字符

console.log('Test01\'测试');

2.多行字符串编写

//tab 上面 esc 下面
    var msg=`hello 
                my
              baby
              good
              night`

 3.模板字符串 

        let name = 'Tom';
        let age = 3;
        let msg=`你好,${name}`;
        console.log(msg);

4.字符串长度 //同时字符串具有不可变性

var str='subeily';
console.log(str.length);

5.大小写转化

var str='ugly';
str.toUpperCase();//转化为大写
str.toLowerCase();//转化为小写

substring，从0开始向后截取  跟java中的用法一样
str.substring(1);
str.substring(1,3);//从[1,3) 

3.2 数组

var arr =[1,2,3,4,5];//通过下标取值和赋值

1.长度

arr.length

2.indexOf,通过元素获得下标索引

arr.indexOf(2)

同时注意字符串''1''和数字1 是两个不同的

3.slice():截取数组的一部分，返回一个新的数组，类似于String中的substring

4.push(),把新的元素压入尾部 pop():弹出一个尾部的元素

pop一次只能出一个，push一次可以推出多个

5.ubshift(): 把元素压入头部  shift():弹出头部的一个元素

6.排序sort(): 默认从小到大

7.反转元素reverse()

8.concat()  // concat()并没有修改数组，只会返回一个新的数组

 9.连接符：join(): 打印拼接数组，使用特定的字符串链接

 10.多维数组

 3.3 对象

js中对象，{ ..} 表示一个对象，键值对描述属性x：x，多个属性之间使用逗号隔开，最后一个属性不加逗号

var 对象名 = {
    属性名：属性值,
    属性名：属性值,
    属性值：属性值
}

var person={
    name:"Tom",
    age:3,
    email:"12345679@qq.com",
    score:0
}

1.对象赋值

   var person={
           name:"weibo",
           age :20,
           email:"1468023423@qq.com",
           score:13
       }
       person.name = "weishuaibo"
        person.name

2.使用一个不存在的对象属性时，不会报错

3.动态的删减属性，通过delete删除对象的属性

4.动态的添加，直接给新的属性添加值即可

对象名.新属性名 = 新属性值

5.判断属性值是否在这个对象中 x in x

3.4 循环条件

        //if判断
        if(age>3){
            alert("haha");
        }else if(age<5){
            alert("kuwa~");
        }else{
            alert("kuwa!!");
        }
    //    while循环，避免程序死循环
        while(age<100){
            age=age+1;
            console.log(age);
        }
    //    do..while循环
        do{
            age=age+1;
            console.log(age);
        }while(age<100);
    // for循环
        for (let i = 0; i <100 ; i++) {
            console.log(i)
        }
    //    for..in  下标
        for (var num in age) {
            if(age.hasOwnProperty(num)){
                console.log("存在")
                console.log(age[num])
            }
        }

 3.5  Map和Set集合

1.map 型为[key,value]的数组

var map= new Map(['tom',100],['jack',90],['haha',80]);
//通过键来获取数值
var name = map.get('tom');
//新增或者修改
map.set('admin',123456);
//删除
map.delete('tom');

2.Set:无序不重复的集合

//添加
set.add(2);
//删除
set.delete(1);
//是否包含某个元素
console.log(set.has(3));

for in  下标 for of 元素

4.1 定义函数

 //   绝对值函数
        function abs(x){
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }
    // function(x){}是一个匿名函数，但是可以把结果赋值给abs
        var abs = function(x){
            if(x>0){
                return x;
            }else{
                return -x;
            }
        }
    //    手动跑出异常来判断参数是否存在
        var abs=function (x) {
            if(typeof x!=='number'){
                throw 'Not a Number';
            }
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }
    //    arguments用来规避不存在参数问题  代表传递进来的所有参数是一个数组
        var abs=function(x){
            console.log("x=>"+x);
            for (var i = 0; i <arguments.length ; i++) {
                console.log(arguments[i]);
            }
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }

为了获取已有参数外的参数 使用rest来调用

function asd(a,d,...rest){
    console.log("a=>"+a);
    console.log("d=>"+d);
    console.log(rest);
}
//rest只能卸载最后面，必须用...标识

4.2 变量的作用域

1.在函数体内变量函数外不可用

        function f() {
            var x = 1;
            x= x+1;
        }
        x=x+2;//ReferenceError: x is not defined

2.两个不同的函数可以使用相同的函数名-不影响

        function f() {
            var x = 1;
            x= x+1;
        }
        function a() {
            var x=2;
            x=x+2;
        }

3.函数内部的函数可以使用外部函数的参数，外部函数不可以使用内部函数的参数

     function f() {
            var x = 1;
            x= x+1;
            function a() {
                var x=2;
                x=x+2;
                var y =1;
            }
            y=1;//Uncaught ReferenceError: y is not defined
        }

4.函数内部函数变量和外部函数变量重名，内部函数会屏蔽外部函数的同名参数

        function f() {
            var x = 1;
            x= x+1;
            function a() {
                var x=2;
                x=x+2;
                console.log("inner"+x);
            }
            console.log("outer"+x);
            a()
        }

结果：

 5.提升变量的作用域：js执行时，会自动提升变量的声明，往前移，但是不会提升变量的赋值

6.全局变量：

    //   全局对象window
        var x = 'xxx';
        alert(x);//两者输出结果一样，因为laert()函数本身也是window的变量
        alert(window.x);//默认所有的全局变量，都会自动绑定在window下
        //javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），
        // 假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 RefrenceError

7.减少冲突

    //唯一的全局变量
        var bobo = {};
    //    定义全局变量
    //    为了减少冲突，把自己的全部放入自己定义的唯一空间名字中
        bobo.name = 'bo';
        bobo.add=function (n,c) {
            return n+c;
        }

8.局部作用域：

为了解决局部作用域冲突问题，使用let关键词

   function aaa(){
            for (let i = 0; i <10 ; i++) {
                console.log(i);
            }
            console.log(i+1);//ReferenceError: i is not defined
        }
//如果使用var来定义参数的话，这里会超出输出11

9.大写字母表示的都是常量 之后使用const来定义常量

        const PI='3.14';
        console.log(PI);
        PI = '123';//Uncaught TypeError: Assignment to constant variable.
        console.log(PI);
    </script>

10.this的用法

       第一种方法-不使用this
            var xiaobo = {
            name:'bo',
            birth:1999,
        //    方法
            age:function () {
                var now = new Date().getFullYear();
                return now-this.birth;
            }
        }
        
        第二种方法-使用this
            function getAge() {
            var now = new Date().getFullYear();
            return now-this.bitrh;
        }
        var bobo = {
            name:'bobo1',
            bitrh:2000,
            age:getAge
        }

第二种方法控制台调试：

kuangshen.age()	
>22
getAge()
>NaN	//由于此时this没有指明具体指向哪个对象

11.apply用法

在控制台输入：getAge.apply(bobo,[])；//this只想bobo1，参数为空

5.内部对象

1.Date 基本使用

       var now = new Date();
       now.getFullYear();//年
       now.getMonth();//月
       now.getDate();//日
       now.getDay();//星期几
       now.getHours();//时
       now.getMinutes();//分
       now.getSeconds();//秒
        now.getTime();//时间戳 全世界同意

2.JSON

JSON能把对象和对象中的属性转换成字符，便与传输，也可以将字符串转换为对象

对象使用{},数组使用[] 所有的键值对 都是用key:value

6.面向对象编程

1.__proto__（下滑线为两条）可以将对象随意指向另一个对象,如果同时继承多个父类的话，以下面那个为主，如图所示代码，以下面Student为主

       var Student={
           name:"xiaobo",
           age:3,
           run:function(){
               console.log(this.name+"run...");
           }
       };
       var xiaolong = {
           name:"xiaolong"
       };
    //   原型对象
        xiaolong.__proto__ = Student;
        
        var Bird ={
            fly:function(){
                console.log(this.name+"fly...");
            }
        };
        xiaolong.__proto__=Bird;
        xiaolong.__proto__ = Student;

2.class关键词

        class Student{
            constructor(name) {
                this.name = name;
            }
            hello(){
                alert('hello');
            }
        }
        class XiaoStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }
            myGrade(){
                alert('我是一名小学生');
            }
        }
        var xiaolong = new Student("xiaolong");
        var xiaolong = new XiaoStudent("xiaolong",1);

控制台输入：

 3.BOM

浏览器对象模型：

B:Browser浏览器

O：Object 队形

M:Mode模型

常见的BOM对象：window(浏览器窗口)

 Navigator（不建议使用）封装了浏览器信息 大多数时候，不适用navigator对象，会被认为修改

 screen 屏幕尺寸

 location（*）重点 --当前页面的url信息

 document(当前的页面，html，dom文档) 内容(dom)

7.操作DOM对象（重点）

浏览器网页就是一个Dom树形结构  

更新：更新dom节点

遍历Dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点，就必须要获得这个Dom节点

 获得Dom节点：

        var h1 = document.getElementsByTagName('海豚大战哥斯拉');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('类名');
        var father = document.getElementById('father');

        var childrens = father.children;
        father.firstChild
        father.lastChild

更新节点：

<body>
    <div id="id1">
        <script>
            'use strict';
            var id1 = document.getElementById('id1');
            id1.innerHTML('123');
            id1.style.color = 'red';
            id1.style.fontSize = '200px';
            id1.style.padding = '2em';
        </script>
    </div>
</body>

删除节点： 删除步骤，先获取父节点，再通过父节点删除子节点

注意：删除多个节点的时候，子节点是变化的，例删除第一个，则第二个就变成了第一个

    <div id="father">
        <h1>标签1</h1>
        <p id = "p1">p1</p>
        <p2 class = "p2">p2</p2>
    </div>
        <script>
            'use strict';
            var self = document.getElementById('p1');
            var father = p1.parentElement;
            father.removeChild(self)
            father.removeChild(father.children[0]);
        </script>

  

 删除第一个self节点和此时位于第一个节点

 插入节点：我们获得了某个dom节点，假设其为空，可以通过innerHTML就可以增加一个元素，但是这个dom节点已经存在元素，我们不可以做了，继续的话会覆盖

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id = "se">javaSE</p>
        <p id= "me">javaME</p>
        <p id="ee">javaEE</p>
    </div>
        <script>
            'use strict';
            //已经存在的节点
            var js = document.getElementById('js');
            var list = document.getElementById('list');
            //创建一个p标签
            var newP = document.createElement('p');
            newP.id='newP';
            newP.innerText = 'Hello,baby';
            //创建一个标签节点
            var myScript = document.createElement('script');
            myScript.setAttribute('type','text/javascript');
            //可以创建一个style标签
            var myStyle = document.createElement('style');//创建一个空的style标签
            myStyle.setAttribute('type','text/css');
            myStyle.innerHTML = 'body{background-color:chartreuse;}';

            document.getElementsByTagName('head')[0].appendChild(myStyle);


            list.appendChild(js);
        </script>

</body>

8.操作表单（验证）

表单是什么 ？from-Dom树

文本框-text

下拉框-select

单选框-radio

多选框-checkbox

隐藏域-hidden

密码框-password

<body>
<from action = "post">
        <p>
            <span> 用户名：</span>
            <input type="text" id = "username"/>
        </p>
<!--        多选框的值就是定义好的value-->
        <p>
            <span>性别：</span>
            <input type="radio" name = "sex" value="man" id = "boy"/>男
            <input type="radio" name = "sex" value="women" id = "women"/>女
        </p>
    </from>
    <script>
        var input_text = document.getElementById("username");
        var boy_radio = document.getElementById("boy");
        var girl_radio  = document.getElementById("girl");
        //得到输入框的值
        //input_text.value;
        //修改输入框的值o
        input_text.value="admin";
        //对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
        boy_radio.checked = true; // 赋值
        // girl_radio.checked; //查看返回的结果，是否为true
    </script>
</body>

 提交表单 md5加密密码，表单优化

<body>
    <div>
        <form action ="https://www.baidu.com" method="post" onsubmit="return sumbitMsg()">
            <p>
                <span>用户名</span><input type="text" id = "username" name = "username">
            </p>
            <p>
                <span>密码</span><input type = "password" id = "password">;
            </p>
            <p>
                <span></span><input type="password" id = "pwd" name ="password" hidden="hidden">
            </p>
            <p>
                <button type="submit" id = "but">提交</button>
            </p>
        </form>
<body/>
        <script>
            function submitMsg() {
                let username = document.getElementById('username').value;
                let password = document.getElementById('password').value;
                if(username.length<5 || password.length>10){
                    window.alert("用户名或密码不符合规范");
                    return false;
                }else{
                    password = "你小子，抓了个寂寞";
                    document.getElementById('pwd').value = password;
                    return true;
                }
            }
        </script>

9.JQuery 存在大量的js函数

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    //获取jquery jquery中存在大量的js函数-->
    <script src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--//使用jquery-->
<a href="https://www.baidu.com" id = "text.jquery">点我啊</a>
<script>
    //选择器就是css选择器
    $('#text.jquery').click(function () {
        alert("hello,jquery")
    })
</script>

</body>

选择器：

<script>
    //选择器就是css选择器
    //原生态js，选择器少，不容易记忆
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById('text.jquery');
    //类
    document.getElementsByClassName();
    //在jquery css 中 的选择器其他都能用
    $('p').click();//标签选择器
    $('#id').click();//id选择器
    $('.class1').click();//class选择器
    //公式
    $(selector).action()
</script>