javascript1_var num1 ='10' var num2='9' num1<num2-CSDN博客

本文链接：https://blog.csdn.net/weixin_48675760/article/details/128885858

1、JavaScript的组成部分

BOM：浏览器对象模型

DOM：文档对象模型

ECMAScript：核心，定义js的语法规则与书写规范

BOM和DOM 是WebAPI,通过es操作BOM和DOM完成交互功能。
在这里插入图片描述

2、JavaScript的书写位置

行内式：（不推荐使用）

a标签

    <a href="javascript: alert('HelloWorld!')">
        点我一下
    </a>

非a标签

<div class="btn" onclick="alert('你好,世界!')">点我一下</div>

内嵌式：把代码书写在一个 script 标签对内

<script>
    alert("Hello World2!");
</script>

外链式：（推荐）

<script src="./外部的js.js"></script>

注意：

引入时，使用的是script标签的src属性
外部的javascript文件的扩展文件名为.js

3、JavaScript的注释

单行注释： // 注释内容

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

// 这是一个弹框
/* 
这是多行注释
这是多行注释
这是多行注释
这是多行注释
*/

4、变量

程序在运行过程中，可以改变的量叫变量（可以保存一个中间值）。

1>变量的定义

使用关键子 var

格式： var 变量名 = 变量值

var num = 100;
var name = "张三";

注意： = 和数学上的等号不同，这里=代表赋值，是具有方向性，是把右边的值赋给左边的变量。因此,等号的左边必须是变量。

2>变量的命名规范

变量名只能由数字、字母、下划线和$组成，不能以数字开头
变量名应该见名知义 , eg: name,age, address…
变量名采取小驼峰命名规范，第一个单词全小写，后面每个单词的首字母大写。eg: firstName，currentDate…
不能使用关键字。
变量名严格区分大小写

5、输出

        // alert 弹框
        var name = "张三";
        alert(name);
        // 输出到控制台
        var age = 25;
        console.log("age=", age);
        console.error("1+2=3");
        // 输出到页面
        var line = "<h3>过了今天,就是明天!</h3>";
        document.write(line);

6、数据类型

在这里插入图片描述

7、数据类型的检测 typeof

使用方法： typeof 检测的数据(具体的值或变量)，返回值为string


        var name = "100";
        var type =  typeof name;
        console.log("'100'的类型为:",type);

        var result = name - 0; // 隐式类型转换
        type =  typeof result;
        console.log("result的类型为:",type);

        var isExist = true;
        type =  typeof isExist;
        console.log("true的类型为:",type);

        var obj = undefined;
        type =  typeof obj;
        console.log("undefind的类型为:",type);

        var noResult = null;
        type =  typeof noResult;
        console.log("null的类型为:",type);

8、运算符

1>算术运算符

+运算符:

// + 1、当+两边都是数字或boolean类型时，进行加法运算 
        var num1 = 1;
        var num2 = 2;
        var sum = num1 + num2;
        console.log('sum:', sum);

        var sum2 = true + false;
        console.log('sum2:',sum2);

        // 2、当+两边，有一边为字符串时，进行的时字符串的拼接
        var name = "张";
        var num3 = 3;
        var res = name + num3;
        console.log('res:',res);
        // 使用+进行数字向字符串的转换操作
        var str = 100 + ""; // "100"

-运算符,就是用来做减法运算

      // 带有输入框的弹框
        var num4 = window.prompt("请输入第一个数字。。。");
        var num5 = window.prompt("请输入第二个数字。。。");

        console.log(num4 + "-" + num5 + "=" + (num4 - num5));

        // 使用- 可以进行字符串向数字的转换
        var num6 = "100" - 0;
        console.log(typeof num6);

* 乘法运算符

/ 除法运算符

        var num7 = num1 * num2;
        var num8 = 9 / 4;  // 2.25
        console.log(num7, num8);

结果:

2 2.25

% 取模运算符

   var num9 = 9 % 4;
        console.log("9%4=", num9); // 1

