JavaScript基础

文章最后制作九九乘法表和验证电子邮箱地址的合法性

JavaScript是一门简单的语言,也是一门复杂的语言。说它简单,是因为学会使用它只需很短的时间,而说它复杂,是因为要真正掌握它则需要数年时间。实际上,前端工程师很大程度上就是指JavaScript工程师,前端入门容易精通难。因为js就像是Python和C语言的一些东西它都有,所以我就不仔细讲,只列出表格告诉大家关键字,运算符,正则表达式之类的东西,以后也只会更新比较好的js程序。

关键字

bread delete function return typeof
case do if switch var
catch else in this void
continue flase instanceof throw while
finally new true with default
for null try debugger

转义字符

转义字符 说明 转义字符 说明
\b 退格 \v 跳格(Tab)
\n 回车换行 \r 换行
\t Tab符号 \\ 反斜杠
\f 换页 \OOO 八进制整数,范围000-777
\' 单引号 \xHH 十六进制整数ꎬ范围00-FF
\" 双引号 \uhhhh 十六进制编码的Unicode字符

运算符

JavaScript中的算术运算符

+ 加法运算,用于将两个数相加
- 减法运算,用于将两个数相减
* 乘法运算,用于将两个数相乘
/ 除法运算,用于将两个数相除
++ 自加运算,该运算符有两种情况:i++(在使用i之后,使i的值加1),++i(在使用i之前,先使i的值加1)
-- 自减运算,该运算符有两种情况:i--(在使用i之后,使i的值减1),--i(在使用i之前,先使i的值减1)
% 取模运算,用于计算两个数相除的余数

JavaScript中的赋值运算符

= 将右边表达式的值赋给左边的变量
+= 将运算符左边的变量加上右边表达式的值赋给左边的变量
-= 将运算符左边的变量减去右边表达式的值赋给左边的变量
*= 将运算符左边的变量乘以右边表达式的值赋给左边的变量
/= 将运算符左边的变量除以右边表达式的值赋给左边的变量
%= 将运算符左边的变量用右边表达式的值求模,并将结果赋给左边的变量

JavaScript中的字符串连接运算符

+ 连接两个字符串
+= 连接运算符左右两个字符串ꎬ并把结果给左边的字符串

JavaScript中的特殊比较运算符

=== 绝对等于,根据表面值和数据类型同时进行判断
!== 不绝对等于,根据表面值和数据类型同时进行判断

JavaScript中的逻辑运算符

&& 逻辑与,只有当两个操作数的值都为true时,a&&b的值才为true
|| 逻辑或,只要两个操作数中有一个值为true,a||b的值就为true
! 逻辑非,如果其单一操作数为true,则返回false,否则返回true

最后还有一个条件运算符,条件运算符是一个三目运算符,它的语法格式为:表达式?结果:结果2,当表达式值为true时,其整个条件表达式的值为结果1,否则为结果2。

正则表达式

正则表达式中方括号的含义

[abc] 表示方括号中的字符
[^abc] 表示不在方括号中的字符
[0~9] 表示方括号中的数字
[a~z] 表示方括号中的所有英文字母

正则表达式中常用量词的含义

* 出现0次或连续多次
+ 出现至少1次
? 出现0次或者1次
{n} 连续出现n次
{n,} 连续出现至少n次
{n,m} 连续出现至少n次,最多m次


内置函数和常用事件

事件指用户与网页进行交互时产生的各种操作,比如:我们将鼠标或键盘在网页对象上的动作称为“事件”,而由鼠标或键盘引发的一连串程序的动作称为“事件驱动”,对事件进行处理的程序或函数称为“事件处理程序”。

内置函数

isFinite() 判断数值是否为无穷大
isNaN() 判断数值是否为NaN(非数值)
parseInt() 将字符型转为整型
parseFloat() 将字符型转为浮点型
eval() 计算字符串表达式中的值
encodeURI() 将字符串转为有效的URI
decodeURI() 对encodeURI()编码的文本进行解码

常用事件

鼠标事件

onclick 当用户点击某个对象时触发
ondblclick 当用户双击某个对象时触发
onmousedown 鼠标按钮被按下时触发
onmousemove 鼠标被移动时触发
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上时触发
onmouseup 鼠标按键被松开时触发

键盘事件

onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下并松开时触发
onkeyup 某个键盘按键被松开时触发

表单事件

onblur 元素失去焦点时触发
onchange 域的内容被改变时触发
onfocus 元素获得焦点时触发
onreset 重置按钮被点击时触发
onselect 文本被选中时触发
onsubmit 提交按钮被点击时触发

页面事件

onload 页面或一幅图像完成加载时触发
onerror 如果加载文档或图像时发生错误ꎬ则触发
onresize 窗口或框架被重新调整大小
onbeforeunload 当前页面的内容将要被改变时触发此事件
unload 用户退出页面时触发

学习过其他编程语言的小伙伴应该很清楚,几乎所有的编程语言在学习在循环和判断语句的时候,都会要求作出九九乘法表。在JavaScript里,我也毫不例外的给出九九乘法表的代码。

<script type="text/javascript">
document.write("<table border=1>");
var str="JavaScript实现九九乘法表";
document.write("<h1>"+str+"</h1>");
for (var x=1;x<=9;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<th>"+x+" * "+y+" = "+(x * y)+"</th>");
}
document.write("</th>");
}
document.write("</table>")
</script>

再来一个应用wheelDelta属性通过鼠标滚轮放大缩小图片的代码

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text ml; charset=gb2312" >
<title></title>
</head>
<script>
function big_small(i){
var zoom=parseInt(i.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0){
i.style.zoom=zoom+'%';
}
return false;
}
</script>
<body>
<table>
<tr>
<td><span class="style">拖动鼠标滚轮</span></td>
</tr>
</table>
<center>
<a href=""><img src="0.jpg" width="400" height="500" border="1" onMousewheel="return big_small(this)"></a>
</center>
</body>
<html>

相信大家遇到过,你在某些网站使用邮箱注册时,不小心没有输入@符号,或者是没有输入.com,这时候,输入框旁边就会显示你输入的邮箱格式有误。下面,我们就用代码来实现这个功能:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>验证电子邮箱地址</title>
<script language="javascript">
function check(obj){     //检验文本框中电子邮件地址格式是否合法
var emailUrl = obj.email.value;
//构造正则表达式进行检验
var regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(! regex.exec(emailUrl)){      //取得用户的输入
alert("您输入的格式有误,可能您忘记了@符号或是点号,请重新输入!");
obj.email.focus()//取得焦点
}
else{
alert("输入正确!");//通过验证
return true;//提交表单
}
}
</script>
<style type="text/css">
center{
margin-top: 300px
}
</style>
</head>

<body>
<center>
<p>验证电子邮箱地址合法性</p>
<form onSubmit="return check(this);" name="form1">   <! --表单-->
<input type="text" name="email">   <! --用户输入email的文本框-->
<input type="submit" value="确定">   <! --提交按钮-->
</form>
</center>
</body>
</html>

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注