该篇文章主要是强化一下自己javaScript的基础，让写代码变得更轻松些。基础好的请忽略。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，
为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1、在HTML中嵌入js代码的两种方式：
1）插入在标签内部，写在事件句柄后面
<input type="button" value="亲，点击我" onclick="window.alert('hello world!')window.alert('hello')>
2）在独立的脚本块，其中可以编写js代码
<script type="text/javascript">
window.alert("hello world");
</script>
备注：<script>标签不一定出现在head标签中，可以出现在HTML页面中的任何位置
2、语法规范和书写规范
2.1、javaScript语法规范说明：
1）区分大小写；
2）其中的变量是弱类型；
3）每行结尾的分号可有可无，如果没有浏览器会自动加上
4）{} 括号用于代码块
5) 注释方式和java和c语言相同 2.2、变量的书写规范：
1）首字符必须是字母(大小写均可)、下划线、美元符号
2）其余字母可以使下划线、美元符号、任意字母或者数字字符
3）变量名不能是关键字或者保留字
a、变量声明：var 变量名;
变量在声明的时候，没有使用var关键字，那么这个变量不管是定义在哪个位置上，都是全局变量
b、变量赋值：变量名=值;
js中的变量若没有显示的赋值，系统默认赋值underfined; underfined在js中是一个具体的值,表示未定义
c、一行上可以定义多个变量
var a,b,c=300;//变量a和变量b都是underfined，变量c是300
备注：
JavaScript也遵守就近原则，全局变量作用域是整个js程序，局部变量只作用于某个函数；
变量没有定义，直接访问会报错。[结果不是underfined]；
变量定义之后没有赋值，系统默认赋值underfined；
3、函数语法格式：
第一种方式：
function 函数名(形式参数列表){
函数体由JavaScript语句构成;
} 示例：
function testFun(){
//JS的函数执行结果之后的返回值类型是任意的，而且也可以不返回任何数据
//return 100;
//return false;
//return "abc";
} 第二种方式：
函数名 = function(形式参数列表){
函数体;
} 备注:
js中的函数没有重载机制,在统一个js代码中，函数名不能重名；
函数必须手动调用的时候才会执行；
4、js中的数据类型(5种)：
4.1、String类型(字符串类型)：包括具体的值：'a' 'bsdfasdfasef'
js中没有字符类型，只有字符串类型(字符串这种数据类型的数据又可以称为”字符串对象“,虽然被称为字符串对象，但是字符串对象不属于Object类型)
String的属性
1）length属性：
字符串的名字.legth: 获取字符串长度
2）prototype属性：可以动态给String类型的数据扩展方法和属性
示例1：给所有String(字符串动态的扩展一个方法叫做doSome)
var ename="abdcdf";
alert(ename.length);//获取字符串长度
//以下是给所有String(字符串动态的扩展一个方法叫做doSome)
String.prototype.doSome=function(){
alert("dosome.....");
};
//调用doSome方法
ename.doSome();
3）String对象中的方法：
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。注意不包括结束下标
replace() 替换与正则表达式匹配的子串。
示例1：
ename=ename.toUpperCase();
alert(ename);
示例2：以下替换的时候，只替换第一个”-“,如果想要全部替换的话，的多次使用replace。想要全部替换也可以，但是需要使用正则表达式
alert("1978-10-10".replace("-",",").replace("-",","));
4.2、Number类型：
Number数据类型的取值：包括具体的值：13、1.0、NaN，Infinity
1）1,3.0,123
2）NaN
NaN表示Not a Number，不是一个数字，但是NaN本身是一种Number数据类型，计算结果应该返回数字，但是最终结果不是数字的时候，
结果就是NaN
3）Infinity
infinity汉语意思是无穷无限大；除数是0的时候，结果一定是Infinity
4.3）Boolean 包括具体的值：ture false，
//boolean类型
var boo=true;
//表示的是字符串true
var boo="true"; var a=true;
var b=true;
alert(a==b);//true a="abc";
b="daf";
alert(a==b);//false a=true;
b=1;
alert(a==b);//true 1和true是等量关系
alert(a === b);//false 1和ture虽然是等量关系，但是数据类型不同 a=true;
b=true;
alert(a === b);//true
4.4）Object 包括具体的值：new Object(),new Date(), new Employee(),null.....
js也是面向对象的编程语言;js中自定义的函数，函数名本身就是类名;
js中定义类的2种方法：
1）方法一：
function User(id,name){
//属性
//id，name都是user类的属性
this.id=id;
this.name=name;
//方法
this.shopping=function(){
alert(this.name+"is shopping");
};
}
//创建对象，类似java
var user=new User();
user.shopping(); user=new User(110,"zhangsan");
user.shopping(); 2）js中定义类的第二种方法：
Employee=function(id,name){
this.id=id;
this.name=name;
}
var e=new Employee(111,"lisi");
alert(e.id+","+e.name);
//给Employee动态扩展一个方法：
Employee.prototype.work=function(){
alert(this.name+"is working!");
};
//调用扩展的方法
e.work();
4.5）Undefined 包括具体的值：underfined
Undefined数据类型只有一个值，这个值就是underfined；只声明没有给变量赋值或者手动赋值undefined，变量的值都是undefined；
5、运算符
5.1、typeof运算符：typeof运算符在程序运行阶段动态判断变量的数据类型
1）如何使用：typeof 变量名
2）typeof 运算符运算结果是以下六种结果之一：
"undefined" "number" "string" "objcet" "boolean" "function"
备注：typeof运算结果是字符串类型
示例：
function sum(a,b){
if((typeof a)!="number" || (typeof b)!="number"){
alert("参数必须提供数字类型");
return;
}
//执行到此处说明参数类型正常
return a+b;
} typeof(1): number
typeof(NaN): number
typeof(Number.MIN_VALUE): number
typeof(Infinity): number
typeof("123"): string
typeof(true): boolean
typeof(window): object
typeof(document): object
typeof(null): object
typeof(eval): function
typeof(Date): function
typeof(sss): undefined
typeof(undefined): undefined
详述：
a、常规数字和特殊的数字的 typeof 返回值为number
javaScript中特殊的数字类型包括：
Infinity 表示无穷大特殊值
NaN 特殊的非数字值
Number.MAX_VALUE 可表示的最大数字
Number.MIN_VALUE 可表示的最小数字（与零最接近）
Number.NaN 特殊的非数字值
Number.POSITIVE_INFINITY 表示正无穷大的特殊值
Number.NEGATIVE_INFINITY 表 示负无穷大的特殊值
b、
对于字符串类型,typeof 返回的值是 string。比如typeof("123")返回的值是string。
对于布尔类型,typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined。比如：typeof(sss)、typeof(undefined)都返回undefined。
5.2、JS中的= == ===的区别
= 赋值：
== 比较值是否相当
=== 比较值是否相同，同时要求数据类型也相同（更加严格）
underfined,null,NaN各自的数据类型不同：
alert(typeof underfined);//"underfined"
alert(typeof null);//"object"
alert(typeof NaN);//"number" underfined 和null属于：值相等
alert(underfined==null);//true
alert(null==NaN);//false
alert(underfined==NaN);//false
5.3void运算符
void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值。
例如，从 HTML 的 <a> 元素调用 JavaScript 函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果
示例：
<a href="javascript:void(0);" onclick="alert('execute js code!')">
只执行一段js代码，不进行页面跳转，还想保留超链接的样式，需要使用void运算符
</a>
6、常见函数、单引号和双引号的使用、流程控制
6.1、常见函数
1）isNaN()：该函数的作用是用来判断数据是否是一个数字，不是数字是true，是数字是false
window.onload = function() {
var iNumber=Number(prompt("输入一个5到100之间的数字",""));
if(isNaN(iNumber)){
document.write("请确认您的输入正确");
}else if (iNumber>100||iNumber<5) {
document.write("您的输入的数字不在5和100之间");
}else {
document.write("您的输入的数字是"+iNumber);
}
}
2）parseInt()：该函数将非数字转换成数字，不保留小数位
var price="100";
price=parseInt(price);//将字符串price转换成Number类型的数字
alert(price+1);//
price="3.25";
price=parseInt(price);
alert(price+1);//4 自动进行了四舍五入；
3）parseFloat():该函数可以将非数组转化为数字，但是保留小数
price="3.95";
price=parseFloat(price);
alert(price);//3.95
6.2、单引号和双引号的使用
1）只使用字符的字符串，单引号和双引号没有区别
2）在单引号包括的字符串中可以直接用双引号，在双引号包括的字符串中可以直接用单引号
<input type="button" onclick="alert("1")">-------------------不正确
<input type="button" onclick="alert('1')">-------------------正确
3）如果在双引号包括的字符串中用双引号，需要用反斜杠转义，注意是"\" ;同样在单引号包括的字符串中用单引号，也需要转义“\”
var str = "abc\"def\"ghi"
用反斜杠来禁止解析双引号
4）如果要用反斜杠，则输入‘\\’
6.3、流程控制
1）if else
window.onload = function() {
var iNumber=Number(prompt("输入一个5到100之间的数字",""));
if(isNaN(iNumber)){
document.write("请确认您的输入正确");
}else if (iNumber>100||iNumber<5) {
document.write("您的输入的数字不在5和100之间");
}else {
document.write("您的输入的数字是"+iNumber);
}
}
2）while
var i=isum=0;
while(i<=100){
isum +=i;
i++;
}
alert("isum-->"+isum);
7、数组的使用：初始化、赋值、遍历、数组中常用方法
1）静态初始化
var myArray=[1,2,3,44];
2）动态初始化
var myArray=new Array(5);//动态分配5个控件，没有手动赋值，系统默认赋值underfined
遍历：
for(var i=0;i<myArray.length;i++){
alert("elt:"+myArray[i]);//undefined
}
赋值：[js数组中的数据类型不一定统一]
myArray[0]=false;
myArray[1]="abc";
myArray[2]=1.0;
myArray[3]=new Object();
3）遍历
for(var i=0;i<myArray.length;i++){
alert("elment:"+myArray[i]);
}
4）数组中常用方法
a、join()：以特殊符号链接数组中的每一个元素，最后生成一个字符串
var a=[1,'abc',false,3.0];
var str=a.join("-");
b、reverse()：反转数组中的元素
a.reverse();
c、pop()：其取值为：数组最后边的元素， 且执行后数组最右边的元素会被删除
d、push()：添加元素
e、toString()：取值为：数组的每个元素，且各个元素用, 隔开
8、JS对日期的处理
//获取系统当前日期
var nowTime=new Date();
alert("系统当前日期-->"+nowTime); //将系统时间转换成具有本地语言环境的时间
var strNowTime=nowTime.toLocaleString();
alert("本地语言环境的时间-->"+strNowTime); //可以获取日期的年月日时分秒，自己添加格式：
var year=nowTime.getYear();
alert("year-->"+year); //避免千年虫问题
year=nowTime.getFullYear();//这个方法更通用
alert("FullYear-->"+year); //获取毫秒:getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
var time=nowTime.getTime();
alert(time);
9、js中的事件
9.1、onload事件
页面加载的时候就自动显示出当前系统的时间,并且每隔一秒钟刷新一下页面
<script type="text/javascript">
//onload事件句柄需要编写到body标签中
function displayTime(){
//1.获取div元素
var timeDiv=document.getElementById("timeDiv");
//2.获取系统时间
var nowTime=new Date();
var strNowTime=nowTime.toLocaleString();
//3.将系统时间设置到div元素中
//innerHTML属性用来 设置或返回行的开始标签和结束标签之间的 HTML
timeDiv.innerHTML=strNowTime;
}
//4.每隔1秒调用displayTime函数
function start(){
//设置每隔特定时间执行特定函数
window.setInterval("displayTime()",1000);
}
</script>
9.2、onclick事件(涉及div和span、innerHTML和innerText区别)
<html>
<head>
<title>使用js的DOM操作div和span元素</title>
<script type="text/javascript">
/*
1、innerHTML
用法一：将后面的字符串当做HTML代码解释并且执行
divElt.innerHTML="<font color='red'>hello World</font>"; 效果为将hello World字体颜色置为红色显示出来
用法二：显示标记之间得所有内容，包括代码本身
alert(divElt.innerHTML);效果为 <font color='red'>hello World</font>
2、innerText:即使后面指定的字符串是HTML代码，也只是当做普通字符串来处理
divElt.innerText="<font color='red'>测试</font>";效果为：<font color='red'>测试</font>
3、div会独占一行，span被用来组合行内元素
*/
function setDiv(){
//获取div元素
var divElt=document.getElementById("myDiv");
//可以通过innerHTML属性设置元素中的HTML代码，也可以获取该元素中的HTML代码
//divElt.innerHTML="<font color='red'>hello World</font>";
divElt.innerText="<font color='red'>测试</font>";
//获取div元素中的HTML代码
alert(divElt.innerHTML);//当为：<div id="myDiv"></div> 结果为： <font color='red'>hello World</font>
}
</script>
</head>
<body id="body1">
<input type="button" value="设置div中的文本" onclick="setDiv();" />
<!-- <div id="myDiv"></div> -->
<span id="myDiv"></span>
</body>
</html>
9.3、失去焦点事件onblur(涉及正则表达式简单应用)
<html>
<head>
<title>正则表达式</title>
<script type="text/javascript">
/*
1、正则表达式是一门独立的学科，和任何编程语言无关，
最初使用在医学方面，表示神经传输符号，在现代计算甲编程中也可以使用大量的正则表达式
2、在编程中使用正则表达式最主要是用来做字符串模式匹配的。尤其在JavaScript中使用正则表达式居多
3、在正则表达式中规定了一些特殊的符号，每一个符号都具有特殊的含义
4、在实际开发中我们可以从网络中搜索相关的常用的正则表达式，直接使用
但是使用前，需要进行反复的测试；javaScript程序员更应该研究在js中如何使用正则表达式而不是研究正则表达式该如何写
5、常见的正则表达式符号：
^ 字符串的开始
& 字符串的结束
\s 空白
+ 出现1-N次
* 出现0-N次
{2,5} 出现[2-5]次
？ 出现至少1次
[0-9] 0-9的数字任意出现一个
[0-9a-zA-Z]{3,} 0-9a-zA-Z 之前的字符至少出现3次 6、在js中怎么创建正则表达式对象？正则表达式对象中那个方法最常用？
创建正则表达式对象有两种方式:
第一种方式：【常用】
var regexp=/正则表达式/flag;
第二种方式：
var regexp=new RegExp("正则表达式","flag"); 注：flag可选值：i、g、m
i：忽略大小写
g:当前行所有数据
m:支持多行搜索
i,g,m 可以合并使用
正则表达式对象中有一个很重要的方法：叫做test
语法格式：
var regexp=/正则表达式/;
var retValue=regexp.test(字符串);
retValue的值可能是true;true表示正则表达式符合正则表达式
retValue的值也可能是false;false表示正则表达式不符合正则表达式 */
function checkEmail(email){
//这个也是重点：
var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式对邮箱地址格式验证
alert(email);
var ok=reg.test(email);//正则表达式有一个test()方法
var emailError=document.getElementById("emailError");
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>
9.4、获取焦点事件onfocus(登录表单验证)
<!DOCTYPE html>
<html>
<head>
<title>表单验证.html</title>
</head>
<body>
<script type="text/javascript">
/*
验证功能描述：
1、用户名不能为空
2、用户名长度6-14
3、密码不能为空
4、密码至少6位
5、密码和确认密码必须一致
*/
String.prototype.trim=function(){
return this.replace(/^\s+/,"").replace(/\s+&/,"");
};
function checkName(username){
var ok=false;
username=username.trim();//去除前后的空白
var nameError=document.getElementById("nameError");
if(username==""){
nameError.innerHTML="<font color='red'>用户名不能为空</font>";
ok=false;
}else if(username.length<6 || username.length>14){
nameError.innerHTML="<font color='red'>用户名长度必须6-14</font>";
ok=false;
}else{
nameError.innerHTML="";
ok=true;
}
return ok;
}
function clearNameError(){
var nameError=document.getElementById("nameError");
nameError.innerHTML="";
}
function checkUserpswd(){
var ok=false;
var pswdError=document.getElementById("pswdError");
if(pswd==""){
pswdError.innerHTML="<font color='red'>密码不能为空</font>";
ok=false;
}else if(pswd.length<6){
pswdError.innerHTML="<font color='red'>密码不能少于6位</font>"
ok=false;
}else{
pswdError.innerHTML="";
ok=true;
}
return ok;
}
function clearPswdError(){
var pswdError =document.getElementById("pswdError");
pswdError.innerHTML="";
}
function isSame(){
var ok=false;
//获取密码
var userpswd=document.getElementById("userpswd").value;
//获取确认密码
var confirmpswd=document.getElementById("confirmpswd").value;
//比较
var confirmPswdError=document.getElementById("confirmPswdError");
if(userpswd != confirmpswd){
confirmPswdError.innerHTML("<font color='red'>密码和确认密码不一致"</font>);
ok=false;
}else{
pswdError.innerHTML="";
ok=true;
}
return ok;
}
function clearSameError(){
var confirmPswdError=document.getElementById("confirmPswdError");
pswdError.innerHTML="";
}
function checkAll(){
var username=document.getElementById("username").value;
var userpswd=document.getElementById("userpswd").value
if(checkName(username) && checkUserpswd(userpswd) && isSame()){
document.forms["userForm"].action="http://localhost:8080/oa/register";
document.forms["userForm"].method="get";
document.forms["userForm"].submit();
}
}
</script>
<form name="userForm">
用户名
<input
type="text"
id="username"
name="username"
onblur="checkName(this.value);"
onfocus="clearNameError();"
/>
<span id="nameError"></span>
<br>
密码
<input
type="password"
id="userpswd"
name="userpswd"
onblur="checkUserpswd(this.value);"
onfocus="clearPswdError();"/>
<br>
<span id="pswdError"></span>
确认密码
<input
type="password"
id="confirmpswd"
name="confirmpswd"
onblur="isSame();"
onfocus="clearSameError()"/>
<span id="confirmPswdError"></span>
<br>
<input type="button" value="注册" onclick="checkAll()">
</form>
</body>
</html>
9.5、表单提交事件onsubmit
<html>
<head>
<title>表单验证</title>
<!--
1、表单验证的时候，尽量不要在点击注册按钮的时候才验证，最好用户填写一个
验证一个，这样设计比较人性化。
2、表单提交事件：submit,事件句柄：onsubmit,这个事件句柄需要编写到form标签中
<form onsubmit="return true;">提交表单
<form onsubmit="return true;">不提交表单
-->
</head>
<body>
<script type="text/javascript">
var usernameOk=false;
function checkUsername(username){
//alert(username);
//验证用户名不能为空
//if(username.length==0){}
var usernameErrorMsg=document.getElementById("usernameErrorMsg");
}
function checkUserName(username){
var usernameErrorMsg=document.getElementById("usernameErrorMsg");
if(username=="usernameErrorMsg"){
usernameErrorMsg.innerHTML="<font color='red'>用户名不能为空</font>";
}else if(username.lenght<6 || username.length>14){
usernameErrorMsg.innerHTML="<font color='red'>用户名长度必须在[6-14]之间</font>";
}esle{
usernameErrorMsg.innerHTML="";
usernameOk=ture;
}
}
function cleckNameError(){
var usernameErrorMsg=document.getElementById("usernameErrorMsg");
usernameErrorMsg.innerHTML="";
}
function checkAll(){
return false;
}
</script>
<form
name="username"
method="get"
action="http://localhost:8080"
onsubmit="return checkAll();">
用户名
<input
type="text"
name="username"
onblur="checkUserName(this.value);"
onfocus="cleckNameError();"/>
<!--
其中的this代表文本框对象，
-->
<span id="usernameErrorMsg"></span><br>
<input type="submit" value="注册" />
</form>
</body>
</html>
10、js中的DOM对象和BOM对象
10.1、DOM对象：创建元素，并追加元素
<html>
<head>
<title>js中通过DOM创建元素，并追加元素</title>
<script type="text/javascript">
function addElt(){
//alert("test");
//向div节点中追加一个子节点font
//1、获取div节点
var myDiv=document.getElementById("myDiv");
//2、创建font节点
var fontElt=document.createElement("font");//重点方法
fontElt.innerHTML="测试";
fontElt.color="red";
//3、将font节点追加到div节点中
myDiv.appendChild(fontElt);//重点方法
}
</script>
</head>
<body>
<input type="button" value="给div添加font标签" onclick="addElt();" />
<div id="myDiv">
</div>
</body>
</html>
document.location.href="http://www.baidu.com";
document.location="http://www.baidu.com";
10.2、BOM对象：window是BOM对象(Browser Object Model)，代表整个浏览器窗口
BOM对象：window是BOM对象(Browser Object Model)，代表整个浏览器窗口
window对象中的函数：eval()、open()、setInterval()、window.alert()、window.confirm()、window.open()
window.location.href="http://www.baidu.com"
window.location="http://www.baidu.com"
1）eval函数
<!DOCTYPE html>
<html>
<head>
<title>eval函数</title>
<script type="text/javascript">
//eval函数的作用：将普通字符串当做js代码解释执行
window.eval("var i=100;")
//以上的程序等同于 var i=100;
alert(i);
/*
重点：
java程序连接数据库之后，查询数据然后拼接成一个json格式的字符串发送给浏览器，浏览器只是接受到一个普通的json格式的字符串，然后在js中
使用eval函数，将json格式的字符串转换成json对象
*/
var javaSendStr="var o={\"usercode\":110,\"username\":\"zhangsan\"};";
window.eval(javaSendStr);
alert(o.usercode+","+o.username);
</script>
</head>
<body>
</body>
</html>
API地址： https://www.w3cschool.cn/javascript/js-window.html