Scribd
Upload
47 views

Javascript

JavaScript is a lightweight, interpreted programming language that is complementary to and integrated with HTML and Java. It allows for increased interactivity and immediate feedback without reloading pages. JavaScript can validate user input before submitting to servers and can create dynamic interfaces. Arrays and regular expressions are useful data structures in JavaScript.

Uploaded by

girlbinodss
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views

Javascript

JavaScript is a lightweight, interpreted programming language that is complementary to and integrated with HTML and Java. It allows for increased interactivity and immediate feedback without reloading pages. JavaScript can validate user input before submitting to servers and can create dynamic interfaces. Arrays and regular expressions are useful data structures in JavaScript.

Uploaded by

girlbinodss
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

Javascript

What is JavaScript ?
JavaScript

is:
JavaScript is a lightweight,
interpreted programming
language
Complementary to and
integrated with Java
Complementary to and
integrated with HTML
Open and cross-platform

Advantages of JavaScript:
The

merits of using JavaScript are:


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.

Limitations with JavaScript:


Client-side

JavaScript does not


allow the reading or writing of
files. This has been kept for
security reason.
JavaScript can not be used for
Networking applications because
there is no such support
available.
JavaScript doesn't have any
multithreading or multiprocess

Include <script>
There

is a flexibility given to include


JavaScript code anywhere in an HTML
document. But there are following most
preferred ways to include JavaScript in
your HTML file.
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and
<head>...</head> sections.
Script in and external file and then
include in <head>...</head> section.

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
as follows:

Example
<html> <head>
<script type="text/javascript">
<!-- function sayHello() {
alert("Hello World") } //-->
</script> </head>
<body> <input type="button"
onclick="sayHello()" value="Say
Hello" /> </body> </html

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,
the script goes in the <body>
portion of the document. In this
case you would not have any
function defined using JavaScript:

Example:
<html>

<head>
</head>
<body> <script
type="text/javascript">
<!
document.write("Hello World")
//--> </script> <p>This is web
page body </p> </body>
</html>

JavaScript DataTypes:
JavaScript

allows you to work


with 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.

