第五章JavaScript

创建数组：
//1.字面量方式创建 (推荐大家使用这种方式创建数组 简单粗暴)

var colors = ['red','color','yellow'];
console.log(colors)

  //空数组
  var emptyArray = [];

  //2.使用构造函数的方式创建  使用new关键词对构造函数进行创建对象
  var colors2 = new Array();

  var colors3 = new Array('white','red','orange')
  console.log(colors3)

数组的基本操作：

//1.数组的合并  concat()
      var north = ['北京','山东','天津'];
      var south = ['东莞','深圳','上海'];

          var newArr = north.concat(south);
          console.log(newArr)

          //2.将数组转换成字符串
          var score = [98,78,76,100,0];

          //toString() 直接转换为字符串  每个元素之间使用逗号隔开

          var str = score.toString();
          console.log(str)

          //join()方法  将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串

          var str2 = score.join('|')
          console.log(str2)

          //3.查找下标
          //indexOf() 正向查找
          //如果查找的值不在数组中则返回-1
          var index = score.indexOf(101)
          console.log(index)

          //反向查找 

          var lastIndex = score.lastIndexOf(78);
          console.log(lastIndex)

          //数组的排序    
      var names = ['alex','xiaoma','tanhuang','abngel'];

      //4.反转数组
      var reverseNames = names.reverse();
      console.log(reverseNames)
      console.log(names)

      //sort():按照26个字母排序 数组

     var enames  = names.sort();
     console.log(enames)
     console.log(names)

//   if(enames===names){
//    alert(2)
//   }

     //5.移除元素和添加元素
     //移除我们的第一个元素 返回的结果是移除的第一个元素 原来数组中的第一个元素 被移除掉了  
     var firstName = names.shift()
     console.log(firstName)
     console.log(enames)
     console.log(names)

     //unshift()向数组的开头添加一个或者多个元素，并返回新的长度
     var newLength = names.unshift('shanshan');
     console.log(newLength)
     console.log(names)

     //push() pop()

     //push()  向数组的末尾添加一个或者多个元素，并返回新的长度
     var newNames = names.push('老村长','嘿嘿嘿')
     console.log(newNames)
     console.log(names)

     var a = names.pop()  //a 是被删除的元素
     console.log(a)
     console.log(names) //pop()删除数组的最后一个元素

     var str = 'hello luffy';

     console.log(str.split('').reverse().join(''))

函数：

//1.js中的函数的声明  记得：有函数的声明 就一定有调用
      function add(){
//       alert("函数被调用了")
         //执行的一些操作
      }

      //2.函数的执行
      add()

      /*
      //二,声明函数的时候带参数
      function add2(a,b){
         alert(a+b)
      }

      add2(3,4)
      */
      //三,声明函数的时候带参数，并且有返回值
      function add3(x,y){
         return x+y;
      }

构造函数：

//1.对象的创建

      //1.字面量方式创建 推荐使用这种方式  简单直观
      //key:value
      var stu = {
         name:'alex',
         age:22,
         fav:'鸡汤'
      }
      console.log(stu)
      console.log(window)
      //点语法: 包括get方法和set方法
      var n = stu.name;
      console.log(n)

      stu.age = 34;
      console.log(stu.age)

      //2.使用Object()创建对象
//    function add(){
//       
//    }
//    add()

//    Object() 构造函数  1.首字母大写  碰见构造函数 要想创建对象 new

      var obj = new Object();

      obj.name = 'xiaomage'
      console.log(obj)

      //------------构造函数------------------

       //1.函数名首字母要大写
       //2.构造函数不需要return
       //3.为对象添加成员变量： this.name  = 'alex'

       var Stu = function(){
             this.name = '武sir';
             this.age = 18;
             this.fav = function(){
                console.log('泡妹子')
             }
       }

       //创建这个对象
       var s = new Stu();
       console.log(s)

       var s1 = new Stu();
       console.log(s1)

       //弊端：每次new一个对象 里面的成员变量和方法都一样

       //推荐大家使用的构造函数的方式

       function Animal(){
             this.name = 'jingjing';
             this.age = 12
//           this.fav = function(){
//              console.log(this.age)
//           }

       }

       Animal.prototype.showname = function () {
          //执行相应的操作
             alert(this.name)
       }
       Animal.prototype.showname2 = function () {
             alert(this.name)
       }
       Animal.prototype.showname3 = function () {
             alert(this.name)
       }
       Animal.prototype.showname4 = function () {
             alert(this.name)
       }

       var a = new Animal()

       a.showname()