++ 自增运算符和–自减运算符,只有一个操作数

        var num10 = 100;
        // num10++;// num10 = num10+1;
        var num11 = ++num10; 
        console.log(num11);
        
        var num12 = 100;
        // num12--; // num12 = num12-1;
        var num13 = --num12; 
        console.log(num13);

2>赋值运算符 =

var name = "张三";
var age = 18;
 // 赋值运算符与算术运算符联合起来，衍生出了其它的赋值语句
var a = 10;
a+=5; // a+=5 等价于 a=a+5;
// 其它的类似：+=,-=,*=,/=,%=

3>比较运算符, 结果为boolean类型,成立时结果为true,不成立结果为false

大于 >
```
 5 > 10; // true
```
小于<
```
10 < 8; // false
```

等于 ,=

var num1 = 10;
var num3 = "10";
// == 只判断值是否一样
console.log(num1 == num3); // true
// === 严格等于，先判断类型，再判断值 
console.log(num1 === num3); // false

不等于 !=,!==

var a = "10";
console.log(a != 10); // false
console.log(a !== 10); // true

大于等于 >=
小于等于 <=

    <script>
        var num1 = 10;
        var num2 = 20;
        console.log(num1 > num2); // false
        console.log(num1 < num2); // true
        console.log(num1 >= num2); // false
        console.log(num1 <= num2); // true
        console.log(num1 == num2); // false
        console.log(num1 != num2); // true
    </script>

4> 逻辑运算符，结果为boolean类型

&& 与运算

使用方式：表达式1 && 表达式2,

结果：表达式1和表达式2的值都为true时，最终的结果才为true,只要有一个为false,结果就为false
        console.log(true && false); // false
        var a = 10;
        var b = 20;
        var c = 30;
        console.log(a < 10 && b < c); // false
|| 或运算

使用方式：表达式1 || 表达式2,

结果：表达式1和表达式2的值都为false时，最终的结果才为false,只要有一个为true,结果就为true
console.log(true || false); // true
console.log(a < 10 || b < c); // true
! 非运算

使用 !表达式

表达式的值为true,结果就为false,表达式的值为false,结果就为true
console.log(!false); // true
console(!(b < c));
var num = 20;
console.log(!!num);

9、程序的三种结构

1、顺序结构：按照所写的顺序从上到下，依次执行。

选择（分支）结构：

1>if

语法： 
if(执行的条件){      
    语句块。
 }
如果执行条件是真的，就执行语句块。否则就跳过

2> if–else

if(执行的条件){
语句块1
} else {
语句块2
}

if (num === "a") {
    // 语句块
    var n1 = 10;
    var n2 = 20;
    console.log("轮到我了");
    console.log(n1 + n2);
} else {
    console.log("运气真差^_^");
}

3>多条件分支结构 if–else if—else if —else

 if(执行的条件1){
 语句块1
 } else if(执行的条件2) {
 语句块2
 } else if(执行的条件3){
 语句块3
 }.........
 else {
 语句块n;
 }

    var sc = score - 0;
    // 判断分数的等级,  
    // sc >= 90 && sc <= 100 相当于数学中的 90=<score<=100
    if (sc >= 90 && sc <= 100) {
    console.log("A");
    } else if (sc >= 80) {
    console.log("B");
    } else if (sc >= 60) {
    console.log("C");
    } else {
    console.log("D");
    }

4>分支语句的嵌套

     var score = window.prompt("请先输入分数");
        if (score == null) {
            console.log("没有输入分数");
        } else {
            // 将分数转换成数字
            var sc = score - 0;
            // 判断分数的等级,
            if (sc >= 90 && sc <= 100) {
                console.log("A");
            } else if (sc >= 80) {
                console.log("B");
            } else if (sc >= 60) {
                console.log("C");
            } else {
                console.log("D");
            }
        }

在分支语句中嵌套分支语句时，必须嵌套一个完整的分支语句。

5>条件分支语句

根据已知条件找到一个完全匹配的选项, 执行对应的代码

语法:

switch(已知条件){

case 选项1：

…

case 选项2:

…

}

