day03-JavaScript入门

最新推荐文章于 2023-06-23 10:37:26 发布

Hannya。

最新推荐文章于 2023-06-23 10:37:26 发布

阅读量223

点赞数 3

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/asd747571569/article/details/118558419

版权

笔记专栏收录该内容

50 篇文章 1 订阅

订阅专栏

学习目标

掌握Js中的变量的定义和使用
掌握JS的数据类型
掌握JS的基本运算与控制语句
掌握JS的循环
掌握Js中的数组
掌握JS的对象
掌握JS的函数
掌握JS操作DOM
掌握JS事件

什么是JavaScript？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。针对网页开发的一门语言。

JavaScript的三种使用方式

<a href="#" onclick="alert()">aaa</a>
<script>alert("aaa")</script>
<script src="js/test.js"></script>

JavaScript中的变量

在js中定义变量，语法如下：
var 变量名 = 值;

JavaScript的数据类型

JavaScript是一种弱类型语言。

Number：数值
String：字符串
Boolean：布尔类型
undefined：未定义
Null：空
Object：对象
Array：数组

数据类型转换

通常有3种方式的转换
转换为字符串类型
转换为数字型
转换为布尔型

转换为字符串

在这里插入图片描述

转换为数字型（重点）

在这里插入图片描述

转换为布尔型

在这里插入图片描述

代表空、否定的值会被转换为 false  
如 ''、0、NaN、null、undefined  
其余值都会被转换为 true

字符串转义符

转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

JavaScript 输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

JavaScript注释

和Java的注释一样

JavaScript的循环与控制语句

控制语句

if (条件表达式) {
	//如果true，就执行这里面，否则不执行
}


if (条件表达式1) {

}else if (条件表达式2) {

}else if (条件表达式...) {

}...



if (条件表达式1) {
	//如果true，则执行这里
}else{
	//如果false，就执行这里
}

循环语句

for(表达式1; 条件表达式2; 表达式4){
	执行语句3
}
执行顺序：1234-->234-->234-->234...



while(条件表达式1){
	执行语句2
}
执行顺序：12-->12-->12-->12-->12-->12...


如果知道要循环的次数时，建议用for循环，否则用while循环。

break关键字

跳出循环

continue关键字

跳出本次循环

switch

语法结构

switch( 表达式 ){
case value1:
// 表达式等于 value1 时要执行的代码
break;
case value2:
// 表达式等于 value2 时要执行的代码
break;
default:
// 表达式不等于任何一个 value 时要执行的代码
}

 switch (8) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }

注意：

执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

        var num = 2;
        switch (num) {
            case 1:
                console.log(1);
            case 2:
                console.log(2);
            case 3:
                console.log(3);
            case 4:
                console.log(4);
                break;
        }

while 循环

语法结构如下：

while (条件表达式) {
// 循环体代码
}

while 语句可以在条件表达式为真的前提下，循环执行循环体代码，直到表达式不为真时结束循环。

do while 循环

语句的语法结构如下：

do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路：

先执行一次循环体代码再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

数组

需求：

存储班级中所有学生的年龄

变量，一次只能存储一个值。

<script>
			var age1=18;
			var age2=19;
			var age3=20;
			var age4=18;
           ............
           ............
           ............
</script>

提问：

js可不可以一次性把学生的年龄都存储了？

什么是数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

// 普通变量一次只能存储一个值 
var num = 10; 
// 数组一次可以存储多个值 
var arr = [1,2,3,4,5];

创建数组方式

JS 中创建数组有两种方式：

利用 new 创建数组

var 数组名 = new Array();

var arr = new Array(); // 创建了一个空的数组
//这种方式暂且了解，等学完对象再看 注意 Array () ，A 要大写

利用数组字面量创建数组（常用）

//使用数组字面量方式创建空的数组
var 数组名 = [];// 创建了一个空的数组



