[go: up one dir, main page]
Scribd
Upload
12 views114 pages

WT-Module-2 Part-1

The document provides an extensive overview of JavaScript, including its history, syntax, data types, operators, control statements, and functions. It explains how JavaScript is used for creating dynamic web content and outlines key concepts such as variables, arrays, and the Document Object Model (DOM). Additionally, it includes code examples and exercises for practical understanding of JavaScript programming.

Uploaded by

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

WT-Module-2 Part-1

The document provides an extensive overview of JavaScript, including its history, syntax, data types, operators, control statements, and functions. It explains how JavaScript is used for creating dynamic web content and outlines key concepts such as variables, arrays, and the Document Object Model (DOM). Additionally, it includes code examples and exercises for practical understanding of JavaScript programming.

Uploaded by

nandiniravula17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 114

1

Dontha Madhusudhana
Rao
Department of Computer Science &
Engineering
2

User Interface
Design

JavaScript
What is JavaScript ?
 Brendan Eich first developed JavaScript in May
1995. The language, formerly known as
Mocha, later modified to LiveScript, and is
now known simply as JavaScript, was created
to be used on the client-side of websites,
enabling the addition of dynamic and
interactive components to static HTML texts.
 making it responsive to events like the
movement of the mouse, mouse click on a
certain HTML element, a button click, etc.,
using which we can improve the user
experience.
 JavaScript is also being used widely in game
development and Mobile application
development.

 The programs in this language are


called scripts. They can be written right in a
web page’s HTML and run automatically as
the page loads.

 Scripts are provided and executed as plain


text. They don’t need special preparation or
compilation to run.
JavaScript Language Syntax

 JavaScript has its own syntax and


programming style.

 Syntax of a language defines rules of


writing the code in that language, what is
the correct way and what is not.
A semicolon at the end of every statement (is
Optional)

Semicolons are used to terminate the JavaScript


code statements.

In JavaScript, statements are generally followed


by a semicolon(;) which indicates termination of
the statement.

However, it is not necessary to use a


semicolon(;) at the end of the statement.
JavaScript White Spaces and Line Breaks

JavaScript interpreter ignores the tabs, spaces,


and newlines that appear in the script, except
for strings.
JavaScript Case Sensitivity

JavaScript is a case sensitive language,


which means all the keywords, function
names, variable names or identifiers should
be typed with the consistent casing of
letters.
JavaScript Comments

Comments refer to the text or code in a


program that is ignored at the time of
executing the program. Comments are used
to provide additional information in the code.
And it is considered as good practice to add
comments to your code.
// This is an single line comment and it will not be executed

/*
This is a multiline comment and everything written
inside this block will not be executed.
*/
JavaScript Statements

Statements are known as the instructions in


any programing language, these statements
are set to be executed by the computer as a
computer program.

JavaScript code is nothing but a list of these


programming statements, these statements
are collections of values, operators,
keywords, and comments.
Where to put JavaScript in
a HTML Document ?
JavaScript in <head> or <body>

You can place any number of scripts in an


HTML document.

Scripts can be placed in the <body>, or in


the <head> section of an HTML page, or in
both.
In HTML, JavaScript code is inserted
between <script> and </script> tags.
External JavaScript
External scripts are practical when the same
code is used in many different web pages.

JavaScript files have the file extension .js

To use an external script, put the name of the


script file in the src (source) attribute of a
<script> tag:
<script src="myScript.js"></script>
Document Object Model
JavaScript Object

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


In real life, a car is an object.

 All cars have the same properties, but the


property values differ from car to car.
 All cars have the same methods, but the
methods are performed at different times.
Document Object Model
It is the object of window

 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.
Properties of document object properties of
document
object that can
be accessed
and modified
by the
document
object
Methods of document object
Method Description
write("string") writes the given string on the document

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
getElementsByClassName( ) returns all the elements having the given
class name
Output in JavaScript

We can get JavaScript Output in 4 simple and


different ways on a webpage

1. Using document.write( ) method

2. Using Alert Box

3. By logging on the Console

