自学JS的第一天打卡

 

1 JS常用的输入和输出语句

       // 这是一个输入框

        prompt('请输入您的年龄');

        // alert 弹出警示框 输出的 展示给用户的

        alert('计算的结果是');

        // console  控制台输出 给程序员看到的

         console('我是程序猿');

2 JS中常见的数据类型

 <script>
        // 数据类型

        // 1  int num = 10 ; java 
        var num = 10; // num 是属于数字型
        // js 的变量类型 是 只有程序在运行过程中，根据右边等号的值来确定的
        var str = 'xiaofei'; // str 字符串型
        // 由于 js 拥有动态类型，同时意味着相同的变量可以用作不同的类型;
        var x = 10; // x 是数字型
        x = 'xiaofei'; // x 是字符串型

        //  1 数据类型的 分类
        //   1 numeber   数字型，包含整型值和浮点型值，如 21,0.21  默认值为 0 ；
        var num = 10; // num 数字型
        var pI = 3.14; // pl 数字型
        // 八进制  0~7 我们程序里面加 0 表示八进制
        var num1 = 010;
        console.log(num1); // 010  八进制 转为 十进制 就是 8
        var num2 = 012;
        console.log(num2); // 
        // 十六进制  0~9  a~f  # ffffff 数字前面加 0x 表示 十六进制
        var num3 = 0x9; // 9
        console.log(num3);
        var num4 = 0xa; // 10
        console.log(num4);
        // 数字型的 最大值 和 最小值 
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);
        // 数字型的三种特殊值   
        // infinity 代表无穷大 ，
        // -infinity 代表无穷小，
        // NaN 代表一个非数值；
        // isNaN() 这个方法是用来判断非数字， 并且返回一个值， 如果是数字 返回的是false ，如果不是数字返回的是 true 
        console.log(isNaN(12)); // false
        console.log(isNaN('小飞')); // true





        // 2 boolean  布尔类型  如 true ，false 等价于 1和0     默认值是 false；

        var flag = true; // 布尔型
        var flag1 = false;
        console.log(flag + 1); //  结果为 2，true参与加法运算，相当于 1，false 相当于 0

        // 3 string   字符串型 如 ‘张三’，注意 js里面，字符串都是带引号的；
        //  字符串型可以是 单引号 或者 双引号 ，更推荐于 使用单引号 
        // 1 字符串的 嵌套关系（机器会 就近 匹配）
        // JS 可以使用单引号 嵌套 双引号，或者用双引号嵌套 单引号（外双内单，外单内双）
        var str = '我是一个“高富帅”\n程序员！';
        console.log(str);
        //  


        // 2 字符串的转义符 
        // /n 换行符 ，  \\ 斜杠\， \t  tab 缩进，   \b 空格，隔开

        // 3 综合案例 警示框弹出
        alert('酷热难耐，太阳底下，那棵树成为了最为独特的风景\n我环顾四周，这里，是我的舞台。\n 这一刻，我豪气冲天，大喊：“我是张小飞！”\n');

        // 4 
        // 1 检测获取字符串的长度  length 
        var str = 'my name is xiao fei';
        console.log(str.length); // 15
        // 2 字符串的拼接  （+）
        // 多个字符串之间 可以使用 + 进行拼接， 拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。（最终结果是 字符串类型）
        console.log('沙漠' + '小鬼'); // 字符串的  沙漠小鬼
        console.log('小非' + 18); // 小非18
        console.log(12 + 12); // 24 数字型的
        console.log('12' + '12'); // 1212 字符串型的，拼接
        // 总结   数值相加， 字符相连 ！！！！
        // 拼接加强版
        console.log('小飞' + 20);
        console.log('小飞' + 20 + '岁');
        var age = 20;
        console.log('小飞' + age + '岁'); // 变量不要写到字符串里面去， 是通过 字符串相连  的方式来进行实现的！！
        // 变量和字符串相连的口诀 ： 引引加加 ！！！
        // console.log(小飞20岁);


        // 显示年龄的案例
        var age = prompt('请输入您的年龄：');
        var str = '您今年已经' + age + '岁了';
        alert(str);


        // 4 undefined var a； 声明了变量a 但是没有赋值，此时 a = undefined
        // 5 null    var a = null ；声明了变量a 为空值        默认值 为 null
        // 如果一个变量声明没有赋值，就是undefined，没有定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); // undefinedpink   相连
        console.log(variable + 1); // NaN  undefined 和数字相加，最后结果是 NaN

        //  NULL 空值
        var space = null;
        console.log(space + 'pink'); // nullpink
        console.log(space + 1); //   1 空值和数字相加，返回来的是数字本身的值



        //  8 获取变量数据类型
        // 可以使用 typeof 用来检测数据类型
        var num = 10;
        console.log(typeof num); // number  数字型
        var str = 'xiao'
        console.log(typeof str); // str 字符串型
        var flag3 = true;
        console.log(typeof flag3); // boolean  布尔类型

        // prompt 取过来的值 是 字符型的
        var age = prompt('请输入您的年龄：');
        console.log(age);
        console.log(typeof age);



        // 9 字面量
        console.log(18);
        console.log('18'); // 18 黑颜色的 是一种 字符型的
        console.log(true);
        console.log(undefined);
        console.log(null);

        // 字面量是在源代码中一个固定值的表示法，通俗来说，字面量表示如何表达这个值。
        // 数字字面量： 8,9,10
        // 字符串字面量： '黑马程序员' ，'大前端'、
        // 布尔字面量： true， false
    </script>