switch (foot) {
            case "37":
                console.log("小脚");
                break;
            case "38":
                console.log("小脚");
                break;
            case "39":
                console.log("小脚");
                break;
            case "40":
                console.log("中等");
                break;
            case "41":
                console.log("中等");
                break;
            case "42":
                console.log("中等");
                break;
            case "43":
                console.log("大的跟船一样");
                break;
            default:
                console.log("没有对应的尺码");
        }

注意点：

1> 使用case 来定义选项，如果需要在case匹配成功，执行对应的代码后跳出switch语句，那么就需要在每个case中加上break关键字。

2>如果没有匹配任何选项，就会执行default中的语句。

3>如果不同的选项对应相同的内容，可以进行内容的合并

        switch (foot) {
            case "37":
            case "38":
            case "39":
                console.log("小脚");
                break;
            case "40":
            case "41":
            case "42":
                console.log("中等");
                break;
            case "43":
                console.log("大的跟船一样");
                break;
            default:
                console.log("没有对应的尺码");
        }

2、循环结构：

在程序中，将代码块重复的执行多次。

1> while循环------- > 当 怎么样 的时候，干 什么事情

循环变量的初始状态; <1>

while(循环条件){ <2>

重复执行的语句;

更新循环变量 <3>

}

var num = 0; // 记录打印的条数
while(num<100){

  // 语句块;
  console.log("Hello World!");
  num++;
}

练习:求1+2+3+…+99的和

 var sum = 0; // 用来保存和
        var i = 1; // 用来记录数
        while (i <= 99) { // 循环条件
            // 循环语句
            sum = sum + i;
            // 更新循环变量
            i++;
        }
        console.log("1+2+3+...+99="+ sum);

求10!。 10*9*8*7*…*1

        var nums = 1;//保存积
        var item = 10;
        while (item >= 1) {
            nums *= item;
            item--;
        }

2>do–while循环

do {

// 循环语句

}while(循环条件)

while和do-while的区别:

while是先判断后执行，循环语句执行的次数 0或多次

do-while是先指行后判断，循环语句执行的次数为1次或多次

3> for循环

for(初始化循环变量;判断条件;更新循环变量){

循环语句

}

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            // 循环语句 
            // 判断是否是偶数 i%2==0，如果是，进行相加
            if (i % 2 == 0) {
                sum += i;
            }
        }

三种循环的区别：

	while	do-while	for
执行的次数	0或多次	1次或多次	0次或多次
应用的场景	次数不确定的情况	次数不确定的情况	多数应用在次数确定的情况
语法	while(条件判断){ 循环语句}	do {循环语句}while(条件判断);	for(循环变量的初始化;条件判断;更新循环变量){循环语句}

练习：

       /*
          * * * * *
          * * * * *
          * * * * * 
          * * * * *
          * * * * * 
        */

        for (var j = 1; j <= 5; j++) { // 循环嵌套
            var str = ""; //  作用：用于拼接*
            for (var i = 1; i <= 5; i++) {
                str += "* ";;
            }
            console.log(j + "行:" + str);
        }

打印三角*

 /*
        - - - *       1---1  2*row-1   -的数量= 4 -row
        - - * * *     2 --3
        - * * * * *   3---5
        * * * * * * * 4---7
        */

        for (var i = 1; i <= 4; i++) { // 外层循环，定义打印多少行
            var str = ""; //  作用：用于拼接*
            // 先打印空格
            for(var k=1;k<=4 -i;k++){
                str +="  ";
            }

            for (var j = 1; j <= 2 * i - 1; j++) { // 内层循环，定义每一行是如何打印的
                str += "* ";
            }
            console.log(i + "行:" + str);
        }

打印九九乘法表

        for (var i = 1; i <= 9; i++) { // 控制行数
            var str = "";
            for (var j = 1; j <= i; j++) {
                str += i + " * " + j + "=" + i * j + " ";
            }
            console.log(str);
        }

