一、什么是JavaScript
- JavaScript是一种基于对象和驱动并具有安全性的解释性脚本语言。它不需要编译，而是直接嵌套在HTTP页面中的，把静态页面转变成支持用户交互并响应应用事件的动态页面。
二、在Web页面中使用JavaScript
-
在页面中直接中直接嵌入JavaScript.
例子：在页面中直接嵌入JavaScript代码，实现弹出欢迎访问的对话框。需要弹出欢迎对话框页面的头标记中间插入下面所示代码，用于实现用户访问页面时，弹出提示系统时间以及欢迎信息的对话框。 -
创建jsp文件
<html>
<head>
<title>web 实例</title>
</head>
<body>
我的第一个Web项目 Hello World ！
<script language="JavaScript">
var now=new Date();
var hour=now.getHours();
var minu=now.getMinutes();
alert("您好! 现在是"+hour+":"+minu+"\r欢迎访问公司的网站！");//弹出框设计
</script>
</body>
</html>
三、JavaScript的语言基础
- var 在定义变量时，只需要用 var 运算符就可以就可以将变量转化为任意的值。v如下例：
var username="aaaa";
var age=20;
- 区分大小写
其区分大小写，在这一点上就和Java语言是相同的。 - 每一行的结尾可有可无
以下两种书写方式都是正确的
//加分号的结尾
alert("您好! 现在是"+hour+":"+minu+"\r欢迎访问公司的网站！");
//不加分号的结尾
alert("您好! 现在是"+hour+":"+minu+"\r欢迎访问公司的网站！")
- 使用大括号标记代码块：在JavaScript语言中，被封装在大括号内的语句将按照顺序执行。
- 注释：和JAVA语言一样，有单行注释和多行注释
四、JavaScript中的关键字
以下大部摘自《Javascript高级程序设计》：
-
1、ECMA-262描述了一组具有特定用途的关键字，这些关键字可用于表示标准语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的（注意：也就是说，关键字也属于保留字），不能用作标识符。以下就是ECMAScript中的全部关键字（带*号上标的是第5版新增的关键字）：（按字母顺序排名）
break case catch continue debugger* default delete do
else finally for function if in instanceof new return switch
this throw try typeof var void while with\
-
2、ECMA-262还描述了另外一组不能用作标识符的保留字。尽管这些保留字在这门语言中还没有任何特定的用途，但它们有可能在将来被用作关键字。以下是ECMA-262第3版定义的全部保留字：（按字母顺序排名）
abstract boolean byte char class const debugger double
enum export extends final goto implements import int
interface long native package private protected public
short static super synchronized throws transient volatile
-
3、第5版把在非严格模式下运行时的保留字缩减为以下这些：
class const enum export extends import super
在严格模式下，第5版还对以下保留字施加了限制：
implements interface let package private protected public static yield
注意：let和yield是第5版新增的保留字，其他保留字还是第3版定义的。为了最大程度的保证兼容性，建议将第3版定义的全部保留字外加let和yield作为编程时的参考。在实现ECMAScript3的JavaScript引擎中使用关键字作标识符，会导致“Identifier Expected”错误。而使用保留字作为标识符可能会也可能不会导致相同的错误，具体取决于特定的引擎。第5版对使用关键字和保留字的规则进行了少许修改。关键字和保留字虽然仍然不能用作标识符，但现在可以用作对象的属性名。一般来说，最好都不要使用关键字和保留字用作标识符和属性名，以便与将来的ECMAScript版本兼容。除了上面列出的保留字和关键字，ECMA-262第5版对eval和arguments还施加了限制。在严格模式下，这两个名字也不能作为标识符或属性名，否则会抛出错误。
五、JavaScript中的数据类型
JavaScript中的数据类型主要有数值型，字符型，布尔型，转义字符，空值和未定义 6种，下面分别介绍：
- 数值型：分为整型和浮点型两种。
- 字符型：由单引号或者双引号引起来的一个字符或者多个字符。
- 布尔型：true和false。
- 空值：null
- 未定义值：当使用了一个并未声明的变量，或者使用了一个已经声明但是未赋值的变量，将返回一个未定义值。
六、函数
javascript函数一共可分为五类：
·常规函数
·数组函数
·日期函数
·数学函数
·字符串函数
- 1.常规函数
javascript常规函数包括以下9个函数：
(1)alert函数：显示一个警告对话框，包括一个OK按钮。
(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
(3)escape函数：将字符转换成Unicode码。
(4)eval函数：计算表达式的结果。
(5)isNaN函数：测试是(true)否(false)不是一个数字。
(6)parseFloat函数：将字符串转换成符点数字形式。
(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数：显示一个输入对话框，提示等待用户输入。例如：
<script language="javascript">
<!--
alert("输入错误");
prompt("请输入您的姓名","姓名");
confirm("确定否！");
//-->
script>
(9)unescape函数：解码由escape函数编码的字符。
2.数组函数
javascript数组函数包括以下4个函数：
(1)join函数：转换并连接数组中的所有元素为一个字符串。例:
function JoinDemo()
{
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");//分隔符
return(b);//返回的b=="0-1-2-3-4"
}
(2)length函数：返回数组的长度。例：
function LengthDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.length;
return(l);//l==5
}
(3)reverse函数：将数组元素顺序颠倒。例：
function ReverseDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.reverse();
return(l);
}
(4)sort函数：将数组元素重新排序。例：
function SortDemo()
{
var a, l;
a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
l = a.sort();
return(l);
}
3.日期函数
javascript日期函数包括以下20个函数：
(1)getDate函数：返回日期的"日"部分，值为1～31。例：
function DateDemo()
{
var d, s = "Today's date is: ";
d = new Date();
s += (d.getMonth() + 1) + "/";
s += d.getDate() + "/";
s += d.getYear();
return(s);
}
(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，…，6表示星期六。例：
function DateDemo()
{
var d, day, x, s = "Today is: ";
var x = new Array("Sunday", "Monday", "Tuesday");
var x = x.concat("Wednesday","Thursday", "Friday");
var x = x.concat("Saturday");
d = new Date();
day = d.getDay();
return(s += x[day]);
}
(3)getHouse函数：返回日期的"小时"部分，值为0～23。例。
function TimeDemo()
{
var d, s = "The current local time is: ";
var c = ":";
d = new Date();
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds() + c;
s += d.getMilliseconds();
return(s);
}
(4)getMinutes函数：返回日期的"分钟"部分，值为0～59。见上例。
(5)getMonth函数：返回日期的"月"部分，值为0～11。其中0表示1月，2表示3月，…，11表示12月。见前面的例子。
(6)getSeconds函数：返回日期的"秒"部分，值为0～59。见前面的例子。
(7)getTime函数：返回系统时间。
function GetTimeTest()
{
var d, s, t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = d.getTime();
s = "It's been "
s += Math.round(t / DyMilli) + " days since 1/1/70";
return(s);
}
(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
function TZDemo()
{
var d, tz, s = "The current local time is ";
d = new Date();
tz = d.getTimezoneOffset();
if (tz < 0)
s += tz / 60 + " hours before GMT";
else if (tz == 0)
s += "GMT";
else
s += tz / 60 + " hours after GMT";
return(s);
}
(9)getYear函数：返回日期的"年"部分。返回值以1900年为基数，例如1999年为99。前面有例子。
(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
function GetTimeTest(testdate)
{
var d, s, t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = Date.parse(testdate);
s = "There are "
s += Math.round(Math.abs(t / DyMilli)) + " days "
s += "between " + testdate + " and 1/1/70";
return(s);
}
(11)setDate函数：设定日期的"日"部分，值为0～31。
(12)setHours函数：设定日期的"小时"部分，值为0～23。
(13)setMinutes函数：设定日期的"分钟"部分，值为0～59。
(14)setMonth函数：设定日期的"月"部分，值为0～11。其中0表示1月，…，11表示12月。
(15)setSeconds函数：设定日期的"秒"部分，值为0～59。
(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数：设定日期的"年"部分。
(18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。
(19)setLocaleString函数：转换日期成为字符串，为当地时间。
(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。
4.数学函数
javascript数学函数其实就是Math对象，它包括属性和函数(或称方法)两部分。其中，属性主要有下列内容。
Math.e:e(自然对数)、Math.LN2（2的自然对数)、Math.LN10(10的自然对数)、Math.LOG2E(e的对数，底数为2)、
- Math.LOG10E(e的对数，底数为10)、Math.PI(π)、Math.SQRT1_2(1/2的平方根值)、Math.SQRT2(2的平方根值)。
函数有以下18个：
(1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。
(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。
(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。
(5)atan2函数：返回一个坐标的极坐标角度值。
(6)ceil函数：返回一个数字的最小整数值(大于或等于)。
(7)cos函数：返回一个数字的余弦值，结果为-1～1。
(8)exp函数：返回e(自然对数)的乘方值。
(9)floor函数：返回一个数字的最大整数值(小于或等于)。
(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。
(11)max函数：返回两个数的最大值。
(12)min函数：返回两个数的最小值。
(13)pow函数：返回一个数字的乘方值。
(14)random函数：返回一个0～1的随机数值。
(15)round函数：返回一个数字的四舍五入值，类型是整数。
(16)sin函数：返回一个数字的正弦值，结果为-1～1。
(17)sqrt函数：返回一个数字的平方根值。
(18)tan函数：返回一个数字的正切值。
5.字符串函数
javascript字符串函数完成对字符串的字体大小、颜色、长度和查找等操作，共包括以下20个函数：
(1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定的链接点的名称，另一个函数link设定的URL地址。
(2)big函数：将字体加到一号，与…标签结果相同。
(3)blink函数：使字符串闪烁，与…标签结果相同。
(4)bold函数：使字体加粗，与…标签结果相同。
(5)charAt函数：返回字符串中指定的某个字符。
(6)fixed函数：将字体设定为固定宽度字体，与…标签结果相同。
(7)fontcolor函数：设定字体颜色，与标签结果相同。
(8)fontsize函数：设定字体大小，与标签结果相同。
(9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。
(10)italics函数：使字体成为斜体字，与…标签结果相同。
(11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。
(12)length函数：返回字符串的长度。(不用带括号)
(13)link函数：产生一个超级链接，相当于设定的URL地址。
(14)small函数：将字体减小一号，与…标签结果相同。
(15)strike函数：在文本的中间加一条横线，与…标签结果相同。
(16)sub函数：显示字符串为下标字(subscript)。
(17)substring函数：返回字符串中指定的几个字符。
(18)sup函数：显示字符串为上标字(superscript)。
(19)toLowerCase函数：将字符串转换为小写。
(20)toUpperCase函数：将字符串转换为大写。
七、应用实例：
- 创建一个用户注册的页面，让用户输入用户名、密码、电话、邮箱，使用脚本语言完成密码的校验、电话号码的校验、邮箱的校验和空内容的校验。
- 创建index.jsp文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检测表单元素是否为空</title>
<script language="JavaScript">
function checkNull(form) {
//判断有内容是否为空
for(i=0;i<form.length;i++)
{
if(form.elements[i].value=="")//属性elements的首字母要大写
{
alert("很抱歉，"+form.elements[i].title+"不能为空");
form.elements[i].focus();//当前元素获取焦点
return false;
}
}
//判断两次密码是否一致
var password1=document.getElementById("pwd1_id").value();
var password2=document.getElementById("pwd2_id").value();
if(password1!==password2)
{
alert("两次密码不一致，请重新确认");
return false;
}
//判断电话号码是否有效
var phone=document.getElementById("phone_id").value;
for(i=0;i<phone.length;i++)
{
if('a'<phone[i]<='z')
{
alert("请重新确认手机号");
}
}
//判断电子邮件是否有效
var email=document.getElementById("email_id").value;
if(email.length!=11)
{
alert("请重新输入邮箱号码");
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return checkNull(form1)">
<table width="296" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
<tr>
<td colspan="2" bgcolor="#eeeeee">~用户注册</td>
</tr>
<tr>
<td width="200" align="center" bgcolor="#ffffff">用户名：</td>
<td width="384" bgcolor="#ffffff"><input name="user" type="text" id="user_id" title="用户名">*</td>
</tr>
<tr>
<td width="200" align="center" bgcolor="#ffffff">密 码：</td>
<td width="384" bgcolor="#ffffff"><input name="user" type="password" id="pwd1_id" title="密码">*</td>
</tr>
<tr>
<td width="200" align="center" bgcolor="#ffffff">确认密码：</td>
<td width="384" bgcolor="#ffffff"><input name="user" type="password" id="pwd2_id" title="确认密码">*</td>
</tr>
<tr>
<td width="200" align="center" bgcolor="#ffffff">电话：</td>
<td width="384" bgcolor="#ffffff"><input name="phone" type="text" id="phone_id" title="电话">*</td>
</tr>
<tr>
<td width="200" align="center" bgcolor="#ffffff">邮箱：</td>
<td width="384" bgcolor="#ffffff"><input name="email" type="text" id="email_id" title="邮箱">*</td>
</tr>
<tr>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"><input name="Submit" type="submit" class="btn_grey" value="提交">
<input name="Submit2" type="reset" class="btn_grey" value="重置"></td>
</tr>
<tr></tr>
</table>
</form>
</body>
</html>
- 运行结果：
扫一扫
1103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