3 JS中常见的数据类型转换

 <script>
        // 数据类型的转换

        // 什么是数据类型的转换： 使用表单，prompt获取过来的数据 默认都是字符串类型的，不能直接的进行加法运算，需要转换变量的数据类型
        // 通俗来说，就是把一种数据类型的变量转换为另外一种的数据类型变量！！！
        // 通常会实现 3钟方式的转换：
        // 1 转换为 字符串类型
        // toString()   转换为字符串 方法： 变量.toString()
        var num = 1;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        // 利用 String（）,把变量放  括号 即可；
        console.log(String(num));
        console.log(typeof str);
        // 利用 + 拼接字符串的方法实现转换效果；
        console.log(num + ''); // 字符串和任何一个类型 + 拼接后，就是字符串类型。
        console.log(num);
        // toString() 和 String() 使用方式不一样。
        // 三种转换方式，我们更喜欢用第三种   加号 + 拼接字符换的转换方式，这一种方式也称之为 隐式转换。

        // 2 转换为 数字型 （重点！！）
        // parseInt(变量)  可以把 字符型的转换为 数字型，得到的是一个整数。
        var age2 = prompt('请输入您的年龄：');
        console.log(parseInt(age2));
        console.log(typeof age2);
        console.log(parseInt('3.14')); // 3 取整数
        console.log(parseInt('3.94')); // 3 取整数
        console.log(parseInt('120px')); // 120  会去掉这个px 单位，必须要以 数字 开头；

        // 2. parseFloat(变量) 可以把 字符型的转换为 数字型，得到的是一个小数，浮点数。
        console.log(parseFloat('3.94'));
        console.log(parseFloat('120px')); // 120  会去掉这个px 单位，必须要以 数字 开头；

        // 3 利用 Number（变量）
        var str2 = '123';
        console.log(Number(str2));
        console.log(Number('12'));



        // 3 转换为 布尔类型

        // 利用Boolean（）函数
        // 代表空、否定的值会被转换为 false，如‘’、0、NaN、null、undefined
        // 其余的值 全部会转换为 true。
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false

        console.log('-----------------------');

        console.log(Boolean('你好吗？'));
        console.log(Boolean('123'));
    </script>

4 拓展作业

要去如下：   // 课后作业： 一次询问并获取用户的姓名、年龄、性别，并且打印用户信息展示

​

  <script>
  var name = prompt('请输入您的姓名:');
        var sex = prompt('请输入您的性别:');
        var age = prompt('请输入您的年龄:');
        alert('您的姓名是' + name + '\n您的性别是' + sex + '\n您的年龄是' + age + '岁\n');
    </script>


​

5  运算符

        // 运算符

        // 用来实现 赋值、比较、和执行算数运算等功能的符号。

        // JS 中常用的运算符有：算数、递增和递减、比较、逻辑、赋值。

        //5. 1 算数运算符

        // +  -  *  /   %(取余数)

<script>
 console.log(1 + 1);
        console.log(2 - 1);
        console.log(2 * 3);
        console.log(6 / 3);
        console.log(7 % 5);
</script>

