浏览器内置了javaScript的解析器
javaScript是脚本语言，不用编译，运行在浏览器上面
javaScript简称js
js是基于事件驱动型的编程语言，当发生某个特殊的事件的时候执行一段特殊的程序。
每一个js事件都会对应一个事件句柄，事件句柄的名称是：on+事件名。
eg:click是鼠标单击事件，onclick是鼠标单击事件句柄。
js中的函数 ，有没有返回值随意，函数传不传参数随意
function sum(a,b){}
js中函数没有重载机制，在同一个js中，函数名不能重名。
js程序的调试方法：
1.使用原始方式：alert()
2.使用浏览器的调试模式
一.js数据类型包括以下几种：5种
Undefined
包括具体的值：undefined (初始化，但是没有赋值，就是undefined)
String
包括具体的值：'a',"a","abc",'def'.....
Number
包括具体的值: 1,2,3,1.0,2.0,3.14,NaN,Infinity.....
Boolean
包括具体的值: true,false
Object
包括具体的值: new Object(),new Date(),null......
在js中有一个运算符，非常重要，typeof 运算符
typeof运算符在程序运行时动态的判断变量的数据类型
typeof运算符的使用规则:typeof 变量名
typeof运算符运算结果的类型是以下6种结果中的其中一个：typeof运算结果是字符串类型
"undefined","number","string","object","boolean","function"
1.String 类型相关的属性
prototype属性可以动态的给string类型扩展方法和属性
substr()和substring()属性都是截取
substr(起始下标,长度)
substring(起始下标，结束下标) 不包括结束下标
eg: var name="abcd".substring(1,2);
alert(name);
replace("","");属性可以替换
eg: alert("2018-01-03".replace("-","/"));
2.Number 类型相关的属性
在js中不管是整数还是浮点，都是Number数据类型
eg: var a = 10;
var b = 2.0;
alert(a/b);
重要的函数: isNaN（数据）
isNaN函数的执行结果是true/false
该函数用来判断数据是否是一个数组，不是是true,是数字是false
全拼：is Not a Number
eg: var a = "abc";
var b = 10;
alert(a/e); //true
3.Boolean 类型相关的属性
只有2个值，true,false
Boolean类型的数据还是主要使用在逻辑运算，或者条件控制语句中
js中=、==、===的区别：
= 赋值
== 比较值是否相等
=== 比较值是否相等，同时要求数据类型也要相同
总结: ===更加严格
4.Object 类型
js也是面向对象的编程语言
定义类
定义函数，把这个函数当做一个类来看
eg:
User = function(a,b){ //function user(a,b) {
this.id = a;
this.name = b;
}
var c = new Employee(111,"lisi");
alert(c.id+"--------"+c.name)
//给Employee动态的扩展一个方法
Employee.prototype.work = function(){
alert(this.name+"is Woriking!");
};
c.work();
问题：undefined ， null ，NaN 三者有什么区别？
1.首先他们的数据类型都是不一样的
eg:
alert(typeof undefined); //"undefined"
alert(typeof null); //"object"
alert(typeof NaN); //"number"
2.undefined和null属于：值相等
eg:
alert(undefined == null); //true
alert(null == NaN); //false
alert(undefined == NaN); //false
二.JS控制语句
和java基本是一样的
if
switch
do...while
while
for
for...in
break和continue
with
三 js中的数组
JS中内置了一个对象Array
eg:
var myArray=[1,23,4,55,66];
alert(myArray.length); //长度
for(var i =0;i<myArray.length;i++){ //遍历
alert(myArray[i]);
}
动态初始化
eg:
myArr = new Array(5);
myArr[0]=false;
myArr[1]="abc";
myArr[2]=100;
myArr[3]=1.0
myArr[4]=new Object();
for(var i =0;i<myArr.length;i++){ //遍历
alert(myArr[i]);
}
数组中常用的方法：
join() 以特殊的符号链接数组中的每一个元素，最后生成一个字符串
reverse() 反转数组中的元素
pop() 将数组中最右边的元素删除
push()
toString()
eg:
var a = [1,"abc",false,3.0];
//join方法的作用，以特殊的符号链接数组中的每一个元素，最后生成一个字符串
var str=a.join("-");
alert(str); //1-abc-false-3
获取文本框的思路：
第一步先获取整个文本框的节点，第二步获取文本框节点的value
详细：
通过元素的id获取该节点
document内置对象，属于DOM对象，下面属性dom编程
document有一个方法可以通过id获取元素：document.getElementById("xxx")
如果，input文本框中有value属性，所以可以使用这种语法也是可以获得文本框的值： 元素对象.value
var username = document.getElementById("xxx").value;
alert(username);
eg: 完整列子，通过id拿到一个文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function getUsername(){
var username = document.getElementById("username").value;
alert(username);
}
</script>
</head>
<body>
<input type="text" id="username"/>
<input type="button" value="提交" onclick="getUsername();"/>
</body>
</html>
完整列子，通过name获得所有复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function getAllCheckboxValue(){
//1.获取所有的复选框
//通过name获取所有的控件，name在一个html页面中是可以重名的
var allCheckboxs = document.getElementsByName("interest");
// alert(allCheckbox.length); //5
//2.遍历数组，获取每一个复选框的节点，获取复选框节点的value
for(var i=0;i<allCheckboxs.length;i++){
//alert(allCheckbox[i]);
var checkboxObj = allCheckboxs[i];
alert(checkboxObj.value);
}
}
</script>
</head>
<body>
看书<input type="checkbox" name="interest" value="lookbook"/>
学习<input type="checkbox" name="interest" value="study"/>
英语<input type="checkbox" name="interest" value="english"/>
睡觉<input type="checkbox" name="interest" value="sleep"/>
水果<input type="checkbox" name="interest" value="food"/>
<br><br>
<input type="button" value="提交" onclick="getAllCheckboxValue();"/ >
</body>
</html>
js中万能的属性之一 innerHTML
//innerHTML属性可以设置元素中的html代码，也就是向页面写东西。
var xxx = document.getElementById("input或div的id元素");
xxx.innerHTML="新年快乐！";
//也可以获取该元素中的HTML的代码
alert(xxx.innerHTML);
全选和取消全选
类似于这种的都是发生了鼠标的单击事件onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选和取消全选(runoob.com)</title>
<script type="text/javascript">
function checkOrCancelAll(){
//1.获取checkbox的选中状态
//1.1获取checkbox的元素
var chkElt = document.getElementById("chkElt");
//1.2.设置选中状态
var checkedState = chkElt.checked;//checked属性可以获取复选框的选中状态，又可以设置不选中的状态。
//2如果checked=true,将所有的复选框选中，若checked=false，将所有的复选框取消选中。
//2.1获取所有的复选框
var allInterests = document.getElementsByName("interest");
//2.2循环遍历取出每一个复选框的对象
if(checkedState){
//全选
for(var i = 0;i<allInterests.length;i++){
//设置复选框的选中的状态
allInterests[i].checked = true;
}
}else{
//取消全选
for(var i = 0;i<allInterests.length;i++){
allInterests[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" id="chkElt" onclick="checkOrCancelAll();" />全选<br>
看书<input type="checkbox" name="interest" value="lookbook"/><br>
学习<input type="checkbox" name="interest" value="study"/><br>
英语<input type="checkbox" name="interest" value="english"/><br>
睡觉<input type="checkbox" name="interest" value="sleep"/><br>
水果<input type="checkbox" name="interest" value="food"/><br>
</body>
</html>
全选和取消全选 的另一种方式，加了一个span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选和取消全选(runoob.com)</title>
<script type="text/javascript">
function checkOrCancelAll(){
//1.获取checkbox的选中状态
//1.1获取checkbox的元素
var chkElt = document.getElementById("chkElt");
//1.2.设置选中状态
var checkedState = chkElt.checked;//checked属性可以获取复选框的选中状态，又可以设置不选中的状态。
//2如果checked=true,将所有的复选框选中，若checked=false，将所有的复选框取消选中。
//2.1获取所有的复选框
var allInterests = document.getElementsByName("interest");
//2.2循环遍历取出每一个复选框的对象
var mySpan = document.getElementById("mySpan");
if(checkedState){
//全选
for(var i = 0;i<allInterests.length;i++){
//设置复选框的选中的状态
allInterests[i].checked = true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i = 0;i<allInterests.length;i++){
allInterests[i].checked = false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chkElt" onclick="checkOrCancelAll();" />
<span id="mySpan">选中</span><br>
看书<input type="checkbox" name="interest" value="lookbook"/><br>
学习<input type="checkbox" name="interest" value="study"/><br>
英语<input type="checkbox" name="interest" value="english"/><br>
睡觉<input type="checkbox" name="interest" value="sleep"/><br>
水果<input type="checkbox" name="interest" value="food"/><br>
</body>
</html>
Js中日期的处理
eg:
<script type="text/javascript">
var NewDate = new Date(); //系统当前的时间
alert(NewDate);
var year = NewDate.getFullYear();//年，这个getFullYear可以防止千年虫的问题
alert(year);
var time = NewDate.getTime(); //秒
alert(time);
</script>
时针的列子
load 事件
onload 事件句柄
1.当整个html页面全部加载完毕之后，load事件发生
2.onload事件句柄需要编写到body标签中
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取时间(runoob.com)</title>
<script type="text/javascript">
start = function(){
window.setInterval("displayTime()",1000); // 让时间每秒动一下
}
function displayTime(){
//1.获取div元素
var timeDiv = document.getElementById("timeDiv");
//2.获取系统时间
var nowTime = new Date();
var strNowTime = nowTime.toLocaleString(); //将时间转换为本地字符串
//3.将系统时间设置到div元素中
timeDiv.innerHTML = strNowTime;
}
</script>
</head>
<body onload="start();">
<div id="timeDiv"/>
</body>
</html>
js的事件 可以看下这个 http://www.cnblogs.com/tugenhua0707/p/4501843.html
js表单的验证
1.表单验证的时候，尽量不要在点击注册按钮或者提交或者确定按钮的时候才验证，最好用户填写一个验证一个，这样的设计比较人性化
2.让我们的表单失去焦点的时候就验证信息
验证通过，不显示任何信息，验证失败，就提示错误信息，将错误信息显示到文本框的右边
3.失去焦点的事件是：blur事件， 事件的句柄:onblur
4.调用验证方法，将用户名传递给该方法: this.value
5.验证那些？
验证用户名不能为空
验证用户名的长度必须【6-14】
6.文本框获取焦点的事件focus ,句柄onfocus
string类型的扩展---trim
trim去掉前后空格
eg:
<script type="text/javascript">
var s = " abc def d ";
s = s.trim();
alert("嘻嘻"+s); //嘻嘻abc def d
</script>
js中怎么创建正则表达式对象呢？
第一种方式常用：
var regexp = /正则表达式flag;
第二种方式：
var regexp = new RegExp("正则表达式","flag");
注：flag可选值:i,g,m
i:忽略大小写
g:当前行所有数据
m:支持多行搜索
i,g,m可以合并使用
正则表达式对象中有一个很重要的方法，叫做test!!!!!!
eg: var regexp = /正则表达式/;
var retValue = regexp.test(字符串); // retValue结果是true 或 false ,true是表明字符串和正则相匹配
eg:
一个邮箱完整的列子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>校验(runoob.com)</title>
<script type="text/javascript">
function checkEmail(email){
var emailRegExp=/^w+([.-]?w+)*@w+([.-]?w)*(.w{2,3})+$/;
var ok = emailRegExp.test(email); //传进来的参数与正则进行匹配,得到一个结果，结果有两种情况，匹配或不匹配
var emailError = document.getElementById("emailError"); //获取提示的id
if(ok){
emailError.innerHTML=""; //匹配
}else{
emailError.innerHTML="<font color='red'>邮箱的格式不正确</font>"; //不匹配
}
}
</script>
</head>
<body >
邮箱地址<input type="text" name="email" onblur="checkEmail(this.value)">
<span id="emailError"></span> //这个地方是留给提示的，错了提示就会出来
</body>
</html>