创建数组：
//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：当前标签的文本
