Javascript基础回顾（1）

Js书写步骤

1. 先实现布局
2. 想出实现原理
3. 了解js语法，写出对应的代码

隐藏一个页面元素不显示

1. display:none
2. visibility:hidden
3. opacity:0
4. width/height=0
5. 用一个空白div遮盖
6. 用定位定在屏幕外边
7. 利用margin设置负值
   ……

获取元素

1. getElementById()
2. getelementsByTagName()
   获取到的是一个集合
   集合:类似于数组，但数组声明且只能存放一种类型，集合不声明且可存放多种类型

事件

鼠标事件，键盘事件，html事件

常用类型

1. oninput 输入值就触发
2. onfocus获取焦点时触发的事件
3. onblur失去焦点时触发的事件
4. onchange内容改变事件，且失去焦点
5. onresize窗口改变
6. onreload重载页面
7. onscroll滚动页面

注册事件处理程序

1. 普通的添加
   同一类型事件添加多次时，只执行最后添加的事件
2. 使用addEventListener()方法注册事件

mybutton.addEventListener('click', function() { 
alert('Hello World'); 
}, false);

同一类型事件可添加多次

js操作属性注意事项

1. JS属性中不能出现"-",如 font-size应该写成 fontSize
2. class是js中的关键字，在js中动态添加类要用到className
3. 不能用相对路径做判断，如 img中的src属性，还有href属性
4. 不能用颜色值做条件判断如 red #f00 rgb(255,0,0)
5. 尽量不用innerHTML值做判断
6. 在js中 .和[] 都表示 “的”
   .点后面的值无法修改
   [] 里面的值可以修改，js中允许将.换成[]

for循环四部曲

1. 初始化变量
2. 条件判断
3. 执行代码
4. 条件更新

this指向

1. this总是指向函数的直接调用者
2. 在事件中，this指向触发这个事件的对象
3. 如果有new关键字，this指向new出来的对象

数据类型

简单数据类型/原始数据类型

1. undefined 未定义
2. null 空值
3. boolean 布尔值
4. string 字符串
5. number 数值型
6. symbol 原始值ES6中讲

复杂数据类型/引用数据类型

object包含的有object/array/function/Date/Math/window/global

类型转换

1. 强制类型转换：Number()/parseInt()/parseFloat()/toString()/String()/Boolean()
2. 隐式类型转换：

• -、*、/、%、可以将字符串数字转换成数值型的数字
• +可以将一个数字+一个空的字符串转换成字符串类型

"== 和==="的区别

• ==相等 只要值相等条件成立；==有隐式类型转换作用
• === 全等，值相等，数据类型也要相同

console.log([1]==[1])//False

1. 原始值的比较是值的比较，类型的比较
2. 对象的比较并非值的比较,而是引用的比较
   即使两个对象包含同样的属性及相同的值，它们也是不相等的
   即使两个数组各个索引元素完全相等，它们也是不相等的
   当且仅当它们引用同一个基对象时，它们才相等

break和continue的区别？

1. break结束代码，后面代码不再执行
2. continue 结束代码，结束的是本次循环，如果条件满足，继续执行后续代码

什么是真？什么是假?

1. true、非零数字、非空字符串、非空数组、函数、对象
2. false、零、NaN、null、undefined、空字符串、数组、对象

函数

1. return 函数返回值，就相当于函数本身；return也有终止代码的作用
2. arguments 函数天生自带，获取实参列表的，可以得到一个集合
   arguments不是数组，类数组

call和apply

• 相同点：都可以改变函数内部this指向
• 不同点：call传递参数直接传参，apply以数组形式传递参数
  call：将函数作为对象的方法来调用
  apply：将函数作为对象的方法来调用

fun.call(ele,x,y)
fun.apply(ele,[x,y])//this指向更改为ele

变量提升/函数提升

console.log(a);
var a=100;
 console.log(a);
 
 //等价于
 
 var a
 console.log(a);
 a=100;
 console.log(a);

闭包

闭包指的是有权访问另一个函数作用域变量的函数

function fn(){
var num=100;
	return function(){
		console.log(num)
	}
}
fn()()

Math对象

Math 是一个内置对象， 它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的.

1. Math.ceil(x) 向上取整（天花板函数）
2. Math.floor(x) 向下取整（地板砖函数）
3. Math.max(x,y,z……) 求多个数值中的最大值
4. Math.min(x,y,z……) 求多个数值中的最小值
5. Math.round(x) 四舍五入，结果为整数
6. Math.random() 求0~1之间随机数，包含0，不包含1，[0,1)
7. Math.pow(x,y) 返回x的y次方
8. Math.sqrt(x) 开平方

Date对象

date对象的创建方式

1. new Date() 创建当前时间对象
2. new Date(2020/01/02 00:00:00) 创建某个时间点的对象

date对象的常用方法

1. getFullYear() 获取时间对象的年份
2. getMonth() 获取时间对象的月份
3. getDate() 日期，哪一日
4. getDay() 星期，返回一周的星期数（0~6）
5. getHours() 小时
6. getMinutes() 分钟
7. getSeconds() 秒数
8. getMilliseconds() 毫秒
9. getTime() 返回1970年1月1日至今的毫秒数

定时器

超时定时器

setTimeout()

间歇定时器

setInterval()

Math对象简单应用（100~999随机数）

Math.floor(Math.random()*(999-100+1))+100

Date对象简单应用（倒计时）

var date1=new Date("2020/01/19 00:00:00")
		setInterval(function(){
			var date2=new Date();
			var milli=date1.getTime()-date2.getTime();
			var _day=Math.floor(milli/1000/60/60/24)
			milli=milli-_day*24*60*60*1000;
			var _hour=Math.floor(milli/1000/60/60)
			milli=milli-_hour*60*60*1000;
			var _minutes=Math.floor(milli/1000/60)
			milli=milli-_minutes*60*1000;
			var _secend=Math.floor(milli/1000)
			document.getElementById("box").innerHTML="距离过年还有"+_day+"天"+_hour+"时"+_minutes+"分"+_secend+"秒"		
		},1000)

字符串

var str="Abcdefghigked";
			
//字符串有length
console.log(str.length)

//charAt(index)  找到子串，如果查询不到返回空值
console.log(str.charAt(3))

//charCodeAt(index) 得到子串的unicode编码，不传参时，默认字符串第一位
console.log(str.charCodeAt())

//indexOf("子串",n) 获取子串的索引位置，如果查询不到返回-1;n代表从索引n往后查找子串，如果n为负数从后往前查找
console.log(str.indexOf('d',6))
console.log(str.indexOf('d',-3))

//lastIndexOf("子串",n)  从后往前查找，n代表从索引n往后查找子串，如果n为负数从后往前查找
console.log(str.lastIndexOf("e",4))