Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
423 views18 pages

Javascript Practical

Uploaded by

ITI NARELA DELHI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
423 views18 pages

Javascript Practical

Uploaded by

ITI NARELA DELHI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 18
W& ites COPA - JavaScript Embed JavaScript in HTML Pages Practicing the JavaScript in creating dynamic HTML pages ‘Objectives: Al the end of itis exercise youl shall be able to Exercise 1.32.115 * create javascript code in the section of HTML page * create javascript cede in the section of HTML page + create javascript code in the and section of HTML page create and run sample JavaScript code. PROCEDURE TASK 1 Create Javascript code in the section of HTML page Note to instructor ; To run JavaScript, any modern browser should be installed as all modern browser ‘can run JavaScript by default, 1Open Notepad 2 Type the foviowing code: stead script sunction myFunction( [ ‘document wrte( "helio", ‘Sociament wrtel"Wworld’) ) sfecript>, smheset> ‘ <= MyWebPage button typee"button" onctick="myFunston)"=Try iteration 3 Click Save 4 Typetitename 2s paget nim. 5 Select Me ype as All Files 5 Select destination in Desktop of any ether location ick Save, 7 Close Notepad 8 Now go to the fle destination 2 Double Click it to run 10 Browser can show youa waming, (Fig 1} 147i wamning je shawn, click yellow wanting bar 42. Select Atiow Blocked Content Fat Smear © simone escenceme | | My Web Pag 13 A secunty warring can be shown (Fig 2) Fee ieee iainlaiee A een =e) 14 Chek yes. 15 Now click “Try it! to-run the javascript code inthe page 16 Helin Watld woul be shown as output (Fig), TASK 2. Create Javassctipt code in the section of HTML page 1) White and save folbwing code and save wth access html ceiei> sbooy>

Hello World

secnpt> TASK 3: Greate JavaScript code in the and 1_Gyeate and un the folowing JavaSerist code SIOOGTYPE himi> shead> tiie» Sonpt in head and bady section : ‘ doctiment wntein('Good Morning’), ‘ sitead> alen("Good Evening) ‘sfboay> tht: TASK 4 Greate and run sample JavaScript code. 1 Greate and run the folowing JavaSenpt code (“ = —s—“‘“CSC;C;C;!;*~*@ hime “sh id "header-rOldHeadersiniz s docliment getSementBi6("p1") innarHT Ml. = New tert!" siscnpt> sfltody> sinamri> 2 Run by doubte wicking ths file name: 3. Itwllshow the foliownig outpul ‘ section of an HTML page. 2 Run the codeand eteck the eutput chtmi> Doel» triers ‘SOhange the Value of an Attribute 2 Create and run the following JawaSaript code To change the value of an HY ML altnbule, use im syntax cocunent getEiementiyld(id) attribute=new value, ITB ITES : COPA (NSOF ~Revised 2022) - Exercise 1.32118 6 IT &ITES Exercise 1.32,116 ‘COPA - JavaScript Embed JavaScript in HTML Pages Embed JavaScript in HTML to Display Information in Web pages ‘Objectives: At the end of this exertise you shall be able to * Use external javascript files in HTML. + display information with javascript. PROCEOURE TASK 1 Using external JavaScript files in HTML 1 Gpennotepad 10 Cliek Save 2. T pe thefellowing cada 11 Type filer a 402 Mtrd "function m=/Function() | 12 Select file type as All Files. sty #9 Sse Sec in sine ary Biya SENT? 14 Chose Notepad ) 15 Now goto the file destination: 2 Gick Save 16 Double Guckit te run, 4. Type filename ae myscit js 17 See fhe output as shown in Fig? & Fig? 5 Select ile ype as Ail Files € ‘Select destination in Desktop er any other location ‘Cick Save. 7 ‘Gose Notepad 8 Open Notepad agin © “Type the folownig eode (Fig2) I stead head body chioMy WebPagecint> button type="button’onelickerryFunction()*>Try itefbutton> inti TASK 2 Display information with JavaScript | [White the code'and save it with je21021 inten ramie ‘tte A Web page-title> Click the following to see the result: Click Me

Click the following to see the result:

Fad ™ cop: x \ EB cor: x \ @ dave: x \T lean x @ Java: xD) Ener x Y 1) Eo: x }Owork/ErrorHandling2 html This page says TASK 3: Use throwin javaseript 1 Open Notepad IT & ITES: COPA (NSOF- Revised 2022) - Exercise 132.117 2. Typethe following code 69 ‘ -eenpttype"tentjavasengt’> ee VEEL ‘=p>Clink the following to See the reault

i forms saree ‘ 7 Close Notepad ‘wondow enecror =tuhation 0 { ‘a NW run the fami fae 18 see the eeu (Fig 7) ‘alert("Anerror occurred"), 9 Glick the Click Me button (Fig-8) ) ~

