2010年3月17日
#
html代码:
1 <form>
2 <fieldset>
3 <legend>请您认真填写用户注册表</legend>
4 <table>
5 <tr>
6 <th>用户名:</th>
7 <td><input type="text" id="username" size="20"></td>
8 </tr>
9 <tr>
10 <th>密码：</th>
11 <td><input type="password" id="pwd" size="22"></td>
12 </tr>
13 <tr>
14 <th>确认密码：</th>
15 <td><input type="password" id="pawd" size="22"></td>
16 </tr>
17 <tr>
18 <th>性别：</th>
19 <td>
20 <input type="radio" name="sex" value="m">男
21 <input type="radio" name="sex" value="f">女
22 </td>
23 </tr>
24 <tr>
25 <th>Email：</th>
26 <td><input type="text" name="email" size="20"></td>
27 </tr>
28 <tr>
29 <td colspan="2" align="center">
30 <input type="button" value="注册" onclick="reg()">
31 <input type="reset" value="重置">
32 </td>
33 </tr>
34 </table>
35 </fieldset>
36 </form>
JavaScript代码:
1 <script>
2 function reg(){
3 var u = document.getElementById("username").value;
4 var p1 = document.getElementById("pwd").value;
5 var p2 = document.getElementById("pawd").value;
6 var arr = document.getElementsByName("sex");
7 var len = arr.length;
8 var s = "";
9 for(var i = 0; i < len; i++){
10 if(arr[i].checked){
11 s = arr[i].value;
12 break;
13 }
14 }
15 var e = document.getElementById("email").value;
16
17 var email_reg = /^[\w]{1,}@[\w]{1,}\.[\w.]{2,8}$/;
18
19 if(u == ""){
20 alert("用户未填写!");
21 }else if(u.length < 5){
22 alert("用户名不能少于5个字符");
23 }else if(p1 == ""){
24 alert("密码为填写!");
25 }else if(p1.length < 6){
26 alert("密码不能小于6个字符");
27 }else if(p1 !== p2){
28 alert("两次输入的密码不一致,请从新输入");
29 }else if(s == ""){
30 alert("性别不能为空");
31 }else if(e == ""){
32 alert("邮箱不能为空");
33 }else if(!email_reg.test(e)){
34 alert("邮箱格式不正确");
35 }else{
36 var aa = "<font size='20' color='red'>感谢您的注册,欢迎您加入到hfphp team</font><br>";
37 var uu = "<font color='red'>您注册的用户名是："+u+"</font>";
38 var pp = "<br><font color='red'>密码是："+p1+"</font>";
39 var ee = "<br><font color='red'>邮箱是:"+e+"</font>";
40 document.write(aa+uu+pp+ee);
41 }
42
43 }
44 </script>
忘记写注释 就在这啰嗦几句
程序是分布执行的首先判断的是用户名,接着是密码,性别,email.
程序注册完成，模拟实现跳转,输出用户注册信息. 很是简单了！呵呵~~
刚刚老师特定的把setInterval与setTimeout讲个函数举例讲解了一下.
然后，也就只写了一个，验证了一下. 下面是代码:
先来看看setInterval函数:
1 <script>
2 var time = setInterval("func()",1000);
3 var count = 10;
4 function func(){
5 if(count != 0){
6 document.getElementById("div1").innerHTML = count;;
7 count--; //当count--放在if里面的时候，执行完就会结束。
8 }else{
9 document.getElementById("div1").innerHTML = "<font size='20' color='red'>over</font>";
10
11 }
12 //count--; //当count放在if外面的时候不断的继续执行setInterval函数
13 }
14 // 上面的实例说明了setInterval函数是不断的周期的循环执行 那我们在看看setTimeout
15
16 </script>
17 <div id="div1">setInterval测试</div>
18
从上面的实例，可能你已经感受到了setInterval函数的作用了.那我们在接着来看看setTimeout函数:
1 <script>
2 var timeOut = setTimeout("fun()",1000);
3 var count = 10;
4 function fun(){
5 if(count != 0){
6 document.getElementById("div2").innerHTML = count;
7 count--; //当程序执行的时候,setTimeout只是执行了一次,结果是10.就停止了.
8 //所以,说setTimeout只是执行一次。
9
10 }else{
11 document.getElementById("div2").innerHTML = "<font size='20' color='red'>over</font>";
12 }
13
14 }
15 </script>
16 <div id="div2">setTimeout</div>
通过上面的两个实例,已经很明显的看出来了setInterval与setTimeout的异同点了.
但是，在上面的两个实例中要想用setTimeout实现与setInterval一样的效果怎么办呢
在上例中.只是在count-- 后面添加了一个
setTimeout("fun()",1000);就一样的效果了
还是看代码吧
1 <script>
2 var timeOut = setTimeout("fun()",1000);
3 var count = 10;
4 function fun(){
5 if(count != 0){
6 document.getElementById("div2").innerHTML = count;
7 count--; //当程序执行的时候,setTimeout只是执行了一次,结果是10.就停止了.
8 //所以,说setTimeout只是执行一次。
9 setTimeout("fun()",1000);
10 //当setTimeout放在这里的时候可以实现setInterval一样的效果.但是只循环10就结束
11 }else{
12 document.getElementById("div2").innerHTML = "<font size='20' color='red'>over</font>";
13 }
14
15 }
16 </script>
17 <div id="div2">setTimeout</div>
好了,不啰嗦了.
2010年3月16日
#
这几天老师给的练习蛮多的,所以，都没时间过来罗嗦.
虽然,没讲什么新的内容,DHTML本来就是一个css，html，js结合在一起的一个东西。
还有件事,很是头痛,不知道有没有那位仁兄有完全中文的dhtml的手册.如果有给我一份,万分感谢.百度一下.在Google,找到的全是骗人的英文版本的.
晚上还有一个js版本的计算器要写.还是一点头绪都没有,
不都说了,有绝对ok的在补上.
讲义下载 前面写了一个JavaScript正则判断汉字的实力.有感兴趣的朋友可以看看.
搞了一下午的正则匹配汉字，终于有个结果了.
废话少说,还是把代码贴出来，给大家参考用吧
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title> 正则匹配汉字 </title>
6 <meta name="Generator" content="EditPlus">
7 <meta name="Author" content="">
8 <meta name="Keywords" content="">
9 <meta name="Description" content="">
10 </head>
11
12 <body>
13 <script>
14 function checkname(){
15 var name = document.getElementById("name").value;
16 //var reg = /\u7530/; //匹配汉字田
17 //var reg = /\u4E00/; // 汉字匹配最后9FA3 汉字匹配第一个4E00
18 var reg = /^[\u4E00-\u9FA3]{1,}$/ //这个就是匹配所有的汉字
19 if(reg.test(name)){
20 alert("ok!匹配成功");
21 }else{
22 alert("error!");
23 }
24 return false;
25 }
26 </script>
27 <form action="http://localhost" method="" onsubmit="return checkname()">
28 <input type="text" id="name"><br>
29 <input type="submit" value="submit">
30 </form>
31 </body>
32 </html>
33
汉字匹配编码是通过十六进制,这个大家都知道
这里有具体匹配到某个汉字的 编码表 Unicode+编码表
点击这里可以下载 有兴趣的朋友可以看看,因为内容有点多,所以打开有点慢.
2010年3月13日
#
因为植树节，都把课程给耽误了.现在补上.
先把讲义的内容给复习一遍.
讲义3，主要是讲到了JavaScript的函数和对象
函数语法：
function 函数名(参数1,参数2){
...//函数体
}
函数名(...);
在JavaScript中函数是要先定义,在调用的
其中，参数也是可选的
return,函数返回值的关键字,返回变量值的类型(一般写在函数体的结尾)
其中,老师回来给我讲了一下函数的递归,然后，自己折磨了折磨.写了一个阶乘
后面，就是提到了我这边一个很重要的JavaScript的对象
对象就是一种特殊的数据,拥有属性和方法
其中,属性可以看着是对象的变量
对象的方法可以看着是函数
常见的JavaScript对象有 字符串对象、日期对象、数组对象、数学对象和正则对象....
讲义3下载 讲义4下载
2010年3月11日
#
以前都是写一大堆废话才把讲义下载写在后面,今天就写在前面了.
点击(惦记)我下载 时间不多,快下课了。还是先来把今天的内容回顾一下吧.
早上，来的比较早,老师没开始讲什么新的内容,就是给了一个ppt的练习而给我们做,虽然，都很基础.但还是值得一做.在这里如果需要的可以在讲义里面下载回去做，
然后，今天讲到了循环
1.for循环
一般在知道循环次数的情况下用for循环
2.while循环
在循环次数不确定的情况下较多的用while循环
3.do...while循环
do...while和while循环的区别在于先输出一段，在执行后面的循环进行判断.
do...while循环也适用于不确定循环次数时用
循环中的break,continue,
4. break,用来直接终止循环
continue，跳出当前循环,然后，从下一段开始执行
5.循环的嵌套
最后，练习做了一题很有代表性的 9*9乘法口诀表 并且已多种不同的形式输出.
所以,总体来说今天讲的内容并不多.还是希望能多做些枯燥的练习.还是要多练习啊
好了，不罗嗦了。
2010年3月10日
#
今天，开始进入到了JavaScript的学习了,也开始进入到真正语言的学习了.所以，未免有点点压力.
既然是第一天的学习.所以，老师还是引导式的从语言的发展历史开始讲起，一点点介绍，特点....
所以，今天的课程也还是很轻松的,就今天的课程，在这里我也就粗类的复习一下.
1.JavaScript是基于对象和事件驱动的语言，弱类型的脚本语言，也是一种直接在客服端的解释性语言.
所以，JavaScript不受版本和服务器环境的影响,只要浏览器可以执行js就ok.
2.JavaScript三种引入方式 ...
3.firebug工具的应用和代码的调试
4.document.write 输出语句
5.JavaScript的四种基本数据类型
数值型、字符串型、布尔型、空值null
通过typeof可以获取定义变量的数据类型
6.变量
变量名 变量值
变量的命名规则
声明变量的关键字 var
变量的赋值
7.运算符
算术运算、赋值运算、比较运算、逻辑运算、
8.三种消息框
警告框alert、确认框confirm、提示输入框prompt
9.注释代码
单行注释 // ....
多行注释 /* .... */
然后，做了几个练习
讲义也还是 发在这边吧
点击(惦记)我下载
2010年3月9日
#
刚刚一直在搞css关于圆角矩形的例子,网上看了不少吸收了不少新鲜的blood.
在这里只是提示一些把,本来要另外写一遍blog的.但没什么时间，而且还有几个作业没有完成.
css纯图圆角实现的原理其实很简单,但要是对于初学者来说，如果不理解这些原理的话,还是比较头疼的.现在一句话又是说不清楚，够麻烦的.这个问题下一次有机会补上..抱歉！！
然后，在今天还写了一个
css简单滑动菜单的效果详解链接 下午看了一部分，关于css的一些属性标签.很多很强大的属性和功能.相信一定会继续把css发扬光大.
CSS3 还是草案阶段，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。
备受期待的 CSS 3 新功能：
圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。
CSS3手册下载 还有今天的讲义下载地址：
点击(点击)我吧
没怎么写过这种纯技术类的东西.所以，对于写的东西也不太会很细致的分析和讲解.只是写在这里作为自己学习过程中的一个记录,但愿这些只言片语也希望在这里和大家分享,学习，交流，共同的进步.
关于导航菜单是任何网页中不可获取的一部分,所以，掌握这部分的内容也就尤为重要.今天写的这个实例也是老师讲解的例子.效果很不多，易于理解，代码量也很少.
如果有接触css的童鞋们都应该知道
伪类Pseudo-Classes这个特性.如果不知道的自己去查手册.[一定要知道手册的重要性,常备于身边，以备需要].伪类做用于a标签.通过link.hover.visited等属性实现滑动菜单的效果
实例效果如果下
下面是上面实例的代码:
1. 内容部分 content代码：
1 <div>
2 <ul class="links">
3 <li><a href="#">home</a></li>
4 <li><a href="#">about</a></li>
5 <li><a href="#">news</a></li>
6 <li><a href="#">blog</a></li>
7 <li><a href="#">content</a></li>
8 </ul>
9 </div>
2. 表现部分 css代码：
1 <style>
2 .links{
3 height:30px;
4 width:100%;
5 border-bottom:1px solid red;
6 }
7 .links li{
8 display:inline;
9 line-height:30px;
10 }
11 .links a{
12 color:white;
13 background-color:red;
14 line-height:30px;
15 margin-left:10px;
16 padding:10px;
17 font-size:14px;
18 font-weight:bold;
19 text-decoration:none;
20 }
21 .links a:hover{
22 color:#000;
23 background-color:#006600;
24 }
25 </style>