);
//loading without E4x
http://w3schools.com/e4x/tryit.asp?filename=trye4x_order
VBScript is a Microsoft scripting language.
VBScript is the default scripting language in ASP.
Client-side VBScript only works in Internet Explorer !!!
DHTML is NOT a language.
DHTML is a TERM describing the art of making dynamic and interactive web pages.
DHTML combines HTML, JavaScript, the HTML DOM, and CSS.
document.write(Date());//display current time
document.getElementById(id).innerHTML=new HTML
document.getElementById(id).attribute=new value
document.getElementById(id).style.property=new style
http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_scrolltext //scrolling text
http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_move //draggable image
http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_img_shake //shaking image
http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_earthquake
http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu4 //menu always on top left
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The entire document is a document node
Every HTML element is an element node
The text in the HTML elements are text nodes
Every HTML attribute is an attribute node
Comments are comment nodes
DOM Tutorial, the element node , holds a text node with the value "DOM Tutorial".
"DOM Tutorial" is not the value of the element!
//DOM property
x.innerHTML - the text value of x
x.nodeName - the name of x
x.nodeValue - the value of x
x.nodeType
x.parentNode - the parent node of x
x.childNodes - the child nodes of x
x.firstChild
x.lastChild
x.attributes - the attributes nodes of x
//DOM method
x.getElementById(id) - get the element with a specified id (doesn't work in XML.)
x.getElementsByTagName(name) - get all elements with a specified tag name
x.appendChild(node) - insert a child node to x
x.removeChild(node) - remove a child node from x
//Root properties
document.documentElement - returns the root node of the document
document.body - gives direct access to the tag
document.cookie
document.domain
document.lastModified
document.referrer
document.URL
document.title
nodeName always contains the uppercase tag name of an HTML element.
nodeName is read-only
nodeName of an element node is the same as the tag name
nodeName of an attribute node is the attribute name
nodeName of a text node is always #text
nodeName of the document node is always #document
nodeValue for element nodes is undefined
nodeValue for text nodes is the text itself
nodeValue for attribute nodes is the attribute value
Element type NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9
document.body.bgColor="lavender";
document.body.style.backgroundColor="lavender";
The onload event is often used to check the visitor's browser type and version, and load the proper version of the web page based on that information.
Note that writeln() add a new line after each statement
//replace document
function createDoc()
{
var doc=document.open("text/html","replace");
var txt="Learning about the HTML DOM is fun!";
doc.write(txt);
doc.close();
}
//open new window
var w=window.open();
w.document.open();
w.document.write("Hello World!
");
w.document.close();
//get form id
document.getElementById("button1").form.id
//get value of form elements
.elements[i].value
.reset()
.submit()
//images
.hspace
.vspace
//event
event.button==2 //right click
event.button==1 //left click
event.keyCode
event.clientX
event.clientY
event.shiftKey
event.type
e.target
e.srcElement;
event.altKey
event.ctrlKey
event.cancelable
//get select option Text
.options[i].text;
.selectedIndex
.remove(i)
//table
.rowIndex;
.deleteRow(i);
.insertCell(0);
.vAlign="top"
.frame
.rules
//time
.setTimeout //var t=setTimeout("javascript statement",milliseconds);
.setInterval
.clearTimeout //clearTimeout(setTimeout_variable)
.moveBy
//old time ajax
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.getAllResponseHeaders();//get all response headers
xmlhttp.getResponseHeader('Last-Modified');
readyState
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status
200: "OK"
404: Page not found
Using async=false is not recommended, but for a few small requests this can be ok.
Remember that the JavaScript will NOT continue to execute, until the server response is ready. If the server is busy or slow, the application will hang or stop.
When you use async=false, do NOT write an onreadystatechange function - just put the code after the send() statement:
The onreadystatechange event is triggered four times, one time for each change in readyState.
//proper way of defining inline javascript
JavaScript is Case Sensitive
The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement.
Using semicolons makes it possible to write multiple statements on one line.
Variable names must begin with a letter or the underscore character
If you redeclare a JavaScript variable, it will not lose its value.
If you declare a variable, without using "var", the variable always becomes GLOBAL.
=== is exactly equal to (value and type)
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
var r=confirm("Press a button");
var name=prompt("Please enter your name","Harry Potter"); //return null if cancel is clicked
for (variable in object)
{
code to be executed
}
try
{
//Run some code here
}
catch(err)
{
//Handle errors here The exception can be a string, integer, Boolean or an object.
}
document.write("this is a long \
text");
txt.link("http://www.w3schools.com") //make a link out if text
txt.anchor("chap10");
txt.toLowerCase()
txt.toUpperCase()
txt.match("world") //return null if no match
txt.replace("Microsoft","W3Schools")
txt.indexOf("d") //return -1 if not match
txt.lastIndexOf("d") //return -1 if not match
charCodeAt() Returns the Unicode of the character at the specified index
string.search(regexp) //returns the position of the match, or -1 if no match is found.
string.slice(begin,end)
string.split(separator, limit)
string.substring(from, to)
string.substr(start,length)
new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds) //Not specifying, causes 0 to be passed in.
parents.concat(brothers, children);
fruits.join() //default is ,
fruits.join(" and ");
.pop(); //remove and returns the last element
fruits.push("Lemon","Pineapple") // insert after last and return the number of elements
.reverse()
.shift(); //remove and returns the first element
.unshift("Lemon","Pineapple") //insert before first and return the number of elements
.slice(0,1) //get subset
.sort()
.toString() //same as join
fruits.splice(2,0,"Lemon") //array.splice(index,howmanyremoved,insertelement1,.....,elementX)
//sorting number in text format
//Math constant
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
//Math method
.round()
.random()
.floor()
.max()
.min()
//RegEx
syntax is /pattern/modifiers //modifier i (case insensitive) g (all)
var patt1=/w3schools/i;
"ssssss".match(patt1) //returns an array of found string or null if not found
patt1.test("ssss") //return true or false
patt1.exec("ssss") //same as match but with reverse role
//browser info
txt = "Browser CodeName: " + navigator.appCodeName + "
";
txt+= "Browser Name: " + navigator.appName + "
";
txt+= "Browser Version: " + navigator.appVersion + "
";
txt+= "Cookies Enabled: " + navigator.cookieEnabled + "
";
txt+= "Platform: " + navigator.platform + "
";
txt+= "User-agent header: " + navigator.userAgent + "
";
navigator.javaEnabled()
navigator.taintEnabled() //should be no
screen.availHeight Returns the height of the screen (excluding the Windows Taskbar)
screen.availWidth Returns the width of the screen (excluding the Windows Taskbar)
screen.colorDepth Returns the bit depth of the color palette for displaying images
screen.height Returns the total height of the screen
screen.pixelDepth Returns the color resolution (in bits per pixel) of the screen
screen.width Returns the total width of the screen
history.length Returns the number of URLs in the history list
history.back() Loads the previous URL in the history list
history.forward() Loads the next URL in the history list
history.go(number|URL) The parameter can either be a number which goes to the URL within the specific position (-1 goes back one page, 1 goes forward one page), or a string. The string must be a partial or full URL, and the function will go to the first URL that matches the string
location.hash Returns the anchor portion of a URL
location.host Returns the hostname and port of a URL
location.hostname Returns the hostname of a URL
location.href Returns the entire URL
location.pathname Returns the path name of a URL
location.port Returns the port number the server uses for a URL
location.protocol Returns the protocol of a URL
location.search Returns the query portion of a URL
location.assign(url) Loads a new document
location.reload() Reloads the current document
Window.closed
window.frames
window.name
window.opener //the window that opens this window
window.screenLeft Returns the x coordinate of the window relative to the screen
window.screenTop Returns the y coordinate of the window relative to the screen
window.screenX Returns the x coordinate of the window relative to the screen
window.screenY Returns the y coordinate of the window relative to the screen
window.parent
window.screenX(firefox) - window.screenLeft(IE)
window.screenY(firefox) - window.screenTop(IE)
window.self Returns the current window
window.top Returns the topmost browser window
close() Closes the current window
focus() Sets focus to the current window Assure that the new window GETS focus (send the new window to the front):
moveBy(x,y) Moves a window relative to its current position
moveTo(x,y) Moves a window to the specified position
window.open(URL,name,specs,replace)
print() Prints the content of the current window
resizeBy(width,height)
resizeTo(width,height)
var s = setInterval(code,millisec,lang)
clearInterval(s);
http://w3schools.com/js/tryit.asp?filename=tryjs_cookie_username //store and get cookies
//create object constructor
.constructor
.prototype
//Number
MAX_VALUE Returns the largest number possible in JavaScript
MIN_VALUE Returns the smallest number possible in JavaScript
NEGATIVE_INFINITY Represents negative infinity (returned on overflow)
POSITIVE_INFINITY Represents infinity (returned on overflow)
toExponential(x) Converts a number into an exponential notation
toFixed(x) Formats a number with x numbers of digits after the decimal point
toPrecision(x) Formats a number to x length
//global properties
The undefined property indicates that a variable has not been assigned a value.
undefined
Number.NaN //cannot be compared use isNan(value)
Infinity
//global methods
encodeURI(uri)
decodeURI(uri)
escape(string) This function encodes special characters, with the exception of: * @ - _ + . /
unescape(string) This function encodes special characters, with the exception of: * @ - _ + . /
isFinite(value) This function returns false if the value is +infinity, -infinity, or NaN.
Number(object) If the value cannot be converted to a legal number, NaN is returned.
String(object) returns the same value as toString() of the individual objects.
parseFloat(string) Note: Only the first number in the string is returned!
Note: Leading and trailing spaces are allowed.
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
parseInt(string, radix)
document.write(parseInt("010")+ "
"); //octal
document.write(parseInt("10",8)+ "
");
document.write(parseInt("0x10")+ "
"); //hexa
document.write(parseInt("10",16)+ "
");
input.select() select content of input box
select.add()
select.remove()