JavaScript « Cross Zheng

Archive for the ‘JavaScript’ Category

Javascipt onload confclits

In JavaScript, css, joomla on March 24, 2009 at 10:54 am

Normally there are two ways to run javascipt when html page is loaded:

window.onload=INLINE_FUNCTION_NAME, is normally used to make specific javascript runnable when the html document is loaded.
general javascript function, like “function FUNCTION_NAME() {… }; FUNCTION_NAME();”

The problem of method 1) is that one page only can have one onload function. there are always conflicts in Joomla or drupal which use a lot of javascript for functions.

The problem of method 2) is that when the function started, maybe the html document is not fully loaded.

FIX
===============================
To solve this, ‘domready’ from mootools helps a lot and improves the loading speed very much. See domready vs load.
Insert mootool.js (optional for Joomla, But required for local html test)
—————————————————<script type="text/javascript" src="mootools.js"> </script>
—————————————————
You should go to mootools.net to download the latest mootools.js.

▶ Comment

javascript: enter to execute

In JavaScript, howto on January 13, 2009 at 11:46 am

<html>


<head>
<script type="text/javascript">
    function getrefno(reno, helperMsg){
        if(reno.value.length == 0){
            alert(helperMsg);
            elem.focus();
            return false;
        }else{
            window.location = "http://www.gigibride.co.uk/gallery/category/image-galleries/"+reno.value;
            return true;
        }
    }
function entertoget(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);
    if(code==13){
        var refn=document.getElementById('ref');
        var address = refn.value;
    alert(address);
    }
}
</script>
</head>
<body>
<form>
Reference: <input type='text' id='ref' onkeypress="javascript:entertoget(event);" value='gigigallery' />
<input type='button' onclick="javascript:getrefno(document.getElementById('ref'), 'Please Enter Your Ref No.');" value='Get My Photos' />
</form>
</body>

</html>

▶ Comment

legally hide the blogger navbar

In Blogged, JavaScript on April 3, 2008 at 8:27 pm

Here is a creative way to hide the blogger nav bar without actually removing it. This will allow you to operate your blog within the confines of blogger’s terms of service. It is a simple javascript snippet, and can be implemented with only two or three lines of codes.

1 – Add this code to your BODY tag:

2 – Add this code in ABOVE your upper most visible element tag. This is usually the blog title tag.

This will force an automatic scroll down the page JUST far enough to push the navbar out of visibility. There is an example of how i’ve implemented this:

I have a
<a class=”definition” href=”http://billiardsforum.blogspot.com/”>billiard blog</a> which is the site you are now on. Allow the page to load fully, then you will see it “jump” just enough to hide the nav bar.

Hope you all find this tip to legally hide the blogger navbar useful
From: http://billiardsforum.blogspot.com/2006/08/legally-hide-blogger-nav-bar-without.html

▶ Comment

legally hide the blogger navbar

In Blogged, JavaScript on April 3, 2008 at 8:27 pm

1 – Add this code to your BODY tag:

2 – Add this code in ABOVE your upper most visible element tag. This is usually the blog title tag.

This will force an automatic scroll down the page JUST far enough to push the navbar out of visibility. There is an example of how i’ve implemented this:

Hope you all find this tip to legally hide the blogger navbar useful
From: http://billiardsforum.blogspot.com/2006/08/legally-hide-blogger-nav-bar-without.html

▶ Comment

A simple ajax example

In JavaScript, howto on March 10, 2008 at 5:22 pm

A simple ajax example


<html><body>
<script language="javascript" type="text/javascript">
var inputs = 0;
function addContact(){
var table = document.getElementById('contacts');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
///////////////
var link = document.createElement('a');
var U = document.createElement('u');
var text = document.createTextNode('del');
link.onclick = function(){
removeContact(tr);
//inputs--;
}
U.appendChild(text);
link.appendChild(U);
td1.appendChild(link);
///////////////
inp1.setAttribute("Name", "Name" +inputs);
inp2.setAttribute("Name", "Email"+inputs);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.appendChild(inp1);
td3.appendChild(inp2);
inputs++;
}
function removeContact(tr){
tr.parentNode.removeChild(tr);
}
</script>
<table>
<tbody id="contacts">
    <tr>
        <a href="javascript:addContact();">Add a Contact</a>
    </tr>
    <tr>
        <td></td>
        <td>Name</td>
        <td>Email</td>
        </tr>
