1 / 24

Mobile Wireless Systems

Learn JavaScript programming language for web browsers, make interactive and dynamic web pages, enable JavaScript in web browser, redirect if JavaScript is disabled, use JavaScript functions effectively, get browser information, handle events in HTML tags with JavaScript.

orlando-gilmore
Télécharger la présentation

Mobile Wireless Systems

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. Mobile Wireless Systems Mobile Wireless Comms Lecture 7

  2. JavaScript

  3. JavaScript • Programming language for web browsers. Latest version is 1.8.1 (since 2009). • Microsoft’s own version: JScript. Not 100% compatible with JavaScript. • Is based on ECMA Script (specification ECMA-262 and ISO/IEC 16262), developed 1995. • Is object-oriented. Makes web pages highly interactive and dynamic. • References: http://www.w3schools.com/jsref/ http://www.javascriptkit.com/jsref/

  4. Use of JavaScript in HTML <script language="JavaScript“ type="text/javascript"> ... JavaScript code ... </script> • The <script> tag indicates scripting language. • Javascript needs to be enabled in the browser • Can be enabled by setting security to lower level.

  5. Enabling JavaScript in Web Browser • Set security settings to “Medium”. This will in general allow JavaScript to be executed. • In “Custom” security setting, find “enable scripting” and check this setting.

  6. Managing “JavaScript not enabled” If JavaScript is not enabled in browser: <noscript> <p>You need to enable JavaScript, otherwise this site will not work properly!</p> </noscript>

  7. Managing “JavaScript not enabled” • Several ways of handling missing JavaScript support: • Within one web page, provide alternative to scripting within the <noscript> tag pair. • If JavaScript is not supported by browser, then redirect to a page without JavaScript. • If JavaScript is supported by browser, then redirect to a page with JavaScript.

  8. Example: One Single Webpage <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My first JavaScript Example</title> </head> <body> <script language="JavaScript" type="text/javascript"> var a = 1.234; </script> <noscript> You need to enable JavaScript, otherwise this site will not work properly! </noscript> This line is shown no matter if JavaScript is enabled or not.<br> <script language="JavaScript" type="text/javascript"> document.write("This is shown only when JavaScript is enabled<br>"); document.write(" <b>a = " + a + "</b>"); </script> </body> </html> File: http://creativetech.inn.leedsmet.ac.uk/MWC/JavaScript1.html

  9. Redirect if JavaScript Disabled <NOSCRIPT><meta http-equiv="refresh" content="2; URL = PageWithoutJavaScript.html">  </NOSCRIPT> • This method does not validate with w3 validator. http://creativetech.inn.leedsmet.ac.uk/MWC/RedirectIfNoJavaScript.html

  10. Redirect if JavaScript is Enabled <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>javascript or no javascript</title> <script type="text/javascript"> <!— location.href="JavaScript1.html"; //--> </script> </head> <body> <div>This is the javascript disabled page</div> </body> </html> http://creativetech.inn.leedsmet.ac.uk/MWC/RedirectIfJavaScript.html

  11. JavaScript Functions • JavaScript provides a set of functions for doing specific tasks. • Also: users can write functions themselves. • Examples of built-in JavaScript function: • document.write(textstring): • Prints text or variables on the web page. • document.getElementById(idstring): • Gets HTML element (DIV or other) which is named by the attribute “id”. • alert(): • Outputs a message box.

  12. Example Usage Write text: document.write("hello, world"); Get an element of web page: var d = document.getElementById("tag1");

  13. Example of User-Defined Function function ShowRandomNumber() { var a = Math.random(); // shows a random number between 0 and 1 alert("random number: " + a); return a; } http://creativetech.inn.leedsmet.ac.uk/MWC/JavaScriptFunction.html

  14. Get Browser Information Special variables in JavaScript contain some important information: Detailed information sent in the HTTP request header by the client: navigator.userAgent; Simple name of the browser (is often incorrect): navigator.AppName; Example: http://creativetech.inn.leedsmet.ac.uk/MWC/

  15. Events • Since HTML 4, most HTML tags can capture “events”: • onload, onunload, • Mouse events: onclick, … • A JavaScript function can be assigned to each event that occurs. • http://www.w3schools.com/TAGS/ref_eventattributes.asp

  16. Examples for Event Capture • Action after the web page has loaded: <body onload="DoSomething()"> • Action after a button has clicked: <input type="Button" onclick="DoSomethingElse()"> • The functions need of course to be defined, otherwise no action is being done.

  17. Example: Modify Tag Attributes • http://creativetech.inn.leedsmet.ac.uk/MWC/JavaScriptAttributes.html function ChangeHeadingColor(color) { d = document.getElementById("heading"); d.style.backgroundColor = color; }

  18. Output by JavaScript Directly into web page: document.write("text to write"); In a dialog box: alert("text"); Into a pre-defined area in a HTML tag: document.getElementById("tag1").innerHTML = "text to write"; http://www.w3schools.com/dhtml/dhtml_javascript.asp

  19. JavaScript in Separate Files • Javascript content can be in separate files, which can be included: • Locally: <script src="js/geo.js" type="text/javascript" charset="utf-8"></script> • Remote: <script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script> • Files can contain variables and functions to be used later in the HTML code.

  20. JavaScript from APIs • There are external Application Programming Interfaces (APIs) offered by many services, for example: • Google Maps http://code.google.com/apis/maps/documentation/javascript/ • Yahoo http://developer.yahoo.com/yui/ • jquery http://jquery.com/

  21. JavaScript and Validation • HTML validators only check HTML code and get confused by JavaScript. • If the following are within JavaScript text output: </b>, </p>, or any other end HTML tags, they are recognised by the validator, but the begin tags are not recognised. • You need to use the escape sequence “\/” to create “/” in text output. • http://www.htmlhelp.com/tools/validator/problems.html#script

  22. Validation in Expressions • Special characters “&”, “<“, “>” in mathematical expressions cause XHTML validation error: • Put within the script area the following, to exclude such expressions from XML parsing: <script ... > <![CDATA[ ... ]]> </script> • CDATA = non-parsed Character Data. Validators and parsers will ignore what is defined as CDATA.

  23. Limitations on Mobiles • Limited stack size: • This limits the level of how “deep” nesting can go. • Limited page size: • Can be 10 MB page size limit. Leeds Metropolitan University Faculty of Art, Environment and Technology

  24. Browser Compatibility Tests • HTML 5: • http://html5test.com/ • Web Standards Project: http://www.acidtests.org/ • ACID 3 test: • http://acid3.acidtests.org/ • Javascript Compatibility tests: • http://robertnyman.com/javascript/ Leeds Metropolitan University Faculty of Art, Environment and Technology

More Related