JS基础

HTML-CSS-JS

HTML/CSS 标记语言 描述类语言

JS语言-编程类语言

行内 内嵌 外部样式

JS注释标签

变量

变量初始化

变量的语法扩展

声明多个变量

变量命名规范

 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
 严格区分大小写。var app; 和 var App; 是两个变量 
 不能 以数字开头。 18age 是错误的 
 不能 是关键字、保留字。例如：var、for、while 
 变量名必须有意义。 MMD BBD nl → age 
 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName 
 推荐翻译网站： 有道 爱词霸

交换两个变量

 var temp; // 声明了一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1; // 把右边给左边
        apple1 = apple2;
        apple2 = temp;

变量小结

变量的数据类型

数字型 Number

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

isNaN? 判断是否为数字

字符串 JS推荐用单引号

字符串转义符

字符串拼接

 // 1. 检测获取字符串的长度 length 
 
 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型

console.log('pink老师' + age + '岁');

 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值 
 变量是不能添加引号的，因为加引号的变量会变成字符串 
 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

布尔型Boolean

Undefined 和 Null

字面量 浏览器颜色识别数据类型

数据类型转换为字符串

数据类型转换为数字

转换为布尔型

 代表空、否定的值会被转换为 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

解释型语言和编译型语言

算数运算符(1)

// 1. % 取余 （取模）  
        console.log(4 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
        
        
        
        // 2. 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        
        
        
        // 3. 我们不能直接拿着浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false

前置递增运算符与后置递增运算符

// 1. 前置自增和后置自增如果单独使用 效果是一样的
// 2. 后置自增 口诀：先返回原值 后自加1 



var age = 10;
console.log(age++ + 10);
console.log(age);


 var a = 10;
        ++a; // ++a  11    a = 11
        var b = ++a + 2; // a = 12   ++a = 12
        console.log(b); // 14
        
        

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

        var e = 10;
        var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
        console.log(f); // 22
       
        
          // 后置自增  先表达式返回原值 后面变量再自加1

比较运算符

 //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相

等就可以
        
        
        console.log(3 == 5); // false
        
        
        console.log('pink老师' == '刘德华'); // flase
        
        
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        
        
        // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18);
        console.log(18 === '18'); // false

逻辑运算符

短路运算（逻辑中断）用我们的布尔值参与的逻辑运算

/

/ 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ 
    // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1

 console.log(123 && 456); // 456
        console.log(0 && 456); //  0
        console.log(0 && 1 + 2 && 456 * 56789); // 0
        console.log('' && 1 + 2 && 456 * 56789); // ''
        
        
        // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN
        
        
        
        
        // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 456 + 123); // 456
        
        
        
        // 逻辑中断很重要 它会影响我们程序运行结果思密达
        var num = 0;
        console.log(123 || num++);
        console.log(num); // 0

赋值运算符

运算符优先级

 //  ++num   !num     2 + 3
    console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)      //true
    
    
    
    var num = 10;
    console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');            //true
      
    console.log('-------------------');
    
    
    
    
    var a = 3 > 5 && 2 < 7 && 3 == 4;          // false
    console.log(a);
    

    var b = 3 <= 4 || 3 > 1 || 3 != 2;       //true
    console.log(b);
    

    var c = 2 === "2";      // false
    console.log(c);
    

    var d = !c || b && a;  //true
    console.log(d);

if分支语句

判断闰年案例

   var year = prompt('请您输入年份：');
        
        
        
        
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年');
        } else {
            alert('您输入的年份是平年');
        }

if else if多分支语句

 var score = prompt('请您输入分数:');
        if (score >= 90) {
            alert('宝贝，你是我的骄傲');
            
        } else if (score >= 80) {
            alert('宝贝，你已经很出色了');
            
            
        } else if (score >= 70) {
            alert('你要继续加油喽');
            
            
        } else if (score >= 60) {
            alert('孩子，你很危险');
            
            
        } else {
            alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
        }
    </script>

三元表达式 我们知道表达式是有返回值的

   var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量

switch分支语句

// 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 fruit = prompt('请您输入查询的水果:');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是 3.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格是 35/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>

