Javascript&Ajax笔记一
<script. type="text/javascript">
//js代码写在其间,不会有html出现
</script>
对于极少数不能识别js的浏览器的预防
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
// js 代码写这里
.....
// ..... -->
</script>
奥秘在注释标签<!-- 在html 一直管到-->
而同样<!--在 js中只管到行末
window.document.write(".."); 来向浏览器写内容
字符串相加在js中使用+号
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
//
alert("Hello World");
var a= " What a ";
var b= "good day!";
var c= 1;
var d=a+b+c;
window.document.write(d);
// ..... -->
</script>
prompt()是接收输入的函数对话框
在网页上显示当前时间
<!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>Javascript. test</title>
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
//
var now = new Date();
var the_year = now.getYear();
var the_month = now.getMonth()+1;
//因为 Jan 返回的是0
var the_date = now.getDate();
var the_hour = now.getHours();
var the_minute = now.getMinutes();
var date_string;
var time_string;
var whole_string;
var date_string = fixTime(the_month) + "/" + fixTime(the_date) + "/" + fixY2K(the_year);
var time_string = fixTime(the_hour) + ":" + fixTime(the_minute);
var whole_string = "NOW is " + date_string + "." + time_string + ".";
function fixY2K(n) {
if (n<1000) {
n=n+1900;
}
return n;
}
//2000年问题
function fixTime(n) {
if (n<10) {
n="0"+n;
}
return n;
}
//不到10就前面添0
// ..... -->
</script>
</head>
<body>
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
// js 代码写这里
document.write(whole_string);
// ..... -->
</script>
</body>
</html>
关于浏览器信息
navigator.appName
navigator.apVersion
navigator.userAgent
读取浏览器信息以后,还可以考虑redirect浏览者到不同页面.
window.location.href = "... " 注意要用 / 不用 \
事件驱动 event-driven
<a href="#" nMouseOver ="alert('Just a test for event-driven')">Test </a>
这里js代码可以唯一出现在不是<script>tag内,而是在事件激发的双引号内.
图片的转换例子
<body>
<img src="1.jpg" name = "my_image" nMouseOver ="window.document.my_image.src='2.jpg' " nMouseOut ="window.document.my_image.src='1.jpg'" />
</body>
在img标签里面name属灵设置值以后,就可以在js的document对象引用它了. onMouseOver和onMouseOut是鼠标移入移出那个超链接的事件激发. 可能有一些浏览器不允许这两个事件,那可以把图片嵌入一个链接#的a标签中,在a标签里设置事件激发.
一个web page 有以window对象为根开始的 Document Object Model (DOM) 是一个树状结构
window.document.myimage.src 就是从window对象,寻找子对象document,再寻找子对象myimage,得到它的属性src.
图片转换的时候,因为网速慢,有些图片下载慢,可以强制让浏览器在开始的时候就把所有的图片都下载下来.
具体就是用一个Image对象,设置它的src属性为要转换的图片.
window对象
创建新窗口 open()方法
第一个参数是url,第二个参数书html name,可以在别的地方的链接里面通过target来访问这个name.
之后还有很多设置. 关闭是close()
focus()让窗口置前,而blur()反之.
几个窗口是如何互相看待呢? 都是自我中心主义的.
比如window1里面 用window.open()打开了window2,那么在window1里面看它就是window2,引用的时候也是用window2对象,而在window2自己里面看自己是window对象.
而在window2对象里面是通过window的opener属性得到的
比如在window2里面
var my_parent = window.opener; //注意window2自我中心,看自己是window.
my_parent.status = 'Hello'; //就可以修改父窗口的内容了.
window的status属性 就是设置窗口下面的状态条的内容,是很有用的.
比如
<a href = "http://www.google.com" nMouseOver = "window.status= 'It is a famous search engine site'"> Google </a>
你要在状态栏中显示一些相关信息.
resizeTo()是改变大小, resizeBy()是改变值,moveTo()是移动窗口.
Js 和 表单Forms
首先是一样给form和form内的各元素添加name属性,然后通过DOM和上面一样,js可以非常容易访问到任何元素.
比如
<form. name = "my_form">
Name : <input type = "text" name = "Name_field">
</form>
那么就可以通过 window.document.my_form.Name_field.value来访问文本框中的内容.
比如一个简单乘法器
<head>
<title>Multiplier</title>
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
// js 代码写这里
function multiply()
{ var ne= window.document.my_form.num1.value;
var two= window.document.my_form.num2.value;
var product = one * two;
window.document.my_form.answer.value = product;
}
// ..... -->
</script>
</head>
<body>
<form. name= "my_form">
Number 1: <input type="text" name="num1" /> <br />
Number 2: <input type="text" name="num2" /> <br />
Answer : <input type="text" name="answer" /> <br />
<a href="#" nclick="multiply(); return false;"> Multiply them!</a>
</form>
</body>
</html>
对于textarea 在value属灵里也可以多行接收
对于check 框来说 不是value属性 而是 checked 属性
很显然选择某个check项就是访问它的checked属性设置为true. 也可以了解用户选择的状况.
对于 radio button来说,因为一组内的button name都是一样,所以js采取数据形式
比如 my_form里面第二个radio框是否选中
就要判断
window.document.my_form.radio[1].checked==true
因为数组下标是从0开始的.
对于Pull-Down Menus 和 Scrollable Lists有selected属性
对于表单元素来说也有各自的事件激发,比如
text的 onChange事件, Form的 onSubmit事件
比如一个网页链接器
<form. name = "my_form" nSubmit = "window.location = window.document.my_form.the_url.value; return false;">
<input type = "text" name = "the_url" value = "http://">
<input type = "submit" value = "Go there!">
</form>
当然当前对象都可以用this来代替
比如
window.document.my_form.the_url.value可以写做 this.the_url.value
因为在form里面出现,this就是代表这个form
如果在text框里面出现,则表示这个text框对象.
所以下拉菜单页面转换就是很明显的了.
在select里面设计onChange()事件 来让window.location = this.value;
function visit(site)
{
window.location = site;
}
..
<form. name = "my_form">
<select name = "my_select" nChange = "visit(this.value);" >
<option value = "http://www.google.com"> Google </option>
<option value = "http://www.msn.com"> MSN </option>
</select>
</form>
在DOM中 , 还可以给一些元素,比如表单中某个radio选项一个id
比如
<input type = "radio" name ="age" id = "age1" value = "young">
那么
var myElement = window.document.getElementById("age1");
就可以马上访问到这个对象
比如可以马上设置
myElement.checked = true;
其实当浏览器读取html的时候js就自动生成了很多数组,比如image的数组,form的数组等等
这些built-in数组可以用来访问到元素
比如 window.document.image就保存了一个图像数组, 用它的length属性就可以知道有多少个图片.
内置 setTimeout()函数可以定义在多久之后运行什么. 它的第二个参数是毫秒.
js library
prototype
http://prototype.conio.net
Java Web Parts
http://javawebparts.sourceforge.net
Script.aculo.us
http://script.aculo.us
Yahoo! User Interface Library
http://developer.yahoo.com/yui
MochiKit
http://www.mochikit.com
Rico
http://openrico.org
Mootools
http://mootools.net
js and ajax code
http://www.dhtmlgoodies.com
http://javascript.internet.com
http://www.dynamicdrive.com
http://www.jsmadeeasy.com
http://ajaxian.com
http://ajaxgoals.com
http://ajaxpatterns.org
http://cakephp.org //ajax with php
http://www.nextapp.com/platform/echo2/echo
产生ajax的servlet,和gwt类似
TAG: