创建数组:
//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. 面试html部分

    1.DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动. DOM是文档对象模型的简称 DOM模型中两个节点可能存在的关系有两种:父子关系,兄弟关系. 添加节点:appendChi ...

  2. 《Swell数学》用户故事

    一.用户故事基础知识: 1. 从用户的角度来描述用户渴望得到的功能. 2. 用户故事是描述对用户有价值的功能,好的用户故事应该包括角色.功能和商业价值三个要素. 3. 一个用户故事只是以客户能够明白的 ...

  3. 简单hibernate框架测试

    -jar包 -日志配置文件: -实体类: package cn.itcast.domain; public class Customer { private Long cust_id; //客户编号 ...

  4. Vmware网络不可达

    1. ifconfig -a   查看当前的网卡 2. cd  /etc/sysconfig/network-scripts/ 3. 打开对应网卡名称文件, 具体修改内容参考(https://www. ...

  5. django之信号

    Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 Model signals     pr ...

  6. 预热ASP.NET MVC 的View

    ASP.NET MVC 的View 预设是Load on Demand(按需加载),也就是说View 第一次要Render 的时候才会去载入跟编译,这个就会造成一个现象,即使Web 应用程式已经完成启 ...

  7. 纯js星级评分

    @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...

  8. in条件后面有多个字段,in后面只能有一个字段 Operand should contain 1 column(s)

    今天在sql测试的时候发现了这个错误:Operand should contain 1 column(s). 原因是in条件后面有多个字段,in后面只能有一个字段.

  9. jdk环境变量配置改变不生效的问题

    在工作中两次遇到jdk配置上的这个问题:将环境变量中的jdk路径修改之后,使用-version查看,版本号还是之前的,也就是说修改未生效.甚至当我将Path变量中的jdk路径配置都删除了之后,使用-v ...

  10. [c++]大数运算---利用C++ string实现任意长度正小数、整数之间的加减法

    本文为大大维原创,最早于博客园发表,转载请注明出处!!! 一.概述 C/C++中的int类型能表示的范围是-2E31-2E31–1.unsigned类型能表示的范围是0-2E32–1,即 0-4294 ...