switch else if 比较及作业

① 一般情况下，它们两个语句可以相互替换 
② switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、 等于某个范围) 
③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多 少次。 
④ 当分支比较少时，if… else语句的执行效率比 switch语句高。 

⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰

for循环

 // 2. 求1-100之间所有偶数和奇数的和   
        
        我们需要一个偶数的和变量 even  还需要一个奇数 odd
        var even = 0;
        var odd = 0;
        
        
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        
        
        console.log('1~100 之间所有的偶数和是' + even);
        console.log('1~100 之间所有的奇数和是' + odd);

 // 3. 求1-100之间所有能被3整除的数字的和   
        
        
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                // result = result + i;
                result += i;
            }
        }
        console.log('1~100之间能够被3整数的数字的和是：' + result);
    </script>
</head>

求学生成绩案例

    <script>
        // 弹出输入框输入总的班级人数(num)
        // 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
        // for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
        // 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）
        // 弹出结果


        var num = prompt('请输入班级的总人数:'); // num 总的班级人数



        var sum = 0; // 求和的变量
        var average = 0; // 求平均值的变量



        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生成绩');
            
            
            // 因为从prompt取过来的数据是 字符串型的需要转换为数字型
            sum = sum + parseFloat(score);
        }



       average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);
    </script>
</head>

一行打印五个星星

 var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '★'
        }
        console.log(str);

双重for循环

外层循环循环一次， 里面的循环执行全部

外层循环循环一次， 里面的循环执行全部


// 1. 双重for循环 语法结构
        // for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
        //     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        //         // 执行语句;
        //     }
        // }
        // 2. 我们可以把里面的循环看做是外层循环的语句
        // 3. 外层循环循环一次， 里面的循环执行全部
        // 4. 代码验证
        
        
        
        for (var i = 1; i <= 3; i++) {
            console.log('这是外层循环第' + i + '次');
            for (var j = 1; j <= 3; j++) {
                console.log('这是里层的循环第' + j + '次');

            }
        }

