Scribd
Upload
73 views29 pages

HTML, CSS, and JavaScript Basics

The document provides an overview of HTML, CSS, and JavaScript, detailing their roles in web development. It covers HTML structure, elements, attributes, and formatting, as well as CSS styling methods and the basics of JavaScript, including data types, variables, operators, and control statements. Additionally, it discusses the differences between scripting and programming languages, along with server-side and client-side scripting.

Uploaded by

srichand2095
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
73 views29 pages

HTML, CSS, and JavaScript Basics

The document provides an overview of HTML, CSS, and JavaScript, detailing their roles in web development. It covers HTML structure, elements, attributes, and formatting, as well as CSS styling methods and the basics of JavaScript, including data types, variables, operators, and control statements. Additionally, it discusses the differences between scripting and programming languages, along with server-side and client-side scripting.

Uploaded by

srichand2095
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

UNIT-1

HTML, CSS & JAVA SCRIPT


What is HTML?
HTML is Hyper Text Markup Language used for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content

Structure of HTML Document


<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Element
An HTML element is defined by a start tag, some content, and an end tag:
Syntax: <tagname> Content goes here... </tagname>
Example: <h1>My First Heading</h1>
HTML Attributes
All HTML elements can have attributes.
Attributes provide additional information about elements
Example: <body text="red" bgcolor="yellow">
Web Page Designing using HTML
Headings tag: HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
Example: <h1>My First Heading</h1>

Paragraph tag: The HTML <p> element defines a paragraph.


Example: <p>The World Wide Web (abbreviated WWW or the Web) is an information
space where documents and other web resources are identified by Uniform Resource
Locators (URLs), interlinked by hypertext links, and can be accessed via the
Internet.</p>

Horizontal Ruler: The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.

Style Attribute: Setting the style of an HTML element, can be done with the style attribute.
Example: <h1 style = "color:blue;"> This is a heading </h1>

HTML Formatting Tags/Elements:


<b> or <strong> - Bold/Important text
<i> or <em> - Italicized/Emphasized text
<small> - Smaller text
<del> or <s> or <strike> - Strike through
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<center> - Aligns the text to center

HTML Comments: <!-- Write your comments here -->


Hyperlinks: You can click on a link and jump to another document.
Example: <a href = "url"> Click Here </a>

Images: Images can improve the design and the appearance of a web page.
Example: <img src="[Link]" width=”400px” height=”400px” alt="Italian Trulli"/>

Tables: HTML tables allow web developers to arrange data into rows and columns. The
<table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header
is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
Example
<table border="2">
<caption> III-IT STUDENTS DETAILS</caption>
<tr>
<th>SNO</th>
<th>SNAME</th>
<th>PERCENTAGE</th>
</tr>
<tr>
<td>1</td>
<td>SHIVA</td>
<td>96</td>
</tr>
<tr>
<td>1</td>
<td>SHIVA</td>
<td>96</td>
</tr>
</table>
Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered List: starts with the <ul> tag. Each list item starts with the <li> tag.
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered List: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Frames
An HTML iframe is used to display a web page within a web page.
Helps us to view multiple pages at once.
Example:
<iframe name ="f1" src="[Link]" width="450" height="400"> </iframe>

Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
The <input> Element:
<input type="text"> : Displays a single-line text input field
<input type="radio"> : Displays a radio button (for selecting one of many choices)
<input type="checkbox"> : Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> : Displays a submit button (for submitting the form)
<input type="button"> : Displays a button.
<input type="reset"> : Displays a reset button.

Select Element: defines a drop-down list


Example:
<select id="cars" name="cars">
<option value="volvo"> Volvo </option>
<option value="saab"> Saab </option>
<option value="fiat"> Fiat </option>
<option value="audi"> Audi </option>
</select>

TextArea Element: The <textarea> element defines a multi-line input field (a text area):
Example:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

HTML-5 CANVAS:
• This element is used to draw graphics, on the fly, via with JavaScript.
• It is a container for graphics. You must use JavaScript to actually draw the graphics.
• It has several methods for drawing paths, boxes, circles, text, and adding images.
Example: Creating a rectangular canvas area and adding JavaScript code to draw a line on it.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
</body>
</html>

CSS (Cascading Style Sheets)


• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors
are to be used, different displays for different devices and screen sizes, and much more.

CSS can be added to HTML documents in 3 ways:


1. Inline Styles - by using the style attribute inside HTML elements
Example: <h1 style = "color:blue;"> A Blue Heading </h1>
2. Internal Styles / Using Style tag / Using Style Element
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

3. External Styles - by using a <link> element to link to an external CSS file


[Link]
body { background-color: blue;}
h1 { color: blue;}
p { font-size: 30px;}

[Link]
<html>
<head>

<link rel="stylesheet" href="[Link]">


</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Scripting Languages
What is a Scripting Language ?
➢ A scripting language is interpreted. It is translated into machine code when the code is
run, rather than beforehand.
➢ In contrast to programming languages that are compiled first before running, scripting
languages do not compile the file and execute the file without being compiled.
➢ Scripts are often utilized to create dynamic web applications.
➢ Server-Side Scripting Languages and Client-Side Scripting Languages are the two types
of scripting languages.
➢ Python,PHP, and Perl are examples of server-side scripting languages, while JavaScript is
the greatest example of a client-side scripting language.
➢ These languages are often developed with the goal of communicating with other
programming languages.

Examples of scripting languages:


bash: Default command interpreter on most GNU/Linux systems.
Ruby: It is a scripting and pure object-oriented programming language that enables developers
to create innovative software.
Node js: Is open-source and cross-platform language used for Writing network applications in
JavaScript.
Perl: It is a scripting as well as dynamic programming language with innovative features.

Advantages of scripting languages:


Easy learning: Scripting languages are easy to learn & code.
Fast editing: Uses small amount of data structures & variables, so easy to edit.
Interactivity: Make web pages more interactive.
Rich Functionality: Contain different libraries.

Disadvantages of scripting languages


• It enables users to view and code that may be prohibited by some companies.
• These languages did not compile the file and interpret it directly, which need to install an
interpreter or separate program by the users before running the script.
• Compared with a compiled program, scripting languages may be slow in some situations.
Scripting Languages Vs Programming Languages
Scripting Languages Programming Languages
It is based on the Interpreter. It is based on the compiler.
It does not require to compile the file, can run It requires to compile the file first.
directly.
It is used for combining existing components. It is used for developing from scratch.
It runs inside the program and is dependent on It is independent of a parent program.
it.
It has no file type. It contains .exe file type.
It provide limited support data types, graphic It has rich support for graphic design, data
design, and user interface design. types, and user interface design.
Users can easily write and use it. It can be difficult to use and write.
It needs a host. It does not need a host as it is self-executable.
It requires low maintenance. It requires high maintenance.
Examples: VB Script, JavaScript, Perl, Ruby, Examples: C, C++, JAVA, COBOL, and
and PHP. Pascal.

Server-side Scripting Vs Client-side Scripting


➢ Server-side scripting languages run on a web server. When a client sends a request, the
server responds by sending content via HTTP.
➢ Client-side scripting run on the web browser(client).
➢ Benefit of client-side scripts is that they can reduce demand on the server, allowing web
pages to load faster.
➢ Benefit of server-side scripts is they are not viewable by the public.

Server-side Script Client-side Script


It helps work with the back end. It helps work with the front end.
It doesn’t depend on the client. It is visible to the users.
It runs on the web server. un on the client browser.
It helps provide a response to every request that It helps in sending a request to the server.
comes in from the user/client.
This is not visible to the client side of the Visible to the client.
application.
It requires the interaction with the server for the It doesn’t interact with the server to process
data to be process. data.
Examples: PHP, [Link], Python ColdFusion, Examples: HTML, CSS, JavaScript.
Ruby on Rails.
It is considered to be a secure way of working Not secure
with applications.
It can also be used to provide dynamic websites. Used to reduce load on the server
Java Script
• JavaScript is a dynamic scripting language.
• It is lightweight and most commonly used as a part of web pages, whose implementations
allow client-side script to interact with the user and make dynamic pages.
• It is an interpreted programming language with object-oriented capabilities.

Datatypes:
There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type

Primitive data types


Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all

Non-Primitive data types


Data Type Description
Object represents instance through which we can access
members
Array represents group of similar values
RegExp represents regular expression

