一、概述：

在前面的学习掌握了java C/S的开发模式，从今天开始就要进入B/S的学习中，在学习动态网站之前首先要学习静态网页技术，那首先就要了解静（动）态网页的概念，动态网站的意思：人的不同，内容会不一致，就是动态网页技术，那静态网站的所有内容都是一致，不会因为人的不同而引起内容的不同。在静态网页技术中，要掌握css以及javascript的技术。

二、CSS的用法

1、概念

CSS（层叠样式表），用来控制和修改网页的外观，是用来美化网页的页面。

1、CSS语法

1、CSS的使用有三种方法：

1、 直接样式表 ：将样式写在页面元素的style属性中，此样式只能作用在单一的元素上。

<p style=”color:red”>css真好玩</font>
样式表由很多对属性：值所构成，彼此之间采用分号分割。
样式表的属性用法要多去查阅css2的帮助文档或者在w3shool网站上查找。

2、 内部样式表 ：将样式表写在head标记对中。

<head>
<style type=”text/css”>
p{color:red}
</style>

此样式能影响所有使用p的段落。

3、 外部样式表：将样式表写成一个扩展名为css的文件中，在页面中加入link比较

<!-- first.css -->
P{color:red;}

First.html

<link rel="stylesheet" href="first.css" type="text/css"/>

在href中，要注意的时路径问题当把样式放在style文件夹里是，前面要加上style/first.css。

2、选择器：

在内部样式表和直接样式表中需要给样式表取名称，有三种取名称的方法：

Ø html选择器：选择html中可以的标记

Ø 类选择器：可以自定义名称，在名称前面有点修饰，在需要的地方使用class属性。

Ø id选择器：可以自定义名称，在名称前面有#修饰，在需要的地方使用id属性。

类选择器和id选择器的区别：类选择器可以重复使用，id选择器只能使用一次。

3、技巧

在使用CSS中，可以一些特殊符号以及组合

1、*号，代码所有对象。

2、当需要对多个元素设置一个样式时，可以把多个选择符写在一起，并用逗号分隔


p,li,td{color:red;}


3、包含选择符：当使用在某一个特定标记中的字标记选用样式时，可以把标记和子标记写出来，用空格分隔。


td span{color:red;}
p#test {color:red}//只能在段落使用id选择符


4、子元素选择符：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

例如，如果您希望选择只作为h1 元素子元素的strong 元素，可以这样写：


h1 >strong {color:red;}


5、相邻兄弟选择符：选择紧接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加紧接在h1 元素后出现的段落的上边距，可以这样写：


h1 + p {margin-top:50px;}


这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

三、JS的用法

1、基本概念：javascript是有java所派生出来的弱类型的语言，有其他程序语言的特征。用来实现网页中表单的验证以及网页动画实现。通过在head标记对中或者在所需要的地方加入script标记嵌入html中。在javascript中声明变量不用指定变量的数据类型，是根据所赋值来决定是何数据类型，可以通过typeof运算符来查看数据类型。

四、综合示例

示例1：实现网页计算器。

解决问题方法：1、事件处理程序，在javascript中可以使用函数来表示处理函数；

2、 如何获得控件的值：通过document.getElementById()的形式来访问对象；

3、 如何把获得值放在html的标记之间通过innerText和innerHTML，两者之间的区别：innerText是文本，innerHTML可以用来写标记。

代码：

<html>
<head>
<style type="text/css">
.pageWidth{margin:auto;width:600px}
#lay{height:400px;background:#fba}
table{text-align:center}
.fot{padding-top:5px;}
</style>
<script type="text/javascript">
function calc(){
 var num1 = parseInt(document.getElementById("num1").value);
 var op= document.getElementById("op").value;
 var num2 = parseInt(document.getElementById("num2").value);
 var result =0; 
 switch(op){
 case "+": result = num1+num2;
 break;
 case "-":result = num1 -num2;
 break;
 case "*":result = num1*num2;
 break;
 case "/":result = num1 /num2;
 break;

 }
 document.getElementById("result").innerText = result;
 //document.getElementById("result").style.border="1px solid 
#f00";
}
</script>
</head>
<body>
<div id="lay" class="pageWidth">
<table align="center">
 <tr>
 <td colspan="3" class="fot">计算器</td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>第一个数</td>
 <td><input type="text" id="num1"/></td>
 <td><font color="red">文本框填写内容不正确</font></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>运算符</td>
 <td><select id="op">
 <option value="+">+</option>
 <option value="-">-</option>
 <option value="*">*</option>
 <option value="/">/</option>
 </select></td>
 <td></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>第二个数</td>
 <td><input type="text" id="num2"/></td>
 <td></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td><input type="button" value="结果" οnclick="calc
