|
| Topics this page:
|
Related: |
|
Yahoo's User Interface IYUI) Javascript library, supported with blogs by
developers and
users,
offers drag-and-drop libraries and controls for
AutoComplete
Calendar
Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
Logger
Menu
Slider
TabView new!
TreeView
|
|
|
| 1991 | Microsoft introduces Visual Basic and VBScript |
| 1995 | JavaScript Created by
Brendan Eich of Netscape based on the Standard Generalized Markup Language (SGML) defined as Microsoft releases Internet Explorer 3.0 by renaming Javascript JScript . |
| Dec. 1996 | Cascading Style Sheets, level 1 (CSS1) page presentation recommendation is released. Both Microsoft and Netscape promise adherence to the standard, and implemented CSS1 in version 4.0 of their browsers. Netscape's Scott Thurman and Microsoft's Scott Isaacs co-wrote CSS1. |
| July 1997 | ECMA-262, also known as ECMAScript, is released by Microsoft as JScript 3.1. |
| July 1997 | HTML 4.0 draft specification issued by W3C provides enhanced table and form support.
Microsoft's VBScript site |
| 98 | Extended Markup Language (XML) is used to define the object, methods, properties, etc., and script to provide the functionality to write server <scriptlet> elements. This functionality is processed by Internet Explorer 5. |
| May 98 | CSS2 Recommendation published by the W2C. |
| June 98 | Microsoft releases IE5 with support for XML, dynamic expressions, fixed-layout tables, and dynamic behaviors. |
| Oct 99? | Microsoft releases Windows 2000 (Millenium) with IIS 5. |
| - | Javascript accepted as ISO-16262 |
| - | Dynamic HTML (Collection of Tutorials) from Netscape |
| Oct 04 | Firefox 1.0 officially released by Mozilla |
W3C's SMIL (Synchronized Multimedia Integration Language) standard (and *.smil file extension) integrates digital snapshots with audio commentary. If your browser doesn't support it, get the
MathML (Math Markup Language) was defined to describe mathematical symbols.
The main competititor to Javascript is Macromedia Flex.
| Browser Product | Language Version |
|---|---|
| NN2+ & IE3+ | JavaScript 1.0 |
| IE3+ only | VBScript |
| NN3+ only | JavaScript 1.1 |
| NN4+ | JavaScript 1.2 Guide and Reference (DHTML) |
| IE4+ | JScript 3 (DHTML) |
| IE5 | JScript 5 |
| IE5.1 WSH 2 | JScript 5.1 |
Only Netscape recognizes <SCRIPT language= "Javascript 1.1">. IE will ignore it. Likewise, Netscape ignores language="VBScript" container tags.BooK recommendation: “Hybrid HTML Design: A Multi-Browser HTML Reference” (ISBN: 1562056174) by Kevin Ready and Janine Warner, provides a good guidance on coding HTML for multiple browsers.
|
|
|
|
|
|
Code Conventions for Javascript
|
|
|
|
|
|
Javascript Coding Tutorials
|
|
|
|
|
Validate this site's css file
Personalizing a site by switching style sheets improved for NN4 Glish's list of CSS resources and tutorials include a Blogger template in CSS that is XHTML 1.0 compliant, free of tables, relying exclusively on CSS for formatting. Pre-5 browsers will simply see an un-styled but well structured HTML document. 5+ browsers will see a styled page with a 3 panel layout.
|
|
The following Javascript generates all the body HTML of a page using W3C's DOM Level 1 - interface. Counter j is used to define rows. Counter i is used to define columns.
<HTML><HEAD><script>
function start() {
var mybody=document.getElementsByTagName("body").item(0);
mytable = document.createElement("TABLE");
mytablebody = document.createElement("TBODY");
for(j=0;j<2;j++) {
mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
mycurrent_cell=document.createElement("TD");
currenttext=document.createTextNode("cell is:"+i+j);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border","2");
}
}
</script>
</head>
<body onload="start()">
</body>
</html>
The method document.getElementsByTagName("body") returns a list of all the elements in the document that have tag named "body", which is available by default (does not need to be created like the other elements. If you view the source from the internet browser, you will only see the code above, unless you install add-ins:
HTML Source Code Explorer Bar 2.0 by Richard van den Berg and the original
Free HTML Source Bar IE Plug-in HTML displays the final rendered HTML source for pages viewed in IE.
Live HTTP Headers.mozdev.org For Mozilla
To change the properties associated with all instances of an element, use the item(n) method for an array of items (starting from 0).
function changeElementsStyle(el,fw,fs,clr){
if(document.getElementsByTagName)//check for obj
{
var nodes = document.getElementsByTagName(el)
for(var i=0; i<nodes.length; i++){
var nodeObj = nodes.item(i);
nodeObj.style.fontWeight = fw; // 'bolder'
nodeObj.style.fontStyle = fs; // 'normal'
nodeObj.style.color = clr; // 'red'
nodeObj.style.background="rgb(255,0,0)";
}
}
To hide a cell, specify the display property:
nodeObj.style.display="none";
|
| ||||||||||||||||||||||||||||||||||
HTML Element TagsHTML element tags define how text is presented. For example, <H1> around an element of text defines the size and boldness of that text. "H1" is called a style selector .ClassesClasses are used to create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:.foo {property 1: value 1; property 2: value 2}A very simple example:
The tags and classes can then be used in combination:
Or not: <p>This is rendered as 10-point sans-serif text in the default color.</p> The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:
Text-Level Attributes: <SPAN> and <DIV> The <span> tag is generally used to apply a style to inline text: <p><span class="foo">This text is rendered as foo-style</span> and this is not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:
The style attribute provides a way to define a style for a single instance of an element: <p style="font-size: 10pt; color: red">This text is rendered as red, 10-point type</p> The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents. This code defines the POSITIONing of a container for text to be displayed:
<DIV ID = mytext STYLE = "POSITION: relative; WIDTH: 40%; FONT-FAMILY: garamond, serif; FONT-SIZE: 16pt; COLOR: blue; "> <P> Text to be displayed. </P> </DIV> </BODY> DynamicDrive.com offers this tip for defining a watermark image:
<script language="JavaScript1.2">
if (document.all) document.body.style.cssText="background:white url(notebook.jpg) no-repeat fixed center center" </script>
|
W3C's Cascading Style Sheets, level 2 CSS2 Specification W3C's Errata in REC-CSS2-19980512 CSS-Ask Dr Web About Cascading Style Sheets" from Zeldman.com Style Sheets Guide -- from Webmonkey Authoring Style Sheets links -- from Webmonkey
|
|
|
|
|
|
|
|
|
|
|
| With TDC, only data is downloaded for the browser to format. This is instead of using document.write() Javascript code and wrapping HTML page formatting code around data. The <OBJECT tag defines the data source on the web server which the <DATAsrc="data source" and <DATAFLD binds to <SPAN or <DIV data consumers presented within <TABLE tags. (<SPAN does not work with single record retrievals.) This approach is faster for users, gives them better control, and allows for more server scalability. RDC to access SQL databases is needed to write data back to the server. To encode a string to HTML entity codes:
function htmlEncode(s)
{
return s.replace(
/[<>&]/g,
function(m) {
return "&" + m.charCodeAt(0) + ";";
});
}
|
|
|
|
|
| Browser | Optimizing Engine Name |
| Chrome | V8 |
| Safari 4+ | Nitro |
| Firefox 3.5+ | TraceMonkey |
| Opera 10/11 | Carakan |
| Your first name: Your family name: Your location (city, country): Your Email address: |
Top of Page Thank you! | |||