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

第五章JavaScript的更多相关文章

  1. 第五章 JavaScript对象及初识面向对象

    第五章   JavaScript对象及初识面向对象 一.对象 在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. 在JavaScript对象分为内置对象和自定义对象,要处理一些 ...

  2. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  3. 第五章 javascript编程可养成的好习惯

    用户点击某个链接时弹出一个新窗口javascript使用window对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:window.open(url,name,features)url: ...

  4. 读《编写可维护的JavaScript》第五章总结

    第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...

  5. Javascript权威指南——第二章词法结构,第三章类型、值和变量,第四章表达式和运算符,第五章语句

    第二章 词法结构 一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮(第五章完结)

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

  7. 为什么我要放弃javaScript数据结构与算法(第五章)—— 链表

    这一章你将会学会如何实现和使用链表这种动态的数据结构,这意味着我们可以从中任意添加或移除项,它会按需进行扩张. 本章内容 链表数据结构 向链表添加元素 从链表移除元素 使用 LinkedList 类 ...

  8. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  9. JavaScript DOM编程艺术-学习笔记(第五章、第六章)

    第五章: 1.题外话:首先大声疾呼,"js无罪",有罪的是滥用js的那些人.js的father 布兰登-艾克,当初为了应付工作,10天就赶出了这个js,事后还说人家js是c语言和s ...

随机推荐

  1. 考研计算机复试(广东工业大学C语言复试2014~2017笔试题)(精华题选)

    1.C语言中,全局变量的存储类别是() A.extern B.void C.int   D.static 2.静态变量: (1)static 外部变量===>在函数外定义,只能在本文件中使用 ( ...

  2. 12月4日学习爬虫007.使用Urllib模块进行简单网页爬取

    笔记如下: 1.https是http加强版协议(安全协议)http(普通网络通信协议) 爬数据 如果爬https发现和理想中的数据不同,可以改为http 直接去掉s即可 2.使用Urllib爬取简单网 ...

  3. Tensorflow实战系列之五:

    打算写实例分割的实战,类似mask-rcnn. Tensorflow实战先写五个系列吧,后面新的技术再添加~~

  4. struts拦截器的知识

    如何使用struts2拦截器,或者自定义拦截器.特别注意,在使用拦截器的时候,在Action里面必须最后一定要引用struts2自带的拦截器缺省堆栈defaultStack,如下(这里我是引用了str ...

  5. 2018-2019-2 20175224 实验二《Java面向对象程序设计》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:艾星言 学号:20175224 指导教师:娄嘉鹏 实验日期:2019年4月17日 实验时间:13:45 - 15:25 实验序号:24 ...

  6. oraclesql语句笔记

    1. ORA-00947:Not enough values 原因:values没有写足够的值与select()中的字段对应 2.查看一张表中共有多少个字段 select count(*) from ...

  7. mybatis(2)--配置mybatis实现连接数据库查询

    1.新建项目 2.在src下创建一个xml文件 比如这xml文件名为 mybatis.xml 一下为初始xml文件代码 <?xml version="1.0" encodin ...

  8. Vue的计算属性,监视属性代码理解

    1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...

  9. 模拟ios应用加载页面

    1:设置应用程序系统主界面加载接口为空:Main interface=null; 2: 在AppDelegate实现didFinishLaunchingWithOptions方法 - (BOOL)ap ...

  10. MySQL80修改密码

    mysql> update user set password=password('123') where user='root' and host='localhost'; ERROR 106 ...