Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Web Programming Notes

Uploaded by

mounika mounika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Web Programming Notes

Uploaded by

mounika mounika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

SCRIPTING

SCRIPTING:
Scripting allows you to turn a simple, static HTML page into a more
dynamic page. It makes it possible for users to interact with a website rather than
just look at the pages.

CLIENT SIDE AND SERVER SIDE SCRIPRING

Client-side scripting Server-side scripting

Source code is not visible to the user because


its output
Source code is visible to the user.
of server-sideside is an HTML page.

Its primary function is to manipulate and


Its main function is to provide the
provide access to the respective database as
requested output to the end user.
per the request.

In this any server-side technology can be used


It usually depends on the browser and it does not
and its version. depend on the client.

It runs on the user’s computer. It runs on the webserver.

There are many advantages linked


The primary advantage is its ability to highly
with this like faster.
customize, response
response times, a more interactive
requirements, access rights based on user.
application.

It does not provide security for


It provides more security for data.
data.

It is a technique used in web It is a technique that uses scripts on the


development in which scripts run webserver to produce a response that is
on the client’s browser. customized for each client’s request.

1
SCRIPTING

Client-side scripting Server-side scripting

It runs on the end-user’s


system. It runs on the web server

HTML, CSS, and javascript are


PHP, Python, Java, Ruby are used.
used.

No need of interaction with the


It is all about interacting with the servers.
server.

It runs on the end-user’s


It runs on the web server
system.

JAVA SCRIPT -OBJECTS


A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

JavaScript is template based not class based. Here, we don't create class to get the
object. But, we direct create objects.

In JavaScript, almost "everything" is an object.

 Booleans can be objects


 Numbers can be objects
 Strings can be objects
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects

Example program
<html>
<body>

2
SCRIPTING

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>
<p id="demo"></p>
<script>
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = person.firstName + " " +
person.lastName;
</script>
</body>
</html>
Output:

JavaScript Objects
Creating an object:

John Doe

JAVA SCRIPT NAMES

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names


(age, sum, totalVolume).

The general rules for constructing names for variables (unique identifiers)
are:

 Names can contain letters, digits, underscores, and dollar signs.


 Names must begin with a letter.

3
SCRIPTING

 Names can also begin with $ and _ (but we will not use it in this
tutorial).
 Names are case sensitive (y and Y are different variables).
 Reserved words (like JavaScript keywords) cannot be used as names.

JAVA SCRIPT LITERALS

JavaScript Literals are the fixed value 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 "WEB
PROGRAMMING" is a literal, any number like 7007 is a literal, etc.

JavaScript supports various types of literals which are listed below:

 Numeric Literal
 Floating-Point Literal
 Boolean Literal
 String Literal
 Array Literal
 Regular Expression Literal
 Object Literal

Numerical literals

 It can be expressed in the decimal(base 10), hexadecimal(base 16) or


octal(base 8) format.
 Decimal numeric literals consist of a sequence of digits (0-9) without a leading
0(zero).
 Hexadecimal numeric literals include digits(0-9), letters (a-f) or (A-F).
 Octal numeric literals include digits (0-7). A leading 0(zero) in a numeric literal
indicates octal format

JavaScript Numeric Literals Example

120 //decimal literal

021548 //octal literal

0*4567 // hexadecimal literal

4
SCRIPTING

JavaScript Floating-Point Literal

 It contains a decimal point(.)


 A fraction is a floating-point literal
 It may contain an Exponent.

JavaScript Floating-Point Literal Example

6.9989 //floating point literal

-602584 //negative floating point literal

JavaScript Boolean Literal

Boolean literal supports two values only either true or false.

EX: true //boolean literal

False //Boolean literal

JavaScript String Literal

