Posts Tagged ‘javascript’

(function($){})(jQuery)含义

这里实际上是匿名函数

function(arg){…}
这就定义了一个匿名函数,参数为arg

而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery

via

 

javascript模拟掷骰子生成1到6的随机数

1
2
var diceThrow=Math.round(Math.random()*5)+1;
document.write("You threw a " + diceThrow);

需要注意的是
0=< random() <1
round()四舍五入,比如round(1.4)=1 ,round(1.5)=2
ceil()总是向上取近似值,比如ceil(0.00000000001)=1
floor()总是向上取近似值,比如floor(0.9999999999999)=0

 

php写的cet成绩批量查询

一直都关注cnbeta的动态,没想到20号的时候登录尽然有这条新闻:‘“2009年6月CET6成绩于今天2009年8月20号早上9点公布” ,cnbeta现在是嘛新闻都出啊。于是乎就拿出了俺的“证件夹”,掏出了准考证开始查成绩,我对这个网上cet查分的网站的认识和评价基本上和此文一样,这次6级得到437分,感觉还是差不多了,因为还重来没有认认真真的停下来背单词、作题,除了考四级的时候作了一张模拟卷。

cet_band_6_result

这个查询网站通过ajax来查询,需要等待15秒的时间,每次限查询一人成绩,听说08年的时候还要安装activex控件才能查询,对于linux用户就恼火了。通过分析一下http://cet.99sushe.com/这个页面发现没有表单(form),而是这样一句:

<input id="btn" type="button" name="" value="查询" onclick="submit_search();" /></p>

调用了一个js函数submit_search(); 网页引用了一个js文件:http://cet.99sushe.com/res/js/cet0908.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
var testid = "";
var score = "";
var contenthtml = "";
var sec = 15;  //默认等待15秒钟
String.prototype.trim  =  function(){
return  this.replace(/(^\s*)|(\s*$)/g,  ""); //javascrip没有自带trim函数,用来消除空白符
}
function gid(id) {return document.getElementById(id);} //返回表单输入的准考证号的值
function assertFormat(tid){   //检查准考证号格式
    var reg = /^\d{1,}$/;  //regexp 表示全部为数字
    if (!reg.test(tid) || tid.length != 15 || tid.substr(6, 3) != "091" || get_testtype(tid) == "") { //第6位其的三位数不是091的不准查,意思就是只能查09年上半年的成绩,而后用curl发现根本就没有其他几次考试的数据
    alert("准考证号格式不正确");
    return false;
}
else {
    for (var i = 1; i &lt;= 7; i++) {
        if (gid("t" + i).checked) {
            if (tid.substr(9, 1) != gid("t" + i).value) {
                alert("考试类型和准考证号不匹配");
                return false;
        }
    }
}
}
return true;
}
function submit_search() { //提交查询
    var testid_c = gid("id");
    var c = assertFormat(testid_c.value.trim());
    if(!c) {
        testid_c.focus();
        return;
}
testid = testid_c.value.trim();
if (contenthtml == "") contenthtml = gid("content").innerHTML; //得到content的div的innerHTML
//search(testid);
wait(); //等待15秒
}
function wait(){ //等待的时候把waithtml插入到content的div中
    var sec_all = sec;
    var waithtml = "
    <div id="
score_result">
    <div id="
score_inner">";
    waithtml += "
    <div id="
wait_title">系统正在查询中请稍候</div>
    "
;
    waithtml += "
    <div id="
time">" + sec + "</div>
    "
;
    waithtml += "</div>
    </div>
    "
;
    gid("content").innerHTML = waithtml;
    setTimeout("search(" + testid + ")", 0);
    wait_time(sec_all);
}
function wait_time(waitsec){
    if (waitsec > 0) { //15秒没有到
        gid("time").innerHTML = waitsec;
        waitsec--;
        setTimeout("wait_time(" + waitsec + ")", 1000);   //难道这就是传说的中递归调用函数?!
}
    else{
        showscore(score); //时间到了也该显示分数得了
    }
}
function showscore(tscore){
var name = "";
var school = "";
var sarray=new Array();
if(tscore != ""){
    sarray = tscore.split(',');//根据不同的考试类型来给sarray数列赋值
if (sarray.length >= 7) {
    name = sarray[6];
    school = sarray[5];
}
else {
    name = sarray[2];
    school = sarray[1];
}
}
var resulthtml = "
<div id="
score_result">
<h1>2009年6月考试成绩查询结果:</h1>
<div id="
score_inner">";
resulthtml += " <dl> <dt class="dtleft">考生姓名:</dt> <dd class="ddright">"+name+"</dd>";
resulthtml += "

<dt class="
dtleft">学校:</dt> <dd class="ddright">" + school + "</dd>";
resulthtml += "

<dt class="
dtleft">考试类别:</dt> <dd class="ddright">";
resulthtml += get_testtype(testid);
resulthtml += "</dd> <dt></dt> <dd style="overflow: hidden; height: 0px; clear: both;"></dd>";
resulthtml += "

<dt class="
dtleft">准考证号:</dt> <dd class="ddright">";
resulthtml += testid;
resulthtml += "</dd> </dl>
<ul>"
;
if(tscore == "") resulthtml += "<li>无法找到对应准考证号的分数,请确认你输入的准考证号无误</li>";
else {
if (sarray.length >= 7) {
    resulthtml += "
        <li>
    <div class="
lileft">您的成绩总分:</div>
    <div class="
liright" style="font-weight:bold;">" + sarray[4] + "</div></li>
    "
;
    resulthtml += "
        <li>
    <div class="
lileft">听力:</div>
    <div class="
liright">" + sarray[0] + "</div></li>
    "
;
    resulthtml += "
        <li>
    <div class="
lileft">阅读:</div>
    <div class="
liright">" + sarray[1] + "</div></li>
    "
;
    resulthtml += "
        <li>
    <div class="
lileft">综合:</div>
    <div class="
liright">" + sarray[2] + "</div></li>
    "
;
    resulthtml += "
        <li>
    <div class="
lileft">写作:</div>
    <div class="
liright">" + sarray[3] + "</div></li>
    "
;
}
else {
resulthtml += "
    <li>
<div class="
lileft">您的成绩总分:</div>
<div class="
liright" style="font-weight:bold;">" + sarray[0] + "</div></li>
"
;
}
}
resulthtml += "</ul>
<div style="
text-align:center;">姓名中的生僻字可能无法正常显示,以成绩单为准</div>
</div>
"
;
resulthtml += "
<p class="
lang" style="margin-top:-10px;text-align:center;"><input id="btn" onclick="re_search();" type="button" value="返回" /></p>

"
;
resulthtml += "</div>
"
;
gid("content").innerHTML = resulthtml; //通过js写html到dom上,用IE,firefox默认的源代码查看工具都没有发现源代码的变化,但是firefox扩展firebug就能看到,看来还是firebug牛逼。
}
function re_search() { //清空数据
        var testid = "";
        var score = "";
        gid("content").innerHTML = contenthtml;
}

