Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

java ppt

Uploaded by

rishika.karouthiya2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

java ppt

Uploaded by

rishika.karouthiya2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

INTRODUCTION TO

DYNAMIC WEBSITES USING


JAVASCRIPT
UNIT-4
Web Application
Class XI
WHAT IS JAVASCRIPT?
◦ JavaScript is a scripting language (a scripting language is a
lightweight programming language)
◦ A JavaScript code is embedded directly into HTML pages.
◦ JavaScript was designed to add interactivity to HTML pages.
◦ JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
◦ A script or scripting language is a computer language with a series of
commands within a file that is capable of being executed without
being compiled. Good examples of server-side scripting
languages include Perl, PHP, and Python. The best example of a
client-side scripting language is JavaScript.
◦ JavaScript is used in Web pages to improve the design, validate
forms, detect browsers, create cookies, etc.
Advantages of JavaScript
◦ Less server interaction: You can validate user input before sending
the page off to the server. This saves server traffic, which means less
load on your server.
◦ Immediate feedback to the visitors: They don't have to wait for a
page reload to see if they have forgotten to enter something.
◦ Increased interactivity: You can create interfaces that react when
the user hovers over them with a mouse or activates them via the
keyboard.
◦ Richer interfaces: You can use JavaScript to include such items as
drag-and-drop components and sliders to give a Rich Interface to
your site visitors.
Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language.
It lacks the following important features:

◦ 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
JAVASCRIPT – SYNTAX
◦ JavaScript can be implemented using JavaScript statements that
are placed within the <script>... </script> HTML tags in a web page.
◦ The <script> tag alerts the browser program to start interpreting all
the text between these tags as a script.
◦ You can have any number of script tag.
◦ Scripts can be placed in the HEAD or in the BODY tag.
– In the HEAD, scripts are run before the page is displayed.
– In the BODY, scripts are run as the page is displayed.
◦ In the HEAD is the right place to define functions and variables that
are used by scripts within the BODY.
A simple syntax of your JavaScript will appear as follows:

<html>
<head>
<title>Hello World in JavaScript</title>
</head>
<body>
<script type=text/javascript>
document.write("Hello World!");
</script>
</body>
</html>
The script tag takes two important attributes:
◦ Language: This attribute 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.
◦ Type: This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".
JavaScript Statements
◦ A JavaScript statement is a command to a browser. The purpose of the command is to tell the
browser what to do.
◦ It is normal to add a semicolon at the end of each executable statement.

JavaScript Code
◦ JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
◦ Each statement is executed by the browser in the sequence they are written.

JavaScript Blocks
◦ JavaScript statements can be grouped together in blocks.
◦ Blocks start with a left curly bracket {, and ends with a right curly bracket }.
◦ The purpose of a block is to make the sequence of statements execute together.

JavaScript is Case Sensitive.


JavaScript Comments
◦ Comments can be added to explain the JavaScript, or to make the code more readable.
◦ Single line comments start with //.
◦ Multi line comments start with /* and end with */.
JavaScript Datatypes
One of the most fundamental characteristics of a programming
language is the set of data types it supports.
These are the type of values that can be represented and manipulated in
a programming language.
JavaScript allows you to work with three primitive data types:
• Numbers, e.g., 123, 120.50 etc.
• Strings i.e. 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
◦JavaScript variables are used to hold values or expressions.
◦A variable is a "container" to store information.
◦A variable's value can change during the execution of a script.
◦You can refer to a variable by name to see its value or to change its value.
◦Rules for variable names:
◦Variable names are case sensitive (y and Y are two different variables)
◦They must begin with a letter or the underscore character.
◦Must not be a keyword.
◦You can declare JavaScript variables with the var statement:

Note: When you assign a text value to a variable, use quotes around the value.
JavaScript Operators
Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.

Given that y=5, the table below explains the arithmetic operators:
JavaScript Operators
Assignment Operators
Assignment operators are used to assign values to JavaScript variables.

Given that x=10 and y=5, the table below explains the assignment operators:
The + Operator Used on Strings
• The + operator can also be used to add string variables or text values together.
• To add two or more string variables together, use the + operator.
Adding Strings and Numbers
The rule is: If you add a number and a string, the result will be a string!

//Answer will be 10

//Answer will be 55

//Answer will be 55

//Answer will be 55
JavaScript Operators
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference
between variables or values.