</tbody>
</table>
<script type="text/javascript">
    addContact();
</script>
</body></html>

▶ Comment

retrive XML in ajax way: xmlhttprequest

In JavaScript, howto on March 7, 2008 at 12:49 pm

Following codes is the minimum 4 steps for XMLHttpRequest.


<script language="javascript">
////////////////// initial xmlhttprequest ///////////////////////////
// 1. new XMLHttpRequest()
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
alert('Old Microsoft.XMLHTTP activexobject before IE 5.5');
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
////////////////// configure and get xmlhttprequest ///////////////////////////
try{// this try/catch is only for firefox: if you installed firebug,disable it.
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
//netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch (e){}
// 2. request.open()
try{
//req.open("GET", "http://crosszheng.spaces.live.com/feed.rss", true);
req.open("GET", "feed.rss", true);
//alert('get successfully');
}
catch(e){
alert(e.toString());
}
// 3. define request.onreadystatechange function, which is a event handler.
req.onreadystatechange = function() {
try
{
if((req.readyState == 4) && (req.status == 200))
{
try{
xmlobject = (new DOMParser()).parseFromString(req.responseText, "text/xml");
}catch(e){
xmlobject=new ActiveXObject("Microsoft.XMLDOM");
xmlobject.async="false";
xmlobject.loadXML(req.responseText);
}
// get a reference to the root-element "rss"
var root = xmlobject.getElementsByTagName('rss')[0];
// get reference to "channel" element
var channels = root.getElementsByTagName("channel");
// now get all "item" tags in the channel
var items = channels[0].getElementsByTagName("item");
// in the "item" we have a description, so get that
var descriptions = items[0].getElementsByTagName("description");
var desc = descriptions[0].firstChild.nodeValue;
document.write(desc);
document.close();
}
}
catch(e){
alert(e.toString());
}
}
// 4. request.send(null)
req.send(null);
</script>
more details on:http://developer.apple.com/internet/webcontent/xmlhttpreq.html

▶ Comment

document.write flush your page or can not append new contents

In JavaScript, howto on March 6, 2008 at 4:20 pm

Html actually is multithread.

Let’s talk about onclick and setTimeout in html code and javascript.

The function invoked by onclick of form button and setTimeout of javascript all start a new thread to do jobs. If you run command “document.write(SOMETHING)” in the function invoked by above two ways, the SOMETHING will flush your current page, then use SOMETHING to rewrite the page. Namely, this “document” are not the original “document”.

More details are on:
http://www.howtocreate.co.uk/tutorials/javascript/writing

▶ Comment

javascript’s OO and function as object as well

In JavaScript, howto on March 5, 2008 at 7:51 pm

Functions stored in variables

Just
to make sure you’re completely clear on how all this works, make sure you fully
understand the difference between these two pieces of code:

function MyFunc() {

    alert('hi');

and, by comparison, this:

MyFunc2 = function() {

    alert('there');

The first of these creates a function called MyFunc. The second of these
creates a function, but doesn’t give it a name, and then stores the function in
the MyFunc2 variable. From there, you can call either using MyFunc() and
MyFunc2().

Next, think about how a function is, in fact, an object. Consider this code,
which uses the preceding MyFunc2 variable:

MyFunc3 = MyFunc2;

MyFunc3.somemember = 10;

alert(MyFunc3.somemember);

This first line of this code copies the value of MyFunc2 to MyFunc3. Since
the value of MyFunc2 is the unnamed function, the value of MyFunc3 is this same
function. The second line adds a new member to the function called somemember,
and sets its value to 10. Although I’m using the MyFunc3 variable to do this,
the two variables refer to the same function object. Thus, in the third line,
when I do an alert on the MyFunc3 value’s somemember, I’ll see the 10 that I
assigned. Thus, these two variables refer to the same single function object.
Changing one changes the “other”, since they’re both, in fact, the
same object.

Now let’s continue our discussion. Note: To create the examples for this
article, I used FireFox and the FireBug tool, simply because it’s easy to
quickly try out JavaScript code.

JavaScript and Prototypes

To fully understand the object
system, however, it’s important to understand the whole architecture behind it.
JavaScript uses an approach called a prototype architecture.

First, remember that JavaScript is
run line-by-line. Prior to the declaration of the Counter1 function above, the
function does not exist. Also remember that nearly everything in JavaScript is
an object. Thus, Counter1 is itself an object.

But what type are the objects stored
in my obj1 and obj2 variables? Their type is object and nothing more.
These objects are not instances of Counter1, although in our own minds
it’s okay to think of them as such. Counter1 is not a class; rather, it’s
simply a function that, when used in conjunction with the new keyword, creates
a new object.

If you want to give the members to
the objects created by the Counter1 function, you can do so inside the Counter1
function, as I did with this line:

this.value
= 0;

However, there’s another way to do
this. Objects in JavaScript can optionally include a member called prototype.
This member is itself an object, and as its name implies, it provides a
prototype for objects created based on the object.

That’s a mouthful, so let’s look at
an example. Consider the Counter1 function. When you created this function (via
the function keyword), you created a function object, which automatically came
with a member object called prototype. If you’re trying out the code in
FireBug, you can inspect this member. Try an alert:

alert(Counter1.prototype)

This will open an alert box
displaying the words [object Object], which simply means it’s an object.
Initially, this object doesn’t contain anything. But if you add members to this
object, the objects you create by calling new Counter1 will get copies of
these members.

Let’s try another example with the
help of a new function called Counter2. Here’s the code:

function
Counter2() {

}

Not much there… yet. Follow with
this code:

Counter2.prototype.value
= 0;

Counter2.prototype.increment
= function() {

this.value++;

}

This adds two members to the
Counter2 function’s prototype object, one called value and one called increment.
When you create a new object using the new keyword and calling this Counter2
function, your new object will automatically inherit copies of the members of
this prototype. Try it out:

c1
= new Counter2();

c1.increment();

alert(c1.value);

When the alert box opens, you’ll see
the value 2; thus, c1 has the value and increment members. In FireBug, you can
inspect the object using FireFox’s built in dir function:

>>>
dir(c1)

value 2

increment function()

But now try inspecting the Counter2
function’s prototype object:

>>>dir(Counter2.prototype)

value 0

increment function()

Prototypes are an important part of
JavaScript as they provide a handy means by which objects can be given members.
Remember, however, the prototype member is just an object itself, a member of
the Counter2 object.

▶ Comment

javascript’s OO and function as object as well

In JavaScript, howto on March 5, 2008 at 7:51 pm

Functions stored in variables

Just
to make sure you’re completely clear on how all this works, make sure you fully
understand the difference between these two pieces of code:

function MyFunc() {

    alert('hi');

and, by comparison, this:

MyFunc2 = function() {

    alert('there');

Next, think about how a function is, in fact, an object. Consider this code,
which uses the preceding MyFunc2 variable:

MyFunc3 = MyFunc2;

MyFunc3.somemember = 10;

alert(MyFunc3.somemember);

Now let’s continue our discussion. Note: To create the examples for this
article, I used FireFox and the FireBug tool, simply because it’s easy to
quickly try out JavaScript code.

JavaScript and Prototypes

To fully understand the object
system, however, it’s important to understand the whole architecture behind it.
JavaScript uses an approach called a prototype architecture.

If you want to give the members to
the objects created by the Counter1 function, you can do so inside the Counter1
function, as I did with this line:

this.value
= 0;

alert(Counter1.prototype)

Let’s try another example with the
help of a new function called Counter2. Here’s the code:

function
Counter2() {

}

Not much there… yet. Follow with
this code:

Counter2.prototype.value
= 0;

Counter2.prototype.increment
= function() {

this.value++;

}

c1
= new Counter2();

c1.increment();

alert(c1.value);

When the alert box opens, you’ll see
the value 2; thus, c1 has the value and increment members. In FireBug, you can
inspect the object using FireFox’s built in dir function:

>>>
dir(c1)

value 2

increment function()

But now try inspecting the Counter2
function’s prototype object:

>>>dir(Counter2.prototype)

value 0

increment function()

▶ Comment

javascript’s OO and function as object as well

In JavaScript, howto on March 5, 2008 at 7:51 pm

Functions stored in variables

Just
to make sure you’re completely clear on how all this works, make sure you fully
understand the difference between these two pieces of code:

function MyFunc() {

    alert('hi');

and, by comparison, this:

MyFunc2 = function() {

    alert('there');

Next, think about how a function is, in fact, an object. Consider this code,
which uses the preceding MyFunc2 variable:

MyFunc3 = MyFunc2;

MyFunc3.somemember = 10;

alert(MyFunc3.somemember);

Now let’s continue our discussion. Note: To create the examples for this
article, I used FireFox and the FireBug tool, simply because it’s easy to
quickly try out JavaScript code.

JavaScript and Prototypes

To fully understand the object
system, however, it’s important to understand the whole architecture behind it.
JavaScript uses an approach called a prototype architecture.

If you want to give the members to
the objects created by the Counter1 function, you can do so inside the Counter1
function, as I did with this line:

this.value
= 0;

alert(Counter1.prototype)

Let’s try another example with the
help of a new function called Counter2. Here’s the code:

function
Counter2() {

}

Not much there… yet. Follow with
this code:

Counter2.prototype.value
= 0;

Counter2.prototype.increment
= function() {

this.value++;

}

c1
= new Counter2();

c1.increment();

alert(c1.value);

When the alert box opens, you’ll see
the value 2; thus, c1 has the value and increment members. In FireBug, you can
inspect the object using FireFox’s built in dir function:

>>>
dir(c1)

value 2

increment function()

But now try inspecting the Counter2
function’s prototype object:

>>>dir(Counter2.prototype)

value 0

increment function()

▶ Comment

Browsers comparison: read external file/data

In JavaScript on March 5, 2008 at 3:47 pm

Using following js code. In the html codes, one of script uses src= following js file, the other script calls the function defined in js file:

////////////////////////////////////////////////////////////////////////
function ieparse(){
try //Internet Explorer
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument(“”,”",null);
}
catch(e) {alert(e.message)}
}
try
{
try{// with this config, firefox can retrive remote xml file.
netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);
}catch(e){}
xmlDoc.async=false;
var address = “http://crossonline.spaces.live.com/feed.rss”;
alert(address);
xmlDoc.load(address);
//xmlDoc.load(“1.rss”);
}
catch(e) {alert(e.toString())}

try{
var xmlobject = xmlDoc;
// get a reference to the root-element “rss”
var root = xmlobject.getElementsByTagName(‘rss’)[0];
// get reference to “channel” element
var channels = root.getElementsByTagName(“channel”);
// now get all “item” tags in the channel
var items = channels[0].getElementsByTagName(“item”);
// in the “item” we have a description, so get that
var descriptions = items[0].getElementsByTagName(“description”);
// we also get the “pubDate” element in the “item”
var links = items[0].getElementsByTagName(“link”);

// get the actual description as string
var desc = descriptions[0].firstChild.nodeValue;
// same for the pubDate
var l = links[0].firstChild.nodeValue;

// now we have the RSS data we want as strings – do something now
document.write(desc);
alert(l);

document.write(“xmlDoc is loaded, ready for use”);
}
catch(e) {alert(“wrong when processing the xmlstring”)}
}
////////////////////////////////////////////////////////////////////

COmparison:

IE 7:

local file and remote file;

Firefox:

local file-work; remote file NOT,saying:
[JavaScript Application]

Permission denied to call method XMLDocument.load

Opera:

local file-work; remote file NOT,saying: “
<localhost>

[Error:
name: Error
message: Security violation
]“.

Safari:

Both NOT, saying:
Java Script

TypeError: Value undefined (result of expression xmlDoc.load) is not object.

Conclusion:
1. Security and convenience can not exist together.
2. new ActiveXObject(“Microsoft.XMLDOM”) is a little bit out of date, while XMLHttpRequest (for universal browser) and Msxml2.XMLHTTP (for IE) is much better, with XMLHttpRequest firefox and safari works, Opera seems not so universal. My another post is about XMLHttpRequest to solve such a calling remote XML file.

▶ Comment

Browsers comparison: read external file/data

In JavaScript on March 5, 2008 at 3:47 pm

Using following js code. In the html codes, one of script uses src= following js file, the other script calls the function defined in js file:

// get the actual description as string
var desc = descriptions[0].firstChild.nodeValue;
// same for the pubDate
var l = links[0].firstChild.nodeValue;

// now we have the RSS data we want as strings – do something now
document.write(desc);
alert(l);

document.write(“xmlDoc is loaded, ready for use”);
}
catch(e) {alert(“wrong when processing the xmlstring”)}
}
////////////////////////////////////////////////////////////////////

COmparison:

IE 7:

local file and remote file;

Firefox:

local file-work; remote file NOT,saying:
[JavaScript Application]

Permission denied to call method XMLDocument.load

Opera:

local file-work; remote file NOT,saying: “
<localhost>

[Error:
name: Error
message: Security violation
]“.

Safari:

Both NOT, saying:
Java Script

TypeError: Value undefined (result of expression xmlDoc.load) is not object.

▶ Comment

first glance at PHP vs JavaScript

In JavaScript on March 5, 2008 at 1:42 pm

So far, I did some javascript programming, and found out something javascript really can not do.

javascript is a technique for web”page”. So all it can control are only ‘window’ and ‘document’. So its output normally are only ‘alert’ and ‘document.write()’. In this case, no way to redirect any inforamtion to anywhere else.
PHP is a kind of programming language, quite unix like. It can work in the way of command line, this means, it can redirect its variables to another variable or stream to anywhere else. It use ‘echo’ to output and as a return for command line programming, this is how so many websites using php pluse some parametres as src of javascript. Because PHP can redirect formatted .js contents to the “src=”, in this way, a dynamic .js can be created. While javascript can not do that, because all javascript output goes to ‘document’, as a html formatted contents can not be used as .js file.

▶ Comment

first glance at PHP vs JavaScript

In JavaScript on March 5, 2008 at 1:42 pm

So far, I did some javascript programming, and found out something javascript really can not do.

javascript is a technique for web”page”. So all it can control are only ‘window’ and ‘document’. So its output normally are only ‘alert’ and ‘document.write()’. In this case, no way to redirect any inforamtion to anywhere else.
PHP is a kind of programming language, quite unix like. It can work in the way of command line, this means, it can redirect its variables to another variable or stream to anywhere else. It use ‘echo’ to output and as a return for command line programming, this is how so many websites using php pluse some parametres as src of javascript. Because PHP can redirect formatted .js contents to the “src=”, in this way, a dynamic .js can be created. While javascript can not do that, because all javascript output goes to ‘document’, as a html formatted contents can not be used as .js file.

▶ Comment

java applet <> javascript

In JavaScript, howto, java on March 5, 2008 at 12:39 pm

1. javascript call java applet: http://www.rgagnon.com/javadetails/java-0170.html

* make the variable you want to call public in the applet.
* in javascript just: document.myapplet.myfunction(some parametres);

2.1 java applet call variable or function defined in javascript:

* You can try an easy method, by calling a specially crafted URL using the showDocument() method, like this :
getAppletContext().showDocument(new URL(“javascript:alert(Hello World);));
This doesn’t work anymore using Internet Explorer as of a certain IE update from Microsoft dated some time ago this year, so it is easily broken.

* You can use the LiveConnect objects that are implemented in IE on Windows, Mozilla/Firefox on anything, Safari on Mac, etc.. it works almost everywhere.
For this you have to declare that your applet MAYSCRIPT, by adding a special parameter in the OBJECT/EMBED tag in your web page. (google for it if you need examples).
Then you have to add the “jaws.jar” (or “plugin.jar” if there’s no jaws.jar) from the lib of the JRE to compile your Applet.
This jar should include the LiveConnext classes, and netscape.javascript.JSObject is the one you need.
Then You can then do something like this to achieve the same as solution one above :
JSObject browserWindow = JSObject.getWindow(this); //here ‘this’ is the JApplet
browserWindow.eval(buffer.toString());
Or you can navigate the DOM javascript tree of the WebPage using the methods of JSObject. (google for it if you need more info).

2.2 java applet call variable defined in html:
Just use the parametre of applet, for example:

▶ Comment

java applet <> javascript

In JavaScript, howto, java on March 5, 2008 at 12:39 pm

1. javascript call java applet: http://www.rgagnon.com/javadetails/java-0170.html

* make the variable you want to call public in the applet.
* in javascript just: document.myapplet.myfunction(some parametres);

2.1 java applet call variable or function defined in javascript:

2.2 java applet call variable defined in html:
Just use the parametre of applet, for example:

▶ Comment

open file dialog by click

In JavaScript, howto on March 3, 2008 at 9:14 pm

▶ Comment

open file dialog by click

In JavaScript, howto on March 3, 2008 at 9:14 pm

▶ Comment

Javascript fundemental

In JavaScript on February 28, 2008 at 9:45 am

JavaScript就这么回事1：基础知识

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 创建数组

1: <script language=”JavaScript”>
2: <!–
3: var myArray = new Array(5);
4: myArray[0] = “First Entry”;
5: myArray[1] = “Second Entry”;
6: myArray[2] = “Third Entry”;
7: myArray[3] = “Fourth Entry”;
8: myArray[4] = “Fifth Entry”;
9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // –>
11: </script>

13 数组排序

1: <script language=”JavaScript”>
2: <!–
3: var myArray = new Array(5);
4: myArray[0] = “z”;
5: myArray[1] = “c”;
6: myArray[2] = “d”;
7: myArray[3] = “a”;
8: myArray[4] = “q”;
9: document.write(myArray.sort());
10: // –>
11: </script>

14 分割字符串

1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “a,b,c,d”;
4: var stringArray = myVariable.split(“,”);
5: document.write(stringArray[0]);
6: document.write(stringArray[1]);
7: document.write(stringArray[2]);
8: document.write(stringArray[3]);
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 指定次数循环

1: <script>
2: <!–
3: var myArray = new Array(3);
4: myArray[0] = “Item 0”;
5: myArray[1] = “Item 1”;
6: myArray[2] = “Item 2”;
7: for (i = 0; i < myArray.length; i++) {
8: document.write(myArray[i] + “<br>”);
9: }
10: // –>
11: </script>

22 设定将来执行

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: }
6: window.setTimeout(“hello()”,5000);
7: // –>
8: </script>

23 定时执行函数

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: window.setTimeout(“hello()”,5000);
6: }
7: window.setTimeout(“hello()”,5000);
8: // –>
9: </script>

24 取消定时执行

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: }
6: var myTimeout = window.setTimeout(“hello()”,5000);
7: window.clearTimeout(myTimeout);
8: // –>
9: </script>