A string literal is a combination of zero or more characters enclosed within a single( ')
or double quotation marks (").

"programming" // String literal

'students' // String literal

JavaScript Array Literal

 An array literal is a list of zero or more expressions representing array


elements that are enclosed in a square bracket([]).
 Whenever you create an array using an array literal, it is initialized with the
elements specified in the square bracket.

JavaScript Array Literal Example

var emp = ["aman","anu","charita"]; // Array literal

5
SCRIPTING

JavaScript Object Literal

It is a collection of key-value pairs enclosed in curly braces({}). The key-value pair is


separated by a comma.

JavaScript Object Literal Example

var games = {cricket :11, chess :2, carom: 4} // Object literal

OPERATORS AND EXPRESSIONS

Types of JavaScript Operators


JavaScript operators are symbols that are used to perform operations on operands.

There are different types of JavaScript operators:

 Arithmetic Operators
 Comparison(Realtional) Operators
 Bitwise operator
 Logical Operators
 Assignment operators
 Special operators

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic operations on the operands. The
following operators are known as JavaScript arithmetic operators.

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

6
SCRIPTING

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

JavaScript Comparison Operators


The JavaScript comparison operator compares the two operands. The comparison
operators are as follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators


The bitwise operators perform bitwise operations on operands. The bitwise operators
are as follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) = false

7
SCRIPTING

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) = false

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift with Zero (10>>>2) = 2

JavaScript Logical Operators


The following operators are known as JavaScript logical operators.

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators


The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

8
SCRIPTING

JavaScript Special Operators


The following operators are known as JavaScript special operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-else.

, 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.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.

<html>

<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>

var x;

9
SCRIPTING

x = 5;

document.getElementById("demo").innerHTML = x * 10;

</script>

</body>

</html>

Output

JavaScript Expressions
Expressions compute to values.

50

JAVASCRIPT STATEMENTS

A computer program is a list of "instructions" to be "executed" by a


computer.

In a programming language, these programming instructions are


called statements.

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML
element with id="demo"

<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>

10
SCRIPTING

</body>
</html>
OUTPUT

JavaScript Statements
In HTML, JavaScript statements are executed by the browser.

Hello Dolly.

Features of Javascript
Scripting

Javascript executes the client-side script in the browser.

Interpreter

The browser interprets JavaScript code.

Event Handling

Events are actions. Javascript provides event-handling options.

Light Weight

As Javascript is not a compiled language, source code never changes to byte


code before running time. Low-end devices can also run Javascript because of
its lightweight feature.

Case Sensitive

In Javascript, names, variables, keywords, and functions are case-sensitive.

Control Statements

Javascript has control statements like if-else-if, switch case, and loop. Users can
write complex code using these control statements.

11
SCRIPTING

Supports Functional Programming

Javascript functions can be an argument to another function, can call by


reference, and can assign to a variable.

Dynamic Typing

Javascript variables can have any value type. The same variable can have a
string value, an integer value, or any other.

Client-side Validations

Javascript client-side validations allow users to submit valid data to the server
during a form submission.

Platform Independent

Javascript will run in the same way in all systems with any operating system.

JavaScript Events
The change in the state of an object is known as an Event. In html, there are various
events which represents that some activity is performed by the user or by the browser.
When javascript code is included in HTML, js react over these events and allow the
execution. This process of reacting over the events is called Event Handling

Mouse events:

Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the

mouseout onmouseout When the cursor of the mouse leaves an eleme

mousedown onmousedown When the mouse button is pressed over the el

mouseup onmouseup When the mouse button is released over the e

12
SCRIPTING

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Performed Event Handler Description

Focus onfocus When the user focuses on an element

Submit onsubmit When the user submits the form

Blur onblur When the focus is away from a form element

Change onchange When the user modifies or changes the value of a form element

Window/Document events

Event Performed Event Handler Description

Load onload When the browser finishes the loading of the page

Unload onunload When the visitor leaves the current webpage, the browser unloads

Resize onresize When the visitor resizes the window of the browser

CLICK EVENT Example


<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">

13
SCRIPTING

function clickevent()
{
document.write("This is JavaTpoint");
}
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>

output

JavaScript Events
[who is this?]

MouseOver Event

<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
{
alert("This is JavaTpoint");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

14
SCRIPTING

output

Javascript Events
Keep cursor over me
(if you keep cursor on keep cursor over me we get the msg as This is java
Tpoint)

Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
</script>
</body>
</html>

Output
JavaScript Events
Enter something here

If we try to enter text into textbox we will get the msg as [Pressed a key]

JAVASCRIPT WINDOWS
Window is the object of browser, it is not the object of javascript.

Methods of window object


The important methods of window object are as follows:

15
SCRIPTING

Method Description

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.

setTimeout() performs action after specified time like calling function, evaluating expressions
etc.

Example of alert() in javascript


It displays the alert dialog box.it has msg and ok button

1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Alert Box");
4. }
5. </script>
6. <input type="button" value="click" onclick="msg()"/>
Output of the above example
[click]
If we click on the button click we will get the dialog box with the message as
Hello alert box and ok button
Example of confirm() in javascript