4. Using innerHTML property


<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script>
document.write("This is the text written using JavaScript.") ;

</script>
</body>
</html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script>
window.alert("This is an alert message.") ;
</script>
</body>
</html>
<html>
<head>
<title>JavaScript</title>
<script>
console.log(“Madhu");
</script>
</head>
<body>

</body>
</html>
JavaScript Variables
Variables

Variables are containers for storing data


(storing data values)

Declare a JavaScript Variable:

1. Using var
2. Using let
3. Using const
Rules for Variable name
Variable names cannot contain spaces.

The first letter of the variable can be [a-z, A-


Z], dollar sign ($) or underscore(_)

Variable names are case sensitive.

We can not use reserved words as the name of


the variables in JavaScript.
var x = 5; let x = 5;
var y = 6; let y = 6; let carName = “BMW";
var z = x + y; let z = x + y;

const price1 = 5;
const price2 = 6;
let total = price1 + price2;
JavaScript Data Types
JavaScript Primitive Data
Types
var str = "Ferari F60";
let str1 = 'Volvo S60';
String Data Type
let x = true;
var y = false;
Boolean Data Type
var x = 45;
var y = 45.90;
Number Data Type var z = -10;
JavaScript Composite Data types

 Object data type

 Array data type

 Function data type


JavaScript Special Data types

 Undefined Data type: When a variable is just


declared and is not assigned any value, it
has undefined as its value.
var a;

 Null Data type: Null data type is used to


represent no value. The Null datatype means,
the variable has been defined but it contains no
value.
var a = null;
JavaScript Operators
 Arithmetic Operators
 Assignment Operators
 Comparison (Relational) Operators
 Logical Operators
 Bitwise Operators
 String Operators
 Ternary Operator
Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
Division
++ Increment
-- Decrement
Assignment Operators

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
Comparison (Relational) Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Logical Operators

Operator Description
&& Logical
AND
|| Logical OR
! Logical Not
Bitwise Operators

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
String Operators

Operator Name Example


+ Concatenate “str1” + “str2”
Concatenate
+= str1 += “str2”
Assignment
Ternary Operator

condition ? value if true : value if false

Example:
let result = (10 > 0) ? true : false;
JavaScript Control Statements
<html>
<body>
<script>
let a = 8;
if(a < 8)
{
document.write("Number is less than 8");
}
else if (a = 8)
{
document.write("Number is equal to 8");
}
else {
document.write("Number is greater than 8");
}
</script>
</body>
</html>
<html>
<body>
<script>
for(let a = 0; a < 10; a++)
{
document.write("Current value : " + a);
document.write("<br />");
}
</script>
</body>
</html>
<html>
<head>
<script>
let a = 9;
while (a <= 10)
{
document.write("while executed <br/>");
a++;
}
</script>
</head>
<body>
</body>
</html>
<html>
<body>
<script>
let a = 10;
do
{
document.write("do executed <br/>");
a++;
}
while(a < 12)
</script>
</body>
</html>
<html>
<head>
<script>
let a = 1;
switch (a)
{
case 1: alert('case 1 has been executed');
break;
case 2:
alert("case 2 has been executed");
break;
default:
alert("default case executed");
}
</script>
</head>
</html>
Write a JavaScript program to determine if a
number is even or odd

Write a JavaScript program to determine if a


number is prime or not

Write a JavaScript program to find the factorial


of a given number

Write a JavaScript program to find the given


number is Armstrong or not
Write a JavaScript Program to print the following
pattern.
1 54321 1
22 4321 12
333 321 123
4444 21 1234
5555 1 12345
5

Write a JavaScript program to accept a


number as input and print the sum of its
digits
JavaScript Arrays
JavaScript Array is also like a data type that is
used to store one or more than one value of a
similar type or different types together

It's like a container which is used to store


values in a single variable. We can use an array
to store values of string type, or integer type,
or an object or any other valid data type in
JavaScript, or everything together.
In JavaScript, arrays are actually implemented
as objects with a special length property and
integer-like keys that act as indices.

The keys do not have to be contiguous or


ordered, meaning that you can have "holes" or
“missing indices” in the array.
// empty array
let fruits = [ ];

// Array having elements


let fruits = ["mango","apple","orange","guava"];

var fruits = [ ];
fruits[0] = "apple";
fruits[1] = "banana";
fruits[3] = "orange";
<html>
<head>
<script>

let fruits = ["mango","apple","orange","guava"];

document.write(fruits.length);

</script>
</head>
</html>
<html>
<head>
<script>
var fruits = [ ];
fruits[0] = "apple";
fruits[1] = "banana";
fruits[3] = "orange";
alert(fruits.length);
</script>
</head>
</html>
<html>
<head>
<script>
var fruits = [ ];
fruits[0] = "apple";
fruits[1] = "banana";
fruits[3] = "orange";
document.write (fruits[2]);
</script>
</head>
</html>
<html>
<head>
<script>
var fruits = [ ];
fruits[0] = "apple";
fruits[1] = "banana";
fruits[3] = "orange";
document.write (fruits);
</script>
</head>
</html>
JavaScript Functions
JavaScript Functions, just like in any other language,
is a set of statements that are used to perform a
specific task, like adding two numbers, finding the
square of a number, or any user-defined task.
Structure of a JavaScript function
function keyword
function name

function fname(parameter-1, parameter-2,...parameter-n)


{
statement 1; function parameter or input
statement 2;
statement 3; function body with the main logic

return output;
} giving output using return keyword
<html>
<head>
<script>
function add(a, b)
{
document.write(a+b);
}

add(8,8);

</script>
</head>
</html>
<html>
<head>
<script>
function add(a, b)
{
document.write(a+b);
}

add(7004,“Madhu”);

</script>
</head>
</html>
<html>
<head>
<script>

function add(a, b)
{
return a+b;
}
let result = add(8,8);
document.write(result);

</script>
</head>
</html>
<html>
<head>
<script>
function add(a, b)
{
document.write(a+b);
}
let a = parseInt(prompt("Enter number 1"));
let b = parseInt(prompt("Enter number 2"));
add(a,b);
</script>
</head>
</html>
<html>
<head>
<script>
function msg()
{
alert("Web Technologies");
}
</script>
</head>
<body>
<form>
<input type="button" onclick="msg()" value="call function">
</form>
</body>
</html>
Write a JavaScript conditional statement to find
the sign of product of three numbers using
functions

Display an alert box with the specified sign.

Sample numbers : 3, -7, 2


Output : The sign is minus (-)
Write a JavaScript conditional statement
to sort three numbers using functions

Display an alert box to show the result.

Sample numbers : 0, -1, 4


Output : 4, 0, -1
Write a JavaScript conditional statement to find
the largest of five numbers using function and
onclick event

Display an alert box to show the result.

Sample numbers : -5, -2, -6, 0, -1


Output : 0
Write a JavaScript for loop that will iterate
from 0 to 15. For each iteration, it will check
if the current number is odd or even, and
display a message to the screen.

Sample Output :
"0 is even"
"1 is odd"
"2 is even“
“3 is odd“
……............
“15 is odd”
Write a JavaScript program which iterates the
integers from 1 to 100.

But for multiples of three print “LOL" instead


of the number and for the multiples of five
print “OK". For numbers which are multiples
of both three and five print “LOL-OK".
Write a JavaScript program to read 6 subjects
marks from the student then compute the
average marks of the student. Then, this
average is used to determine the
corresponding grade.
Range Grade
<60 F
<70 D
<80 C
<90 B
<100 A
JavaScript Built-In Functions
Functions that are provided by JavaScript
itself as part of the scripting language, are
known as built-in functions. JavaScript
provides a rich set of the library that has a lot
of built-in functions.

Some examples of the built-in functions are :

alert(), prompt(), parseInt(), parseFloat()


JavaScript Math Object Methods

Math is a built-in object which includes methods


for mathematical operations. We can use the
Math object to perform simple and complex
arithmetic operations.

log( ) log10( ) exp( ) cos( ) tan( )


acos( ) asin( ) atan( ) sin( ) tanh( )
Math.ceil(x) Returns x round up to its nearest integer [4.1 to 5]
Math.floor(x) Returns x round down to its nearest integer [4.9 to 4]
Math.round(x) Returns x round to its nearest integer [4.4 to 4 , 4.5 to 5 ]
Math.sign(x) Returns -1 ,0 ,1 , if given negative, zero, positive number
Math.pow(x, y) returns the value of x to the power of y
Math.sqrt(x) returns the square root of x
Math.abs(x) returns the absolute (positive) value of x
Math.min() can be used to find the lowest or highest value in a list of
Math.max() arguments
Math.random() returns a random number between 0 (inclusive), and 1
(exclusive)
JavaScript String Object Methods
Methods Description
charAt( ) It provides the char value present at the specified index.
concat( ) It provides a combination of two or more strings.
indexOf( ) It provides the position of a char value present in the
given string.
lastIndexOf( ) It provides the position of a char value present in the
given string by searching a character from the last
position.
search( ) It searches a specified regular expression in a given string
and returns its position if a match occurs.
match( ) It searches a specified regular expression in a given string
and returns that regular expression if a match occurs.
replace( ) It replaces a given string with the specified replacement.
substr( ) It is used to fetch the part of the given string on the basis
of the specified starting position and length.
slice( ) It is used to fetch the part of the given string on the basis
of starting and ending index
toLowerCase( ) It converts the given string into lowercase letter.
toUpperCase( ) It converts the given string into uppercase letter.
JavaScript Array Object Methods
pop( ) It removes and returns the last element of an array.
push( ) It adds one or more elements to the end of an array.
shift( ) It removes and returns the first element of an array
unshift( ) It adds one or more elements in the beginning of the
given array
reverse( ) It reverses the elements of given array.
sort( ) It returns the element of the given array in a sorted
order.
concat( ) It returns a new array object that contains two or more
merged arrays.
slice( ) It returns a new array containing the copy of the part
of the given array based on the starting and ending
index numbers
splice( ) It add/remove elements to/from the given array based
on the provided index numbers
indexOf( ) It searches the specified element in the given array
and returns the index of the first match.
lastIndexOf( ) It searches the specified element in the given array
and returns the index of the last match.
HTML Document Object Model

Accessing HTML elements by


document object and its methods
<body>
<form name="addition">
Number 1:<input type="text" name="num1"><br>
Number 2:<input type="text" name="num2"><br><br>
<input type="button" onclick="add()" value="Calculate">
</form>
</body>
<head>
<script>
function add( )
{
let a = parseInt(document.addition.num1.value);
let b = parseInt(document.addition.num2.value);
let result = a+b;
alert("the result is"+result);
}
</script>
</head>
getElementById( )

<form name="addition">
Number 1:<input type="text" id="one" name="num1"><br>
Number 2:<input type="text" id="two" name="num2">
<br><br>
<input type="button" onclick="add()" value="Calculate">
</form>
<head>
<script>
function add()
{
var a = parseInt(document.getElementById("one").value);
var b = parseInt(document.getElementById("two").value);

alert(a+b);
}
</script>
</head>
<head>
<script>
function add()
{
var a = parseInt(document.getElementById("one").value);
var b = parseInt(document.getElementById("two").value);
var result = a+b;
document.getElementById("details").innerHTML = result;
}
</script>
</head>

<body>
<p id="details"></p>
</body>
getElementsByName( )

<body>
<form name="details">
<p>First Name: <input type="text" name="fname"></p>
<p>Last Name: <input type="text" name="fname"></p>
<input type="button" onclick="read()" value="Display">
</form>
<br>
<p id="details"></p>
</body>
<head>
<script>
function read()
{
let elements = document.getElementsByName("fname");
document.getElementById("details").innerHTML = elements[0].value;

}
</script>
</head>
getElementsByTagName( )

<body>
<form name="addition">
Number 1:<input type="text" name="num1"><br>
Number 2:<input type="text" name="num2"> <br><br>
<input type="button" onclick="add()" value="Display">
</form>
<p id="details"></p>
</body>
<head>
<script>
function add()
{
let elements = document.getElementsByTagName("input");
document.getElementById("details").innerHTML = elements[0].value;
}
</script>
</head>
getElementsByClassName( )

<body>
<form name="addition">
Number 1:<input type="text" class="one" name="num1"><br>
Number 2:<input type="text" class="one" name="num2">
<br><br>
<input type="button" onclick="add()" value=“Calculate">
</form>
</body>
<script>
function add()
{
let elements = document.getElementsByClassName("one");
let a = parseInt(elements[0].value);
let b = parseInt(elements[1].value);
alert(a+b);
}
</script>
HTML Form Validations
JavaScript Validations

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.

Through JavaScript, we can validate name,


avaScript Form Validation for Empty Inputs
<script>
function validateForm( )
{
var x = document.forms.name.value;
if (x == "" || x == null)
{
alert("Name must be filled out");
return false;
}
}
</script>
JavaScript Form Validation for required
Length
<script>
function validate( )
{
var x=document.myForm.name.value;
if (x.length<5)
{
alert("The field cannot contain less than 5 characters!")
return false;
}
else {
return true
}
}
</script>
Java Script Form E-mail Validation
A regular expression is a pattern of characters.

<script>
let text = “Amrita University";
let pattern = /Amrita/;
let result = text.match(pattern);

document.getElementById(“value").innerHTML = result;
</script>
regular expression for Email

/[a-zA-Z0-9._-] +@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
/[a-zA-Z0-9._-] +@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;

/[a-zA-Z0-9._-]+: Means that the email address must


begin with alpha-numeric characters (both
lowercase and uppercase characters are
allowed). It may have periods, underscores and
hyphens.
/[a-zA-Z0-9._-] +@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;

@: There must be a ‘@’ symbol after


initial characters.
/[a-zA-Z0-9._-] +@ [a-zA-Z0-9.-]+ \.[a-zA-Z]{2,4}/;

[a-zA-Z0-9.-]+: After the ‘@’ sign there must be


some alpha-numeric characters. It can also
contain period (‘.’) and hyphens(‘-‘).
/[a-zA-Z0-9._-] +@ [a-zA-Z0-9.-]+ \. [a-zA-Z]{2,4}/;

After the second group of characters there


must be a period (‘.’). This is to separate
domain and subdomain names.
/[a-zA-Z0-9._-] +@ [a-zA-Z0-9.-]+ \. [a-zA-Z]{2,4}/;

[a-zA-Z]{2,4}/: Finally, the email address must end with


two to four alphabets. Having a-z and A-Z means that
both lowercase and uppercase letters are allowed.

{2,4} indicates the minimum and maximum number of


characters. This will allow domain names with 2, 3 and
4 characters e.g.; us, tx, org, com, net, wxyz).
<body>
<form name="form1" action="#">
<input type="text" name="text1" />
<br />
<input type="submit" value= “Submit”
onclick = "validateEmail(document.form1.text1)">

</body>
function validateEmail(inputtext)
{
var mailformat = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
if(inputtext.value.match(mailformat))
{
alert("Valid email address!");
return true;
}
else
{
alert("You have entered an invalid email address!");
return false;
}
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.

 This process of reacting over the events is


called Event Handling.

 JavaScript handles events using Event


Handlers.
JavaScript Events

 Mouse Events
 Keyboard Events
 Form Events
Mouse Events
Event Event Handler Description
Performed
click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse


comes over the element
mouseout onmouseout When the cursor of the mouse
leaves an element
mousedown onmousedown When the mouse button is
pressed over the element
mouseup onmouseup When the mouse button is
released over the element
Keyboard Events

Event Event Description


Performed Handler
Key down onkeydown When the user
& & press(hold pressing) and
Key up onkeyup then release the key
Key Press onkeypress When the user press the
key
Form Events
Event Event Description
Performed Handler
submit onsubmit When the user submits the
form
focus onfocus When the user focuses on a
form element
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
Thank You

You might also like