is the biggest and h6 is the smallest heading tag. 4.

---

TAG – is used to draw horizontal line

115

EXAMPLE FOR TEXT FORMATTING TAGS

EXAMPLE FOR TEXT FORMATTING TAGS

Bold Format
Italic Format
Underline Format

OUTPUT

ATTRIBUTES OF HR TAG 1. ALIGN – Aligns the line on the browser. ALIGN = LEFT or ALIGN = RITHT or ALIGN = CENTER 2. SIZE – Changes the size of the rule 3. WIDTH – Sets the width of the rule.

116

ATTRIBUTES OF

---

TAG. Example for HR Tag

---

OUTPUT

FONT TAG Font tag is used to set different fonts and colors to a text in the web page. SYNTAX ……………….. Type the text or content here ……………….. EXAMPLE Text is Displayed in Red Color


117

Text is Displayed in blue Color
Text is Displayed in Green Color


OUTPUT

3.1.6 LISTS

TYPES OF LISTS 1. Unordered lists 2. Ordered lists UNORDERED LISTS Unordered lists starts with

and ends with

ATTRIBUTES OF UNORDERED LISTS TYPE = DISC or TYPE = SQUARE Here DISC provides a shaded circle format and SQUARE provides square shapes respectively.

118

SYNTAX

• List Item
• List Item
• List Item

EXAMPLE

• RED
• GREEN
• BLUE
  
  
  OUTPUT
  
  EXAMPLE
  
  
  • RED
  • GREEN
    
    119
    
    
  • BLUE
    OUTPUT
    
    ORDERED LISTS (NUMBERING) TYPE: Controls the numbering scheme to be used. The following TYPE schemes can be used with respect to ordered lists. TYPE = “1” generates numbers (1,2,…) “A” generates A, B, C.. “a” generates a, b, c “I” generates Capital roman letters I, II, II… “i” generates small case roman letters i, ii, iii ….. START: Alters the numbering sequence, can be set to any numeric value VALUE: Change the numbering sequence in the middle of an ordered list EXAMPLE
    1. Floppies
    2. Hard Disks
    3. Monitors
    
    
    120
    
    OUTPUT
    
    EXAMPLE
    100. Floppies
    101. Hard Disks
    102. Monitors
    OUTPUT
    
    EXAMPLE
    1. Floppies
    2. Hard Disks
    3. Monitors
  
  
  121
  
  OUTPUT
  
  EXAMPLE
  1. Floppies
  2. Hard Disks
  3. Monitors
  
  
  OUTPUT
  
  EXAMPLE
  1. Floppies
  2. Hard Disks
  3. Monitors

122

OUTPUT

EXAMPLE