It displays the confirm dialog box. It has message with ok and cancel buttons.

1. <script type="text/javascript">
2. function msg(){
3. var v= confirm("Are u sure?");
4. if(v==true){
5. alert("ok");
6. }
7. else{

16
SCRIPTING

8. alert("cancel");
9. }
10.
11. }
12. </script>
13.
14. <input type="button" value="delete record" onclick="msg()"/>
Output of the above example
[delete record]
If we click on delete record button we will get the dialog box as “Are u sure?”
message with ok and cancel buttons

Example of prompt() in javascript

It displays prompt dialog box for input. It has message and textfield.

1. <script type="text/javascript">
2. function msg(){
3. var v= prompt("Who are you?");
4. alert("I am "+v);
5.
6. }
7. </script>
8.
9. <input type="button" value="click" onclick="msg()"/>

Output of the above example


[click]
If we click on click button we get a dialog box with message who are you? and
empty text box to write on it
If you write some text on it as wp we get message as iam wp with ok button.

Example of open() in javascript

It displays the content in a new window.

1. <script type="text/javascript">
2. function msg(){

17
SCRIPTING

3. open("http://www.vmtw.in/);
4. }
5. </script>
6. <input type="button" value="javatpoint" onclick="msg()"/>
Output of the above example
[javatpoint]
If we click on button javatpoint we redirect to vmtw page

Example of setTimeout() in javascript

It performs its task after the given milliseconds.

1. <script type="text/javascript">
2. function msg(){
3. setTimeout(
4. function(){
5. alert("Welcome to Javatpoint after 2 seconds")
6. },2000);
7.
8. }
9. </script>
10.
11. <input type="button" value="click" onclick="msg()"/>
Output of the above example

[click]

If we click on click button we get the dialog box as welcome to javatpoint after 2
seconds.

DOCUMENTS
The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is


the root

element that represents the html document. It has properties and methods. By the
help of

document object, we can add dynamic content to our web page.;

18
SCRIPTING

Properties of document object


properties of document object that can be accessed and modified by the document
object.

Methods of document object


We can access and change the contents of document by its methods.

The important methods of document object are as follows:

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline character

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

19
SCRIPTING

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

document.write: document.write() is a simple way to add content to a web


page using JavaScript

<html>

<head>

<title>document.write Example</title>

</head>

<body>

<script type="text/javascript">

document.write("Hello,");

document.write("this is a simple example using document.write().");

</script>

</body>

</html>

Output: Hello, this is a simple example using document.write().

document.writeln(); The writeln() method is identical to the write()


method, with the addition of writing a newline character after each
statement.
<html>

<head>

<title>document.writeln Example</title>

</head>

<body>

<script type="text/javascript">

document.writeln("Hello,");

document.writeln(" this is a simple example using document.writeln().");

</script>

20
SCRIPTING

</body>

</html>

Ouput: hello,
This is a example using document.writeln().

getElementById()

The document.getElementById() method returns the element of specified id.

<html>
<head>
<body>

<h1 id=”first”> This is h1 tag</h1>


<p>this is paragraph</p>
<script>
Let x=document.getElementByid(“first”)
Document.write(x)

</script>
<body>
</html>

Output: This is h1 tag

getElementsByName()
The document.getElementsByName() method returns all the element of specified name.
<html>
<head> <title> getElementsByName</title></head>

<body>
<div name=”special”>
<h2>This is heading</h2>
<p>This is paragraph</p>

21
SCRIPTING

</div>
<script>
Let x=document.getElementByName(“special)

Document.write(x)
</script>
</body>
</html>
Output:

This is heading
This is paragraph

getElementsByClassName():The document.getElementsByClassName() method returns


all the element of specified classname.
<html>
<head> <title> getElementsByClassName</title></head>
<body>
<div name=”special”>

<h2>This is heading</h2>
<p>This is paragraph</p>
</div>
<div>
<h2>This is heading</h2>

<p>This is paragraph</p>
</div>
<script>
Let x=document.getElementByClassName(“special)
Document.write(x)

</script>
</body>
</html>

22
SCRIPTING

Output:

This is heading
This is paragraph

This is heading
This is paragraph

getElementsByTagName()
It returns all the elements having the given tag name
<html>
<head> <title> getElementsByTagName</title></head>
<body>
<div name=”special”>
<h2>This is heading</h2>
<p>This is paragraph</p>
</div>
<div>
<h2>This is heading</h2>

<p>This is paragraph</p>
</div>
<script>
Let x=document.getElementByTagName(h2))
Document.write(x)

