哈佛公开课:构建动态网站——第六讲JavaScript

1.对于初学者首先要了解的是javascript是客户端编程语言,而非服务器端,即javascript代码不可调用php函数,php代码也不能调用javascript函数。不过javascript代码可以触发php函数的执行,但要通过http请求某.php文件来实现。因此javascript不能直接调用php函数,只有通过http请求来触发。

2.js的代码可以放在head标签之间,也可以放在body标签之间,但具体放哪里,要看作用是什么。比如网站的一个广告的效果的js代码放在了整个页面的最上面部分,那么如果广告网站崩溃了,就会导致自己的网站页面载入速度受到拖累,所以广告的js代码不要放在自己网站页面的最上面部分。

3.决定使用js时,要考虑用户群,因为总有些老掉牙的用户,使用的浏览器不支持js,所以可以加入<noscript>标签进行提示开启js功能。

4.

js创建数组的两种方法:
var a = new Array();
var a= [];

a[0]="foo";

a[1] = "bar";

a[2] = "baz";

//下面这种赋值方式,length属性会随着每次调用自动+1,因此效果等同于上面的赋值方式。

a[a.length]="foo";

a[a.length] = "bar";

a[a.length] = "baz";

如果想清空数组,那么直接输入a.length=0。这样就能实现垃圾回收了。这和PHP,java很像,不用自行管理内存,而不像c/c++。


5.document是一个对象,类似于php超全局变量,它总可用,且代表页面DOM(文档对象模型document object model)。

forms是document的属性,forms包含给定网页中所有表单的对象

<script> 
 
 // put cursor in username field if empty 
 if (document.forms.login.username.value === '') 
 { 
 document.forms.login.username.focus();  //如果没有填东西则把光标放入这一栏中
 } 
 
 // else put cursor in password field 
 else 
 { 
 document.forms.login.password.focus(); //由于php代码有可能已经预填充了用户名框,所以此时会把光标移动到密码框中
 } 
 
</script> 
html页面代码如下:

可见如果把那段关于focus的js代码放入上图中的head标签之间就会出现问题,因为document.forms.login此时还没有,只有等body里面的执行后才会有。因此最简单的办法就是把这段js代码写到文件最后,即<form>闭标签之后。

另一种方法就是使用window.onload,其意思是在整个窗口都载入后才会执行onload的代码



6.最开始讲过用php来做表单验证,现在介绍用js进行表单验证,js进行表单验证会非常有用,比单纯的服务器端验证更好用。因为一些问题没必要花时间去询问服务器比如填写的用户名和密码是否合法,但最关键的是因为无效email地址这样的错误,完全没有必要去让服务器查询是否存在在数据库中,或者像用户名留空,电话号码位数不对之类等等问题根本无需访问数据库。还有密码强度指示条这样根据输入的密码的长度等等来显示不同的gif图片这类功能,

下面代码在head标签中声明了一个函数而不是执行这个函数,所以是可行的,不会受页面是否加载完成影响。

<head>
 <script>
 
 function validate()
 {
 if (document.forms.registration.email.value == "")
 {
 alert("You must provide an email adddress.");
 return false;
 }
 else if (document.forms.registration.password1.value == "")
 {
 alert("You must provide a password.");
 return false;
 }
 else if (document.forms.registration.password1.value != document.forms.registration.password2.value)
 {
 alert("You must provide the same password twice.");
 return false;
 }
 else if (!document.forms.registration.agreement.checked)
 {
 alert("You must agree to our terms and conditions.");
 return false;
 }
 return true;
 }
 </script>
 <title></title>
 </head>
<body> 
 <form action="process.php" id="registration" method="get" οnsubmit="return validate();">lectures/6/src/form2.html
 Email: <input name="email" type="text">
 <br>
 Password: <input name="password1" type="password">
 <br>
 Password (again): <input name="password2" type="password">
 <br>
 I agree to the terms and conditions: <input name="agreement" type="checkbox">
 <br><br>
 <input type="submit" value="Submit">
 </form>
 </body>
 </html>

当今HTML中有丰富的事件处理器,后面可以跟js函数,上面代码中的onsubmit,表示在表单提交后,执行引号内代码,若onsubmit事件处理器返回值为true则浏览器会让表单提交,否则中断提交。

