【无标题】

目录：

一：js基础

二：js语言

三：函数

四：事件

内容：

一：js基础：

1、javascript的基本定义：

JavaScript是运行在客户端的脚本语言
脚本语言是运行过程中由JavaScript解释器逐步执行解释

2、JavaScript的作用：

1：表单动态校验
2：网页特效
3：游戏开发
4：服务端开发
5：桌面程序开发

3、浏览器如何执行JavaScript

浏览器分为两部分：渲染引擎，js引擎
渲染引擎：用于解析CSS与HTML
js引擎：称为js解释器，用于读取js代码，对其处理运行

4、JavaScript的组成：

1：JavaScript语法
2：页面文档对象模型（DOM）
3：浏览对象模型（BOM）

5、JavaScript作用域

1、含义
作用域是一段代码中所用名字并不总是有效可用的，限定这个名字的可用性代码范围就是该名字的作用域（代码名字在某个范围内起作用）
2、分类
全局作用域、局部作用域
3、变量作用域
全局变量：在全局作用下的变量
局部变量：只能在函数内部使用
注意：
1、如果在函数内部无声明，直接赋值也称全局
2、函数的形参也可看作局部变量
3、全局变量只有浏览器关闭会销毁，占内存
4、局部变量但程序执行完就销毁
作用域链：
内部函数可以访问外部函数，用链式查找决定哪些数据能被内部函数访问

6、JavaScript预解析

预解析分类：
1、变量预解析:把所有变量提升到当前作用域的最前面
2、函数预解析：把所有函数提到当前作用域的最前面

var num = 10;           ==  var num;
console.log(num);           num=10;
fun();						console.log(num);
 function fun() {  			function fun(){
console.log(num);			console.log(num);	
											}									
		}                    fun()

7、JavaScript对象

1、对象（属性+方法）
含义：是一种无关相关属性和方式的集合
原因：保存一个值时，可以用对象，保存多个值（一组值）时，可以用数组保存一个完整信息
2、创建对象的三种方式

• 1、对象字面量：

<script>
var obj = {
uname:'张三'，
age:18，
sayHi:function(){
console.log('Hi');
} 
}
</script>

注意：
1、里面的属性采用键值对方法
2、多个属性或则方法中间都好隔开
3、方法冒号后面跟的是一个匿名函数
使用对象：
1、调用对象的属性：
对象名.属性名

console.log(obj.uname)

对象名【'属性名‘】

console.log(obj['uname']);

2、调用对象方法：
对象名.方法名

obj.sayhi();

• 2、使用new object 创建对象

<script>
var obj = new object();
obj.uname='张';
obj.age=18;
obj.SayHi=function(){
};
</script>

注意：
1、利用等号赋值，添加属性与方法
2、每个属性与方法之间用分号隔离

• 3、用构造函数创建对象
  构造函数创建对象可以重复利用这些相同的代码，是一种特殊的函数，主要用语初始化对象，为对象成员变量赋初值，预new运算符共同使用，将对象中一些公共的属性和方法抽出来

创建对象

function 构造函数名（）{
	this.属性名 = 属性值；
	this.方法 = function(){
			}
}
调用  new 构造函数名（）

注意：
1、构造函数名首字母大写
2、构造函数不用return可返回结果
3、调用构造函数需要使用new
4、只要使用new就创建了一个对象

<script>
	function Star (uname,age){
	this.name = uname;
	this.age = age;
	this.sing = function sang(){};
	}
	var ldh = new Star ('刘德华',18);
	console.log(ldh.name);
	console.log(ldh.sang('冰雨'));
</script>

二、js的语言

1、js的输入输出语句：

alert（msg）：浏览器弹出警示框（归属：浏览器）
consol.log（msg）：浏览器控制台打印输出信息
prompt（info）：浏览器弹出输入框，用户可以输入

2、变量

变量的概述
用于存放数据的容器，可通过变量获取数据，甚至可以修改
本质：在内存中申请一块存放数据的空间
变量的使用
1：声明变量：

var  变量名

2、赋值变量：

变量名 = 数据

3、变量的初始化：

var 变量名 = 数据

<script>
	var age;
	age = 10;
	console.log(age);
	age = 20;
	var name, var address;
</script>

声明变量的特殊情况：
1：只声明不赋值，结果undefined；
2：只赋值不声明，结果无影响；
3：不声明不赋值，结果报错；
变量命名规范：
1：有数字、字母、下划线、美元符号组成
2：变量名严格区分大小写，不能以数字开头，不能为关键字
3：变量名由意义，首字母小写后面的单词的首字母大写

3、数据类型

数据类型概述：
js的变量数据类型，只有在程序执行过程中，根据等号右边的值来确定
数据类型的分类：
简单数据类型：

Number:  数字型/包含整形    0（默认值）
Boolen:  布尔型            false（默认值）
String： 字符串            " "（默认值）
undefined：声明变量未赋值
null：   空