//使用数组字面量方式创建带初始值的数组
//数组里面的数据一定用逗号分隔  
//这里的'小白','小黑','大黄'  称为数组元素
var 数组名 = ['小白','小黑','大黄'];

数组元素

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。（数组里面的类型没有限制）

var arr1 = [1, 2, '韩立', true];

数组的索引

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

格式：

数组名【下标】

var arr = [1, 2, '韩立', true];
console.log(arr[0]); //1
console.log(arr[1]); // 2
console.log(arr[2]); // '韩立'
console.log(arr[3]);// true

console.log(arr[4]); // 因为没有这个数组元素 所以输出的结果是 undefined

console.log(arr);

遍历数组

遍历: 就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

         var arr =  ['厉飞雨', '韩立', '南宫婉'];
        //数组索引号从0开始 ，所以 i 必须从 0开始  
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }

提问：

当数组的长度改变了，循环条件也要改变，我们可不可以不改变循环条件

数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）。

    
      

 var arr = ['安其拉', '白起', '不知火舞', '妲己', '狄仁杰', '典韦', '韩信', '老夫子'];
        for (var i = 0; i < 7; i++) {
            console.log(arr[i]);
        }

       alert(arr.length);  

        console.log(arr.length);
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

数组的扩容

通过修改 length 长度新增数组元素

        var arr =  ['厉飞雨', '韩立', '南宫婉'];
        console.log(arr.length);
        arr.length = 5; // 数组的长度修改为了 5  里面应该有5个元素
        console.log(arr);
        console.log(arr[3]); // undefined
        arr[4]=1;
        console.log(arr[4]);

通过修改数组索引新增数组元素

 var arr1 =  ['厉飞雨', '韩立', '南宫婉'];
 arr1[3]=1;
 console.log(arr1);





 var arr1 =  ['厉飞雨', '韩立', '南宫婉'];
 var newArr = [];
 for (var i = 0; i < arr1 .length; i++) {
            newArr[newArr.length] = arr1[i];
        }
      console.log(newArr);

函数

        // 1. 求 1~100的累加和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);

        // 2. 求 10~50的累加和
        var sum = 0;
        for (var i = 10; i <= 50; i++) {
            sum += i;
        }
        console.log(sum);


提问：现在，我要求10到70的累加和。在把上面的代码写一遍吗？
上面的代码有什么规律？

在程序中，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

函数：

函数就是**封装了一段可被重复调用执行的代码块。**通过此代码块可以实现大量代码的重复使用。

函数的使用

函数在使用时分为两步：

声明函数

function 函数名() {
 //函数体代码
 }



 function sayHi() {
     console.log('hi~~');
    }

调用函数

函数名(); // 通过调用函数名来执行函数体代码

sayHi();//函数不调用，自己不执行

利用函数计算1-100之间的累加和

// 1. 声明函数
        function getSum() {
            var sum = 0;
            for (var i = 1; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);

        }
        // 2. 调用函数
        getSum();
        getSum();

利用函数的参数实现函数重复不同的代码

    function 函数名(形参1,形参2...)
    { 
    // 在声明函数的小括号里面是 形参 （形式上的参数） 
   
    }
    
     函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）

注意点：
(1) 多个参数之间用逗号隔开
(2) 形参可以看做是不用声明的变量

**利用函数求任意两个数的和 **

  
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        getSum(1, 3);
        getSum(3, 8);

利用函数求任意两个数之间的和

     function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum(1, 100);
        getSum(10, 50);
        getSum(1, 1000);

return 语句

有的时候，我们会希望函数将值返回给调用者。此时就会通过return语句来实现。

   <script>     
        function getResult() {
            return 666;
        }
        getResult(); // getResult()   = 666
        console.log(getResult());

        function getSum(num1, num2) {
            return num1 + num2;
        }
        console.log(getSum(1, 2));       
    </script>

函数返回值注意事项