`

打印五行五列星星

 // 打印五行五列星星
    
    
    var str = '';
    for (var i = 1; i <= 5; i++) { // 外层循环负责打印五行
        for (var j = 1; j <= 5; j++) { // 里层循环负责一行打印五个星星
            str = str + '★';
        }
        
        // 如果一行打印完毕5个星星就要另起一行 加 \n
        str = str + '\n';
    }
    console.log(str);

打印n行n列的星星

 // 打印n行n列的星星
        var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        
        
        
        
        var str = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= cols; j++) {
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);

打印倒三角形

  var str = '';
        for (var i = 1; i <= 10; i++) { // 外层循环控制行数
            for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
                str = str + '★';
            }
            
            
            str += '\n';
        }
        console.log(str);

九九乘法表案例！

// 九九乘法表
        // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
        // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
        // 内层的 for 循环控制每行公式  j  
        // 核心算法：每一行 公式的个数正好和行数一致， j <= i;
        // 每行打印完毕，都需要重新换一行
        
        
        
        
        var str = '';
        for (var i = 1; i <= 9; i++) { // 外层循环控制行数
            for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
                // 1 × 2 = 2
                // str = str + '★';
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);

while循环

 // 1. while 循环语法结构  while 当...的时候
        // while (条件表达式) {
        //     // 循环体
        // }
        // 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环
        // 3. 代码验证
        
        
        
        var num = 1;
        while (num <= 100) {
            console.log('好啊有');
            num++;
        }
        // 4. 里面应该也有计数器 初始化变量
        // 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环

while循环案例

 // while循环案例
        // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        while (i <= 100) {
            console.log('这个人今年' + i + '岁了');
            i++;
        }


 // 2. 计算 1 ~ 100 之间所有整数的和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
            sum += j;
            j++
        }
        console.log(sum);


// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
        
        
        
        var message = prompt('你爱我吗?');
        while (message !== '我爱你') {
            message = prompt('你爱我吗?');
        }
        alert('我也爱你啊！');
    </script>

do whild循环

先执行循环体  再判断条件！！！

  // 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 
        
        在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
       
        
          // 3. 代码验证
        var i = 1;
        do {
            console.log('how are you?');
            i++;
        } while (i <= 100)
        // 4. 我们的do while 循环体至少执行一次

do while循环案例

  // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        do {
            console.log('这个人今年' + i + '岁了');
            i++;
        } while (i <= 100)
        
        
        
        
        
        // 2. 计算 1 ~ 100 之间所有整数的和
        var sum = 0;
        var j = 1;
        do {
            sum += j;
            j++;
        } while (j <= 100)
        console.log(sum);

continue 退出本次循环

break 退出循环

java script命名规范与语法格式

数组

数组的使用

// 1.数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 
        // 2. 利用new 创建数组
        var arr = new Array(); // 创建了一个空的数组




       // 3. 利用数组字面量创建数组 []
        var arr = []; // 创建了一个空的数组
        var arr1 = [1, 2, 'pink老师', true];
        
        
        
        // 4. 我们数组里面的数据一定用逗号分隔
        // 5. 数组里面的数据 比如1,2， 我们称为数组元素
        // 6. 获取数组元素  格式 数组名[索引号]  索引号从 0开始 



数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

遍历数组

 // 遍历数组：就是把数组的元素从头到尾访问一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }
        // 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0开始  i < 3
        // 2. 输出的时候 arr[i]  i 计数器当索引号来用

数组长度

计算数组的和以及平均值！！

<script>
        // 1. 求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。
        // (1)声明一个求和变量 sum。
        // (2)遍历这个数组，把里面每个数组元素加到 sum 里面。
        // (3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。


        var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
        }





       average = sum / arr.length;
        console.log(sum, average); // 想要输出多个变量，用逗号分隔即可
    </script>

求数组中的最大值

数组转换为字符串

新增数组元素

 // 1. 新增数组元素 修改length长度 
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        
        
        arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
        console.log(arr);
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined

// 2. 新增数组元素 修改索引号 追加数组元素
        var arr1 = ['red', 'green', 'blue'];
        
        arr1[3] = 'pink';
        console.log(arr1);
        
        arr1[4] = 'hotpink';
        console.log(arr1);
        
        arr1[0] = 'yellow'; // 这里是替换原来的数组元素
        console.log(arr1);

 arr1 = '有点意思';
        console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了
    </script>

数组存放1~10个值！

// 新建一个数组，里面存放10个整数（ 1~10）
        // 核心原理：使用循环来追加数组。
        // 1、声明一个空数组 arr。
        // 2、循环中的计数器 i  可以作为数组元素存入。
        // 3、由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。

 var arr = [];
       
       
        for (var i = 0; i < 100; i++) {
            // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
            arr[i] = i + 1;
        }
        console.log(arr);
    </script>

筛选数组

<script>
        // 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
        // 1、声明一个新的数组用于存放新数据newArr。
        // 2、遍历原来的旧数组， 找出大于等于 10 的元素。
        // 3、依次追加给新数组 newArr。

// 方法1
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        var j = 0;
        
        
        
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组索引号应该从0开始 依次递增
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);

 // 方法2 
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        
        
        // 刚开始 newArr.length 就是 0
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组索引号应该从0开始 依次递增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);

数组去重(删除指定数组元素)

 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
 
 var newArr = [];

for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
  console.log(newArr);
    </script>

翻转数组

// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放
        // 1、声明一个新数组 newArr
        // 2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
        // 3、我们采取 递减的方式  i--

 var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
        var newArr = [];

 for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        
        
        
        console.log(newArr);

冒泡排序

冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。 

 // 冒泡排序
        // var arr = [5, 4, 3, 2, 1];
        var arr = [4, 1, 2, 3, 5];
 for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 


            for (var j = 0; j <= arr.length - i - 1; j++) {
            
              // 里面的循环管 每一趟的交换次数
                // 内部交换2个变量的值 前一个和后面一个数组元素相比较




         if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }

            }
        }
        console.log(arr);
    </script>

从大到小排序

从小到大排序

函数

// 3. 函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        
        
        
        getSum(1, 100);
        getSum(10, 50);
        getSum(1, 1000);
    </script>

函数命名

// 2. 我们可以利用函数的参数实现函数重复不同的代码
        // function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）

        // }
        // 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）
        // 3. 形参和实参的执行过程
        
        
        function cook(aru) { // 形参是接受实参的  aru = '酸辣土豆丝' 形参类似于一个变量
            console.log(aru);

        }
        cook('酸辣土豆丝');
        cook('大肘子');
        
        
        // 4. 函数的参数可以有，也可以没有个数不限

利用函数求任意两个数的和

<script>
        // 1. 利用函数求任意两个数的和
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        getSum(1, 3);
        getSum(3, 8);
        
        
        
        
        
        // 2. 利用函数求任意两个数之间的和
        function getSums(start, end) {
            var sum = 0;
            for (var i = start; i <= end; i++) {
                sum += i;
            }
            console.log(sum);

        }
        getSums(1, 100);
        getSums(1, 10);
        // 3. 注意点
        // (1) 多个参数之间用逗号隔开
        // (2) 形参可以看做是不用声明的变量
    </script>
</head>

函数形参实参个数匹配

 // 函数形参实参个数匹配
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        // 1. 如果实参的个数和形参的个数一致 则正常输出结果
        getSum(1, 2);
        // 2. 如果实参的个数多于形参的个数  会取到形参的个数 
        getSum(1, 2, 3);
        // 3. 如果实参的个数小于形参的个数  多于的形参定义为undefined  最终的结果就是 NaN
        // 形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined 
        getSum(1); // NaN
        // 建议 我们尽量让实参的个数和形参相匹配

函数的返回值（return）

return之后的代码不会执行

求两个数的最大值（函数版)

```css
<script>
        // 利用函数 求两个数的最大值
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));
        console.log(getMax(11, 3));

