JavaScript相关笔记及案例

最新推荐文章于 2023-12-28 23:42:17 发布

jingluo7977

最新推荐文章于 2023-12-28 23:42:17 发布

阅读量897

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/jingluo7977/article/details/106968562

版权

本文详细介绍了JavaScript的基础知识，包括JavaScript的作用、引用方式、基本语法、核心语法，如变量、数据类型、运算符、选择结构、循环结构等。深入探讨了数组、函数、复合类型如String、Date和JSON，以及DOM操作、事件处理和BOM操作。此外，还讲解了数据校验中的正则表达式和表单校验。这是一篇全面的JavaScript学习笔记，适合初学者和进阶者参考。

摘要由CSDN通过智能技术生成

JavaScript

一、JavaScript简介

1 什么是JavaScript

JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

结构层HTML，定义页面的结构
样式层CSS，定义页面的样式
行为层JavaScript用来实现交互，提示用户体验

2 JavaScript作用

在客户端浏览器上动态的操作页面
在客户端浏览器上作数据的校验
在客户端上发送异步请求

二、引用方式

1 内联方式

在页面中使用script标签，在script标签中编写js代码

script标签可以放在页面的任意位置，一般放在head中

<script>
        js代码
</script>

2 行内方式

在普通标签中编写js代码，一般需要结合事件的属性，如onclick、onmouseover等

提示：什么是事件属性？----面向对象

eg：对象----外观修饰—CSS实现

行为、事件----某一事件发生的对象不一样，所引发的反应也不相同多态性

<!--2. 行内样式-->
    <input type="button" value="点我" onclick=alert("我被点了，晕了")>
    <!--<a href="" onclick="alert('超链接被触发了')">超链接</a>-->
    <a href="javascript:alert('超链接被触发了')">超链接</a>

3 外部方式

使用单独的.js文件定义，然后在页面中使用script标签

<!--3.外部方式-->
    <script type="text/javascript" src="js/hello.js">		</script>

注意：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
   
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script>
        //alert("hello JavaScript")
    </script>
    <!--3.外部方式-->
    <script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
    第一个JavaScript程序
    <hr>
    <!--2. 行内样式-->
    <input type="button" value="点我" onclick=alert("我被点了，晕了")>
    <!--<a href="" onclick="alert('超链接被触发了')">超链接</a>-->
    <a href="javascript:alert('超链接被触发了')">超链接</a>

    <div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>

三、基本语法

1 变量

变量是用来存储常量的量

常量就是固定的值—常数项

js是一门弱类型语言，声明变量时使用var关键字，不需要指定变量的类型

语法:var变量名=常量或表达式

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用 let 声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本 settings---->language&frameworks—>javascript—>javascript language version—>ECMAScript 6

变量的命名规则：

由字母、数字、下划线、汉字组成

2）由字母、下划线开头

3）不能和系统关键字重名

4）区分大小写

了解：变量名的命名规则（驼峰命名法）

test02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //变量
        var name;//定义了变量name
        name = "tom";//将字符串tom赋值给变量name
        name = "alice";
        // alert(name);

        var age=18;//定义age变量并赋值18给它
        //age为整型变量 age中存放的是整数 age是整型变量
        // alert(age);

        var sex="male";//强烈不建议使用
        // alert(sex)
        {
   
            // var x = 8;
            // alert(x);
            let y = 7;
            // alert(y);
        }
        // alert(x);
        // alert(y);
        姓名 = "tom";
        alert(姓名);
        age = 18;
        Age = 19;
        // alert(Age);
    </script>
</head>
<body>
</body>
</html>

2 输入和输出

输出：

alert()弹出警告框
console.log()输出到浏览器的控制台
document.write()输出到页面

输入：

prompt()弹出一个输入框，获取用户输入的数据

使用typeof变量 判断变量的类型

使用number(变量)将字符串转换为数值

3 转义字符

常用转义符：

\n换行
\t缩进
\"双引号
\'单引号
\\斜杠

4 注释

单行注释//

多行注释/*注释内容*/

5 编码规范

代码是区分大小写的

每个语句以分号结尾

代码缩进