<script>
        // 函数返回值注意事项
        // 1. return 终止函数
        function getSum(num1, num2) {
            return num1 + num2; // return 后面的代码不会被执行
            alert('我是不会被执行的哦！')
        }
        console.log(getSum(1, 2));



        // 2. return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; // 返回的结果是最后一个值
        }
        console.log(fn(1, 2));




        // 3.  我们求任意两个数的 加减乘数结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); // 返回的是一个数组
        console.log(re);


        // 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数么有 return 则返回undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); // 返回 666

        function fun2() {
        }
        console.log(fun2()); // 函数返回的结果是 undefined

    </script>

内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象

内置对象:

**内置对象就是指 JS 语言自带的一些对象，**这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

内置对象优点:

内置对象最大的优点就是帮助我们快速开发

常见内置对象:

Math、 Date 、Array、String等

Math 对象

Math 对象具有数学常数的属性。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的方法。

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

<script>
        // Math对象不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
    
        console.log(Math.PI); // 一个属性 圆周率
 

        // 三个取整方法
        // (1) Math.floor()   地板 向下取整  往最小了取值
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        // (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
        console.log(Math.ceil(1.1)); // 2
        console.log(Math.ceil(1.9)); // 2
        // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
        console.log(Math.round(1.1)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.9)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // 这个结果是 -1


        // 绝对值方法Math.abs()
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-5')); //   隐式转换 会把字符串型 -5 转换为数字型 
     

       //最大和最小值方法 Math.max()  Math.min()
       //可以传多个值比较，是不是比我们自己在对象里写的比较大小的方法好 
       console.log(Math.max(1, 99, 3)); // 99
       console.log(Math.min(-1, -10)); // -10
    </script>

除此之外还有 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1 。

得到一个两数之间的随机整数，包括两个数在内

Math.floor(Math.random() * (max - min + 1)) + min

 <script>
        // Math对象随机数方法   random()  返回一个随机的小数  0 =< x < 1
        // 这个方法里面不跟参数
        //0 =< x < 1
        console.log(Math.random());
        //取随机整数     用Math.floor()向下取整       0
        console.log(Math.floor(Math.random()));
        //0 =< x < 8
        console.log(Math.random()*8);
        //0 1 2 3 4 5 6 7 
        console.log(Math.floor(Math.random()*8));
        //1 2 3 4 5 6 7 8    取1到8之间并包括1和8的随机数
        console.log(Math.floor(Math.random()*8)+1);
        //2 3 4 5 6 7 8      取2到8之间并包括2和8的随机数
        console.log(Math.floor(Math.random()*7)+2);
        //console.log(Math.floor(Math.random()*（8-2+1）)+2);
        


        // 我们想要得到两个数之间的随机整数 并且 包含这2个整数
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));


        // 随机点名  
        var arr = ['何子毅', '黄家欢', '刘伟炎', '曹绪澳', '林旭亮', '钟俊杰'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>

案例

猜数字游戏

程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字，

如果大于该数字，就提示，数字大了，继续猜；
如果小于该数字，就提示数字小了，继续猜；
如果等于该数字，就提示猜对了，结束程序。

//分析：
// 随机生成一个1~10 的整数  我们需要用到 Math.random() 方法和上面的得到两个数之间的随机整数并且包含这2个整数的函数
// 需要一直猜到正确为止，所以需要一直循环。
// while 循环更简单
// 核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。

<script>
        // 猜数字游戏
        
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);

        while (true) { // 死循环
            var num = prompt('请输入1~10之间的一个数字');
            if (num > random) {
                alert('你猜大了');
            } else if (num < random) {
                alert('你猜小了');
            } else {
                alert('你好帅哦，猜对了');
                break; // 退出整个循环结束程序
            }
        }
    </script>

日期对象 Date

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用 Date 实例用来处理日期和时间

// Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象
        var arr = new Array(); // 创建一个数组对象
        var obj = new Object(); // 创建了一个对象实例


        // 1. 使用Date  如果没有参数 返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        // 2. 参数常用的写法  数字型  2019, 10, 01  或者是 字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1); // 返回的是 11月 不是 10月    Fri Nov 01 2019 00:00:00 GMT+0800 
        var date2 = new Date('2019-10-1 8:8:8'); 
        console.log(date2);//Tue Oct 01 2019 08:08:08 GMT+0800

