BlogJava-qqjianyue代码工-随笔分类-javascript

BlogJava-qqjianyue代码工-随笔分类-javascripthttp://www.blogjava.net/jianyue/category/34137.html砌java代码zh-cnFri, 11 Dec 2009 11:11:08 GMTFri, 11 Dec 2009 11:11:08 GMT60javascript 标准方法加载script标签http://www.blogjava.net/jianyue/archive/2009/12/11/305638.htmlQziQziFri, 11 Dec 2009 10:57:00 GMThttp://www.blogjava.net/jianyue/archive/2009/12/11/305638.htmlhttp://www.blogjava.net/jianyue/comments/305638.htmlhttp://www.blogjava.net/jianyue/archive/2009/12/11/305638.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/305638.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/305638.htmlIE的 script 元素支持onreadystatechange事件，不支持onload事件。
FF的script 元素不支持onreadystatechange事件，只支持onload事件。
如果要在一个<script src="xx.js"> 加载完成执行一个操作，FF使用onload事件就行了，IE下则要结合onreadystatechange事件和this.readyState
var loadScript = function(fileName,callback) {
var scriptTag = document.createElement("script");
  scriptTag.src = fileName;
  document.body.appendChild(scriptTag);
  if (callback) {
   scriptTag.onload = callback;//ff
   scriptTag.onreadystatechange = function()//ie
   {
    if (scriptTag.readyState == "loaded") {
    callback();
   }
  }
}
}

Qzi 2009-12-11 18:57 发表评论

]]>json 最简单入门http://www.blogjava.net/jianyue/archive/2009/06/01/javascript.htmlQziQziMon, 01 Jun 2009 05:33:00 GMThttp://www.blogjava.net/jianyue/archive/2009/06/01/javascript.htmlhttp://www.blogjava.net/jianyue/comments/279379.htmlhttp://www.blogjava.net/jianyue/archive/2009/06/01/javascript.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/279379.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/279379.html {
property0 : true,                    //property0是一个布尔型的值
property1 : 0,                        //property1是一个数值型的值
property2 : "123",                 //property2是一个字符串型的值
property3 : function(){...}     //property3是一个函数
}
使用key-value对构造json对象，注意属性的key和value使用“:”分开，属性之间使用“,”分开，注意最后的属性没有“,”，什么符号都不要有。将此结构直接赋值给js的对象，则可以使用这个对象调用这些属性。
例如：var obj1 = {
property0 : true,                    //property0是一个布尔型的值
property1 : 0,                        //property1是一个数值型的值
property2 : "123",                 //property2是一个字符串型的值
property3 : function(){...},     //property3是一个函数
property4 : { p1 : p1Value, p2 : p2Value }    //property4本身又是一个对象
}
那么可以调用
alert(obj1.property0);
obj1.property3();
……
在Java Web开发中，服务端负责输出这串字符到jsp页面的js，就可以使用了。

关键的是，字符串中可能具有js需要避免的特殊字符，建议查看一下spring的JavascriptUtils的javaScriptEscape方法就知道如何做啦
如果是Ajax调用的话，就是用prototype库的方法，将字符串转换为json对象
new Ajax.Request("http://url/", {
  method: "get",
  onSuccess: function(transport) {
    var json = transport.responseText.evalJSON();
    // TODO: document.write(json.xxx);
  }
prototype库的官网：    http://prototypejs.org/
});
2.    Json的数组形式
其实js中的数组更像是一个Map对象，因为它的key不只是整数，还可以是字符串。
var array;
array["key0"] = key0Value;
array["key1"] = key1Value;

Qzi 2009-06-01 13:33 发表评论

]]>Javascript设计模式学习系列一http://www.blogjava.net/jianyue/archive/2009/05/16/270978.htmlQziQziSat, 16 May 2009 02:36:00 GMThttp://www.blogjava.net/jianyue/archive/2009/05/16/270978.htmlhttp://www.blogjava.net/jianyue/comments/270978.htmlhttp://www.blogjava.net/jianyue/archive/2009/05/16/270978.html#Feedback2http://www.blogjava.net/jianyue/comments/commentRss/270978.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/270978.html我现在学习的书本是：Pro Javascript Design Pattern

