JavaScript程序设计之语法基础

浏览数：20 / 时间：2015年06月08日

1.数据类型
（1）JavaScript没有真正意义上的char类型，要表示字符用长度为1的字符串表示。
（2）document.writeln();语句中使用转义字符时，必须将其放入格式化文本块中，即置于<pre>...</pre>之间的部分
例：
document.writeln("<pre>");
document.writeln("带转义字符的语句");
document.writeln("</pre>");
不满足格式要求，转义字符不起作用
（3）undefined表示变量没有被赋值，NaN“非数字”，用于计算错误时返回的无意义的数字。
2.变量
（1）变量命名时开头必须是字母或下划线，且不能为JavaScript中的关键字，且严格区分大小写。
（2）用var为变量赋值，不为变量赋值时默认为undefined，且不必过于理会变量的类型
（3）常量的声明方式
const
常量名：数据类型=值；
3.运算
（1）可用“+”将两个字符串连接起来
（2）两数相加“+”作为运算符使用，数字与字符串相加，结果将成为字符串
（3）字符串的另一种表现形式是“+=”，结果赋给第一个字符串
4.语句
（1）do...while语句后要加一个；号，否则会被认为循环是一个空语句
（2）try...catch语句用于捕捉异常语句，finally为必须被处理的关键字
（3）不能嵌套注释，以免发生不必要的错误
5.函数
（1）函数由关键字function，函数名加参数构成
（2）函数的定义语句通常被放在HTML文件的<head>标记中，而函数调用的语句通常被放在<body>标记中，如果函数在定义以前被调用，将会报错
（3）函数的调用方式有两种，
一种是调用函数名
<html>
<head>
<script type="text/javascript">
function functionName(parameters){
some statements;
}
</script>
</head>
<body>
functionName(parameters);
</body>
</html>
另一种是链接调用
<script language="javascript">
function test(){
alter("good!");
}
</script>
<body>
<a href="javascript:test()">好的</a>
</body>

6.JavaScript的简单应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#div1 {position:relative; border:1px solid black; width:680px; 

height:132px; margin:10px auto; overflow:hidden;}
#div1 ul {position:absolute; left:0;}
#div1 ul li {list-style:none; float:left; width:150px; 

height:112px; padding:10px;}
#div1 ul li img {width:150px;}
</style>
<meta http-equiv="Content-Type" content="text/html; 

charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById(‘div1‘);
	var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
	var aLi=oUl.getElementsByTagName(‘li‘);
	var aA=document.getElementsByTagName(‘a‘);
	var timer=null;
	var iSpeed=5;
	
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi.length*aLi[0].offsetWidth+‘px‘;
	
	function fnMove()
	{
		if(oUl.offsetLeft<-oUl.offsetWidth/2)
		{
			oUl.style.left=0;
		}
		else if(oUl.offsetLeft>0)
		{
			oUl.style.left=-oUl.offsetWidth/2+‘px‘;
		}
		oUl.style.left=oUl.offsetLeft+iSpeed+‘px‘;
	}
	
	timer=setInterval(fnMove, 30);
	
	aA[0].onclick=function ()
	{
		iSpeed=-10;
	};
	aA[1].onclick=function ()
	{
		iSpeed=10;
	};
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(fnMove, 30);
	};
};
</script>
</head>

<body>
<!--<a href="javascript:;">←</a>-->
<!--a href="javascript:;">→</a>-->
<div id="div1">
	<ul>
    	<li><img src="images/marquee_1.jpg" /></li>
    	<li><img src="images/marquee_2.jpg" /></li>
    	<li><img src="images/marquee_3.jpg" /></li>
    	<li><img src="images/marquee_4.jpg" /></li>
    </ul>
</div>
</body>
</html>

显示结果如下，滚动图片的一部分截图：