Java Script

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
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
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
Example
Output
5|Page
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
3. JavaScript in both <body> and <head> sections
Example
7|Page
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
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
 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
Comparison Operators
 = = (Equal)
 != (Not Equal)
 > (Greater than)
 < (Less than)
 >= (Greater than or Equal to)
 <= (Less than or Equal to)
11 | P a g e
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
 >> (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
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
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
if…else statement
if(expression)
{
}
else
{
Statements to execute
}
16 | P a g e
if...else if... statement

if(expression)
{
}
else if(expression 2)
{
Statements to execute if expression 2 is ture
}
else
{
statements
}
17 | P a g e
18 | P a g e
Switch Case in JavaScript
19 | P a g e
 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
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
Output
22 | P a g e
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
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
Output
25 | P a g e
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
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
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
Example to Call a Function
Function Parameters
A function can take multiple parameters separated by comma
Example
29 | P a g e
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
31 | P a g e
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
Example of OnMouseOver and onMouseOut
33 | P a g e
Example of Form Validation using JavaScript (OnSubmit Event)
34 | P a g e
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
36 | P a g e
Example of Try-Catch-Finally
37 | P a g e
Example of Throw Statement
38 | P a g e
JavaScript Input Validation Example
39 | P a g e
JavaScript Dates
Example of Displaying Date in JavaScript
Output
40 | P a g e
JavaScript Date Methods

Get Methods
41 | P a g e
Set Methods
Parsing Dates
use the Date.parse() method to convert it to milliseconds
42 | P a g e
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
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
45 | P a g e

Java Script

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Script

Caricato da

Copyright:

Formati disponibili

NotesHub.co.

in | Download Android App

 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

 Less server interaction

 Immediate feedback to the visitors

 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:

Important Points related to JavaScript

 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

2. JavaScript in <body>..</body> section

3. JavaScript in both <body> and <head> sections

4. JavaScript in External File

<script type=”text/javascript” src=filename.js”></script>

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.

 && (Logical AND)

 >> (Right Shift)

JavaScript supports the following forms of if..else statement −

 if...else if... statement.

if...else if... statement

Switch Case in JavaScript

Using Labels to Control the Flow

function functionname (parameter-list)

Example to Call a Function

 A JavaScript function can have an optional return statement.

onclick Event Type

onsubmit Event type

onmouseover and onmouseout

Example of OnMouseOver and onMouseOut

Example of Form Validation using JavaScript (OnSubmit Event)

Error and Exception Handling in JavaScript

Three types of Programming errors:

 You can catch programmer-generated and runtime exceptions, but you

Example of Throw Statement

JavaScript Input Validation Example

Example of Displaying Date in JavaScript

JavaScript Date Methods

use the Date.parse() method to convert it to milliseconds

Assignment for LAB Work

JavaScript arrays are used to store multiple values in a single variable.

Array Properties and Methods

1. Converting Array to Strings - JavaScript method toString() converts an array to a string

Potrebbero piacerti anche