首先简单地为优雅的Javascript代码开个头

运用设计模式的三大原因：
可维护性
沟通交流性
性能追求
不使用设计模式的两大原因：
复杂性
性能追求
阅读全文

Qzi 2009-05-16 10:36 发表评论

]]>动态导入 css/javascript 文件http://www.blogjava.net/jianyue/archive/2009/02/18/255240.htmlQziQziWed, 18 Feb 2009 04:43:00 GMThttp://www.blogjava.net/jianyue/archive/2009/02/18/255240.htmlhttp://www.blogjava.net/jianyue/comments/255240.htmlhttp://www.blogjava.net/jianyue/archive/2009/02/18/255240.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/255240.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/255240.html import导入文件的路径、类型、和title，title用来标识你是否已导入这个文件用。
setStyle用于使导入的css有效，根据不同的浏览器，可能css生效的条件不同，反复无效与有效间切换，可以使得最后有效。

1

function $import(path, type, title) {
2

var s, i;
3

if (type == "js") {
4

var ss = document.getElementsByTagName("script");
5

for (i = 0; i < ss.length; i++) {
6

if (ss[i].src && ss[i].src.indexOf(path) != -1) {
7

return;
8

}
9

}
10

s = document.createElement("script");
11

s.type = "text/javascript";
12

s.src = path;
13

} else {
14

if (type == "css") {
15

var ls = document.getElementsByTagName("link");
16

for (i = 0; i < ls.length; i++) {
17

if (ls[i].href && ls[i].href.indexOf(path) != -1) {
18

return;
19

}
20

}
21

s = document.createElement("link");
22

s.rel = "alternate stylesheet";
23

s.type = "text/css";
24

s.href = path;
25

s.title = title;
26

s.disabled = false;
27

} else {
28

return;
29

}
30

}
31

var head = document.getElementsByTagName("head")[0];
32

head.appendChild(s);
33

}
34

35

function setStyle(title) {
36

var i, links, eflag = false;
37

links = document.getElementsByTagName("link");
38

for (i = 0; links[i]; i++) {
39

if (links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) {
40

links[i].disabled = true;
41

if (links[i].getAttribute("title").indexOf(title) != -1) {
42

links[i].disabled = false;
43

eflag = true;
44

}
45

}
46

}
47

if (!eflag) {
48

$import("skin/" + title + "/default.css", "css", title);
49

setStyle(title);
50

}
51

}

Qzi 2009-02-18 12:43 发表评论

]]>javascirpt string对象的四个methodhttp://www.blogjava.net/jianyue/archive/2008/08/31/225947.htmlQziQziSun, 31 Aug 2008 13:03:00 GMThttp://www.blogjava.net/jianyue/archive/2008/08/31/225947.htmlhttp://www.blogjava.net/jianyue/comments/225947.htmlhttp://www.blogjava.net/jianyue/archive/2008/08/31/225947.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/225947.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/225947.html下面的stirng对象变量都缩写成str

四个方法search，split，replace， match

详细解说

search用法：str.search("子串")

如果str中存在子串，则返回子串开头字符在str中的索引（即位置，当然是0或者正数），若str中不存在匹配子串则返回－1

例如："JavaScript regular expressions are powerful!".search("pow")返回的是35，因为pow在前面字符串的第35位置

split用法：str.split("分隔字符")

返回由str中由用户所定分隔字符的各字符串，字符串间由，号隔开

例如： "10 / 3 / / 4 / 7 / 9".split ("/")，返回的是10, 3,空格, 4, 7, 9，认真看一下会发现数字与逗号间也有空格

文章中有这句话：Using split() with a regular expression argument (rather than a string argument) allows you the flexibility of ignoring multiple whitespace or delimiter characters.

我这里明显用的是普通字符串参数，下面用的是正则式参数

"10 / 3 / / 4 / 7 / 9".split(/[ \/]+/);

返回的是：10,3,4,7,9，注意这个串与上面串在空格的不同，数字与逗号间没有空格，这就是所谓的忽略空格

replace用法：str.replace("匹配子串"，"替换匹配子串的串")

如果匹配子串在原串中找不到，将不进行替换，返回是原串，若能找到匹配子串，则返回替换后的串