test03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //输出方式
        // alert("嘿嘿");
        // console.log("哈哈");
        // document.write("嘻嘻");

        //输入方式
        // var name=prompt("请输入你的姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄");
        // console.log(age,age+2,typeof age);
        // age = Number(age);
        // console.log(age,typeof age);
        // console.log(age+2);
        //转义字符
        console.log("he\'llo\n world");// \n表示换行
        //注释
        //这是一个单行注释
        /*
        这是多行注释
         */
    </script>
</head>
<body>
</body>
</html>

四、核心语法

1 数据类型

常量：具体值，不变的量—>常数项

变量:变化的值，存储常量的量

基础数据类型：

string字符串
number数值（NaN表示非数字 Not a Number，其自身是number类型）
boolean布尔
null空类型
undefined未定义类型

类型转换：

转换number

使用Number()、parseInt()、perseFloat()
转换为字符串

拼接空字符串
转换为布尔boolean()

使用Boolean()

注意：0、空字符串、null、undefined、NaN会被转换为false，其他值会被转换为true

test04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            数据类型
         */
        var name = 'tom';
        var age = 18;
        var height = 180.5;
        var flag = true;

        var hobby = null;

        var date = new Date();

        var arr = new Array();

        var sex;//定义了一个变量未赋值
        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log('hello'-5);//返回值NaN，表示非数值类型
        // console.log(typeof flag);
        // console.log(typeof hobby);//如果数据是null,Date,Array等，返回object
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);

        /*
         *类型转换
         */

        //1.转换为number
        // var a = '12';
        // console.log(a,typeof a);
        //方式一 使用Number()
        // a = Number(a);
        // console.log(a,typeof a);
        // a = Number('12.5');
        // a = Number('12abc');
        // a = Number('abc12');

        //方式二 使用perseInt()
        // a = parseInt('12');
        // a = parseInt('12.5');//转换时会取整
        // a = parseInt('12abc');//按照字符的顺序依次解析
        // a = parseInt('abc123');

        //方式三 parseFloat()
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
        // a = parseFloat('abc123');

        //将数值转换为字符串
        // var a = 12;
        // console.log(a,typeof a);
        // a = a + '';//后接一个空字符串
        // console.log(a,typeof a);

        //转换布尔类型的值转换为数字
        // var a;
        // a = Number(false);//在js中true用1或非0表示，false用0表示
        /*
        转换为布尔
         */
        // var a = Boolean(0);
        // var a = Boolean('');
        // var a = Boolean(null);
        // var a = Boolean(undefined);
        // var a = Boolean(NaN);
        // var a = Boolean(4);
        var a = Boolean('tom');
        var name;
        name = 'tom';
        if(name){
   
            console.log(name);
        }
        // console.log(a,typeof a);
    </script>
</head>
<body>
</body>
</html>

2 运算符

算术运算符：+ - * / % **乘方 ++ –

比较运算符：>、>=、<、<=、、=、!=

赋值运算符：=、+=、-=、/=、%=

逻辑运算符：&&并且、||或者、!非

条件运算符：条件?表达式1:表达式2

