NotesHub.co.
in | Download Android App
WEB
ENGINEERING
PPT – 1
1|Page
NotesHub.co.in | Download Android App
JavaScript
JavaScript is a lightweight, interpreted programming language.
Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform
Advantages of JavaScript
Less server interaction
Immediate feedback to the visitors
Increased interactivity
Richer interfaces
2|Page
NotesHub.co.in | Download Android App
Limitations
Client-side JavaScript does not allow the reading or writing of files. This has been kept
for security reason.
JavaScript cannot be used for networking applications because there is no such support
available.
JavaScript doesn't have any multithreading or multiprocessor capabilities.
First JavaScript Example
JavaScript is implemented using <script>……</script> HTML tags in a web page.
Two important attributes are used in <script> tag:
o Language - specifies what scripting language you are using. Typically, its value will be
javascript. Although recent versions of HTML (and XHTML, its successor) have phased
out the use of this attribute.
o Type − This attribute is what is now recommended to indicate the scripting language
in use and its value should be set to "text/javascript".
3|Page
NotesHub.co.in | Download Android App
Here document.write() is a function which is used to write a String in HTML Web page.
Important Points related to JavaScript
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs
JavaScript, however, allows you to omit this semicolon if each of your statements are placed
on a separate line, But when formatted in a single line as follows, you must use semicolons.
JavaScript is a case-sensitive language
JavaScript supports both C-style and C++-style comments.
JavaScript Placement in HTML File
1. JavaScript in <head>..</head> section
If you want to have a script run on some event, such as when a user clicks somewhere, then you
will place that script in the head.
4|Page
NotesHub.co.in | Download Android App
Example
Output
5|Page
NotesHub.co.in | Download Android App
2. JavaScript in <body>..</body> section
If you need a script to run as the page loads so that the script generates content in the page, then
the script goes in the <body> portion of the document. In this case, you would not have any
function defined using JavaScript.
Example
Output
6|Page
NotesHub.co.in | Download Android App
3. JavaScript in both <body> and <head> sections
Example
7|Page
NotesHub.co.in | Download Android App
4. JavaScript in External File
Create a JavaScript File and save it with “.js” extension and then include the file in a HTML web
page using <script tag and src attribute as shown below:
<script type=”text/javascript” src=filename.js”></script>
Example
Js-5.js
Js-6.html
8|Page
NotesHub.co.in | Download Android App
JavaScript Data Types
Three primitive data types −
Numbers, eg. 123, 120.50 etc.
Strings of text e.g. "This text string" etc.
Boolean e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a
single value. In addition to these primitive data types, JavaScript supports a composite data type
known as object.
JavaScript Variables
Variables are declared with the var keyword, eg:
JavaScript is untyped language. This means that a JavaScript variable can hold a value of
any data type.
9|Page
NotesHub.co.in | Download Android App
Unlike many other languages, you don't have to tell JavaScript during variable declaration
what type of value the variable will hold.
The value type of a variable can change during the execution of a program and JavaScript
takes care of it automatically.
JavaScript Operators
Arithmetic Operators
Comparison Operators
Logical (or Relational) Operators
Assignment Operators
Conditional (or ternary) Operators
Arithmetic Operators
+ (Addition)
- (Subtraction)
(Multiplication)
/ (Division)
% (Modulus)
++ (Increment)
-- (Decrement)
10 | P a g e
NotesHub.co.in | Download Android App
Comparison Operators
= = (Equal)
!= (Not Equal)
> (Greater than)
< (Less than)
>= (Greater than or Equal to)
<= (Less than or Equal to)
11 | P a g e
NotesHub.co.in | Download Android App
Logical Operators
&& (Logical AND)
|| (Logical OR)
! (Logical NOT)
Bitwise Operators
& (Bitwise AND)
| (BitWise OR)
^ (Bitwise XOR)
~ (Bitwise Not)
<< (Left Shift)
12 | P a g e
NotesHub.co.in | Download Android App
>> (Right Shift)
>>> (Right shift with Zero)
Assignment Operators
= (Simple Assignment)
+= (Add and Assignment)
−= (Subtract and Assignment)
*= (Multiply and Assignment)
/= (Divide and Assignment)
%= (Modules and Assignment)
Conditional Operator (? :)
? : (Conditional) - (a > b)? 100: 200
typeof Operator
The typeof operator is a unary operator that is placed before its single operand, which can be of
any type. Its value is a string indicating the data type of the operand.
13 | P a g e
NotesHub.co.in | Download Android App
Example
Output:
If-else statement
JavaScript supports conditional statements which are used to perform different actions based on
different conditions.
14 | P a g e
NotesHub.co.in | Download Android App
JavaScript supports the following forms of if..else statement −
if statement
if...else statement
if...else if... statement.
if Statement
if(expression)
{
Statements to execute if expression is true
}
15 | P a g e
NotesHub.co.in | Download Android App
if…else statement
if(expression)
{
Statements to execute if expression is true
}
else
{
Statements to execute
}
16 | P a g e
NotesHub.co.in | Download Android App
if...else if... statement
if(expression)
{
Statements to execute if expression is true
}
else if(expression 2)
{
Statements to execute if expression 2 is ture
}
else
{
statements
}
17 | P a g e
NotesHub.co.in | Download Android App
18 | P a g e
NotesHub.co.in | Download Android App
Switch Case in JavaScript
19 | P a g e
NotesHub.co.in | Download Android App
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.
20 | P a g e
NotesHub.co.in | Download Android App
While Loops
The purpose of a while loop is to execute a statement or code block repeatedly as long as
an expression is true. Once the expression becomes false, the loop terminates.
21 | P a g e
NotesHub.co.in | Download Android App
Output
22 | P a g e
NotesHub.co.in | Download Android App
Do…while Loop
The do...while loop is similar to the while loop except that the condition check happens at the
end of the loop. This means that the loop will always be executed at least once, even if the
condition is false.
23 | P a g e
NotesHub.co.in | Download Android App
For Loop
For…in Loop
The for...in loop is used to loop through an object's properties.
In each iteration, one property from object is assigned to variable-name and this loop
continues till all the properties of the object are exhausted.
24 | P a g e
NotesHub.co.in | Download Android App
Output
25 | P a g e
NotesHub.co.in | Download Android App
Using Labels to Control the Flow
A label can be used with break and continue to control the flow more precisely.
A label is simply an identifier followed by a colon (:) that is applied to a statement or a block
of code.
26 | P a g e
NotesHub.co.in | Download Android App
Output
Functions in JavaScript
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.
27 | P a g e
NotesHub.co.in | Download Android App
Function Definition
Function Keyword is used to define the function followed by unique function name, a list of
parameters(might be empty)
function functionname (parameter-list)
{
Statements
}
Example
28 | P a g e
NotesHub.co.in | Download Android App
Example to Call a Function
Function Parameters
A function can take multiple parameters separated by comma
Example
29 | P a g e
NotesHub.co.in | Download Android App
Return Statement
A JavaScript function can have an optional return statement.
This is required if you want to return a value from a function.
This statement should be the last statement in a function.
30 | P a g e
NotesHub.co.in | Download Android App
31 | P a g e
NotesHub.co.in | Download Android App
JavaScript Events
JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is
an event. Other examples include events like pressing any key, closing a window, resizing
a window, etc.
onclick Event Type
This is the most frequently used event type which occurs when a user clicks the left button
of his mouse. You can put your validation, warning etc., against this event type.
onsubmit Event type
onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.
onmouseover and onmouseout
These two event types will help you create nice effects with images or even with text as
well. The onmouseover event triggers when you bring your mouse over any element and
the onmouseout triggers when you move your mouse out from that element.
32 | P a g e
NotesHub.co.in | Download Android App
Example of OnMouseOver and onMouseOut
33 | P a g e
NotesHub.co.in | Download Android App
Example of Form Validation using JavaScript (OnSubmit Event)
34 | P a g e
NotesHub.co.in | Download Android App
Error and Exception Handling in JavaScript
Three types of Programming errors:
Syntax Errors
Runtime Errors
Logical Errors
Try..catch..finally statement
You can catch programmer-generated and runtime exceptions, but you
cannot catch JavaScript syntax errors
The try block must be followed by either exactly one catch block or one finally block (or
one of both)
Example of Try-Catch
35 | P a g e
NotesHub.co.in | Download Android App
36 | P a g e
NotesHub.co.in | Download Android App
Example of Try-Catch-Finally
37 | P a g e
NotesHub.co.in | Download Android App
Example of Throw Statement
38 | P a g e
NotesHub.co.in | Download Android App
JavaScript Input Validation Example
39 | P a g e
NotesHub.co.in | Download Android App
JavaScript Dates
Example of Displaying Date in JavaScript
Output
40 | P a g e
NotesHub.co.in | Download Android App
JavaScript Date Methods
Get Methods
41 | P a g e
NotesHub.co.in | Download Android App
Set Methods
Parsing Dates
use the Date.parse() method to convert it to milliseconds
42 | P a g e
NotesHub.co.in | Download Android App
Assignment for LAB Work
Create a JavaScript Program to display current date and time. On the HTML Page display buttons
such as “getDay” etc. and on click of each button show the answer in H1 heading.
Note: Use at least 10 buttons for different functions.
JavaScript Arrays
JavaScript arrays are used to store multiple values in a single variable.
Example
43 | P a g e
NotesHub.co.in | Download Android App
Array Properties and Methods
1. Converting Array to Strings - JavaScript method toString() converts an array to a string
of (comma separated) array values, Eg:. Dept.toString();
2. Join Method – It joins all array elements into a string. It behaves just like toString(),
but in addition you can specify the separator. Eg: Dept.join(“ * “);
3. POP Method – It removes the last element of the array, eg: Dept.pop();
4. Push Method – Adds a new element to the array(at the end), eg: Dept.push(“EEE”);
5. Shift method – It removes the first element of an array, and "shifts" all other elements
one place up, eg: Dept.shift();
6. Unshift() Method – Adds a new element to an array(in the beginning)
7. Deleting Elements - elements can be deleted by using the JavaScript operator delete,
eg: delete Dept[0];
8. Splicing an Array - The splice() method can be used to add new items to an array, eg:
Dept.splice(1, 0, “ICE”), Here 1 specifies the position where new elements should be
added in, 0 means no elements should be removed and after the ICE is the new value
to add.
9. Sorting an Array – Eg: Dept.sort() and to reverse the array use Dept.reverse(), However
to Sort Numeric Values use Compare Function. Eg of the following is shown below:
44 | P a g e
NotesHub.co.in | Download Android App
45 | P a g e
