浏览器内置了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中内置了一个对象Arrayeg: 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属性，所以可以使用这种语法也是可以获得文本框的值： 元素对象.valuevar 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="提交" οnclick="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="提交" οnclick="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" οnclick="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" οnclick="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 οnlοad="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类型的扩展---trimtrim去掉前后空格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" οnblur="checkEmail(this.value)"> <span id="emailError"></span> //这个地方是留给提示的，错了提示就会出来</body></html>
转载于:https://www.cnblogs.com/PinkPink/p/8385929.html
