有時我們會希望使用者按下按鈕後開啟一個保持在原視H前方的子視H?
而在IE?我們可以用showModalDialog來達?
語法如下 :
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
例:
window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
但是.在Firefox中卻沒有showModalDialog這東?
而在FireFox中我們只能用window.open實現這樣的功?
window.open的語法如?:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
只是,在Firefox?window.open的參怸,sFeature多了一些功能設?
而在FireFox下要讓開啟的視窗跟IE的showModalDialog一樣的?
只要在sFeatures中加?font color="#ff0000">modal=yes可以了,
例如下:
window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');
提到了子視窗,不得不提的就是子視窗跟母視窗間的交互操作,
因為我想很多人開啟對pH應該都是為了將操作完的i果丟回ȝ母視H?..
如果是用showModalDialog的話,
在子視窗中要存取母視H的函數的話,
要注意兩個地?
1.(母視H中)開啟視窗:
window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');
在第二個參?vArguments),Ҏself.
2.(子視H中)調用母視H的函數:
window.dialogArguments.ShowMsg(obj.value);
ShowMsg為母視窗中的函數.
而用window.open的話,
則是要注意一個地?
1.(子視H中)調用母視H的函數:
window.opener.ShowMsg(obj.value);
使用window.openerL母視H的物g.
如此一?只要再透過navigator.appNamedL覽器為?
可以寫一個IE與FireFox相容的函?..
]]>
<HEAD>
<TITLE>始终在页面固定位|的?lt;/TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240; height:90" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2
document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240; height:90;" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=document.body.scrollTop
document.getElementById("Javascript.Div2").style.left=document.body.scrollLeft;
}
</SCRIPT>
<div id="Javascript.Div3" class="div" style="width: 240; height:90;" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div3").offsetHeight;
document.getElementById("Javascript.Div3").style.left=document.body.scrollLeft;
}
</SCRIPT>
<div id="Javascript.Div4" class="div" style="width: 240; height:90;" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=document.body.scrollTop;
document.getElementById("Javascript.Div4").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div4").offsetWidth;
}
</SCRIPT>
<div id="Javascript.Div5" class="div" style="width: 240; height:90;" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div5").offsetHeight;
document.getElementById("Javascript.Div5").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div5").offsetWidth;;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div>
</BODY>
</HTML>
]]>
document.documentElement.clientHeight
]]>
1
Developer Notes for prototype.js(sergiopereira.com)
2Quick Guide to Prototype(particletree.com)
3Prototype And The This Keyword (particletree.com)
4Overview of the Prototype Javascript Library (ebusiness-apps.com)
5Prototype in script.aculo.us Wiki (wiki.script.aculo.us)
6Easy Ajax with Prototype (24ways.org)
7A Look at Enumerable, Array and Hash (encytemedia.com)
8Working With Events In Prototype (encytemedia.com)
9Prototype Dissected (snook.ca)
10Painless JavaScript Using Prototype (sitepoint.com)
]]>
- JavaScript里一切皆是对象，包括函数?Everything in JavaScript is an Object. Even functions)
我原来以为JavaScript 既然名ؓ (Java)ScriptQ自然也是承Java语言的设计————在Java中，数据cd分ؓ基本数据cd(numberQbooleanQchar{?和对象数据类型————而其实JavaScript所操作的数据类型都是对象，cM于Ruby。怎么理解呢？ 例如Q整型和布尔值在Java代码中是一个基本数据类型，它是没有Ҏ和属性的Q在JavaScript中是怎样呢？ 看如下的代码:
//画蛇添的方法，仅作为example Number.prototype.abs = function() { returnMath.abs(this); } alert((-100).abs()); // 弹出q回?100 Boolean.prototype.reverse = function() { return !this; } alert(true.reverse()); // 弹出q回?false
alex更强调在JavaScript中函C是对象，q是动态脚本语a的重要特?作ؓҎQ在Java中函?Ҏ)只是一U语?。函数成Z个对象，所以函数完全可以看作数?赋给变量、设为对象的属性、甚至作为其他函数的参数。函数是对象带来了巨大的灉|性，也是JavaScript面向对象~程的设计核心之一。当然与之而来的复杂性，也让JavaScript倍受误解?
- 所有对象都是可变的?Every object is always mutable )
- "." 操作W等同于"[]"操作W?The dot operator is equivalent to de-referencing by hash (e.g., foo.bar === foo["bar"]) )
- new 关键字实际上是先创徏一个对象，再让构造器Ҏ在该对象域中执行。The new keyword creates an object that class constructors run inside of, thereby imprinting them
function Dog(name) {
this.name = name;
}
var dog = new Dog("明");我以我的理解模拟 new 操作W的执行步骤Q?
var dog = newObject(); //首先创徏一个新的Object对象 dog.prototype = Dog.prototype; // 讄构造器函数的原型对象ؓ dog 的原型对? Dog.apply(dog, argumens); //新对象传递给构造函敎ͼ此时构造函数可以用this来初始化新对?/pre>
所?javascript q象java/C++的构造器函数那样Q先执行然后q回一个对象。而是先创Z个未定义属性的q净的Object对象Q接着把构造器函数的原型对象设|ؓ新对象的原型对象(构造器函数的原型对象是JavaScript自动为每个函数创建的)。最后再把这个对象交l构造器函数Q在构造器函数中设|该对象其他的属性和Ҏ{等?
通过q样的方式带来的巨大动态特性就是， 可以象操作普通函Ch作构造器函数。__所有自定义的对象甚臛_以用同一个构造器函数__ 。实际上q也是Prototype和Dojo的核心设计思想。通过q样的方式和原型对象的设计，JavaScript实现了与Java完全不同的面向对象设计?
- 所有函数都是闭句?Functions are always closures (combine w/ previous rule to create OOP) )
闭包是一个把函数定义和作用域联合在一L对象...执行函数时用的是在定义它们时就有效的作用域链，而不是在执行它们时才有效的作用域?..实际上所有函数都是闭包实现的?
Zq样的理解：M函数都有作用域，客户端编E中层的全局域函C是有作用域的Q那是window对象Q所以全局函数也就是全局域和函数定义l合的闭包?
Alex说此句是JavaScript面向对象~程的重要规则，我就q不能完全参透了。暂时的理解是如下代码所C：
function Dog(name) {
var name = name;
function getName() {
return name;
}
this.getName = getName;
}
var dog = new Dog("明");
alert(dog.name); // 弹出"undefined"
alert(dog.getName()); // 弹出"明"- this关键字关联于执行时的作用域，而非定义时的作用域?The this keyword is relative to the execution context, not the declaration context )
- 原型对象的属性也是可变的(The prototype property is mutable )
我要感谢q篇短文Q它促我又认真的读了一遍犀牛书的相关章节，同时也有了新的认识和心得。感受正如alex最后所_
If all of that makes sense to you, JavaScript can be a fun, liberating experience. If not, it’s going to be a world of pain and broken expectations as you shed the baggage of less dynamic languages.
]]>
相当于alert();不过l果输出到firebug控制収ͼl于不用一ơ一ơ点LC框了阿Q?br />2.console.log("this one %s and this second %s",a,b);
相当于alert("this one"+a+"and this second"+b);
3.console.info();console.warn();console.error();
分别在输Z息前面加上不同的警示标志
4.debugger;
cM于单步调?br />5.console.time("do this");console.timeEnd("do time");
试没有成功不知道ؓ什么啊
]]>
Breakdown...
Basic Types
var intValue = 1; var floatValue = 3.0; var stringValue = "This is a string\n"; var sqString = 'This is also a string';
Javascript is a dynamically typed language. Variables are declared with the keyword var. Common simple types are supported.
Arrays
var emptyList = []; var homogenousList = [1, 2, 3]; var heterogenousList = ["one", 2, 3.0];
Javascript has built-in collection objects. The Array object is a dynamically typed sequence of Javascript values. They are created with the bracket notation [] or with the new operator on the Array object (e.g. new Array(5)).
Property Maps
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
Along with Arrays are the Object objects. They act as property maps with strings serving as keys to dynamically typed data.
Access
// Dot notation property access
window.alert("Homogenous map property \"one\" "
+ homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
+ homogenousMap["two"]);
Assignment
homogenousMap["one"] = 10; homogenousMap.two = 20;
Removal
delete homogenousMap["one"]; delete homogenousMap.two;
Iteration
for (var key in heterogenousMap) {
window.alert("Heterogenous map property \""
+ key
+ "\" = "
+ heterogenousMap[key]);
}
Functions
var callable = function (message) { // <-- notice assignment
window.alert("Callable called with message = "
+ message);
}
function createClosure(initial) {
var res = function () {
initial = initial + 1;
window.alert("Closure with modified state "
+ initial);
}
return res;
}
function callCallable(f, x) {
f(x);
}
function composeCallables(f, g, x) {
f(g(x));
}
Functions are first-class objects. That means that they can be created dynamically, stored, passed and returned just like any other value.
Objects
function MyObject(name, value) {
this.name = name;
this.value = value;
}
Javascript supports prototype based object orientation. Not a class type but an object constructor is created for new objects with particular properties. In the example above the this keyword used to reference the ''current instance'' of the object. The this object is essentially a property map with members accessed (and initialized) in this example with the dot notation.
The object constructor, MyObject, is an object constructor not in how it's defined, which looks like any other Javascript function, but in how it's ''invoked''.
var my = new MyObject("foo", 5);
The new operator before the function invokes the function with a newly construced object as this and returns that the initialized object.
Object Prototype
Part of what makes a language object oriented is that data not only has properties but also ''behaviors''. Also known as: member functions; methods; and object messages. To implement a member function in Javascript one would be tempted to write something like what's below based on the member initialization exampled above.
function BadObject(data) {
this.data = data
this.memberFunction = function () {
// ...functions on data...
}
}
While the code above will work without error, it does create a new closure for each member function for each new instance of the object. What's really required is a class level function that works on instance data. But remember, Javascript objects aren't class based but prototype based. So how do we implement "class" level member functions? (Skip to Implementation) Better yet, how do we implement "class" level members functions in general?
Enter the prototype member.
The internal object member, prototype, has language defined significance in that it is used for resolving property names if the property isn't found in the current property map. It's considered internal because, while the instance's prototype member is ''inherited'' from the ''constructor's'' prototype member, it cannot be accessed directly from the object instance itself. The defined prototype member is a property map itself which holds members for property name resolution. Consider the example below:
var parentPropertyMap = {"bar": "I'm the bar"};
// Define the constructor with inheritable properties
function ChildObject(foo) {
this.foo = foo;
}
ChildObject.prototype = parentPropertyMap;
childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");
// Prints "childPropertyMap1.foo = I'm the foo1"
window.alert("childPropertyMap1.foo = " + childPropertyMap1.foo);
// Prints "childPropertyMap2.foo = I'm the foo2"
window.alert("childPropertyMap2.foo = " + childPropertyMap2.foo);
// Prints "childPropertyMap1.bar = I'm the bar"
window.alert("childPropertyMap1.bar = " + childPropertyMap1.bar);
// Prints "childPropertyMap2.bar = I'm the bar"
window.alert("childPropertyMap2.bar = " + childPropertyMap2.bar);
The member foo is an instance member added to the instance's property map during construction:
function ChildObject(foo) {
this.foo = foo;
}
while bar is in the constructor's prototype:
var parentPropertyMap = {"bar": "I'm the bar"};
...
ChildObject.prototype = parentPropertyMap;
which is ''inherited'' during the new operation:
childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");
In other words, the member, bar, is shared across all instances of ChildObject.
Therefore, by implementing the prototype member of the constructor function, we can think of the constructor function itself as the "class" object. Complete with static class functions:
function ClassObject() {}
ClassObject.staticClassFunction = function(x) {
return x * 2;
}
static class variables:
function ClassObject() {}
ClassObject.staticClassVariable = 5;
shared member variables:
function ClassObject() {}
ClassObject.prototype.sharedMember = 5;
and of course, shared member functions:
function ClassObject(x) {
this.x = x;
}
ClassObject.prototype.memberFunction = function(x) {
return x * this.x;
}
Member Function Implementation
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
Example Code
//////////////////////////////////////
// Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
///////////////////////////////////////
// Array
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];
///////////////////////////////////////
// Property Map
//
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};
///////////////////////////////////////
// Functions as values
//
var callable = function (message) { // <-- notice assignment
window.alert("Callable called with message = "
+ message);
}
function createClosure(initial) {
var res = function () {
initial = initial + 1;
window.alert("Closure with modified state "
+ initial);
}
return res;
}
///////////////////////////////////////
// Functions as arguments
//
function callCallable(f, x) {
f(x);
}
function composeCallables(f, g, x) {
f(g(x));
}
///////////////////////////////////////
// Objects
//
function MyObject(name, value) {
this.name = name;
this.value = value;
}
///////////////////////////////////////
// Objects with Member Functions
//
function Message(message) {
this.message = message;
}
Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}
///////////////////////////////////////
// Demo Utilities
//
function quote(message) {
return "\"" + message + "\"";
}
///////////////////////////////////////
// HTML Invoked demonstration
//
//
function main() {
window.alert("Integer = " + intValue);
window.alert("Float = " + floatValue);
window.alert("String = " + stringValue);
for (var item in emptyList) {
window.alert("Empty list item = " + item);
}
// Script style index iteration
for (var i in homogenousList) {
window.alert("Homogenous list item = "
+ homogenousList[i]);
}
// C style index iteration
for (var i=0; i < heterogenousList.length; ++i) {
window.alert("Heterogenous list item = "
+ heterogenousList[i]);
}
// Dot notation property access
window.alert("Homogenous map property \"one\" "
+ homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
+ homogenousMap["two"]);
for (var key in heterogenousMap) {
window.alert("Heterogenous map property \""
+ key
+ "\" = "
+ heterogenousMap[key]);
}
callable("(Function value invoked)");
closure();
closure();
callCallable(closure);
composeCallables(callable, quote, "My Message");
var my = new MyObject("foo", 5);
window.alert("MyObject my.name = " + my.name);
window.alert("MyObject my[\"value\"] = " + my["value"]);
var msg = new Message("bar");
for (var key in Message.prototype) {
window.alert("Message prototype member \""
+ key
+ "\" = "
+ Message.prototype[key]);
}
window.alert("Message msg.message = " + msg.message);
msg.show();
}
]]>
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i=0;i<50;i++)
{
var z = y.appendChild(document.createElement('tr'));
for (var j=0;j<50;j++)
{
var a = z.appendChild(document.createElement('td'));
a.appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
w3cdom2Q只在第一ơ的时候创建，以后再需要就clone
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
var tr = document.createElement('tr');
var td = document.createElement('td');
var ast = document.createTextNode('*');
for (var i=0;i<50;i++)
{
var z = y.appendChild(tr.cloneNode(true));
for (var j=0;j<50;j++)
{
var a = z.appendChild(td.cloneNode(true));
a.appendChild(ast.cloneNode(true));
}
}
document.getElementById('writeroot').appendChild(x);
tableMethods: 使用W3C DOM的表格方?br />
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i=0;i<50;i++)
{
var z = y.insertRow(0);
for (var j=0;j<50;j++)
{
var a = z.insertCell(0).appendChild(document.createTextNode('*'));
}
}
document.getElementById('writeroot').appendChild(x);
innerHTML1: 把一串字W串q接h
var string = '<table><tbody>';
for (var i=0;i<50;i++)
{
string += '<tr>';
for (var j=0;j<50;j++)
{
string += '<td>*</td>';
}
string += '</tr>';
}
string += '</tbody></table>';
document.getElementById('writeroot').innerHTML = string;
innerHTML2: 把字W串push到数l里Q再把数l串成一个字W串
var string = new Array();
string.push('<table><tbody>');
for (var i=0;i<50;i++)
{
string.push('<tr>');
for (var j=0;j<50;j++)
{
string.push('<td>*</td>');
}
string.push('</tr>');
}
string.push('</tbody></table>');
var writestring = string.join('');
document.getElementById('writeroot').innerHTML = writestring;
从原文网站上的数据来看，最后一U方法是最快的Q前两种w3c的东东在IE/Win里不是一般的慢的。不q最快的Ҏ在IE5/Win和IE5.x/Mac里不支持Q需要一?a target="_blank">quirksmode.js来让它间接的支持?br />看了原文Q除了了解这些方法的速度外，q了解了q几U不同的ҎQ算是一点点收获吧?br />
PSQinnerHTML不是标准Q不q好像目前的览器都支持的说?img src ="http://www.aygfsteel.com/kangpangpang/aggbug/57291.html" width = "1" height = "1" />
]]>