1. Floppies
2. Hard Disks
3. Monitors OUTPUT
   
   USE OF DL, DT AND DD TAGS

   Keyboard

   An input device

   It is very useful

   Used to give Input Values

   printer

   An output device

   Output can be produced using printer

   
   
   123
   
   
   
   
   
   OUTPUT
   
   Explanation: 1. Here,

   specifies definition list. The

   is used for creating main items and sub items as shown above. 2.

   specifies definition term. It is used to specify the main heading. 3.

   specifies definition description. It specifies sub heading or sub title. 4.

   ,

   tags should be given within

   tags.
   
   3.1.7ADDING GRAPHICS TO HTML PROGRAM tag is used to insert or call a picture inside the Web page:
   
   SYNTAX •
   
   Where, SRC specifies path of the picture. Height and width specifies height, width of the picture during display.
   
   124
   
   •
   
   The message given in alt attribute will be printed when the particular picture is not available.
   
   EXAMPLE

   Controlling Image Border

   Image WITHOUT a BORDER
   
   
   
   Image With BORDER = 3
   
   OUTPUT
   
   125
   
   Note HTML accepts two picture format namely .gif and .jpg. Image can be called in web page using tag.
   
   ATTRIBUTES OF IMG TAG 1. ALIGN: ALIGN = TOP, MIDDLE,BOTTOM 2. BORDER: Specifies the size of the border to place around the image. 3. WIDTH: Specifies the width of the image in pixels. 4. HEIGHT: Specifies the height of the image in pixels 5. HSPACE: Indicates the amount of space to the left and right of the image 6. VSPACE: Indicates the amount of apace to the top and bottom of the image. 7. ALT: Indicates the text to be displayed in case the browser is unable to display the image specified in the SRC attribute.
   
   3.1.8 LINKING DOCUMENTS LINKS HTML allows linking to other HTML documents as well as images. There are 3 attributes that can be introduced in BODY tag. 1. LINK – Changes the default color of a Hyperlink to whatever color is specified with this tag.
   
   126
   
   2. ALINK – Changes the default color of a hyperlink that is activated to whatever color is specified with this tag. 3. VLINK – Changes the default color of a hyperlink that is already visited to whatever color is specified with this tag. NOTE: User can specify the color name of a hyperlink or an equivalent hexadecimal number.
   
   EXAMPLE FOR VARIOUS LINKS LINKS.HTML
   
   
   

   EXAMPLE FOR LINK
   
   
   

   EXAMPLE FOR ALINK
   
   
   

   EXAMPLE FOR VLINK
   
   LINK.HTML

   Example for LINK attribute

   
   
   127
   
   ALINK.HTML

   Example for ALINK attribute

   
   
   VLINK.HTML

   Example for VLINK attribute

   
   
   EXTERNAL LINKS
   
   SYNTAX Hyperlink Message
   
   EXAMPLE Click Here to Continue
   
   3.1.9 IMAGE MAPS USING IMAGES AS HYPERLINKS
   
   128
   
   When a hyperlink is created on an image, clicking on any part of the image will lead to opening of the document specified in the . Linked regions of an image map are called hot spots and each hot spot is associated with html html filename. Syntax <MAP NAME = “fish.jpg”>
   
   ATTRIBUTES OF IMAGE MAPS 1. COORDS: Each of the above shapes takes different coordinates as parameters. a. Rectangle – 4 coordinates (x1,y2,x3,y2) 2. POLYGON: 3 or more coordinates. 3. HREF – Takes the name of the .html file that s linked to the particular area on the image. <MAP NAME = “fish.jpg”>
   
   3.2 HTML FORMS HTML form provides several mechanisms to collect information from people viewing your site. The syntax of the form is

   
   
   •
   
   The METHOD attribute indicates the way the web server will organize and send you the form output.
   
   •
   
   Use METHOD = “post” in a form that causes changes to server data, for example when updating a database.
   
   129
   
   •
   
   The ACTION attribute in the FORM tag is the path to the script; in this case, it is a common script which sends form data to destination address. Most Internet Service Providers will have a script like this on their site.
   
   STRUCTURE OF FORM TAG IN HTML PROGRAM <TITLE>THIS IS MY TITLE Create the necessary form elements (text box, radio, label etc.)

   
   
   3.2.1 FORM ELEMENTS EXAMPLES CREATION OF LABEL AND TEXT BOX

   Student Details

   Student Name:

   
   
   130
   
   INTRODUCING PASSWORD

   Student Details

   Student Password:

   
   
   OUTPUT
   
   131
   
   INTRODUCING CHECKBOX

   Loan Status

   
   
   CREATION OF RESET, SUBMIT, RADIO BUTTONS

   Sex Male

   Sex Female

   
   
   132
   
   CREATION OF LIST BOX

   <select dept = "deptnames" size = 2> MECH IT CSE MECH

   
   
   OUTPUT
   
   133
   
   3.3 FRAMES Frames are used to call many html files at the same time. This can be done using tags.
   
   3.3.1 ATTRIBUTES OF FRAMES ROWS – This attribute is used to divide the screen into multiple rows. It can be set equal to a list of values. Depending on the required size of each row, the values can be • • •
   
   A number of pixels Expressed as a percentage of the screen resolution The symbol *, which indicates the remaining space.
   
   COLS – This attribute is used to divide the screen into multiple columns. SYNTAX
   
   => Divides the screen into 2 rows, * indicates the remaining space => Divides the first row into 2 equal columns => Divides the second row into 2 equal columns
   
   134
   
   EXAMPLE FRAME.HTML
   
   FILE1.HTML html>

   Output of File1

   
   
   FILE2.HTML

   Output of File2

   
   
   FILE3.HTML html>

   Output of File3

   
   
   135
   
   FILE4.HTML

   Output of File4

   
   
   OUTPUT
   
   Output of File1
   
   Output of File2
   
   Output of File3 Output of File4
   
   3.4 TABLES A table is a two dimensional matrix, consisting of rows and columns. All table related tags are included between tags. SYNTAX Heading

   Row elements	Table data values

   
   
   136
   
   3.4.1 ATTRIBUTES OF TABLE TAG ALIGN
   
   Horizontal alignment is controlled by the ALIGN attribute. It can be set to LEFT, CENTER, or RIGHT VALIGN Controls the vertical alignment of cell contents. It accepts the values TOP, MIDDLE or BOTTOM WIDTH Sets the WIDTH of a specific number of pixels or to a percentage of the available screen width. BORDER Controls the border to be placed around the table. CELLPADING This attribute controls the distance between the data in a cell and the boundaries of the cell CELLSPACING Controls the spacing between adjacent cells COLSPAN Used to merge two or more columns ROWSPAN Used to merge two or more rows.
   
   EXAMPLE

   Specifing the BORDER and WIDTH of the Table!

   
   
   
   
   137
   
   

   Name	Branch	Total Marks	Grade
   Shilpa	CSE	950	Distinction
   Beena	IT	800	First Class
   Hanifa	ECE	645	Second Class
   Monisha	EEE	245	Fail

   Personal Information

   
   
   138
   
   OUTPUT
   
   3.4.2 SPECIFYING CELL SPACING AND CELL PADDING TABLE ATTRIBUTES Specifing CELL SPACING
   

   ---

   
   
   139
   
   

   Name	Age
   Shilpa	21
   vaishali	22

   ---

   With Cellpadding of 10

   Name	Age
   Shilpa	21
   vaishali	22

   
   
   140
   
   OUTPUT
   
   3.4.3 ROWSPAN AND COLSPAN ATTRIBUTES

   Specifing ROWSPAN and COLSAPN Attributes!

   
   
   
   
   

   Mark Sheet

   NAME	MARKS
   	PowerBuilder	Visual Basic	Developer2000 141
   Shilpa	21	45	30
   vaishali	26	30	40

   OUTPUT
   
   142
   
   3.4.4 SPECIFYING COLORS IN TABLE CELLS

   Specifing Colour in Table Cells

   
   
   
   
   

   Name	Age
   Shilpa	21
   vaishali	22

   
   
   143
   
   OUTPUT
   
   3.5 WEB PAGE DESIGN Create a web page to do the following: 1. Set the background with grey color. 2. Show different font with different sizes. 3. Show the usage of text formatting tags.
   
   Main.html

   
   1.Set the Background With Grey Color
   
   2.Different Fonts With Different Sizes
   
   3.Text Formatting Tags
   

   
   
   144
   
   yellow.html

   This Web Page is Displayed in Yellow Color

   
   
   

   Back to Main Menu

   
   
   DIFFERENT FONTS WITH COLORS DIFFONT.HTML

   Text is in Arial, size = 6, color = "black"
   
   Text is in Times New Roman, size = 5, color = "black"
   
   145
   
   
   
   Text is in Lucida Handwriting, size =4, color = "black"
   
   Text is in Century Gothic, size =5, color = "black"
   
   

   Back to Main Menu

   
   
   FORMAT.HTML

   
   
   Example for Bold Format
   
   Example for Italic Format
   
   Example for Underline Format
   
   

   Example for Bold Format
   
   146
   
   
   
   OUTPUT
   
   147
   
   3.6 JAVA SCRIPT INTRODUCTION SCRIPTING LANGUAGES •
   
   JavaScript is a Scripting language (web site development environment) created by Netscape.
   
   •
   
   Hence JavaScript works best with the Netscape suite of Client and Server products.
   
   •
   
   JavaScript is the native scripting language of Netscape Navigator.
   
   •
   
   VBScript is the native Scripting language of HTML.
   
   SERVER SIDE SCRIPTING •
   
   In Server side scripting the script program is executed at Server Side the required html program is sent to the client.
   
   •
   
   The job of the server is more in server side scripting
   
   CLIENT SIDE SCRIPTING •
   
   Here the script program is processed and executed in the client side itself.
   
   •
   
   So that it reduces the burden of the server.
   
   JAVA SCRIPT 1. JavaScript is an object-oriented language that allows creation of interactive Web pages 2. JavaScript allows user entries, which are loaded into an HTML form to be processed as required
   
   3.6.1 JAVASCRIPT INTRODUCTION Objectives 1. To be able to write simple java script programs 2. To be able to use input and output statements
   
   148
   
   3. To understand basic memory concepts 4. To be able to use arithmetic operators 5. To understand the precedence of arithmetic operators 6. To be able to write decision making statements 7. To be able to use relational and equality operators
   
   ADVANTAGES 1. It is an interpreted language, which requires no compilation steps. 2. Embedded within HTML. 3. Minimal Syntax – easy to learn 4. Quick Development 5. Designed for simple, small programs 6. High performance 7. Procedural Capabilities – support facilities such as condition checking, looping and branching. 8. Designed for programming user events – like VB Java Script is also based on Events. 9. Easy Debugging and Testing 10. Platform Independent/ Architecture Neutral
   
   SYNTAX OF JAVASCRIPT PROGRAM <SCRIPT language = “JavaScript”> … body of the script program <SCRIPT language = “JavaScript”> body of the program.
   
   149
   
   
   
   EXAMPLE <SCRIPT language = “JavaScript”> var name = prompt(“Enter your name”,”name”); <SCRIPT language = “JavaScript”> document.write(“

   Hai” + “ OUTPUT Assume the input is anbu then the output will be Hai anbu
   
   3.7 JAVA SCRIPT CONTROL STRUCTURES SCRIPT PROGRAM USING FOR.. LOOP SYNTAX for(int i=initial-value;i
   150
   
   where i is the control variable and assign with the initial value. The body of the program is executed till the condition is true. For each iteration i value is incremented by 1.
   
   EXAMPLE Java script program for adding values from first number to second number using for loop. <SCRIPT language = JavaScript> var tot1 = 0; var num1=0,num2=0;i=0; var num1 = prompt("Enter the First Number", "Number1"); var num2 = prompt("Enter the Second Number","number2"); num1 = parseInt(num1); num2 = parseInt(num2); for(i=num1;i<=num2;i++) { tot1 = tot1 + i; }

   WELCOME TO JAVA SCRIPT PROGRAM

   <SCRIPT language = "JavaScript"> document. write ("

   " + "SUM FROM " + num1 +" to " + num2 + " = " + tot1);
   
   151
   
   OUTPUT
   
   SCRIPT PROGRAM USING WHILE LOOP SYNTAX i = 0; while(condition) { body program }
   
   152
   
   Where i is the initial value and assign with zero. The body program is executed till the condition remains true. If the condition is false then the loop is terminated. The body of program will get executed only when the condition is true.
   
   EXAMPLE Java script program for adding values from first number to second number using while loop. <SCRIPT language = JavaScript> var tot1 = 0; var num1=0,num2=0;i=0; var num1 = prompt("Enter the First Number", "Number1"); var num2 = prompt("Enter the Second Number","number2"); num1 = parseInt(num1); num2 = parseInt(num2); i = num1; while(i<=num2) { tot1 = tot1 + i; i++; } document.writeln("sum = " + tot1);

   WELCOME TO JAVA SCRIPT PROGRAM - WHILE LOOP

   <SCRIPT language = "JavaScript"> document.write("

   " + "SUM FROM " + num1 +" to " + num2 + " = " + tot1);
   
   153
   
   OUTPUT
   
   3.8 JAVA SCRIPT FUNCTIONS SCRIPT PROGRAM USING FUNCTION SYNTAX function function-name(input parameter1, …input parameter-n) { body of the function program } 154
   
   SYNTAX FOR CALLING THE FUNCTION variable name = function-name(input parameter1, …input parameter-n)
   
   EXAMPLE Java script program for adding values from first number to second number using function loop.
   
   <SCRIPT language = "JavaScript"> function sum1() { var tot1 = 0; var num1=0,num2=0;i=0; var num1 = prompt("Enter the First Number", "Number1"); var num2 = prompt("Enter the Second Number","number2"); num1 = parseInt(num1); num2 = parseInt(num2); i = num1; while(i<=num2) { tot1 = tot1 + i; i++; } document.write("

   " + "SUM FROM " + num1 +" to " + num2 + " = " + tot1); }
   
   155
   
   

   JAVA SCRIPT USING FUNCTION

   <SCRIPT language = "JavaScript"> var sum2 = sum1();
   
   OUTPUT
   
   156
   
   3.9 THE JAVASCRIPT ARRAYS Arrays are JavaScript objects that are capable of storing a sequence of values. These values are stored in indexed locations within the array. The length of an array is the number of elements of an array accessed by using the name of the array followed by the index value of the array element enclosed in square brackets. The length of an array starts from 0 to n-1. The array can be created in the following methods 1. arrayName = new Array(Array length) => array size is explicitly specified, array size is predefined. 2. arrayName = new Array() the size 0.
   
   =>The second example creates an array of
   
   DENSE ARRAYS •
   
   A dense array is an array that has been created with each of its elements being assigned a specific value.
   
   •
   
   Dense arrays are used exactly in the same manner as other arrays.
   
   •
   
   Dense arrays are declared and initialized at the same time.
   
   ARRAY METHODS Join() – returns all elements of the array joined together as a single string. Reverse() – reverses the order of the elements in the array.
   
   EXAMPLE 3.9.1 JAVA SCRIPT PROGRAM FOR ARRAYS
   
   157
   
   <SCRIPT language = "JavaScript"> var sum,i; var n = prompt("Enter the no. elements in the array",""); var elements= new Array(n); for(i=0;i
   
   158
   
   159
   
   3.9.2 OPERATORS AND EXPRESSIONS IN JAVASCRIPT •
   
   +-*/
   
   •
   
   % - Modulus – remainder
   
   •
   
   ++ - Return the value then Increment
   
   •
   
   -- Return the value then Decrement
   
   LOGICAL OPERATORS && - Logical and || - Logical or ! Logical not
   
   COMPARISION OPERATORS •
   
   = = equal (perform type conversion before testing for equality.
   
   •
   
   = = = strictly equal (do not perform type conversion before testing for equality)
   
   STRING OPERATORS Currently Java Script supports only one string concatenation (+) operator.
   
   EXAMPLE “ab” + “cd” produces “abcd”
   
   ASSIGNMENT OPERATORS 1. 2. 3. 4. 5. 6.
   
   = += increments and assigns the value -= *= /= %= Takes the modulus of the variable on the left the %= operator using the value of the expression on its right
   
   160
   
   CONDITIONAL EXPRESSION - TERNARY OPERATOR & CONTROL STRUCTURES SYNTAX condition? value1:value2 If the condition is true, value1 is the result of the expression, Otherwise value2 is the result of the expression.
   
   THE DELETE OPERATOR delete marks[20]  deletes the 21st element of an array.
   
   3.9.3 CONDITIONAL CHECKING If(condition) { java script code }
   
   BUILT-IN FUNCTIONS IN JAVASCRIPT 1. eval()  converts a string expression to a numeric value
   
   USER DEFINED FUNCTIONS IN JAVASCRIPT function function_name(parameter1,parameter2…) { block of java script }
   
   161
   
   3.9.4 DIALOG BOXES Dialog boxes are used to display small windows. This is also used to get input from user.
   
   SYNTAX alert(“message”); alert(“Click here to continue”) prompt(“Enter your name”, name) 1. alert is only used to display some information 2. prompt is used to display information along with some input value 3. Confirm dialog box, causes program execution to halt until user action takes place. The user action can be either OK or CANCEL. OK – returns true CANCEL – returns false. Simple example <TITLE> This is a simple program <SCRIPT LANGUAGE = “JavaScript”> document.writeln(<“H1”> Welcome to Javascript programming “

   ”); /BODY>
   
   ARITHMETIC OPERATORS +
   
   -
   
   *
   
   /
   
   162
   
   % (modulus)
   
   3.9.5 JAVASCRIPT KEYWORDS break case else false in this while with
   
   new true
   
   continue delete do for function if null return typeof var
   
   switch void
   
   KEYWORDS THAT ARE RESERVED BUT NOT USED BY JAVASCRIPT catch enum super
   
   class export try
   
   const extends
   
   debugger finally
   
   default import
   
   3.9.6 INCREMENT AND DECREMENT OPERATORS SL NO
   
   Assignment operator
   
   Initial variable value
   
   Sample expression
   
   Explanation
   
   1 2 3 4 5 6
   
   += -= *= /= %= ++
   
   c=3 d=5 e=4 f=6 g = 12 Pre increment
   
   c+=7 d- = 4 e*=5 f /= = 3 g %= 9 ++a
   
   7
   
   ++
   
   Post increment
   
   a++
   
   8
   
   --
   
   Pre decrement
   
   --b
   
   9
   
   --
   
   Post decrement
   
   b--
   
   c=c+7 10 to c d=d–4 1 to d e=e*5 20 to e f=f/3 2 to f g = g %9 3 to g Increment a y 1, then use the new value in the expression Use the current value of a in the expression in which a resides, then increment a by 1 decrement a y 1, then use the new value in the expression Use the current value of a in the expression in which a resides, then decrement a by 1
   
   163
   
   Assigns
   
   3.9.7 MORE JAVA SCRIPT PROGRAMS PROGRAM 1 – Java Script program to read and printing the Text
   
   164
   
   JAVA SCRIPT PROGRAM FOR ADDING TWO NUMBERS <SCRIPT language = JavaScript> var tot1 = 0; var num1=0,num2=0; var num1 = parseInt(prompt("Enter the First Number", "Number1")); var num2 = parseInt(prompt("Enter the Second Number","number2")); document.write(num1); tot1 = num1 + num2;

   WELCOME TO JAVA SCRIPT PROGRAM

   <SCRIPT language = "JavaScript"> document.write("

   SUM " + tot1 +"

   ");
   
   165
   
   OUTPUT
   
   JAVA SCRIPT PROGRAM USING FOR LOOP TO PRINT SUM FROM STARTING NUMBER TO ENDING NUMBER <SCRIPT language = JavaScript>
   
   166
   
   var tot1 = 0; var num1=0,num2=0;i=0; var num1 = prompt("Enter the First Number", "Number1"); var num2 = prompt("Enter the Second Number","number2"); num1 = parseInt(num1); num2 = parseInt(num2); for(i=num1;i<=num2;i++) { tot1 = tot1 + i; }

   WELCOME TO JAVA SCRIPT PROGRAM

   <SCRIPT language = "JavaScript"> document.write("

   " + "SUM FROM " + num1 +" to " + num2 + " = " + tot1);
   
   167
   
   OUTPUT
   
   JAVA SCRIPT PROGRAM USING WHILE FOR LOOP TO PRINT SUM FROM STARTING NUMBER TO ENDING NUMBER
   
   168
   
   <SCRIPT language = JavaScript> var tot1 = 0; var num1=0,num2=0;i=0; var num1 = prompt("Enter the First Number", "Number1"); var num2 = prompt("Enter the Second Number","number2"); num1 = parseInt(num1); num2 = parseInt(num2); i = num1; while(i<=num2) { tot1 = tot1 + i; i++; } document.writeln("sum = " + tot1);

   WELCOME TO JAVA SCRIPT PROGRAM

   <SCRIPT language = "JavaScript"> document.write("

   " + "SUM FROM " + num1 +" to " + num2 + " = " + tot1);
   
   OUTPUT
   
   169
   
   JAVA SCRIPT PROGRAM USING ARRAY <SCRIPT language = "JavaScript"> var sum,i; var n = prompt("Enter the no. elements in the array",""); var elements= new Array(n); for(i=0;i
   170
   
   elements[i]=prompt("Enter the array elements",""); elements[i]=parseInt(elements[i]); } sum=0; for(i=0;i
   
   3.10 OBJECTS Java script communicates with web browser using object model. There are many number of objects available in Java Script that can be used to control and interact with the web browser. OBJECT HIERARCHY Window
   
   Document
   
   Anchor
   
   Button
   
   Navigator
   
   History
   
   Link
   
   Location
   
   Images
   
   Form
   
   Checkbox Radio Text Area Submit Hidden Text Password
   
   Reset
   
   Select
   
   SCOPE Scope or life refers to the range over which a variable, function or an object. A variable in java script will have value only with in the scope. It can not be referenced outside the function. PROPERTIES OF WINDOW OBJECT Properties Closed
   
   Meaning Returns true if the window is closed else returns Boolean value false.
   
   171
   
   Length Name Opener Parent
   
   Returns the number of frames in the current window Returns the name of a window Returns the name of the window from which it was created. The return value is String. Refers a window that contains a frameset
   
   METHODS OF WINDOW OBJECT Methods onBlur() onFocus() onError() onLoad() onUnload()
   
   Meaning Triggers when focus is removed from the window Triggers when focus is applied to the window Triggers when error occurs in the window Triggers when browser finishes loading a document into the window Triggers when user exists from the document within the window PROPERTIES OF WINDOW OBJECT
   
   The properties of window objects are 1. href 5. port
   
   2. protocol 6. path
   
   3. host 7. hash
   
   4. hostname 8. search.
   
   Methods Length() Back() Forward()
   
   METHODS OF HISTORY OBJECT Meaning Returns the number of entries in the history entity Helps the web browser to load the previous entry in history object. Helps the web browser to load the next entry in history object.
   
   Properties Current Length Previous Next
   
   PROPERTIES OF HISTORY OBJECT Meaning Contains the URL of the current history entity Contains the number of entities in history list Contains the URL of the previous history stack entity Contains the URL of the next history stack entity
   
   3.11 SIMPLE WEB APPLICATIONS SIMPLE WEB APPLICATION FOR STUDENT MARK LIST SIMPLE WEB APPLICATION FOR PAYSLIP GENERATION
   
   172
   
   Refer Class Note book and assignmet
   
   END OF UNIT III
   
   UNIT – IV: DYNAMIC HTML 4.1 Dynamic HTML – Introduction 4.2 Cascading Style Sheets (CSS)
   
   173
   
   4.3 Object Model and Collections 4.4 Event Model 4.5 Filters and Transition 4.6 Data Binding 4.7 Data Control 4.8 ActiveX Control 4.9 Handling of Multimedia Data
   
   4.1 DHTML – DYNAMIC HYPER MARKUP LANGUAGE •
   
   DHTML is a new and emerging technology that has evolved to meet the increasing demand for eye-catching and mind-catching web sites.
   
   •
   
   DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting Languages.
   
   HTML specifies a web page’s elements like table, frame, paragraph,
   
   bulleted list, etc. CSS can be used to determine an element’s size, color, position and a number of other features. •
   
   Scripting Languages (JavaScript and VBScript) can be used to manipulate the web page’s elements so that styles assigned to them can change in response to a user’s input.
   
   •
   
   The combined technology of HTML and CSS becomes DHTML.
   
   •
   
   Similarly the comined technology of HTML and Scripting Languages also becomes DHTML.
   
   4.2 CASDING STYLE SHEETS (CSS) •
   
   CSS are powerful mechanism for adding styles (e.g. Fonts, Colors, and Spacing) to web documents.
   
   •
   
   They enforce standards and uniformity throughout a web site and provide numerous attributes to create dynamic effects.
   
   •
   
   The advantage of a style sheet includes the ability to make global changes to all documents from a single location. Style sheets are said to cascade when they combine to specify the appearance of a page. The style assignment process is accomplished with the <STYLE>… tags.
   
   174
   
   SYNTAX: The attributes that can be specified to the <STYLE> tag are 1. Font Attributes 2. Color and Background attributes 3. Text Attributes 4. Border Attributes 5. Margin Attributes and 6. List Attributes.
   
   HOW TO INTRODUCE STYLE IN HTML PROGRAM? <STYLE Type = “text/css”> Predefined tag name {attribute name1:attribute value1; attribute name2:attribute value2; ……attribute name-n:attribute value-n} <STYLE> write the body of program
   
   EXAMPLE
   
   175
   
   <STYLE Type = “text/css”> h1{text-align:center} <STYLE>

   Example for CSS program

   Here the text “Example for CSS program” will be printed in center with bold effect. Note 1. Here the previous properties of

   will be over written, and it takes center effect. 2. Along with user defined tags the predefined tags can also be used.
   
   ATTRIBUTES OF STYLE TAG Style tag attributes are divided into 6 categories. They are
   
   1. Font Attributes 2. Color and Background attributes 3. Text attributes 4. Border attributes 5. Margin attributes 6. List Attributes (Contains only one attribute)
   
   FONT ATTRIBUTES Attribute Name Font-family
   
   Values A comma-delimited sequence of font family names (Serif, sanserif, cursive)
   
   176
   
   Font-style Font-size
   
   Normal, italic or oblique. A term that denotes absolute size (xx-small, x-small, small, medium, large, x-large, xx-large), relative size (larger, smaller), a number (of pixels),
   
   Font-weight
   
   percentage (of the parent element’s size. Normal, bold, lighter, or one of the nine numerical values (100,200 to 900)
   
   COLOR AND BACKGROUND ATTRIBUTES Attributes Color Background-
   
   Values Sets an element’s text-color- a color name or a color code Specifies the color in an element’s background. A color name or a color
   
   color code. Background- Sets the background image. A URL or none. image Backgroundrepeat
   
   Within the background image specified, sets up how the image repeats throughout the page.
   
   Repeat-x (repeats horizontally), repeat-y(repeats
   
   vertically), repeat(both), no-repeat.
   
   TEXT ATTRIBUTES Attributes text-decoration
   
   Values Adds decoration to an element’s text- none, underline, overline, line-
   
   vertical-align
   
   through, blink Determines an element’s vertical position. Baseline, sub, super, top, text-
   
   text-transform
   
   top, middle, bottom, text-bottom, also percentage of the element’s length. Applies a transformation to the text. Capitalize (puts the text into initial
   
   text-align text-indent
   
   caps), uppercase, lowercase or none. Aligns text with an element. Left, right, center, or justify can be given. Indents the first line of text. A percentage of the element’s width or a length.
   
   BORDER ATTRIBUTES
   
   Attributes
   
   Values
   
   177
   
   Border-style
   
   Solid, double, groove, ridge, inset, outset
   
   Border-color Border-width Border-top-
   
   A color name or color code Thin, medium thick or length Thin, medium thick or length
   
   width Border-bottom-
   
   Thin, medium thick or length
   
   width Border-left-width Thin, medium thick or length Border-rightThin, medium thick or length width Border-top Border-bottom Border-left Border-right Border
   
   Specifies width, color and style Specifies width, color and style Specifies width, color and style Specifies width, color and style Sets all the properties at once
   
   MARGIN RELATED ATTRIBUTES Attributes Margin-top Margin-bottom Margin-left Margin-right Margin
   
   Values Percent, length or auto Percent, length or auto Percent, length or auto Percent, length or auto Percent, length or auto
   
   LIST ATTRIBUTES Attributes List-style-type
   
   Values Disc, circle, square, decimal, lower-case, upper-roman, lower-roman, lower-alpha, upper-alpha, none
   
   THE UNITS OF MEASUREMENTS The attribute values related to number values can have the following measurements.
   
   178
   
   Unit name Em
   
   Abbreviation Em
   
   Explanation The height of a font
   
   Relative Yes
   
   Ex Pica Point Pixel Millimeter Centimeter Inch
   
   Ex Pc Pt Px Mm Cm In
   
   Height letter x in a font 1 pica is 12 points 1/72 of an inch One dot on a screen Printing unit Printing unit Printing unit
   
   Yes No No Yes No No No
   
   EXTERNAL STYLE SHEETS •
   
   External style sheets are composed of standard text, which consists of a series of entries, each composed of a selector and a declaration.
   
   •
   
   The selector indicates the HTML element(s) affected by the properties in the declaration.
   
   •
   
   These external styles are saved as a file with extension .css which can be linked, to a web page via the tag.
   
   Syntax NOTE: Like <STYLE> tag also should be given with in … tags.
   
   INLINE STYLE SHEETS 1. Inline styles are created and should be used immediately before creating a new STYLE; otherwise the style will not have any effect.
   
   179
   
   2. The style information can be added to individual HTML elements using the STYLE attribute, which is available for several HTML elements. The STYLE attribute is common to almost all tags. 3. Introduce STYLE attribute as given below,

   This is example for Inline Style Sheet

   
   
   EXAMPLE FOR STYLE SHEETS MAIN PROGRAM

   
   

   Main Menu

   ---

   
   1. Embeded Style Sheet(Cascading)
   
   2. Linked Style Sheet
   
   3. Inline Style Sheet
   
   

   ---

   
   
   180
   
   

   
   
   <style type = "text/css"> h1 {color:red; font-size:3em; font-family:Arial} h2 {color:blue; font-size:2em; font-family:Helvetica} h3 {font-style:Italic; font-weight:bold; color:green; font-size:2em} h4 {text-align:center} ul {list-style-type:disc; font-size:1em; color:brown; font-weight:bold}

   Panimalar Engineering College

   Nasarethpet, Poonamallee

   Chennai - 602 103

   ---

   No. of Courses Offered

   • IT
   • CSE
   • ECE

   ---

   Back to Main Menu

Panimalar Engineering College

Nasarethpet, Poonamallee

Chennai - 602 103

No. of Courses Offered

• IT
• CSE
• ECE

Back to Main Menu

Panimalar Engineering College

Nasarethpet, Poonamallee

Chennai - 602 103

---

No. of courses offered

• IT
• CSE
• ECE
• EEE

Back to Main Menu

Note: In Inline style sheet STYLE should be used before creating a new style, otherwise style will not have any effect. In any type of CSS program user can use predefined styles along with the user defined styles.

183

OUTPUT MAIN PROGRAM

184

EMBEDDED OR CASCADING STYLE SHEET

185

EXTERNAL OR LINKED STYLE STHEET

186

INLINE STYLE SHEET

4.3 OBJECT MODEL AND COLLECTIONS

187

•

The object model allows web authors to control the presentation of their pages and gives them access to all the elements on their web page.

•

The whole web page – elements, forms, frames, tables, etc – is represented in an object hierarchy.

•

Using scripting, an author is able to retrieve and modify any properties or attributes of the web page dynamically.

JAVA SCRIPT – OBJECTS •

Java script uses objects to perform many tasks and therefore is referred to as an object based programming language.

•

There are different objects in Java script

1. MATH OBJECT Method Abs( x ) Ceil( x ) Cos( x ) Exp( x ) floor( x ) log (x) max( x, y ) Min( x, y ) Pow( x, y ) round ( x ) sin ( x ) Sqrt ( x ) tan ( x)

Description Absolute value of x Rounds x to the smallest integer not less than x Trigonometric cosine of x (x in radians) Exponential method Rounds x to the largest integer not greater than x Natural logarithm of x (base e) Largest value of x and y Smaller value of x and y X raised to power y Rounds x to the closest integer Trigonometric sine of x (x in radians) Square root of x Trigonometric tangent of (x in radians)

Example abs ( 7.2 ) is 7.2, abs(-5.6) is 5.6 ceil( 9.2 ) is 10.0 cos ( 0.0 ) is 1.0 exp( 1.0 ) is 2.71828 floor( 9.2 ) is 9.0 log ( 2.7182 ) is 1.0 Max(10,40) Min(10,40) Pow(2,3) Round(20.456) Sin(2) Sqrt(25) Tan(1)

2. STRING OBJECT String can be assigned to a variable in a declaration. The declaration is

188

var color = “blue”

or var name = “peter”

Method

Description

charAt( index ) charCodeAt( index)

Returns a string containing the character at the specified index Returns the Unicode value of the character at the specified index. If there is no character at the index, returns NaN (Not a number) Concatenates its argument to the end of the string that invokes the method. Returns a string containing the portion of the string from index start through index end. If the end is not specified, the method returns a string from the end of the string. Splits the source string into an array of strings or tokens. Returns a string containing the characters from index start up to but not including index end in the source string. Converts uppercase into lowercase Converts lowercase into uppercase. Gives blinking, strike through, subscript and superscript respectively Trigonometric tangent of (x in radians)

concat ( string ) slice( start, end ) split ( string ) substr( start, end ) toLowerCase(), toUpperCase() Blink, strike, sub, sup tan ( x)

3. DATE OBJECT UTC – Coordinated Universal Time GMT – Greenwich Mean Time Method

Description

getdate() getUTCDate() getDay() getUTCDay() getFullYear() getUTCFullYear() getHours() getUTCHours() roUTCString() valueOf()

Returns a number from 1 to 31 representing the day of the month in local time or UTC. Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC Returns the year as a four digit number in ocal time of UTC. Returns a number from 0 to 23 representing hours since midnight in local time or UTC. Returns a string representation of the date and time in the form 19 sep 2001 The time in number of milliseconds since midnight, January 1, 1970

BOOLEAN AND NUMBER OBJECTS

189

Method toString( radix )

valueof() number.MAX_VALUE number.MIN-VALUE number.Nan number.NEGATIVE_INFINITY number.POSITIVE_INFINITY

Description Returns the string representation of the number. The optional radix argument (a number from 2 to 36) specifies the number’s base. For example, radix 2 results in the binary representation of the number, 8 represents the octal representation. Returns the numeric value This property represents the largest value that can be stored I a javascript program – approximately 1.79E+308 This property represents the smallest value that can be stored I a java script program – approximately 2.22E-308 This property represents not a number This property represents a value less than – Number.MAX_VALUE This property represents a value greater than – Number.MAX_VALUE

DOCUMENT OBJECT Method

Description

write( string ) writeln( string ) document.cookie

Writes the string to the HTML document as XHTML code Writes the string to the HTML document to a new line This property is a string containing the values of all the cookies stored on the user’s computer for the current document. This property is the date and time that this document was last modified.

Document.lastmodified

WINDOW OBJECT Method

Description

open( url, name, options )

Creates a new window with the URL of the window set to url, the name set to name, and the visible features set by the

190

prompt( prompt, default ) close() Blur() window.document window.closed window.opener

string passed in as option. Displays dialog box. Closes the current window and deletes its object from memory This method takes focus away from the window This property contains the document object representing the document currently inside the window Set to true/false if window is closed or not respectively Open the current window, if such a window exists.

COOKIES Cookies provide web developers with a tool for personalizing web pages. A cookie is a piece of data that is stored on the user’s computer to maintain information about the client during and between browser sessions.

OBJECT REFERENCING •

The simplest way to reference an element is by using the element’s id attribute.

•

The element is represented as an object, and its various XHTML attributes become properties that ca be manipulated by scripting.

EXAMPLE PROGRAM <Script Language = "JavaScript">

194

var elements = ""; function start() { for (var i = 0; i < document.all.length; i++) elements += "
" + document.all[ i ] . tagName; pText.innerHTML += elements; alert( elements ); }

Elements on this web page:

OUTPUT

DYNAMIC HTML - OBJECT MODEL AND COLLECTIONS

195

1. The Dynamic HTML Object Model gives web authors great control over the presentation of their pages by giving them access to all the elements on their web page. The whole web page –elements, forms, frames, tables, etc – represented in an object hierarchy. 2. The simplest way to reference an element is by its id attributes. The element is represented as an object, and its various XHTML attributes become properties that can be manipulated by scripting. 3. The innerText property of the object refers to the text contained in the element. 4. Changing the text displayed on screen is a Dynamic HTML ability called dynamic content. 5. Every element has its own all collection consisting of all the elements contained in the element.

4.4 DYNAMIC HTML – EVENT MODEL Dynamic HTML with the event model exists so that scripts can respond to user interactions and change the page accordingly. This makes web applications more responsive and user friendly and can reduce server load.

MORE DHTML EVENTS Event

Description

onbeforecut onbeforecopy onbeforepaste

Fires before a selection is cut to the clipboard Fires before a selection is copy to the clipboard Fires before a selection is paste to the clipboard

onbeforeupdate onafterupdate

Fires before a data source is updated Fires after a data source is updated

onrowenter,onrowexit,

Related to rows.

196

onrowsdelete,onrowsinserted onhelp, onkeydown, onkeyup ondbclick, ondrag, ondrop onchange

Fires help, keydown and keyup respectively Fires when a new change occurred

<script type = "text/javascript" for = "para" event = "onclick"> alert("Hai Clik performed");

Click on this button

197



OUTPUT

EVENT BUBBLING 1. Event bubbling is the process whereby events fired in child elements "bubble” Up their parser elements. 2. When a child event is fired, the event is first delivered to the child’s event handler, then to the parent's event handler. 3. If you intend to handle an event in a child element, you might need to cancel the bubbling of the event in the child element's event-handling code by using the cacelBubble property of the event object.

EXAMPLE FOR EVENT BUBBLING

198

<script type = "text/javascript"> function documentClick() { alert( "You clicked in the document" ); } function paragraphClick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelBubble = true; } document.onclick = documentClick;

Click here

Click here too!

OUTPUT

199

DYNAMIC STYLES – EXAMPLE PROGRAM Dynamic styles are used to change effect during run time.

200

<script type = "text/javascript"> function start() { var inputColor = prompt("Enter a color for the " + "background of this page", ""); document.body.style.backgroundColor = inputColor; }

Welcome to our web site

OUTPUT Since the background color is given as white the output is displayed as follows:

DYNAMIC STYLES – EXAMPLE 2 – for printing text in Big or normal font size

201

<style type = "text/css"> .bigText { font-size: 3em; font-weight: bold } .mediumText { font-size: 1.5em; font-weight: bold } .smallText { font-size: .75em } <script type = "text/javascript"> function start() { var inputClass = prompt( "Enter a className for the text " + "(bigText or smallText)", ""); pText.className = inputClass; }

Welcome to our web site

OUTPUT The input value can be either (bigText or smallText) If the input value is bigText, then the output is

202

If the input value is smallText, then the output is

OUTPUT

4.5 DYNAMIC HTML – FILTERS TRANSITIONS (Changeover, conversion, shift) •

Filters and transitions are specified with the CSS filter property.

•

Applying filters to text and images causes changes that are persistent.

•

Transitions are temporary: applying a transition allows you to transfer from one page to another with a pleasant visual effect, such as a random dissolve.

•

Filters and transitions do not add content to your pages – rather, they present existing content in an engaging manner to capture the user’s attention.

•

Each of the visual effects achievable with filters and transitions if programmable, so these effects can be adjusted dynamically by programs that respond to user-initiated events, such as mouse clicks and keystrokes.

FLIP - FILTERS – FLIPv AND FLIPh •

The flipv and fliph filters mirror text or images vertically and horizontally.



203

<style type = "text/css"> body { background-color: cyan } table { font-size: 3em; font-family:arial, sans-serif; background-color:pink; border-style: ridge} td { border-style: groove; padding: lex }

204

Text	Text
Text	Text

OUTPUT

fliph filter applied

filpv filter applied Both

4.6 DATA BINDING •

With data binding, data need to longer reside exclusively on the server.

•

Data can be maintained on the client, in a manner that distinguishes it from the XHTML markup on the page.

205

• •

Typically, data is sent to the client. All subsequent manipulations than take place on the data directly on the client, thus eliminating server activity and network delays. Once it is available on the client, the data can be sorted and filtered in various ways.

•

In data binding technology, data made on the client do not propagate (spread, broadcast) back to the server.

•

Once it is available on the client, the data can be sorted and filtered in various ways.

•

To bind external data to XHTML elements, Internet Explorer employs software capable of connecting the browser to live data sources. These are known as Data Source Objects (DSOs).

•

The most popular DSO is – the Tabular Data Control (TDC).

RECORDSET A recordset is simply a set of data or rows to be accessed by the program. It contains the following recordset object methods. 1. 2. 3. 4.

MoveNext – used to move the recordset to the next row. MovePrevious – used to move the recordset to the previous row. MoveFirst – used to move the recordset to the first record immediately. MoveLast – used to move the recordset to the last record immediately.

Note move previous and move next methods should be used before checking BOF(), EOF() methods respectively.

4.7DATA CONTROL 4.8ACTIVX CONTROL SAMPLE PROGRAM: <script> var rs=colors.recordset; function display() { recno.innerText="Record Number =" + rs.absolutePosition; test.style.color=rgbval.innerText; } function forward() { rs.moveNext(); if(rs.EOF) rs.moveFirst(); display(); } Color Name :<span id="rgbtext" datasrc="#colors" datafld="colorName">
Color Hex Value :<span id="rgbval" datasrc="#colors" datafld="ColorHexVal">
datafld="ColorHexVal">
<span id="recno" >

testing

testing

Binding to an Table

Binding to an Table