Math方法：

var x = 1.234
//天花板函数  大于等于 x，并且与它最接近的整数 2
var a = Math.ceil(x)
console.log(a)

//地板函数  小于等于 x，并且与它最接近的整数 1
var b = Math.floor(x)
console.log(b)

//求 两个数的最大值 最小值

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

//经常使用 random 0-1之间的随机数 包含0 不包含1
var ran = Math.random()

console.log(ran)

//100-200之间的随机数
var c = 100+Math.random()*100
console.log(c)

//min - max之间的随机数  min+Math.random()*(max-min)

//5-15
   var d = 5 + Math.random()*(15-5)
   console.log(d)

 
定时器的用法：

var n = 0;
var time = null;

time = setInterval(function(){  //每隔一秒运行函数
   n++;
   console.log(n)

},1000)

//setTimeout(code,1000)

setTimeout(function(){
   console.log(time)

   window.clearInterval(time)　　//五秒后停止运行time函数
},5000)

 JS Dom
document：
在script JavaScript里面设置

//获取dom元素
var btn = document.getElementById('btn')

//创建divdom元素
var oDiv = document.createElement('div')
var oP = document.createElement('p')
var oSpan = document.createElement('span')

//增加子节点

oDiv.appendChild(oP)
oP.appendChild(oSpan)

//在元素里添加点击效果

btn.onclick = function(){
//       alert(111)
         //动态的添加到body中一个div
         console.log(this)
         this.parentNode.insertBefore(oDiv,btn)   //添加元素的方法，第一个参数时新添加的元素，第二个参数时在哪个前面添加

      }
      oSpan.onclick = function(){
//       removeChild

         oDiv.parentNode.removeChild(oDiv)　　　　//removeChile方法时移除子节点
      }

 
节点的创建：

var nDiv = document.createElement('div')

获取：

var Box = document.getElementsByClassName('box')[0]

设置：

nP.innerHTML = '模拟弹出框'

nP.appendChild(nSpan)

 
BOM:Browser object model 浏览器对象模型

//核心  浏览器
//输出   屏幕的宽高 滚动的宽高  setInterval ..  window.open() close() location
//1.alert(1)

//2.用于浏览器的调试
console.log('路飞学城')

//3. prompt('message',defaultValue)
var pro = prompt('路飞学城','33333');

console.log(pro)

//4 confirm() 如果点击确定 返回true 如果点击取消 返回false

var m = confirm("学习Bom");
console.log(m)
function printLuffy(){
   print()
}

function findLuffy(){
   var m2 = confirm("学习Bom");
   find(m2);
}

open和close

oBtn.onclick = function(){
//       open('https://www.baidu.com')

         //打开空白页面
         open('about:blank',"_self")
      }
      closeBtn.onclick = function(){
         if(confirm("是否关闭？")){
            close();
         }
      }

其他方法：

//返回浏览器的用户设备信息
      console.log(window.navigator.userAgent)

//    console.log(window.location)

      //经常使用的一个方法，实际就是调用了window下的location的href属性，强行修改，这样就可以实现跳转
//    window.location.href = 'https://www.luffycity.com';

      //全局刷新  ===》 局部刷新   尽量少用这个方法    
      //3秒后整个页面全部刷新
      setTimeout(function(){
         window.location.reload();
      },3000)

client属性

* client
*   clientTop 内容区域到边框顶部的距离
*   clientLeft 内容区域到边框左部的距离
*   clientWidth 内容区域+左右padding   可视宽度
*   clientHeight 内容区域+ 上下padding   可视高度
* */

 获取屏幕的可视区域：

window.onresize = function(){

   console.log(document.documentElement.clientWidth);
   console.log(document.documentElement.clientHeight);
}

offset：

//占位宽 高 Top Left  

/*
 * offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值
 * offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值
   offsetWidth 内容+padding+border
 * */

windown.onload:必须等到页面内包括图片的所有元素加载完毕后才能执行

 
innerHTML：这个所有的文本
innerText：当前标签的文本