</script>
</body>
</html>

Output: This is heading


This is heading

23
SCRIPTING

FRAMES
Frames in HTML are used to divide your browser window into more than one
section in which every phase can load a separate HTML report and a group of
frames within the browser window is referred to as a frameset.
<html>

<body>
<frameset cols="*,*,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</body>

</html>
OUTPUT:

Example 2: In the following example, just change the cols to rows in


the <frameset> tag. The codes for “frame1.html”,”frame2.html”,”frame3.html” are
given before the examples.
html>

<body>
<frameset rows="*,*,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</body>

</html>

24
SCRIPTING

OUTPUT:

DATATYPES
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the
data type. It can hold any type of values such as numbers, strings etc.

JavaScript primitive data types


There are five types of primitive data types in JavaScript. They are as follows:

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

25
SCRIPTING

JavaScript non-primitive data types


The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

Typeof :inorder to find a type of particular variable we have to use typeof


keyword.

<html>

<head><title> example to find datatype of variable</title></head>

<body>

<script>

Var a,b,c;

A=10;

B=3.14;

C=”students”;

Var d=true;

Document.write<”datatype of a is”,type of a>

Document.write<”datatype of b is”,type of a>

Document.write<”datatype of c is”,type of a>

Document.write<”datatype of d is”,type of a>

</script>

</body>

26
SCRIPTING

</html>

BUILTIN FUNCTIONS
Like any other scripting language Javascript also has its own built in functions. These built in
functions also known as global functions.

you can use these function with any Javascript built in object such as String , Number, Date,
RegExp, Array, Boolean and Math. Javascript's all built in object support these functions.

ISNaN(): predefined global function in JavaScript and it is used to check whether a given value
is an illegible number or not

Eval() : it is used to evaluate (execute) an expression

Parseint() : used to convert a string to the integer

Number() function: converting values to number using Number() function

STRING() function: String function is predefined global function in JavaScript, it is used to


convert an object to the string.

ISNaN():

<html>
<head>
<title>JavaScipt Example</title>
</head>
<body>
<script>
var num1 = 10;
var num2 = parseInt("Hello");
document.write("num1: " + num1 + "<br>");
document.write("num2: " + num2 + "<br>");
//checking illegal value using isNaN() function
if(isNaN(num1))
document.write("num1 is an illegal number <br>");
else
document.write("num1 is a legal number <br>");

if(isNaN(num2))
document.write("num2 is an illegal number <br>");
else
document.write("num2 is a legal number <br>");

27
SCRIPTING

</script>
</body>
</html>
output: num1: 10
num2: NaN
num1 is a legal number
num2 is an illegal number

eval() function:

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
<script>
var num1 = 100;
var num2 = 200;
var num3 = eval("num1 + num2"); //add num1 and num2
var num4 = eval("num3 + 100"); //add num3 and 100
document.write("num3: " + num3 + "<br>");
document.write("num4: " + num4 + "<br>");
</script>
</body>
</html>

Output:

num3: 300
num4: 400

parseInt():

<html>

<head><title>parseint function</title></head>

<script>
var str1 = "123"; //decoimal string
var str2 = "12.23"; //float string
var str3 = "123 456 789" //multiple Numbers
var str4 = " 123 "; //string contains leading & trailing spaces
var str5 = "123456 is my password"; //string contains Number in

28
SCRIPTING

