Introducing JavaScript

Download
Share  Add to  Flag Embed
Views:
 
Category: Education
     
 
License:   All Rights Reserved

Presentation Description

Web Technology unit II notes for anna university syllabu

Comments

Presentation Transcript

Introducing JavaScript: 

Introducing JavaScript What is javascript? Why JavaScript? Introducing JavaScript Syntax Statements Blocks Comments Datatypes Variables Expressions Flow control Arrays Functions

What is javascript?: 

What is javascript? JavaScript is a client – side scripting language for the world wide web, that is similar to the syntax of the Java programming language. JavaScript is designed to provide limited programming functionality.

Why JavaScript?: 

Why JavaScript? By executing more web functionality on the user’s machine, webmasters can optimize their servers to serve more pages. The decrease in traffic from constant interaction with the server can also improve a server's performance. Because the local machine is doing the script processing, the user can view web pages much faster

Introducing JavaScript Syntax: 

Introducing JavaScript Syntax A simple JavaScript program: <html> <head> <Title> Hello World </Title> </head> <body> <script language=“JavaScript”> document.write(“Hello,World wide web”); </script> </body> </html>

Statements : 

Statements It is simply a line of code that contains some kind of instructions. Example Document.write(“<h2> Hello, WWW </h2>”); Blocks The grouping of statements is a block: { document.write(“<h2> Each line is a statement </h2>”); document.write(“<P> These statements, <BR>”); document.write(“are part of a block”); }

Comments : 

Comments A single line comment is denoted with two slashes ( // ) // this is comment, it will be ignored by the browser. Multi line comments /* some text */

PowerPoint Presentation: 

Data Types There are 5 basic data types in JavaScript: string, number, Boolean, object and function.

Variables: 

Variables Variables are "containers" for storing information. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character Declaring (Creating) JavaScript Variables Creating variables in JavaScript is most often referred to as "declaring" variables. You can declare JavaScript variables with the var statement : var x; var carname; After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign values to the variables when you declare them: var x=5; var carname="Volvo";

Expressions : 

Expressions The methods that can be employed to manipulate the data are called expressions. There are 2 types of expressions: numerical and logical Numerical expressions deal with the number data type. Logical expression might compare two data values, including strings, to see if they match. Numerical expressions Addition, subtraction, multiplication and division are all types of numeric expressions. Numeric operators are: +, -, *, /, %

Flow Control: 

Flow Control Conditional statements are used to perform different actions based on different conditions. In JavaScript we have the following conditional statements: if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if....else statement - use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed

Logical Expressions: 

Logical Expressions These are expressions that, when evaluated, can return either a true or a false. Logical Operators && - And || - Or ! - Not == - Equal != - Not Equal > - Greater than >= < <=

If Statement: 

If Statement Use the if statement to execute some code only if a specified condition is true. Syntax if ( condition ) { code to be executed if condition is true } Example <script type="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } </script>

If … Else Statement: 

If … Else Statement Use the if....else statement to execute some code if a condition is true and another code if the condition is not true. Syntax if ( condition ) { code to be executed if condition is true } else { code to be executed if condition is not true }

If...else Statement: 

If...else Statement Example <script type="text/javascript"> //If the time is less than 10, you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>

If...else if...else Statement: 

If...else if...else Statement Use the if....else if...else statement to select one of several blocks of code to be executed. Syntax if ( condition1 ) { code to be executed if condition1 is true } else if ( condition2 ) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true }

JavaScript Switch Statement: 

JavaScript Switch Statement Conditional statements are used to perform different actions based on different conditions. The JavaScript Switch Statement Use the switch statement to select one of many blocks of code to be executed. Syntax switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

JavaScript Switch Statement: 

JavaScript Switch Statement <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday");   break; case 0: document.write("Sleepy Sunday");   break; default: document.write("I'm looking forward to this weekend!"); } </script>

JavaScript For Loop: 

JavaScript For Loop Loops execute a block of code a specified number of times, or while a specified condition is true. JavaScript Loops Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. In JavaScript, there are two different kind of loops: for - loops through a block of code a specified number of times while - loops through a block of code while a specified condition is true The for Loop The for loop is used when you know in advance how many times the script should run. Syntax for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed }

JavaScript For Loop: 

JavaScript For Loop Example <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>

JavaScript While Loop: 

JavaScript While Loop The while loop loops through a block of code while a specified condition is true. Syntax while (var<=endvalue) { code to be executed }

JavaScript While Loop: 

JavaScript While Loop Example <html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html>

Arrays: 

Arrays The array concept is used to store a set of values in a single variable name. This is a very important concept in any programming language Array Definition: The array must first be defined before it is accessed or used. There are a variety of ways this can be accomplished in JavaScript. Below are some of the ways of defining arrays in JavaScript. Defining an Array in JavaScript: Array is defined in JavaScript by making use of the keyword new. General format of defining array in JavaScript is as follows: var varaiblename = new Array ( ) For example, if a programmer wants to define an array exforsys, it is written as follows: var exforsys = new Array ( )

Arrays: 

Arrays The format for adding elements in this structure is as follows: var varaiblename = new Array ( ) variablename[0]=”element1” variablename[1]=”element2” variablename[2]=”element3” variablename[3]=”element4” ……………………… var Exforsys = new Array ( ) Exforsys[0]=”Training” Exforsys[1]=”Division” Exforsys[2]=”Institute” Exforsys[3]=”Company”

Arrays: 

Arrays It is also possible that if the programmer is certain of the array length, it can be defined while defining the array itself as: var Exforsys = new Array (4) Shorter form: The elements can also be defined in a shorter form as: var variablename= new Array (“element1”,”element2”,”elements3”,….) Accessing Arrays in JavaScript You can access an array element by referring to the name of the array and the element's index number. Displaying Array Elements document.write(Exforsys[1])

Functions : 

Functions A function is simply a block of code with a name, which allows the block of code to be called by other components in the scripts to perform certain tasks. Functions can also accept parameters that they use complete their task. JavaScript actually comes with a number of built-in functions to accomplish a variety of tasks.

Creating Custom Functions : 

Creating Custom Functions In addition to using the functions provided by javaScript, you can also create and use your own functions. General syntax for creating a function in JavaScript is as follows: function name_of_function(argument1,argument2,…arguments) { ………………………………………… //Block of Code ………………………………………… }

Creating Custom Functions : 

Creating Custom Functions Calling functions There are two common ways to call a function: From an event handler and from another function. Calling a function is simple. You have to specify its name followed by the pair of parenthesis. <SCRIPT TYPE="TEXT/JAVASCRIPT"> name_of_function(argument1,argument2,…arguments) </SCRIPT>

Creating Custom Functions : 

Creating Custom Functions <html> <head> <title>Henley's Department Store</title> <Script Language="JavaScript"> function welcomeMessage() { document.write("Welcome to Henley's Department Store!"); } </Script> </head> <body> <h1>Henley's Department Store</h1> <h3>Customers Order Processing</h3> <Script Language="JavaScript"> welcomeMessage(); </Script> </body> </html>