WebAPI之BOM实战教程#JavaScript的核心技术

收藏

2848人加入学习
价格
限期免费
教学计划
学习有效期
2020-03-22至2022-08-31
课程介绍

JavaScript的WebAPI之BOM操作 BOM是浏览器对象操作, 课程详细介绍了BOM的应用, 重点讲解三方面和浏览器相关的操作。包括window对象的属性操作, window对象的全局性和window对象本身的方法操作, 以及window对象的内置对象属性。

第一关:window对象的成员操作 本关主要介绍什么是BOM, BOM在JavaScript开发中的重要性, 重点讲解了window对象的全局性,以及window对象的本身的成员属性,和成员方法, 通过实例讲解window窗口的操作, 以及open()方法的子窗口的操作, 以及父子窗口之间的操作。

第二关:window对象的对象成员属性 本关讲解了window对象的一些常用内置对象的应用, 包括frames内置子窗口, location位置对象,history历史对象,以及screen屏幕对象的基本操作。同时也讲解cookie的应用, 并通过实例详细演示了每个内置对象在开发前端时的应用。

      window对象的对象成员属性笔记2

      1.window中的对象属性成员

      2.window对象集合

      3.window.screen对象(屏幕) --广告

      4.window.location 对象 (位置对象)

      setTimeout(function () {
      window.location.href="https://www.taobao.com";
      window.location.href="one.html"; //本地路径
      window.location="https://www.taobao.com"; 直接使用此方法 所有浏览器都支持
      },100);
      跳转页面

      window.location.reload();//刷新页面
      5.window.history对象

      6.cookies

      7.window.navigator 访问者的信息

      innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
      innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
      同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。

      window对象的对象成员操作

      1.BOM 浏览器对象模型

      window对象全局性
      全局变量是window对象的属性
      全局函数是window对象的方法
      2.内容加载事件

      //此方法只能使用一次
      window.onload = function () {
      document.getElementById("div1").innerHTML = "abc";
      }

      // [window.] 因为所有内容都是这个对象中的,这是一个默认对象,所以在使用时,有时可以省略window.
      //所有全局声明(变量,函数,对象)默认都是window对象中的成员

      /* var name = "zhangsan";
      //二者一样
      console.log(name);
      console.log(window.name);

      function demo() {
          console.log("this is a test");
      }
      demo();
      window.demo();
      
      function Abc() {
          this.name = "hello";
      }
      var abc = new Abc();
      abc.one = function () {
          console.log(this.name+"##");
      };
      abc.one();
      window.abc.one();*/
      

      //内容加载事件
      //onload 页面加载完成之后在执行里面的代码

      3.window对象中常用属性
      A.window对象的成员属性

      /console.log("浏览器中内容的宽度"+window.innerWidth);
      console.log("浏览器中内容的高度"+window.innerHeight);
      console.log("整个浏览器的宽度"+window.outerWidth);
      console.log("整个浏览器的高度"+window.outerHeight);
      /

      window.screen.availWidth 返回当前屏幕宽度(空白空间)
      window.screen.availHeight 返回当前屏幕高度(空白空间)
      window.screen.width 返回当前屏幕宽度(分辨率值)
      window.screen.height 返回当前屏幕高度(分辨率值)
      window.document.body.offsetHeight; 返回当前网页高度
      window.document.body.offsetWidth; 返回当前网页宽度
      var w = Math.round((window.screen.width-300)/2); 浏览器宽度一半
      var h = Math.round((window.screen.height-300)/2); 浏览器高度一半

      B.window对象中的成员方法

      //解决浏览器兼容的方法
      var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      console.log("浏览器中内容的宽度"+w);
      console.log("浏览器中内容的高度"+h);*/
      
      /*confirm("你确定吗");//确定框 有确定和取消两个按钮*/
      

      这是一条数据 删除

      4.定时器

      A.等待指定时间执行 setTimeout()
      //setTimeout("alert('测试')",2000);
      /function demo() {
      alert('测试1');
      }
      demo();
      setTimeout(demo,2000);
      /
      /var timer1 = setTimeout(function () {
      console.log("222222")
      },2000);
      var timer2 =setTimeout(function () {
      console.log("55555")
      },5000);
      //封装
      function demo() {
      this.name = "abc";
      this.show = function () {
      console.log('-------'+this.name);
      var obj = this;
      var timer3 = setTimeout(function () {
      console.log("88888"+obj.name);
      },8000);
      }
      }
      new demo().show();
      /!
      var timer3 =setTimeout(function () {
      console.log("88888" )
      },8000);*!/

      function ch() {
          clearTimeout(timer2);  //取消定时器
      }*/
      

      //鼠标滑过时间小于100毫秒不变色
      window.onload = function () {
      var obj = document.getElementById("btn");
      var timer = null;
      obj.onmouseover = function () {
      var obj1 = this;
      timer = setTimeout(function () {
      obj1.style.backgroundColor="red";
      },100);

         };
      
         obj.onmouseout = function () {
             clearTimeout(timer);
            this.style.backgroundColor="";
         }
      

      }


      B.重复执行的定时器 setInterval()
      /var i = 0;
      var timer = setInterval(function () {
      console.log("###"+i);
      i++;
      if(i>4)
      clearInterval(timer);
      },1000);
      /

      /* window.onload = function () {
      var dv = document.getElementById("dv");
      var color = ["yellow","blue","green","pink"];
      var i = 0;
      var timer = null;

          dv.onmouseover = function () {
              timer= setInterval(function(){
                  dv.style.backgroundColor = color[Math.floor(Math.random()*color.length)]; //鼠标放上去背景颜色随机改变
                  i++;
                  dv.innerHTML = i;
              },1000)
          };
          dv.onmouseout = function () {
                  clearInterval(timer);
          }
      }
      

      */

      0

      5.open() 子窗口 alt+f4关闭 窗口
      子窗口的操作

      子窗口的特征

      window.open('','_blank','width=100,height=100,top=100,left=100');

      6.父子窗口之间的操作
      //自动识别自己的父窗口
      opener.document.bgColor=color;

      JavaScript内置对象应用

      1.JavaScript数字

      整数有一个范围,15位 ==》15位之后的数字将会不准确
      小数有一个范围,17位
      NaN 非数值 isNaN();
      var x = 100/"abc";
      consle.log(isNaN(x));
      Infinity -Infinity 计算时超出最大可能数范围时返回的值
      /var n = 2;
      while (true){
      n = n
      n;
      if (n==Infinity){
      break;
      }
      }
      console.log(n);*/

      var n = 3/0;
      console.log(n);//==>Infinity  var n = -3/0; ==>-Infinity
      
      var a = 128;//如何转成2,8,16进制
      console.log(a.toString(2));  //2进制
      console.log(a.toString(8));  //8进制
      console.log(a.toString(16));  //16进制
      

      2.javascript数值方法和使用

      /*console.log(parseInt("100.98")); // 100
      console.log(parseInt("10 10")); // 10
      console.log(parseInt("100.98abc")); // 100
      console.log(parseInt("abc100.98")); // NaN

      console.log(parseFloat("100.98")); // 100.98
      console.log(parseFloat("10 10")); // 10
      console.log(parseFloat("100.98abc")); // 100.98
      console.log(parseFloat("abc100.98")); // NaN
      console.log(parseFloat("100e5abc")); //10000000
      
      var x = 100;
      console.log(x.toString());  //100
      console.log(typeof x.toString()); //string*/
      

      / var x = 9.6789;
      console.log(x.toExponential(2)); //四舍五入保留两位小数并进行科学计数法
      /

      / var x = 9.678;
      //适合做商城价格
      console.log(x.toFixed(0)); //10 四舍五入保留两位小数 不足的用0 填补
      console.log(x.toFixed(2)); //9.68
      console.log(x.toFixed(4)); //9.6780
      console.log(x.toFixed(6)); //9.678000
      /

      / var x = 9.678;
      console.log(x.toPrecision()); //原样输出 指定长度的数字
      console.log(x.toPrecision(1)); //1e+1
      console.log(x.toPrecision(2)); //9.7
      console.log(x.toPrecision(4)); //9.678
      console.log(x.toPrecision(7)); //9.6780000
      /

      //MAX_VALUE 返回JavaScript中可能的最大数
      //MIN_VALUE 返回JavaScript中可能的最小数

      console.log(Number.MAX_VALUE); //数值中的最大值
      console.log(Number.MIN_VALUE); //数值中的最小值
      

      3.数学对象方法

      /* //A.PI 圆周率
      var PI = Math.PI;
      console.log(PI);
      //B.四舍五入 round()
      var x = 6.8;
      console.log(Math.round(x)); //7 5入
      console.log(Math.round(6.3)); //6 4舍

      //C.向下舍入 floor()  舍弃所有小数点  ==> 4舍 parentInt()
          返回小于等于参数的最大整数;
      console.log(Math.floor(6.8));  //6
      console.log(Math.floor(6.3));  //6
      
      //D.向上舍入 ceil()  ==>5入  进一取整  返回大于等于参数的整数
      console.log(Math.ceil(6.1));  //7
      console.log(Math.ceil(6.8));  //7
      
      //E.绝对值 abs()
      console.log(Math.abs(6));  //6
      console.log(Math.abs(-6));  //6
      
      console.log(Math.exp(2));  //7.38905609893065  Ex 的值
      console.log(Math.sqrt(9));  //3  开平方
      console.log(Math.pow(2,3)); //2的3次方*/
      

      4.随机数 Math.random() 返回0-1 之间(不包括1)的随机小数

      / var num = Math.random();
      console.log(num);
      var num1 = Math.random()
      10; //10以内的随机小数
      console.log(num1);
      console.log(Math.floor(num1)+1); //包括10 的 10以内的随机整数*/

      //3-8之间的随机数
      

      / function rnum(min,max){
      return Math.floor(Math.random()
      (max-min+1)+min); //max-min+1 包含8
      }
      var num = rnum(3,8);
      console.log(num);

      //随机改变背景颜色
      var colors = ["red","yellow","green","black","blue"];
      document.bgColor = colors[Math.floor(Math.random()*colors.length)];*/
      

      5.日期和时间对象
      //每个月的第一天是星期几
      let week = new Date(cYear,cMonth,1).getDay(); //new Date(cYear,cMonth,1) 获取的 每个月的第一天 .getDay() 获取是周几
      //获取每个月的天数 这里是找到每个月的最后一天
      var days = new Date(cYear,cMonth+1, -1).getDate()+1;

      //创建日期对象 1970年1月1日 是时间的元年
      var date = new Date(); new Date()里面的参数是当前的年月日
      console.log(date);
      6.获取日期方法

      7.设置日期的方法

      //设置日期的方法
      date.setDate(5); //1-31
      //setFullYear(); 年
      //setHours(); 小时
      //setMinutes(); 分钟
      //setSeconds(); 秒
      //setMonth(); 月份
      //setTime(); 设置1970.1.1至今的毫秒数
      //6.获取日期的方法
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var day = date.getDate();
      var week =date.getDay();
      var weeks =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
      var h = date.getHours();
      var s = date.getMinutes();
      var m = date.getSeconds();

      var str = `今天是${year}年${month}月${day}日,${weeks[week]},${h}时,${s}分,${m}秒`;
      document.write(str);
      

      8.javascript 事件操作 事件源 事件 事件处理程序


      function kgd(btn) {
      if(btn.value=="关灯"){
      document.bgColor="black";
      btn.value="开灯";
      }else{
      document.bgColor="white";
      btn.value="关灯";
      }
      }

      谢谢高老师,爱你呦!
      收藏了, 慢慢看!
      没有比高老师讲的再好的了!
      以前觉得BOM有点乱, 听了这个课全懂了。
      支技高老师!
      推荐好课(试听)
      更新

      Java  实战   5275

      最新课程体验中
      限时免费

      升级

      前端  实战   2813

      最新课程体验中
      限时免费

      更新

      PHP  实战   3185

      最新课程体验中
      ¥9.9

      更新

      前端  中级   3195

      最新课程体验中
      限时免费

      更新

      前端  实战   2893

      最新课程体验中
      限时免费

      升级

      UI/UE  中级   1907

      最新课程体验中
      限时免费

      更新

      Linux  中级   2929

      最新课程体验中
      限时免费

      更新

      Python  实战   3703

      最新课程体验中
      限时免费

      辅导猿
      Sample avatar
      xxyd_python

      辅导猿

      Sample avatar
      xxyd_java

      辅导猿

      Sample avatar
      xxyd_ui

      辅导猿

      Sample avatar
      xxyd_php

      辅导猿

      Sample avatar
      xxyd_h5x

      辅导猿

      最新成员
      Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar
      学习资料 内容数量
      任务数量 90 关
      视频教程 270 小时+
      教学案例 630 个+
      辅助资料 270 个+
      练习作业 380 个+
      阶段测评 1400 道+
      最新评价
      Image placeholder

      Flyertutor

      评价:谢谢高老师,爱你呦!

      Image placeholder

      yuruiyin

      评价:收藏了, 慢慢看!

      Image placeholder

      aliang702

      评价:没有比高老师讲的再好的了!

      Image placeholder

      selden

      评价:以前觉得BOM有点乱, 听了这个课全懂了。

      Image placeholder

      Jcai

      评价:支技高老师!