Vallurupalli Nageswara Rao Vignana Jyothi Institute of
Engineering &Technology
Department of Computer Science & Engineering
SUBJECT: Web Technologies
Subject Code: 18PC1IT07
Topic Name: HTML
III year-IIsem, sec- 4:
[Link]
Associate Professor
Email: gangappa_m@vnrvjiet
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 1
Agenda
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 2
JavaScript
❑ JavaScript is a light weight, interpreted and dynamic programming
language
❑ It allows client-side script to interact with the user and make the
dynamic pages
❑ JavaScript can be implemented with javascript statements that are
placed within the <script>…</script> HTML tags in a web page
❑ It is a case-sensitive language.
❑ JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 3
JavaScript provides 3 places to put the JavaScript code:
➢ within body tag
➢ within head tag
➢ external JavaScript file.
code between the body tag
<html>
<body>
<script type="text/javascript">
alert("Hello Javat-point");
</script>
</body>
</html>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 4
code between the head tag
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 5
External JavaScript file
➢ It provides code re-usability because single JavaScript file can be
used in several html pages.
➢ An external JavaScript file must be saved by .js extension.
➢ It increases the speed of the webpage.
[Link]
[Link]
<html>
function msg(){ <head>
<script type="text/javascript" src="[Link]"></script>
alert("Hello Javatpoint") </head>
; <body>
} <p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 6
JavaScript Comment
There are two types of comments in JavaScript.
[Link]-line Comment
[Link]-line Comment
1.<script> 1.<script>
2.// It is single line comment 2./* It is multi line comment.
[Link]("hello javascript"); [Link] will not be displayed */
4.</script> [Link]("example of javascript multiline
comment");
5.</script>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 7
JavaScript Variable
A JavaScript variable is simply a name of storage location.
There are two types of variables in JavaScript :
➢ local variable .
➢ global variable.
Correct JavaScript variables JavaScript local variable
[Link] x = 10; A JavaScript local variable is declared
[Link] _value=“CSE"; inside block or function.
<script>
function abc(){
var x=10;//local variable
}
</script>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 8
JavaScript global variable
A JavaScript global variable is accessible from any function.
<html>
<body>
<script>
var data=200; //global variable
function a(){
[Link](data);
}
function b(){
[Link](data);
}
a(); //calling JavaScript function
b();
</script>
</body>
</html>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 9
JavaScript Data Types
JavaScript provides different data types to hold different types
of values. There are two types of data types in JavaScript.
[Link] data type
[Link]-primitive (reference) data type
JavaScript is a dynamic type language, means we don't
need to specify type of the variable because it is dynamically
used by JavaScript engine.
[Link] a=40; //holding number
[Link] b="Rahul"; //holding string
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 10
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
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 11
JavaScript Data Types
JavaScript - String
String is a primitive data type in JavaScript. It must be enclosed in single
or double quotation marks.
Example: A string can also be treated like zero
"Hello World" index based character array.
'Hello World'
var str = 'Hello World’;
str[0] // H str[3] // l
str[1] // e str[4] // o
str[2] // l
[Link] // 11
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 12
JavaScript - String
String can be accessed using for loop.
<p id="p1"> </p>
<script>
var str = 'Hello World';
for(var i =0; i< [Link];i++)
[Link]("p1").innerHTML =
[Link]("p1").innerHTML + str[i];
</script>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 13
String-Concatenation
String can be concatenated using plus (+) operator in JavaScript.
var str = 'Hello ' + "World "
Include quotation marks inside string
Escape characters in JavaScript help inserting special characters in the
webpage without breaking the code. We use the backslash (\) character
to specify a special character.
Notation Meaning
\’ It adds a single quote in the page.
\” It adds a double quote in the page.
\n (Newline) It takes control to the next line on the page.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 14
String- quotes
JavaScript - Number
The Number type represents both integer and floating-point numbers
and has 3 symbolic values:
❑ +Infinity
❑ -Infinity
❑ NaN (Not-a-Number)
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 15
Boolean
The Boolean type represents a logical value that has two possible
values: true and false.
Null
The Null datatype in JavaScript only represents null
value ( non-existent or invalid object or address )
❑ It means we have defined a variable but have
not assigned any value yet, so value is absence.
❑ A null value evaluates to false in conditional
expression.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 16
undefined
Undefined is also a primitive value in JavaScript. A variable or an object has an undefined value
when no value is assigned before using it.
An undefined evaluates to false when used in
conditional expression.
Normally, we use undefined for checks like seeing
if a variable has a value assigned.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 17
Conditional statements
JavaScript supports the following forms of if..else statement −
❑ if statement
❑ if...else statement if (expression 1) {
❑ if...else if... statement. Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is
true
}
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 18
for loop
The syntax of for loop is JavaScript is as follows −
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
The For/In Loop var x;
for (x in person) {
text += person[x];
}
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 19
JavaScript Functions
❑ JavaScript function is a set of statements that performs some tasks or
do some computation and then returns the result to the user.
❑ It is a group of reusable code that you can use anywhere in the code.
❑ It helps you to divide a large program into small and manageable
functions.
❑ We used some functions like prompt() and write() in our previous
JavaScript programs.
❑ These are the built-in functions that JavaScript provides
syntax
function functionName(parameters)
{
//statements
}
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 20
JavaScript Functions
Function Invocation
The code inside the function will execute when "something"
invokes (calls) the function:
➢ When an event occurs (when a user clicks a button)
➢ When it is invoked (called) from JavaScript code
demo
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 21
JavaScript object
❑ The objects are quite different from JavaScript’s primitive data-
types(Number, String, Boolean, null and undefined ) in the sense that
while these primitive data-types all store a single value each (depending
on their types).
❑ Object is a non-primitive data type in JavaScript. It is like any other
variable, the only difference is that an object holds multiple values in
terms of properties and methods. Properties can hold values of primitive
data types and methods are functions.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 22
JavaScript object
❑ In JavaScript, an object is a standalone entity because there is no class
in JavaScript.
❑ In JavaScript, an object can be created in two ways:
[Link] literal
[Link] constructor
JavaScript Object by object literal
object={property1:value1,property2:value2.....propertyN:valueN}
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 23
JavaScript object
var emptyObject = {}; // object with no properties or methods
var person = { firstName: "Malige" }; // object with single property
// object with single method
var message = {
showMessage: function (val) {
alert(val);
}
};
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 24
JavaScript object
// object with properties & method
var person = {
firstName: “VNR",
lastName: “VJIET",
age: 15,
getFullName: function () {
return [Link] + ' ' + [Link]
}
};
Note : You must specify key-value pair in object for properties or methods.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 25
Access JavaScript Object Properties & Methods
You can access object properties in two ways:
1. [Link]
[Link]["propertyName"]
Demo
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 26
Object Constructor
The second way to create an object is with Object Constructor
using new keyword.
var person = new Object();
// Attach properties and methods to person object
[Link] = "Malige";
person["lastName"] = "Gangappa";
[Link] = function () {
return [Link] + ' ' + [Link];
};
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 27
JavaScript array
Array constructor
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 28
Array Literals
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 29
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 30
Return
The original array elements in reverse order.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 31
Math object
All methods and properties can be used without creating a Math object first.
The syntax for Math any methods is : [Link].(number)
[Link](x) Returns x rounded up to its nearest integer
[Link](x) Returns x rounded down to its nearest integer
[Link](x) returns if x is negative, null or positive
[Link](x, y) returns the value of x to the power of y
[Link](x) returns the square root of x
[Link](x) returns the absolute (positive) value of x
[Link]() and [Link]() can be used to find the lowest or highest value in a list of arguments:
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 32
Questions
Loop
1. Find all even numbers between start and end numbers
2. Determine the composite number
3. find the average of numbers between 1 and 10
If condition
1. Find the biggest of three numbers
2. Print the personality based on age
3. Print the student grade based on score in a test
1. JavaScript Program to Check Palindrome Number
2. JavaScript to print multiplication table
3. Demonstrate JavaScript Array indexOf() Method
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 33
String Object
The JavaScript string is an object that represents a sequence of characters. String
object wraps JavaScript's string primitive data type with a number of helper methods.
There are 2 ways to create string in JavaScript
[Link] string literal
[Link] string object (using new keyword)
1) By string literal
var stringName = "string value";
2) By string object (using new keyword)
var stringname=new String("string literal");
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 34
String Object
String Properties :
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 35
Examples
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 36
Regular Expression Object
❑ The RegExp ( Regular Expression ) is an Object to define a pattern for
searching or manipulating strings.
❑ A regular expression is a sequence of characters that forms a search
pattern.
❑ Regular expressions can be used to perform all types of text
search and text replace operations.
/pattern/attributes;
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 37
Syntax
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 38
Metacharacters
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 39
Metacharacters
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 40
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 41
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 42
Data validation
<form >
<input type = “text” name=“name” value=“”>
<input type = “text” name=“age” value=“”>
<input type =“submit” value=“submit”>
</form>
<script>
var name = [Link][0].elements[0].value; // extract the value
var age= [Link][0].elements[1].value; // data for age
</script>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 43
Date object
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 44
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 45
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 46
Questions
1. Write a JavaScript to print the current day and current month.
2. Write a JavaScript to greet a day…Good morning, Good
afternoon, Good evening.
3. JavaScript code to password 1 and password2 are the same or
not?
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 47
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 48
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 49
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 50
eval() Function
The keyword eval is an abbreviation for “evaluate.” The function essentially takes a string
with JavaScript code
eval('2 + 3 + 1'); // 6
The eval() method is not suggested to use in JavaScript since it
executes slower .
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 51
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 52
Window object methods
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 53
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 54
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 55
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 56
Object hierarchy
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 57
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 58
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 59
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 60
<script type="text/javascript">
function getcube(){
var number=[Link]("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 61
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 62
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 63
EVENTS
Examples of events
➢An HTML web page has finished loading
➢An HTML input field was changed
➢An HTML button was clicked
❑ JavaScript's interaction with HTML is handled through events that
occur when the user or the browser manipulates a page.
❑ Events are a part of the Document Object Model (DOM)
❑ Every HTML element contains a set of events which can trigger JavaScript
Code.
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 64
Syntax
HTML allows event handler attributes, with JavaScript code.
Syntax <element event='some JavaScript'>
Demo
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 65
Event types:
➢Mouse-related: mouse movement, button click, enter/leave element
➢Keyboard-related: down, up, press
➢Input field events :Input field changed, Form submitted
➢Miscellaneous:
✓ Page loaded/unloaded
✓ Image loaded
✓ Uncaught exception
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 66
Events
Attribute
(Event handler) Description
onblur Triggers when the window loses focus
onchange Triggers when an element changes
onclick Triggers on a mouse click
onkeydown Triggers when a key is pressed
onmousedown Triggers when a mouse button is pressed
onmousemove Triggers when the mouse pointer moves
onsubmit Triggers when a form is submitted
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 67
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 68
JavaScript Programs
Image Rollover Demo
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 69
Filters and transitions
Play vital role in giving the visual effect to web pages. CSS filters are used
to set visual effects to text, images, and other aspects of a webpage.
CSS Syntax
filter: none | invert() | drop-
shadow() | brightness() | saturate() | blur() | grayscale() | url();
The style of the text or image can be set using filter attribute. We can use
various functions such as blur(),shadow() and grayscale() to give text
effects.
Demo
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 70
END of JavaScript
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 71
Practice Questions
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 72
References
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 73
THANK YOU
Prepared by [Link] , Department of Computer Science & Engineering, VNRVJIET, Hyderabad May 4, 2021 74