25 在页面卸载时候执行函数

1: <body onUnload=”functionName();”>
2: Body of the page
3: </body>

JavaScript就这么回事2：浏览器输出

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 指定日期的时区

1: <script language=”JavaScript”>
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: 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参数

1: <script language=”JavaScript”>
2: var urlParts = document.URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < parameterParts.length; i++) {
5: var pairParts = parameterParts[i].split(“=”);
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
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：图像

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 随机显示图像

1: <script language=”JavaScript”>
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: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script>

40 函数实现的图像替换

1: <script language=”JavaScript”>
2: var source = 0;
3: var replacement = 1;
4: function createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray = new Image;
7: imageArray.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.src;”>
16: <img src=”/”image1.jpg”” width=100 name=”myImage1” border=0>
17: </a>

41 创建幻灯片

1: <script language=”JavaScript”>
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: function slideShow(imageNumber) {
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src=”/”image1.jpg”” width=100 name=”slideShow”>

42 随机广告图片

1: <script language=”JavaScript”>
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://some.host/”;
9: urlList[1] = “http://another.host/”;
10: urlList[2] = “http://somewhere.else/”;
11: urlList[3] = “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：表单

还是先继续写完JS就这么回事系列吧～
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

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: <option value=”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href=’#’ onClick=’alert(document.myForm.mySelect.value);’>Check Selection List</a>

48 动态增加Select项

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: </select>
6: </form>
7: <script language=”JavaScript”>
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].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项

1: function checkList(selection) {
2: if (selection.length == 0) {
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 使用图像按钮

53 表单数据的加密

1: <SCRIPT LANGUAGE=’JavaScript’>
2: <!–
3: function encrypt(item) {
4: var newItem = ”;
5: for (i=0; i < item.length; i++) {
6: newItem += item.charCodeAt(i) + ‘.’;
7: }
8: return newItem;
9: }
10: function encryptForm(myForm) {
11: for (i=0; 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>

JavaScript就这么回事5：窗口和框架

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 设置页面的滚动位置

1: <script language=”JavaScript”>
2: if (document.all) { //如果是IE浏览器则使用scrollTop属性
3: document.body.scrollTop = 200;
4: } else { //如果是NetScape浏览器则使用pageYOffset属性
5: window.pageYOffset = 200;
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 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1: <frameset cols=”0,50%,*”>
2: <frame name=”codeFrame” src=”/”140code.html””>
3: <frame name=”frame1” src=”/”140a.html””>
4: <frame name=”frame2” src=”/”140b.html””>
5: </frameset>

▶ Comment

Javascript fundemental

In JavaScript on February 28, 2008 at 9:45 am

JavaScript就这么回事1：基础知识

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 格式化字串

12 创建数组

13 数组排序

14 分割字符串

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 指定次数循环

22 设定将来执行

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: }
6: window.setTimeout(“hello()”,5000);
7: // –>
8: </script>

23 定时执行函数

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: window.setTimeout(“hello()”,5000);
6: }
7: window.setTimeout(“hello()”,5000);
8: // –>
9: </script>

24 取消定时执行

1: <script>
2: <!–
3: function hello() {
4: window.alert(“Hello”);
5: }
6: var myTimeout = window.setTimeout(“hello()”,5000);
7: window.clearTimeout(myTimeout);
8: // –>
9: </script>

25 在页面卸载时候执行函数

1: <body onUnload=”functionName();”>
2: Body of the page
3: </body>

JavaScript就这么回事2：浏览器输出

26 访问document对象

1: <script language=”JavaScript”>
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script>

27 动态输出HTML

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 指定日期的时区

31 设置日期输出格式

32 读取URL参数

你还以为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 添加网页加载进度窗口

JavaScript就这么回事3：图像

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 简单的图像替换

39 随机显示图像

1: <script language=”JavaScript”>
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: document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script>

40 函数实现的图像替换

1: <script language=”JavaScript”>
2: var source = 0;
3: var replacement = 1;
4: function createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray

[/source] = new Image;<br />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 创建幻灯片

42 随机广告图片

1: <script language=”JavaScript”>
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://some.host/”;
9: urlList[1] = “http://another.host/”;
10: urlList[2] = “http://somewhere.else/”;
11: urlList[3] = “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：表单

还是先继续写完JS就这么回事系列吧～
43 表单构成

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 动态复制文本框内容

46 侦测文本框的变化

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3: </form>

47 访问选中的Select

48 动态增加Select项

49 验证表单字段

50 验证Select项

1: function checkList(selection) {
2: if (selection.length == 0) {
3: window.alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }

51 动态改变表单的action

52 使用图像按钮

53 表单数据的加密

JavaScript就这么回事5：窗口和框架

54 改变浏览器状态栏文字提示

1: <script language=”JavaScript”>
2: window.status = “A new status message”;
3: </script>

55 弹出确认提示框

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 设置页面的滚动位置

64 在IE中打开全屏窗口

1: <a href=’#’ onClick=”window.open(‘http://www.juxta.com/’,'newWindow’,'fullScreen=yes’);”>Open a full-screen window</a>

65 新窗口和父窗口的操作

66 往新窗口中写内容

67 加载页面到框架页面

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>

crossz

Cross Zheng

Archive for the ‘JavaScript’ Category

Javascipt onload confclits

javascript: enter to execute

legally hide the blogger navbar

legally hide the blogger navbar

A simple ajax example

retrive XML in ajax way: xmlhttprequest

document.write flush your page or can not append new contents

javascript’s OO and function as object as well

javascript’s OO and function as object as well

javascript’s OO and function as object as well

Browsers comparison: read external file/data

Browsers comparison: read external file/data

first glance at PHP vs JavaScript

first glance at PHP vs JavaScript

java applet <> javascript

java applet <> javascript

open file dialog by click

open file dialog by click

Javascript fundemental

Javascript fundemental

Welcome to Firebug 1.0

Maintainable JavaScript

Maintainable JavaScript

JavaScript Video Tutorial III 3

JavaScript Video Tutorial III 2

JavaScript Video Tutorial III 1

UntitledJavaScript Video Tutorial II 3

JavaScript Video Tutorial II 2

JavaScript Video Tutorial II 1

JavaScript Video Tutorial 4

JavaScript Video Tutorial 3

JavaScript Video Tutorial 2

JavaScript Video Tutorial 1

Archives

Twitter HEN BAO LI

Top Clicks

Delicious

January 2010
M	T	W	T	F	S	S
« Dec
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Archive for the ‘JavaScript’ Category

Category Cloud

Archives

Top Clicks