j a v a s cript

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• <html>• <body>• <script language="javascript">• document.write ("Hello");• </script>• </body>• </html>

JavaScript• External file• JavaScript can be put in a separate .js

file<script

src="myJavaScriptFile.js"></script>

An external .js file lets you use the same JavaScript on multiple HTML pages

JavaScript• <html>• <body>• <script language="javascript">• document.write ("<p><b><i>Welcome to

popo! Hello");• </script>• </body>• </html>• document.write()- method used to print text

JavaScript• document.writeln() and \n• - used to print in new line(only valid when <PRE> tag)• (pre format) • <html>• <body>• <pre>• <script language="javascript">• document.write ("<p><b><i>Welcome to popo! \nHello");• document.writeln ("and peepe");• </script>• </body>• </html>

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);• </script>

JavaScript• bgColor and fgColor• <script>• document.bgColor="black“;• document.fgColor="#336699“;• </script>

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”;• <html>• <body>• <pre>• <script language="javascript">• var name="popo"; • document.writeln ("My name " +name);• </script>• </body>• </html>

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• <html>• <body>• <pre>• <script language="javascript">• var a=10;• var b=20;• var c=a+b;• document.writeln ("sum of "+a+" + "+b+" = "+ c);• </script>• </body>• </html>

JavaScript• <html>• <body>• <pre>• <script language="javascript">• var a=10;• var b=20;• var c=a+b;• if(c%2==0){document.write("even");}• else{document.write("odd");}• </script>• </body>• </html>

JavaScript• loop statements:

while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement;

• <html>• <body>• <pre>• <script language="javascript">• var i;• for(i=1;i<=40;i++)• document.writeln(i);• </script>• </body>• </html>

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”);• <html>• <body>• <pre>• <script language="javascript">• alert("I am popo");• </script>• </body>• </html>

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• <html>• <body>• <pre>• <script language="javascript">• var age= prompt("enter age");• if(age>=20)alert("I am happy");• else alert("I am popo");• </script>• </body>• </html>• Can assign value var k=prompt("dfgsdf",“value");

JavaScript• Confirm() method• Enables the user to confirm • <html>• <body>• <pre>• <script language="javascript">• var age=prompt("enter age");• if( confirm("is it greater than 20") )alert("I am happy");• else alert("I am popo");• </script>• </body>• </html>

JavaScript• parseInt()- convert string to integer• parseFloat()-convert string to float• var a= parseInt(b)+parseInt( c);• <html>• <body>• <pre>• <script language="javascript">• var a="10";• var b="20";• var c=a+b;• alert(c);• var d=parseInt(a)+parseInt(b);• alert(d);• </script>• </body>• </html>

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• <html>• <body>• <pre>• <script language="javascript">• var d=new Date();• document.write(d.getDate()+"/"+d.getMonth()+1 +"/"+d.getYear());

• </script>• </body>• </html>• 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• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function square(number)• {alert( number * number);}• </SCRIPT>• </HEAD>• <BODY>• <SCRIPT>• document.write("The function returned ", square(5) );• </SCRIPT>• </BODY>

JavaScript• <HEAD>• <SCRIPT LANGUAGE="JavaScript">• function square(number)• {return number * number;}• </SCRIPT>• </HEAD>• <BODY>• <SCRIPT>• document.write("The function returned ", square(5));• </SCRIPT>• </BODY>• 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.

JavaScriptonclick Occurs when user clicks on link or form elementondblclick Occurs when a mouse double-clickonmousedown Occurs when mouse button is pressedonmousemove Occurs when mouse pointer movesonmouseout Occurs when mouse pointer moves out of an element

onmouseover Occurs when mouse pointer moves over an element

onmouseup Occurs when mouse button is releasedonkeydown Occurs when a key is pressedonkeypress Occurs key is pressed and releasedonchange Occurs when user changes the value in form fieldonreset Occurs when a form is resetonsubmit Occurs when a form is submitted onfocus Occurs when user clicks inside the fieldonblur Occurs when user clicks outside a fieldonload Occurs when a page is loadedunload Occurs 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!")• }• </script>• <form>• <input type="button" value="Click here" onClick="ss()">• </form>• 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!")• }• </script>• <form>• <input type="text" value="10" onDblclick=" ss();">• </form>

JavaScript• onMousedown• Occurs when mouse button is pressed• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onMousedown=" ss();">• </form>

JavaScript• onMousemove• Occurs when mouse pointer moves• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onMousemove=" ss();">• </form>

JavaScript• onMouseout• Occurs when mouse pointer moves out of an element• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <table border=2 width=100 heigth=100 >• <tr><td bgcolor=brown onMouseout=" ss();">• <font color=red >popo• </form>

JavaScript• onkeypress• Occurs key is pressed and released• <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form>• <input type="text" value="10" onkeypress=" ss();">• </form>

