1 / 8

Understanding JavaScript Placement and Best Practices in HTML

This week's practical JavaScript lesson explores where to place your JavaScript code within an HTML document for optimal performance. It highlights popular conventions, such as inserting scripts at the bottom of the document to reduce load times. The lesson also covers sharing JavaScript between HTML documents via external files, the importance of form validation, AJAX concepts for asynchronous communication, and creating rich user interfaces with various interactive elements. Refer to the provided resources for examples and further experimentation.

jessica-mcgowan
Télécharger la présentation

Understanding JavaScript Placement and Best Practices in HTML

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 JS301 Week 3: Practical JavaScript

  2. Where does my JavaScript go? Popular convention says the HTML head: <!DOCTYPE html> <html><head> <title>JS301</title> <script type="text/javascript"> document.write('Hello World!'); </script> </head> <body></body> </html>

  3. Where does my JavaScript go? For best performance, but it as close to the bottom of the document as you can: <!DOCTYPE html> <html> <head><title>JS301</title></head> <body> ... <script type="text/javascript"> document.write('Hello World!'); </script> </body> </html>

  4. Where does my JavaScript go? If you want to share JavaScript between HTML documents, include it from an external file: <script src="myscript.js" type="text/javascript"> </script>

  5. Form Validation • Alert users to problems before submitting to the server • Make sure to also validate on the server - never trust the client! • http://jsfiddle.net/zymsys/enDzA/

  6. AJAX • Interact with the server without page loads • Asynchronous JavaScript and XML • XHR: XMLHTTPRequest • Not limited to XML - I prefer JSON • http://jsfiddle.net/zymsys/sHhsf/

  7. Rich User Interfaces • Dialogs: http://jsfiddle.net/zymsys/HcnRd/ • Tabs: http://jsfiddle.net/zymsys/AcUqr/ • Input Controls: • Autocomplete: http://jsfiddle.net/zymsys/eZNQk/ • Buttons: http://jsfiddle.net/zymsys/HqEng/ • Dates: http://jsfiddle.net/zymsys/vgzGU/ • More: http://jqueryui.com/demos/

  8. Next Week • Knockout? • OOP? • Patterns? • Something else?

More Related