求数组中的最大值(函数版)

函数返回值注意事项 return！

arguements伪数组

// arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        function fn() {
            // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);

            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);




 // 1. 具有数组的 length 属性
        // 2. 按照索引的方式进行存储的
        // 3. 它没有真正数组的一些方法 pop()  push() 等等
    </script>

break ,continue ,return 的区别

 break ：结束当前的循环体（如 for、while） 

 continue ：跳出本次循环，继续执行下次循环（如 for、while） 


 return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

利用函数求任意个数的最大值！

<script>
        // 利用函数求任意个数的最大值
        function getMax() { // arguments = [1,2,3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));

利用函数翻转数组

<script>
        // 利用函数翻转任意数组 reverse 翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
        
        
        
        var arr2 = reverse(['red', 'pink', 'blue']);
        console.log(arr2);
    </script>

利用函数冒泡排序

<script>
        // 利用函数冒泡排序 sort 排序
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        
        
        
        var arr1 = sort([1, 4, 2, 9]);
        console.log(arr1);
        
        
        
        var arr2 = sort([11, 7, 22, 999]);
        console.log(arr2);
    </script>

利用函数判断闰年

<script>
        // 利用函数判断闰年
        function isRunYear(year) {
            // 如果是闰年我们返回 true  否则 返回 false 
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            
            
            return flag;
        }
        
        
        
        console.log(isRunYear(2000));
        console.log(isRunYear(1999));
    </script>

函数是可以相互调用的

输出年份的2月份天数！！！！

函数声明两种方式

作用域

 <script>
        // 1.JavaScript作用域 ： 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突
        // 2. js的作用域（es6）之前 ： 全局作用域   局部作用域 
        // 3. 全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);

 // 4. 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);

        }
        fn();

变量的作用域