test05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        算术运算符：+  -  *  /  %  **乘方  ++  --

        比较运算符：>、>=、<、<=、==、===、!=

        赋值运算符：=、+=、-=、/=、%=

        逻辑运算符：&&并且、||或者、!非

        条件运算符：条件?表达式1:表达式2

         */
        //1、算术运算符
        // var a = 5;
        // var b = 3;
        // var c = 'a';
        // var d = true;
        // console.log(a+b);
        // console.log(a-b);
        // console.log(a*b);
        // console.log(a/b);
        // console.log(a%b);
        // console.log(a**b);//a的b次方
        // console.log(a-c);//当表达式c为数字字符，会自动将数字字符转换为数值
        // console.log(a+d);
        // var a = 1;
        // console.log(a++);//先使用a的值，再让a自加，在原值的基础上加1，表达式返回变化前a的值，然后自加 a = a+1
        // console.log(a);
        // console.log(++a);//表达式返回变化后a的值，先自加减，再返回值
        // console.log(a);//自加自减表达式执行完a的值是多少

        //2、比较运算符
        // var a = 1;
        // var b = true;
        // console.log(a>b);
        // console.log(a<b);
        // console.log(a>=b);
        // console.log(a<=b);//返回值为布尔值  ：true / false

        // console.log(a==b);//判断a和b的值是否相同  只判断a和b的内容是否相同
        // console.log(a===b);//全等于，既要判断内容，也要判断数据类型

        // console.log(a+b);
        // console.log(a==b);//在js中true表示为1，false表示为0
        //3、赋值运算符
        // var a = 8;
        // a += 2;//a = a+2
        // a -= 2;//a = a-2
        // console.log(a);

        //4、逻辑运算符
        var x = true;
        var y = false;
        // console.log(x && y);//&&并且运算符，两边为真才为真，一边为假则为假
        // console.log(x || y);// || 或运算 两边为假才为假，一边为真就是真
        //逻辑运算短路问题
        a = 1;
        b = 5;
        console.log(a && b);//0---false
        console.log(a || b);

        //5、条件运算符
        console.log(a>b?a+b:a-b);
    </script>
</head>
<body>
</body>
</html>

test06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用math对象进行数学运算，用法，Math.方法名
        //1\绝对值
        console.log(Math.abs(-5));
        //2、幂运算
        console.log(Math.pow(2,4));
        //3、四舍五入
        console.log(Math.round(123.556));//在js中不能指定四舍五入到第几位
        //4、向上取整，向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        console.log(Math.floor(3.5))//取小于等于3.5的最大整数
        //5、生成一个[0.0.1]直接随机浮点数
        console.log(Math.random());
        //6、最大值，最小值
        console.log(Math.max(23,18,54,2,-6));
        console.log(Math.min(23,18,54,2,-6));
        //7、圆周率的值
        console.log(Math.PI);

    </script>
</head>
<body>
</body>
</html>

3 选择结构

if…else…、switch

test07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 25;
        if (age>=60){
   
            console.log('老年');
        }
        else if(age>=30){
   
            console.log('中年');
        }
        else if(age>=16){
   
            console.log('少年');
        }
        else
        {
   
            console.log('童年');
        }

        var day = '星期五';
        switch (day){
   
            case '星期一':
                console.log('吃包子');
                break;
            case '星期二':
                console.log('吃油条');
                break;
            case '星期三':
            case '星期四':
                console.log('吃面条');
                break;
            case '星期五':
                console.log('吃油饼');
                break;
            default:
                console.log('不吃了');
        }
    </script>
</head>
<body>
</body>
</html>

4 循环结构

while、do……while、for、for……in

break、continue

break：退出整个循环

continue：结束本次循环，返回到条件判断处继续进行下一次循环的条件判断

var str = 'welcome';//将字符串看作是由多个字符组成的集合
        for (var index in str)
        {
   
            // console.log(index);//输出str的索引
            console.log(str[index]);
        }

test08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
        var i = 1;
        var sum = 0;
        while (i<=100)
        {
   
            sum+=i;
            i++;
        }
        console.log(sum);
        //do...while
        var i = 1;
        var sum = 0;
        do
        {
   
         sum+=i;
         i++;
        }while (i<101);
        console.log(sum);
        //for
        var sum = 0;
        for (var i=1;i<=100;i++)
            if (i%7!=0)
                sum+=i;
        console.log(sum);

        //for...in
        var str = 'welcome';//将字符串看作是由多个字符组成的集合
        for (var c in str)
        {
   
            // console.log(index);//输出str的索引
            console.log(str[c]);
        }
        // s = 'abc';
        // document.write(s[0]);
        // document.write(s[1]);
        // document.write(s[2]);

        //break continue
        for (var i =1;i<=10;i++)
        {
   
            if(i%2==0)

            console.log(i);
            continue;
        }

    </script>
</head>
<body>
</body>
</html>

5 数组

5.1 定义方式

语法：

var arr = new Array();
var arr = new Array(值1,值2……);
var arr = [值1，值2，……];

注意：

数组的长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度

