# JavaScript

html属于搭建页面结构
css美化页面
js给页面添加行为
历史：1995年发布网景公司 LiveScript 同年改名JacaScript，和Java没啥关系

# js特点

JavaScirpt属于脚本语言，不需要编译，由浏览器解析执行
JavaScript可以插入到Html页面中由浏览器执行
JacaScript基于面向对象，弱类型语言

# js优点

交互性：可直接和用户进行交互
安全性：只能在浏览器内运行，不允许访问本地硬盘中得其他资源

# 如何在html中添加js

在元素中的事件中添加: <input type="button" onclick="run()">
在head标签中添加 scirpt标签在标签内部写js代码，可以写在html中的其他位置，但是不推荐
创建*.js文件，在文件中写js代码，通过script标签中的src=""引入，如果使用了src属性，则不能在标签内部写js代码

<script type="text/javascript" src="first.js"></script>

# JavaScript语法

# 数据类型

数值类型（number)
字符串类型（string）
布尔值类型（boolean）
undefine
null
对象类型

# 变量的声明

因为js属于弱类型的语言，所以声明变量的时候不需要指定变量的类型，直接赋值即可

    var x = 18;
    x = 20;
    x ="abc";
    var y = "abc"
    var z =true;

# 数值类型

在js中所有数值的底层都是浮点型，在使用的过程中会自动转换类型（类型的式转换）

    var x = 10/2; 5
    var x = 5/2; 2.5

NaN: Not a Number 不是一个数，isNaN(x)，NaN不和任何一个数值相等，包括它自己，如果需要判断某个变量是否为NaN使用isNaN(x)

# 字符串类型

通过单引号或双引号修饰一个字符串，例如： var s1 ="aaa"; var s2="bbb";

# 布尔类型

值为true和flse

# undefined 未定义

此类型只有一个值，值为undefined，变量声明但是没有定义的话，类型和值同为undefined

# null

此类型也只有一个值值为null，通常应用在方法的返回值位置

    x = run();
    var x = null;

# 数据类型的转换

在js中数据类型会自动根据需要进行类型转换（隐式转换）

数值类型

转字符串：直接转 18-->"18"
转布尔值：0和NaN转false,其他所有数值true;

字符串类型

转数字：如果字符串为数字则直接转 "18"--> 18 ,空字符串("")转为0,非数字字符串转成NaN
转布尔值：空字符串转false，其他转true.

布尔值类型

转数字：TRUE-->1 false-->0
转字符串："true" "false"

undefined类型

转数字：NaN
转布尔值： false
字符串："undefined"

null类型

转数字：NaN
转布尔值： false
字符串："null"

# 练习：

在页面中弹出 "66"+6的值和"66"-6的值

    alert("66"+6); //666
    alert("66"-6); //60

判断如果内容为字符串输出是字符串，如果内容为空字符串"",输出字符串内容为空

    if(""){
        alert("是字符串");
    }else{
        alert("字符串内容为空");
    }

布尔值类型转换

    已知 var arr=[3>2>1,1<2<3];
    arr[0] false;
    arr[1] true;

# 运算符

# JavaScript中的运算符和java中大体相同

# 不同之处：

比较运算符==，JavaScript中还提供了===,
1. ==在比较之前会先将两端的变量统一成一种类型再进行比较。
2. ===判断是否严格相等，如果类型不相等就不相等
测试："666"和666 通过==和===进行判断

    alert("666"==666);//true
    alert("666"===666);//false

typeof

typepf: 获取某个变量的类型
测试： typeof 66+6; //number6

delete

delete: 用于删除数组中的内容
测试：

    var arr = "[18,'小明'，true];
    alert(arr);// 18,小明，true
    delete arr[1];
    alert(arr);//18,,true
    alert(arr[1]);//undefined

两数相除会自动转换整数和小数

测试：

    alert(10/2); // 5
    alert(10/3); // 3.333333...

# 语句

fi else while do while switch for
不同点：
1. if的条件如果是其他类型会自动转成布尔类型
2. for循环中的int i 改成var i，不支持增强for循环
- 测试for循环
```
    for(var i=0; i<10; i++){
        console.log(i);
    }
```

# 函数

方法就是存在于对象中的函数函数的两种声明方式

function 函数名(参数列表){ return 返回值; }

    /* 函数声明 */
    function run(name, age){
    		alert(name+":"+age); //小明：28；
    	}
	/* 函数调用 */
	run("小明",28);
	function run2(n1,n2){
		return n1*n2;
	}
    /* 调用 */
    var result = run2(2,5);
    alert(result); //10