通过关键字with加前缀,这样就不用每次都写一大串了。

 <script>
 function validate()
 {
 with (document.forms.registration)
 {
 if (email.value == "")
 {
 …………
 }
 </script>

除了上面这种方式,还有一种办法,这是JQuery库中常用到的方法,不管是form div span还是任何元素,如果给此元素id属性(整个文件中唯一性),此时就可以使用js的内建函数

document.getElementById("registration").email.value="..."
只要有唯一ID,那么它可以获取DOM内任意元素。

7.当然也可以把表单当作函数的输入参数,而不用硬编码方式了,由于js是面向对象的,故通过this引用自身,引用当前对象的关键字,这里的当前对象是标签元素,即尖括号内的这些,引用此表单元素,它会传递一个当前DOM节点的指针或引用

<script>
 function validate(f)
 {
   if (f.email.value == "")
   ……
 }
</script>
<body>
    <form action="process.php" method="get" οnsubmit="return validate(this);"> //不需要name="registration"这个属性了 

 ……
</body>

通过onclick触发自己写的函数toggle()实现勾选后使得提交按钮可以使用。

<script>
 function toggle()
 {
 if (document.forms.registration.button.disabled)
 document.forms.registration.button.disabled = false;
 else
 document.forms.registration.button.disabled = true;
 }
</script>
<body>
I agree to the terms and conditions: <input name="agreement" οnclick="toggle();" type="checkbox">

</body>

还有种方法不需要调用函数,直接在onclick中翻转按钮的disabled值即可:

I agree to the terms and conditions: <input name="agreement" οnclick="document.forms.registration.button.disabled =
!document.forms.registration.button.disabled;" type="checkbox">

加入邮箱地址的简单判断,在大多数语言中正则表达式两边是用的双引号,而在js中庸的是斜线/,然后其内才是正则表达式.

" . "是任意一个字符," + "是一个或更多任意字符,转义符" \ "后面跟个" .  " 就表示实际的点," $ "表示匹配结尾。

<script>
 function validate()
 {
 if (!document.forms.registration.email.value.match(/.+@.+\.edu$/))
……
</script>
这是一个简单的判断,能排除掉.com和.gov等等人群,而对于¥¥@@@@.edu或者@@@@@@@.edu之类的地址则不能识别出有错。

通常为了开发效率会使用别人开发的库,而不必自己花时间琢磨如何完美判断出邮件地址是否合格。


7.js的函数传值可以这样foo({bar: 1, baz: 2, qux: 3});这样就不用担心搞混传值的顺序了,原本传值是foo(1,2,3),此时当传值多到10个,20个的时候就很容易搞混传值顺序。

8.关于对象(Objects)

var obj = new Object();
var obj = {};
obj.key = value;	//引用键有两种方式一种是这种通过点
obj["key"] = value;	//另一种就是看似数组,其实索引的还是对象。
var obj = {key: value};//关于对象的声明方式。如果值是字符串那么需要加上引号

9.js提供了许多事件,鼠标移动监视比如鼠标滑过图片图片就有变化,还有监听onkeyup或onkeypress等事件处理器实现google的自动补全功能:他们会获取值发送到服务器对应响应,最后用css给出匹配结果

10.通常css都有对应的js访问方式,因为比如css中的background-color在js中看来就像是减号运算,因此对应的在js中的表达方式是backgroundColor这样将连字符表示换成驼峰式表达。codepunk.hardwar.org.uk/css2js.htm列出了很多对应的转换,可以查阅。

11.标签内文字闪烁效果。visibility和display的区别在于,visibility隐藏的时候,被隐藏的东西还在占用页面空间,他不会移动页面内容。而display属性从block变为none时则不会占用页面。


之后我还需要定时器每半秒调用该函数一次。setInterval表示每500毫秒调用一次blinker函数


12.一些常见的库


如果碰到一些很牛角尖的问题,可以访问Quirks: www.quirksmode.org/js/contents.html,它能处理一些css js和html中出现的极端状况。

jslint:www.jslint.com 这个是js静态分析器,你可以将自己的js代码上传或复制给它,它将进行同w3c验证器类似的分析,语法分析等等来保证代码的性能。


还有压缩器,能实现js的压缩,至少是js文件压缩,有利于节约钱有利于性能,也可以提高别人盗取代码的门槛。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值