function get_testtype(tid) { //根据考号得到考试类型
    switch (tid.substr(9, 1)) {
        case "1": return "英语四级";
        case "2": return "英语六级";
        case "3": return "日语四级";
        case "4": return "日语六级";
        case "5": return "德语四级";
        case "7": return "俄语四级";
        case "9": return "法语四级";
        default: return "";
    }
}
function search(tid){ //通过ajax post数据"id="+xxxxxxxxxxxxxxx
        var ajax = new Ajax();
        ajax.Post("/getscore.html", "id="+tid, search_callback); //这个就是关键,通过post发送数据到getscore.html来完成查询。
}
function search_callback(success, responsetext) {
    if (success) {
            score = responsetext;
            //showscore(score);
    }
    else {
        search(testid);
    }
}

——————————————-

总结起来就是向getscore.html post一个数据”id=”+xxxxxxxxxxxx

可以通过curl向指定的服务器发送数据包,具体方法此文 “斗智斗勇续 四六级查分技巧 ” 有介绍,需要注意的一点是查询的服务器有referer验证,referer验证一般用来防盗链,防止数据从非本站的提交上去,不过自定义referer并不是什么好难的事情,此为的作者还做了一个c#的gui前端,基本上就是把cmd的输出放在gui界面上,没有多大的意义。这个 “CET在线连续查分程序” 是别人用c#弄的一个在线查询,可以指定准考证号的起始号码和结束号码,就可以连续查询了。

然后我受到这样的启发,做了一个php版本的,演示地址:http://tunpishuang.iamspace.com/cet.php , 和c#那个略有不同的是并不是指定起始和结束地址,而是直接输入前6位,最多输出6000人的成绩,我贴一下源代码:

cet.php —————————————————

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2009年上半年CET院校成绩批量查询 by tunpishuang</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#description{
    border:solid 4px 4px 10px 4px #828282;
    color:#8B0000;
    width:420px;
}
#form{
    border:solid 4px #828282;
    color:#8B0000;
    width:520px;
}
</style>
</head>
<body>
<h1>2009年上半年CET院校成绩批量查询 by tunpishuang</h1>
<div id="description">
A.前6位是地区号.(可以问与你同一城市报名的任何一人)<br />
B.然后是071 (表示07年的第1次,即07年6月份的)<br />
C.然后是1或2 (1代表四级,2代表6级)<br />
D.然后的三位是你的考场号,多为0**或1**<br />
E.最后两位是你的座位<br />
</div>
<form method="post" action="cet_query.php">
<div id="form">
单人成绩查询(输入准考证号)<input type="text" name="tid" id="tid" size="15" maxlength="15" /><input type="submit" value="查一查,更健康" /><p></p>
院校成绩查询(输入准考证号前六位)<input type="text" name="cid" id="cid" size="8" maxlength="6" /><input type="submit" value="查一查,更健康" />
</div>
</form>
<div>
<h1>这个查询程序草草完工,有待完善的地方,但是我不想弄了,弄老一天,人都矿鸟<p></p>
有空到我博客来耍哈,<a href="http://techguru.cn">http://techguru.cn</a></h1>
</div>
</body>
</html>

cet_query.php—————————————————-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<?php
echo "
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>查询结果</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<style type=\"text/css\">
table,td,tr,th{
    border:solid 1px #1E90FF;
    text-align:center;
}
</style>
</head>
<body>
<table cellpadding=\"15\" cellspacing=\"0\" >
<tr>
    <th>听力</th>
    <th>阅读</th>
    <th>综合</th>
    <th>写作</th>
    <th>总分</th>
    <th>学校</th>
    <th>姓名</th>
</tr>
"
;

$data_fmt=array();
function query($id){
    $curl = curl_init();
    $curlpost='id='.$id;
    curl_setopt($curl, CURLOPT_URL, 'http://cet.99sushe.com/getscore.html');
    curl_setopt($curl, CURLOPT_REFERER, 'http://cet.99sushe.com');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_POST,1);
    curl_setopt($curl, CURLOPT_POSTFIELDS,$curlpost);
    curl_setopt($curl, CURLOPT_CONNECTTIMEOUT,0);
    $data = curl_exec($curl);
    global $data_fmt;
    $data_fmt=explode(",",$data);
    echo "
<tr>
    <td>$data_fmt[0]</td>
    <td>$data_fmt[1]</td>
    <td>$data_fmt[2]</td>
    <td>$data_fmt[3]</td>
    <td>$data_fmt[4]</td>
    <td>$data_fmt[5]</td>
    <td>$data_fmt[6]</td>
</tr>"

;
    curl_close($curl);
    }

function person_query($tid){
    query($tid);
   
}
function college_query($cid)
{   $cid=$_POST['cid'];
    $cid=sprintf("%.0f",$cid."091200100");
    $j=0;
    $k=0;
    while($k<2){
            while($j<100){
                    for($i=0;$i<30;$i++)
                        {   $cid=sprintf("%.0f",$cid+1);
                            query($cid);
                        }
                    $cid=$cid-30;
                    $cid=$cid+100;
                    $j++;
            }
        $cid=$_POST['cid'];
        $cid=sprintf("%.0f",$cid."091200100");
        $j=0;
        $k++;
       
    }
}
if(($_POST['tid'])!=0){
    $tid=$_POST['tid'];
    person_query($tid);
    }
if(($_POST['cid'])!=0){
    $cid=$_POST['cid'];
    college_query($_POST['cid']);
    }
echo "</table>
</body>
</html>"
;
?>
<!--  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>查询结果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table,td,tr,th{
    border:solid 1px #1E90FF;
    text-align:center;
}
</style>
</head>
<body>
<table cellpadding="15" cellspacing="0" >
<tr>
    <th>听力</th>
    <th>阅读</th>
    <th>综合</th>
    <th>写作</th>
    <th>总分</th>
    <th>学校</th>
    <th>姓名</th>
</tr>