test09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = 12;
        // arr[1] = 23;
        // //……
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);

        // var arr = new Array('tom','jack','alice');
        // console.log(arr);
        // console.log(arr[2]);
        // console.log(arr[arr.length-1]);
        // console.log(arr[3]);

        // var arr = ['apple','pear','orange','banana'];
        // console.log(arr[arr.length-1]);
        // console.log(arr[0]);

        //将1-100之间所有能被3整除的数，放到数组number中，输出这个数组并统计个数
        // var number = [];
        // for (var i=1;i<=100;i++)
        //     // var index = 0;
        //     if (i%3==0)
        //         number[number.length]=i;
        // //每当向数组中添加元素时，length属性值都会改变
        //         // number[index] = i;
        //         // index++;
        // console.log(number);
        // var arr = ['tom','jack','alice','mike'];
        // // var arr = [21,34,43,12.132];
        // console.log(arr);//未排序
        // arr.sort();
        // console.log(arr);//排序后
        var arr = ['tom','jack','alice','mike','jack'];
        console.log(arr);
        // arr.reverse();
        // console.log(arr.join('-'));
        console.log(arr.indexOf('jack'));
        console.log(arr.indexOf('jack'));
        console.log(arr.slice(1));
        console.log(arr.toString());
    </script>
</head>
<body>
</body>
</html>

5.2 数组的常用方法

方法	描述
sort()	排序，默认按字符编码进行升序排序，非string类型会自动转换为string，可自定义比较规则
reverse	反转，将数组元素倒序排列
join	将数组中元素使用指定的分隔符练成字符串，默认通过逗号连接
indexOf（）	返回指定元素在数组中首次出现的位置
slice（begin，end）	截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取至末尾
toString（）	将数组转会为字符串

test10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = new Array();
        // arr[1] = new Array();
        // arr[0][0]=12;
        // arr[0][1]=9;
        // arr[1][0]=11;
        //
        // console.log(arr);
        var arr = [
            [2,12,32,9],
            [1,5,11,44],
            [34,78]
        ]
        // console.log(arr);
        console.log(arr[2][1]);
        //遍历元素
        for (var i = 0;i<arr.length;i++)
        {
   
            //循环输出每行的4个元素
            for (var j = 0;j<arr[i].length;j++)
                document.write(arr[i][j]+'  ');
            //输出每行的换行
            document.write('<br>');
        }
    </script>
</head>
<body>
</body>
</html>

5.3 二维数组

二维数组可以看作是一个特殊一维数组，即一维数组中的每个元素又是一个一维数组

var arr = new Array();//定义了一个具有m行个元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值;

var arr = [
    [值1，值2……],
    [值1，值2……],
    []
]

6 函数

6.1 自定义函数

语法：

function 函数名(参数1，参数2，……)
{
   
    函数体;
}

注意：

定义函数时不需要指定函数的参数类型
实参的个数和形参的个数可以不同，未指定参数时其形参默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return语句返回即可
如果函数中没有return语句返回值，则默认返回undefined

变量的作用域：

局部作用域

在函数中声明的变量，只能在该函数内访问，函数运行结束，变量会自动销毁
全局作用域

在函数外声明的变量，在任何位置都可以访问
块级作用域

使用let关键字声明的变量，只能在声明它的代码块内访问

test11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        自定义函数
         */
        //1 定义函数
        function show()
        {
   
            console.log('嘿嘿');
        }

        function calc(num1,num2,num3)//形式参数
        {
   
            // console.log(num1,num2,num3);
            var sum = num1 + num2 +num3;
            // console.log(sum);
            return sum;
        }
        //2.调用函数 2个功能：1、返回值 2、执行函数体为目的，实现某一功能
        // show();
        var result = calc(12,6,3);//实际参数
        // console.log(result);
        //3.变量的作用域
        var c = 6;//全局变量
        // function fn()
        // {
   
        //     var a =5;//局部变量
        //     console.log(a);
        //     console.log(c);
        // }//定义函数
        // fn();//调用函数
            function fn()
            {
   
                if (true)
                {
   
                    // var a = 5;//局部变量
                    let a = 5;//块级变量
                    console.log(a);
                }
                console.log(a);
            }
         fn();

        {
   
            var d = 2;//全局变量
            let x