Variables:
• JavaScript is a dynamic type language, means you don't need to specify type of the
variable because it is dynamically assigned by JavaScript engine.
• You need to use “Var” or “let” here to specify the data type. It can hold any type of
values such as numbers, strings etc.
• Variables declared by var keyword are scoped to the immediate function body (hence
the function scope) while let variables are scoped to the immediate enclosing block
denoted by { } (hence the block scope).
Example:
var a = 40; //holding number
var b = "Rahul"; //holding string

Operators

1. Arithmetic Operators: +, -, *, /, %, ++, --


Example: 10+20 // result = 30

2. Comparison Operators: = =, != , >, <, >=, <=


Example: 10!=20 // result = true

Example: 20<=10 // result = false

3. Logical Operators: && (Logical AND), || (Logical OR), ! (Logical NOT)


Example: (10<20 && 20==33) // result = false

4. Bitwise Operators: & (Bitwise AND), | (BitWise OR), ^ (Bitwise XOR), ~ (Bitwise Not), <<
(Left Shift), >> (Right Shift) and >>> (Right shift with Zero)
Example: 10<<2 // result = 40
5. Assignment Operators: = (Simple Assignment ), += , −=,*= , /= and %=

Example: var a=10; a+=20; // result a =30


6. Conditional Operator (?:):
Example: var result = (marks >= 40) ? 'pass' : 'fail';
7. Special Operators:
Operator Description
, Comma Operator allows multiple expressions to
be evaluated as single statement.
Delete Delete Operator deletes a property from the
object.
In In Operator checks if object has the given
property
Instanceof checks if the object is an instance of given type
New creates an instance (object)
Typeof checks the type of object.
Expression:
• Any unit of code that can be evaluated to a value.
• Since expressions produce values, they can appear anywhere in a program where
JavaScript expects a value such as the arguments of a function invocation.
Example: 10+15

Literals:
• JavaScript Literals are the fixed values that cannot be changed, you do not need to
specify any type of keyword to write literals.
• Literals are often used to initialize variables in programming, names of variables are
string literals.
• A JavaScript Literal can be a numeric, string, floating-point value, a boolean value or
even an object.
• In simple words, any value is literal, if you write a string "Studytonight" is a literal, any
number like 7007 is a literal, etc.

“ if ” statement
The if statement is the fundamental control statement that allows JavaScript to make decisions
and execute statements conditionally.
Syntax:
if (expression) {
Statement(s) to be executed if expression is true
}

“ Switch ” Statement
The objective of a switch statement is to give an expression to evaluate and several different
statements to execute based on the value of the expression. The interpreter checks each case
against the value of the expression until a match is found. If nothing matches, a default condition
will be used.
Syntax
switch (expression)
{
case Label1: statement(s)
break;
case Label2: statement(s)
break;
default: statement(s)
}

Iterative Statements
while:
to execute a statement or code block repeatedly as long as an expression is true
Syntax:
while (expression)
{
Statement(s) to be executed if expression is true
}

do...while
Syntax:
do
{
Statement(s) to be executed;
} while (expression);

for
for (initialization; test condition; iteration statement)
{
Statement(s) to be executed if test condition is true
}
Functions
• A function is a group of reusable code which can be called anywhere in your program.
• This eliminates the need of writing the same code again and again.
• It helps programmers in writing modular codes.
• Functions allow a programmer to divide a big program into a number of small and
manageable functions.
Function Syntax:
function functionName([arg1, arg2, ...argN])
{
//code to be executed
}

Functions – Example Program


<html>
<head>
<script type = "text/javascript">
function sayHello()
{
alert("Hello, Welcome to Js-Functions");
[Link]("Hello, Welcome to Js-Functions");
}
</script>
</head>
<body>
<script>
sayHello();
</script>
</body>
</html>
Passing Parameters to a Functions
Finding Factorial – using Functions:
<html>
<head>
<script type="text/javascript">
function fact( n )
{
var i, f = 1;
for( i=1 ; i <= n ; i++ )
f = f*i ;
alert( "Factorial=" + f );
}
</script>
</head>
<body>
<script>
var n = parseFloat( prompt("Enter a Number:") );
fact( n );
</script>
</body>
</html>

Temparature Converter: Celsius to Fahrenheit & Fahrenheit to Celsius


