其他分享
首页 > 其他分享> > 2022-07-12 第二组 曹雨 JS

2022-07-12 第二组 曹雨 JS

作者:互联网

Java Script

编程语言,脚本语言(依赖于某种容器来运行 Java Script 依托于浏览器来运行 由浏览器来解释执行)
JS是运行在浏览器上的,可以帮助我们去控制页面。程序员有一条不成文的规定,JS放在结束标签的上方,也可以外部引入JS

外部引入JS的方法:

<script src="#"></script> 

JS的数据类型

1.数字 (number):整数,正数,小数,负数.......

2.字符串(string):a,中文,#,@,......

3.布尔型(boolean):ture(1) false(0)

4.空(null):相当于声明了值为空

5.undefined:未定义:相当于没有值

<body>

<script>
    //变量
    // number类型
    var v1 = 11;
    // 字符串类型
    // 加引号会把变量变成字面量
    var v2 = '你好';
    // 布尔类型
    var v3 = true;
    // 空
    var v4 = null;
    // undefined
    var v5;
    // 字面量
     alert(v5);
</script>
<!-- <script src="js/my.js"></script> -->
</body>

定义变量:

变量:

开发中尽量减少使用字面量,后期维护困难的问题。

在JS的新版本中,新推出了两个词代替var

1.let 无法重复定义

2.const 由let的特点, const声明的东西是常量,不能修改

重复写两个会报错

<body>

<script>
    // var v1 = 10;
    // let v1 = 10;
    // let v1 = 100;
    const v1 = 10;
    // const v1 = 11;
    // 修改变量的值
    // v1 = 11;
    // 10
    // 11
    // 报错
    alert(v1);
</script>
</body>

JS复杂数据类型

1.数组:一个变量对应多个值

创建数组:

数组的赋值,取值

<body>

<script>
    // 1.使用数组函数
    let arr1 = Array();
    // 警告弹窗
    // alert(arr);
    // console.log(11111);
    // console.log(arr);
    // 2.使用new关键字
    let arr2 = new Array();

    // 3.使用字面量的方式
    let arr3 = [];
    // 赋值
    // 下标(索引)
    // 给数组的第一个元素赋值
    arr3[0] = 100;
    arr3[1] = 90;
    // 打印输出数组中的第一个值
    console.log(arr3[100]);
</script>
</body>

函数:

定义一个函数用来执行一系列代码。以达到复用的目的!