break的作用：用来终止循环

        //1 准备两个变量，保存这两个数
        var num1 = window.prompt("请输入第一个数") - 0;
        var num2 = window.prompt("请输入第二个数") - 0;
        // 2 最大公约数 <= min(num1,num2)
        // 假设最大公约数等于num1和num2中较小的那一个
        var result = num1;
        if (num2 < num1) {
            result = num2;
        }

        //3  找到两个数的公约数
        for (var i = result; i >= 1; i--) {
            if (num1 % i == 0 && num2 % i == 0) {
                // 第一次找到的i,就是最大的公约数
                console.log("最大的公约数：" + i);
                // 让循环结束
                break;
            }
        }

10、判断一个年份为闰年

    <script>
        /*
        判断任意年份是否为闰年，需要满足以下条件中的任意一个：
        1 该年份能被 4 整除并且不能被 100 整除；yearNum%4===0 && yearNum%100!==0
        2 该年份能被400整除。 yearNum%400===0
        */
        var year = window.prompt('请输入一个年份'); // 返回的是字符串类型,当没有输入内容时，直接确定，year的值为""
        if (year === null) { // 点取消时，返回的是null
            console.log("你还没有输入年份！！！");
        } else {
            var yearNum = year - 0; //如果year为字符串，在进行-*/时，会先将字符串类型转换为number，然后再进行计算。 
            // 判断yearNum是否为number类型
            if (typeof yearNum === 'number') {
                // 判断是否是闰年
                if ((yearNum % 4 === 0 && yearNum % 100 !== 0) || (yearNum % 400 === 0)) {
                    console.log(year + "是闰年");
                } else {
                    console.log(year + "是平年");
                }

            } else {
                console.log("输入的年份有误！！！");
            }
        }
    </script>

备注： NaN not a number(不是一个数字)。但是 typeof NaN的结果为 “number”

11、函数

函数的作用：完成一个功能的代码块。

1>定义函数

function 函数名(){

功能代码块;

}

注意: 函数名要见名知义，采取小驼峰式命名规则。get…,set…,select,query…,update…,del…

2> 函数的调用

语法：函数名();

注意：哪里使用哪里调用，可以多次调用

3>函数之间可以调用.但是不能嵌套

4> 函数的返回值

return 返回的内容.

注意: 如果函数需要有返回值,需要通过return返回,如果函数没有返回值,就不写.

5> 接收函数的返回值

var 变量 = 函数名();

6>函数的参数

function 函数名(形参1，形参2，形参3…){

代码块

}

7> 在调用时，针对有参函数传递具体的值

函数名(实参1，实参2…);

    <script>
        // 10! 10*9*8*7*....*1

        var a = 10;
        var result1 = factorial(a);
        var result2 = factorial(5);

        console.log('10!=', result1, '5!=', result2);


        // 函数声明
        function factorial(n) {
            var result = 1;
            //使用for循环
            for (var i = n; i >= 1; i--) {
                result = result * i;
            }
            return result;
        }

         // 函数表达式:  一定要在使用之前定义. 
        var func = function () {
            console.log("Hello World");
        }
        

    </script>

8> var声明的变量自动会进行作用域的提升

9>匿名函数–没有名字的函数

        // 匿名函数--没有名字的函数
            setInterval(function () {
                console.log(new Date().getUTCSeconds());
            }, 1000);

10> 递归函数

<1>在函数中自己调用自己.

<2> 将一个大的问题转换为比原问题小的同一问题.

       function fib(n){
           // 递归到底的情况
           if(n==1 || n==2){
              return 1;
           }

          // 第n-2项+ 第n-1项
          return fib(n-2)+fib(n-1);
       }

<1> 递归终止的条件 <2> 递归操作

猴子吃桃问题: 猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个。第二天早上又将第一天剩下的桃子吃掉一半，有多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第 10 天早上想再吃时，发现只剩下一个桃子了

        function eatApple(day) {
            // 递归到底的情况
            if (day == 1) {
                return 1;
            }
            return (eatApple(day - 1) + 1) * 2;
        }

12、对象

1> 对象就是一个键值对的集合。

