黑马JavaScript笔记（一）ECMAScript

第一天

01初识JavaScript

1、简述JavaScript

1.5

DOM(文档对象模型)：标准编程接口
BOM(浏览器对象模型)



建一个my.js,在文件内编写alert(‘滴滴滴’); 使用单引号

2、JS注释

单行注释： ctrl+/
多行注释：ctrl+shift+/

3、JS输入输出语句

alert:弹出警示框 输出的 展示给用户的
prompt：这是一个输入框
console：控制台输出 给程序员测试用的

02变量

1、变量概述

2、变量的使用

1.声明变量
var age；

2.赋值
age=10；
3.输出结果
console.log(age);
4.变量的初始化
var age=10；

3、变量语法扩展

        // 1. 更新变量
        var myname = 'pink老师';
        console.log(myname);
        myname = '迪丽热巴';
        console.log(myname);
        // 2. 声明多个变量
        var age = 18,
            address = '火影村',
            gz = 2000;
        // 3. 声明变量的特殊情况
        // 3.1 只声明不赋值 结果是？  程序也不知道里面存的是啥 所以结果是 undefined  未定义的
        var sex;
        console.log(sex); // undefined
        // 3.2  不声明 不赋值 直接使用某个变量会报错滴
        // console.log(tel);
        // 3.3 不声明直接赋值使用
        qq = 110;
        console.log(qq);

4、变量命名规范

5、小结

03数据类型

1、数据类型简介

1.变量的数据类型

        // var num; // 这里的num 我们是不确定属于哪种数据类型的
        var num = 10; // num 属于数字型 
        // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink'; // str 字符串型
        // js是动态语言 变量的数据类型是可以变化的
        var x = 10; // x 是数字型 
        x = 'pink'; // x 字符串型

js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
js是动态语言 变量的数据类型是可以变化的

2、简单数据类型

**

        // 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
        // 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
        // 非数字
        console.log('pink老师' - 100); // NaN

3.字符串型String

语法推荐使用单引号

        // 3. 检测获取字符串的长度 length 
        var str = 'my name is andy';
        console.log(str.length); // 15
        // 4. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
        console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
        console.log('pink老师' + 18); // 'pink老师18'
        console.log('pink' + true); // pinktrue
        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'

3、获取变量数据类型

4、数据类型转换

        // 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 + '');

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

第二天

01JavaScript操作符

1、运算符

2、算数运算符

3、递增和递减运算符

4、比较运算符

5、逻辑运算符

6、赋值运算符

7、运算符优先级

02JavaScript流程控制-分支

1、流程控制

2、顺序流程控制

3、分支流程控制if语句

if语句

        // 1. if 的语法结构   如果if
        // if (条件表达式) {
   
        //     // 执行语句
        // }

        // 2. 执行思路  如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句 
        // 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
        // 3. 代码体验
        if (3 < 5) {
   
            alert('沙漠骆驼');
        }

if else语句

        // 1. 语法结构  if 如果  else 否则
        // if (条件表达式) {
   
        //     // 执行语句1
        // } else {
   
        //     // 执行语句2 
        // }
        // 2. 执行思路 如果表达式结果为真 那么执行语句1  否则  执行语句2
        // 3. 代码验证
        var age = prompt('请输入您的年龄:');
        if (age >= 18) {
   
            alert('我想带你去网吧偷耳机');
        } else {
   
            alert('滚， 回家做作业去');
        }
        // 5. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行  2选1
        // 6.  else 后面直接跟大括号

if else if语句（多分支语句）

        // 1. 多分支语句   就是利用多个条件来选择不同的语句执行 得到不同的结果  多选1 的过程
        // 2. if else if语句是多分支语句
        // 3. 语法规范
        if (条件表达式1) {
   
            // 语句1;
        } else if (条件表达式2) {
   
            // 语句2;
        } else if (条件表达式3) {
   
            // 语句3;
        } else {
   
            // 最后的语句;
        }
        // 4. 执行思路
        // 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句  
        // 如果条件表达式1 不满足，则判断条件表达式2  满足的话，执行语句2 以此类推
        // 如果上面的所有条件表达式都不成立，则执行else 里面的语句
        // 5. 注意点
        // (1) 多分支语句还是多选1 最后只能有一个语句执行
        // (2) else if 里面的条件理论上是可以任意多个的
        // (3) else if 中间有个空格了

4、三元表达式

        // 1. 有三元运算符组成的式子我们称为三元表达式
        // 2. ++num     3 + 5     ? :
        // 3. 语法结构 
        // 条件表达式 ？ 表达式1 ： 表达式2
        // 4. 执行思路
        // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
        // 5. 代码体验
        var num = 10;
        var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
        console.log(result);
        // if (num > 5) {
   
        //     result = '是的';
        // } else {
   
        //     result = '不是的';
        // }

5、分支流程控制switch语句

        // 1. switch 语句也是多分支语句 也可以实现多选1
        // 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思
        // switch (表达式) {
   
        //     case value1:
        //         执行语句1;
        //         break;
        //     case value2:
        //         执行语句2;
        //         break;
        //         ...
        //         default:
        //             执行最后的语句;
        // }
        // 3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句
        // 4. 代码验证
        switch (8) {
   
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }

        // switch注意事项
        var num = 1;
        switch (num) {
   
            case 1:
                console.log(1);

            case 2:
                console.log(2)<