JavaScript学习(2)数据和语句

来源：互联网发布：轻松互助知乎编辑：程序博客网时间：2024/05/19 06:18

1变量命名

变量命名必须以字母开头，只能包含字母、数字和/或者下划线，且不能与保留字冲突。变量名区分大小写。

2.数据类型

2.1数值型

JavaScript底层并不严格地区分整数和浮点数。在底层JavaScript的各种数值类型都当做浮点数来处理，在程序中两者可以自由的转换。

2.2布尔型

布尔型只有两个可选值：true和false

2.3字符串

字符串是由单引号或双引号界定的零个或多个字符。JavaScript也提供转义字符，如"/f"表示换页，"/n"表示换行，"/r"表示回车，"/t"表示制表符，"//"表示反斜杠。

2.4null

null表示没有任何值得情况。

2.5不确定值

不确定值用来表示已经创建却没有创建的变量。对于数值，不确定值为NaN；对于字符串，不确定值为undefined；对于布尔变量，不确定值为false。

3数据转换

3.1将字符串转换为数值

JavaScript提供两个内置函数ParseInt和ParseFloat将对应的字符串转换为数值。

3.2将数值转换为字符串

最简单的方法是在数值中加入控字符串就可以把数值转换为字符串了。

4String对象

4.1常用方法

string.indexOf(string,position)--从position（可选）位置开始，搜索字符串中第一个string所出现的位置并返回。

string.lastIndexOf(string,position)--从position（可选）位置开始，搜索字符串中的最后一个string所出现的位置并返回。

string.charAt(pos)--返回字符串中位置为pos的字符。

string.charCodeAt(pos)--返回字符串中位置为pos的字符代码。对于ASCII字符，将返回其ASCII码。

string.slice(start,end)--返回字符串中其实位置为start，结束位置为end的字符串。

string.split(string,limit)--将string作为分隔符返回长度不超过limit的多个字符串。

stringsubstr(start,length)--返回字符串中起始位置为start、长度为length的子串。

string.substring(start,end)--返回字符串中其实位置为start、结束为止为end（包括end）的子串。

string.length--计算字符串长度。

string.toLowerCase()--原字符串的大写字母都变成小写字母返回。

string.toUpperCase()--原字符串的小写字母都变成大写字母返回。

5综合应用

显示当前日期

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 当前日期 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language = "javascript">
function showTime()
{
myTime = new Date();
var monthArray = new Array("1月","2月","3月","4月","5月","6月","7月","9月","10月","11月","12月");
var dayArray = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
year=myTime.getYear();
date=myTime.getDate();
hours=myTime.getHours();
minutes=myTime.getMinutes();
seconds=myTime.getSeconds();
suf="AM";
if(hours>12)
{
  suf="PM";
  hours=hours-12;
  }
if(hours==0)
  hours=12;
if(minutes<=9)
  minutes="0"+minutes;
if(seconds<=9)
  seconds="0"+seconds;
theTime="<font seize=2>今天是:</font><br><font size=4>"+year+"年"+monthArray[myTime.getMonth()]+date+"日"+"  "+dayArray[myTime.getDay()]+"</font><br><font size=2>当前时间:</font>"+"<br><font size=4 face=Arial>"+hours+":"+minutes+":"+seconds+"   "+suf+"</font>";
DT.innerHTML=theTime;
setTimeout("showTime()",1000);
}
</script>

<BODY onload = "showTime()" bgcolor="5660180" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0">
<span id=DT style="position:absolute;left=35px;top=15px"></span>
</BODY>
</HTML>
6基本语句

其实语法和Java等高级语言差不多。下面是一些实例。

使用条件语句实现性别选取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 性别选取 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function showSex()
{
onOroff = document.forms[0].sex[0].checked
statur = (onOroff)?"帅哥":"美女"
alert("Hello" + statur)
}
</script>
请输入你的性别:
<form onClick = showSex()>
<input type =radio name=sex>男
<input type =radio name=sex>女
</form>
<BODY>

</BODY>
</HTML>

for in循环

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> for in </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script language="javascript">
var myObject = new Object();
myObject.sit0 = "0";
myObject.sit1 = "1";
myObject.sit2 = "2";
for(prop in myObject)
{
document.write("属性" + prop + "为" +myObject[prop]);
document.write("<br>");
}
</script>
</BODY>
</HTML>

计算器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 计算器 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function compute()
{
var num1,num2;
num1 = parseFloat(document.biaodan.shu1.value);
num2 = parseFloat(document.biaodan.shu2.value);
num3 = document.biaodan.jieguo;
op = document.all.A;

if(op[0].checked)
num3.value = num1 + num2;
else if(op[1].checked)
num3.value = num1 - num2;
else if(op[2].checked)
num3.value = num1 * num2;
else if(op[3].checked)
num3.value = num1 / num2;
else alert("请输入运算符!");
}
</script>
<BODY>
<form method = "post" name = "biaodan" id = "diaodan">
<h3 align = "center"><font color = "#666666" size = "5">计算器</font></h3>
<div align = "center">
<table width = "38%" border = "0">
<tr>
<td width = "29%"><div align = "right">数字1:</div></td>
<td width = "71%"><input name = "shu1" type = "text" id = "shu1"></td>
</tr>
<tr>
<td><div align = "right">运算符:</div></td>
<td><input type = "radio" name = "A" value = "0">
+ <input type = "radio" name = "A" value = "1">
- <input type = "radio" name = "A" value = "2">
* <input type = "radio" name = "A" value = "3">
/</td>
</tr>
<tr>
<td><div align = "right">数字2:</div></td>
<td><input name = "shu2" type = "text" id = "shu2"></td>
</tr>
<tr>
<td><div align = "right">结果:</div></td>
<td><input name = "jieguo" type = "text" id = "jieguo"></td>
</tr>
<tr>
<td><div align = "right"></div></td>
<td><input name = "suan" type = "button" value = "计算" onClick = "compute()"></td>
</tr>
</table>
</div>
<div align = "center"></div>
<p align = "center"><font color = "#666666" size = "5"></font></p>
<p></p>
</form>
</BODY>
</HTML>

求最大值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 求最大值 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<form name = "biaodan">
第一个数:
<input type = "text" name = "num1">
<br>
第二个数:
<input type = "text" name = "num2">
<input type = "button" value = "比较" onClick = "compare()">
</form>
<script>
function compare()
{
var a;
a = parseFloat(document.biaodan.num1.value);
var b;
b = parseFloat(document.biaodan.num2.value);
if(a > b)
window.alert("最大值为:" + a);
else
window.alert("最大值为:" + b);
}
</script>
<BODY>

</BODY>
</HTML>