starting
var str6= "My password is 123456"; //string contains Number in
ending
//parsing & pritning the values
document.write("Number value of str1: " + parseInt(str1) + "<br>");
document.write("Number value of str2: " + parseInt(str2) + "<br>");
document.write("Number value of str3: " + parseInt(str3) + "<br>");
document.write("Number value of str4: " + parseInt(str4) + "<br>");
document.write("Number value of str7: " + parseInt(str5) + "<br>");
document.write("Number value of str8: " + parseInt(str6) + "<br>");
</script>
output
Number value of str1: 123
Number value of str2: 12
Number value of str3: 123
Number value of str4: 123
Number value of str5: 123456
Number value of str6: NaN

Number() function:

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
<script>
var a = "10";
var b = "10 20";
var c = "1234 Hello";
var d = "Hello 1234";
var e = true;
//converting values to number using Number() function
document.write("Number(a) = " + Number(a) + "<br>");
document.write("Number(b) = " + Number(b) + "<br>");
document.write("Number(c) = " + Number(c) + "<br>");
document.write("Number(d) = " + Number(d) + "<br>");
document.write("Number(e) = " + Number(e) + "<br>");

</script>

29
SCRIPTING

</body>
</html>

Out put:
Number(a) = 10
Number(b) = NaN
Number(c) = NaN
Number(d) = NaN
Number(e) = 1
String() function:

<title>JavaScipt Example</title>
</head>
<body>
<script>
var a = "10";
var b = "10 20";
var c = "1234 Hello";
var d = "Hello 1234";
var e = true;
var f = new Date();
//converting values to string using String() function
document.write("String(a) = " + String(a) + "<br>");
document.write("String(b) = " + String(b) + "<br>");
document.write("String(c) = " + String(c) + "<br>");
document.write("String(d) = " + String(d) + "<br>");
document.write("String(e) = " + String(e) + "<br>");
document.write("String(f) = " + String(f) + "<br>");
</script>
</body>
</html>
Output:
String(a) = 10
String(b) = 10 20
String(c) = 1234 Hello
String(d) = Hello 1234
String(e) = true
String(f) = Sat Feb 02 2019 23:03:12 GMT+0530 (India Standard Time)

30
SCRIPTING

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:

window.alert("hello javatpoint");

is same as

alet(“hello javapoint”);

The window object is supported by all browsers. It represents the browser's


window.

Even the document object (of the HTML DOM) is a property of the window
object

The document object represents your web page.

If you want to access any element in an HTML page, you always start with
accessing the document object.

History:

he history object contains the URLs visited by the user (in the browser
window).

The history object is a property of the window object.

The history object is accessed with:

window.history or just history

screen:

31
SCRIPTING

The screen object contains information about the visitor's screen.

navigator object :

The navigator object contains information about the browser.

The navigator object is a property of the window object.

The navigator object is accessed with:

window.navigator or just navigator

location:

the location object contains information about the current URL.

The location object is a property of the window object.

The location object is accessed with:

window.location or just location

veritfing forms
It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.

JavaScript provides facility to validate the form on the client-side so data processing
will be faster than server-side validation. Most of the web developers prefer JavaScript
form validation.

Through JavaScript, we can validate name, password, email, date, mobile numbers and
more fields.

In this example, we are going to validate the name and password. The name can’t be empty
and password can’t be less than 6 characters long.

1. <script>
2. function validateform(){
3. var name=document.getElementByid(“name”);
4. var password=document.getElementByid(“password”);
5.
6. if (name==null || name==""){
7. alert("Name can't be blank");
8. return false;

32
SCRIPTING

9. }else if(password.length<6){
10. alert("Password must be at least 6 characters long.");
11. return false;
12. }
13. }
14. </script>
15. <body>
16. <form name="myform" method="post" action="abc.jsp" onsubmit="return v
alidateform()" >
17. Name: <input type="text" name="name"><br/>
18. Password: <input type="password" name="password"><br/>
19. <input type="submit" value="register">
20. </form>

Output:

Name: [ ]
Password: [ ]

[submit]

HTML5

HTML 5 is the fifth and current version of HTML.


Features:
 It has introduced new multimedia features which supports both audio and
video controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it
to a new location.
 Geo-location services- It helps to locate the geographical location of a
client.
 Web storage facility which provides web application methods to store data
on the web browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 New Added Elements in HTML 5:

33
SCRIPTING

 <article>: The <article> tag is used to represent an article. More


specifically, the content within the <article> tag is independent from the
other content of the site (even though it can be related).
 <aside>: The <aside> tag is used to describe the main object of the web
