二、js中基础知识
该篇文章主要是强化一下自己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);//101 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
细水长流，打磨濡染，渐趋极致，才是一个人最好的状态。
浙公网安备 33010602011771号