()"/></td>
 <td colspan="2" id="result">0</td>

 </tr>
</table>

</div>
</body>

</html>

在以上示例中还可以引申修改其中的样式，写法有两种：

1、通过document.getElementById().style后面接具体的样式，在写样式时要注意css的样式有两个以上单词构成时，去掉中间的连字符第一个单词之外，其他单词大写。

2、可以在head标记对中，或者在css文件中，预先定义类选择器，然后在js中只需要写：document.getElementById().className=”类选择器名称”

示例2：基于示例1实现对文本框内容的验证。

要求：文本框的内容只能为数字，让是字母时，出现错误提示。

解决问题方法：

1、 信息的显示和隐藏，在css中有display何visibility来实现，display隐藏时不占位置，visibility隐藏时保留控件所占的位置。由于我们的信息显示在一行的最后一个单元格中，所以在这里我们应该选择visibility来实现，如果我们是在下一行显示错误信息，那就应该选用display。

2、 如果验证是否为字符，这里有两种方法实现：

a) 通过循环遍历来判断;

b) 通过正则表达式来判断;

正则表达式的用法：

在js中要实现正则表达式，首先就要创建正则表达式的对象，创建对象有两种方法：

方法一：

var reg = /[0-9]{3}/;

方法二

var reg = new RegExp(“[0-9]{3}”);

在正则表达式中，字符的含义：

[0-9]，数字0到9

{n}，至少匹配n次

+,匹配1次或者多次

*匹配0次或者多次

^开头

$结尾

代码：

方法一：
function check(){
 var obj = document.getElementById("num1");
 var str = obj.value;
 var flag=false;
 for (var chr in str)
 {
 if(str.charAt(chr)<'0' || str.charAt(chr)>'9'){
 flag = true;
 break;
 }else{
 flag = false;
 }
 }
 if(flag){
 document.getElementById("mess").style.visibility ="visible";
 }else{
 document.getElementById("mess").style.visibility="hidden";
 }
}
方法二：
function chkReg(){
 var obj = document.getElementById("num1");
 var str = obj.value;
 var flag=false;
 var reg = new RegExp(" [0-9]{1,10} ");
 if(!reg.test(str)){
 document.getElementById("mess").style.visibility ="visible";

 }else{
 document.getElementById("mess").style.visibility="hidden";

 }

}调用代码
<div id="lay" class="pageWidth"> 
<table align="center">
 <tr>
 <td colspan="3" class="fot">计算器</td>

 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>第一个数</td>
 <td><input type="text" id="num1" οnblur="check()"/></td>
 <td><font color="red" style="visibility:hidden" id="mess">*文本框填写内容不正确</font></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>运算符</td>
 <td><select id="op">
 <option value="+">+</option>
 <option value="-">-</option>
 <option value="*">*</option>
 <option value="/">/</option>
 </select></td>
 <td></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td>第二个数</td>
 <td><input type="text" id="num2"/></td>
 <td></td>
 </tr>
 <tr height="5px"><td colspan="3"></td></tr>
 <tr>
 <td><input type="button" value="结果" οnclick="calc()"/></td>
 <td colspan="2" id="result">0</td>

 </tr>
</table>
</div>

示例3：实现日历

解决问题方法：

代码：

var titles=["日","一","二","三","四","五","六"];
 var days=[31,28,31,30,31,30,31,31,30,31,30,31];
 var date = new Date();
 var current_day=date.getDate();
 date.setDate(1);
 var d =1;

 var week =date.getDay();
 var date_rows = Math.round((days[date.getMonth()]+week+6)/7);

 document.write("<div style='background:#aaa'><table>");
 document.write("<tr>");
 for(var i=0;i<7;i++){
 document.write("<th>"+titles[i]+"</th>");
 }
 document.write("</tr>");
 for(var i=0;i<date_rows;i++){
 document.write("<tr>");
 for(var j=0;j<7;j++){
 if(i==0 && j<week){
 document.write("<td></td>");
 }
 else{

 var sid= "t"+d;
 //alert(sid);
 document.write("<td id='"+sid+"'>"+d+"</td>");
 if(d==current_day){
 var cid = "t"+current_day;
 document.getElementById(cid).style.background="#f00"; 
 }
 d++;
 if(d>days[date.getMonth()]){
 d = days[data.getMonth()];
 }

 }
 }

 document.write("</tr>");
 }
 document.write("</table></div>");