<script>
        // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
        // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);

        function fn() {
            console.log(num);

        }
        fn();
        // console.log(aru);

  // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        // 注意： 函数的形参也可以看做是局部变量
        function fun(aru) {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
    </script>

JavaScript没有块级作用域

  if (3 < 5) {
            var num = 10;
        }
        console.log(num);
    </script>

作用域链

<script>
        // 案例1 ： 结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num); // 站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();

预解析

 // 2问
        console.log(num); // undefined  坑 1
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;
`

```css
``
 // 4问
        fun(); // 报错  坑2 
        var fun = function() {
                console.log(22);

            }
            // 函数表达式 调用必须写在函数表达式的下面
            // 相当于执行了以下代码
            // var fun;
            // fun();
            // fun = function() {
            //         console.log(22);

  // 1. 我们js引擎运行js 分为两步：  预解析  代码执行
        // (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面
        // (2). 代码执行  按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        
        
        
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    </script>

预解析案例

对象

// 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');

                }
            }

   // 2. 使用对象
            // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();

变量属性函数方法区别

利用new Object创建对象

 // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

     // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
        // (2) 每个属性和方法之间用 分号结束
        
        
    console.log(obj.uname);
    console.log(obj['sex']);
    obj.sayHi();
</script>

我们为什么需要构造函数

利用构造函数创建对象

 function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');




 var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')

 1. 构造函数名字首字母要大写
         2. 我们构造函数不需要return 就可以返回结果
         3. 我们调用构造函数 必须使用 new
         4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
         5. 我们的属性和方法前面必须添加 this

构造函数和对象

/ 构造函数和对象
        // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)



        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }





. 对象 特指 是一个具体的事物 刘德华 ==  {name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(ldh);
        3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>

new关键字执行过程

<

script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        
        
        
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');
    </script>

遍历对象

  for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
    </script>

对象小结

1. 对象可以让代码结构更清晰 
2. 对象复杂数据类型object。 
3. 本质：对象就是一组无序的相关属性和方法的集合。 
4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
5. 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。
6. for...in 语句用于对对象的属性进行循环操作

内置对象

 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 
 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解 
 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 

 内置对象最大的优点就是帮助我们快速开发  JavaScript 

提供了多个内置对象：Math、 Date 、Array、String等

查文档

有时候学习了会容易忘记，所以我们要学会查文档！！！


学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C 来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，
包括 HTML、CSS 和万维网及 HTML5 应用的 API。 

MDN: https://developer.mozilla.org/zh-CN/


1. 查阅该方法的功能
2. 查看里面参数的意义和类型 
3. 查看返回值的意义和类型 
4. 通过 demo 进行测试

Math对象最大值

 // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可



        console.log(Math.PI); // 一个属性 圆周率
        console.log(Math.max(1, 99, 3)); // 99
        console.log(Math.max(-1, -10)); // -1




        console.log(Math.max(1, 99, 'pink老师')); // NaN




 console.log(Math.max()); // -Infinity

封装自己的数学对象

 // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },


            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }




 console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));
    </script>

Math绝对值和三个取整方法## Math对象随机数方法 random()

<script>
        // 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
        // 2. 这个方法里面不跟参数
        // 3. 代码验证 
        console.log(Math.random());




        // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));

猜数字游戏

<script>
        // 猜数字游戏
        // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
        // 2.需要一直猜到正确为止，所以需要一直循环。
        // 3.while 循环更简单
        // 4.核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。



        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);




        while (true) { // 死循环
            var num = prompt('你来猜？ 输入1~10之间的一个数字');
            if (num > random) {
                alert('你猜大了');
            } else if (num < random) {
                alert('你猜小了');
            } else {
                alert('你好帅哦，猜对了');
                break; // 退出整个循环结束程序
            }

        }

Date日期对象

<script>
        // Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象
        var arr = new Array(); // 创建一个数组对象
        var obj = new Object(); // 创建了一个对象实例




        // 1. 使用Date  如果没有参数 返回当前系统的当前时间
        var date = new Date();
        console.log(date);




        // 2. 参数常用的写法  数字型  2019, 10, 01  或者是 字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1); // 返回的是 11月 不是 10月 




        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
    </script>

格式化日期年月日

var date = new Date();
        console.log(date.getFullYear()); // 返回当前日期的年  2019
        console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
        console.log(date.getDate()); // 返回的是 几号



 console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0

   var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();

    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];


    var day = date.getDay();

    console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
</script>

格式化日期时分秒

 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());
    </script>

获得Date总的毫秒数

 // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());


        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);




  // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());
    </script>