var 函数名 = function(参数列表){ return 返回值; }

    /* 第二种声明函数的方式 */
    var run5 = function(name, age){
    		alert(name+age);
    }
    /* 两种方式声明，调用方式一样*/
    run5("张三",22);

通过按钮调用函数

    function btnrun(){
   		alert("按钮点击的函数");
    }
    <input type="button" value="我是按钮" onclick="btnrun()">

# 和界面相关的一些函数

获取页面中的元素(标签)

    var nameIput = document.getElementById("name");

从文本框中获取用户输入的内容

    <script type="text/javascript">
    	function getName(){
    		/*1.先得到文本款的标签 */
    		var nameInput = document.getElementById("name");
    		/*2.获取内容并显示 */
    		alert(nameInput.value);
    	}
    </script>
    </head>
    <body>
    	用户名：<input id="name" type="text">
    	<input type="button" onclick="getName()" value="获取用户名">
    </body>

往元素中添加文本和添加html代码

标签中添加文本

    var MyDiv = document.getElementById("mydiv");
    MyDiv.innerText="<h1>aaa<h1>";

标签中添加html代码
- =为赋值 +=为追加内容

    var MyDiv = document.getElementById("mydiv");
    MyDiv.innerHTML="<h1>aaa<h1>";

# 练习：求用户输入的数值的平方

    <script type="text/javascript" >
	function pf(){
		/* 1. 获取文本框 */
		var numberInput = document.getElementById("user");
		/* 2.获取文本框内容 */
		var number = numberInput.value;
		/* 3. 判断是否是数字*/
		if(isNaN(number)){
			alert("输入错误");
		}else{ /* 是数字 */
			/* 4. 得到结果的div */
			var resultDiv = document.getElementById("resultdiv");
			/* 5.把平方的结果显示在div中 */
			resultDiv.innerText = number*number;
		}
	}
    </script>
    </head>
    <body>
    	<input id="user" type="text" name="user">
    	<input Type="button" value="平方" onclick="pf()">
    	<div id="resultdiv"></div>
    </body>

强制把字符串类型转换成number

 - parseFloat(str) //如果字符串是整数也会得到整数
 - Number(str) //等效上面代码
 - parseInt(str) //不仅可以把字符串转成整数，也可以把小数转成整数

# 常用API

String相关的api

创建字符串的两种方式

    var str1 = "Hello";//以字符串常量的形式创建
	var str2 = new String("hello");//以对象的形式创建

字符串转大写和转小写

    alert(str1.toUpperCase()); //HELLO
    alert(str1.toLowerCase()); //hello
    //修改大小写函数并没有对原字符串进行修改
    alert(str1); //Hello

查询指定字符出现的位置从0开始如果没有找到-1

    var str4 = "abcdefg";
    alert(str4.indexOf()); //-1
	alert(str4.indexOf("e")); //4
	alert(str4.lastIndexOf("a")); //0

截取字符串含头不含尾

    alert(str4.substring(2,5)); //cde
    //第二个参数可以省略 从某个位置截取到最后
	alert(str4.substring(2)); //cdefg

替换字符串参数1是被替换的参数2新的,替换第一次出现的

	alert(str4.replace("abc","mmm")); //mmmdefg

拆分字符串通过某个字符拆分

    var str5 = "一a二a三a四a五a六a";
	var arr = str5.split("a");
	alert(arr[2]); //三

2.Number相关函数

四舍五入，保留几位小数

    var num =3.147;
	alert(num.toFixed(2));//3.15
	var num2 = 3.2;
	alert(num2.toFixed(2));//3.20

数组相关

创建数组的两种方式数组中可以添加任意类型

	var arr1 = ["小明",18,true];
	//创建一个空的数组
	var arr2 = new Array();

数组中添加数据

	arr2.push("小花");
	arr2.push(25);
	alert(arr1); //小明，18，true
	alert(arr2);	//小花，25

数组中的长度可变

	arr1.length=1;
	alert(arr1); //小明

.从数组中取数据

	alert(arr2[1]); //25
	for(var i=0; i<arr2.length; i++){
		alert(arr2[i]);
	}

数组反转

	var arr3 = [1,2,3];
	arr3.reverse();
	alert(arr3); //3,2,1

