Javascript学习点

                                     Javascript 笔记

数据类型：

• 数值型
• 字符串
• 布尔型
• null
• undefined

---

变量：

提示：变量是没有类型或者说弱类型的
var：typeof(x) 获取变量类型

---

运算符：

===： 等同判断，内容和类型都相同
==： 值相等就可以，如 '5' 和 5相等

---

循环：

var fruits = ['apple', 'banana', 'orange'];
常规：

for(var index in fruits){
	console.log(fruits[index]);
}

---

Infinity：

Infinity是全局对象 global object 的一个属性

NaN：

是一个全局对象的属性， 其值就是NaN不能通过 == 判断是否一个值是NaN

必须使用Number.isNaN(value)来判断或者isNaN（value）

undefined：

是全局对象的一个属性，一个没有被赋值的变量类型是undefined，
一个函数如果没有返回值，就会返回一个undefined值

通常表示属性或元素不存在

null：

null是一个字面量，它是一个特殊的值,意思是空

全局：

全局属性: undefined,Infinity,NaN
全局函数: isNaN(),parseInt()
构造函数: Date(),RegExp(),String(),Object(),Array()
全局对象: Math,JSON

---

创建对象：

var obj = new Object();
或者
var obj = {
    name:"laoli",
    age:25,
    say:function(){
        return "dfsfd";
     }
     //以逗号隔开
}

//访问对象属性
obj.topic = "java";
obj["real"] = false;
//对象中未声明的属性也可以进行设置
obj.props = {key:"value"}

//构造函数
//构造函数首字母大写
function Point(x,y){
	this.x = x;
	this.y = y;
}
//定义方法
Point.prototype.r = function(){
    return Math.sqrt(
		this.x*this.x + this.y*this.y
	)
}

//实例化
var point = new Point(1,1);
var r = point.r();


//延时执行函数

function moveon(){
	var answer = confirm("Ready!");
	if (answer)
		window.location = "http://www.test.com";
}
//6秒后执行定义的函数
setTimeout(moveon,6000);



//javascript的函数级作用域

//函数内局部变量的的赋值排在声明之前，但
//函数执行时局部变量会将声明提到函数顶部,如
var scope = "global";
function f() {
	console.log(scope);//输出undefined,而不是global
	var scope = "local";
	console.log(scope);//local
}

//实际:局部变量会将声明提到函数顶部
var scope = "global";
function f(){
	var scope;
	console.log(scope);
	scope = "local";
	console.log(scope);

}

  

创建数组：

     new Array();
     new Array(size)
     new Array(e0,e1,e3,...en)
     var arr =  [3,2,..3];


     //访问数组内容：
     array[0]
     array.length

   遍历

  for （var  i in arr）{
      alert(arr[i]);
   } 

  添加元素

attr.push(100);

---

javascript全局方法：

encodeURI( str )： 不会对ASCII 字母和数字进行编码, - _ . ! ~ * ' ( ) 
encodeURIComponent( str )： SCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的

 parseFloat();
 parseInt();

---

javascript基本对象：

Object：  javascript中几乎所有的对象都是Object的实例，所有的对象都继承了Object.prototype的属性和方法
Function： javascript 中，每个函数实际上都是一个Function对象

Array: 数组 对象

     .length 获得数组的长度
     .concat 连接内容或者数据，组成新的数组
     .join(n)用n连接数组的每一项组成字符串，可以是空字符串
     .pop() 删除数组的最后一项数据，并返回删除的数据
     .push() 在数组最后加入新的内容返回新的数组长度
     .reverse() 反转数组

遍历数组
var a = ["1","2","44"];
a.forEach(
	function(item,index,array) {
		alert(item);
);

数组操作：

添加数组元素到末尾
var length = a.push("value");

删除数组末尾元素
var obj = a.pop();

删除数组最前面的元素
a.shift();

添加到数组的最前端
a.unshift("value");

找到某个元素在数组中的索引
a.indexOf("value");

删除某个位置的元素
a.splice(2,1) 删除索引为2的位置的一项
array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)

复制数组
a.slice(start,end)
选择数组的一部分浅拷贝到一个新数组对象，原始数组不会改变，不包括end