倒计时效果

<script>

css
    // 倒计时效果
    // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
    // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
    // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）


    // 转换公式如下： 
    //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
    //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
    //  m = parseInt(总秒数 /60 %60 );     //   计算分数
    //  s = parseInt(总秒数%60);            //   计算当前秒数
    function countDown(time) {




        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数


        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 

        var d = parseInt(times / 60 / 60 / 24); // 天
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60); // 当前的秒
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }




    console.log(countDown('2019-5-1 18:00:00'));




   var date = new Date();
    console.log(date);
</script>

创建数组的两种方式

// 创建数组的两种方式
        // 1. 利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);

        // 2. 利用new Array()
        // var arr1 = new Array();  // 创建了一个空的数组
        // var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 





console.log(arr1);
    </script>

检测是否为数组方法

<script>
        // 翻转数组
        function reverse(arr) {
            // if (arr instanceof Array) {
            if (Array.isArray(arr)) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];

                }
                return newArr;
            } else {
                return 'error 这个参数要求必须是数组格式 [1,2,3]'
            }
        }
        console.log(reverse([1, 2, 3]));
        console.log(reverse(1, 2, 3));

 // 检测是否为数组
        // (1) instanceof  运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);



 // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));
    </script>

筛选数组

 <script>
        // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];



       for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                // newArr[newArr.length] = arr[i];
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
    </script>
</head>

添加删除数组元素方法

数组排序

获取数组元素索引方法

数组去重

 <script>
        // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
        // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 
        放到新数组中去重。

        // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 
        如果该元素在新数组里面没有出现过，
        
         我们就添加， 否则不添加。
        // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 
        如果返回时 - 1 就说明 新数组里面没有改元素
        // 封装一个 去重的函数 unique 独一无二的 

  function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }



  // var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
        var demo = unique(['blue', 'green', 'blue'])
        console.log(demo);
    </script>

数组转换为字符串

 // 数组转换为字符串 
        // 1. toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3




 var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); // green,blue,pink
        console.log(arr1.join('-')); // green-blue-pink
        console.log(arr1.join('&')); // green&blue&pink
    </script>

slice() 和 splice() 目的基本相同，建议同学们重点看下 splice()

基本包装类型

// 基本包装类型
        var str = 'andy';
        console.log(str.length);
        // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
        // 简单数据类型为什么会有length 属性呢？ 
        // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 

字符串的不可变性

 // 字符串的不可变性
        var str = 'andy';
        console.log(str);
        str = 'red';
        console.log(str);


 // 因为我们字符串的不可变所以不要大量的拼接字符串
        var str = '';
        for (var i = 1; i <= 1000000000; i++) {
            str += i;
        }
        console.log(str);
    </script>
</head>

查找字符串中某个字符出现的次数

 <script>
        // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
        // 核心算法：先查找第一个o出现的位置
        // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
        // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找


        var str = "oabcoefoxyozzopp";
        var index = str.indexOf('o');



       var num = 0;
        // console.log(index);
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是: ' + num);
        // 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数
    </script>

根据位置返回字符

  // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
       
        
         
           // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); // 97
        
        
        
        // 3. str[index] H5 新增的
        console.log(str[0]); // a

统计出现最多的字符和次数

 <script>
        // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }


        if (o['sex']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');

        }

 //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4

        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符

 var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);

 // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

字符串操作方法（截取字符串）

字符串对象其他方法

 toUpperCase() //转换大写 
 toLowerCase() //转换小写


t>
        // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));






   // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

字符串装换为数组

  // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
        
        
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));



  var str3 = 'red&pink&blue';
        console.log(str3.split('&'));
    </script>

简单数据类型null

// 简单数据类型 null  返回的是一个空的对象  object 
        var timer = null;
        console.log(typeof timer);


 // 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 



 // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值


        // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据
    </script>

初识简单数据类型与复杂数据类型

简单数据类型传参

script>
        // 简单数据类型传参
        function fn(a) {
            a++;
            console.log(a);
        }
        var x = 10;
        fn(x);
        console.log(x);
    </script>

复杂数据类型传参