例如：var s = "Hello. Regexps are fun.";s = s.replace(".", "!");

叹号将代替第一个点号然后返回串，这是此函数特点，只替换第一处匹配的地方，如果要替换每处匹配的地方，需要用到正则式，正则式的作用很大，但是我只会皮毛，在此不举例。

match用法：str.match("匹配子串")

若没有匹配子串，则返回空，若存在匹配子串，则返回子串

Qzi 2008-08-31 21:03 发表评论

]]>javascript定位页面tag objecthttp://www.blogjava.net/jianyue/archive/2008/08/27/225119.htmlQziQziWed, 27 Aug 2008 10:57:00 GMThttp://www.blogjava.net/jianyue/archive/2008/08/27/225119.htmlhttp://www.blogjava.net/jianyue/comments/225119.htmlhttp://www.blogjava.net/jianyue/archive/2008/08/27/225119.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/225119.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/225119.html第一条：javascript非常脆弱，请一定要小心，不要敲错一个单词，也不要异想天开地理解js函数，出现一点差错都搞死人。改善方法是：多点copy,使用firefox的firebug也是调试javascript的好方法。

1.getElementsByTagName(tagName)可以使用很多元素对象来调用，我没有全试过，所以不敢打包票，不过基本上就是你想要用到的标签，都可以使用它来获得他的子标签array，不管几层以内。

2.getElementById只能用用document对象来调用，你试一下看看div能否使用这个函数找到他的子标签，答案是否的。页面上的id可以直接用作变量名来引用标签对象。

3.getElementsByName也只能用在document对象，然后不是任意一个标签都有name，注意有些标签没有name的，你异想天开地为任何标签都加个name属性，结果就是这个name并不能用来索引这个标签。

4.form元素里面的input元素可以通过.id或者.name的方式获得其中元素, 即使隔着div和table都可以. 但是div和table是无法这样从form中获得的, form里面的元素也无法从table和div中使用这种方法获得.

注意"s"的区别，唯一性

innerHTML属性可以改变span里面的值, 但是innerText却不行,不知道为什么.

最好的调试方法，alert函数。

以上不敢包正确，但是的确是我自己测试以后得来的，改变了自己以前很多的想法，原来设计者搞得那么卑鄙的，弄死人了。

欢迎补充，有关[]的使用来代替函数查找，我还没有试验。

Qzi 2008-08-27 18:57 发表评论

]]>form submit() 提交问题http://www.blogjava.net/jianyue/archive/2008/08/27/225062.htmlQziQziWed, 27 Aug 2008 07:42:00 GMThttp://www.blogjava.net/jianyue/archive/2008/08/27/225062.htmlhttp://www.blogjava.net/jianyue/comments/225062.htmlhttp://www.blogjava.net/jianyue/archive/2008/08/27/225062.html#Feedback0http://www.blogjava.net/jianyue/comments/commentRss/225062.htmlhttp://www.blogjava.net/jianyue/services/trackbacks/225062.html
自己调用document.form[0].submit()的时候，会出现submit is not a function错误（使用firefox的firebug调试，非常好用），原因是页面的form中出现具有name=submit的元素，这样会影响到javascript调用submit()函数，改掉那个name=submit的元素即可。

另外submit提交struts1.2的action时候，如果后面跟有?method=***等的参数，那么注意，这个函数里面不要出现有method等关键字。
例如函数：
function changeAction(methodArg, wayArg){
with (document.forms[0]) {
action="<html:rewrite page='/BgdInfoReportAction.do'/>?method="+ methodArg + "&way=" + wayArg;
submit();
}
}
使用?method=***是在使用dispatchAction时候的做法原来我的参数名称是method和way，
结果报错：Action[/BgdInfoReportAction] does not contain method named post
原因是？后的method变得没有效，那么这个submit提交使用默认的post方法提交（servlet默认分为post和get方法嘛），
后来我将method改成methodArg和way改成wayArg，这个action就能够正确执行。
我重复测试改与不改的效果，仍然与上面一样。总结原因可能是是javascript的一些关键字冲突，所以尽量使用特殊一点的字符串作为变量名。

Qzi 2008-08-27 15:42 发表评论

]]>