JavaScript是什么?
JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
JavaScript是因特网上最流行的脚本语言，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。
Javascript的特点
JS是弱类型语言,没有类型声明,它的变量不必具有一个明确的类型。
JS是脚本语言，换句话说，可以用来编程的并且直接执行源代码的语言,就是脚本语言。
JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器的语言
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
Javascript的引入方式
在<head>标签中嵌入 <script>标签，在 <script>标签内编写JS代码
<head>
<script type="text/javascript">
alert("我是内部的JS代码");
</script>
</head>
创建以.js为后缀的文件，在网页中通过 <script>标签引入
<script type="text/javascript" src="js/script.js"></script>
注意： <script>标签不能同时写js代码，又引入文件
Javascript的输出方式
js中不区分单引号和双引号
alert("Javascript");
console.log(a)
Javascript中的变量
使用var关键字进行变量的声明，声明的同时也可以进行赋值。变量的声明只能有一次，但赋值可以有多次。如果只声明变量，但是变量没有被赋值，此时变量的值为undefined。
JavaScript变量的类型取决于右侧的对象。
var variable_name1 = 5;
var variable_name2 = 5.3;
var variable_name3 = false;
var variable_name4 = 'zhangsan';
Javascript中的数据类型
基本数据类型
1.Number类型
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
2.String类型
单引号或双引号扩起来的字符集合
3.Boolean类型
该类型只有两个值，true和false
4.Undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。
5.Null类型
Null类型被看做空对象指针，Null类型也是空的对象引用。
6.Object类型
大多数类型值都是Object类型的实例，创建Object实例的方式：
var person = new Object();
person.name = "Micheal";
person.age = 24;
7..Array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象....另外，数组的大小是可以动态调整的。
创建数组的基本方式有两种
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
typeof 操作符
由于js中的变量是弱类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.
数据类型之间的转换
1.隐式转换
var s = "hello";
var n = 3.14;
var b = true;
console.log(s+n);
console.log(s+b);
console.log(n+b);
console.log(b+b);
2.强制转换的函数
var s = "hello";
var n = 3.14;
var b = true;
console.log(n.toString()+n);
console.log(parseInt("3.14")+1);
console.log(parseFloat("3.14")+1);
console.log(parseInt("acb"));
console.log(typeof(20.3));
console.log(isNaN("5.6"));
console.log(isNaN("abc"));
console.log(isNaN(""));
Javascript的运算符
1.==与===的区别
== 判断两个变量的值是否相同
=== 判断变量之间的值和类型是否相同
var m = 3;
var n = "3"
console.log(m == n);
console.log(m === n);
2.条件表达式
js中的条件表达式可以是任意类型的值，当以非布尔值做条件的时候，空值等价于false，非空值等价于true
空值：0/null/NaN/undefined/""(空串)
判断某变量，当它非空时输出ok
var x = true;
if(x){
console.log("ok");
}
Javascript字符串对象
在解析器的底层，保存字符串时，实际上是以字符数组的形式保存的
var str = "Hello neusoft";
length可以用来获取一个字符串的长度
console.log(str.length);
可以根据索引来获取指定位置的字符
charAt( )
可以用来连接两个或多个字符串
concat()
检索指定字符串在当前字符串中的位置
第一个参数，要查询的字符串
第二个参数，查找开始的位置
默认会返回字符串第一次出现的位置的索引,如果没有找到该内容，则返回-1
indexOf( )
可以用来截取一个字符中的内容
第一个参数，截取开始位置的索引（包括开始位置）
第二个参数，截取结束位置的索引（不包括结束位置）
可以省略第二个参数，如果省略则一直截取到最后
可以接收一个负值作为参数，如果是负值，则从后往前数
slice( )
可以用来截取一个字符中的内容
第一个参数，截取开始位置的索引（包括开始位置）
第二个参数，截取结束位置的索引（不包括结束位置）
可以省略第二个参数，如果省略则一直截取到最后
该方法不接收负值，如果传递了一个负值，则默认会设置为0
substring( )
将一个字符串转换为小写/将一个字符串转换为大写
toLowerCase()
toUpperCase()
Date日期对象
new Date(yyyy,MM,dd,hh,mm,ss);
getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
Math对象
Math.PI 圆周率
Math.abs()-用来获取一个数的绝对值
Math.ceil() -可以对一个数进行向上取整
Math.floor() -可以对一个数进行向下取整
Math.round() -对一个数进行四舍五入取整
Math.random(); -可以生产一个0-1之间的随机数
Math.max() -可以从多个值中获取到最大值
Math.min() -可以从多个值中获取到最小值
Math.sqrt(x) -求一个数的平方根
Javascript中数组的应用
创建一个数组对象
var arr = new Array();
向数组中添加元素
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
arr[3] = 40;
arr[4] = 30;
在对数组元素进行赋值时，允许非连续性赋值
arr[0] = 10;
arr[2] = 30;
读取数组中的元素
如果读取一个数组中没有的元素，会返回undefined
console.log(arr[4]);
果将长度修改为小于之前的长度的值，则多余的部分会被删除
arr.length = 5;
如果将长度修改为大于之前的长度的值，则会数组中会创建出空的元素
arr.length = 10;
在数组中可以保存任意类型的元素
var arr = [1,"hello",true,null,undefined];
数组中也可以保存数组，如果数组中保存的依然是数组，则我们称这个数组为二维数组
var arr = [
[1,2,3],
[4,5,6],
[5,6,7]
];
console.log(arr[0][1]);
遍历数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精","蜘蛛精"];
for(var i = 0 ; i < arr.length ; i++ ){
console.log(arr[i]);
}
Javascript中的函数
1.语法
function 函数的名字([形参1,形参2,...形参n]){
函数中需要执行的代码...
}
若此处写了函数则浏览器打开网页时
执行到此初时仅仅是创建了这个函数
当用户点击某按钮时才调用这个函数
function fun(){
console.log("语句一");
console.log("语句二");
console.log("语句三");
}
函数的调用
函数的名字([形参1,形参2,...形参n])
fun()
Javascript外部对象
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
浏览器将网页解析成DOM树结构，树中的内容称为节点。
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
节点与文档内容是一一对应的关系，节点之间有层次关系
例：如下网页解析成DOM树结构
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
DOM.png
DOM操作网页标签
根据id选择器获取对应的标签
var element=document.getElementById("id")；
操作标签属性
innerHTML ：设置/获取 标签内容的所有内容
value:设置/获取 input标签的内容
style属性：通过style属性可以设置元素的任意css样式
fontSize，width，height,backgroundColor...
color，border，padding,backgroundImage...
设计程序
求一个数的平方是多少，如果输入的内容不是一个数字
将提示显示在网页上，如果是数字将结果显示在网页上
设计程序
系统生成一个0--999之间的随机整数，在网页上输入猜测的结果。
如果结果不是一个数字，提示"请输入数字"
如果用户猜测的结果有误，请相应的提示错误范围 "猜大了" "猜小了"
设计程序
完成图片切换
根据标签名获取对应的标签数组
var elements=document.getElementsByTagName("标签名");
根据name属性值查询节点
var eles=document.getElementsByName("sex");
设计程序：按图示效果完成网页设计
点击"展开" 显示全部图示列表
点击"收起" 显示默认图片列表
1.gif
2.gif
根据层次查询节点
查询某节点的关系节点（父亲、孩子、兄弟）
1.查询父节点
var cd = document.getElementById("cd");
console.log(cd.parentNode);
2.查询子节点
lis = ul.getElementsByTagName("li");
console.log(lis);
3.查询同级节点
var lis=cd.parentNode.getElementsByTagName("li");
console.log(lis);
<body>
<ol>
<li>河北省</li>
<li>山东省</li>
<li>甘肃省</li>
<li>陕西省</li>
</ol>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="cd">成都</li>
<li>重庆</li>
<li>深圳</li>
</ul>
<input type="radio" name="sex" />男
<input type="radio" name="sex"/>女
</body>
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
点击p1,p2,p3时，分别显示标签中对应的内容
3.gif
制作好友列表
111.gif
创建新节点
创建的新节点无任何内容和属性
var ele=document.createElement("标签名");
追加节点：在父节点上追加
父节点.appendChild(新节点) -末尾追加;
父节点.insertBefore(li,子标签选择器);-追加在某个子标签之前
创建新节点li,将它插入到广州之前
<ul id="city">
<li>杭州</li>
<li>苏州</li>
<li>温州</li>
<li id="gz">广州</li>
</ul>
设计程序：自定生成5条新闻
'山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
'甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
'多地制定雾霾预案限行限排被批治标不治本',
'韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
'伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
设计程序：完成省市联动
完成商品购物车列表
gwc.png
正则表达式
什么是正则表达式 :强大的字符串匹配工具
为什么使用正则表达式
校验字符串是否全由8位数字组成
<script type="text/javascript">
var str="12745678";
var flag=true;
if(str.length==8){
for(var i=0;i<str.length;i++){
if(!(str.charAt(i)>='0'&&str.charAt(i)<='9')){
flag=false;
break;
}
}
if(flag){
console.log("yes");
}else{
console.log("no");
}
}else{
console.log("no");
}
</script>
使用正则表达式
<script type="text/javascript">
var str="21745678";
var reg=/^\d{8}$/;
if(reg.test(str)){
console.log("yes");
}else{
console.log("no");
}
</script>
正则表达式的创建方式
RegExp 是JS中的类，同Array类似。这个创建方法没有指定表达式内容
var reg=new RegExp ("a");
重载的构造函数，其第二个参数指定将不区分大小写
var reg=new RegExp ("a","i");
第二个参数主要包括：
1. i 忽略大小写匹配
2. m 多行匹配，即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项
3. g 全局匹配 模式应用于所有字符串，而非在找到第一个匹配项时停止
直接简单的创建方式
var reg=/a/i;
代表特殊含义的元字符
\d 匹配一个非负整数， 等价于 [0-9]；
\s 匹配一个空白字符；
\w 匹配一个英文字母或数字，等价于[0-9a-zA-Z]；
. 匹配除换行符以外的任意字符，等价于[^\n]。
^ 匹配一个字符串的开头，比如 (^a) 就是匹配以字母a开头的字符串
$ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串
^还有另个一个作用就是取反，比如[^xyz]表示匹配的字符串不包含xyz
需要注意的是：如果^出现在[]中一般表示取反，而出现在其他地方则是匹配字符串的开头。
代表次数的量词元字符
* : 0到多个
+ : 1到多个
? : 0次或1次 可有可无
{n} : 正好n次；
{n,} : n到多次
{n,m} : n次到m次
和正则相关的一些方法
reg.test(str) 用来验证字符串是否符合正则 符合返回true 否则返回false
var str = 'abc';
var reg = /\w+/;
console.log(reg.test(str)); //true
str.match(reg) 如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(str.match(reg));
str.split( reg) 根据正则表示式 将字符串截取数组
<script type="text/javascript">
//验证手机号
var str="abc,def,ghi";
var reg=",";
console.log(str.split(reg));
</script>
使用正则表达式解决问题
校验邮政编码
<script type="text/javascript">
var str ="100010";
var reg=/^[0-9]{6}$/;
console.log(reg.test(str));
</script>
邮箱校验：
只能由数字或字母开始@数字或者小写字母.小写字母(长度2-5)
<script type="text/javascript">
var mail="1513255@qq.com";
var reg=/^\w+@(\d+|[a-z]+)\.[a-z]{2,5}$/;
console.log(reg.test(mail));
</script>
<script type="text/javascript">
验证手机号
var phone="41554567456";
var reg=/^[1][0-9]{10}$/;
if(reg.test(phone)){
console.log("yes");
}
</script>
<script type="text/javascript">
校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
var str ="a_32dfsf453";
var reg=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
console.log(reg.test(str));
</script>
Window对象：BOM
浏览器对象，用于访问和操作浏览器窗口
常用属性
doucument对象
doucument：窗口中显示的HTML文档对象
history:浏览器的历史记录对象
locatioin:浏览器地址对象
screen:当前屏幕对象
navigator:浏览器相关信息
history对象
histoty.forward( ) - 前进
histoty.back( ) -后退
location
location.href="跳转的网址"
location.reload( ) - 刷新网页
open(页面的地址url)：方法 打开一个新的窗口（页面） 应该是window.open()，但是JS中默认前面是window的话，window可以不写。最常用的是两个参数：url和打开方式
如果url为空，则默认打开一个空白页面
如果打开方式为空，则默认为新窗口方式
open()方法的返回值：返回新打开的窗口的window对象
onscroll：当滚动条滚动的时候触发
以一定的时间间隔来计算的。
var i=0;
window.onscroll = function(){
document.title = i++;
}
eval( ) 将参数内容转为运算结果
例：eval(5+2) - 7
该方法存在一次需要捕获
try {
var value = eval(5+2);
console.log(value);
} catch (e) {
//给予错误提示
console.log("请重新输入数字);
}
定时器
1.周期性定时器:每隔一段时间，执行一次代码
语法：setInterval(function(){ },time)；
返回的是定时器的id，用来停止此定时器
var n = 5;
var id = setInterval(function(){
console.log(n--);
},1000);
停止定时器
clearInterval(id);
2.一次性定时器：在设定的一个时间间隔后，执行代码。
语法：setTimeout(function(){ },time);
返回的是定时器的id，用来停止此定时器
var id;
function send(){
if(id){
//id非空则定时器以启动，不要再次启动
return;
}
var p = document.getElementById("email");
p.innerHTML="正在发送";
id = setTimeout(function(){
p.innerHTML="发送成功";
//此时定时器自动停止，清空id
id = null;
},3000);
}
function cancel(){
if(id){
//id非空则定时器以启动，可以停止
var p = document.getElementById("email");
//显示以取消
p.innerHTML="取消成功";
//停止定时器
clearTimeout(id);
//清空id
id = null;
}
}
页面加载事件
等待网页DOM结构和图像信息加载完毕执行
Window.onload=function(){...}
onmouseover 事件
当光标出现在标签之上时，触发事件。
网友评论