键值对: key:value eg------> age:18

2> 对象的定义


 var obj = { "name": "张三", "age": 15, "gender": "女" };

2> 对象的操作

        //向对象中添加元素  1 使用.操作符 2 使用[]
        obj.address = "陕西汉中";
        obj.tel = "15748754785";
        obj["hobby"] = "写代码";
        console.log(obj);
        // 获取对象的内容1 使用.操作符 2 使用[]
        console.log(obj.name);
        console.log(obj.hobby);
        console.log(obj["name"]);
        console.log(obj["hobby"]);

        console.log(obj.a)

        // 修改对象内容
        obj.name = "李四";
        obj["hobby"] = "酷爱写代码";
        console.log(obj);

        // 删除对象中的内容
        delete obj.name;

        console.log(obj);

        // 获取对象中所有的内容, 遍历对象 for--in
        for (var key in obj) {
            console.log(key, "------", obj[key]);
        }

3> 获取对象中元素的个数

Object.keys(obj).length

4> 数组数据类型

数组：存放一组有序数据的集合

<1>定义数组

    // 自变量的方式
    var arr = [];
    var arr2 = ["apple", "orange", "watermelon"];

<2> 获取数组的长度

数组名.length

  console.log(arr.length);
  console.log(arr2.length);

<3>数组的操作：通过索引进行操作

数组的索引是从0开始，最大的索引 arr.length -1.

稀疏数组：在定义数组是，数组中有一些元素没有内容（undefined)。最常见的定义稀疏数组的方式 var arr=[]; arr[20]= 100;

// 向数组中添加元素，通过索引进行添加。数组的索引从0开始，数组的索引最大的 数组名.length -1
        arr[0] = 20;
        arr[1] = 30;
        arr[20] = 30;
        // 稀疏数组

        // 获取数组中指定位置的元素， 通过索引： 数组名[索引]

        //  获取数组arr中索引为1的元素
        console.log(arr[1]);
        console.log(arr[5]);
        console.log(arr2[10]);

        // 修改 数组名[修改的索引]=值
        arr[0] = 100;
        console.log(arr[0]);

        // 删除
        delete arr[1]
        console.log(arr[1]);
        console.log(arr);

<4> 数组的遍历

       // 遍历数组 for--in
        for (var key in arr) {
            console.log(key); // 这里的key对应索引
        }

        // for循环
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] !== undefined) {
                console.log(arr[i]);
            }
        }

<5> 对象数组

数组中元素是对象

      // 对象数组
        var objArr = [{ 'name': "中国" }, { 'name': '美国' }, { 'name': '英国' }];

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

        var obj = { fruits: ["apple", "orange"], toies: ["train", "gun", "plane"] }
        for (var key in obj) {
            console.log("----", key + "-------");
            var value = obj[key];
            for (var i = 0; i < value.length; i++) {
                console.log(value[i])
            }
        }

<6>传值调用和传引用调用

// 交换的方法 
        function swap(num1, num2) {  
            console.log(num1, num2); // 10 20 
            var temp = num1;
            num1 = num2;
            num2 = temp;
            // 交换的只是num1,num2
            console.log(num1, num2); // 20 10
        }


        // 交换的方法
        // arr  交换的数组   i j 交换的索引
        function swap(arr, i, j) {
            //arr [1,2,3,4] i=0;j=2
            console.log(arr[i], arr[j]); // 1  3
            var temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
            // 交换的只是num1,num2
            console.log(arr[i], arr[j]); // 3  1
        }

<1>传值调用

向函数中传递具体的值（基本数据类型），形参的改变不会影响实参

<2>传引用调用

向函数中传递的是对象（引用数据类型），形参的改变会影响实参

13、数组中常用的方法

在这里插入图片描述

concat 拼接数组，返回一个新的数组

 var arr1 = [1, 2, 3];
        var arr2 = [4, 5, 6];

        var newArr = arr1.concat(arr2);
        console.log(arr1, arr2, newArr);

 var arr1 = [1, 2, 3];
        var arr2 = [4, 5, [6, 7]];

        var newArr = arr1.concat(arr2);

        console.log(arr1, arr2, newArr);

