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.多行字符串编写

1. //tab 上面 esc 下面
2.     var msg=`hello 
3.                 my
4.               baby
5.               good
6.               night`

3.模板字符串

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

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

1. var str='subeily';
2. 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
       }
       pers
       on.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:无序不重复的集合

1. //添加
2. set.add(2);
3. //删除
4. set.delete(1);
5. //是否包含某个元素
6. 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
        }

第二种方法控制台调试：

1. kuangshen.age()  
2. >22
3. getAge()
4. >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>

JavaScript笔记

1.引入

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

2.1.数据类型

2.2.严格检查格式

3.数据类型

3.1字符串

3.2 数组

3.3 对象

3.4 循环条件

3.5 Map和Set集合

4.1 定义函数

4.2 变量的作用域

5.内部对象

6.面向对象编程

7.操作DOM对象（重点）

获得Dom节点：

更新节点：

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

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

8.操作表单（验证）

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

9.JQuery 存在大量的js函数

选择器：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript笔记

1.引入

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

2.1.数据类型

2.2.严格检查格式

3.数据类型

3.1字符串

3.2 数组

3.3 对象

3.4 循环条件

3.5 Map和Set集合

4.1 定义函数

4.2 变量的作用域

5.内部对象

6.面向对象编程

7.操作DOM对象（重点）

获得Dom节点：

更新节点：

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

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

8.操作表单（验证）

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

9.JQuery 存在大量的js函数

选择器：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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