JavaScript基础整理（配代码及注释）

1. 变量

1.1 变量基础

<script>
        //1.声明了一个age的变量
        var age;
        //2.赋值  把值存入到这个变量中
        age = 18;
        //3.输出结果
        console.log(age);
        //4.变量的初始化(声明一个变量并赋值)
        var my = "香菜yyds!";
        console.log(my);
        //我是分割线----------------
        var myname = "香菜";
        var address = "地球村";
        var age = "18";
        var email = "[email protected]";
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
</script>

1.2 变量基础小案例

<script>
        //1.用户输入姓名  存储到一个myname的变量内
        // prompt('请输入您的名字');
        var myname = prompt('请输入您的名字');
        //2.输出这个用户名
        alert(myname);
</script>

1.3 交换两个变量值

<script>
        //定义一个临时空 变量 temp
        /* apple1 --> temp
        apple2 --> apple1
        temp -->apple1 */
        var temp,
            apple1 = '青苹果',
            apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
</script>

1.4 变量的数据类型

<script>
        //int name = 10; java
        //var num; 这里的 num我们是不确定属于哪些数据类型的
        var num = 10; //赋值后 ，才知道 num属于数字型
        //js 的变量类型是 只有在程序运行过程中，根据等号右边的值来确定的
        var str = 'zifuchuan'; //str 字符串型
        //js 是动态语言 变量的数据类型是可以变化的
        var x = 10; //数字型
        x = 'zifuchuan'; //字符串型
</script>

1.5 获取变量的数据类型

<script>
        var num = 10;
        console.log(typeof num); //number
        var str = 'yingzi';
        console.log(typeof str); //string
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined;
        console.log(typeof vari); //undefined
        var timer = null;
        console.log(typeof timer); //object
        //prompt 取过来的值是字符型
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
</script>

1.6 变量的语法扩展

<script>
        //1. 更新变量
        var myname = '香菜yyds';
        console.log(myname);
        //此处变量myname 已经有了  不需要开辟新的空间  所以不再写var
        myname = '香菜';
        //结果是香菜，香菜yyds被覆盖
        console.log(myname);
        //2. 声明多个变量
        /* var myname = "香菜啊";
        var address = "地球村";
        var age = "18";
        var email = "[email protected]"; */
        var myname = "香菜啊",
            address = "地球村",
            age = "18",
            email = "[email protected]";
        //3. 声明变量的特殊情况
        /* 3.1 只声明不赋值   结果是 
              程序也不知里面存的什么  所以结果是undefine 未定义的 */
        var sex;
        console.log(sex);
        //3.2 既不声明也不赋值  直接使用某个变量会报错
        //console.log(tel);
        //3.3 不声明直接赋值
        qq = 666;
        console.log(qq);
</script>

1.7 布尔型Boolean

<script>
        //flag flag1 布尔型
        var flag = true;
        var flag1 = false;
        console.log(flag + 1); //true 参与运算 当1来看
        console.log(flag1 + 1); //false 参与运算 当0来看
        //如果一个变量声明未赋值  就是undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'yingzi'); // undefinedyingzi
        console.log(variable + 1); //NaN undefined 和数字相加 最后的结果是NaN
        // null 空值
        var space = null;
        console.log(space + 'yingzi'); //nullyingzi 
        console.log(space + 1); // 1
</script>

1.8 数字型Number

<script>
        var num = 10; //数字型
        var PI = 3.14; //PI数字型
        //1. 八进制 0 ~ 7 程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1); //010 八进制 转换为 10进制 就是8
        var num2 = 012;
        console.log(num2);
        //2. 十六进制 0 ~ 9 a ~ f   #ffffff  数字前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        //3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        //4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        //5. 无穷大
        console.log(Number.MAX_VALUE * 2); //Infinity 无穷大
        //6. 无穷小
        console.log(-Number.MAX_VALUE * 2); //-Infinity 无穷小
        //7. 非数字
        console.log('香菜' - 100); //NaN
        //8.  isNaN() 这个方法用来判断非数字 并且返回一个值 
        //    如果是数字返回false 不是数字返回true
        console.log(isNaN(12)); //false
        console.log(isNaN('香菜')); //true
</script>

1.9 转换为布尔型