join()将数组元素连接起来以构建一个字符串

        var fruits = ["a", "b","c","d"];

        var result = fruits.join("-");

length属性

获取数组的长度

push 向array尾部添加的值，可以是一个或多个。会改变原数组

  var fruits = ["a", "b","c","d"];

        var result = fruits.join("-");

        console.log(result);
        // 向fruits的尾部添加两个值,分别为"x","y"
        fruits.push("x","y");
        console.log(fruits);

pop() 将删除array的最后一个元素，把数组长度减1，并且返回它删除的元素的值。如果数组已经为空，则pop()不改变数组

fruits.pop();
console.log(fruits);

unshift(value,…) 向数组的头部添加一个或多个值


        fruits.unshift("p", "q", "m", "f");
        console.log(fruits);

shift() 把array的第—个元素移出数组，返回那个元素的值，并且将余下的所有元素前移一位，以填补数组头部的空缺。如果数组是空的，shift()将不进行任何操作，返回undefined。注意，该方法不创建新数组，而是直接修改原有的数组。
reverse() 翻转数组
```
 fruits.reverse();
```

排序

// 排序方法, 改变原数组
// 按照字母顺序的排序
fruits.sort();

// 自定义排序规则
        var nums = [12, 23, 8, 1];
        nums.sort(function (a, b) { return a - b; });
        console.log(nums);

slice() 从源数组中分隔出一个子数组[start,end),不改变源数组，返回一个新数组

       var arr3 =  nums.slice(0,3);
       console.log(nums,arr3);
       var arr4 = nums.slice(3); // [1]
       var arr5 = nums.slice(1,-1);// [12,8]

splice(start,delCount,value…) 插入、删除或替换数组的元素

start : 开始位置 delCount: 删除的个数 value: 添加或替换的元素

15、数字常用的方法

在这里插入图片描述

isNaN() 用来判断是否是非数字

isNaN("abc") // true

toFixed() 用来保留几位小数

没有参数：保留整数位

参数： number 保留小数的位数

  var num = 14758.82145;
        console.log(num.toFixed());
        console.log(num.toFixed(1));
        console.log(num.toFixed(2));

toString() 将数字转换成字符串

        var str = num.toString();
        console.log(typeof str, str);

valueOf() 显示num的原始值

 var numStr = 1e+2;
 console.log( numStr.valueOf()); // 100

16、日期常用的方法

在这里插入图片描述

创建日期：

        var curTime = new Date();
        console.log(curTime);

        var oldTime = new Date(2022,11,24,8,24,51);
        console.log(oldTime);

获取年月日时分秒

 // 获取到年份
        var year = curTime.getFullYear();
        // 获取到月份
        var month = curTime.getMonth(); // 使用数字0~11表示1~12月

        //  获取到日期
        var date = curTime.getDate();

        // 获取到小时
        var hour = curTime.getHours();
        // 获取到分钟
        var minutes = curTime.getMinutes();
        // 获取秒
        var seconds = curTime.getSeconds();
        // 获取到一个时间戳
        var time = curTime.getTime();

时间戳：时间点与格林威治时间相差的毫秒数。

17、数学中常用的方法

Math.abs(number) 求绝对值

        var num = window.prompt("请输入一个数字")-0;
        alert(Math.abs(num));

Math.floor(number) 求小于number的最大整数

Math.ceil(number) 求大于number的最小整数（天花板）

        var num = 157.68;
        console.log(Math.floor(num));
        // 求大于number的最小整数（天花板）
        console.log(Math.ceil(num));

求最大值

 var max = Math.max(15,27,9);
 console.log(max);

pow(x,y) x的y次幂

var result = Math.pow(3,2);
        console.log(result);

random() 返回一个0.0 和 1.0之间的一个伪随机数。

// 返回1~10之间的随机数
var num2 = Math.round(Math.random() * 9)+1;

round() 四舍五入取整