JavaScript教程
博客主页：划水的阿瞒的博客主页
欢迎关注🖱点赞🎀收藏⭐留言✒
系列专栏：JavaScript 首发时间：🎞2022年8月5日🎠
如果觉得博主的文章还不错的话，请三连支持一下博主哦
JavaScript对象事件处理
JavaScript是一种基于对象和事件驱动的解释性脚本语言 对象事件概念 指DHTML对象在状态改变、操作鼠标或键盘时触发的动作
对象事件的分类 鼠标事件：针对鼠标单击、双击、移动等动作 键盘事件：针对按下键盘产生的动作
状态改变事件：在载入文档、退出、获取焦点、失去焦点、提交、变化等动作时产生的事件
常见事件分类图
event事件对象 事件触发后将会产生一个event对象 event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
clientX、clientY
事件触发时鼠标光标相对浏览器窗口的坐标 srcElement 触发该事件的标记对象 button 鼠标按下的键（1左键、2右键、4中键） keyCode 键盘按键的Unicode码
案例：
当事件处理比较复杂时应当定义一个相应的函数，让属性定义中直接使用函数作为事件的处理过程，例如：
<script language="JavaScript">
function myload() {
alert("hello body");
}
function myunload() {
alert("goodbye");
}
function myclick() {
alert("hello button")
}
</script>
<body onload="myload()" onunload="myunload()">
<input type="button" value="单击" onclick="myclick()">
</body>
String对象的使用
1.1自动创建字符串对象：
var str1=“hello world”; alert(str1.length);
1.2手工创建字符串对象
var str1= new String(“hello word”); alert(str1.length);
1.3获取字符串长度length
汉字、字母长度均为1
返回大于或等于0整数
1.4 String函数的分类：
使用范例：
3.Array对象的使用
<script type="text/javascript">
var cnweek = new Array(7);
var books = new Array();
cnweek[0] = "星期日";
cnweek[1] = "星期一";
cnweek[2] = "星期二";
cnweek[3] = "星期三";
cnweek[4] = "星期四";
cnweek[5] = "星期五";
cnweek[6] = "星期六";
for(var i = 0; i <= 7; i++) {
document.write(cnweek[i] + " | ");
}
</script>
4.Date对象使用
4.1创建日期对象
//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));
//毫秒并不直接显示
4.2Date对象的方法: 获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月 getFullYear () 获取完整年份 getYear ()
获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds ()
获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
设置日期和时间 setDate(day_of_month) 设置日 setMonth (month) 设置月 setFullYear (year) 设置年 setHours (hour) 设置小时 setMinutes
(minute) 设置分钟 setSeconds (second) 设置秒 setMillliseconds
(ms) 设置毫秒(0-999) setTime (allms) 设置累计毫秒(从1970/1/1午夜) 日期和时间的转换
getTimezoneOffset() 返回本地时间与GMT的时间差，以分钟为单位 toUTCString() 返回国际标准时间字符串
toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
4.3案例利用日期对象完成一个实现表的效果
<script type="text/javascript">
function timeStart(){
var x = new Date();
//获取年份
var year =x.getFullYear();
//获取月份
var month= x.getMonth()+1;
//获取日
var date =x.getDate(); //返回日
var weekday =x.getDay(); //返回星期
var hour= x.getHours(); //返回小时
var minute =x.getMinutes(); //返回分钟
var second=x.getSeconds(); //返回秒
switch(weekday){
case 0: weekday ="星期日"; break;
case 1: weekday ="星期一"; break;
case 2: weekday ="星期二"; break;
case 3: weekday ="星期三"; break;
case 4: weekday ="星期四"; break;
case 5: weekday ="星期五"; break;
case 6: weekday ="星期六"; break;
}
var timeinfo = year+"-"+month+"-"+date+" " +weekday+" "+hour+":"+minute+":"+second;
document.getElementById("timeSpan").innerHTML = timeinfo;
}
setInterval(timeStart,1000);
</script>
当前时间:
5. RegExp正则表达式
5.1声明正则表达式的方式：
正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符.所以,JavaScript可能会包含如下的代码:
var pattern = /s$/;
这行代码创建一个新的RegExp对象,并将它赋给变量parttern.这个特殊的RegExp对象和所有以字母"s"结尾的字符串都匹配.用RegExp()也可以定义
一个等价的正则表达式,代码如下:
var pattern = new RegExp("s$");
new RegExp(pattern, attributes);
5.2 正则表达式的语法
5.3 常用的正则表达式
"^\\d+$" //非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$" //正整数
"^((-\\d+)|(0+))$" //非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$" //负整数
"^-?\\d+$" //整数
"^\\d+(\\.\\d+)?$" //非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //非正浮点数（负浮点数 + 0）
"^[A-Za-z]+$" //由26个英文字母组成的字符串
"^[A-Z]+$" //由26个英文字母的大写组成的字符串
"^[a-z]+$" //由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串
"^\\w+$" //由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"
5.4 匹配多个连续相同的字符
var pattern = /(.)\1/;//这个1就是匹配前面的相同字符
用RegExp这样声明：p = new RegExp(“(.)\\1”);//\是转义
var s = "aa";
alert(pattern.test(s));//true
s = "aaa";
alert(pattern.test(s));//true
s = "aaaabbbb";
alert(pattern.test(s));//true
s = "abababab";
alert(pattern.test(s));//false.因为最后这个没有连续所以为false
5.5 匹配固定个数的连续字符
//正则表达多，匹配连续的多个字符,注意下面这个{3}
var pattern = /(.)\1{3}/;//匹配最少4个连续的字符,其中\1已经占用一个，3表示3个
var s = "aa“;
alert(pattern.test(s));//false
s = "aaaa";
alert(pattern.test(s));//true
s = "aaaabbb";
alert(pattern.test(s));//true,因为有4个连续的字符
s = "abababab";
alert(pattern.test(s));//false.因为都没有连续
5.6 综合案例
<script type="text/javascript">
var characters = "_%#$&!@-";
function chk(){
var ele = document.getElementById("pwd");
var val = ele.value;
if(val.length<6){
alert("最少六位");
return;
}else{
var easy = 0;//用数值来表示密码的复杂度
//先判断是否是全部相同的字符
var len = val.length;
len=len-1;
p = new RegExp("(.)\\1{"+len+"}");//匹配相同的N个字符
if(p.test(val)){
easy=0;//0为非常简
}else{
//声明只包含a-z的字符正则
var p = /[a-z]/g;//如果只包含小写的字母
var chars = val.match(p);
if(chars){
easy++;//
}
p=/[0-9]/g;//如果再包含数字则再加
chars=val.match(p);
if(chars){
easy++;
}
//如果再包含
p = /(_|#|@|!)/;
chars = val.match(p);
alert(chars);
if(chars){
easy++;
}
}
}
alert(easy);
if(easy==1){
msg.innerHTML="密码太过简单";
}else if(easy==2){
msg.innerHTML="密码一般";
}else if(easy==3){
msg.innerHTML="密码强度很好";
}else{
msg.innerHTML="密码极其简单";
}
}
</script>
密码：<input name="pwd" id="pwd" type="text"/>
<label id="msg"></label>
<br/>
<input type="button" value="验证" onclick="chk();"/>
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
