沉默必出精品
经过将近一个月的学习,给大家分享JavaScript的用法(后续还有JavaScript中的程序库之一的jQuery,jQuery对常用方法实现封装)
这篇文章包含(重点是要会调试,发现程序在哪里出错,调试是一种很重要的技能)
- 解释JavaScriptECMAScript标准
- 使用JavaScript操作BOM对象
- 使用JavaScript操作DOM对象
- 会实现简单的正则表达式(最重要的时再遇见的时候能看懂)
JavaScript基础
注意:在使用事件绑定时需要通过查询进行绑定,不要再html行内写入事件,在后期修改时,比较麻烦
什么是JavaScript
JavaScript是一种描述性语言,也是一种基于对象和事件驱动的,并具有安全性能的脚本语言。
特点:
1.JavaScript主要用来在HTML页面中添加交互行为
2.JavaScript是一种脚本语言,语言和Java类似
3.JavaScript一般用来编写客户端的脚本
4.JavaScript是一种解释性语言,边执行边解释
JavaScript部分
1.ECMAScript标准
2.浏览器对象模型(BOM)
3.文档对象模型(DOM)
JavaScript的基本结构
<Script type=”text/JavaScript“> 它的type属性,用于指定文本使用的语言类别为text/JavaScript
JavaScript语句;
</Script>
引用JavaScript的方式
内部JavaScript文件
使用外部JavaScript文件(Src属性引用即可) 注意:外部文件不包含<Script>标签
变量的声明和赋值
语法:var 变量名;
注意的是:JavaScript严重区分大小写,非常严重
数据类型
undefined:未定义类型
null:空类型
number:数值类型 可以表示32位的整数,也可以表示64位的浮点数
string:字符串类型
Boolean:布尔类型
undefined和null的区别
相同的是:进行类型判断时相同
不同:未赋值和空值(null 对象,数组)
Typeof()运算符可以用来获取这个数据类型 括号中写入变量名称即可
字符的属性和方法
属性:length 获取字符长度
语法
字符串对象.方法名();
Indexof(str,index) str:查找的字符 index:从哪开始
charAt(index)返回指定位置的字符
toLowerCase() 将字符串转换位小写
toUpperCase()将字符串转换位大写
Split(str)分割位字符串数组
数组
语法:var 数据名称=new Array(Size) 括号中可以写字符串长度也可也写数组数据
通过下标来进行访问
数组的常用属性和方法
length:数组的长度
Join():把所有元素放到一个字符串中
Sort():对数组进行排序
Push()在末尾添加一个元素或多个元素,并返回新的长度
Splice(起始位置,数量):删除,从那开始删除几个
运算符号
算数运算符:+ - * / % ++ --
比较运算符:> < >= <= == != === !==
逻辑运算符: && || !
赋值运算符: = += -=
==和===的区别
相同点:进行判断数据是否相同
不同点:===判断数据类型和值,==只判断值
逻辑控制语句:条件结构和循环结构
条件结构
语法:
If(表达式)
{
代码
}
Else
{
代码
}
Switch(表达式)
{
Case 值:
代码
break;
default:
代码
}
注意:switch结构可以进行贯穿
循环结构
语法:
For(初始化;条件;++或--){代码}
While(条件){代码}
Do{代码}while(条件)
For(变量 i in 对象){代码} 注意:通过下标访问
中断循环
break:跳出循环,中断
continue:跳出当前循环,进行下一次循环
注释:当行注释 // 多行注释:/**/
输入和输出
Alert(”提示信息“)
Prompt(”提示信息“,"输入框的默认值")
注意在每一条JavaScript语句以;分号结尾
程序调试
在浏览器中F12进入查看
系统函数
Parseint():解析一个字符串,返回一个整数
Parsefloat():解析一个字符串,返回一个浮点数
Isnan():检查参数是否为数值类型(如果是数值返回false否则返回true)
自定义函数
语法:function 函数名称(参数){代码 return 返回值} 注意:在定义参数时不需要定义参数
调用函数在事件名=函数名称即可;
推荐写法为:使用id进行查询绑定函数
document.getElementById("Iid").οnclick=function(){JavaScript代码}
变量的作用域
全局变量和局部变量:在函数中的变量为局部变量,其他为全局变量
事件
onclick:鼠标单击某个对象
onload:窗体加载事件
Onchange:内容发生改变时
Onkeydown:某个按键按下时
Onmouseover:鼠标指到某元素上
这是一个小案例:实现查询字符串中包含A或a的字符串个数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var Item=new Array("zhangsan","liai","wangwu","zhaoliu");
var Index=0;
document.write("<h3>在下面字符串中包含多少A或者a</h3>"+"<br>");
for(var i=0;i<Item.length;i++)
{
if(Item[i].indexOf('a') !=-1 || Item[i].indexOf('A')!=-1)
Index++;
document.writeln(Item[i]+"<br>");
}
document.write(Index);
</script>
</body>
</html>
操作BOM对象
BOM对象(浏览器对象模型):提供了独立与内容的可以与浏览器窗口进行交互的对象结构
Window对象
常用属性
1.history:有关客户访问过的URL的信息
2.location:有关当前URL的信息
3.screen:只读属性,包含有关客户端显示屏幕的信息
语法:window.属性=”属性值“
常用方法 (在调用window方法的时候window可以去掉,window对象是全局对象)
注意很多的方法已经不再使用,只是让大家知道
1.prompt():显示可提示用户输入的对话框
2.alert():显示一个提示信息和一个确定按钮
3.confirm():显示一个提示信息,返回一个Boolean值,确认和取消
4.close():关闭浏览器窗口
5.open():打开一个新的页面,加载到URL当中 语法:open(地址,窗口名称,窗口特征(使用空格隔开))
6.setTimeout():在指定的毫秒后调用该函数
7.setInterval():按照指定周期来调用函数或表达式
history对象
方法
Back():加载history对象列表中的前一个URL 相当于浏览器 后退
Forward():加载history对象列表中的后一个URL 相当于浏览器前进
Go():加载某一个 可以正数也可以负数,正代表前进,负代表后退
location对象(主作用:实现页面跳转)
属性
host:设置或返回主机名和当前URL的端口号
hostname:设置或返回当前的URL的主机号
href:设置或返回完整的URL
方法
Reload():重新加载当前文档
Replace():用新的文档替换当前文档 不进入URL历史记录,也就代表不可以后退
Document对象
常用属性
referrer:返回载入当前文档的URL 基于服务器才可以,文件没用
URL:返回当前文档的URL 只读属性,不能用来页面跳转
常用方法
Getelementbyid():返回指定第一个id对象(id)
Getelementbyname():返回一个指定名称的对象集合(匹配带name属性的控件) 注意:返回的是一个数组
Getelementbytagname():返回标签名的对象的集合(标签)
Write():向文档写文本、HTML表达式或JavaScript代码
innerHTML:是几乎所有的HTML元素都有的属性
Date对象
语法:var 变量名称=new Date("参数");
方法
GetFillyear():年
GetMonth():月份 注意:月份需要+1
Getdate():天数
GetHours():小时
GetMinutes():分钟
GetSeconds():秒
Getday():星期几
实现获取当前年月日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>你好欢迎访问贵美商城!</h2>
<p id="Hid"></p>
</body>
</html>
<script type="text/javascript">
Show();
//alert(Sj);
function Show(){
var Sj=new Date();
var Item=document.getElementById("Hid");
var Year=Sj.getFullYear(); //获取年
var Month=Sj.getMonth()+1; //获取月
var DateRi=Sj.getDate(); //获取日
var Hours=Sj.getHours(); //获取时
var Minutes=Sj.getMinutes(); //获取分
var Seconds=Sj.getSeconds(); //获取秒
var Wu="";
var Day=Sj.getDay(); //获取星期
if(Shi>12){
Wu="PM";
}
else{
Wu="HM";
}
if(Day==0){
Day=7;
}
Item.innerHTML=Year+"年"+Month+"月"+DateRi+"日 "+Hours+":"+Minutes+":"+Seconds+ Wu +"星期"+(parseInt(Day));
Kai();
}
//实现指针走动的效果
function Kai(){
//一秒调用一次
setInterval("Show()",1000);
}
</script>
Math对象
常用方法
Ceil():向上取整
Floor():向下取整
Round():四舍五入
Random():产生一个0-1之间随机数
使用随机数实现猜大小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请猜0-100之间的任意一个整数:<input type="" name="" id="Count" value="" /><br>
<p id="tip">……</p>
<input type="button" name="" id="" value="Go" onclick="OpenCai()"/>
<input type="button" name="" id="" value="再想一想" onclick="CloseTing()"/>
</body>
</html>
<script type="text/javascript">
//生成随机数
var Item=parseInt(Math.random()*100+1);
//在控制台显示数据
console.log(Item);
function OpenCai(){
var Set=document.getElementById("Count");
if(isNaN(Set.value)){
document.getElementById("tip").innerHTML="请输入1-100之间的任意数值";
}else{
if(Set.value==Item){
//获取文本框中的值,进行比较
document.getElementById("tip").innerHTML="猜对了!";
}else if(Set.value>Item){
document.getElementById("tip").innerHTML="猜大了";
}else if(Set.value<Item)
{
document.getElementById("tip").innerHTML="猜小了";
}
}
//调用函数
OpenTing();
}
//注意需要把他们定义成全局变量
var Sj;
//设置延迟时间
function OpenTing(){
//3秒之后清空内容,呈现给用户
Sj=setTimeout("CloseNei()",3000);
}
//当时执行数据函数
function CloseNei(){
document.getElementById("tip").innerHTML="";
}
//停止延迟
function CloseTing(){
Sj=clearTimeout(Sj);
}
</script>
(上个代码包含清除定时函数)
定时函数
setTimeout():用于在指定的毫秒后调用函数或表达式
语法:settimeout("函数名称",等待毫秒) 1秒=1000毫秒 只掉一次
Setinterval():按照指定周期来调用函数或表达式
语法:Setinterval("函数名称",周期性调用函数之间的间隔毫秒) 一直调用
清除定时函数
clearTimeout()和clearinterval()
注意:括号中的数据应该是日期函数的变量
操作DOM对象
DOM对象即文档对象模型
DOM对象三大类:DOM Core,HTML-DOM,CSS-DOM
节点和节点关系
Nodename :节点名称
NodeValue:节点值 永远是空值 注意在获取元素时使用innerHTML属性
NodeType:节点类型
节点 节点值
整个文档是文档对象 9
标签是元素节点 1
标签中的文本是文本对象 3
标签中的属性是属性节点 2
注释是注释节点 8
属性
Parentnode:返回父节点
childnodes:返回子节点集合
Firstchild:返回节点的第一个
Lastchild:返回节点的最后一个
Nextsibling:上一个节点
Previoussibling:下一个节点
element属性 注意在使用时,需要知道是否返回多个值,如果多个值则要用循环8
Firstelementchild:返回节点的第一个子节点
Lastelementchild :返回节点的最后一个子节点
nextelementSibling:上一个节点
Previouselementsibling :下一个节点
这一组属性可以消除这种因空行,换行等出现的无法准确访问到节点的情况
操作节点
GetAttribute(”属性名“):用来获取属性的值
SetAttribute("属性名","属性值"):用来设置属性的值
但是不常用:可读性较差
推荐使用获取元素节点直接进行修改
样式
语法:HTML 元素.style.样式属性=”值“; 注意:样式属性中的-要取掉,把-后面的第一个字符改为大写
className属性
语法:HTML 元素.className=”样式名称“ 注意:类样式不需要使用.
获取元素
语法: HTML 元素.style.样式属性;只能获取行内样式
语法: HTML 元素.currentStyle.样式属性 可以获取外部样式 局限只能在IE浏览器使用
语法:document.defaultView.getComputedStyle(元素,null).属性
创建和插入节点(待补充)
Createelement(tagName):创建一个便签 参数是标签名称
Appendchild():再节点末尾追加
insertBefore(a,b):在a和b之间插入一个节点 前面是父节点.
Clonenode(deep):复制某个指定节点 注意:deep值为布尔类型,为true时复制该节点的所有子节点,若为false时,则只复制给节点和其属性
删除和替换节点
Removechild(node):删除指定节点
Replacechild(新节点,旧节点):替换节点
通过层次关系实现元素的删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请输入你的姓名:<input id="mid" value="" />
<input type="button" name="" id="" value="添加" onclick="InsertName()"/>
<div id="Uid">
</div>
<input type="button" name="" id="" value="删除" onclick="DeleteName()"/>
</body>
</html>
<script type="text/javascript">
function InsertName(){
var Item=document.createElement("p");
Item.innerHTML=document.getElementById("mid").value;
document.getElementById("Uid").appendChild(Item);
}
function DeleteName(){
var Item=document.getElementById("Uid");
Item.parentNode.removeChild(Item);
}
</script>
元素属性应用
滚动条垂直位置:scrollTop
滚动条水平位置:scrollLeft
语法:document.documentelement.scrollTop或者document.body.scrollTop
操作BOM对象实现对象的添加(添加到我们的容器当中)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
学生名称:<input id="Stu"/>
<input type="button" value="添加" onclick="OInsertStudent()" />
<div id="StudentID"></div>
</body>
</html>
<script type="text/javascript">
function OInsertStudent(){
//创建一个p标签
var Item=document.createElement("p");
//获取文本框数据值
Item.innerHTML=document.getElementById("Stu").value;
//添加到div中
document.getElementById("StudentID").appendChild(Item);
}
</script>
表单校验
注意在使用input标签时注意要Form包起来
Event.returnvalue=false 中断事件
正则表达式
它是一个描述字符模式的对象
普通方法:
语法:var 名称=//; /开始 /结束
Exec():检索字符串中是正则表达式的匹配,返回找到的值,并确定其位置
Test():检索字符串中指定的值,返回布尔类型
语法:实例对象.方法(字符串)
正则表达式常用字符
^:匹配字符串的开始
$:匹配字符串的结束
\s :任意空白支付(空格和回车)
\S:任意非空白字符
\d:匹配一个数字字符
\D:匹配非数字任意字符
\w:匹配一个数字,下划线或者字母
\W:任意非单字字符
. :除了换行符之外的任意字符
正则表达式的重复字符
{n} 匹配前几项n次
{n,}匹配前几项n一次或多次
{n,m}匹配前几项至少n项最多m项
正则表达式中(),[],{}区别
():是为了提取匹配的字符串,表达式中有几个()就有几个对应的匹配字符串
[]:是定义匹配的字符串
{}:用来匹配长度
g表示匹配全局
i表示忽略大小写
m表示多行
|单横表示或者
\表示转义符
实现简单的正则表达式(注意: 使用event进行判断,但是推荐使用return的方式进行中断事件,但也注意事件应该绑定到form表单的onsubmit事件上也需要return,但是不要绑定到submit提交按钮上否则阻止不了return事件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>新用户注册</h2>
<hr >
<form action="chp04-02.html" onsubmit="return CheckFormDate()">
用户名:<input id="Yid"/><span>用户名由英文字母和数字组成的4-16位,以字母开头</span><br>
密码:<input id="Mid"/><span>密码名由英文字母和数字组成的4-10字符</span><br>
确认密码:<input id="Pid"/><br>
电子邮箱:<input /><br>
手机号码:<input id="Sid"/><br>
生日:<input id="BornDate"/><br>
<input type="submit" value="注册完成"/>
</form>
</body>
</html>
<script type="text/javascript">
function CheckFormDate(){
var Zheng=/^[a-z]\w{3,15}$/;
if(!Zheng.exec(document.getElementById("Yid").value)){
alert("用户名输入的格式不正确!");
//使用event进行判断,但是推荐使用return的方式进行中断事件,但也注意事件应该绑定到form表单的onsubmit事件上也需要return,但是不要绑定到submit提交按钮上否则阻止不了return事件
//event.returnValue=false; 中断事件
return false;
}
var Item=/^[a-z]|[1-9]{6,16}$/;
if(!Item.exec(document.getElementById("Mid").value)){
alert("密码输入的格式不正确!");
return false;
}
if(document.getElementById("Mid").value!=document.getElementById("Pid").value){
alert("二次输入的密码不一致!");
return false;
}
var Phone=/^1[3-9]\d{9}$/;
if(!Phone.exec(document.getElementById("Sid").value)){
alert("手机号格式不正确!");
return false;
}
var Born=/^(19\d{2}|20\d{2})(0?[1-9]|1[0-2])(0?[1-9]|[1-2]\d|3[0-1])$/;
if(!Born.exec(getElementById("BornDate").value)){
alert("生日格式不正确");
return false;
}
return true;
}
</script>
HTML5的方式验证表单
placeholder:提示,并且获取焦点
required:不允许为空
pattern:正则表达式
上面有一些小的案例 案例上有注释,可以看看
结尾呢,还是希望大家在以后的生活中,学习中,不断的学习,进步,更正自己,鞭策自己,祝你我都能达到自己的目标和理想生活