<script>
        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(Boolean('123'));
        console.log(Boolean('哈哈'));
</script>

1.10 转换为数字型

<script>
        //1.parseInt(变量)   可以把 字符型的转换为数字型  得到的是整数
        var age = prompt('请输入您的年龄');
        console.log(parseInt(age));
        console.log(parseInt(3.14)); //得到3  取整
        console.log(parseInt(3.99)); //得到3  取整  不四舍五入
        console.log(parseInt('120px')); //  得到120  会去掉单位
        console.log(parseInt('rem120px')); // NAN
        //2. parseFloat(变量)  可以把 字符型转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));
        console.log(parseFloat('120px')); //  得到120  会去掉单位
        console.log(parseFloat('rem120px')); // NAN
        //3. 利用 Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4. 利用 算数运输  - * / 隐式转换
        console.log('12' - 0);
        console.log('123' - '120');
        console.log('123' * 1);
</script>

1.11 字符串拼接加强

<script>
        //字符串 + 任何类型 = 拼接之后的新字符串
        console.log('香菜' + 18); // 香菜18
        console.log('香菜' + 18 + '岁');
        var age = 18;
        // 下面这种拼接是错误的  变量不要写在字符串里面，
        //是通过和 字符串相连的方式 实现的
        // console.log('香菜age岁');
        //正确写法 变量与字符串相连口诀： 引引相加
        console.log('香菜' + age + '岁');
</script>

1.12 字符串引号嵌套和转义

<script>
        var str = '我是香菜，外号叫"香菜大王"哦';
        console.log(str);
        var str1 = "我是香菜，外号叫'香菜大王'哦\n哈哈哈哈";
        console.log(str1);
</script>

1.13 字符串长度

<script>
        //1. 检测获取字符串的长度 length
        var str = 'my name is yingzi'; //17  算上空格
        //2. 字符串的拼接 + 只要有字符串和其他类型相拼接 最终的结果都是字符串类型
        console.log('香菜' + '哈哈哈'); //字符串的  香菜哈哈哈
        console.log('香菜' + 18); // '香菜18'
        console.log('xiangcai' + true); // 'xiangcaitrue'
        console.log(8 + 8); //16
        console.log('18' + 18); //1818
        '1818'
</script>

1.14 转换为字符型

<script>
        //1. 把数据型转换为字符串型  变量.toString();
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2. 利用String(变量)
        console.log(String(num));
        //3. 利用 + 拼接字符串的方法实现转换效果
        console.log(num + '');
</script>

1.15 JS输入输出

<script>
        // 这是一个输入框
        prompt('请输入您的姓名：');
        //alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        //console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
</script>

1.16 JS注释

1. 单行注释 ctrl + /
2. 多行注释 默认快捷键 shift + alt +a
3. 多行注释 vscode 中修改多行注释的快捷键 ：ctrl + shift + /

1.17 简单加法小案例

<script>
        //先弹出第一个输入框，提示用户输入第一个值保存起来
        //再弹出第二个框，提示用户输入第二个值保存起来
        //把这两个值相加，并将结果赋给新的变量（注意数据类型转换)
        //弹出警示框（alert)，把计算的结果输出(输出结果) 

        var num1 = prompt('请输入第一个值：');
        var num2 = prompt('请输入第二个值：');
        var add = parseFloat(num1) + parseFloat(num2);
        alert('两个值相加的结果是: ' + add);
</script>

1.18 显示年龄小案例

<script>
        /* 1. 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
           2.把用户输入的值用变量保存起来把刚才输入的年龄与所要输出的字符串拼接(程序内部处理)
           3.使用alert语句弹出警示框（输出结果)*/
        var age = prompt('请输入您的年龄');
        var str = '您今年' + age + '岁了';
        alert(str);
</script>

1.19 计算年龄小案例

<script>
        /* 1. 弹出一个输入框（prompt)，让用户输入出生年份(用户输入）
           2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄―（程序内部处
           3.弹出警示框（alert) ，把计算的结果输出(输出结果> */

        var year = prompt('请输入出生年份！');
        //year  取过来的是字符串型 但这里用的是减法，有隐式转换
        var age = 2021 - year;
        alert('您的年龄是:' + age + '岁');
</script>