1、数字型：

二进制：以数字0，1 组成
八进制：以 "0" 开头，var sum = '012';
十六进制：以"0x"开头，var sum = '0x12';

数字型变量的范围：

最大值：alert（Number.MAX_VALUE)
最小值：alert（Number.MIN_VALUE)
无穷大：alert（Infinity）
无穷小：alert（-Infinity）
非数值：alert（NaN）：Not a Number(非数值返回false)

2、字符型（string)

• 字符串引号嵌套双引号，（外双内单，外单内双）
• 字符串转义符：换行符：\n 斜杠：\
  单引号：’ 双引号：" 缩进：tab 空格：\b
• 字符串长度：length

var str = 'you are mine';
console.log(str.length);

• 拼接：
  字符串可用 " +" 进行拼接
  当拼接中有一个字符串时，就直接进行字符串拼接（数值相加，字符相连）

console.log ('沙漠'+'骆驼')
输出结果：沙漠骆驼
console.log（'1'+2）
输出结果：12；
console.log (1+2)
输出结果：3；

3、undefined null型

var age = undefined;
age+'pink'=undefinedpink
age+1=NaN;
null+1=1;

获取变量的数据类型：(type)

<script>
	var age = 18;
	console.log(type.age);
</script>

数据类型的转换

• 转换为字符串：

1：tostring（）

var age = 18；
console.log (age.tostring() );

2、string（）

var age = 18；
console.log (string（age）);

3、采用字符串’+'进行拼接

var age = 18；
console.log (age + ' ');

• 转换为数字型：

1 、parseInt（string）：转为整型

var str = 'you are mine';
console.log ( parseInt(str));

2、parseFloat(string) ：转为浮点型
3、Number（变量）
4、利用算术运算：- * /（隐式转换）

• 转换为布尔型：
  Boolean（变量）：代表空、否定的值被转换为false，其余转换为true；
  （null、’ ’ 、NaN、undefined）

3、运算符

算术运算符

运算符：+ — * / %

优先级：先乘除，后加减
注意：不能拿两个浮点数进行比较，有误差
表达式和返回值
由数字、变量、运算符组成的式子
递增和递减运算符

递增：（ ++ ）  递减（ -- ）
++age 前置递增   age++后置递增

比较运算符
两个数据比较时使用的运算符，会返回一个布尔值
‘==’（会默认转换数据类型）

