JavaScript Wrap-up
JS-Disabled Browsers – Part 1 It is fairly common for JS to be disabled Some people intentionally disable JS Some spyware / anti-virus apps disable JS Some devices (e.g. certain cellphones) can’t run JS To avoid errors in JS-disabled browsers, you must place your entire script inside HTML comments. The comment should begin (and end) just inside the <script> tags. (Note: Use HTML, not JS comments – they are not the same.) <script type=“text/javascript”> <!-- Begin hiding from non-JS Browsers.... JavaScript code.... etc end hiding --> </script>
JS-Disabled Browsers – Part 2 The <noscript> tag: If JS is important to your page, you should notify the user so that if they have a JS-disabled browser, they know that your page may not work correctly. Use the <noscript> tag This tag must be somewhere in the BODY of your document (i.e. inside <body> tags Text inside the <noscript> tag ONLY displays on browsers without scripting capabilities (such as JS-disabled browsers). This tag should be somewhere inside the <body> section. <noscript> This page works best with JavaScript-enabled browsers. </noscript>
JS-Disabled Browsers Summary of code that should be used in ALL of your JavaScripts: 1. Around all of your scripts (but inside <script> tag): <script> <!-- JavaScript code here... etc... --> </script> 2. Inside <body> section: <noscript>This page is best viewed using JavaScript.</noscript>
Placing and Invoking Functions <html> <head> <title>First JS</title> <script language="JavaScript"> function test( ) { document.write("Hello from inside the test function."); } function anotherTest( ) document.write("Hello from inside the anotherTest function. "); </script> </head> <body> <script> test( ); //invoking the ‘test’ function anotherTest( ); //invoking the ‘anotherTest’ function </body> </html> Placing and Invoking Functions Note that the functoions are inside <head> Functions are invoked by simply typing their name and providing any required arguments (later). Because invoking a function is also JS command, this command must also be placed inside a <script> tag. Functions can also be invoked from inside forms (eg. onClick…) - later
Review: There are two ways to invoke (execute) a JS Function In the last example, we invoked a function by connecting a button click to the function. <input type=“button” value=“Click Me!” onClick=“runSomeFunction()” /> Recall that you can also invoke a function by simply writing its name inside a <script> tag. While JS code is usually placed inside <head>, there are times when you may wish to include some JS inside <body>. To do so, you must notify the browser that you are temporarily not writing HTML, and are instead, writing script. <html> Welcome to my first web page. I hope you like it... <hr /> <script> runSomeFunction(); </script>
<html> <head> <title>First JS</title> <script language="JavaScript"> function greetUser( ) { document.write("<h1>Hello!!!!</h1>"); } </script> </head> <body> <form name="form1"> <input type="button" value="Greet Me!" onClick="greetUser( )" /> </form> </body> </html> <html> <head> <title>First JS</title> <script language="JavaScript"> function greetUser( ) { document.write("<h1>Hello!!!!</h1>"); } </script> </head> <body> <script> greetUser( ); </form> </body> </html>
Recap of Must-Dos Anticipate JS-disabled browsers Place scripts inside an HTML (not JS) comment Use the <noscript> tag Respect naming conventions for functions and variables: First word in lower case Subsequent words capitalized – no spaces Must avoid “reserved words” Any JavaScript reference (such as this one) will have a list of these reserved words. Your book has such a list on p. 111
Comments Possibly even more important in JS than in HTML. Recall that in HTML, comments are placed between <!-- and --> Comments in JS use // , /* */ Individual lines: Anything after // through to the end of that line of text is ignored. Multiple lines: Anything between /* and */ This can span multiple lines document.write("Hello World"); //This is ignored.... /* Everything inside here ... .... .... is also ignored. */