js3-函数变量提升 顶层函数 数据类型转换 Math对象 js

函数变量的提升

• 函数内部变量提升: 函数内部使用变量, 默认情况下, 函数会把下面变量它的声明提升到函数的最上边
• 结论: 同一作用域下, 都存在变量的提升
• 注意: 变量的提升只会提升变量的声明, 变量的赋值没变

顶层函数(全局变量)

• parseInt(): 截取字符串(以数字开头)的整数部分, 再转换number类型

• parseFloat(): 从字符串中截取浮点数,并且会转换成number类型

  var a=1.2000, b=0.123456;
  console.log(a, b);   //a=1.2, b=0.123456
  

• toFixed(x):默认返回字符串类型, 保留x位小数

  • 不支持数字字符串

数据类型转换

• Boolean(): 转换成布尔值
• toString(): 转换成字符串
• String(): 强制转换成字符串null,undefined也可以
• Number(): 面向字符串转换成数字, 把字符串传到括号里

Math对象

• Math.pow(x, y): 返回x的 y次幂
• Math.random(); 返回(0, 1)的随机数
• Math.round(); 四舍五入的整数
• Math.ceil(.6); 向上取整. ceil:天花板的意思
• Math.floor(.6); 向下取整. floor: 地板的意思
• Math.abs(-4); 求绝对值
• Math.max(x, y, z); 返回最大值
• Math.min(x, y, z); 返回最小值

js引入方式

• 外链式 行内式 内嵌式
• 无优先级 因为js引入默认是行内式书写 后写的会覆盖先写的

document.getElementsByTayName()通过标签名获取文档的元素们

• 参数: 标签名 字符串
• 返回值: 伪数组, 存储的根据标签名获取全部标签
  • 伪数组, 有些数组的功能不能用
• 想要获取谁的标签就用点语法点谁
  • eg: 获取ul里的所有li标签: ul.getElementsByTagName('li');

事件的认识以及使用

• 事件的三要素
  • 事件源: 事件发生在谁身上
  • 事件属性: 发生了什么
  • 事件指令: 触发事件后要做的事情
• 应用: 当触发onmouseover事件(事件会在鼠标指针移到指定的对象时发生)时切换图片, 当触发onmouseout事件时切换回原来的照片

换肤案例

• 搭建界面: 例如淘宝产品展示图
• 绑定事件:
  • 1.点击事件函数封装-每张图点击事件(或者使用onmouseover事件), 切换盒子的背景图
  • 2.for循环封装-获取图片标签的数组, 每张图实现函数调用
  • 可以进一步把1.步骤封装到2.步骤里
• 解决思路:
  • 先实现功能
  • 看下代码, 重复性使用调用 能否封装
  • 封装: 哪些代码不变, 变化的当做参数传过来
  • 验证代码是否正确, 可执行性

window.onload文档加载完成后执行

• script标签一般放在head标签里或者放在body结束标签前
• 如果把script代码放在head中会导致功能失效
  • 原因: 浏览器是自上而下解析文档时，遇到script标签时会停止渲染页面，直到加载，解析，执行js完成。
  • 解决方法: 把script代码放在window.onload事件中. 只要窗口加载完成, 就会触发这个方法的调用

数组

• 定义: 数组可以存储大量的数据, 并且这些数据是按一定顺序排列
• 格式: var arr = new Array(1,2,3);
  • 简写var arr = [1,2,3]
  • 索引: 角标, 数组默认角标从0开始.
• 数组取某一元素值
  • 格式: 数组[索引]. arr[0]的值就是1,以此类推
• 往数组中存值(可以是不同类型的数据)
  • 格式: 数组[索引]=44;
• 数组的长度, 数组元素的个数
  • arr.length;
• 数组越界问题, 获取元素超出了数组的范围
  • 否则值为undefined
• 数组遍历结合for循环 , 案例如下:

  • 打印数组元素

      for(var i=0; i< arr.length; i++){
          console.log(arr[i]);    //分别打印出1,2,3
      }
    

  • 隔行变色

  • 全选 反选 不选

    • 界面搭建步骤

      • 获取3个按钮的标签数组, 获取全部input单选框的标签数组
      • 全选按钮点击事件中, 通过for循环设置所有input-checked属性为false. 反选则反之
      • 不选按钮点击事件中, 通过for循环将全部input-checked属性取非值

    • 代码实现

         //全选
         btn[0].onclick = function (){
             com(true);
         }
          //不选
         btn[1].onclick = function(){
             com(false);
         }
         //反选
         btn[2].onclick = function(){
            for(var i = 0; i<oinput.length; i++){
                oinput[i].checked = !oinput[i].checked; //oinput标签数组别忘记索引
            }
         }
         //全选 不选公共函数
         function com(flag){
            for(var i = 0; i<oinput.length; i++){
                oinput[i].checked = flag;
            }
         }