<tr>
    <td><?php echo $data_fmt[0]?></td>
    <td><?php echo $data_fmt[1]?></td>
    <td><?php echo $data_fmt[2]?></td>
    <td><?php echo $data_fmt[3]?></td>
    <td><?php echo $data_fmt[4]?></td>
    <td><?php echo $data_fmt[5]?></td>
    <td><?php echo $data_fmt[6]?></td>
</tr>
</table>
</body>
</html>
-->

没有什么好讲的吧,主要是用到了php的libcurl库抓网页。

 

书评 how to do everything with javascript

自从一心专攻网站技术,就开始学习javascript, 学习javascript对于网站开发人员来说是极其重要的。是以后要学习的ajax,jquery,json的基础,好像是这样的,因为上面提及的三门技术我还没什么概念。

这本书从09.5.12看到09.7.3,进度很慢,原因有2。1是英文版看起吃力,2是每天无聊的课的耽搁,为了加快进度,上课的时候在psp上看。

我喜欢看电子书有两个原因,1是,这种教材式的书籍上面都有很多的例子,参照电子书写例子比看纸质书籍好,纸质书籍不好放。2是,计算机类的书籍都比较贵,买不起,除非我觉得确实很经典的,我就会买。

电子书我还是觉得html,pdf,chm格式好,最怕碰到下载的电子书格式是pdg,很多国内的出版的电子书都用的是超星扫描的,不知道是技术落后,还是故意的,pdg的清晰度让人汗颜,特别是图片,基本上是一团乱麻。

废话说完了,谈谈这本书吧,它是2003年出版的,是有点历史了,讲解主要以javascript 1.x为范例,2.0的一些新特性只是介绍性的谈讨了一下。实验环境,也就是浏览器用的是windows 98自带的那个版本的IE, 还有netscape(netscape已经在08年停止官方支持),现已经是2009过半了,IE7,8, firefox3,3.5已经普天盖地,这样就造成了有几个例子在firefox 3.5上的无效,比如这个通过Js修改页面样式的例子,在IE8,firefox 3.5下面都无效:

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>modify styles using javascript</title>
<script language=”javascript” type=”text/javascript”>
var textboxes = document.getElementsByTagName(“input”);
for (var counter=0;counter<textboxes.length;counter++)
{
var mytextbox= textboxes[counter];
mytextbox.style.backgroundColor =”black”;
mytextbox.style.color=”white”;
mytextbox.style.font=”22pt Arial”; }
</script>
</head>
<body>
<form action=”#” method=”get”>
<div style=”position:absolute;top:50px;left:100px;”> full name:<br />
<input type=”text” name=”fullname” id=”fullname” />
<br />
email address:<br />
<input type=”text” name=”email” id=”email” />
</div>
</form>
</body>
</html>
——————————————

具体无效的原因我不知道。

书中讲解javascript语法没有什么好说的,什么if,while,switch,for,也是中规中矩的讲解,后面关于javascript操作DOM的例子我觉得少了一点,当然一本300多页的书,要把每个属性,方法都用例子来阐述一遍那绝对是无稽之谈。该书还涉及到了js对框架的操作,我觉得框架貌似现在正在从人们的眼前中消失,记得高中的时候我在弄一个个人主页,还没有学css,也没有听说过表格排版,当时就用frame的组合来做了一个主页,google搜索的时候把每个frame分别看作单独的网页索引了起来,header,footer,nav 全是分离了的,这让我对frame的印象一直不是很好。不过一些大型的社区网站仍然采用框架,比如猫扑大杂烩左边框架显示帖子标题,右边显示帖子内容。

书中最后提到javascript操作对象,比如java applet,window媒体,flash。也就是说javascript起初开发出来的目的主要还是对java applet起到一定的交互作用,后面功能不断的扩大,还有了官方的规范。

看了这本书我对这些规范有了更加深刻的认识,国内计算机类的书籍有个弊病就是经常只讲技术而忽略了讲的语言的一些相关规范,工具的使用许可之类涉及到法律的问题。也难怪“绿坝”用了别个的函数库也不声明一下。扯远了….

总之我觉得这是一本概念性的书籍,我想更深入的DOM,我不知道学来做什么,也不知道可以做什么,但很重要的说。

接下来打算在http://www.w3school.com.cn 混迹,上面有很多鲜活的例子。

————–irrelevant———-

距放暑假还有1个星期,先跟到同学去西安耍几天,然后学车,争取暑假完之前拿到驾照,哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈。