BlogJava-280211429-文章分类-jshttp://www.blogjava.net/280211429/category/13193.htmlzh-cnFri, 02 Mar 2007 05:00:41 GMTFri, 02 Mar 2007 05:00:41 GMT60js关键字总结http://www.blogjava.net/280211429/articles/59161.html国强国强Thu, 20 Jul 2006 04:28:00 GMThttp://www.blogjava.net/280211429/articles/59161.htmlhttp://www.blogjava.net/280211429/comments/59161.htmlhttp://www.blogjava.net/280211429/articles/59161.html#Feedback0http://www.blogjava.net/280211429/comments/commentRss/59161.htmlhttp://www.blogjava.net/280211429/services/trackbacks/59161.html1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = 
document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(""+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i++){
    if (form.elements.type == "text"){
        form.elements.value = "";
    }
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String("This is lightsword");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒  [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!--      //-->
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" onclick="location.href='b.html';return false">dfsadf</a>
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,
ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}
window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:onfocus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("http://www.dannyg.com";,"jaskdlf");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status="内容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose()
{event.returnValue="we really like you and hope you will stay longer.";}} 
 window.onbeforeunload=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var 

国强 2006-07-20 12:28 发表评论
]]>让我们的Javascript兼容多种浏览器 http://www.blogjava.net/280211429/articles/58947.html国强国强Wed, 19 Jul 2006 03:25:00 GMThttp://www.blogjava.net/280211429/articles/58947.htmlhttp://www.blogjava.net/280211429/comments/58947.htmlhttp://www.blogjava.net/280211429/articles/58947.html#Feedback0http://www.blogjava.net/280211429/comments/commentRss/58947.htmlhttp://www.blogjava.net/280211429/services/trackbacks/58947.html
示例代码：
<body><table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody>
  <tr>     <td id="banana" style="color:red" >不吃苹果</td>  </tr>
 </tbody></table></body>
尽量采用W3C DOM 的写法
以前访问对象可能是：
document.all.apple 或者 apple
现在应该采用：
document.getElementById("apple") 以ID来访问对象，且一个ID在页面中必须是唯一的
document.getElementsByTagName("div")[0] 以标签名来访问对象
原来设置对象的属性可能是：
document.all.apple.width=100 或 apple.width=100
现在应该采用：
document.getElementById("apple").setAttribute("width","100")
document.getElementsByTagName("div")[0].setAttribute("width","100")
访问对象的属性则采用：
document.getElementById("apple").getAttribute("width")
document.getElementsByTagName("div")[0].getAttribute("width")
W3C DOM在IE下的一些限制
因为起先的IE占据整个浏览器95%的份额，没有竞争压力，所以这位老大就硬是要玩点另类，不完全按WEB标准来搞。

在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性，
因此我还得按原来的点记法来访问和设置，以达到兼容各种浏览器的效果,如：
document.getElementById("banana").class
document.getElementById("banana").style.color
document.getElementById("banana").onclick
document.getElementById("banana").class="fruit"
document.getElementById("banana").style.color="blue"
document.getElementById("banana").onclick= function (){alert("我是香蕉")}
关于Firefox下的onload问题
function over(){
 alert("页面加载完毕")
}

正常情况下，我们赋与onload响应函数是：
document.body.onload= over
但是在Firefox下这样无法执行，
所以我们都都采用下面这种形式：
window.onload=over
关于IE下TABLE无法插入新行的问题
IE下TABLE无论是用innerHTML还是appendChild插入<tr>都没有效果，而其他浏览器却显示正常。解决他的方法是，将<tr>加到TABLE的<tbody>元素中，如下面所示：

var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("香蕉不吃苹果");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);


国强 2006-07-19 11:25 发表评论
]]>JavaScript 5：窗口和框架 http://www.blogjava.net/280211429/articles/58688.html国强国强Tue, 18 Jul 2006 01:54:00 GMThttp://www.blogjava.net/280211429/articles/58688.htmlhttp://www.blogjava.net/280211429/comments/58688.htmlhttp://www.blogjava.net/280211429/articles/58688.html#Feedback0http://www.blogjava.net/280211429/comments/commentRss/58688.htmlhttp://www.blogjava.net/280211429/services/trackbacks/58688.html
54 改变浏览器状态栏文字提示
  1. <script language=”JavaScript”>
  2. window.status = “A new status message”;
  3. </script>


55 弹出确认提示框
  1. <script language=”JavaScript”>
  2. var 
    3. userChoice = window.confirm(“Click OK or Cancel”);
  3. if (
    4. 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 
    3. 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 设置页面的滚动位置
  1. <script language=”JavaScript”>
  2. if (
    3. document.all) { //如果是IE浏览器则使用scrollTop属性
  3. document.body.scrollTop = 200;
  4.  } else { 
    5. //如果是NetScape浏览器则使用pageYOffset属性
  5. window.pageYOffset = 200;
  6.  }
    7. </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 
    3. 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. <
    3. frame name=”frame1” src=”135a.html”>
  3. <
    4. frame name=”frame2” src=”about:blank”>
  4. </
    5. frameset>
  5. 在frame1中加载frame2中的页面
  6. parent
    7. .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 
    3. 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 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
  1. <frameset cols=”0,50%,*”>
  2. <
    3. frame name=”codeFrame” src=”140code.html”>
  3. <
    4. frame name=”frame1” src=”140a.html”>
  4. <
    5. frame name=”frame2” src=”140b.html”>
  5. </
    6. frameset>


国强 2006-07-18 09:54 发表评论
]]>JavaScript实际应用：innerHTMl和确认提示的使用 http://www.blogjava.net/280211429/articles/58687.html国强国强Tue, 18 Jul 2006 01:50:00 GMThttp://www.blogjava.net/280211429/articles/58687.htmlhttp://www.blogjava.net/280211429/comments/58687.htmlhttp://www.blogjava.net/280211429/articles/58687.html#Feedback0http://www.blogjava.net/280211429/comments/commentRss/58687.htmlhttp://www.blogjava.net/280211429/services/trackbacks/58687.html 
　　今天开发中涉及到对一个层的信息控制，就是控制一个层中显示什么信息，查找资料才知道使用innerHTML属性来控制层的值，这个innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。

　　比如说我一个div层里本来没有值，我处罚一个事件后要显示值，那么就能够使用innerHTML属性了，其实innerHTML属性除了能控制层以外，还能控制窗口内容的所有元素，但是我没有测试过。

（1）对div标签的控制

div标签跟span标签是不一样的，div是一个层的块，span是一行，我们下面看演示就知道区别了。先来看一段控制div的代码。

程序代码 程序代码
<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}
</script>

DIV块测试：<div id="div1">默认值</div>

<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</a>


演示：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


　　运行的时候，点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”，但是注意其中的界面，就是会发现“DIV测试：”和“默认值”是两行显示的，因为DIV是按块来显示的。

（2）对span的控制

与div类似，但是它是按照行来显示的，看下面的代码：
程序代码 程序代码
<script language="javascript">
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}
</script>
Span行测试：
<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>


当点击“改变值为1”的时候，“默认值”将变为“值为1”，但是“Span行测试”和“默认值”是在同一行显示的，跟DIV不一样。

另外一个值得注意的就是，不管是div还是span，后面的名字都是以为id来定义的，不是象表单一样是使用name来定义的。

（3）confirm确认提示框的制作

当我们要执行一个危险操作的时候，比如删除某个内容等，那么就应该给用户相应的提示来用户不容易犯错误。一般提示都是使用confirm()函数来处理的，给它提交一个参数作为显示的信息提示，那么访问的时候将弹出对话框，如果点击了“确定”那么将改函数返回true，点击了“取消”将放回false，我们针对这个特点来使用两种方法来控制用户是否执行某个操作。

看代码：

程序代码 程序代码
<script language="javascript">
function accessNeteasy()
{
if(confirm('你真的要访问网易新闻 ?')) {
location='http://calendar.eyou.eyou';
}
}
function accessSina()
{
if (confirm('你确定要访问新浪新闻 ?')) {
return true;
} else {
return false;
}
}
</script>

访问方式一：
<a href="#" onClick="accessNeteasy()">网易新闻</a><br>
访问方式二：
<a href="http://news.sina.com.cn" onClick="return accessSina()">新浪新闻</a>


　　我们这里建立了两个函数，一个accessNeteay，一个accessSina，就是访问网易和新浪，我们使用不同的方法，第一种就是当点了链接以后，判断如果是true的话，那么就location到指定链接，这种方法比较不具有通用型，只能针对单个的链接。第二种方法是使用返回值的形式，当确定要访问的时候返回true，不确定的时候返回false，那么这个可以针对任何链接来做，写成一个通用的信息提示，方便页面中的调用。

以上代码都经过测试通过，可以自己再这个基础上进行扩展，写出自己需要的JavaScript代码。
更多小技巧建议参考蓝色理想的链接：http://www.blueidea.com/tech/web/2004/2379.asp


国强 2006-07-18 09:50 发表评论
]]>