Given that x=8, the table below explains the comparison operators:
JavaScript Operators
Logical Operators
Logical operators are used to determine the logic between variables or values.

Given that x=6 and y=3, the table below explains the logical operators:
JavaScript Operators
Conditional Operators ? :
Conditional Operator assigns a value to a variable based on some condition.

Syntax:
variablename=(condition)?value1:value2
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.

• The typeof operator evaluates to "number", "string", or "boolean" if its operand is a


number, string, or boolean value and returns true or false based on the evaluation.
JavaScript Basic Examples
<script>
document.write("Hello World!")
<script>
</script>
x=“Hello World!”
document.write(x)
</script>
<script>
alert("Hello World!")
</script>
How to Put a JavaScript Into an HTML Page?
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

* A Document object represents the HTML document that is displayed in that window. The Document object
has various properties which allow access to and modification of document content.
JavaScript Popup Boxes-1
◦ Alert Box

◦ An alert box is often used if you want to make sure information comes
through to the user.
◦ When an alert box pops up, the user will have to click "OK" to proceed.

<script>
alert("Hello World!");
</script>
JavaScript Popup Boxes - 2
◦ Confirm Box

◦ A confirm box is often used if you want the user to verify or accept something.
◦ When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
◦ If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

<script>
var x= confirm("Hello World!");
document.write(x);
</script>
JavaScript Popup Boxes - 3
◦ Prompt Box

◦ A prompt box is often used if you want the user to input a value before entering a page.
◦ When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value.
◦ If the user clicks "OK“, the box returns the input value. If the user clicks "Cancel“, the box returns null.

<script>
var x=prompt(“Enter a value");
document.write(x);
</script>
JS Example -1
<html>
<head>
<title>My Javascript Page</title>
<script type="text/javascript">
alert("Welcome to my world!!!");
</script>
</head>
<body>
JS Example -2
<html>
<body>
<script>
s1=12;
s2=28;
sum=s1+s2;
document.write(“Sum of s1,s2 is : "+sum);
</script>
</body>
<html>
Conditional/Selection Statements
◦ Conditional statements are used to perform different actions based on different
conditions.
◦ Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

◦ if statement - use this statement if you want to execute some code only if a specified
condition is true
◦ if...else statement - use this statement if you want 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 if you want to select one of many blocks of
code to be executed
◦ switch statement - use this statement if you want to select one of many blocks of code to
be executed
IF ELSE
if (condition)
{
code to be executed if condition is true
}

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
IF ELSE Examples
<script>
x=3;
if(x<0)
{
alert (“negative”);
}
else
{
alert (“positive”);
}
</script>
IF ELSE Example - 2
<script>
var year=parseInt(prompt(“Enter a year”));
if(year%4==0)
{
alert (year+“ is a leap year.”);
}
else
{
alert (year+“ is not a leap year.”);
}
</script>
IF ELSE IF….Example - 3
<script>
var n1=parseInt(prompt(“Enter a number1");
var n2=parseInt(prompt(“Enter a number2");
var n3=parseInt(prompt(“Enter a number3");

if(n1>n2 && n1>n3) else if(n3>n1 && n3>n2)


{ {
alert(“n1 is greatest.”); alert(“n3 is greatest.”);
} }
else if(n2>n1 && n2>n3) else
{ alert(“Better Luck Next Time”);
alert(“n2 is greatest.”); </script>
}
SWITCH CASE
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}

The break statements indicate the end of a particular case. If they were omitted, the interpreter
would continue executing each statement in each of the following cases.
SWITCH CASE EXAMPLES
<html>
<body>
<script type = "text/javascript">
var grade = ‘A’;
switch (grade) {
case 'A': document.write("Good job<br />");
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;
default: document.write("Unknown grade<br />")
}
</script>
</body>
</html>
JavaScript Loops/ Iteration
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.

Loops execute a block of code a specified number of times, or while a specified


condition is true.

In JavaScript, there are three 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
Do-while
while Loop
The while loop loops through a block of code while a specified condition is true.

<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>
do-while Loop
The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE,
and then it will repeat the loop as long as the specified condition is true.

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
for Loop
The for loop is used when you know in advance how many times the script should run.

<html>
<body>
<script type="text/javascript">
var i;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br >");
}
</script>
</body>
</html>
The break Statement
The break statement will break the loop and continue executing the code that follows after the loop
(if any).

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

You might also like