数组排序

	var arr4 = [1,12,2,5,23,4];
	// 默认的排序规则：按照每一个元素的unicode编码进行排序，
	//比完第一个比第二个，相当于是以字符串进行排序的
	arr4.sort();
	alert(arr4); //1,12,2,23,4,5
	//自定义排序规则 如果升序 a-b， 如果降序就是b-a
	//年龄升序 a.age-b.age
	//工资降序 b.sal-a.sal
	function sortFunc(a,b){
		return a-b;
	}
	alert(arr4.sort(sortFunc)); // 1,2,4,5,12,23
	
	//使用匿名排序函数 进行排序
	arr4.sort(function(a,b){
		return b-a;
	});
	alert(arr4);//23,12,5,4,2,1

日期相关函数

服务器时间和客户端时间：服务器时间更常用，因为客户端时间可以任意修改
获取客户端时间很少使用

	var d1 = new Date();
	//alert(d1);

创建时间对象指定时间这个指定的时间通常是来自服务器

	var d2 = new Date("2018/06/01 08:08:08");
	alert(d2);  //Fri Jun 1 2018 08:08:08 GMT+0800(中国标准时间）

获取和设置时间戳（距1970年1月1日的毫秒数）

	alert(d2.getTime());
	d2.setTime(1000);
	alert(d2);//1970年1月1号8点零1秒

获取单独的年月日时分秒

	console.log(d2.getFullYear());
	console.log(d2.getMonth());//月份从0开始
    consolo.log(d2.getDate()); //月的第几天
	console.log(d2.getDay()); // 周的第几天，从星期日开始
	console.log(d2.getHours());
	console.log(d2.getMinutes());
	console.log(d2.getSeconds());

从完整日期+时间中获取年月日获取时分秒

	alert(d2.toLocaleTimeString()); //8:00:01
	alert(d2.toLocaleDateString()); //1970/1/1

正则

    .匹配任意字符除了换行
    \w 匹配任意字母，数字，下划线
    \s 匹配任意空白
    \d 匹配任意数字
    ^   开始
    $   结束
    //正则应用场景：1.查找内容 2.校验文本

1.创建正则的两种方式

	//1.直接创建 第一个/代表正则 第二个/代表模式
	//模式：g 全局查找，i 忽略大小写
	var reg1 = /^a/i;    //a开头的 加i忽略大小写
	reg1 = /m$/;   //m结尾
	reg1 = /\d{2}/; 	//包含任意两个数字
	reg1 = /^m\d{3,5}c$/; 	//m开头 c结尾中间有3-5个数字
	reg1 = /^\w{6,10}$/;	//用户名或密码 字母， 数字， 下划线长度6-10
    //2.通过对象创建 第一个参数是正则表达式，第二个模式
	var reg2 = new RegExp("^a","i");
	//用户名或密码 字母， 数字， 下划线长度6-10
	reg2 = new RegExp("^\\w{6,10}$"); //要转译

2.和正则相关的函数

	//2.1.1 正则对象的函数
	var str = "You can you up no can no bb";
	//创建查找no的正则
	var reg = /no/g;
	//得到查找到的内容 如果添加了g 是全局查找， 
	//第一次找到了第一个，第二次找到第二个，找不到返回null
	//如果不加g 每次得到的都是第一个
		//alert(reg.exec(str));	//no
		//alert(reg.exec(str));	//no
		//alert(reg.exec(str));	//null
	//2.1.2 判断目标字符是否符合规则
		//var reg2 = /^you/i; //忽略大小写
		//alert(reg2.test(str)); //true

3.字符串和正则相关的函数

	var str2 = "you can you up no can no bb";
	var reg2 = /no/g;
	//1. 从字符串中找到匹配的内容 exec()函数所做的事儿
		//加g结果直接赋值给一个数组，比exec好用
		alert(str2.match(reg2)); //no,no
	//2. 查找并替换
		alert(str2.replace(reg2,"bu")); 
		// you can you up bu can bu bb

/* 修改元素的class值 */

usermsg.className="ok";

# 事件的取消

如果在标签的事件中执行 return false 则这次事件被取消

    <a href="http://www.tmooc.cn" onclick="return confirm('确认离开吗？')">跳转页面</a>

onsubmit()：当表单提交的时候

    <form action="http://www.tmooc.cn" 
	onsubmit="return userCheck()+pwCheck()==2;">
    校验时：使用&&会出现短路，如果第一个false后面不会再执行，这样就导致页面校验效果不完善，使用+则不会出现这样的问题

onblur(): 当失去焦点的时候
onclick():当点击标签的时候

# 全局函数

不需要使用对象去调用的函数，称为全局函数
parseInt()/parseFloat()
eval("字符串") 作用：计算字符串，并执行其中的JavaScript代码。
isNaN()
alert()
confirm()

# 1demo.html

# 自定义对象

js中创建对象的两种方式

第一种创建对象的方式

    //第一种创建对象的方式的两种形式
	function Person(){}//定义了一个空对象
	// 给对象添加属性和方法
	var p1 = new Person();
	p1.name = "小明明";
	p1.age = 3;
	p1.run = function(){
		alert(this.name+":"+this.age);
	}
	p1.run();
	
	// 定义一个带属性和方法的对象
	function Person(name,age){
		this.name=name;
		this.age = age;
		this.run = function(){
			alert(this.name+":"+this.age);
		}
	}
	var p2 = new Person("刘备",38);
	p2.run();

第二种创建对象的方式

    /* 第二种创建方式 */
    	var p3 = {
    		"name":"曹操",
    		"age":18,
    		"run":function(){
    			alert(this.name+":"+this.age);
    		}
    	}
    	
    	/* 调用方法 */
    		p3.run();

# 2object.html

# DHTML

简介：Dynamic(动态) HTML，这并不是一门新的技术，只是把html，css, js整合到一起形成的DHTML
- DHTML包括： BOM和DOM
- BOM: Browser(浏览器) Object(对象) Moder(模型)
  - BOM里面都是一些和浏览器相关的对象
- DOM: Document(文档) Object(对象) Model(模型)
  - DOM里面都是和页面内容相关的对象

# Window

window里面的所有属性可以通过window.的形式得到
window下面的对象或函数也称为全局函数，全局对象,调用时window可以省略。
全局对象有：document,history,location,navigator,screen

# 弹出框

alert() 弹出提示信息
confirm() 弹出确认框
prompt() 弹出输入框
- alert(confirm(prompt("输入点什么")));

# window的事件

onclick:当点击页面任意区域的时候会执行
onload: 当页面加载完成的时候执行
onfocus: 当页面获取焦点的时候执行
onblur：当页面失去焦点的时候执行

    // 1.给window添加点击事件 
	onclick = function(){
		alert("点击了");
	}
	//2. 添加 加载完成事件
	onload = function(){
		alert("加载完成！");
		var bigDiv = document.getElementById("big");
		bigDiv.innerHTML = "<div id='small'></div>";
	}
	//3.添加获取焦点的事件
	onfocus = function(){
		console.log("焦点来了");
	}
	//4.添加失去焦点的事件
	onblur = function(){
		console.log("失去焦点");
	}

# location 位置

href: 表示当前的路径location.href = "http://www.tmooc.cn";
reload(): 重新加载location.reload();

# 3window.html

# screen 屏幕

获取屏幕的宽高
- scrren.width
- scrren.height
获取屏幕的可用宽高
- scrren.availwidth
- scrren.availheight

# history 历史

history.length;//得到历史页面的个数
history.back();//返回上一个浏览的页面
history.forward();//前进
history.go(num); // num:0代表当前，正值前进，负值后退，数值表示前进后退次数

# navigator 帮助、导航

navigator.userAgent: 获取浏览器版本信息

# 通过js给元素添加css样式

先得到元素对象，通过.style的形式给元素添加css样式，这种方式添加的样式为内联样式（优先级最高），所以使用.style.left获取值的时候为空，什么也的不到，可以使用.offsetLeft来获取

    <script type="text/javascript">
	onclick = function(){
		var img = document.getElementById("myimg");
		//得到原来的位置 此处必须加转换整数
		//因为第一次获取的时候没有赋值，所以提取到的不是一个数
		var x = parseInt(img.style.left);
		//第一次会得到NaN
		if(isNaN(x)){
			x = 0;
		}
		//每次移动10
		x+=10;
		//把修改后的值设置回去
		img.style.left = x+"px";
	}
	</script>

# 定时器

setInterval(参数1: 函数，参数2: 间隔时间单位毫秒)返回值为定时器的id，如果需要停止定时器需要使用次id
停止定时器 clearInterval(timerId);

   //开启定时器 第一个参数要函数，第二个参数是时间间隔
	//下面的代码就是每隔两秒执行函数内的代码
	var n=0;
	var timerId = setInterval(function(){
		console.log(n++);
		if(n>=5){
			//停止定时器
			clearInterval(timerId);
		}
	},1000);