String： 字符串对象

     .length 获得字符串的长度
     .charAt(n)  找到索引位置上的字符
     .charCodeAt(n) 找到索引位置上的字符的编码
     .indexOf("m") 找到字符m在字符串中最后一次出现的索引，如果没有找到返回-1
     .lastIndexOf("l");
     .split(“n”) 以字符n分隔字符串，并返回一个数组，空字符串时分隔每个字符
     .slice(1,4);//同上
     .s.slice(-3);
     .substring(n,m) 截取字符串，从索引n开始截取，截取到m个字符（m取不到）
     .replace("h","H"); //返回新串,不影响原串
     .toLowerCase() 把字符串中的字母转化成小写
     .toUpperCase() 把字符串中的字母转化成大写

Math： Math对象

   .pow
   .abs
    round
    floor
    ceil
    random

Date： Date对象

Event： Event对象

Window： Window对象

     alert
     window.confirm("xxx")  确认框  
     window.prompt("请输入")输入框
     window.open("ad.html");

navigator对象: 获得浏览器信息
location对象： location.href=xxx.html;
history对象： 回退，前进

布尔值
javascript的值都可以转换为布尔值
undefined,null,0,-0,NaN,""会转换为false

---

   

事件：

什么是事件：可以被js检测到的行为，本质上是一种交互操作

事件的作用：

•        各个元素之间可以借助事件来进行交互
•        用户和页面之间也可以通过事件类交互
•        后端和页面之间也可以通过事件来交互

事件的传递：

         事件不仅能够和触发者交互，还能在特定的情况下沿着dom tree逐级传递
        和dom tree中的各个节点进行交互，称为事件传递机制

事件的传递方式：
       事件冒泡：从具体到不具体，逐级向上，子和父都绑定了相同的事件

       事件捕获： 从不具体到具体，逐级向下

事件绑定：
       非IE事件绑定

on + 事件 = '函数();函数();'，执行的顺序是绑定时函数书写的顺序
		事件采用冒泡机制

		<div onclick="test();test1();"></div>
		意味着可以绑定多个相同的事件

		事件的移除
		元素.setAttribute('on+事件名', null);如d1.setAttribute('onclick',null);
		事件移除后，仍然会事件传递


		html事件缺陷：耦合性太强了，修改一处另一处也要修改-如修改函数名
		当函数没有加载成功，用户去触发事件，则会报错

DOM0级事件：

在js脚本中直接通过 on + 事件名 绑定的事件，元素.on+事件名 = function(){}

以冒泡机制来处理事件，不存在兼容问题

一个元素的多个相同事件，会被覆盖，按最后一个
意味着同一元素不能绑定多个相同的事件

DOM2级事件：

在js脚本中，通过addEventListener函数绑定的事件