JavaScript• onsubmit• Occurs when a form is submitted • <script>• function ss()• {• alert("Thank you popo!")• }• </script>• <form onsubmit=" ss();">• <input type="submit" value="dfsdfg" onSubmit=" ss();">• </form>

JavaScript• onload• Occurs when a page is loaded• <script>• function ss()• {• alert("popo");• }• </script>• <body onLoad="ss()">

JavaScript• onmouseover• Occurs when mouse pointer moves over an element• <script>• function ss()• {• document.write("popo");• }• </script>• <a href="#" onMouseover="ss();">Over Here!</a>

JavaScript• unload• Occurs when user leaves a page• <body onUnload="alert('Thank you for

visiting us. See you soon')">

JavaScript• Most of the events handlers are associated with

the following objectObject Event Handlers

Selectionlist onBlur, onChange, onFocusText element onBlur, onChange, onFocus, onSelectTextarea element onBlur, onChange, onFocus, onSelectButton element onClickCheckbox onClickRadio button onClickHyper link onClick, onMouseoverSubmit button onClickReset button onClickDocument onLoad, onUnloadWindow onLoad, onUnloadForm onSubmit

JavaScript• Addition of 2 nos (each Nos in 2 text, result in result text, with a button)• <script>• function calcu(f)• {• f.ans.value=parseInt(f.first.value)+parseInt(f.sec.value);• }• </script>• <form name=f>• Enter first no :<input type=text name=first>• <br>• Enter sec no:<input type=text name=sec>• <input type=button value=calculate onClick="calcu(f);">• <br><br><br>• <input type=text name=ans>• </form>

JavaScript• All arithmetic operation with 4 buttons & 3 text• <script>• function add(f){• f.ans.value=parseInt(f.first.value)

+parseInt(f.sec.value);• }• function sub(f){• f.ans.value=parseInt(f.first.value)-

parseInt(f.sec.value);• }• function mult(f){•

f.ans.value=parseInt(f.first.value)*parseInt(f.sec.value);

• }• function div(f){• f.ans.value=parseInt(f.first.value)/

parseInt(f.sec.value);• }

• </script>• <form name=f>• Enter first no :<input type=text name=first>• <br>• Enter sec no:<input type=text

name=sec><br>• <input type=button value=Add

onClick="add(f);">• <input type=button value=Sub

onClick="sub(f);">• <input type=button value=Mult

onClick="mult(f);">• <input type=button value=Div

onClick="div(f);">• <br><br><br>• Answer :<input type=text name=ans>• </form>

JavaScript• Print First n nos• <script>• function pr(f)• { var n=parseInt(f.no.value);• for(i=1;i<=n;i++)• document.write(i+" ");• }• </script>• <form>• Enter limt no :<input type=text name=no>• <input type=button value=print onClick="pr(this.form);">

• </form>

JavaScript

JavaScript• String length• Var str="Hello world!"

document.write(str.length);• ------------------------------------------------------------------------• <script>• function s(f)• {• st=f.st.value• alert(st.length); • }• </script>• <form name="feedback">• Email:<input type="text" size="20" name="st" onblur="s(this.form)">• </form>• </body></html>

JavaScript• charAt() function to get character from a location

inside a string• var my_str="Welcome “

document.write(my_str.charAt(3) ); • The output of above code is c .

concat() join 2 strings• Var var2=" popo"

var var3= " pp"var var4=var1.concat(var2,var3);document.write(var4);

JavaScript• indexOf() to get location of a string• var my_str="popo and pp"• document.write( my_str.indexOf("and") ) ;• Output 5 .• lastIndexOf() This function returns the position of

string by checking from end or right side of the string

• var my_str="popo and pp"• document.write( my_str.lastIndexOf("a") ) ;• Output 5 .

JavaScript• Search & replace of part of string by

replace() method• var msg="Welcome to popo";• msg=msg.replace("popo","Ajith");• document.write(msg);• Output : Welcome to Ajith

JavaScript• Substring()• In substr() function we used start point and

length of the substring required• my_string= new String("Welcome to popo");• document.write(my_string.substring(2,5)); • Output : lco

JavaScript

JavaScript• String reversal using charat and length property• <script type="text/javascript">• var my_str="nattop"• var i=my_str.length;• i=i-1;• for (var x = i; x >=0; x--)• {• document.write(my_str.charAt(x));• }• </script>

JavaScript• String Search• WE can search for presence of a string inside a main string in

client side JavaScript by using string.search function. • If the search string is found inside the main string then it will

return the position of the location of the string. • If the string is not found inside the main string then it returns -

1.• <script type="text/javascript">• var my_str="Welcome to popo"• var str="popo";• document.write (my_str.search(str));• </script>• Output 11

JavaScript• Lower case text to Uppercase • var a1 = str.toUpperCase(); • Uppercase letters to Lower case• var a2 = str.toLowerCase(); • Checking number using isNaN function• isNaN() to check any data is number or string• var my_string="This is a string";

if(isNaN(my_string)){document.write ("this is not a number ");}else{document.write ("this is a number ");}