Example:
<script type="text/javascript">
<!
var age = 20;
if( age > 18 )
{ document.write("<b>Qualifies
for driving</b>"); }
//--> </script>

Switch case

<script type="text/javascript">
var grade='A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break; case 'D':
document.write("Not so good<br />");
break; case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />") } d

Javascript if-else
<html>
<head>
<script

type="text/javascript">
var age=23;
if(age>18)
{
document.write("adult");
}
</script>
</head>
</html>

Javascript Output Function


Document.write();
alert();
document.getElementById("demo")

.innerHTML = x

Example

given in next slide.

<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>
Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = Number(y) + Number(z);
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

Date ()

<html>

<head>

<script>

function startTime() {

var today=new Date();

var h=today.getHours();

var m=today.getMinutes();

var s=today.getSeconds();

m = checkTime(m);

s = checkTime(s);

h+":"+m+":"+s;

document.getElementById('txt').innerHTML

var t = setTimeout(function(){startTime()},500);

function checkTime(i) {

if (i<10) {i = "0" + i}; // add zero in front of numbers < 10

return i;

</script>

Javascript form validation


Form

validation normally used to occur at


the server, after the client had entered
all the necessary data and then pressed
the Submit button. If the data entered by
a client was incorrect or was simply
missing, the server would have to send
all the data back to the client and
request that the form be resubmitted
with correct information. This was really
a lengthy process which used to put a lot
of burden on the server.

Continue..
JavaScript

provides a way to validate form's


data on the client's computer before sending it
to the web server. Form validation generally
performs two functions.
Basic Validation First of all, the form must
be checked to make sure all the mandatory
fields are filled in. It would require just a loop
through each field in the form and check for
data.
Data Format Validation Secondly, the data
that is entered must be checked for correct
form and value. Your code must include
appropriate logic to test correctness of data.

..\internet

technology\regis.html

Design a calculator
Requirements

display area for numbers


Buttons for 0,1,2, up to 9
A decimal point button
A button to change the sign (+/-)
Clear and all clear (C, AC buttons)
Function buttons (* / + -)
An exponent button (EXP)
A 'calculate' button (The = button)

<div

align="center">
<table width="30%"
border="4"> <tr>
<td
colspan="2"align="center">Displ
ay Area</td></tr>
<tr><td>Numeric Buttons</td>
<td>Function Buttons</td>
</tr></table></div>

<input

type="button">
Which gives us a general-purpose
button. To each of these buttons
we'll attach a:
OnClick="DoSomething()"
'event handler', so that when we
click on the button, we can
expect a response.

More detailed HTML for basic


calculator

<FORM name="Calculator">

<table border="4">

<tr> <!--TOP PANEL------>

<td colspan="2">A Simple JavaScript Calculator<br>


<input type="text" maxlength="40" size="30"
name="Display"> </td> </tr>

<!--END TOP PANEL--->

<tr> <td> <!--LEFT PANEL------>

<table> <tr> <td><input type="button" value="7"></td>


<td><input type="button" value="8">

</td> <td><input type="button" value="9"></td> </tr>


<tr> {all other rows of digits are similar..} </tr> </table>
</td>

<!--END LEFT PANEL--> <td> <!--RIGHT PANEL----->


<table> {right panel is similar in overall structure to
left} </table> </td><!--END RIGHT PANEL->
</tr></table>

output
..\internet

.html

technology\calculator1

Email validation
..\internet

technology\email.html

Phone Number Validation.


.\internet technology\phone.html

Javascript Array
An

array is a special variable, which can


hold more than one value at a time.

<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").i
nnerHTML = cars;
</script>

Push operation

<html>

<body>

<p>Click the button to add new elements to the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits;

function myFunction() {

fruits.push("Kiwi", "Lemon", "Pineapple");

document.getElementById("demo").innerHTML = fruits;

</script>

</body>

</html>

JavaScript Regular Expressions


A

regular expression is a sequence of


characters that forms a search pattern.
When you search for data in a text, you
can use this search pattern to describe
what you are searching for.
A regular expression can be a single
character, or a more complicated pattern.
Regular expressions can be used to
perform all types of text search and
text replace operations.

regular expression is an object


that describes a pattern of
characters.
Regular expressions are used to
perform pattern-matching and
"search-and-replace" functions on
text.

Syntax

/pattern/modifiers;
Example
var

patt = /w3schools/i
i Perform case-insensitive matching
g Perform a global match (find all
matches rather than stopping after
the first match)
m Perform multiline matching

[abc]
[^abc]

[0-9]
[^0-9]

Find any character


between the brackets
Find any character
NOT between the
brackets
Find any digit
between the brackets
Find any digit NOT
between the brackets

Example
var

str = "Visit W3Schools";


var n = str.search(/w3schools/i);

Output:

Use String replace() With a Regular


Expression

<html>
<body>
<p>Replace "microsoft" with "W3Schools" in the
paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str =
document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"W3Schools");
document.getElementById("demo").innerHTML
= txt;
}
Replace "microsoft" with "W3Scho
</script>
in the paragraph below:
</body>
Please visit Microsoft!
</html>

Check input for 5 digit


number

<html>
<body>
<script>
function checkpostal()
{

var re5digit=/^\d{5}$/
if
(document.myform.myinput.value.search(re5digit)=
=-1)
alert("Please enter a valid 5 digit number
inside form")
}
</script>
<form name="myform">
<input type="text" name="myinput" size=15>
<input type="button" onClick="checkpostal()"
value="check">
</form>
</body>

var re5digit=/^\d{5}$/
^

indicates the beginning of the


string. Using a ^ meta character
requires that the match start at
the beginning.
\d indicates a digit character and
the {5} following it means that
there must be 5 consecutive digit
characters.
$ indicates the end of the string.
Using a $ meta character

<html>
<body>
<p>Click the button to perfom a global search for the
letters "ain" in a string, and display the matches.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);
document.getElementById("demo").innerHTML = res;
}
Click the button to perform a global
</script>
search for the letters "ain" in a string,
</body>
and display the matches.
</html>
ain,ain,ain

Example
Perform a global, case-insensitive search for "ain":

var

str = "The rain in SPAIN stays


mainly in the plain";
var res = str.match(/ain/gi);

Output:
ain,AIN,ain,ain

var

myRegExp = /\$\d?\d\.\d\d/;
var myText = " The hot dog cost
$1.75!";
This expression will match the dollar sign,
followed by one or two digits, followed by
the decimal point (i.e., period), followed
by two digits. From Table 2, you can see
the "?" character means match 0 or 1 of
the preceding item. In this expression, it
means match zero or one digits.

You might also like