*函数:一个单词后面带小括号一定是一个函数义:
定义函数:

 // 全局变量
    // let v1 = 10;
    // 定义函数 体
    // 作用域:起作用的区域
    function hello() {
        // 局部变量
        let v1 = 10;
        console.log(v1 + 5);

调用函数:

// 调用函数
    // hello();
    // console.log(v1);
    function add() {
        let num1 = 10;
        let num2 = 20;
        // console.log(num1 + num2);
        // 带有返回值的函数
        return num1 + num2;

    }

全局变量,局部变量:

 // 全局变量
    // let v1 = 10;
    // 定义函数 体
    // 作用域:起作用的区域
    function hello() {
        // 局部变量
        let v1 = 10;
        console.log(v1 + 5);
    }

给参数赋值

 // 给参数赋值
    function sub(num1,num2){
        
        return num1 - num2;
    }
    let result = sub(2,2);
    console.log(result);

函数分为:
1.无参无返回值 2.无参有返回值 3.有参有返回值 4.有参无返回值
函数内部不可以再声明函数,但是可以调用函数,调用方式和正常调用方式相同
return除了可以返回结果,还可以终止函数的继续执行。在开发中尽量不要在return后面继续写语句

弹窗:

1.alert警告弹窗
2.confirm带有确定和取消的弹窗有返回值 确定返回ture 取消返回false
3. prompt:带有文本框的弹窗,有返回值 返回值就是你在文本框内输入的内容。
4. \n换行

<script>
    let result = confirm("是否退出本系统?");
    console.log(result);
    let result = prompt("请输入你的学号:","例如:1001");
    console.log(result);
    alert("\t床前明月光,\r\n疑是地上霜。");

</script>

运算符:

算术运算符:

+ - * / %(取余,取模) 
console.log(5 % 2);
赋值运算符 = += -= *= /= %=

比较运算符:

比较运算符 > < >= <= != == ===
    // 得到的结果是boolean类型

三元运算符:
语法是固定的,只能有一个条件,两个选项
语法格式:
条件表达式 ? 表达式1 : 表达式2

let max = a > b ? a : b;
“+”加号:

"+"符号,可以当作连接符 如:10 + a =10a,但如果先入为主认定“+”是连接符,那么他就一直是连接符,后面即使有数字也加不了,如果非要加可以加一个“( )”

“- * / % ”符号可以进行类型转换,如果类型无法转换,会出现“NAN(Not A Number)”

逻辑判断:

if..else..

if(a < 10) {
         console.log("a < 10...");
    } else if(a === 10){
         console.log("a==10");
         return;
         console.log("我是return后面的一句话");
    }
    else {
        
    }

if...else是可以嵌套的,可以无限嵌套。但是原则上不要超过三层。

switch

语法:

switch(表达式){

​ case 选项1:

​ 要执行的代码

​ break

​ case 选项2:

​ 要执行的代码

​ break

​ case 选项3:

​ 要执行的代码

​ .......

​ default:

}

<script>
    let a = 100;
    switch(a) {
        case 10:
            console.log('你好');
            break;
        case 20:
            console.log('我好');
            break;
        default:
            console.log('大家好');
            break;
                
    }
</script>

判断润年小案例

let year = 2020;
    if(year%400 == 0){
        console.log(year + "是闰年。");
    }else {
        if(year%4 == 0 &&year % 100 != 0){
            console.log(year + "是闰年。");
        }else{
            console.log(year + "不是闰年。");
        }
    }
    function isRun(year){
        if(year % 400 == 0){
            console.log(year + "是闰年");
            return ;
        }
        if(year % 4 == 0 && year % 100 != 0){
            console.log(year + "是闰年");
            return ;
        }
        console.log(year + "不是闰年");
    }
    isRun(2100);

公司招人小案例:

function isRun2(year){
        switch(year % 400){
            case 0:
                console.log(year + "是闰年"); 
                return;
            default:
                if(year % 4 == 0 && year % 100 != 0){
                    console.log(year + "是闰年");
                    return;
                }
                console.log(year + "不是闰年");
        }
    }
    isRun2(2100)

判断天数小案例:

<body>
<script>
    // 给你一个年月日,今天是今年的第几天?
    let year = 2020;
    let month = 3;
    let day = 11;

    
    /*
        思路:
        1、判断2月份有几天,判断是不是闰年
        2、如果是闰年,2月份有29天
    */
    function getCountDays(year,month,day){
        let count = 0;
        switch(month){
        case 1:
            count = day;
            break;
        case 2:
            count = 31 + day;
            break;
        case 3:
            // let a = 0;
            // if(isRun2(year)){
            //     a = 29;
            // }else {
            //     a = 28;
            // }
            count = 31 + (isRun2(year) ? 29 : 28) + day;
            break;
        }
        return count;
    }
    console.log(year + "年" + month + "月" + day + "日是" + year + "年的第" + getCountDays(year,month,day) + "天!" );
    function isRun2(year){
        switch(year % 400){
            case 0: 
                return true;
            default:
                if(year % 4 == 0 && year % 100 != 0){
                    
                    return true;
                }
                return false;
        }
    }
</script>
</body>

总结:

今天开始了设计逻辑的js学习,在基础知识点学习后,老师带我们做了几个小案例,设计单一知识点的案例我完成的都可以,但是一旦设计知识点综合应用,我便无从下手。在老师进行示范后,才有了思路。感觉自己编程思维还需要培养。

标签:曹雨,12,console,log,10,v1,let,year,07
来源: https://www.cnblogs.com/figh466/p/16472340.html