<script>

        // 2 浮点数 算数运算里面会有问题,一般不用 小数来进行运算。
        console.log(0.1 + 0.2); // 0.30000000000000004

        // 3 我们不能直接拿浮点数来进行比较是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false

        //  4 如何判断一个数能否被整除？？？
        //  如果一个数的余数是 0，那么说明这个数能够被整除，这就是 % 这就是取余运算符的主要用途！
        //  运算符中 也存在 优先级的问题： 先乘除后加减，有小括号先算小括号里面的内容！！

        //  5 表达式和返回值
        //  表达式： 由数字、运算符、变量组成的式子，  
        //  返回值： 由表达式返回来给我们的结果。

        var num = 1 + 1;
        console.log(num);
        // 在程序里面 写作规范是这样的： 2 =  1 + 1 把右边的表达式计算完毕把返回值给左边！！！

        // 6 递增和递减运算符
        // 如果需要反复的给一个数字变量添加或者减去1，可以使用 递增符（++）和递减符（--）运算符来实现！！！
        // 想要一个变量自己 +1, num =num + 1 这样书写比较麻烦！！！

        var num = 1;
        num = num + 1;
        console.log(num); // 2 

        // 在 JS 中，递增符（++）和递减符（--）可以放在变量前面，也可以放在变量的后面，放在前面为前置递增符（++）和递减符（--），反之同理！！
        // 注意点： 递增符（++）和递减符（--）必须要和变量相互配合使用！！！

        // 6.1 前置递增运算符，++ 写在变量的前面,++num,！！！
        var age = 10;
        ++age; // 先自加，后返回值！！！
        console.log(age);
        var p = 10;
        console.log(++p + 10); //21

        // 6.2  后置递增运算符 ++ 写在变量的后面。num++！！！
        var num = 10;
        num++;
        console.log(num);

        // 6.3 前置和后置 如果单独使用，效果都是一样的
        // 区别在于：先返回原值，后自加1！！！
        var age = 10;
        console.log(age++ + 10); // 20
        console.log(age); //   11

        // 6.3 递增递减运算符的练习
        var a = 10;
        ++a;
        var b = ++a + 2;
        console.log(b); // 14

        var c = 10;
        c++;
        var d = c++ + 2;
        console.log(d); // 13

        var e = 10;
        var f = e++ + ++e;
        console.log(f); // 22

        // 小结  1 单独使用时效果一样，2 与其他代码连用时，执行结果不一样。3前置：先己后人，后置：先人后己！！！ 4 开发常用后置自增或者自减，并且单独一行！！

        // 7 比较运算符
        // 是两个数据进行比较的时候使用的运算符，比较运算后，后返回一个布尔类型的值（true/flase）；作为比较的结果
        // 例如： > 、 <、  >=、<=、==(等于)、！=（不等于）、===（！==全等，要求数值和数据类型全部一致）

        // 8 逻辑运算符
        // 逻辑运算符是用来进行布尔值运算的运算符，返回值也是布尔值，后面开发常用于多个条件的判断
        // 常用的有：&&逻辑与（and）    ||逻辑或（or）  ！逻辑非（not）
        console.log(3 > 5 && 3 > 2); // false，两边的结果必须都要是 true 结果才会是 true
        console.log(3 > 2 || 3 > 8); // true  ， 两边的结果只要有一个是 true， 结果就可以是 true；
        console.log(!true); // false, 结果不是真的，那么结果就是假得！！！

        var str = '我爱你小飞！'
        console.log(str.length);

        // 短路运算（逻辑中断）,很重要，会影响我们程序运行的结果！！！
        // 如果有多个表达式 或者 值的之后，左边表达式的值可以确定结果的时候，就不再继续运算右边的表达式的值了；
        // 1 逻辑与   表达式1&&表达式2
        // 如果第一个表达式的值为真，则返回表达式2
        console.log(123 && 456); // 456 
        // 如果第一个表达式的值为假，则返回表达式1
        console.log(0 && 456); // 0
        console.log(0 && 1 + 1 && 5 * 2); // 0
        // 如果有空的或者否定的为假（0、‘’、null、undefined、NaN），其余都是真的

        // 2逻辑或  表达式1 || 表达式2
        // 如果第一个表达式的值为真，则返回表达式1
        console.log(123 || 456); // 123
        console.log(123 || 456 || 789); // 123
        // 如果第一个表达式的值为假，则返回表达式2
        console.log(0 || 123 || 897); // 123
        // 实际应用例子
        var num = 0;
        console.log(123 || num++); //123
        console.log(num); // 0

        // 9 赋值运算符
        // 1 +=或者-= (加、减一个数后再赋值)  2 *=或者/=或者%=(乘、除、取余后再赋值)
        var num = 10;
        // num = num + 2; // num += 2
        num += 2;
        console.log(num);
        num -= 5;
        console.log(num);
        num *= 4;
        console.log(num);

        // 10 运算符的优先级
        // 小括号》一元运算符（++或者--或者！）》算数运算符（先乘除或加减）》比较运算符》相等运算符》逻辑运算符（先&&后||）》赋值运算符》逗号运算符
    </script>