Scribd
Upload
211 views

Java Script

This document provides an overview of JavaScript including: - JavaScript is a lightweight programming language used to build interactive effects in web pages. - It discusses JavaScript data types, variables, operators, conditional statements, loops, and functions. - The document contains code examples demonstrating basic JavaScript concepts like functions, if/else statements, and loops.

Uploaded by

MD NADEEM ASGAR
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
211 views

Java Script

This document provides an overview of JavaScript including: - JavaScript is a lightweight programming language used to build interactive effects in web pages. - It discusses JavaScript data types, variables, operators, conditional statements, loops, and functions. - The document contains code examples demonstrating basic JavaScript concepts like functions, if/else statements, and loops.

Uploaded by

MD NADEEM ASGAR
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

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

You might also like