JavaScript方法和技巧大全
JavaScript方法和技巧大全
有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通Java了，直到目前，我才越来越觉得Java远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～
趁着节曰的空隙，把有关Java的方法和技巧整理下，让每个在为Java而烦恼的人明白，Java就这么回事！并希望Java还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～
适合阅读范围：对Java一无所知～离精通只差一步之遥的人
基础知识：HTML
Java就这么回事1：基础知识
1 创建脚本块
1: < language=”Java”>
2: Java code goes here
3:
2 隐藏脚本代码
1: < language=”Java”>
2:
5:
在不支持Java的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
1:
2: Hello to the non-Java browser.
3:
4 链接外部脚本文件
1: < language=”Java” src="/”filename.js"”>
5 注释脚本
1: // This is a comment
2: write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */
6 输出到浏览器
1: write(“
Hello”);
7 定义变量
1: var myVariable = “some ”;
8 字符串相加
1: var myString = “String1” + “String2”;
9 字符串搜索
1: < language=”Java”>
2:
7:
10 字符串替换
1: thisVar.replace(“Monday”,”Friday”);
11 格式化字串
1: < language=”Java”>
2:
21:
12 创建数组
1: < language=”Java”>
2:
11:
13 数组排序
1: < language=”Java”>
2:
11:
14 分割字符串
1: < language=”Java”>
2:
10:
15 弹出警告信息
1: < language=”Java”>
2:
5:
16 弹出确认框
1: < language=”Java”>
2:
5:
17 定义函数
1: < language=”Java”>
2:
8:
18 调用JS函数
1:
Link text
2:
Link text
19 在页面加载完成后执行函数
1:
2: Body of the page
3:
20 条件判断
1: <>
2:
7:
21 指定次数循环
1: <>
2:
11:
22 设定将来执行
1: <>
2:
8:
23 定时执行函数
1: <>
2:
9:
24 取消定时执行
1: <>
2:
9:
25 在页面卸载时候执行函数
1:
2: Body of the page
3:
Java就这么回事2：浏览器输出
26 访问document对象
1: < language=”Java”>
2: var myURL = URL;
3: alert(myURL);
4:
27 动态输出HTML
1: < language=”Java”>
2: write(“
Here’s some information about this document:
”);
3: write(“
”);
4: write(“- Referring Document: “ + referrer + “
”);
5: write(“- Domain: “ + domain + “
”);
6: write(“- URL: “ + URL + “
”);
7: write(“
”);
8:
28 输出换行
1: writeln(“
a”);
2: writeln(“b”);
29 输出曰期
1: < language=”Java”>
2: var thisDate = new Date();
3: write(thisDate.toString());
4:
30 指定曰期的时区
1: < language=”Java”>
2: var myOffset = -2;
3: var currentDate = new Date();
4: var userOffset = currentDate.getTimezoneOffset()/60;
5: var timeZoneDifference = userOffset - myOffset;
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
7: write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
8:
31 设置曰期输出格式
1: < language=”Java”>
2: var thisDate = new Date();
3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
5: write(thisTimeString + “ on “ + thisDateString);
6:
32 读取URL参数
1: < language=”Java”>
2: var urlParts = URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < parameterParts.length; i++) {
5: var pairParts = parameterParts.split(“=”);
6: var pairName = pairParts[0];
7: var pair = pairParts[1];
8: write(pairName + “ ：“ +pair );
9: }
10:
你还以为HTML是无状态的么？
33 打开一个新的document对象
1: < language=”Java”>
2: newDocument() {
3: open();
4: write(“
This is a New
”);
5: close();
6: }
7:
34 页面跳转
1: < language=”Java”>
2: location = “http://blog.94200.com”;
3:
35 添加网页加载进度窗口
1:
2:
3: < language='java'>
4: var placeHolder = open('holder.html','placeholder','width=200,height=200');
5:
6:
The Main Page
7:
8:
9:
This is the main page
10:
11:
Java就这么回事3：图像
36 读取图像属性
1:
2:
Width
3:
37 动态加载图像
1: < language=”Java”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4:
38 简单的图像替换
1: < language=”Java”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6:
7:
9:
39 随机显示图像
1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: write(‘
’);
9:
UID
7411
帖子
469
精华
5
积分
517
学院币
3066
能量值
5457
魅力值
2420
阅读权限
200
性别
男
来自
梦の梦
注册时间
2006-8-16
查看个人网站
查看详细资料
TOP
exipt
Jscript爽仔
舞ＨiＭeγ管理组~↘
L型°宅男
UID
7411
帖子
469
精华
5
积分
517
学院币
3066
能量值
5457
魅力值
2420
阅读权限
200
性别
男
来自
梦の梦
注册时间
2006-8-16
个人空间
发短消息
加为好友
当前离线
2# 大 中 小 发表于 2007-6-3 19:11 只看该作者
40 函数实现的图像替换
1: < language=”Java”>
2: var source = 0;
3: var replacement = 1;
4: createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13:
14:
16:
17:
41 创建幻灯片
1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: slideShow(imageNumber) {
12: slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18:
19:
20:
21:
42 随机广告图片
1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var urlList = new Array;
8: urlList[0] = “http://blog.94200.com”;
9: urlList[1] = “http://blog.94200.com”;
10: urlList[2] = “http://blog.94200.com”;
11: urlList[3] = “http://blog.94200.com”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: write(‘
’);
14:
Java就这么回事4：表单
还是先继续写完JS就这么回事系列吧～
43 表单构成
1:
44 访问表单中的文本框内容
1:
4:
Check Text Field
45 动态复制文本框内容
1:
5:
Copy Text Field
46 侦测文本框的变化
1:
47 访问选中的Select
1:
8:
Check Selection List
48 动态增加Select项
1:
7: < language=”Java”>
8: myForm.mySelect.length++;
9: myForm.mySelect.options[myForm.mySelect.length - 1].text = “3”;
10: myForm.mySelect.options[myForm.mySelect.length - 1]. = “Third Choice”;
11:
49 验证表单字段
1: < language=”Java”>
2: checkField(field) {
3: if (field. == “”) {
4: alert(“You must enter a in the field”);
5: field.focus();
6: }
7: }
8:
9:
50 验证Select项
1: checkList(selection) {
2: if (selection.length == 0) {
3: alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }
51 动态改变表单的action
1:
52 使用图像按钮
1:
6:
53 表单数据的加密
1: < LANGUAGE='Java'>
2:
17:
18:
Java就这么回事5：窗口和框架
54 改变浏览器状态栏文字提示
1: < language=”Java”>
2: status = “A new status message”;
3:
55 弹出确认提示框
1: < language=”Java”>
2: var userChoice = confirm(“Click OK or Cancel”);
3: if (userChoice) {
4: write(“You chose OK”);
5: } else {
6: write(“You chose Cancel”);
7: }
8:
56 提示输入
1: < language=”Java”>
2: var userName = prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3: write(“Your Name is “ + userName);
4:
57 打开一个新窗口
1: //打开一个名称为myNewWindow的浏览器新窗口
2: < language=”Java”>
3: open(“http://blog.94200.com”,”myNewWindow”);
4:
58 设置新窗口的大小
1: < language=”Java”>
2: open(“http://blog.94200.com”,”myNewWindow”,'height=300,width=300');
3:
59 设置新窗口的位置
1: < language=”Java”>
2: open(“http://blog.94200.com”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3:
60 是否显示工具栏和滚动栏
1: < language=”Java”>
2: open(“http:
61 是否可以缩放新窗口的大小
1: < language=”Java”>
2: open('http://blog.94200.com' , 'myNewWindow', 'resizable=yes' );
62 加载一个新的文档到当前窗口
1:
Open New Document
63 设置页面的滚动位置
1: < language=”Java”>
2: if (all) { //如果是IE浏览器则使用scrollTop属性
3: body.scrollTop = 200;
4: } else { //如果是NetScape浏览器则使用pageYOffset属性
5: pageYOffset = 200;
6: }
64 在IE中打开全屏窗口
1:
Open a full-screen window
65 新窗口和父窗口的操作
1: < language=”Java”>
2: //定义新窗口
3: var newWindow = open(“miss.html”,”newWindow”);
4: newclose(); //在父窗口中关闭打开的新窗口
5:
6: 在新窗口中关闭父窗口
7: opener.close()
66 往新窗口中写内容
1: < language=”Java”>
2: var newWindow = open(“”,”newWindow”);
3: newopen();
4: newwrite(“This is a new window”);
5: newclose();
6:
67 加载页面到框架页面
1:
2: < name=”1” src="/”135a.html"”>
3: < name=”2” src="/”blank"”>
4:
5: 在1中加载2中的页面
6: parent.2.location = “135b.html”;
68 在框架页面之间共享脚本
如果在1中html文件中有个脚本
1: doAlert() {
2: alert(“ 1 is loaded”);
3: }
那么在2中可以如此调用该方法
1:
2: This is 2.
3:
69 数据公用
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
1: < language=”Java”>
2: var persistentVariable = “This is a persistent ”;
3:
4:
5: < name=”1” src="/”138a.html"”>
6: < name=”2” src="/”138b.html"”>
7:
这样在1和2中都可以使用变量persistentVariable
70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1:
2: < name=”code” src="/”140code.html"”>
3: < name=”1” src="/”140a.html"”>
4: < name=”2” src="/”140b.html"”>
5:
UID
7411
帖子
469
精华
5
积分
517
学院币
3066
能量值
5457
魅力值
2420
阅读权限
200
性别
男
来自
梦の梦
注册时间
2006-8-16
查看个人网站
查看详细资料
TOP
exipt
Jscript爽仔
舞ＨiＭeγ管理组~↘
L型°宅男
UID
7411
帖子
469
精华
5
积分
517
学院币
3066
能量值
5457
魅力值
2420
阅读权限
200
性别
男
来自
梦の梦
注册时间
2006-8-16
个人空间
发短消息
加为好友
当前离线
3# 大 中 小 发表于 2007-6-3 19:29 只看该作者
index.html文件：
top.html文件:
这是顶部的网页文件
left.html文件：
这是左边的
网页文件
显示右边的
第一个文档
显示右边的第
二个文档
right1.html文件:
这是右边的第
一个网页文件
right2.html文件：
这是右边的第
二个网页文件
●爽仔自编html
●学习资料
●版权所有
●梦见る気分で
●QQ：493549859
html基础爽仔自编教程
第一课
●html语言基础
●html语言高级
●css(级联样式表)
●javascript语法
●dom对象模型编程
●脚本变成技术汇总
●正则表达式
-------------------------分界线------------------------
●-----了解html的一些背景知识
●-----html的全局架构标签
●-----格式标签
●-----文本标签
●-----超连接标签
●-----图象标签
●-----地图标签
-------------------------分界线------------------------
●什么是html
●html规范与版本
●ietf与W3C组织
-------------------------分界线------------------------
观察下面这段文本内容在记事本程序和浏览器程序中的显示与区别：
●html是英文HyperText Markup Language (超文本标签语言)的缩写
●以"<标签名>"表示标签开始，以“”表示标签的结束
●成对标签又称为容器，一对标签中还可以嵌套其他的标签
●单独标签不需要与之配对的结束标签，又称之为空标签，例如
●一个html标签及标签中嵌套的内容就是网页中的一个html元素
●属性设置的一般格式为：属性名=属性值，属性值部分可以用英文的双引号（“）或者单引号（‘）引起来，也可以不使用任何引号
●例子1 滚动的文字--------------------------->返回前面
-------------------------分界线------------------------
html规范与版本
●不同的浏览器之间的不兼容问题
●为什么要指定规范
●谁来制定规范
- IETF
- W3C
●正在使用的html版本
- html4.01
- xhtml
IETF
internet Engineering Task Force (internet工程任务组)，由网络设计人员，
操作员，厂商，专家组成的民间组织，主要负责有关ingernet的各种技术标准及接口规范与制定，其网址为
http://www.ietf.org .IETF以RFC(Requests for Comments,请求注释文档)定名所发布的各种标准与协议，
例如，RFC2616 (HTTP/1.1),RFC1521(MIME).
W3C
World Wide Web Consortium (习惯称之为WWW联盟)于1994年成
立，是与web有关的企业机构成立的业界同盟，其网址为http://www.w3c.org.W3C目前的成员
仅限于团体或组织，只要交纳一定的费用，并签署一份保证遵守规则的成员协议，任何公司
均可加入，W3C对web的标准握有生杀大权，负责研究，审定，发布，管理有关web的标准。
例如，html。css等--------------------------->返回前面
-------------------------分界线------------------------
html的全局架构标签
●一个最基本的网页文件组成结构：
显示在浏览器左方的标题
红色背景、蓝色文本
●
●
●
●
●Text属性：用于设定整个网页中的文字颜色。
●link属性：用于设定一般超连接文本的显示颜色。
●alink属性：用于设定鼠标移动到超连接上，超连接文本的显示颜色。
●vlink属性：用于设定访问过的超连接文本的显示颜色。
●background属性：用于设定背景墙纸所用的图象文件，可以是gif或jpeg文件的绝对或相对路径。
●bgcolor属性：用于设定背景颜色，当已设定背景墙纸时，这个属性会失去作用，除非墙纸具有透明部分。
●leftmargin属性：设定网页显示画面与浏览器窗口左边沿的间隙，单位为象素。
●topmargin属性：设定网页显示画面与浏览器窗口上边沿的间隙，单位为象素。
●bgsound属性：可以设置网页背景音乐，可以填写文件的相对路径或者绝对路径
●class、name、id、style等属性。
●例子 红色背景蓝色字体------------>返回前面
-------------------------分界线------------------------
Visual Studio .NET创建网页文档
●自动创建全局架构标签
●方便设置标签属性
●颜色类型的属性值有两种表达方式：
- 十六进制RGB颜色码使用一个#号后跟六位十六进制数据，例如#FF0000
- html的颜色常量名，例如red
文档类型定义：Document Type Definition, DTD
DTD语法:
●html指定文档类型的名称
●PUBLIC表明所依据的DTD文件可对任何人公开访问，而不是某个公司内部的规范文件。
●version name指定该html版本的标识名称。例如，html4.0的标识名称为 “-/W3C//DTD HTML4.01 Transitional//EN”。
对于ISO标准的DTD以“ISO”三个字母开头；被改进的非ISO标准的DTD以加号“+”开头；
未被改进的非ISO标准的DTD以减号“-”开头。
●url指定该html语言的定义规范文件在internet上的位置，例如，http://www.w3.org/TR/html4/loose.dtd。
●loose.dtd、strict.dtd、frameset.dtd。等文件名的区别。
-------------------------分界线------------------------
注释与特殊字符
●用""这种格式加入注释
●特殊字符可以用数值码和引用实体两种方式表示，例如：& #169; ©
●注释符号例子
HTML编码 显示或处理结果
< <
> >
& &
" "
® ®
© ©
™ ™
空字符
●在什么情况下需要用&qout表示"
●如果属性值中同时有单引号和双引号，该如何处理呢？假设标签的class属性值为'Z'X''X,那么，
●不使用引号的写法为:
●使用单引号的写法为:
●使用双引号的写法为:----都是不正确的!X
●正确的写法为:-------正确的写法!
●思考题：人们又为什么要对&字符安排一个html编码文本代码呢？
雪花代码 -------------------->>>>>返回前面
-------------------------分界线------------------------
格式标签
●创建一个段落|align对齐|右对齐align=right,左对齐align=left,居中align=center
●网页中换行
●防止过长的内容换行显示
●在网页中缩近显示
●网页中加入的图片和字居中显示
●移动显示之间的图形和字
有2个属性|滚动次数behavior=一次"slide"循环"scroll"来回"alternate"|滚动方向-->direction="up""down""left""right"
●dl创建普通的列表
●dt列表最上层的显示
●dd列表最下层的显示
●ol创建一个带有数字序号的列表
●ul创建标有圆点的列表
●li只能在ol和ul中使用创建具体的列表项目
●pre预先格式化的策略显示所有的空格和换行
--------------------------------返回前面
-------------------------分界线------------------------
文本标签
... ...
●显示字体大小数字越大字体越小
●b粗体字
●i斜体字
●u下画线
●sub建立文本下标显示比周围的文本低一些
●sup建立文本上标显示比周围的文本高一些
●tt用于打印风格字体显示文本
●cite引用的方式显示文本
●em显示需要强调的文本|斜体加粗体
●strong显示需要加重的文本|黑体粗体
●font可以对显示的文本的字体，字号和颜色的改变标签的三个属性|face字体名称|size字号大小-7~7之间的数字|color颜色
文本标签的综合事例-----------------------返回前面
-------------------------分界线------------------------
超连接标签
●什么是超连接？
●超连接标签:
例如，我的论坛
●什么是url？
url是URL(Uniform Resource Locator)
URL的基本组成：协议，主机名，端口号，资源名。
例如，http://www.xx.com:8080/index.html 如果不是80就要指定端口号才可以访问
相对URL,例如，"/a.html","./a.html","http://www.cnblogs.com/a.html","a.html".基准
url是http://www.xx.com/dir1/dir2/,相对URL是index.html,那么最后得到的完成的URL是http://www.xx.com/dir1/dir2/index.html.
URL指定参数,例如，
http://www.xx.com/xxx.htm?name=shuang&password=123 ?号是参数的分隔符，&是参数之间的分符
带有定位标记的url，例如，http://www.xx.com/index.htm#section2
URL编码
mailto URL，例如，
mailto:exipt@163.com?subect=feedback&body=how%20are%20you! 这个格式是电子邮件的格式%20代表空格
●URL编码
规则
●将空格转换为加号(+)
●对0-9，a-z，A-Z之间的字符保持不变
●对于所有其他的字符，用这个字符的当前字符集编码在内存中的十六进制格式表示，
并在每一字节前加一个百分号（%）。如字符“+”用%2B表示，字符“=”用%3D表示，
字符“&”用%26表示，每个中文字符在内存中占两个字节，字符“中”用%D6%D0
表示，字符“国”用%B9%FA表示
●对于空格也可以直接使用其十六进制编码方式，即用%20表示，而不是将它转换成如号（+）
说明：
●如果确信url串的特殊字符没有引起使用上的歧义或冲突，你也可以对这些字符不进行编码，
而是直接传递给服务器，例如。
http://www.xx.com/xxx.html?name=中国&password=123
●如果URL串中的特殊字符可能会产生歧义或冲突，则必须对这些特殊字符进行URL编码，例如。
服务器会将不编码的“中+国”当作“中 国”处理。还例如，当name参数值为“中&国”时
如果不对其中的“&”编码，URL字符串将有如下形式：
http://www.xx.com/xxx.html?name=中&国&password=123
应编码为：http://www.xx.com/xxx.html?name=中%26国&password=123
●http://www.xx.com/example/index.html#section2
可改写成：http://www.xx.com/example%2Findex.html%23section2 %2F解释为/ %23解释为#
●表示要访问的internet地址
src.htm
-------dest.htm
●超连接原与超连接目标
的target属性.
用定义定位标记，例如，第一部分
使用跳转到第一部分就可以定位到网页中的"标记1"这个位置.
在要打开的网页里加入这个标记即可打开侄标记前
●空白的标记
..这个空标记是直接返回自己网页的开头
..直接打开这个网页所在的文件夹
超级连接例子 --------------------返回前面
-------------------------分界线------------------------
图象标签
●![]()
标签，例如，
,,还可以
设置alt，align，border，width和height等属性。
●alt 指定当鼠标移动到图象上的时候显示的提示文本
●align 指定图象与周围文本的对齐方式
●border 指定图象边框宽度 可以是大与等于0的整数单位是像素
●width 图象显示的宽度
●height 图象显示的高度 如果没指定将显示图象的原始大小
●![]()
标签的显示过程
●根据SRC的地址加载图象数据
分析：一个web服务器是如何借助![]()
标签来收集其他web站点页面访问次数的？
●
标签，插入水平线可以设置|size,color,width和noshade等属性
●size 设置水线先粗细
●color 设置水平线颜色
●width 设置水平线宽度
●noshade 不用设置属性值，用来显示水平线有没有阴影
图片标签例子 -------------------->>返回前面
-------------------------分界线------------------------
图象地图
●图象超连接
●格式为:
●图象是地图什么？
把一幅图象分成多个区域，每个区域指向不同的url地址。例如，将一幅中国地图
的图象按照省市划分成若干区域，这些区域被称之为热点，单机热点区域，就可以连接到
与相应省市有关的页面，着就是图象地图。
●怎样产生图象地图
（1）首先必须定义出图象上的各个热点区域的形状，位置坐标，及其指向的url地址等信息
这个过程叫图象热点映射。图象热点映射需要使用标签对进行说明。
其中的name属性为该图象热点映射指定了一个名称。
（2）图象热点映射中的各个区域用标签说明，标签的格式为:
href部分可以用nobref替换，表示在该区域单机鼠标无效，标签还可以有一个target属性，用来指定浏览器
在哪个窗口或桢中显示href属性所指向的网页资源。
（3）定义好了图象热点映射后，接着就要在![]()
图象标签中增加一个名为usemap的属性设置
usemap属性指定该图象被用作图象地图，其设置值为所使用的图象热点映射名称，格式为：在
