js基础day03

一.综合练习

1.换肤效果封装

• 封装原则：相同代码不动，不同的当作参数传递进来
• 封装本质：将重复代码，写到一个函数中，方便重复调用
• 封装好处：简化代码，方便调用，代码扩展性提高了

2.图片切换

2.1 使用事件

• onmousemover 鼠标移动到元素上
• onmouseout 鼠标从元素上离开

    pic.onmouseover = function () {
        //注意:标签自己的属性可以使用点语法直接获取
        pic.src = "images/22.jpg";
    };

2.2 prompt() 显示可提示用户进行输入的对话框

• prompt(text,defaultText)
• text: 可选, 对话框提示的文字
• defaultText: 可选, 输入框默认文字
• 返回值: 返回输入内容, 字符串
• 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
• 在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

2.3 如何学习函数

• a.函数功能。怎么调用函数
• b.函数参数 。参数是可选的, 还是必需的, 可选可以省略, 必需 必需传参,参数的作用
• c.函数返回值。 返回的值什么类型的数据, 返回的是字符串类型

3.美女竞价

3.1 点击按钮逻辑判断

1.是否输入内容
2.转换为数字类型，判断输入的值是否是数值
3.判断输入的数值是不是小于1000， 小于1000弹窗提示
4.如果数值大于1000， 修改h2内容
5.第二次输入数值，判断当前输入的数值，是否比上次输入数值大，如果小于上次的数值弹窗提示
6.如果第二次输入数值比上次大，更新h2文本内容

3.2 isNaN(x) 用于检查其参数是否是非数字值

• x:必需。要检测的值。
• 如果 x 是特殊的非数字值 NaN，返回的值就是 true。如果 x 是其他值,则返回 false。
• isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）

二.window.onload

2.1window :所有浏览器都支持 window 对象。它表示浏览器窗口。

• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

• 全局变量是 window 对象的属性。

• 全局函数是 window 对象的方法。

• 甚至 HTML DOM 的 document 也是 window 对象的属性之一：

  window.document.getElementById("header");
  

  与此相同：

  document.getElementById("header");
  

2.2 onload 事件: 某个页面或图像被完成加载, 就会响应onload事件

三.变量提升

同一个作用域下，只要声明一个变量，变量的声明会被提升到该作用域最上边

<script>
    //结论：同一个作用域下，只要声明一个变量，变量的声明会被提升到该作用域最上边
    var a;
    alert(a); //结果：undefined 变量只是声明， 没有赋值
    a = 11; //全局变量

    //变量提升:
    //函数内声明一个变量，变量声明会被提升到函数最上边,但是变量赋值没有发生改变
    function fn() {
        var b;
        alert(b); //undefined 变量只是声明， 没有赋值
        b = 22; //局部变量
    }
    //函数调用
    fn(); 
</script>

四.取整函数

4.1 parseInt()

1.数字取整

var a = 123.456789;
var b = parseInt(a);
console.log(b , typeof b);

2.字符串取整

• parseInt() 可以对数字字符串取整，获取小数点前边整数部分,并且转化为number类型

var c = '123.456789';
var d = parseInt(c);
console.log(d, typeof d);

• 注意：parseInt() 对数字字符串取整，先取字母前面数字，然后再取整数部分，字母后面数字获取不到

var e = '123.456789px222';
var f = parseInt(e);
console.log(f,  typeof f); //123, number

• 注意：parseInt() 取整字符串一定是以数字开头,否则返回结果NaN

var e = 'px222';
var f = parseInt(e);
console.log(f );  //NaN

4.2 parseFloat()

parseFloat() 截取字符串中小数

• parseFloat() 原理: 先判断传入字符串是否是以数字开头, 如果以数字开头,就对字符串进行判断

var ee = '123.456789px222';
var ff = parseFloat(ee);
console.log(ff, typeof ff);//123.456789 , number

4.3 toFixed(x)

toFixed(x) 保留x位小数

var a = 123.456789;
var num = a.toFixed(2);
//注意：toFixed(x) 以字符串格式，返回保留的x位小数
console.log(num, typeof num); // 123.46  string
num = num * 1;

• 注意：toFixed() 不能处理字符串

var e = '123.456789px222';
var num2 = e.toFixed(2);
console.log(num2); 

五.数据类型转换

1.数字转字符串

var a = 3.1415926;
//方法一：
var str = a + '';
console.log(str, typeof str);

//方法二：
var str2 = String(a);
console.log(str2, typeof str2);

2.字符串转数字

var b = '12345';
//方法一：
var num = b * 1;
console.log(num, typeof num);

//方法二：
var num2 = Number(b);
console.log(num2, typeof num2);

3.其他类型转换为布尔

var a = 3.1415926;
var b = '12345';
//验证非0即真
//数字转布尔
var c = Boolean(a);
console.log(c, typeof c); //true

//字符串
console.log(Boolean(b)); //true

//0是false
console.log(Boolean(0));//false

//undefined
console.log(Boolean(undefined)); //false

//空字符串
console.log(Boolean('')); //false

//null
console.log(Boolean(null)); //false

六.Math函数库

Math函数库，提供一些属性和函数，让我们进行数学运算

Math 对象属性

• 1.PI 获取圆周率

console.log(Math.PI);

• 2.获取2的平方根

console.log(Math.SQRT2);

Math 对象方法

• 1.abs() 绝对值

console.log(Math.abs(2));  //2
console.log(Math.abs(-11)); //11

• 2.sin() 正弦函数
• 参数是弧度
• 30度 是角度 -> 角度转弧度
• 角度转弧度公式 = 度数 * Math.PI / 180
• 数字精度丢失原因：javaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出

var a = Math.sin(30 * Math.PI/180);
console.log(a); //数字精度丢失

• cos() 余弦函数

var b = Math.cos(60 *Math.PI/180);
console.log(b); 

• 3.ceil() 对数向上取整， 向上取最近的整数

var num = 3.1415;
console.log(Math.ceil(num)); //4

• 4.floor() 对数向下取整，向下取最近的整数

console.log(Math.floor(num)); //3

• 5.max(x, y) 返回x和y中的最大值
• min(x, y) 返回x和y中最小值

console.log(Math.max(2, 5)); //5
console.log(Math.min(2, 5)); //2

• 6.pow(x, y) 返回x的y次幂。 x底数， y指数

console.log(Math.pow(2, 3)); //2的3次方

• 7.random() 返回0~1 之间的随机数
• 注意：取不到边界值，即取不到0，取不到1

console.log(Math.random());

• 8.round(x) 把数四舍五入为最接近的整数

console.log(Math.round(3.14));  //3
console.log(Math.round(3.55)); //4

• 9.sqrt() 返回数的平方根

console.log(Math.sqrt(3)); //3的平方根
//Math.sqrt(3) * 0.5 -> cos(30度)

七.js引入方式

css 引入方式优先级 行内式 > 内嵌式 > 外链式

js引入方式有以下几种：

1.页内式导入js

<script>
    //js页内式
    //1.获取box
    var box = document.getElementById('box');
    //2.设置box
    box.style.width = '200px';
    box.style.height = '200px';
    box.style.backgroundColor = 'blue';
</script>

2. window.onload导入js

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //js 页内式
        window.onload = function () {
            //1.获取box
            var box = document.getElementById('box');
            //2.设置box
            box.style.width = '300px';
            box.style.height = '300px';
            box.style.backgroundColor = 'green';
        }
    </script>
</head>

3.外链式导入js

• js要想导入js文件， 使用标签script的属性src设置路径
• 属性src使用方式和img的src一样
• 注意：不能在外链式中，添加任何内容， 也不推荐这样写
• 注意：开发中，外链式要写在页内式上面

<script src="09-index.js"></script>

//09-index.js 
//1.获取box
var box = document.getElementById('box');
//2.设置box
box.style.width = '400px';
box.style.height = '400px';
box.style.backgroundColor = 'yellow';

总结：js引入方式没有优先级，最后都是要转化为行内式对元素进行设置。
所以，只有最后一次设置才起作用，后面的设置会覆盖前边的属性设置

八.认识数组

• 数组：数组时用来保存大批量数据的容器，是数据的集合。

• 元素：数组中的每个数据叫一个元素。

• 索引：也叫角标。数组时有序的集合。数组默认就有索引，从左边开始。第一个元素索引为0，索引依次往后递增

• 1.创建数组

直接实例化
var arr = new Array(99, 88, 77, 66);
console.log(arr);

• 2.数组简写
• js中 [] 是数组标志

var arr2 = [99, 88, 77, 66];

• 3.数组取值
• 格式：数组名[索引]

var index1 = arr2[1];
console.log(index1);

• 4.数组存值
• 格式：数组名[索引] = 值

arr2[2] = 44;
console.log(arr2);

• 5.数组长度， length 获取数组元素个数

console.log(arr2.length);

• 6.数组越界问题：元素索引超出数组范围
• 开发中一定要避免数组越界，数组索引值不要超出 数组长度-1

console.log(arr2[9]);

• 7.数组遍历

 for(var i = 0;i < arr2.length;i++){
     console.log(i);
     console.log(arr2[i]);
 }

• 8.js数组可以保存多种数据类型，不建议这样用

var arr3 = [33, 'sk666', undefined, null, true];
console.log(arr3);

九.隔行变色

• getElementsByTagName()
• 参数：标签名， 字符串格式
• 返回值：伪数组， 数组中存储的是获得所有同类型标签
• 伪数组：该数组有些数组方法没有
• 注意：想要获取谁里面的子标签，就由谁来调用

9.png

十.全选反选不选

• js中input使用checked控制是否选中
• checked属性是布尔类型 ， true 选中，false 未选中

<div id="box">
    <button>全选</button>
    <button>不选</button>
    <button>反选</button>
</div>

<div id="inputBox">
    <input type="checkbox" >
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

10.png

十一.排他思想

11.png

• 注意：js中给元素设置class,使用属性className

• 排他思想：先清空所有的，再对当前相应元素单独设置

//第一个按钮
    btnList[0].onclick = function () {
        //btnList[0].className = 'current';
        for(var i = 0; i<btnList.length; i++){
            //先清空所有按钮className
            btnList[i].className = '';
        }
        //再对当前响应事件按钮，单独设置
        btnList[0].className = 'current';
    }

• 封装：相同的代码不动，不同的当作参数传过来

//封装给按钮添加事件功能
    function btnClick(obj) {
        obj.onclick = function () {
            //btnList[0].className = 'current';
            for(var i = 0; i < btnList.length; i++){
                //先清空所有按钮className
                btnList[i].className = '';
            }
          //再对当前响应事件按钮，单独设置
          obj.className = 'current';
        }
    }
    //2.添加事件
    btnClick(btnList[0]);
    btnClick(btnList[1]);
    btnClick(btnList[2]);
    btnClick(btnList[3]);
    btnClick(btnList[4]);

• 封装2

    for(var i = 0; i<btnList.length; i++){
        btnClick(btnList[i]);
    }
    
   /* btnClick(btnList[0]);
    btnClick(btnList[1]);
    btnClick(btnList[2]);
    btnClick(btnList[3]);
    btnClick(btnList[4]);*/

• 封装3

  • 问题：每次点击任何按钮，只有最后一个按钮有背景色
  • 原因：每次点击按钮 i = 5，当点击时for已经执行完了
  • 解决：this 指向响应事件元素

    for(var i = 0; i<btnList.length; i++){
        //btnClick(btnList[i]);
        //获取每一个button
        var btn = btnList[i];

        btn.onclick = function () {
            for(var i = 0; i < btnList.length; i++){
                //先清空所有按钮className
                btnList[i].className = '';
            }
            //再对当前响应事件按钮，单独设置
            //btn.className = 'current';

            //console.log(btn);
            //console.log(i);

            //this 代表被点击按钮
            console.log(this);
            this.className = 'current';
        }
    }

十二.隔行变色-光标移动

 <style>
        ul{
            list-style: none;
        }
        .current{
            background-color: yellow!important;
        }
    </style>

//3.遍历数组， 给每个li设置背景色
    for(var i = 0;i < list.length; i++ ){
        //3.1 获取每个li
        var oli = list[i];
        //3.2设置背景色
        oli.style.backgroundColor = (i % 2 == 0) ? 'red':'blue'

        //3.3 给每个li添加事件
        //排他思想：只显示响应事件的那个li为黄色
        oli.onmouseover = function () {
            //alert(111);
            //只有最后一个li显示黄色
            //oli.className = 'current';
            
            //先清空所有li
            for(var j = 0; j<list.length;j++){
                list[j].className = '';
            }
            //再单独设置响应事件的li
            //this 代指响应事件的li
            //注意：className 设置背景， 需要使用 !important 提升页内式优先级
            this.className = 'current'
        }
    }