Glick the following tose the result- soem ui Fol & | © filev//C:Adsers/sunil/Desktop/nimi%20work/ErrorHandlings html Click the following to see the result: [caste] FO fike///e:Atvers!sunil/Desktop/nion20worErrorHanclinge him : Click the following t0222 Th, page says (eee) Aeon rh IT ITES : COPA (NSOF - Revised 2022) - Exercise 1.02.117 n ira ies Exercise 1.92,118 COPA - JavaScript Embed JavaScript in HTML Pages Use objects and classes in JavaScript Objectives: At the end of thie exercise you shail be able to + display add two numbers using function + take input using prompt function + take confitmation using confirm method + using global variabte, PROCEDURE TASK 1. Display add two numbers using function 1 Open Notepad 2. Type thetollawing cade Click’Save Type tiename as act him 3 4 shtmi= 5 Select te type as At Files 6 head Select destination in Desktop or any other location ‘ttler Andersnitie® Sines =script> 7 Close Notepad. veran4; & Now run the him fie to see the result (See Fig) var Be6. Vareradslaibj; caloric), ‘Junction acata.b}{ retumaed: } sfecript> sihead> snogy> sunken TASK 2: Take input using jprompt function 1 Opentotepad 2 Type therfotiqwing cade stim che “itie>Prompt title= ssonpt> ‘var a=promel Ener a Number) vvarbs promt Enter another Number); var chesprompl("1-Add 2>Sub SoMul 4500 ‘Enter Chaice."), ‘varr=0,fleD, ‘Suntctifen) ( eta ft, ) a) document witet‘invalid choice), else ocement witey "Result is"), function acta) { retuma+b, ) functor suis, ) ( retuned, ) function musta.) { retuma’, } furetion diab) { returnai, i 3 ChckSave 4 Type fename as osioult imi 5. Select Mle type es All Fes. TASK 3. Take confirmation using confirm method 1 Open Notepad 2 Type the fotwing code, ‘shim shead> Contirmettitie> - imi om Click Save, ‘Type fiename as vant. htm ‘Selen Mle type 29 All Files Select destinationin Desktop or any ther iacation Click Save, (Close Notepad Naverun the htmitile to see the resuit, Fig3 ) 74 ITB.ITES : COPA (NSF - Revised 2022) -Exercise 1.82.18 IT&ITES Exercise 1.32.119 COPA - JavaScript Embed JavaScript in HTML Pages Describe Animation and Multimedia using JavaScript Objectives: At the end of this exercise you shall be ableto + manual Animation + automated Animation + rollover with a Mouse Event, PROCEDURE TASK 1: Manual Animation 1 Open notepad. Typethe following code =himl> Codestin Search App

3 Clicksave Output 4 Type filename as animationt htm Fat 3 Select fe type 2s ates Creal We ages 6 Select destination in desktop or other location. Click aa ea HTML 7 Close Notepad ee wai 8 Now run the htm! fileto see the result (922 Fig 1) esata eee TASK 2: Automated Animation 1 Opennotepad. 2 Type the following code Codestin Search App // Preload an image // Preload second image " /images/http.gif";

Move your mouse over the image to see the result

image2.s: imagel sre: Click save Type Mlename as animation3.ntrl Select Tle type as all nies Select destination in desctop or other location. Click save Close Notepad Now run thentmi ile to see the result (see Fig:3) Output Figs | Move your meuse over the mage to see the result mane HTML ai IT & ITES: COPA (NSGF- Revised 2022) - Exercise 132.119 7 IT&ITES Exercise 190.420 COPA - JavaScript Embed JavaScript in HTML Pages Develop dynamic HTML pages using JavaScript ‘Objectives: At the end ofthis exercise you-shall be able to + leam how te develop dynamic HTML Pages using JavaScript. Requirements ‘Tool sEquipment/Machines + Avorking PC with Windows O.5., Text Eattar (Notepad) & Browser = 1 No sbaten, PROCEDURE TASK 1: HTML Java script 1 Open Notepad, 2. Typethe following cade shea tithe Methed ofa JavaScript body acript types"tentfjavaseript> ‘docurnentavite(“JavaTpeint'y, -facripts ‘ethtnt> Click Save. ‘Tyne flename as page! him ‘Solact fa type as All Files. Select destination in Desktop or any other location, Click Save. 7 Close Notepad aos TASK 2: JavaScript and HTML event 8 Now goto the fle destination 9 Double Chick ttonun. 40: Browser can show you’a warning, {1 fivarning is shovi. click yelloe raming bar. 12 Select Allow Blocked Content, 13 A security waming can be shown, 14 Click yes, 15 New click “Try tt to run the javascsipt code in the page 16 Hello Worldevould be shown as output { Ref Steps 1 to 16-Task1 Shimi= shear tities 78 DHTML with JavaScript - “sscript ype="textjavaseript’> function checkGrade) ( var xp, toxt; p= dotument getBlemantByla"percentage”} velue; aparsebntip) ifir00 88 x <= 100){ document geiBlemantBylddemc”) innarHTML =| Sas pelseif(o80 £2 x <=90){ document getElement yld("demo") innerHTML =| at False if (e270 88 x <= 80) document getilemantByldi"demo") innerHiThiL. = “23%, ec Saeed 56 Ope paemnammn ow QF em prciege a Sie: av IT RITES: COPA (NSOF -Roviced 2022)- Exercise 1.32.120 hin heed> atlas getElement Byid.style.croperty example ehoad> =p id="demo'> This tat changes color whan click -onthe fellowing different buttons.

“button enclick="changs_Colen'green’)"> Green Biue