kirklandd
Uploaded by
7 SLIDES
99 VUES
70LIKES

JavaScript in extern files

DESCRIPTION

Learn how to separate JavaScript code into external files and include them in HTML for reusability. Explore error handling, events, and actions in HTML documents.

1 / 7

Télécharger la présentation

JavaScript in extern files

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript in extern files JavaScript canbeseparated from the html file (eg myscripts.js ) and thenbeincluded in the html file wherethey is used – the source canthenalsobereused in different html files.It works as the source wereplaced in the html documentdirectly. <script type="text/javascript” src=”myscripts.js”> </script>

  2. Error handling try { // code witch might fail } catch(err) { // error handling eg. alert("Error description: " + err.description); }

  3. Events - musseposition • Mouse-events used for fun • <script type="text/javascript"> • document.onmousemove=moveWin; // mowe when mouse is moved to the window • function moveWin() • { • var x = event.clientX; • var y = event.clientY; • x = x+10; • y = y+10; • document.all.knap1.style.position = "absolute"; • document.all.knap1.style.left = ""+x; • document.all.knap1.style.top = ""+y; • window.status=x+" : "+y; • } • </script> • <html> • <body> • <input id="knap1" type=button value=”Catch me" style="position: absolute" /> • </body> • </html> • more here: http://www.javascriptkit.com/jsref/event.shtml

  4. Action when a field is left whth mouse click or keyboard • A small script that change the text of an input field to uppercase when you ar leaving the field. • <html> • <head> • <script type="text/javascript"> • function upperCase() • { • var x=document.all["fname"].value; • document.all["fname"].value = x.toUpperCase(); • } • </script> • </head> • <body>Enter your name: • <input type="text" id="fname" onmouseout="upperCase();" onblur="upperCase();"> • </body> • </html>

  5. Action when you load and unload the html document • A drill page - something that's often used online to force you to stay on a page • <script type="text/javascript"> • this.id = "drillewindue"; • var nyWindow = null; • function luk () // public metode på winduet • { • alert("lukker også andet window"); • if (nyWindow!=null)nyWindow.close(); • } • function createNewDoc() • { • var windowURL = ""; • var windowID = ""; • var windowProperty = 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0'; • nyWindow = this.open(windowURL,windowID,windowProperty); • nyWindow.document.write('<htlm><body onunload="lukny();">Window der ikke er til at lukke</body></html>'); • nyWindow.document.close(); • nyWindow.lukny = function() // public metode på winduet • { • alert("du må ikke lukke dette window"); • createNewDoc (); • } • } • </script> • <html> • <body onunload="luk()" onload="createNewDoc()"> • Drille window der åbner window der ikke kan "lukkes" • </body> • </html>

  6. Replacing html / text items • html / text content can be replaced with properties eg. on body • document.body.innerHTML =”<br> New Content <br>”; • document.body.innerText =”New Content”; • is also good to use in conjunction with the div and span objects, which, like forms, can contain several elements.

  7. Object collection in document • all - collection of all objects in the document • forms • applets • images • frames

More Related