Java Script Wrapup JSDisabled Browsers Part 1 It

Java. Script 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. . . . Java. Script 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 Java. Script-enabled browsers. </noscript>

JS-Disabled Browsers • Summary of code that should be used in ALL of your Java. Scripts: 1. Around all of your scripts (but inside <script> tag): <script> <!-Java. Script code here. . . etc. . . --> </script> 2. Inside <body> section: <noscript>This page is best viewed using Java. Script. </noscript>

<html> <head> <title>First JS</title> <script language="Java. Script"> Placing and Invoking Functions function test( ) { document. write("Hello from inside the test function. "); } • Note that the functoions are inside <head> • Functions are invoked by simply typing their name function another. Test( ) and providing any required { arguments (later). document. write("Hello from inside the another. Test function. "); • Because invoking a } function is also JS </script> command, this command </head> must also be placed inside a <script> tag. <body> • Functions can also be <script> invoked from inside forms test( ); //invoking the ‘test’ function (eg. on. Click…) - later another. Test( ); //invoking the ‘another. Test’ function </script> </body> </html>

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!” on. Click=“run. Some. Function()” /> • 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> run. Some. Function(); </script>

<html> <head> <title>First JS</title> <script language="Java. Script"> function greet. User( ) { { document. write("<h 1>Hello!!!!</h 1>"); } document. write("<h 1>Hello!!!!</h 1>"); } </script> </head> <body> <form name="form 1"> <script> <input type="button" value="Greet Me!" on. Click="greet. User( )" /> greet. User( ); </script> </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 Java. Script 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. */
- Slides: 9