JavaScript• Number to string• To convert a number to a string, do:• var c = (16 * 24)/49 + 12; • d = c.toString();

JavaScript• Check validation• <script>• function validate()• {• if(document.login.userName.value=="")• { alert ("Please enter User Name") }• if(document.login.password.value=="")• { alert ("Please enter Password") }• }• </script>• <form name="login" onSubmit="return validate()">• <input type="text" size="20" name="userName">• <input type="text" size="20" name="password">• <input type="submit" name="submit" value="Submit">• </form>

JavaScript

JavaScript II• Array• Different ways to declare Array• 1) var colors = ["red", "green", "blue"];• colors[0] is "red"

• 2) new Array() - to create an empty array:– var colors = new Array();– Add elements to the array later:

colors[0] = "red"; – colors[1]="green"; colors[2] = "blue";

• 3) new Array(n) to create an array of that size– var colors = new Array(3);

JavaScript II• Array example• <html>• <body>• <pre>• <script language="javascript">• var colors = ["red", "green", "blue"];• for(i=0;i<3;i++)• document.write(colors[i]+" ");• </script>• </body>• </html>

JavaScript II• Array Example• <html>• <body>• <pre>• <script language="javascript">• var colors = new Array();• for(i=0;i<10;i++)• {• colors[i]="color"+i;• document.write(colors[i]+" ");• }• </script>• </body>• </html>

JavaScript

JavaScript• File popo.js Contents:• function popup() {• alert("Hello popo")• }• --------------------------------------------------------------------------------------• HTML & JavaScript Code:• <html>• <head>• <script src=“popo.js">• </script>• </head>• <body>• <input type="button" onclick="popup()" value="Click Me!">• </body>• </html>

JavaScript• Print Index of select• <html>• <script language="javascript">• function check(n){• var t=parseInt(n)+1;• alert("index is "+ t);• }• </script>• <body>• <select name=a onChange="check(selectedIndex )">• <option value=one >one</option>• <option value=one >two</option>• <option value=one >three</option>• <option value=one >four</option>• </select>• </body>• </html>

JavaScript

JavaScript• javaScript Print Script - window.print()• The JavaScript print function

window.print() will print the current webpage when executed.

• <form>• <input type="button" value="Print This

Page" onClick="window.print()" />• </form>

JavaScript• JavaScript Redirect• <html>• <script type="text/javascript">• function delayer(){• window.location = "http://www.poposir.orgfree.com"• }• </script>• <body onLoad="setTimeout('delayer()', 5000)">• <h2>This page is waiting for redirect location , poposir.orgfree.com"• </body>• </html>

• The delayer() function to be used after 5 seconds or 5000 milliseconds , so we pass the setTimeout() two arguments.

• 'delayer()' - The function we want setTimeout() to execute after the specified delay.• 5000 - the number of millisecods to wait before executing our function. • 1000 miliseconds = 1 second.

JavaScript• document.getElementById()• To quickly access the value of an HTML element. • This small script below will check to see if there is any text in the text field "myText". • The argument that getElementById requires is the id of the HTML element you wish to

utilize.• <script type="text/javascript">• function notEmpty(){• var myTextField = document.getElementById('myText');• if(myTextField.value != "")• alert("You entered: " + myTextField.value)• else• alert("Would you please enter some text?")• }• </script>• <input type='text' id='myText' />• <input type='button' onclick='notEmpty()' value='Form Checker' />

JavaScript• Cuttent Time AM/ PM• <h4>It is now • <script type="text/javascript">• var currentTime = new Date();• var hours = currentTime.getHours();• var minutes = currentTime.getMinutes();• if (minutes < 10){minutes = "0" + minutes;}• document.write(hours + ":" + minutes + " ");• if(hours > 11){document.write("PM");}• else {document.write("AM");}• </script>• </h4>

JavaScript

j a v a s cript

Documents

s he ampton cript - wordpress.com

octobre 2015 - pantheonsorbonne.fr · friesinger, günther,...

cript or qu idea

about me educationlynnegeldenhuys.info/pdf/cv.pdf · i have...

standard de pregĂtire profesionalĂ · 2020. 7. 27. ·...

a b bangkok n 0500m 00.25miles...

parliament explained episode 1: parliament or …...

vbs t b 2 w ?3 - computer engineer -...

firmae bloque 3 sistemas cript. de clave asimétrica

cript page 34 - 57

enough with the javas cript already! de nicholas zakas

—a a 3 'j 'j 'j & 1. 2. 3. 4.e5...—a a 3 'j 'j 'j & 1....

ipad errty 14:03 oggl cript yboa 95 % retour 2 4 — mode...

cript sheet dc

student exchange programme · share their transcript with...

lsosa ids informatica buccheri. - innovit.org programma e...

small ball: a little league story - pbs · small ball: a...

06-métodos modernos de cript e id remota

cript file example - erigrid · 2018. 10. 9. · cript file...

manual de organizaciÓn, funciones y ... - amatitlan… ·...