JavaScript JavaScript • JavaScript is a programming language used to make web pages interactive. • JavaScript is scripting language used for client side scripting. • JavaScript.
Download ReportTranscript JavaScript JavaScript • JavaScript is a programming language used to make web pages interactive. • JavaScript is scripting language used for client side scripting. • JavaScript.
JavaScript
JavaScript
• JavaScript is a programming language
used to make web pages interactive.
• JavaScript is scripting language used for
client side scripting.
• JavaScript developed by Netscape in 1995
• Case sensitive
JavaScript
• Benefits of JavaScript
• JavaScript gives HTML designers a
programming tool
• JavaScript can react to events Alert
Messages
• JavaScript can be used to validate data
• JavaScript can be used to input Validation
• Disadvantages of JavaScript
• Depends on the browser
JavaScript
• Java and JavaScript
• Java and JavaScript are two completely
different
• Java (developed by Sun Microsystems) is a
powerful and much more complex
programming.
• JavaScript is scripting language used for
client side scripting.
• JavaScript developed by Netscape in 1995.
JavaScript
• Embedding JavaScript in HTML
• <script> tag is used to insert a JavaScript into
an HTML page
•
•
• <script language="javascript">
• document.write ("Hello");
•
•
•
JavaScript
• External file
• JavaScript can be put in a separate .js
file
<script
src="myJavaScriptFile.js">
An external .js file lets you use the same
JavaScript on multiple HTML pages
•
•
•
•
•
•
•
•
JavaScript
<script language="javascript">
document.write ("
Welcome to Welcome to popo!
popo! Hello");
document.write()- method used to print text
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
document.writeln() and \n
- used to print in new line(only valid when tag)
(pre format)
<script language="javascript">
document.write ("
\nHello");
document.writeln ("and peepe");
JavaScript
• lastModified
• include the last update date on your page
by using the following code:
• <script language="JavaScript">
• document.write("This page Last update:" +
document.lastModified);
•
JavaScript
•
•
•
•
•
bgColor and fgColor
<script>
document.bgColor="black“;
document.fgColor="#336699“;
JavaScript
•
•
•
•
Data Types
Basic types of data in JavaScript are
strings, numbers, boolean and null.
String- group of characters enclosed in
double quote
• Number- integers and floating point values
• Boolean- true or false
• Null- represents nothing and has a special
value, indicated by null
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
Variables
Variables are storage locations used to store date
Variable can be declared as
var variable name= value;
Eg
Var example=“this is a string”;
<script language="javascript">
var name="popo";
document.writeln ("My name " +name);
JavaScript
• Operators
• JavaScript uses “operators” allows to make
mathematical calculations
• Assignment operators =, +=, -=, *=,/=
• Arithmetic operators
+, -, *, /, %
• Logical operators
&&, || , !=
• Comp`arison operators <, <=, >, >=, ==, !=
• Conditional operator (exp1)?(exp2) : (exp3);
•
•
•
•
•
•
•
•
•
•
•
JavaScript
<script language="javascript">
var a=10;
var b=20;
var c=a+b;
document.writeln ("sum of "+a+" + "+b+" = "+ c);
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
<script language="javascript">
var a=10;
var b=20;
var c=a+b;
if(c%2==0){document.write("even");}
else{document.write("odd");}
JavaScript
• loop statements:
while (condition) statement;
do statement while (condition);
for (initialization; condition; increment) statement;
•
•
•
•
•
•
•
•
•
•
<script language="javascript">
var i;
for(i=1;i<=40;i++)
document.writeln(i);
JavaScript
• The switch statement:
switch (expression)
• {
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
Alert() method
Used to alert the user on some action, with some information
Syn
alert(“message”);
<script language="javascript">
alert("I am popo");
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
Prompt() Method
Prompt method displays a small dialog box with a provision for text entry
along with 2 buttons
Ok and Cancel
The text entered in the box can be stored in a variable
<script language="javascript">
var age= prompt("enter age");
if(age>=20)alert("I am happy");
else alert("I am popo");
Can assign value
var k=prompt("dfgsdf",“value");
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
Confirm() method
Enables the user to confirm
<script language="javascript">
var age=prompt("enter age");
if( confirm("is it greater than 20") )alert("I am happy");
else alert("I am popo");
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
parseInt()- convert string to integer
parseFloat()-convert string to float
var a= parseInt(b)+parseInt( c);
<script language="javascript">
var a="10";
var b="20";
var c=a+b;
alert(c);
var d=parseInt(a)+parseInt(b);
alert(d);
JavaScript
• eval() method
• evaluate a numeric expression given as a
string into numerical value
• Eg
• Eval(“10*10”); 100
JavaScript
• Date function
• Date manipulations can be performed by the
method of the Date object
• Create an instance of Date object
• Using different methods of Date object user
can carry out date manipulations
• Some methods are
JavaScript
• Date methods
getDate
Return day of the month as integer(1-31)
getDay
Return day of the week as integer(0-6)
getMonth
Return month as integer (0-11)
getSeconds Return seconds as integers (0-59)
getYear
Return year as two digit integer
setDate
set the day of the month as integer(1-31)
JavaScript
•
•
•
•
<script language="javascript">
•
var d=new Date();
• document.write(d.getDate()+"/"+d.getMonth()+1 +"/"+d.getYear());
•
•
•
• Output -10/01/2013
•
•
•
•
JavaScript
Functions
Function can be defined
function function name(arguments)
{
– Function body;
•
•
•
•
•
•
•
•
•
}
Eg
function fact(num)
{
var fact=1;
for(i=1;i<=num;i++)
fact=fact*i;
return fact;
}
•
•
•
•
•
•
•
•
•
•
•
JavaScript
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
The function returned 25.
JavaScript
• Event handler
• Event handlers can be considered as
triggers that execute JavaScript when
something happens, such as click or move
your mouse over a link, submit a form etc.
• Events are signals generated when specific
action occur.
Script can be written to react to these
events.
JavaScript
onclick
ondblclick
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onkeydown
onkeypress
onchange
onreset
onsubmit
onfocus
onblur
onload
unload
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
Occurs
when user clicks on link or form element
when a mouse double-click
when mouse button is pressed
when mouse pointer moves
when mouse pointer moves out of an element
when mouse pointer moves over an element
when mouse button is released
when a key is pressed
key is pressed and released
when user changes the value in form field
when a form is reset
when a form is submitted
when user clicks inside the field
when user clicks outside a field
when a page is loaded
when user leaves a page
JavaScript
• onClick
• onClick handlers execute only when users click on buttons,
links, etc.
• <script>
• function ss()
• {
• alert("Thank you popo!")
• }
•
•
• The function ss() is invoked when the user clicks the button.
• Note: Event handlers are not added inside the <script> tags
•
•
•
•
•
•
•
•
•
•
•
JavaScript
onDblclick
Occurs when a mouse double-click
<script>
function ss()
{
alert("Thank you popo!")
}
•
•
•
•
•
•
•
•
•
•
•
JavaScript
onMousedown
Occurs when mouse button is pressed
<script>
function ss()
{
alert("Thank you popo!")
}
•
•
•
•
•
•
•
•
•
•
•
JavaScript
onMousemove
Occurs when mouse pointer moves
<script>
function ss()
{
alert("Thank you popo!")
}
•
•
•
•
•
•
•
•
•
•
•
•
•
JavaScript
onMouseout
Occurs when mouse pointer moves out of an element
<script>
function ss()
{
alert("Thank you popo!")
}