JavaScript的入门课堂笔记

最新推荐文章于 2022-09-27 18:42:08 发布

ChengMeng11

最新推荐文章于 2022-09-27 18:42:08 发布

阅读量866

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/ChengMeng11/article/details/106922716

版权

这篇博客详细介绍了JavaScript的基础知识，包括JavaScript的引入方式、基本语法、核心语法、复合函数、DOM操作和事件处理。讲解了变量、数据类型、运算符、选择结构、循环结构、数组、函数、字符串、日期、JSON、对象类型等内容，并提供了丰富的示例和代码实践。

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

一、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="点我" οnclick=alert("我被点，晕了")>
    <!--<a href="" οnclick="alert('超链接被触发了')">超链接</a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

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

3.外部方式

使用单独的 .js文件定义，然后在页面中使用script标签引入外部脚本文件

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

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

代码：

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

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

js中的代码;

alert('哈哈');

案例;

在这里插入图片描述

三、基本语法

1.变量

变量是用来存储常量的量

常量就是固定值……常数项

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

语法：var 变量名=常量会表达式；

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

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

注：在IDEA中配置ES版本：settings–>language & frameworks–>javascript–>javascript language version

变量的命名规则：

由字母、数字、下划线、汉字组成
由字母、下划线开头
不能和系统关键字重名
区分大小写

了解：变量名的命名：

代码：

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

        var age=18;  //定义一个变量age，并将整数18常量赋值给age
        //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(姓名);
        // 1_age = 18;  //数字开头的最后不显示(后台显示为错误)
        Age = 19;
        // alert(1_age);
        alert(Age);

    </script>
</head>
<body>

</body>
</html>

案例：

在这里插入图片描述

2、输入和输出

输出：

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

输入：

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

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

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

3、转义字符

常用转义字符：

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

4、注释

单行注释：//

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

5、编码规范

代码是区分大小写的

每个语句以分号结尾

代码缩进

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
    <script>
        //输出信息
        // alert("嘿嘿");
        // console.log("哈哈");
        // document.write("嘻嘻");
        // 输入
        // var name=prompt("请输入你的姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄：");
        // console.log(age,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()、parselnt()、perseFloat()
转换为字符串

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

使用Boolean

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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');

        //2.方式二：parseInt()
        // a = parseInt('12');
        // a= parseInt('12.5');   //在转换时  会去掉小数部分
        // a = parseInt('12abc');    //按照字符的顺序依次分析
        // a = parseInt('abc12');

        //3.方式三：parseFloat
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
        // a = parseFloat('abc12');

        //将数值转换为字符串
        // 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表示
        // console.log(a,typeof a);

        /*
            转换为布尔
         */
        // 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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script>

        //算数运算符
        //+、-、*、/、%求余、**乘方、++、--
        // var a = 5;
        // var b = 3;
        // var c = '2';
        // 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减1   表达式会返回变化前 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);   //返回值Boolean 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 = 20;
        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>

案例：

在这里插入图片描述

运算的其他方式：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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,2,55,5,-3));
        console.log(Math.min(23,2,55,5,-3));
        //7.圆周率的值
        console.log(Math.PI);


    </script>
</head>
<body>



</body>
</html>

案例：

在这里插入图片描述

3、选择结构

if…else…、switch

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择结构</title>
    <script>

        //if …… else语句

        var age = 25;
        if(age>=60)
        {
    
            console.log('老年');
        }
        else if(age>=30)
        {
    
            console.log('中年');

        }
        else if(age>=16)
        {
    
            console.log('少年');

        }
        else
        {
    
            console.log('童年');
        }

        //switch语句

        var day = '星期五' ;
        switch(day){
    
            case'星期一':
                console.log('吃油条');
                break;
            case'星期二':
                console.log('吃包子');
                break;
            case'星期三':
            case '星期四':
                console.log('吃饼子');
                break;
            case'星期五':
                console.log('吃条子');
                break;
            default:
                console.log('减肥！');
                break;
        }


    </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]);
        }

代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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);

        //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 index in str)
        {
    
            // console.log(index);   //输出了str的索引
            console.log(str[index]);
        }
        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)
                break;
            console.log(i)
        }


    </script>
</head>
<body>

</body>
</html>

案例;

在这里插入图片描述

5、数组

5.1定义方式

语法：

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

注意：

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