page in a shorter way like a highlighter. It basically identifies the content
that is related to the primary content of the web page but does not
constitute the main intent of the primary page. The <aside> tag contains
mainly author information, links, related content and so on.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to
the figure element in a document.
 <figure>: The <figure> tag in HTML is used to add self-contained
content like illustrations, diagrams, photos or codes listing in a document.
It is related to main flow, but it can be used in any position of a document
and the figure goes with the flow of the document and if it is removed it
should not affect the flow of the document.
 <header>: It contains the section heading as well as other content, such as
a navigation links, table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author
information, copyright information, carriers etc.). The footer tag is used
within body tag. The <footer> tag is new in the HTML 5. The footer
elements require a start tag as well as an end tag.
 <main>: Delineates the main content of the body of a document or web
app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is
used to highlight the part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in
HTML documents. Websites typically have sections dedicated to
navigational links, which enables user to navigate the site. These links can
be placed inside a nav tag.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is
initially hidden but could be displayed if the user wishes to see it. This tag
is used to create interactive widget which user can open or close it. The
content of details tag is visible when open the set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary
for the <details> element. The <summary> element is used along with the
<details> element and provides a summary visible to the user. When the
summary is clicked by the user, the content placed inside the <details>
element becomes visible which was previously hidden. The <summary>
tag was added in HTML 5. The <summary> tag requires both starting and
ending tag.
 <time>: The <time> tag is used to display the human-readable data/time.
It can also be used to encode dates and times in a machine-readable form.
The main advantage for users is that they can offer to add birthday

34
SCRIPTING

reminders or scheduled events in their calendars and search engines can


produce smarter search results.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It
differentiates a text from other text that may be formatted in different
direction. This tag is used when a user generated text with an unknown
direction.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is
used to define the position within the text which is treated as a line break
by the browser. It is mostly used when the used word is too long and there
are chances that the browser may break lines at the wrong place for fitting
the text.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in
the HTML files. It can be used with input tag, so that users can easily fill
the data in the forms using select the data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair
generator field in a form. The purpose of <keygen> element is to provide a
secure way to authenticate users. When a form is submitted then two keys
are generated, private key and public key. The private key stored locally,
and the public key is sent to the server. The public key is used to generate
client certificate to authenticate user in future.
 <output>: The <output> tag in HTML is used to represent the result of a
calculation performed by the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It also defines
how much work is done and how much is left to download a task. It is not
used to represent the disk space or relevant query.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web
page using JavaScript. It can be used to draw paths, boxes, texts, gradient
and adding images. By default, it does not contain border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video
player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.
Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful
websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.
CSS3: CSS3, also known as Cascading Style Sheets Level 3, is a more advanced version
of CSS

35
SCRIPTING

Advanced Animations.
Rounded Corners
Text and Box Shadows.

HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The graphic above is created with <canvas>.

It shows four elements: a red rectangle, a gradient rectangle, a multicolor


rectangle, and a multicolor text.

The HTML <canvas> element is used to draw graphics on a web page.

The graphic above is created with <canvas>.

It shows four elements: a red rectangle, a gradient rectangle, a multicolor


rectangle, and a multicolor text.

A canvas is a rectangular area on an HTML page. By default, a canvas has


no border and no content.

<canvas id="myCanvas" width="200" height="100"></canvas>

Website creation using tools

There are many types of tools available that web designers can use, such as

 Website builders that don’t require any coding experience


 Web design tools that include code editor and visual design software
 Design tools that help in making prototypes.

1. Wix: Wix is a website-building tool that does not require coding to build websites. If
you want to build a website but do not have a lot of experience in it, Wix could be one
of the best options.
36
SCRIPTING