# 练习：假的轮播图

8lbt.html

如何控制元素的显示不显示

    /* 写在css里 */
    /* 隐藏方式一 脱离文档流*/
	display: none;
	/* 隐藏方式二 不脱离文档流 */
	visibility: hidden;

# JavaScript事件处理

什么是事件：事件包括，状态改变事件，鼠标事件，键盘事件
鼠标事件：onclick(点击) onmouseover(移到元素上) onmouseout(离开元素) onmousedomwn(在元素上按下) onmouseup(在元素上松手) onmousemove(在元素上移动) 通过event对象可以获得鼠标触摸页面的坐标
键盘事件：onkeydown(键盘按下) onkeyup(键盘松开)
状态改变事件：onchange(值发生改变的事件) onload(页面加载完事件) onblur(失去焦点) onfoucs(得到焦点的事件) onsubmit(当表单提交的时候)

# 事件的绑定

在元素中添加事件

    <input type="text" onkeydown="return keydownfn(event)">

通过js代码动态绑定事件,好处：html代码和js代码分离，便于维护和升级

        /* 加载完成 */
    	onload = function(){
    		var mybtn = document.getElementById("mybtn");
    		/* 绑定事件 */
    		mybtn.onclick = function(){
    			alert("按钮事件绑定成功!");
    		}
    	}
	<body>
	    <input id="mybtn" type="button" value="动态绑定">
    </body>

# 事件的取消

通过返回值false取消事件

# Event对象

event对象中保存着和事件相关的信息
通过evevt获取鼠标的坐标 event.clientX/Y(这个坐标是相对于整个页面的，和谁调的这个事件并没有关系)
通过event获取键盘的字符编码event.keyCode event.which
通过event获取事件源(谁调这个事件)

    <script type="text/javascript">
	function btnfn(){
		//获得事件的事件源 也就是按钮 target:目标
		alert(event.target);//[object HTMLInputElement]
		alert(event.target.nodeName);//INPUT
		//考虑到浏览器兼容性问题 个别浏览器不支持target
		alert(event.srcElement.nodeName);//INPUT
		//一下写法表示有一种成功就可以
		var obj = event.target||event.srcElement;
		alert(obj.nodeName);
	}
    </script>

# 事件冒泡

如果同一区域有多个事件响应，响应的顺序类似气泡，从下往上，也就是从底层元素往上级元素执行，这个过程称为冒泡
应用场景: 如果页面中有多个元素需要添加相同的事件，使用事件冒泡特性，可以在最外层打的元素上面添加一个事件，次事件可以应用在内部多个小的元素上，从而节省代码。day11/4event.html

<body>
	<div onclick="alert('div标签')">
		<p onclick="alert('p标签')">
			<input type="button" value="按钮" 
			onclick="alert('按钮')"> 
		</p>
	</div>
</body>

# 随堂练习

购物车计算总价，以及全选 1.order (opens new window)
鼠标点哪里，图片添加到哪里，利用event获取鼠标坐标 2event.html (opens new window)
2event改进版本，只有在指定元素内才会添加图片2event2.html (opens new window)
键盘状态，可以实时判断用户输入 3key.html (opens new window)
计算器，练习事件冒泡 5cal.html (opens new window)
好友列表的展开与隐藏 6friends.html (opens new window)

# JavaScript

# js特点

# js优点

# 如何在html中添加js

# JavaScript语法

# 数据类型

# 变量的声明

# 数值类型

# 字符串类型

# 布尔类型

# undefined 未定义

# null

# 数据类型的转换

# 练习：

# 运算符

# JavaScript中的运算符和java中大体相同

# 不同之处：

# 语句

# 函数

# 和界面相关的一些函数

# 练习： 求用户输入的数值的平方

# 常用API

# 事件的取消

# 全局函数

# 1demo.html

# 自定义对象

# 2object.html

# DHTML

# Window

# 弹出框

# window的事件

# location 位置

# 3window.html

# screen 屏幕

# history 历史

# navigator 帮助、导航

# 通过js给元素添加css样式

# 定时器

# 练习：假的轮播图

# JavaScript事件处理

# 事件的绑定

# 事件的取消

# Event对象

# 事件冒泡

# 随堂练习

# 练习：求用户输入的数值的平方