示例4：改进版日历：

代码：

<html>

<head>

<style type="text/css">

#lay2{height:100px;width:150px}

</style>

<script type="text/javascript">

function getCalendar()

{


var titles = ["日", "一", "二", "三", "四", "五", "六"];

var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var date = new Date();

var current_day = date.getDate();//获得当前日期

date.setDate(1);

var d = 1;

var str = "";

var week = date.getDay();

var date_rows = Math.round((days[date.getMonth()] + week + 6) / 7);

str += "<table><tr>";


for(var i = 0; i < 7; i ++ )

{

str += "<th>" + titles[i] + "</th>";

}

str += "</tr>";

for(var i = 0; i < date_rows; i ++ )

{

str += "<tr>";

for(var j = 0; j < 7; j ++ )

{

if(i == 0 && j < week)

{

str += "<td></td>";

}

else

{


var sid = "t" + d;

// alert(sid);

str += "<td id='"+sid+"'>" + d + "</td>";


d ++ ;

if(d > days[date.getMonth()])

{

d = days[date.getMonth()];

break;

}


}

}


str += "</tr>";

}

str += "</table>";

document.getElementById("lay2").innerHTML = str;

var cid = "t" + current_day;

document.getElementById(cid).style.background = "#f00";

}

< / script >

</head>


<body οnlοad="getCalendar()">


<div id="lay2"></div>


</body>


</html>

示例5：超链接实现javascript。

在href中写入javascript，就必须以javascript开头，后面接冒号，冒号后面写js代码、函数和void(0)。

Javascript:void(0)表示是一个死链接，#则会跳到页首的位置。

打开新窗口
<script type=”text/javascript”>
function openWin(tag,obj){
obj.target=”_blank”;
obj.href=”/test.jsp?uid=”+tag;
obj.click();
}
</script>
<a href=”javascript:void(0)” οnclick=”openWin(3,this)”>test</a>

慎用JavaScript:void(0)

JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在JavaScript 上没有任何效果。

<ahref="javascript:void(0)">单击此处什么也不会发生</a>

也就是说，要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),但是在需要对页面进行refresh的情况下，那就要仔细了。

其实我们可以这样用<ahref="javascript:void(document.form.submit())">，这句话会进行一次submit操作。那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，：）　，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

<html>
<head>
<title>
</title>
<style type="text/css">
</style>
<script type="text/javascript">
function fun(){
 document.forms[0].submit(); 

}
</script>
</head>
<body >
<form action="" method="post" >
<input type="text"/>
<a href="javascript:fun()" target="_blank" >收件箱</a>
</form>
</body>
</html>

示例6：动态显示时间

在js中，所有动画的实现都需要用window对象的方法，setTimeout和setInterval，这个两个方法。

<html>

<head>

<title>
</title>
<style type="text/css">
#lay{width:100px;height:30px;background:#fba}
</style>
<script type="text/javascript">
function getCurrentTime(){
 var date = new Date();
 var strTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
 document.getElementById("lay").innerText=strTime;
 window.setTimeout("getCurrentTime()",1000);

}

</script>

</head>
<body οnlοad="getCurrentTime()">
<div id="lay"></div>
</body>

</html>

示例7：通过键盘的方向键控制层的移动。

解决问题的方法：

1、首先通过键盘事件，onkeydown、onkeyup和onkeypress，其中onkeypress无法获得功能键及小数字键的值。

2、如何获得按键的值，在这里可以通过event对象，event是javascript中关于事件的对象信息。

代码：

