Web Development

Notes of 3rd Term: HTML+CSS+JavaScript+ASP All the text here is property of WkiPedia and w3Schools.
I have only arranged and selected the relevant text for students of 3rd Year. For details, anyone can visit the respective sites. Regards, Amar Arora 1 HTML-Hyper Text Markup Language HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages. HTML is written in the form of HTML elements consisting of "tags" surrounded by angle brackets (like <html>) within the web page content. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags andclosing tags). The purpose of a web browser is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. (Ref: Wkipedia)
What is HTML? HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML Tags HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
Ref: W3schools Tag  <!DOCTYPE ...> <A ...> Anchor Attributes
HREF: URL you are linking to NAME: name a section of the page TARGET = "_blank" | "_parent" | "_self" | "_top" | window name which window the document should go in TITLE: suggested title for the document to be opened onClick: script to run when the user clicks on this anchor onMouseOver: when the mouse is over the link onMouseOut: when the mouse is no longer over the link ACCESSKEY
<ADDRESS>
<APP ...> <APPLET ...>
<AREA ...>
CODE: the applet to run CODEBASE: path to the applet class WIDTH: width of the applet HEIGHT: height of the applet ALIGN = LEFT | RIGHT | TOP | MIDDLE | BOTTOM | BASELINE alignment of applet to surrounding text VSPACE: vertical space between applet and surrounding text HSPACE: horizontal space between applet and surrounding text BORDER: empty space surrounding the applet NAME: name of applet for reference by other applets ARCHIVE: a compressed collection of applet components MAYSCRIPT: If Java can use JavaScript HREF: URL you are linking to ALT: alternate text if the image isn't displayed SHAPE = RECT | CIRCLE | POLY | DEFAULT what shape is this area? COORDS: coordinates for the link area shape TITLE: Short description of the area TARGET: what frame to go to NOHREF: this area is not a link onClick: script action when the user clicks this area onMouseOver onMouseOut HREF: default address for hypertext links TARGET = "_blank" | "_parent" | "_self" | "_top" | frame name default window for linked documents SIZE COLOR FACE SRC: URL of the sound LOOP = INFINITE | number of loops how many times to play the sound
<B> Bold <BASE ...> Base Address
<BASEFONT ...>
<BGSOUND ...>
<BIG> <BLINK> <BLOCKQUOTE ...> Block Quote <BODY ...>
<BR ...> Line Break <BUTTON ...>
BGCOLOR: background color of the page BACKGROUND: background picture for the page TEXT: color of the text on the page LINK: color of links that haven't been followed yet VLINK: color of links that have been followed ALINK: color of links while you are clicking on them BGPROPERTIES = FIXED if the background image should not scroll TOPMARGIN: size of top and bottom margins LEFTMARGIN: size of left and right margins MARGINHEIGHT: size of top and bottom margins MARGINWIDTH: size of left and right margins onLoad: Script to run once the page is fully loaded onUnload onFocus onBlur STYLESRC: MS FrontPage extension SCROLL = YES | NO If the document should have a scroll bar CLEAR = LEFT | RIGHT | ALL | BOTH go past a picture or other object TYPE = BUTTON | SUBMIT | RESET
<CAPTION ...>
what type of button is this onClick: script to run when the user clicks here NAME: name of this button element VALUE: the value sent with the form DISABLED: disable this button ACCESSKEY: shortcut key for this button TABINDEX: tab order ALIGN = TOP | BOTTOM | LEFT | RIGHT alignment of caption to table VALIGN = TOP | BOTTOM if caption should be above or below table
<CENTER ...> <CITE> Citation <CODE> <COL ...> Column
<COLGROUP ...> Column Group
SPAN: how many columns this affects ALIGN = LEFT | CENTER | RIGHT | JUSTIFY horizontal alignment WIDTH: width of the column BGCOLOR: background color of the column SPAN: how many columns this affects ALIGN: alignment of cell contents WIDTH: Width of the column group
<COMMENT> <DD> Definition Description <DEL> Deleted <DFN> Definition <DIR ...> Directory List <DIV ...> ALIGN = LEFT | CENTER | RIGHT | JUSTIFY text alignment <DL ...> Definition List COMPACT: take up less space <DT> Definition Term <EM> Emphasis <EMBED ...> SRC: URL of resource to be embedded WIDTH: width of area in which to show resource HEIGHT: height of area in which to show resource ALIGN = ABSBOTTOM | ABSMIDDLE | MIDDLE | TEXTTOP | RIGHT | LEFT |BASELINE | CENTER | BOTT OM | TOP how text should flow around the picture NAME: name of the embedded object PLUGINSPAGE: where to get the plugin software PLUGINURL: where to get the JAR archive for automatic installation HIDDEN = FALSE | TRUE if the object is visible or not HREF: make this object a link TARGET: frame to link to AUTOSTART = TRUE | FALSE if the sound/movie should start automatically LOOP = TRUE | FALSE | # of loops how many times to play the sound/movie PLAYCOUNT: how many times to play the sound/movie VOLUME: how loud to play the sound CONTROLS = VOLUMELEVER | STOPBUTTON | PAUSEBUTTON | PLAYBUTTON |SMALLCONSOLE | CO NSOLE which sound control to display CONTROLLER = TRUE | FALSE if controls should be displayed MASTERSOUND: indicates the object in a sound group with the sound to use STARTTIME: how far into the sound to start and stop ENDTIME: when to finish playing <FIELDSET>
<FONT ...>
SIZE: size of the font COLOR: color of the text FACE: set the typestyle for text POINT-SIZE WEIGHT <FORM ...> ACTION: URL of the CGI program METHOD = GET | POST how to transfer the data to the CGI NAME: name of this form ENCTYPE = "multipart/form-data" | "application/x-www-form-urlencoded" | "text/plain" what type of form this is TARGET = "_blank" | "_parent" | "_self" | "_top" | frame name what frames to put the results in onSubmit: script to run before the form is submitted onReset: script to run before the form is reset <FRAME ...> SRC: what file to put in the frame NAME: the name of the frame SCROLLING = YES | NO | AUTO should the frame have a scrollbar? NORESIZE: don't let the user make the frame bigger or smaller FRAMEBORDER = YES | 1 | NO | 0 should this frame have a border? BORDERCOLOR: color of the surrounding border MARGINWIDTH: the internal left and right margins for the frame MARGINHEIGHT: the internal top and bottom margins for the frame <FRAMESET ...> COLS: how many cols in the frameset ROWS: how many rows in the frameset FRAMEBORDER = YES | 1 | NO | 0 if the frames should have borders FRAMESPACING: space between the frames BORDER: space between frames BORDERCOLOR: color of frame borders <H# ...> Headers<H1 ALIGN = LEFT | RIGHT | CENTER | JUSTIFY ...>, <H2 ...>,<H3 ...>, alignment <H4 ...>, <H5 ...>, <H6 ...> <HEAD> <HR ...> Horizontal NOSHADE: don't use shadow effect Rule SIZE: height WIDTH: horizontal width of the line ALIGN = LEFT | RIGHT | CENTER horizontal alignment of the line COLOR: color of the line <HTML> <HTMLPLUS ...> <HYPE> <I> Italics <IFRAME ...> Inline SRC: URL of the document to go in the frame Frame HEIGHT: height of the inline frame WIDTH: width of the inline frame NAME: name of this inline frame LONGDESC: URL of a long description of the contents of the frame FRAMEBORDER = 1 | 0 if the frame should have a border around it MARGINWIDTH: internal left/right margin for the frame MARGINHEIGHT: internal top/bottom margin for the frame SCROLLING = YES | NO | AUTO if the frame should have scroll bars ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | CENTER |BOTTOM | ABSBOTTOM | B
<IMG ...> Image
<INPUT ...>
ASELINE alignment of the frame object to text around it VSPACE: space above and below the frame HSPACE: space to the left and right of the frame SRC: where to get the picture ALT: text to show if you don't show the picture NAME LONGDESC: URL of a long description of the image WIDTH: how wide is the picture HEIGHT: how tall is the picture ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BOTTOM |ABSBOTTOM | BASELINE how text should flow around the picture BORDER: border around the picture HSPACE: horizontal distance between the picture and the text VSPACE: vertical distance between the picture and the text ISMAP: is this a clickable map? USEMAP: name of the map definition LOWSRC: a version of the picture that isn't such a big file NATURALSIZEFLAG: meaningless NOSAVE: meaningless DYNSRC: play a movie file CONTROLS: show the buttons which control the movie LOOP = INFINITE | -1 | # of loops how many times to loop the movie START = FILEOPEN | MOUSEOVER when to start playing the movie onLoad: script to runs after the image is downloaded SUPPRESS = TRUE | FALSE Don't show icons of images that haven't downloaded yet TYPE = TEXT | CHECKBOX | RADIO | PASSWORD | HIDDEN | SUBMIT | RESET |BUTTON | FILE | IMAGE what type of field NAME: name of this form field VALUE: initial or only value of this field SIZE: how wide the text field should be MAXLENGTH: maximum number of characters CHECKED: check this checkbox or radio button BORDER: border around image SRC: URL of image ALT: text to show if you don't show the picture LOWSRC: a version of the picture that isn't such a big file WIDTH: width of image HEIGHT: height of image ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | CENTER |BOTTOM | ABSBOTTOM | B ASELINE how text should flow around the picture VSPACE: vertical distance between the picture and the text HSPACE: horizontal distance between the picture and the text READONLY: the value of this field cannot be changed DISABLED: don't let the user do anything with this field ACCESSKEY TABINDEX: tab order LANGUAGE = "JavaScript" | "JavaScript1.1" | "JSCRIPT" |"VBScript" | "VBS" | other language scripting language to use onClick: when the user clicks here onChange: when this field is changed onFocus: when this field gets the focus onBlur: when this field loses the focus onKeyPress: script to run when a key is pressed onKeyUp: script for when a key goes up while the field has the focus onKeyDown: script for when a key goes down while the field has the focus AUTOCOMPLETE = ON | OFF
If the browser should use autocompletion for the field <INS> Inserted<DEL> <ISINDEX ...> PROMPT: prompt string to show before the text entry area ACTION: the CGI to call <KBD> Keyboard <LABEL ...> FOR: form element for which this is a label <LEGEND ...> ALIGN = RIGHT | CENTER | LEFT <LI ...> List Item TYPE = DISC | CIRCLE | SQUARE | 1 | A | a | I | i type of bullet or numeral VALUE: where to continue counting <LINK ...> REL: relationship to this page REV: reverse relationship to this page HREF: URL of related document TITLE: suggested title MEDIA = SCREEN | PRINT | PROJECTION | AURAL | BRAILLE | ALL |other media What media type the link applies to TYPE: MIME type of linked resource <LISTING> <MAP ...> NAME: name of this map <MARQUEE ...> WIDTH: how wide the marquee is HEIGHT: how tall the marquee is DIRECTION = LEFT | RIGHT which direction the marquee should scroll BEHAVIOR = SCROLL | SLIDE | ALTERNATE what type of scrolling SCROLLDELAY: how long to delay between each jump SCROLLAMOUNT: how far to jump LOOP = INFINITE | number of loops how many times to loop BGCOLOR: background color HSPACE: horizontal space around the marquee VSPACE: vertical space around the marquee <MENU ...> <META ...> NAME = KEYWORDS | DESCRIPTION | REFRESH | many others The pupose of this META tag HTTP-EQUIV: Name of the pretend HTTP header CONTENT: Metainformation content <MULTICOL ...> COLS: how many columns GUTTER: space between columns WIDTH: width of a single column <NOBR> No Break <NOEMBED> <NOFRAMES> <NOSCRIPT> <OL ...> Ordered List TYPE = 1 | A | a | I | i type of numerals START: where to start counting <OPTION ...> VALUE: what's the value if this option is chosen SELECTED: this option is selected by default <P ...> Paragraph ALIGN = LEFT | CENTER | RIGHT | JUSTIFY alignment of text within the paragraph CLEAR = LEFT | RIGHT | ALL | BOTH move past picture and other objects <PARAM NAME: name of the parameter ...> Parameter VALUE: value of the parameter <PLAINTEXT> <PRE ...> Preformatted Text <S> Strikeout <SAMP> Sample
<SCRIPT ...>
<SELECT ...>
TYPE = "text/javascript" | "text/vbscript" |other scripting language Which scripting language to use SRC: External source for script DEFER: Continue loading page while downloading script LANGUAGE = JAVASCRIPT | LIVESCRIPT | VBSCRIPT | other Deprecated indicator of language FOR: object for which this script is an event handler EVENT: the event this script handles NAME: name of this form element MULTIPLE: allow more than one choice SIZE: how many options to show READONLY: don't let the user change the value of this field DISABLED: don't let the user do anything with this field LANGUAGE = "JavaScript" | "JavaScript1.1" | "VBScript" |other language scripting language to use onChange: what to do when a new option is selected TABINDEX: tab order onFocus: script to run when this field gets the focus onBlur: script to run when this field loses the focus
<SMALL> <SOUND ...> <SPACER ...>
TYPE = HORIZONTAL | VERTICAL | BLOCK what type of space is this ALIGN = LEFT | RIGHT align left or right SIZE: how tall or wide WIDTH: how wide HEIGHT: how tall
<SPAN ...> <STRIKE> Strikeout<S > <STRONG> <STYLE ...> TYPE: style language MEDIA: type of media this syle applies to <SUB> Subscript <SUP> Superscript <TABLE ...> BORDER: size of border around the table CELLPADDING: space between the edge of a cell and the contents CELLSPACING: space between cells WIDTH: width of the table as a whole BGCOLOR: color of the background BACKGROUND: picture to use as background ALIGN = LEFT | RIGHT alignment of table to surrounding text HSPACE: horizontal space between table and surrounding text VSPACE: vertical space between table and surrounding text HEIGHT: height of the table as a whole FRAME = VOID | BOX | BORDER | ABOVE | BELOW | LHS | RHS | HSIDES |VSIDES parts of outside border that are visible RULES = NONE | ALL | COLS | ROWS | GROUPS if there should be internal borders BORDERCOLOR: color of border around the table BORDERCOLORLIGHT: color of "light" part of border around the table BORDERCOLORDARK: color of "dark" part of border around the table SUMMARY: Summary of the purpose of the table <TBODY ...> Table Body Section <TD ...> Table Data ALIGN = LEFT | CENTER | MIDDLE | RIGHT horizontal alignment of cell contents VALIGN = TOP | MIDDLE | CENTER | BOTTOM | BASELINE vertical alignment of cell contents WIDTH: width of cell
<TEXTAREA ...>
HEIGHT: height of cell COLSPAN: number of columns to cover ROWSPAN: number of rows to cover NOWRAP: don't word wrap BGCOLOR: color of the background BORDERCOLOR: color of border around the table BORDERCOLORDARK: color of "dark" part of border around the table BORDERCOLORLIGHT: color of "light" part of border around the table BACKGROUND: picture to use as background NAME: name of this form field COLS: how many characters wide ROWS: how many rows WRAP = SOFT | HARD | OFF how to wrap the text READONLY: don't let the user change the contents of the field DISABLED: don't let the user do anything with this field TABINDEX: tab order LANGUAGE = "JavaScript" | "JavaScript1.1" | "VBScript" |other language scripting language onChange: Script to run when the user has changed the textarea onKeyPress: script to run when a key is pressed
<TFOOT ...> Table Footer Section <TH ...> Table Header <THEAD ...> Table Header Section<TBODY ...>, <TFOOT ...> <TITLE> <TR ...> Table Row ALIGN = LEFT | CENTER | RIGHT horizontal alignment of cell contents HALIGN = LEFT | CENTER | RIGHT VALIGN = TOP | MIDDLE | BOTTOM | BASELINE vertical alignment of cell contents BGCOLOR: background color BACKGROUND: background image BORDERCOLOR: color of border around each cell BORDERCOLORLIGHT: color of "light" part of border around each cell BORDERCOLORDARK: color of "dark" part of border around each cell <TT> Teletype <U> Underline <UL ...> Unordered List TYPE = DISC | CIRCLE | SQUARE type of bullets <VAR> Variable <WBR> <XMP> Ref: htmlcodetutorials 2 CSS- Cascading Style Sheet Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in amarkup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XMLdocument, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[citation
needed]
This separation can improve
content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. (Ref: Wkipedia)
CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.
CSS Example CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: Example p { color:red; text-align:center; } Ref: w3schools The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; } Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;} You can also specify that only specific HTML elements should be affected by a class. In the example below, all p elements with class="center" will be center-aligned: Example p.center {text-align:center;} Do NOT start a class name with a number! This is only supported in Internet Explorer. When a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS There are three ways of inserting a style sheet:
External style sheet Internal style sheet Inline style
External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "marginleft:20px") will work in IE, but not in Firefox or Opera.
Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color:red; text-align:left; font-size:8pt; } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt; } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt; The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One Styles can be specified:
inside an HTML element inside the head section of an HTML page in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document. Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1 2 3 4
Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
E.g.: module.css H1 { color: white; background: teal; FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 18pt; FONT-STYLE: normal; FONT-VARIANT: normal } H2 { COLOR: #000000; FONT-FAMILY: verdana, helvetica, lucida-sans, sans-serif; FONT-SIZE: 14pt; FONT-STYLE: normal; FONT-VARIANT: normal } H3 { COLOR: #000000; FONT-FAMILY: lucida-sans, sans-serif; FONT-SIZE: 14pt; FONT-STYLE: normal; FONT-VARIANT: normal } H4 { COLOR: #000000; FONT-FAMILY: lucida-sans, sans-serif; FONT-SIZE: 12pt; FONT-STYLE: normal; FONT-VARIANT: normal } H5 { color: white; background: darkblue; FONT-FAMILY: lucida-sans, sans-serif; FONT-SIZE: 12pt; FONT-STYLE: normal; FONTVARIANT: normal } H6 { color: yellow; background: green; FONT-FAMILY: lucida-sans, sans-serif; FONT-SIZE: 10pt; FONT-STYLE: normal; FONTVARIANT: normal } body { COLOR: #000000; FONT-FAMILY: lucida-sans, sans-serif; FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-VARIANT: normal; background-image: url('bkgnd.gif') } .localheader { COLOR: #dddddd; FONT-FAMILY: geneva, arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 15px; TEXT-DECORATION: none } .locallink { COLOR: #dddddd; FONT-FAMILY: geneva, arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 13px; FONT-WEIGHT: normal; TEXT-DECORATION: none } .localsublink { COLOR: #dddddd; FONT-FAMILY: geneva, arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: normal; TEXT-DECORATION: none } .tm { COLOR: #000000; FONT-FAMILY: geneva, arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 8pt; FONT-STYLE: normal; FONT-VARIANT: normal } A:link .nonu { COLOR: #000000; TEXT-DECORATION: none } .nonuw { COLOR: #ffffff; TEXT-DECORATION: none } A:visited .nonu { TEXT-DECORATION: none } .linespace { LINE-HEIGHT: 120% } .just { TEXT-ALIGN: justify } CODE { COLOR: #666666; FONT-FAMILY: courier, monaco, courier new; FONT-SIZE: 12pt } KBD { COLOR: #666666; FONT-FAMILY: courier, monaco, courier new; FONT-SIZE: 12pt }
JavaScript
JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment. It can be characterized as a prototype-based object-oriented[6] scripting language that is dynamic, weakly typed and has first-class functions. It is also considered a functional programming language[1] like Scheme and OCaml because it has closures and supports higher-order functions.[7]
JavaScript is primarily used in the form of client-side JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. However, its use in applications outside web pages for example in PDFdocuments, site-specific browsers and desktop widgets is also significant. JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. (Ref: Wkipedia)
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
Are Java and JavaScript the same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript do?
JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
The Real Name is ECMAScript JavaScript's official name is ECMAScript. ECMAScript is developed and maintained by the ECMA organization. ECMA-262 is the official JavaScript standard. The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997. The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998. The development of the standard is still in progress. (Ref: w3schools) The HTML <script> tag is used to insert a JavaScript into an HTML page.
Put a JavaScript into an HTML page The example below shows how to use JavaScript to write text on a web page: Example <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> The example below shows how to add HTML tags to the JavaScript: Example <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script> </body> </html>
Example Explained To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the type attribute to define the scripting language. So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends: <html> <body> <script type="text/javascript"> ... </script> </body> </html> The document.write command is a standard JavaScript command for writing output to a page. By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Note: If we had not entered the <script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.Try it yourself
How to Handle Simple Browsers Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just add an HTML comment tag  (end of comment) after the last JavaScript statement, like this: <html> <body> <script type="text/javascript"> <!-document.write("Hello World!"); //--> </script> </body> </html> The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. JavaScripts can be put in the body and in the head sections of an HTML page.
Where to Put the JavaScript JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, or at a later event, such as when a user clicks a button. When this is the case we put the script inside a function, you will learn about functions in a later chapter. Scripts in <head> Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section, this way they are all in one place, and they do not interfere with page content. Example <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html> Scripts in <body> If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section. Example <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body>
</html> Scripts in <head> and <body> You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. Example <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>
Using an External JavaScript If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension. Note: The external script cannot contain the <script></script> tags! To use the external script, point to the .js file in the "src" attribute of the <script> tag: Example <html> <head> <script type="text/javascript" src="xxx.js"></script> </head> <body> </body> </html> Note: Remember to place the script exactly where you normally would write the script! JavaScript Statements JavaScript is a sequence of statements to be executed by the browser.
JavaScript is Case Sensitive Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.
JavaScript Statements A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document.write("Hello Dolly"); It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web. 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. Because of this you will often see examples without the semicolon at the end. Note: Using semicolons makes it possible to write multiple statements on one line.
JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a web page: Example <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
JavaScript Blocks JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together. This example will write a heading and two paragraphs to a web page: Example <script type="text/javascript"> { document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script>
JavaScript Comments
JavaScript comments can be used to make the code more readable.
JavaScript Comments Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. The following example uses single line comments to explain the code: Example
<script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
JavaScript Multi-Line Comments Multi line comments start with /* and end with */. The following example uses a multi line comment to explain the code: Example <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
Using Comments to Prevent Execution In the following example the comment is used to prevent the execution of a single code line (can be suitable for debugging): Example <script type="text/javascript"> //document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> In the following example the comment is used to prevent the execution of a code block (can be suitable for debugging): Example <script type="text/javascript"> /* document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); */ </script>
Using Comments at the End of a Line In the following example the comment is placed at the end of a code line: Example <script type="text/javascript">
document.write("Hello"); // Write "Hello" document.write(" Dolly!"); // Write " Dolly!" </script> JavaScript Variables Variables are "containers" for storing information.
Do You Remember Algebra From School? Do you remember algebra from school? x=5, y=6, z=x+y Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11? These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).
JavaScript Variables As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names:
Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
Example A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value. This example will show you how
Declaring (Creating) JavaScript Variables Creating variables in JavaScript is most often referred to as "declaring" variables. You can declare JavaScript variables with the var keyword: var x; var carname; After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign values to the variables when you declare them: var x=5; var carname="Volvo"; After the execution of the statements above, the variable x will hold the value 5, andcarname will hold the value Volvo. Note: When you assign a text value to a variable, use quotes around the value.
Assigning Values to Undeclared JavaScript Variables If you assign values to variables that have not yet been declared, the variables will automatically be declared. These statements: x=5;
carname="Volvo"; have the same effect as: var x=5; var carname="Volvo";
Redeclaring JavaScript Variables If you redeclare a JavaScript variable, it will not lose its original value. var x=5; var x; After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.
JavaScript Arithmetic As with algebra, you can do arithmetic operations with JavaScript variables: y=x-5; z=y+5;
JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators: Operator + * / % ++ -Description Addition Subtraction Multiplication Division Modulus (division remainder) Increment Decrement Example x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 x=++y x=--y Result x=7 x=3 x=10 x=2.5 x=1 x=6 x=4
JavaScript Assignment Operators Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators: Operator = += -= *= /= %= Example x=y x+=y x-=y x*=y x/=y x%=y x=x+y x=x-y x=x*y x=x/y x=x%y Same As Result x=5 x=15 x=5 x=50 x=2 x=0
The + Operator Used on Strings The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a verynice day". To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; or insert a space into the expression: txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; After the execution of the statements above, the variable txt3 contains: "What a very nice day"
Adding Strings and Numbers The rule is: If you add a number and a string, the result will be a string! Example x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); JavaScript Comparison and Logical Operators Comparison and Logical operators are used to test for true or false.
Comparison Operators Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators: Operator == === != > < >= <= Description is equal to is exactly equal to (value and type) is not equal is greater than is less than is greater than or equal to is less than or equal to Example x==8 is false x===5 is true x==="5" is false x!=8 is true x>8 is false x<8 is true x>=8 is false x<=8 is true
How Can it be Used Comparison operators can be used in conditional statements to compare values and take action depending on the result: if (age<18) document.write("Too young"); You will learn more about the use of conditional statements in the next chapter of this tutorial.
Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator && || ! Description and or not Example (x < 10 && y > 1) is true (x==5 || y==5) is false !(x==y) is true
Conditional Operator JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename=(condition)?value1:value2 Example greeting=(visitor=="PRES")?"Dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear". JavaScript Popup Boxes JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box. Alert Box An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax alert("sometext"); Example <html> <head> <script type="text/javascript"> function show_alert() { alert("I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body>
</html>
Confirm Box A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax confirm("sometext"); Example <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>
Prompt Box A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax prompt("sometext","defaultvalue"); Example <html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } }
</script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html> JavaScript Events Events are actions that can be detected by JavaScript.
Events By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events:
A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input field in an HTML form Submitting an HTML form A keystroke
Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs! For a complete reference of the events recognized by JavaScript, go to our completeJavaScript reference.
onLoad and onUnload The onLoad and onUnload events are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
onFocus, onBlur and onChange The onFocus, onBlur and onChange events are often used in combination with validation of form fields. Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The
function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled: <form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver and onMouseOut onMouseOver and onMouseOut are often used to create "animated" buttons. Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected: <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false"><img src="w3s.gif" alt="W3Schools" /></a> JavaScript Guidelines Previous Next Chapter
Some other important things to know when scripting with JavaScript.
JavaScript is Case Sensitive A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar". JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.
White Space JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent: name="Hege"; name = "Hege";
Break up a Code Line You can break up a code line within a text string with a backslash. The example below will be displayed properly: document.write("Hello \ World!"); However, you cannot break up a code line like this: document.write \ ("Hello World!"); JavaScript Browser Detection The Navigator object contains information about the visitor's browser.
Browser Detection Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - especially on older browsers. Sometimes it can be useful to detect the visitor's browser, and then serve the appropriate information. The best way to do this is to make your web pages smart enough to look one way to some browsers and another way to other browsers.
The Navigator object contains information about the visitor's browser name, version, and more. Note: There is no public standard that applies to the navigator object, but all major browsers support it.
The Navigator Object The Navigator object contains all information about the visitor's browser: Example <html> <body> <script type="text/javascript"> document.write("Browser CodeName: " + navigator.appCodeName); document.write("<br /><br />"); document.write("Browser Name: " + navigator.appName); document.write("<br /><br />"); document.write("Browser Version: " + navigator.appVersion); document.write("<br /><br />"); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write("<br /><br />"); document.write("Platform: " + navigator.platform); document.write("<br /><br />"); document.write("User-agent header: " + navigator.userAgent); </script> </body> </html>
ASP- Active server Pages Active Server Pages (ASP), also known as Classic ASP or ASP Classic, was Microsoft's first server-side scriptengine for dynamically-generated web pages. Initially released as an add-on to Internet Information Services (IIS) via the Windows NT 4.0 Option Pack (ca 1998), it was subsequently included as a free component of Windows Server (since the initial release of Windows 2000 Server). ASP.NET has superseded ASP. ASP 2.0 provided six built-in objects: Application, ASPError, Request, Response, Server, and Session. Session, for example, represents a cookie-basedsession that maintains the state of variables from page to page. The Active Scripting engine's support of the Component Object Model (COM) enables ASPwebsites to access functionality in compiled libraries such as DLLs. Web pages with the .asp file extension use ASP, although some web sites disguise their choice of scripting language for security purposes (e.g. still using the more common .htm or .html extension). Pages with the .aspx extension use compiled ASP.NET (based on Microsoft's .NET Framework), which makes them faster and more robust than server-side scripting in ASP, which is interpreted at run-time; however, ASP.NET pages may still include some ASP scripting. The introduction of ASP.NET led to use of the term Classic ASP for the original technology. Programmers write most ASP pages using VBScript, but any other Active Scripting engine can be selected instead with the @Language directive or the <script language="language" runat="server"> syntax. JScript (Microsoft's implementation of ECMAScript) is the other language that is usually available. PerlScript (a derivative of Perl) and others are available as third-party installable Active Scripting engines. (ref: Wkipedia) What is ASP?
ASP stands for Active Server Pages ASP is a Microsoft Technology ASP is a program that runs inside IIS IIS stands for Internet Information Services IIS comes as a free component with Windows 2000
IIS is also a part of the Windows NT 4.0 Option Pack The Option Pack can be downloaded from Microsoft PWS is a smaller - but fully functional - version of IIS PWS can be found on your Windows 95/98 CD
ASP Compatibility To run IIS you must have Windows NT 4.0 or later To run PWS you must have Windows 95 or later ChiliASP is a technology that runs ASP without Windows OS InstantASP is another technology that runs ASP without Windows
What is an ASP File? An ASP file is just the same as an HTML file An ASP file can contain text, HTML, XML, and scripts Scripts in an ASP file are executed on the server An ASP file has the file extension ".asp"
How Does ASP Differ from HTML? When a browser requests an HTML file, the server returns the file When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML
What can ASP do for you?
Dynamically edit, change, or add any content of a Web page Respond to user queries or data submitted from HTML forms Access any data or databases and return the results to a browser Customize a Web page to make it more useful for individual users The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed Provide security - since ASP code cannot be viewed from the browser Clever ASP programming can minimize the network traffic
Note: Because ASP scripts are executed on the server, the browser that displays the ASP file does not need to support scripting at all! Ref: w3Schools Write Output to a Browser An ASP file normally contains HTML tags, just like an HTML file. However, an ASP file can also contain server scripts, surrounded by the delimiters <% and %>. Server scripts are executed on the server, and can contain any expressions, statements, procedures, or operators valid for the scripting language you prefer to use. The response.write Command The response.write command is used to write output to a browser. The following example sends the text "Hello World" to the browser: Example <html> <body> <% response.write("Hello World!")
%> </body> </html> There is also a shorthand method for the response.write command. The following example also sends the text "Hello World" to the browser: Example <html> <body> <% ="Hello World!" %> </body> </html>
Using VBScript in ASP You can use several scripting languages in ASP. However, the default scripting language is VBScript: <html> <body> <% response.write("Hello World!") %> </body> </html> The example above writes "Hello World!" into the body of the document.
Using JavaScript in ASP To set JavaScript as the default scripting language for a particular page you must insert a language specification at the top of the page: <%@ language="javascript"%> <html> <body> <% Response.Write("Hello World!") %> </body> </html> Note: JavaScript is case sensitive! You will have to write your ASP code with uppercase letters and lowercase letters when the language requires it.
Other Scripting Languages ASP is shipped with VBScript and JScript (Microsoft's implementation of JavaScript). If you want to script in another language, like PERL, REXX, or Python, you will have to install script engines for them. In ASP you can call a JavaScript procedure from a VBScript and vice versa.
Procedures The ASP source code can contain procedures and functions: Example
<html> <head> <% sub vbproc(num1,num2) response.write(num1*num2) end sub %> </head> <body> <p>Result: <%call vbproc(3,4)%></p> </body> </html> Show example Insert the <%@ language="language" %> line above the <html> tag to write the procedure/function in another scripting language: Example <%@ language="javascript" %> <html> <head> <% function jsproc(num1,num2) { Response.Write(num1*num2) } %> </head> <body> <p>Result: <%jsproc(3,4)%></p> </body> </html>
Differences Between VBScript and JavaScript When calling a VBScript or a JavaScript procedure from an ASP file written in VBScript, you can use the "call" keyword followed by the procedure name. If a procedure requires parameters, the parameter list must be enclosed in parentheses when using the "call" keyword. If you omit the "call" keyword, the parameter list must not be enclosed in parentheses. If the procedure has no parameters, the parentheses are optional. When calling a JavaScript or a VBScript procedure from an ASP file written in JavaScript, always use parentheses after the procedure name. User Input The Request object can be used to retrieve user information from forms. Example HTML form <form method="get" action="simpleform.asp"> First Name: <input type="text" name="fname" /><br /> Last Name: <input type="text" name="lname" /><br /><br /> <input type="submit" value="Submit" /> </form> User input can be retrieved with the Request.QueryString or Request.Form command.
Request.QueryString The Request.QueryString command is used to collect values in a form with method="get".
Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send. If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would look like this: http://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates Assume that "simpleform.asp" contains the following ASP script: <body> Welcome <% response.write(request.querystring("fname")) response.write(" " & request.querystring("lname")) %> </body> The browser will display the following in the body of the document: Welcome Bill Gates
Request.Form The Request.Form command is used to collect values in a form with method="post". Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send. If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would look like this: http://www.w3schools.com/simpleform.asp Assume that "simpleform.asp" contains the following ASP script: <body> Welcome <% response.write(request.form("fname")) response.write(" " & request.form("lname")) %> </body> The browser will display the following in the body of the document: Welcome Bill Gates

Web Development

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web Development

Diunggah oleh

Hak Cipta:

Format Tersedia

Notes of 3rd Term: HTML+CSS+JavaScript+ASP All the text here is property of WkiPedia and w3Schools.

What is HTML? HTML is a language for describing web pages.

HTML Documents = Web Pages

<APP ...> <APPLET ...>

<B> Bold <BASE ...> Base Address

<BIG> <BLINK> <BLOCKQUOTE ...> Block Quote <BODY ...>

<BR ...> Line Break <BUTTON ...>

<CENTER ...> <CITE> Citation <CODE> <COL ...> Column

<COLGROUP ...> Column Group

<IMG ...> Image

<SMALL> <SOUND ...> <SPACER ...>

This separation can improve

External style sheet Internal style sheet Inline style

Multiple Styles Will Cascade into One Styles can be specified:

What can a JavaScript do?

JavaScript comments can be used to make the code more readable.

Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

Some other important things to know when scripting with JavaScript.

What can ASP do for you?

Anda mungkin juga menyukai