5.2常用方法

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组(+常用方法)</title>
    <script>

        //第一种定义方式
        // var arr = new Array();
        // arr[0] = 12;
        // arr[1] = 9;
        // //...
        // 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[arr.length]);

        //第三种方式
        // var arr = ['tom','alice','jack','mike'];
        // console.log(arr[arr.length-1]);
        // console.log(arr[0]);

        //将1到100之间所有能被3整除的数字，放到数组nums中，输出这个数组，并统计这个数组
       //第一种：
       //  var nums =[];
       //  var index = 0;
       //  for(var i = 1;i <=100;i++)
       //
       //      if(i % 3 == 0)
       //      {
    
       //          nums[index] = i;
       //          index++;
       //      }
       //  console.log(nums);

        //第二种：
        // var nums =[];
        // for(var i = 1;i <=100;i++)
        //
        //     if(i % 3 == 0)
        //
        //         nums[nums.length] = i;
        //
        // //每当向数组中添加元素时，length属性值都会改变
        // console.log(nums);


        /*
        一维数组常用的方法
         */
        // sort()的方法：正序排列
        // 1.字母
        // var arr = ['tom','jack','alice','mike'];
        // console.log(arr);   //未排序的输出结果
        // arr.sort();
        // console.log(arr);   //排序后的输出结果
        // 2.数字（了解即可）
        // var arr = ['11','55','1','5425','515'];
        // console.log(arr);   //未排序的输出结果
        // arr.sort();
        // console.log(arr);   //排序后的输出结果

        // reverse的方法:倒叙排列
        // var arr = ['tom','jack','alice','mike'];
        // console.log(arr);   //未排序的输出结果
        // arr.reverse();
        // console.log(arr);   //排序后的输出结果

        //join的方法：默认为逗号进行连接
        // var arr = ['tom','jack','alice','mike'];
        // console.log(arr);   //未排序的输出结果
        // console.log(arr.join('-'));   //排序后的输出结果

        //indexOf()
        // var arr = ['tom','jack','alice','mike','jack','alice'];
        // console.log(arr);
        // console.log(arr.indexOf('jack'));
        // console.log(arr.lastIndexOf('jack'));

        //slice(start,end)
        // var arr = ['tom','jack','alice','mike','jack','alice'];
        // console.log(arr);
        // console.log(arr.slice(1,5));
        // console.log(arr.slice(1));

        toString()
        var arr = ['tom','jack','alice','mike','jack','alice'];
        console.log(arr);
        console.log(arr.toString());










    </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，......],
	[值1，值2，......]    //最后一个不用加 逗号
];

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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]=10;
        //
        // console.log(arr);

        var arr =[
            [12,54,5,69],
            [1,24,56,2],
            [9,65,22,8]
        ];
        // console.log(arr);
        // console.log(arr[0][1]);

        //遍历元素
        for(var i = 0;i<arr.length;i++)
        {
    
            //循环输出每行的4个元素
            for(var j = 0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp;&nbsp;')
            //输出每行的换行
            document.write('<br>')
        }

    </script>
</head>
<body>

</body>
</html>

案例：

在这里插入图片描述

6、函数

6.1自定义函数

语法：

function 函数名(参数1,参数2,.....)
{
   
	函数体;
}

注意：

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

变量的作用域：

局部作用域

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

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

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

代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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,5);    //实际参数
        // 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 = 4;
        //     console.log(x);
        // }
        // console.log(d);
        // console.log(a);
        // console.log(c);
    </script>
</head>
<body>

</body>
</html>

代码：

在这里插入图片描述

6.2回调函数

不立即执行的函数调用，满足一i的那个条件时会执行或者由别的代码调用执行，称为回调函数callback，调用时只写函数名，没有小括号和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数</title>
    <script>
        function f1()
        {
    
            console.log('111');
        }
        // f1();
        //当我们单机窗口时执行f1函数
        // window.onclick = f1;
        /*
            函数本身也是一种数据类型
            数据类型有：string、number、boolean、null、undefined、function
         */
        // console.log(typeof f1);
        var a = f1

最低0.47元/天解锁文章

ChengMeng11

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的入门课堂笔记

一、JavaScript简介1.什么是JavaScriptJavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行。Web前端三层：结构层HTML，定义页面的结构样式层CSS，定义页面的样式行为层JavaScript用来实现交互，提升用户的体验2.JavaScript作用在客户端浏览器上动态的操作页面在客户端浏览器上作数据的校验在客户端上发送异步请求二、引用方式1.内联方式在页面中使用script标签，在script标签中编写js代码scri
复制链接

扫一扫