<html>
<head>
<title>
</title>
<style type="text/css">
#lay{width:100px;height:30px;background:#fba;left:0px;position:relative;top:0px}
</style>
<script type="text/javascript">
 function getInfo(){
 //alert(String.fromCharCode(event.keyCode));
 var key=event.keyCode;
 if(key==39){ //39是向右方向键的ascii
 move();
 }
 }

 function move(){
 var leftLoc = document.getElementById("lay").style.posLeft;
 leftLoc +=10;
 document.getElementById("lay").style.posLeft = leftLoc;

 }

 function getCurrentTime(){
 var date = new Date();
 var strTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
 document.getElementById("lay").innerText=strTime;
 window.setTimeout("getCurrentTime()",1000);

}
</script>
</head>
<body οnkeydοwn="getInfo()" οnlοad="getCurrentTime()">
<div id="lay"></div>
</body>
</html>

注意，在要实现层的移动时，一定要对层进行定位，层默认的布局是static，如未指定位置，则层不会一定。

在这里的代码仅仅实现方向键向右移动时，层会移动，其余方向以及到边界问题大家自行补充。

示例8：选项卡的制作。

代码：

<html>

<head>
<style>
#lay{width:150px;height:30px;}
li{list-style:none;width:30px;float:left}

.now{background:#fba;}

</style>

<script type="text/javascript">
function setTab(name,curr,total){
 for(var i=1;i<=total;i++){
 var tab = document.getElementById(name+i);
 var cont = document.getElementById(name+"_t_"+i);
// tab.className=i==curr?"now":"";
// cont.style.display=i==curr?"block":"none";
 if(i==curr){
 tab.className="now";
 cont.style.display="block";
 }else{
 tab.className="";
 cont.style.display="none"; 
 }
 }

}

</script>
<title></title>

</head>

<body>
<div>
 <div id="lay">
 <ul >
 <li id="c1" class="now" οnmοuseοver="setTab('c',1,3)" >1</li>
 <li id="c2" οnmοuseοver="setTab('c',2,3)" >2</li>
 <li id="c3" οnmοuseοver="setTab('c',3,3)" >3</li>
 </ul>
 </div>
 <div>
 <ul id="c_t_1">
 <li>first</li></ul>
 <ul id="c_t_2" style="display:none">
 <li>second</li>
 </ul>
 <ul id="c_t_3" style="display:none">
 <li>third</li>
 </ul>
 </div>
</div>
</body>

</html>

示例9：给下列表添加年。

Dom：是操作html或者xml的标准方法。可以在不同的浏览器中都能运行。在dom中把所有元素都当作对象来处理。Dom的结构如下图所示：

代码1：

<html>

<head>

<title></title>

<script type="text/javascript">
//第二种方法是通过innerHTML或者innerText来编写
// function getYears(){
// var date = new Date();
// var str = "";
// for(var i = 1900; i <= date.getFullYear(); i ++ ){
// str += "<option>" + i + "</option>";
// }
// document.getElementById("year").innerHTML = str;

// }

//第三种方法：通过dom的方式来编写
function getYears()
{
 var date = new Date();
 for(var i = 1900; i < date.getFullYear(); i ++ )
 {
 var obj = document.createElement("option");
 obj.setAttribute("value", i);
 obj.innerText = i;

 document.getElementById("year").appendChild(obj);
 }
}
function getSelectValue()
{
 var obj = document.getElementById("year");
 var index = obj.selectedIndex;
 alert(obj.options[index].innerText);
}
</script>

</head>

<body οnlοad="getYears()">
<!—这里是第一种方法
<select >

<script type="text/javascript">
// var date = new Date(); 
// for(var i = 1900; i < date.getFullYear(); i ++ ){
// document.write("<option>" + i + "</option>");
// }


</script>

</select>
-->

<select id="year">

</select>

<a href="javascript:void(0)" οnclick="getSelectValue()">test</a>
</body>

</html>

示例10：如何动态添加表中的行。

代码：

<html>

<head>
<style>
.test{width:100px;height:30px;background:#fba}

</style>

<title></title>

<script type="text/javascript">
function addRow(){

 var tr = document.createElement("tr");
 document.createComment()
 var td1 = document.createElement("td");
 td1.className="test";
 td1.innerText="1";
 var td2 = document.createElement("td"); 
 td2.className="test";
 td2.innerText="2";
 var obj = document.getElementById("t");
 tr.appendChild(td1);
 tr.appendChild(td2);
 obj.appendChild(tr);
}

</script>


</head>

<body>
<table >
<tbody id="t">
</tbody>

</table>
<a href="javascript:void(0)" οnclick="addRow()">add</a>
</body>

</html>