日期格式化

在这里插入图片描述

<script>
        // 格式化日期 年月日 
        var date = new Date();
        console.log(date.getFullYear()); // 返回当前日期的年  2020
        console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
        console.log(date.getDate()); // 返回的是几号
        //比较特殊   周一返回的是1  周六返回的是6  但是周日返回的是 0
        console.log(date.getDay()); 
        // 我们用代码写一个 2020年 10月 7日  星期三      难点主要在怎么获取星期 1 2 3 4 5 6 0
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
    </script>

<script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒


        // 封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());



    </script>

获取Date的总毫秒形式(时间戳)

valueOf()
getTime()
＋new Date();
now();

  // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

数组对象的创建

<script>
        // 创建数组的两种方式
    
        // 1. 利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);

        // 2. 利用new Array()
        // var arr1 = new Array();  // 创建了一个空的数组
        // var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 
        var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
        console.log(arr1);
    </script>

添加删除数组元素的方法

在这里插入图片描述

       <script>
        // 添加删除数组元素方法
        // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, '彭老师');
        console.log(arr.push(4, '彭老师'));//返回的是新的长度


        console.log(arr);
         // push(参数1....)总结
        // (1) push 是可以给数组追加新的元素
        // (2) push() 参数直接写数组元素就可以了
        // (3) push完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化


        // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
         console.log(arr.unshift('red', 'purple'));

        console.log(arr);
         //unshift(参数1....)总结
        // (1) unshift是可以给数组前面追加新的元素
        // (2) unshift() 参数直接写数组元素就可以了
        // (3) unshift完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化



        // 3. pop() 它可以删除数组的最后一个元素  
       console.log(arr.pop());
       console.log(arr);
        //pop()总结
        // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        // (2) pop() 没有参数
        // (3) pop完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化


        // 4. shift() 它可以删除数组的第一个元素  
         console.log(arr.shift());
         console.log(arr);
         //shift()总结
        // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        // (2) shift() 没有参数
        // (3) shift完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化
</script>

数组排序

在这里插入图片描述

 <script>
        // 数组排序
     
        // 1. 翻转数组
        var arr = [1, 2, 3];
        arr.reverse();
        console.log(arr);


        // 2. 数组排序（冒泡排序   了解）
        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function(a, b) {
            //  return a - b; 升序的顺序排列
            return b - a; // 降序的顺序排列
        });
        console.log(arr1);
    </script>

数组索引方法

在这里插入图片描述

<script>
	//	indexOf(数组元素)  返回该数组元素索引号    从前面开始查找
		var arr = ['red',  'blue', 'green', 'blue'];
		console.log(arr.indexOf('blue'));
        var arr = ['red', 'green'];
        console.log(arr.indexOf('blue'));
        //indexOf(数组元素)总结：
        // 它只返回第一个满足条件的索引号 
        // 它如果在该数组里面找不到元素，则返回的是 -1  
        
        
        // lastIndexOf(数组元素)  返回该数组元素的索引号    从后面开始查找
        var arr = ['red', 'green', 'blue', 'red', 'blue'];

        console.log(arr.lastIndexOf('blue')); // 4
        console.log(arr.lastIndexOf('pig')); //-1
    </script>

扩展

在这里插入图片描述

Hannya。

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
day03-JavaScript入门

学习目标掌握Js中的变量的定义和使用掌握JS的数据类型掌握JS的基本运算与控制语句掌握JS的循环掌握Js中的数组掌握JS的对象掌握JS的函数掌握JS操作DOM掌握JS事件什么是JavaScript？JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。针对网页开发的一门语言。JavaScript的三种使用方式<a href="#" onclick="alert()">aaa</a><script>
复制链接

扫一扫