‘===’(要求数据类型一致才能相等）

逻辑运算符
进行布尔运算的运算符，返回值布尔型

符号：&&  ||  ！

短路与运算：

表达式 1 && 表达式 2
若表达式 1为假，则返回值为表达式2

短路或运算：

表达式 1 || 表达式 2
若表达式 1为真，则返回值为表达式 2

运算符的优先级
小括号 -->一元运算符 -->算术运算符 -->关系运算符
想的运算符 -->逻辑运算符 -->赋值运算符 --> 逗号

三、函数

1、函数的使用

1、声明函数：

function 函数名（）{
	函数体
}

2、调用函数：

函数名（）

注意：
1、function声明函数名全部小写，不能使用关键字
2、函数时做某件事，函数名一般为动词
3、函数不调自己不执行
4、函数名的调用要加小括号

2、函数的参数

function 函数名（形参1 形参2）{
		函数体
		}
函数名（实参1 实参2）

参数的作用：
在函数内部不固定时，可以通过参数调用函数时传递不同的值进去
注意：
1：多个参数之间用逗号隔开
2：形参不用声明参数
3：如果实参个数大于形参个数，会取形参个数返回
4：如果实参个数小于形参个数，结果为NaN

3、函数的返回值

function 函数名（形参1 形参2）{
		函数体
		return 返回的结果
		}
函数名（实参1 实参2）

注意
1、函数只实现某种功能，最终结果需要返回给函数的调用者，通过return实现
2、函数遇到return把结果返回给函数调用名
3、终止函数下面的代码将不会执行
4、一次只能返回一个值，多个则返回后一个
5、函数若果没有return，则返回undefined

<script>
	function hu(){
	var sum1=10;
	var sum2=12;
	return sum1+sum2;
	}
	console.log(hu())
	</script>

4、arguments函数的使用（伪数组）

含义：
当我们不确定有多少个函数参数传递时，可以用arguments来获取，在JavaScript中，arguments实际上是当前函数的内置对象，arguments对象中存储了传递的所有实参

function fn () {
console.log(arguments)
}
fn (1,2,3）

特点：
1：具有length的属性
2、按照索引的凡是进行存储
3、没有真正数组的一些方法pop() 、push ()
4、可以按照数组的方式遍历arguments

5、函数的两种声明方式

1：利用关键字自定义函数
2：函数表达式

var  变量名 = function（）{}

四、js事件

• 事件的绑定方式方式
• DOM0级（赋值式）
• 绑定 元素.on事件名 = 函数
• 删除 obtn.onclick = null

<script>
var obtn=document.getElementById("btn");
    obtn.onclick=function(){
        console.log(1);
        }
</script>

• DOM2级（监听式）
• 绑定- 绑定：
• 正常：obox.addEventListener(“事件名”,事件处理函数,布尔)

<script>
obtn.addEventListener("click",fn); 
    function fn(){    //定义需要执行的代码
        console.log(2);
        </script>

 布尔：
  - false表示冒泡状态，默认值
  - true表示捕获状态，IE不支持

• IE：obox.attachEvent(“on事件名”,事件处理函数)
• 删除
• 正常：obox.removeEventListener(“事件名”,参数2,布尔)
• 参数2：绑定事件时的事件处理函数的名字

<script>
obtn.addEventListener("click",fn);

    function fn(){
        console.log(2);
    }

    obtn.removeEventListener("click",fn)  ;
    </script>

• IE：obox.detachEvent(“on事件名”,参数2)
• 参数2：绑定事件时的事件处理函数的名字
• 监听式绑定事件可以重复绑定，如果用on绑定事件的话会被覆盖
• （所以如果封装某个功能需要用到绑定事件都是用监听式事件绑定，防止覆盖）

<script>
var obtn=document.getElementById("btn");
    obtn.addEventListener("click",fn);
    function fn(){
        console.log(2);
    }
    obtn.addEventListener("click",fx);
    function fx(){
        console.log(34);
    }
    </script>

• 可以切换事件流的状态（IE不支持）
  5、事件处理函数：发生某个行为时，要执行的函数或功能
  6、事件对象：发生某个行为时，用来记录当前事件产生的所有信息的对象。需要主动获取，只有在事件处理函数中才能拿到
  7、事件流
• 事件冒泡：从子元素依次向上触发所有父元素的相同事件
• 事件捕获：从父元素依次向下触发所有关联的子元素的相同事件

经过下面的测试可以得出事件的执行过程，先捕获到目标再

冒泡
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{width: 300px;height:300px;background: red}
        #box2{width: 200px;height:200px;background: green}
        #box3{width: 100px;height:100px;background: blue}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
            </div>
        </div>
    </div>
</body>
<script>
    var obox1 = document.getElementById("box1")
    var obox2 = document.getElementById("box2")
    var obox3 = document.getElementById("box3")

    obox2.addEventListener("click",function(){
        alert("冒泡的green")
    },false)
    obox2.addEventListener("click",function(){
        alert("捕获的green")
    },true)

    obox1.addEventListener("click",function(){
        alert("冒泡的red")
    },false)
    obox1.addEventListener("click",function(){
        alert("捕获的red")
    },true)

    obox3.addEventListener("click",function(){
        alert("目标blue")
    })
</script>
</html>

8、默认事件：没有手动添加，浏览器自动添加的功能或事件
9、事件委托：将多个子元素的相同事件，绑定给页面上现存的共同的父元素
利用事件冒泡触发父元素的事件，利用事件目标找到真正点击的元素

事件对象身上的属性（鼠标事件对象）

• e.offsetX/Y 相对于事件目标的坐标
• e.clientX/Y 相对于可视区域的坐标
• e.pageX/Y 相对于页面的坐标
• e.button 鼠标的按键
• e.type 事件类型
• e.target/e.srcElement 事件目标

    obtn.addEventListener("click",fx);
    function fx(eve){
        var e=eve || event;
        console.log(e.offsetX);
    }

事件对象身上的属性（键盘事件对象）

• 键盘事件添加给谁，怎么触发
• 键盘事件，需要提前获取，焦点
• 谁具有焦点，键盘事件就添加给谁，默认情况下document- - 具有焦点
• 事件对象的属性
• e.keyCode 键码
• e.which
• e.ctrlKey
• e.shiftKey
• e.altKey
• e.metaKey
  常用键码

事件流

• 三个阶段：事件冒泡，目标阶段，事件捕获
• 顺序：捕获->目标->冒泡
  ============================================
  兼容性
  1、如何获取事件对象（兼容）
  btn.onclick = function(eve){
  var e = eve || window.event;
  }

2、鼠标事件对象身上的坐标类属性有哪些，分别表示什么坐标

1、e.offsetX/Y 相对于事件目标的坐标
2.、e.clientX/Y 可视区域
3、e.pageX/Y 页面
4、e.screenX/Y 显示器
3、如何获取键盘事件对象的键码，并单独判断ctrl，shift，alt和系统键

1、var code = e.keyCode || e.which
2、e.ctrlKey
3、e.shiftKey
4、e.altKey
5、e.metaKey
** 4、如何阻止事件冒泡（兼容）**

1、e.cancelBubble = true
2、e.stopPropagation()
5、如何阻止默认事件（兼容）

1、e.returnValue = false;
2、e.preventDefault();
3、return false;
6、监听式绑定事件（兼容）

1、btn.addEventListener(“click”,fn,false)
2、btn.attachEvent(“onclick”,fn)