day02 - JavaScript入门知识

最新推荐文章于 2024-07-21 10:17:51 发布

小高今天早睡了吗？

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/m0_55710075/article/details/121776741

版权

JavaScript 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

有关NaN

1.NaN : Not a Number 非数字的集合。NaN六亲不认，不会和任何人相等，包括自己。
isNaN( )用于判断是NaN
!isNaN( )用于判断是数字

==     两个等号判断的是值相等
===    三个等号判断的是值和数据类型相等

        console.log(NaN == NaN);  //false
        console.log(NaN === NaN); //false

        var x = 3;
        console.log(isNaN(x));  //false
        console.log(!isNaN(x));  //true

字符串和字符串比较的时候，比较ASCLL值，是一位一位的比
字符串和数字比较的值，转数字进行比较

        // 字符串和字符串比较
        console.log('a'>'A'); //true
        // 字符串的比较
        console.log('212' > '2');  // true

        // 字符串和数字比较的值  转数字进行比较
        console.log('12' > 2);    //true

Math对象

1.Math.random( ) 产生0-1之间的随机数，包含0，不包含1
2.Math.ceil( ) 向上取整，可以取到最大值，取到大值的概率大
3.Math.floor( ) 向下取整，取不到最大值，取到小值的概率大一点
4.Math.round( ) 四舍五入取整，可能取到最大值

    <script>
        //产生随机数
        var x = Math.random() ;
        console.log(x);

        //0-100之间的随机数
        x *= 100 ;    //x*=100 -->  x=x*100
        console.log(x);

        //向上取整，可以取到100
        x = Math.ceil(x) ;
        console.log(x);

        // 四舍五入取整
        x = Math.round(x) ;
        console.log(x);

        // 向下取整
        x = Math.round(x) ;
        console.log(x);：
    </script>

有关计算机精度丢失：
精度丢失不止是js的问题，而是计算机的问题
1 四舍五入取整，取小数点 (0.110 + 0.210)/10
2 小数化为整数

训练：利用Math对象方法取100-1000之间的数，并且将该数的各位，十位，百位表示出来

    <script>
        //产生随机数
        var x = Math.random() ;

        // 100-1000之间，娶不到1000
        x *= 900 ;
        x += 100 ;
        x = Math.floor(x) ;
        console.log(x);

        //百位
        var bai = x / 100 ;
        bai = Math.floor(bai)
        console.log(bai);

        //十位： 取百位的余数
        var shi = x % 100 / 10 ;
        shi = Math.floor(shi) ;
        console.log(shi);

        //个位
        var ge = x % 10 ;
        console.log(ge);
    </script>

总结：
产生0-1之间的随机数 x
产生0–任何值max之间的随机数 x * max
产生min-max之间的随机数 x * (max - min) + min

训练：计算3682s 有多少小时多少分钟多在这里插入代码片少秒？

        var s = 3682 ;

        //天数
        var day = Math.floor(s / (24 * 3600)) ;

        //小时
        var hour = Math.floor(s % (24 * 3600) / 3600) ;

        //分钟
        var minute = Math.floor(s % 3600 / 60) ;

        //秒
        var second = s % 60 ;

        console.log(hour , minute , second);//1 1 22s

最大值和最小值

        //求最小值
        var min = Math.min(3 , 2 , 32 , 1 , 0) ;
        console.log(min);

        //求最大值
        var max = Math.max(3 , 2 , 32 , 1 , 0) ;
        console.log(max);

操作标签和对象

认识对象：属性 + 方法（函数）
对象.姓名
对象.性别
对象.爱好
对象.敲代码(‘hello world’)

带括号的叫函数，如 console.log() 、Math.random()、Math.floor()

操作标签和对象时，首先找到这个对象

<body>
    <input id="inp" type="text">
    <p id="p">1</p>
    <div></div>
    <h2></h2>
    <input type="text">

    <script>
        // 首先找到这个对象 input

        // 在文档中 找到id为inp的元素
        var oInp = document.getElementById('inp') ;
        console.log(oInp);

        oInp.value = '666'
        oInp.style.color = 'red'

        var oP = document.getElementById('p') ;
        oP.style.color = 'green'
    </script>
</body>

在这里插入图片描述
练习：利用操作标签对象求和

    <script>
        //拿到相关对象
        var oInp1 = document.getElementById('inp1');
        var oInp2 = document.getElementById('inp2');
        var oBtn = document.getElementById('btn');
        var oResult = document.getElementById('result');

        //控制台打印查看是否有问题
        //如果出现null表示对象没有拿到手   --id写错了
        console.log(oInp1 , oInp2 , oBtn , oResult);

        //当点击按钮时，用户就已经输入了两个数字

        //绑定点击事件
        oBtn.onclick = function(){
            // 拿到第一个输入框的值
            var n1 = oInp1.value;
            console.log(n1);

            // 拿第二个输入框的值
            var n2 = oInp2.value ;
            console.log(n2);

            // 发现页面上的数据都是字符串,将字符串转化成数字
            var sum = n1 * 1 + Number(n2) ;
            console.log(sum);

            // 计算的结果赋值给输入框
            oResult.value = sum;
        }
    </script>

在这里插入图片描述

判断语句

程序的三大流程控制语句：
顺序结构：从上而下执行代码
选择结构：判断
循环结构：重复的做一件

单分支语句：有条件的执行代码语法:
if(条件) {
条件满足时执行的代码
}

双分支语句语法：
if(条件){
条件满足执行的代码
}
else {
条件不满足执行的代码
}

多分支语句语法：
if(条件) {
条件满足执行的代码
}
else if(条件2) {
条件不满足执行的代码
}
else if(条件3) {
条件不满足执行的代码
}
…
else {
以上条件都不满足就执行这里
}

单分支语句：

        var light = 'green' ;
        // 此处的每一条单分支语句都会执行判断
        if(light === 'green') {
            alert('go');
        }

        if(light === 'red') {
            alert('stop');
        }

        if(light === 'yellow') {
            alert('wait');
        }

双分支语句：

var score = 66 ;
        if(score >= 60) {
            alert('666')
        }
        else {
            alert('下个班见');
        }

多分支语句：

var light = 'red' ;
        if(light === 'red') {
            alert('stop')
        }
        else if(light === 'green') {
            alert('go')
        }
        else if(light === 'yellow') {
            alert('wait')
        }
        // 底下的else可有可无
        else {
            alert('灯坏了')
        }

有关 if 的嵌套：

//if的嵌套
        if() {
            if() {

            }
        }

练习：利用 if 的嵌套判断一个数是正数还是负数。

<body>

    <input type="text" id="inp">
    <button id="btn">判断</button>

    <script>

        var oInp = document.getElementById('inp') ;
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function () {  

            var n = oInp.value ;

            // 判断有没有输入
            if(n === '') {
                alert('输入不能为空')
            } 
            // 不为空
            else {
                // 判断是不是数字
                if(isNaN(n)) {
                    alert('请输入一个数字')
                }
                // 是数字 
                else {
                    // alert('真棒')
                    if(n > 0) {
                        alert(n + ' 是正数')
                    } 
                    else {
                        alert(n + ' 是负数')
                    }
                }
            }
           
        }

    </script>
</body>

小高今天早睡了吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02 - JavaScript入门知识

有关NaN1.NaN : Not a Number 非数字的集合。NaN六亲不认，不会和任何人相等，包括自己。isNaN( )用于判断是NaN!isNaN( )用于判断是数字== 两个等号判断的是值相等=== 三个等号判断的是值和数据类型相等 console.log(NaN == NaN); //false console.log(NaN === NaN); //false var x = 3; conso
复制链接

扫一扫