<html>
<head>
<script>
function ctof( tempc )
{
var tempf = ( tempc * 1.8 ) + 32 ;
alert("Temparature in Fahrenheit is : " + tempf );
}
function ftoc(tempf)
{
var tempc = ( tempf - 32 ) / 1.8 ;
alert( "Temparature in Celsius is : " + tempc );
}
</script>
</head>
<body>
<script>
var t = parseFloat( prompt("Enter Temparature in Celsius:") );
ctof( t );
t = parseFloat( prompt("Enter Temparature in Fahrenheit:") );
ftoc( t );
</script>
</body>
</html>

Java Scripts Events


• JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
• Example for Events: webpage page loads, user clicks a button, pressing any key, closing
a window, resizing a window, etc.
Common Events
1. onchange: An HTML element has been changed
2. onclick: The user clicks an HTML element
3. onmouseover: The user moves the mouse over an HTML element
4. onmouseout: The user moves the mouse away from an HTML element
5. onkeydown: The user pushes a keyboard key
6. onload: The browser has finished loading the page
7. onfocus: An element got the focus.
8. onblur: An element lost it focus.

Event: onclick
<html>
<head>
<script type = "text/javascript">
function sayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>

Events: onblur & onfocus()


<html>
<head>
<script>
function sum()
{
var x, y, z ;
x = parseInt( [Link] );
y = parseInt( [Link] );
z=x+y;
[Link] = z ;
}
function sub()
{
var x , y , z ;
x = parseInt( [Link] );
y = parseInt( [Link]);
z=x–y;
[Link] = z ;
}
</script>
</head>
<body>
<form name="form1">
Enter first no: <input type="text" name="t1"/> <br>
Enter second no:<input type="text" name="t2" onblur="sum()"/> <br>
Sum: <input type="text" name="t3"/> <br>
Sub: <input type="text" name="t4" onfocus="sub()"/>
</form>
</body>
</html>
Event: onsubmit
<html>
<head>
<script>
function validate()
{
if( [Link]() = = "" )
{
alert('username cant be empty');
return false;
}
if( [Link]() = = "" )
{
alert('password cant be empty');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="f1" action="[Link]" onsubmit = " return validate() ">
Enter UserName: <input type="text" name="t1"> <br>
Enter password: <input type="password" name="t2"> <br>
<input type="submit" value="submit">
</form>
</body>
</html>
Events: onmouseover & onmouseout
<html>
<body>
<img src = "[Link]"
width = "400px"
height = "400px"
alt = "ROSE FLOWER"
onmouseover = " [Link][0].src = '[Link]' "
onmouseout = " [Link][0].src = '[Link]' "/>
</body>
</html>

Arrays
• The Array object lets you store multiple values in a single variable.
• It stores a fixed-size sequential collection of elements of same type.
• An array is used to store a collection of data, but it is often more useful to think of an
array as a collection of variables of the same type.
Example:
var fruits = [ "apple", "orange", "mango"]);
or
var fruits = new Array( "apple", "orange", "mango" );
or
var fruits = new Array();
fruits[0] = "apple";
fruits[1] = "orange";
fruits[2] = "mango";

Methods:
1. concat(): Returns a new array comprised of this array joined with other array.
Example: var arr1 = ["C","C++","Python"];
var arr2 = ["Java","JavaScript","Android"];
var result = [Link](arr2);
2. indexOf(): Returns the first index of an element within the array equal to the specified value,
or -1 if none is found.
Example: var arr = ["C","C++","Python","C++","Java"];
var result = [Link]("C++");
3. pop(): Removes the last element from an array.
Example: [Link]()
4. shift(): Removes the first element from an array.
Example: [Link]()
5. push(): Adds one or more elements to the end of an array.
Example: [Link]("JQuery");
6. unshift(): Adds one or more elements to the front of an array.
Example: [Link](“JQuery”)
7. reverse(): Reverses the order of the elements of an array.
Example: [Link]()
8. sort(): Sorts the elements of an array
Example: [Link]()
9. slice(): Extracts a section of an array and returns a new array.
Example: var arr = ["AngularJS","[Link]","JQuery","Bootstrap"]
var result = [Link](1,2);

JavaScript Objects
String Object
The String object lets you work with a series of characters; it wraps Javascript's string primitive
data type with a number of helper methods.
Example: var str = "shiva"; or var str = new String("shiva");
Methods:
[Link](): Returns the character at the specified index.
Example: var str = "Javatpoint";
[Link]( [Link](4) );
2. concat(): Combines the text of two strings and returns a new string.
Example: var x = "Javatpoint";
var y = ".com";
[Link]( [Link](y) );
3. toLowerCase(): Returns the calling string value converted to lower case.
Example: var str = "JAVATPOINT";
[Link]( [Link]() );
4. toUpperCase(): Returns the calling string value converted to uppercase.
5. indexOf(): Returns the index within the calling String object of the first occurrence of the
specified value, or -1 if not found.
Example: var web = "Learn JavaScript on Javatpoint" ;
[Link]( [Link]('a') );
6. lastIndexOf(): It provides the position of a char value present in the given string by searching
a character from the last position.
7. replace(): It replaces a given string with the specified replacement.
Example: var str = "Javatpoint" ;
[Link]( [Link]("tpoint","Script") );
8. substr(): It is used to fetch the part of the given string on the basis of the specified starting
position and length.
Example: var str = "Javatpoint" ;
[Link]( [Link](0,4) );
9. substring(): It is used to fetch the part of the given string on the basis of the specified index.
Example: var str = "Javatpoint";
[Link]( [Link](0,4) );
10. trim(): It trims the white space from the left and right side of the string.
Math Object
• The math object provides you properties and methods for mathematical constants and
functions.
• All the properties and methods of Math are static and can be called by using Math as an
object without creating it.
Methods:
1. abs(): Returns the absolute value of a number.
Example: [Link]( [Link](-4) )
2. ceil(): Returns the smallest integer greater than or equal to a number.
Example: [Link]( [Link](7.2) ); // 8
3. floor(): Returns the largest integer less than or equal to a number.
Example: [Link]( [Link](7.2) ); // 7
4. round(): Returns the value of a number rounded to the nearest integer.
Example: [Link]( [Link](7.2) ); // 7
5. exp(): It returns the exponential form of the given number.
Example: [Link]( [Link](1) ); // 2.718281828459045
6. log(): Returns the natural logarithm (base E) of a number.
Example: [Link]( [Link](5) ); // 1.6094379124341003
7. max(): Returns the largest number.
Example: [Link]( [Link](22,34,12,15) );
8. min(): Returns the smallest of zero or more numbers.
9. pow(): Returns base to the exponent power, that is, base exponent.
Example: [Link]( [Link](2,3) );
10. random(): Returns a pseudo-random number between 0 and 1.
Example: [Link]( [Link]() )
11. sqrt(): Returns the square root of a number.
Example: [Link]([Link](16))
12. sin(): Returns the sine of a number.
13. tan(): Returns the tangent of a number.
14. cos(): Returns the cosine of a number..

Date Object:
• The Date object is a datatype built into the JavaScript language.
• Date objects are created with the new operator.
Methods:
1. getDate(): It returns the integer value between 1 and 31 that represents the day for the
specified date.
Example: var d = new Date() ;
[Link]( [Link]() ) ;
2. getDay(): It returns the integer value between 0 and 6 that represents the day of the week
Example: [Link]( [Link]() );
3. getFullYear(): Returns the year of the specified date.
4. getHours(): It returns the integer value between 0 and 23 that represents the hours
5. getMilliseconds(): It returns the integer value between 0 and 999 that represents the
milliseconds
6. getMinutes(): It returns the integer value between 0 and 59 that represents the minutes
7. getMonth(): It returns the integer value between 0 and 11 that represents the month
8. getSeconds(): It returns the integer value between 0 and 60 that represents the seconds

Boolean Object
• JavaScript Boolean is an object that represents value in two states: true or false.
• You can create the JavaScript Boolean object by Boolean() constructor as given below.
Boolean b = new Boolean(value);
• The default value of JavaScript Boolean object is false.
Methods
toSource(): returns the source of Boolean object as a string.
toString(): converts Boolean into String.
valueOf(): converts other type into Boolean.
Number Object
• The JavaScript number object enables you to represent a numeric value.
• It may be integer or floating-point.
var n = new Number(value);
Methods:
isInteger() It determines whether the given value is an integer or not.
parseFloat() It converts the given string into a floating point number.
parseInt() It converts the given string into an integer number.
toExponential() It returns the string that represents exponential notation of the given number.
toPrecision() It returns the string representing a number of specified precision.
toString() It returns the given number in the form of string.

Browser Object Model


• The Browser Object Model (BOM) is used to interact with the browser.
• The default object of browser is window, means you can call all the functions of window
by specifying window or directly. For example:
[Link]("hello javatpoint"); or alert("hello javatpoint");

window object
• The window object represents a window in browser.
• An object of window is created automatically by the browser.
Methods of window object
alert() displays the alert box containing message with ok button.
confirm() displays the confirm dialog box containing message with ok and cancel button.
prompt() displays a dialog box to get input from the user.
open() opens the new window.
close() closes the current window.
document object ( Document Object Model)
• When html document is loaded in the browser, it creates a hierarchical tree structure with
all its elements.
• The document object is the root element.
• The document object represents the whole html document
• DOM allows us to dynamically access and update the content, structure, and style of a
document.
• It is the object of window. So can access as [Link] or document.
Properties:
1. bgcolor: indicates the background color of the document
2. fgcolor: indicates foreground color(text color)
3. anchors[]: an array containing references to all named anchors(locations).
4. forms[]: an array of the forms contained in the current document
5. images[]: an array containing references to all images in the current document
6. link[]: an array containg referenes to all the links
7. title: the title of the document as defined between <title></title>
8. url: the url of the current document object

Methods:
write("string") writes the given string on the doucment.
writeln("string") writes the given string on document with newline character at end
getElementById() returns the element having the given id value.
getElementsByName() returns all the elements having the given name value.
getElementsByTagName(): returns all the elements having the given tag name.

Accessing field value by document object


[Link](“input_field_name”);
OR
[Link]("input_field_tagname");
History Object
• The history object represents an array of URLs visited by the user.
• By using this object, you can load previous, forward or move to any particular page.
• The history object is the window property, so it can be accessed as [Link] Or
history
Properties:
Length: returns the length of the history URLs.
Methods:
forward() loads the next page.
back() loads the previous page.
go() loads the given page number.
Examples
[Link](); //for previous page
[Link](); //for next page
[Link](2); //for next 2nd page
[Link](-2); //for previous 2nd page

Navigator Object
• It can be used to get browser information such as browser name, version, supported mime
types.. etc.
• The navigator object is the window property, so it can be accessed by:
[Link] Or navigator
Properties:
appName: returns the name of the browser
appCodeName: returns internal name of the browser
appVersion: returns the version
cookieEnabled: returns true if cookie is enabled otherwise false
userAgent: returns the appName plus appVersion
mimeTypes[]: returns the array of mime types.
platform: returns the platform e.g. Win32.
Form Validations
validation for --- “username” field:
<html>
<head>
<script>
function validate()
{
var u = [Link];
if( [Link] == 0 )
alert('user name cant be empty');
else if ( [Link] < 8 )
alert('user name should be atleast 8 characters');
else
{

var re1 = /^[A-Za-z]\w+$/ ;


if( ! [Link](re1) )
alert('Invalid Valid User Name');
else
alert('Valid User Name');
}
}
</script>
</head>
<body>
<form name="form1">
Enter User Name: <input type="text" name="t1" size="20"/> <br>
<input type="submit" value="CHECK" onClick="validate()"/>
</form>
</body>
</html>

Validation for ---- “Contact Number” field


var c = [Link]; // t2 -> contact number field name
if ( [Link] == 0 )
alert('plese enter contact number');
else if( [Link] !=10 )
alert('phone no should be exactly 10 digits');
else
{

var re3 = /^[\d]{10}$/ ;


if ( ! [Link](re3) )
alert('invalid phone number');
}

Validation for --- “mail id” field


var e = [Link]; // t3 -> mail id field name
if ( [Link] == 0 )
alert('plese enter your mail id');
else
{

// Example 1: shiva@[Link] then /^\w+@\w+\.\w{2,3}$/


// Example 2: shiva@[Link] then /^\w+@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// Example 3: shiva-rama-krishna@[Link] used below

var re4 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;

if ( ![Link](re4) )
alert('invalid mail id');
}

You might also like