ECTG LEARNING SESSION          

PLEASE CHECK THE BOTTOM OF THIS PAGE FOR FULL (HTML) REFERENCE.

obj = new obj.constructor(obj)

y = "JavaScript"

function myFunc2(obj) 

{

obj = new obj.constructor(obj)

obj.myProp = new Object()

// returns [object Object] when calling myFunc2(y)

alert(obj.myProp)

}

//HERE YOU SET YOUR FUNCTION METHODS, PROPERTIES, CONSTRUCTORS FIRST
//USE HES AS A VARIABLE ONCE THE VALUE REACH 0 YOU SET IT TO 255 AGAIN.
//THE FUNNIEST PART IS HOW YOU MAY USE EASILY CREATE BUTTON TO BE ON CLICK
//ONCE YOU CLICK IT THE FUNCTION PREVIOUSLY SET WILL BE ACTIVATES.

<script language="JavaScript1.2">
hex=255 // Initial color value.

function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",20);
}
else
hex=255 //reset hex value
}

</script>

//HERE YOU CREAT A BUTTON TO PROVOKE THE FUNCTION

<div id="sample" style="width:100%"><h3>ELKAYAL ALI IS SLOWLY FADED IN THE VIEW.....FUNNY ISN'T</h3></div>
<button onClick="fadetext()">Fade Text</button>

FOLKS FINALLY I HAVE TO SAY IT

ONE INTERNET SHOW RECENTLY HELD SUCCEED TO PROVE TO MANY INTERNET DEVELOPERS THAT .....

JAVA SCRIPTS IS NOT ...........A REPETITION FOR THE DHTML

USING THE IMAGES RENDERED BELOW TO BE DRAGGED OVER THE PAGES, IS AN EXAMPLE THAT DHTML IS ANOTHER STORY,

THE DRAGGING ENGINE WAS IMPLEMENTED IN THE HEAR "SECTION" CHECK IT OUT, AND THE IMAGES  THEN WERE IMPLEMENTED IN THE BODY SECTION.

THIS TEXT ID DRAG GABLE TRY TO DRAG, AND SO IS THE SIDE BACKGROUND IMG.

"Hi there

THIS IS ANOTHER EXAMPLE ON HOW YOU APPLY HOVER SETTINGS TO BUTTONS:

 <TR>
<TD><A href="http://www.memorex.com/about_memorex/"
onmouseout="revertImages('about_memorex','/images/main_nav/about_memorex.gif'); return true;"
onmouseover="window.FW_showMenu(window.myMenu,205,21); changeImages('about_memorex', '/images/main_nav/about_memorex-over.gif'); return true; "><IMG
border=0 height=21 name=about_memorex
src="Memotrial_files/about_memorex.gif" width=105></A></TD>




<TD><A href="http://www.memorex.com/products/"
onmouseout="revertImages('products','Memotrial_files/about_memorex.gif'); return true;"
onmouseover="window.FW_showMenu(window.myMenu2,310,21); changeImages('products', 'Memotrial_files/spacer.gif'); return true;"><IMG
border=0 height=21 name=products src="Memotrial_files/products.gif"
width=72></A></TD>

THIS SHOWS HOW YOU USE SCRIPTS TO DIRECT YOUR DISPLAY ACCORDING TO THE BROWSER IN USE: AS IN HOVER SETTINGS, IE IS MUCH EASIER TO IMPLEMENT. ALSO ,

YOU SEE CSS USE WITH VARIABLES TO BE INCLUDED IN THE PAGE.

var css_pc_ns = "/includes/pc_ns.css";
var css_other = "/includes/other.css";
var usecss = "";

if(navigator.userAgent.indexOf("Win")>=0) {
if(navigator.appName.indexOf("Netscape")>=0) {
if(navigator.appVersion.indexOf("5.0")>=0) {
usecss=css_other;
}
else {
usecss=css_pc_ns;
}
}
else {
usecss=css_other;
}
}
else {
usecss=css_other;
}

document.write("\n<link rel='stylesheet' href='"+usecss+"' type='text/css'>");
//-->
</SCRIPT>
 

ALL HTML...READ CAREFULLY

You can use HTML tags to quickly and easily create ordered lists (numbered), unordered lists (bulleted), and definition lists (uses indents).
Ordered List:
You can create numbered, or ordered lists, by using the <OL> (ordered list) tag. The format is:

<OL>
<LI>item one
<LI>item two
<LI>item three
</OL>

The ordered list will look like this:

item one
item two
item three
Unordered List:
To create bulleted, or unordered lists, use the <UL> (unordered list) tag. The format is:

<UL>
<LI>item one
<LI>item two
<LI>item three
<UL>

The unordered list will look like this:

item one
item two
item three
Definition List:
The definition list is somewhat different and can be used to automatically indent certain parts of your text by using the <DL> (definition list) tag. The easiest way to explain a definition list is to show one:

<DL>
<DT> Oranges
<DD> A reddish-yellow tropical fruit about the size of an apple. A member of the citrus fruit family. In the United States, oranges are grown primarily in the states of Florida and California.
<DT> Apples
<DD> Technically a pome, apples are an orange-sized fruit, usually in varying shades and mixtures of red, yellow, and green. In the United States, apples are grown primarily in the northern states, near bodies of water.
</DL>

The definition list will look like this:

Oranges
A reddish-yellow tropical fruit about the size of an apple. A member of the citrus fruit family. In the United States, oranges are grown primarily in the states of Florida and California.
Apples
Technically a pome, apples are an orange-sized fruit, usually in varying shades and mixtures of red, yellow, and green. In the United States, apples are grown primarily in the northern states, near bodies of water.






Here is an example using the paragraph <p> tag:
What you type in:
line1
<p>
line2

What you see on your page:
line1

line2

As you can see, there is a complete line of space between line1 and line2.


Here is an example using the line break tag <br>:
What you type in:
line1
<br>
line2

What you see on your page:
line1
line2

As you can see, there is no space between line1 and line2. By including the <br> tag, line2 is placed on the line right below line1.


Here is an example of using the space &nbsp; tag:
What you type in (this is three in a row):
line1
&nbsp;&nbsp;&nbsp;
line2

What you see on your page:
line1 line2

As you can notice, we used three &nbsp; tags in a row. This is because each &nbsp; tag creates only one space



Body Attributes
<body bgcolor=?>
Sets the background color, using name or hex value
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex value
<body alink=?>
Sets the color of links on click






Links
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in the document



is very important to realize how can you jump in one document from one heading to the target. You of course will need to creat the target name, and then aim to this target in your text.





<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote>
</blockquote>
Indents text from both sides
<dl></dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol></ol>
Creates a numbered list
<li></li>
Precedes each list item, and adds a number
<ul></ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets


Graphical Elements
<img src="name">
Adds an image
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow


Tables
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)


Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit


Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of w idth
<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width
<frame>
Defines a single frame — or region — within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support frames


Frames Attributes
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame


Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
<form></form>
Creates all forms
<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>
Sets off each menu item
<select name="NAME"></select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea>
Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag
<input type=text name="foo" size=20>
Creates a one-line text area. Size sets length, in characters.
<input type="submit" value="NAME">
Creates a Submit button
<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image
<input type="reset">
Creates a Reset button





br. line break
hr. line

spc is a space
p skip line and go

<div align=?> used to block texts or for style sheets.









<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)



Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table — in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit


Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of w idth
<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width
<frame>
Defines a single frame — or region — within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support frames


Frames Attributes
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame


Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
<form></form>
Creates all forms
<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>
Sets off each menu item
<select name="NAME"></select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea>
Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag
<input type=text name="foo" size=20>
Creates a one-line text area. Size sets length, in characters.
<input type="submit" value="NAME">
Creates a Submit button
<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image
<input type="reset">
Creates a Reset button










Quick Reference:

JavaScript Library
HTML Cheatsheet
Special Characters
Color Codes
Browser Chart
Stylesheet Guide
Unix Guide
Glossary
Domain Registries



Reference Javascript Code Library
---------------------------------------------------------------------------------

The Webmonkey code library is our own collection of code fragments, function packages, and Web editor extensions - a resource containing generalized code, specific workarounds, and good ideas that you can use to enhance your pages in ways you may not know how (or may not want to bother) to program.

Code samples are provided free for use on your own Web pages, but modification and redistribution of the code may depend on the author. Any code that you copy and paste or download from our site is subject to this disclaimer.

Editor Extensions
Extend the capabilites of your HTML editor (Dreamweaver, for example) with downloadable behaviors and objects.


Development
Routines to aid you in the JavaScript development process and help you write better code.


DHTML
Core libraries for cross-platform DHTML, animation functions, and visual trickery.


Forms & Data
Gathering information from the browser, processing form elements, and communicating data from page to page.


User Interface
Rollovers, menu bars, page conditionalization, and routines to create dynamic, user-centered design.


Layout & CSS
Scaling design, relative layout, conditional colors, and routines for scripting your design.


Language Extensions
The JavaScript running in your browser is a fully featured, Turing-capable language, but it doesn't quite do everything. These scripts teach that old JavaScript dog some useful new tricks.