元素.addEventListener(type,listender,useCapture)

		type 事件类型
		listener 监听函数
		useCapture 是否使用捕获，默认false，即冒泡机制
		
		DOM2级事件可以绑定多个函数，执行顺序按函数书写顺序

		btn.addEventListener('click',function(){//a},true);
		btn.addEventListener('click',function(){//b},true);

		var div = document.querySelector('div');
		div.addEventListener('click',function() {
			console.log('div点击了');
		},false);

		如果设置useCapture为true，则事件传递由dom tree的上层开始执行事件，最终到具体元素事件

事件绑定：
       IE事件绑定

•         HTML事件处理程序：等同于非IE事件绑定
•         DOM0级事件：等同于非IE
•         DOM2级事件：通过attachEvent函数绑定事件

  元素.attachEvent(type,listener)		
          type：事件类型 有on
  		listener 监听函数
  
  		如果绑定多个函数，按照函数书写的倒叙执行(IE8是这样)
  
  		btn.attachEvent('onclick',function(){});
  		
  		IE9-11支持 btn.addEventListener，不支持attachEvent
  		IE11绑定EventListener按照函数书写的顺序执行
  		
  		事件的移除
  
  			元素.detachEvent(type,listener)
  			匿名函数无法移除
  
  			d1.detachEvent('onclick',test);

事件的浏览器兼容 

		<script type="text/javascript">
		
			var eventObj = {
				
				addEvent:function(ele, type, listener){
					if (ele.addEventListener) {//判断是否有该属性
						console.log('event listener');
						ele.addEventListener(type,listener);
					}else {
						console.log('event');
						ele.attachEvent('on'+type, listener);
					}
				},
				
				removeEvent:function(ele,type,listener) {
					if (ele.removeEventListener) {
						ele.removeEventListener(type,listener);
					}else {
						ele.detachEvent('on'+type, listener);
					}
				}
			
			}

			function test() {
				eventObj.removeEvent(div,'click',test)
				console.log('test');
			}

			var div = document.querySelector('div');
			eventObj.addEvent(div,'click',test);
			
		</script>		

鼠标事件类型

•     click 鼠标点击
•     dblclick  双击事件,双击事件会触发单击事件
•     mousedown 鼠标按下，会触发单击事件
•     mounseup 鼠标抬起 
•     mounsemove 鼠标移动
•     mouseenter 鼠标移入(不冒泡)
•     mouseleave 鼠标移出(不冒泡)

	元素.on事件 = function(){  }
	元素.addEventListener('事件',function(){});

Event

    保存事件发生时的相关信息
    event是一个容器，存放触发的事件本身，可作为形参给函数

•     event.clientX  事件发生时的X坐标
•     event.clientY 事件发生时Y的坐标
•     event.target 事件源
•     event.type 事件类型
•     event.bubbles 是否当前事件是否支持冒泡，与是否使用冒泡无关
•     
•     event.eventPhase 事件传导至当前节点时，处于什么状态
•         1 事件处于捕获状态
•         2 事件处于真正的触发者
•         3 事件处于冒泡状态
•     
•     event.target 返回事件真正的触发者
•     event.currentTarget 返回事件的监听者，触发的事件绑定到了哪个节点，就返回谁
•     event.stopPropagation() 阻止事件从当前节点传播到下一个节点，不会影响同一节点上的其他事件句柄
•     event.preventDefault() 取消当前节点的默认行为，如超链接的点击跳转行为，该方法没有返回值

	a_link.onclick = function(){
		event.preventDefault();
	}

    event.cancelable 属性用来判断当前节点能否使用preventDefault方法来取消默认行为
    如果可以返回true,否则返回false

	a_link.click = function(){
		console.log(event.cancelable);
	}

IE event 对象常用方法属性

    非IE下event的值默认为undefined,而IE中event的值默认为null

    非IE下可以通过DOM0或DOM2的参数来使用event,
    而IE中DOM0无法使用传参的形式来使用event(可以直接用event),DOM2可以

兼容性解决

	e为传参	
	var eve = e||window.event;

	
	srcElement 属性
	事件真正的触发者，等同于非IE下的target

	var target = eve.srcElement||eve.target;

	cancelBubble属性
	阻止事件在当前节点上的冒泡行为，类似非IE下的stopPropagation
	stopPropagation阻断事件传递，而cancelBubble属性则阻断事件冒泡

	event.cancelBubble = true 取消冒泡
	
	returnValue属性
	设置是否取消当前节点的默认行为
	作用类似于非IE下的preventDefault方法
	event.returnValue = false 取消默认行为

文档事件 - 焦点事件

    加载成功 load、error
    dom加载成功时 domcontentloaded
    页面卸载 beforeunload
    文档加载状态判断时间 readystatechange
    文档大小发生改变时的回调事件 resize

    load 节点加载成功
    error 节点加载失败

load 

在head中为页面元素添加点击事件，通过window得onload事件
解决了，由于网页加载未完成，而获取到的页面元素失败问题

	整个页面加载完成才会执行
	window.onload = function() {

		var div = document.querySelector("#someid");
		div.onclick = function(){}
	}

documentloaded 

先执行domcontentloaded，后执行 load

beforeunload: 页面卸载：离开，刷新，关闭页面

	window.onbeforeunload = function() {
		event.returnValue='';
		return '是否离开';	
	}

readystatechange

文档加载状态判断,用于在网页的刷新等, 当document的readyState改变时触发

document 节点中拥有一个属性readyState
    有三个可能的值：

•         loading 加载外部资源
•         interactive 加载外部资源
•         complete 加载完成

    有两次状态改变，也就是会触发两次

	document.onreadystatechange = function() {

		console.log(document.readyState);
	}

resize 

文档大小发生改变

	window.onresize = function(){
		
	}

焦点事件

常用在表单中的验证，如设置span(初始display:none)
    获得焦点时 span提示框 display = 'inline-block'
    innerText = '提示内容'

    失去焦点时，验证加span提示

    正在和用户交互的节点称为焦点
    blur 失去焦点
    focus 获得焦点
    
    两个事件，均不支持冒泡，仅在当前节点触发
    绑定 addEventListener；on+事件

滚动事件

scroll事件会在【文档或元素】发生滚动操作时触发

    属性scrollTop,scrollLeft 可读写，表示文档滚动的距离(没有单位)

    IE document.documentElement.scrollTop/Left
    非IE document.body.scrollTop/Left

	window.onscroll = function(){

		var top =  document.body.scrollTop|document.documentElement.scrollTop;
		var left = document.body.scrollLeft|document.documentElement.scrollLeft;

		console.log(top + left );
	}

对于文档 scrollTop/Left 表示滚动的距离，没有单位
	
	设置
	document.body.scrollTop||document.documentElement.scrollTop

	btn.onclick = function() {
		timer = setInterval(function(){//使用定时器
				
			//获取滚动条到顶部的举例
			var distance = document.body.scrollTop||document.documentElement.scrollTop;
			distance = distance*0.8;
					
			document.body.scrollTop = distance;
			document.documentElement.scrollTop = distance;
					
			if (distance == 0) {//如果滚动条到顶部，则停止
				clearInterval(timer);
			}
		},50);
	}

键盘事件

• keypress 键盘按下一次，按住不放，事件会被连续触发
• keydown 按键按下，按住不放，事件会被连续触发
• keyup 按键抬起    

    键盘事件支持事件冒泡，因此可以将键盘事件绑定到具体触发者的父级上

    判断按了什么键，常见的回车13，空格8
    event.keyCode 编值码

		name1.addEventListener('keydown',function(event) {
			console.log('执行');
			console.log(event.keyCode);
		})

			
		pass.onkeydown = function() {
			console.log('执行');
			console.log(event.keyCode);
		}	

keydown和keypress 的区别

        keypress只要用来捕获：数字(包括shift+数字)、字母(大小写)，小键盘等
        能够显示在屏幕上的字符，但不能对功能键 的正常响应
        
        keydown和keyup通常可以捕获键盘除了PrScrn所有按键

        捕获长度
            keypress 只能捕获单个字符
            keydown和keyup可以捕获组合键

        在keyCode上
        keydown，keyup 获取的是字母的大写的编码
        keypress获取的是字母本身的编码，如a,前者就是65，或者是97

        所有功能按键，如ALT,ENTER都不能被keypress识别，只能被keydown识别

        keypress不区分主键盘和小键盘数字字符
        keydown和keyup区分

触摸事件 

    touchstart 手指触摸屏幕时触发
    touchmove 手指在屏幕上滑动时触发
    touchend 手指从屏幕上移开时触发
    *touchcancel 系统停止跟踪触摸时触发，如电话或弹出消息
    
    无特殊说明，均为冒泡，【只能用 DOM2 绑定】

    event对象包含
    touches：Touch对象的数组，当前跟踪的触摸操作,所有触摸点列表
    targetTouches:特定于事件

    Touch触摸对象的属性
        clientX
        clientY

    访问event.touches[i].clientX

表单事件

•     submit 提交事件
•     change 发生改变的时候
•     reset 重置事件

页面属性相关

    innerHTML 指的是从对象的起始位置到终止位置的全部内容，包括html标签
    innerText 指的是从起始位置到终止位置的内容，但他去除html标签，如<p>内容</p>，只取内容

    元素.setAttribute("属性","值");
    元素.getAttribute("属性")

    创建节点
    document.createElement("div");
    
    加入节点的方法
    parentNode.appendChild(childElement);末尾追加方式插入
    parentNode.insertBefore(newNode,beforeNode) 在指定节点前插入新节点
    parentNode.removeChild(childNode);

    替换节点的方法
    parentNode.replaceChild(newChild,oldChild)


    var a1 = document.getElementById("a1");
    var ele = document.createElement("div");
    ele.innerHTML = '<p>我是一个p</p>';
    a1.appendChild(ele);


    //创建HTML元素示例
    //注意:需要将该代码放到文档后面,防止未加载
	function createDIV(content){
		var myDIV = document.getElementById("my-div");
		if (!myDIV){//获取为null,则创建
			myDIV = document.createElement("div");
			myDIV.id = "my-div";
			myDIV.innerHTML = "<h1>Show Content</h1>";
			document.body.appendChild(myDIV);
		}
		
		var pre = document.createElement("pre");
		var text = document.createTextNode(content);
		pre.appendChild(text);
		myDIV.appendChild(pre);
	}
	createDIV("test");


    // 操作元素的样式
	// highlight是已定义好的样式
	function highlight(e){
		if (!e.className) e.className = "highlight";
		else e.className += "highlight";
	}

	//所占的空间也随之消失
	element.style.display = "none";
	
	//隐藏,所占空间不消失
	element.style.visibility = "hidden";

模式匹配

在两条斜线之间的文本构成一个正则表达式直接量

/^HTML/ 以HTML开始的字符串
/[1-9][0-9]*/ 匹配一个非零数字，后面任意个数字
/\bjavascript\b/i 匹配单次javascript,忽略大小写