2. Squarespace : Squarespace is another website-building tool that offers more than 100
website templates to start with
3. Shopify: Shopify is a digital storefront platform that helps businesses create their
digital stores.
4. WordPress: WordPress is the most known Content Management System (CMS) that
can help you build a website quickly.
5. Webflow: Webflow is another website designer tool that doesn’t require coding to
build websites. If you don’t want to get involved in coding, Webflow is one of the
tremendous website-building platforms. Also, you can add site elements using the
drag-and-drop feature to make a customized design layout.
6. Adobe Dreamweaver: Adobe Dreamweaver is a commercial coding engine that allows
you to view a real-time preview of the updated content as soon as you edit the code.
7. Figma: Figma is an online web designing tool that enables users to edit and
prototype website designs. This tool empowers the collaborative effort of the web
designing team. You can collaborate in brainstorming ideas and create prototypes and
share them with other collaborators for feedback using the same tool.
8. Nova: Nova is an updated version of Panic, a website development application used
for the Mac Operating System. This website layout design tool aims to reduce the
number of secondary tools needed to develop a web application like CSS editor, FTP
client, and version control system. This, in turn, improves the workflow and
functionality of your development team.
9. Google Web Designer: Google Web Designer is a website designing platform that
helps build interactive and appealing webpage designs based on HTML 5. The tool
also ensures that the webpage designs and motion graphics are running as expected
and can be viewed on various digital devices like computers and smartphones.
10. Adobe XD: Canva is the most popular design platform. This tool can help you to
create visuals for your website
11. InVision Studio: One of the most critical steps in website designing is prototyping.
These prototypes act as a temple for the real website. Adobe XD is a vector-based
prototyping tool that enables users to visualize their designs and evaluate the user
experience.

37
SCRIPTING

<html>
<head><title> syudents</title>
</head>
<body>
<img src=https://www.washingtonpost.com/rf/image_1484w/2010-
2019/WashingtonPost/2015/07/27/Obituaries/Images/04863016-
784.jpg?t=20170517style="display: width="500" height="600">
<P>some of queots of him</p>

<a href="file:///C:/Users/vmtw/Desktop/queots.html"> visit queots</a>

</body>
</html>

Queots page:
<html>
<body>
<h1>“Dream is not that which you see while sleeping it is something that does
not let you sleep.”</h1>
<h2>"Look at the sky. We are not alone. The whole universe is friendly to us
and conspires only to give the best to those who dream and work." </h2>
<h1>"If you want to shine like a sun, first burn like a sun." </h1>
<h3>"To succeed in your mission, you must have single-minded devotion to
your goal."</h3>
<h1>"If four things are followed - having a great aim, acquiring knowledge,
hard work, and perseverance - then anything can be achieved."</h1>
<p>"Climbing to the top demands strength, whether it is to the top of Mount
Everest or to the top of your career."</p>
<h2>"Don't take rest after your first victory because if you fail in second, more
lips are waiting to say that your first victory was just luck."</h2>

38
SCRIPTING

<h3>"To become 'unique,' the challenge is to fight the hardest battle which
anyone can imagine until you reach your destination."</h3>
<h2>"Never stop fighting until you arrive at your destined place - the unique
you. Have an aim in life, continuously acquire knowledge, work hard, and have
perseverance to realise the great life."</h2>
<ul>
<li>“Determination is the power that sees us through all our frustrations and
obstacles. It helps us in building our willpower which is the very basis of
success.” </li>

<li>“A big shot is a little shot who keeps on shooting, so keep trying.”― A.P.J.
Abdul Kalam, Wings of Fire</li>
<li>“The country doesn't deserve anything less than success from us. Let us aim
for success".” ― A.P.J. Abdul Kalam, Wings of Fire</li></ul>
<ol><li>“Great dreams of great dreamers are always transcended.” ― Dr. A.P.J.
Abdul Kalam</li>
<li>“Be more dedicated to making solid achievements than in running after
swift but synthetic happiness,” ― A.P.J. Abdul Kalam, Wings of Fire</li>
<li>“To succeed in life and achieve results, you must understand and master
three mighty forces— desire, belief, and expectation." Iyadurai” ― A.P.J. Abdul
Kalam, Wings of Fire</li>
<li>“I reminded myself that the best way to win was to not need to win. The
best performances are accomplished when you are relaxed and free of doubt. I”
― A.P.J. Abdul Kalam, Wings of Fire</li>
<li>“it does not matter how large or small your sphere of activity is, what
counts finally is the commitment that you bring to the job that has been
ordained for you in this life.” ― A.P.J. Abdul Kalam, My Journey: Transforming
Dreams into Actions</li></ol>
</body>
</html>

Output:

39
SCRIPTING

some of queots of him

visit queots0

40
SCRIPTING

41

You might also like