（转载）javascript转自世纪流年blog
础知识
2005年5月2日22:25星期一 [ Dhtml ]
有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～
趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～
趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～
适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人
基础知识：HTML
基础知识：HTML
1 创建脚本块
1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script> 2 隐藏脚本代码
1: <script language=”JavaScript”>
2: <!--
3: document.write(“Hello”);
4: // -->
5: </script> 在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript> 4 链接外部脚本文件
1: <script language=”JavaScript” src=”filename.js”></script> 5 注释脚本
1: // This is a comment
2: document.write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */ 6 输出到浏览器
1: document.write(“<strong>Hello</strong>”); 7 定义变量
1: var myVariable = “some value”; 8 字符串相加
1: var myString = “String1” + “String2”; 9 字符串搜索
1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “Hello there”;
4: var therePlace = myVariable.search(“there”);
5: document.write(therePlace);
6: // -->
7: </script> 10 字符串替换
1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串
1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “Hello there”;
4: document.write(myVariable.big() + “<br>”);
5: document.write(myVariable.blink() + “<br>”);
6: document.write(myVariable.bold() + “<br>”);
7: document.write(myVariable.fixed() + “<br>”);
8: document.write(myVariable.fontcolor(“red”) + “<br>”);
9: document.write(myVariable.fontsize(“18pt”) + “<br>”);
10: document.write(myVariable.italics() + “<br>”);
11: document.write(myVariable.small() + “<br>”);
12: document.write(myVariable.strike() + “<br>”);
13: document.write(myVariable.sub() + “<br>”);
14: document.write(myVariable.sup() + “<br>”);
15: document.write(myVariable.toLowerCase() + “<br>”);
16: document.write(myVariable.toUpperCase() + “<br>”);
17:
18: var firstString = “My String”;
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
20: // -->
21: </script> 12 创建数组
] = “Fifth Entry”;
9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // -->
11: </script> 13 数组排序
] = “q”;
9: document.write(myArray.sort());
10: // -->
11: </script> 14 分割字符串
]);
9: // -->
10: </script> 15 弹出警告信息
1: <script language=”JavaScript”>
2: <!--
3: window.alert(“Hello”);
4: // -->
5: </script> 16 弹出确认框
1: <script language=”JavaScript”>
2: <!--
3: var result = window.confirm(“Click OK to continue”);
4: // -->
5: </script> 17 定义函数
1: <script language=”JavaScript”>
2: <!--
3: function multiple(number1,number2) {
4: var result = number1 * number2;
5: return result;
6: }
7: // -->
8: </script> 18 调用JS函数
1: <a href=”#” onClick=”functionName()”>Link text</a>
2: <a href=”javascript:functionName()”>Link text</a> 19 在页面加载完成后执行函数
1: <body onLoad=”functionName();”>
2: Body of the page
3: </body> 20 条件判断
1: <script>
2: <!--
3: var userChoice = window.confirm(“Choose OK or Cancel”);
4: var result = (userChoice == true) ? “OK” : “Cancel”;
5: document.write(result);
6: // -->
7: </script> 21 指定次数循环
; i < myArray.length; i++) {
8: document.write(myArray[i] + “<br>”);
9: }
10: // -->
11: </script> 22 设定将来执行
);
7: // -->
8: </script> 23 定时执行函数
);
8: // -->
9: </script> 24 取消定时执行
);
7: window.clearTimeout(myTimeout);
8: // -->
9: </script> 25 在页面卸载时候执行函数
1: <body onUnload=”functionName();”>
2: Body of the page
3: </body> JavaScript就这么回事2：浏览器输出
2005年5月2日23:05星期一 [ Dhtml ]
26 访问document对象
1: <script language=”JavaScript”>
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script> 27 动态输出HTML
1: <script language=”JavaScript”>
2: document.write(“<p>Here’s some information about this document:</p>”);
3: document.write(“<ul>”);
4: document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
5: document.write(“<li>Domain: “ + document.domain + “</li>”);
6: document.write(“<li>URL: “ + document.URL + “</li>”);
7: document.write(“</ul>”);
8: </script> 28 输出换行
1: document.writeln(“<strong>a</strong>”);
2: document.writeln(“b”); 29 输出日期
1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: document.write(thisDate.toString());
4: </script> 30 指定日期的时区
;
5: var timeZoneDifference = userOffset - myOffset;
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
8: </script> 31 设置日期输出格式
1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
5: document.write(thisTimeString + “ on “ + thisDateString);
6: </script> 32 读取URL参数
];
8: document.write(pairName + “ ：“ +pairValue );
9: }
10: </script> 你还以为HTML是无状态的么？
33 打开一个新的document对象
1: <script language=”JavaScript”>
2: function newDocument() {
3: document.open();
4: document.write(“<p>This is a New Document.</p>”);
5: document.close();
6: }
7: </script> 34 页面跳转
1: <script language=”JavaScript”>
2: window.location = “http://www.liu21st.com/”;
3: </script> 35 添加网页加载进度窗口
1: <html>
2: <head>
3: <script language='javaScript'>
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
5: </script>
6: <title>The Main Page</title>
7: </head>
8: <body onLoad='placeHolder.close()'>
9: <p>This is the main page</p>
10: </body>
11: </html> JavaScript就这么回事3：图像
2005年5月2日23:34星期一 [ Dhtml ]
36 读取图像属性
1: <img src=”image1.jpg” name=”myImage”>
2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3: 37 动态加载图像
1: <script language=”JavaScript”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </script> 38 简单的图像替换
1: <script language=”JavaScript”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6: </script>
7: <a href=”myUrl” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src=”image1.jpg” name=”myImage” width=100 height=100 border=0> 39 随机显示图像
] = “image4.jpg”;
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script> 40 函数实现的图像替换
;
4: function 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: </script>
14: <a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src=”image1.jpg” width=100 name=”myImage1” border=0>
17: </a> 41 创建幻灯片
);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src=”image1.jpg” width=100 name=”slideShow”> 42 随机广告图片
] = “http://right.here/”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14: </script> JavaScript就这么回事4：表单
2005年5月17日22:33星期二 [ Dhtml ]
还是先继续写完JS就这么回事系列吧～
43 表单构成
43 表单构成
1: <form method=”post” action=”target.html” name=”thisForm”>
2: <input type=”text” name=”myText”>
3: <select name=”mySelect”>
4: <option value=”1”>First Choice</option>
5: <option value=”2”>Second Choice</option>
6: </select>
7: <br>
8: <input type=”submit” value=”Submit Me”>
9: </form> 44 访问表单中的文本框内容
1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a> 45 动态复制文本框内容
1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=”#” onClick=”document.myForm.copyText.value =
6: document.myForm.myText.value;”>Copy Text Field</a> 46 侦测文本框的变化
1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3: </form> 47 访问选中的Select
</option>
6: </select>
7: </form>
8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a> 48 动态增加Select项
].value = “Third Choice”;
11: </script> 49 验证表单字段
1: <script language=”JavaScript”>
2: function checkField(field) {
3: if (field.value == “”) {
4: window.alert(“You must enter a value in the field”);
5: field.focus();
6: }
7: }
8: </script>
9: <form name=”myForm” action=”target.html”>
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11: <br><input type=”submit”>
12: </form> 50 验证Select项
) {
3: window.alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: } 51 动态改变表单的action
1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
7: </form> 52 使用图像按钮
1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src=”login.gif” value=”Login”>
5: </form>
6: 53 表单数据的加密
; i < myForm.elements.length; i++) {
12: myForm.elements[i].value = encrypt(myForm.elements[i].value);
13: }
14: }
15:
16: //-->
17: </SCRIPT>
18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form> 上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～
JavaScript就这么回事5：窗口和框架
2005年5月17日23:16星期二 [ Dhtml ]
54 改变浏览器状态栏文字提示
1: <script language=”JavaScript”>
2: window.status = “A new status message”;
3: </script> 55 弹出确认提示框
1: <script language=”JavaScript”>
2: var userChoice = window.confirm(“Click OK or Cancel”);
3: if (userChoice) {
4: document.write(“You chose OK”);
5: } else {
6: document.write(“You chose Cancel”);
7: }
8: </script> 56 提示输入
1: <script language=”JavaScript”>
2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3: document.write(“Your Name is “ + userName);
4: </script> 57 打开一个新窗口
1: //打开一个名称为myNewWindow的浏览器新窗口
2: <script language=”JavaScript”>
3: window.open(“http://www.liu21st.com/”,”myNewWindow”);
4: </script> 58 设置新窗口的大小
1: <script language=”JavaScript”>
2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
3: </script> 59 设置新窗口的位置
1: <script language=”JavaScript”>
2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </script> 60 是否显示工具栏和滚动栏
1: <script language=”JavaScript”>
2: window.open(“http: 61 是否可以缩放新窗口的大小
1: <script language=”JavaScript”>
2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 62 加载一个新的文档到当前窗口
1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a> 63 设置页面的滚动位置
;
6: }</script> 64 在IE中打开全屏窗口
1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 65 新窗口和父窗口的操作
1: <script language=”JavaScript”>
2: //定义新窗口
3: var newWindow = window.open(“128a.html”,”newWindow”);
4: newWindow.close(); //在父窗口中关闭打开的新窗口
5: </script>
6: 在新窗口中关闭父窗口
7: window.opener.close() 66 往新窗口中写内容
1: <script language=”JavaScript”>
2: var newWindow = window.open(“”,”newWindow”);
3: newWindow.document.open();
4: newWindow.document.write(“This is a new window”);
5: newWIndow.document.close();
6: </script> 67 加载页面到框架页面
1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src=”135a.html”>
3: <frame name=”frame2” src=”about:blank”>
4: </frameset>
5: 在frame1中加载frame2中的页面
6: parent.frame2.document.location = “135b.html”; 68 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本
1: function doAlert() {
2: window.alert(“Frame 1 is loaded”);
3: } 那么在frame2中可以如此调用该方法
1: <body onLoad=”parent.frame1.doAlert();”>
2: This is frame 2.
3: </body> 69 数据公用
可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
1: <script language=”JavaScript”>
2: var persistentVariable = “This is a persistent value”;
3: </script>
4: <frameset cols=”50%,*”>
5: <frame name=”frame1” src=”138a.html”>
6: <frame name=”frame2” src=”138b.html”>
7: </frameset> 这样在frame1和frame2中都可以使用变量persistentVariable
70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
%,*”>
2: <frame name=”codeFrame” src=”140code.html”>
3: <frame name=”frame1” src=”140a.html”>
4: <frame name=”frame2” src=”140b.html”>
5: </frameset> （转载）javascript转自世纪流年blog的更多相关文章
- 转载 Javascript继承两种形式详解
一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...
- 转载---javascript 定时器总结
转载:http://www.jb51.net/article/40193.htm JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延 ...
- [转载]Javascript异步编程的4种方法
NodeJs的最大特性就是"异步" 目前在NodeJs里实现异步的方法中,使用“回调”是最常见的. 其实还有其他4种实现异步的方法: 在此以做记录 --- http://www.r ...
- [转载] javascript实现深度克隆
js一般有两种不同数据类型的值: 基本类型(包括undefined,Null,boolean,String,Number),按值传递: 引用类型(包括数组,对象),按址传递,引用类型在值传递的时候是内 ...
- [转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function ...
- (转载)Javascript定义类（class）的三种方法
因在公司内部培训中有讲解到JS类的概念,不甚明白,于是进行了google找到了相关的介绍说明,现将其摘抄下来,以作记录. 在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- 转载 javascript中的正则表达式总结 二
学习正则表达式 今年的第一篇javascript文章就是这个正则表达式了,之前的文章是转载别人的,不算自己的东西,可以忽略不计,最近突然想把转载别人的东西 统统删掉,因为转载过的文章,我根本没有从中获 ...
- 转载 javascript中的正则表达式总结 一
定义正则表达式的方法 定义正则表达式的方法有两种:构造函数定义和正则表达式直接量定义.例如: var reg1 = new RegExp('\d{5, 11}'); // 通过构造函数定义 var r ...
随机推荐
- 学习笔记---C++伪函数（函数对象）
C++里面的伪函数(函数对象)其实就是一个类重载了()运算符,这样类的对象在使用()操作符时,看起来就像一个函数调用一样,这就叫做伪函数. class Hello{ public: void oper ...
- 九度OJ 1078 二叉树遍历
题目地址:http://ac.jobdu.com/problem.php?pid=1078 题目描述: 二叉树的前序.中序.后序遍历的定义: 前序遍历:对任一子树,先访问跟,然后遍历其左子树,最后遍历 ...
- Shell符号展开
字符 展开 * 这个 “*” 字符意味着匹配文件名中的任意字符 shell 把 “*” 展开成了另外的东西 ,在 echo 命令被执行前. ~家目录 算术表达式展开 算术表达式展开使用这种格式: $( ...
- 2016年1月编程语言排行榜：Java荣获2015年度冠军
Java因于2015年人气增幅最大(+ 5.94%),故获得2015年的TIOBE指数的编程语言奖,同时成为15年年度冠军, Visual Basic.NET(+ 1.51%)和Python(+ 1. ...
- http 常用状态码及含义
http://www.kuaipan.cn/developers/document_status.htm
- 【python】元组的插入
>>> temp=(1,2,3,4,5)>>> temp=temp[:2]+(8,)+temp[2:]>>> temp(1, 2, 8, 3, 4 ...
- 【python】python的二元表达式和三元表达式
二元表达式 x,y=4,3if x>y: s = yelse: s= x print s x if x<y else y 三元表达式: >>> def f(x,y): ...
- WPF中嵌入Flash(ActiveX)
1. 建立 WPF Application. 首先,建立一个名为 FlashinWPF 的 WPF Application 2. 设置 Window 属性. 在 XAML 中修改 Window 的属性 ...
- MDK常用快捷键
一.常用编译相关的快捷键 1.编译(单个文件) Ctrl+F7 2.连接 F7 二.常用调试相关的快捷键 1.运行/停止 Ctrl+F5 2.Run(全速运行) F5 3.Stop Deb ...
- 用JS实现避免重复加载相同js文件
我们在日常开发过程中,可能有重复加载同一个资源例如:1.js,为了提高性能和用户体验这里我们用原生JS实现同一个资源只加载一次. 下面是 common.js里的JS代码 //使用沙箱模式防止污染外面的 ...