1 / 47

JavaScript

JavaScript. CMPT 281. Outline. Introduction to JavaScript Resources What is JavaScript? JavaScript in w eb pages. Announcements. Assignment 3. Layout with tables. JavaScript Resources. Resources. Why JavaScript?. HTML + CSS + JavaScript. Separation of Concerns.

brie
Download Presentation

JavaScript

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 CMPT 281

  2. Outline • Introduction to JavaScript • Resources • What is JavaScript? • JavaScript in web pages

  3. Announcements

  4. Assignment 3 • Layout with tables

  5. JavaScript Resources

  6. Resources

  7. Why JavaScript?

  8. HTML + CSS + JavaScript

  9. Separation of Concerns

  10. Separation of Concerns

  11. What is Javascript?

  12. What is Javascript? • A scripting programming language • Cannot be run without a browser • Embedded in most web browsers • A way to create web pages that respond dynamically to user action • A tool for server-side development

  13. Types of computer languages • High-Level vs. Low Level • Compiled vs. Interpreted • Structured vs. Object Oriented • Scripting vs. Programming

  14. JavaScript • High-Level vs. Low Level • Compiled vs. Interpreted • Structured vs. Object Oriented • Scripting vs. Programming

  15. History • Need for ‘client side’ interaction • Code executes on the local machine • No need for network connection once script runs • Developed by Netscape in 1995 • (Not related to the Java Language) • Actually ECMAScript(ECMA-262) • en.wikipedia.org/wiki/ECMAScript • Several variants (JScript, Action Script…)

  16. What can JavaScript do? • It is a full programming language • API (application programming interface) is specific to working with browsers • Restrictions: • Security-based limitations • No networking • No access to local file system • Limited UI toolkit and graphics • (This is changing with HTML5)

  17. What can JavaScript do? • Benefits: • Close integration with the browser • Access the webpage and all elements within • Adjust or create HTML • Open and resize browser windows • Run animations, play sounds

  18. Example: writing to the page

  19. Example: loading a random image

  20. Where do scripts go? • In the HMTL page • Like styles, can be external, internal, or inline • Use these for different situations

  21. Where do scripts go? • For scripts that respond to user events, and for functions: • Either external or internal • In <head>…</head> • For scripts that write document content: • In <body>…</body>

  22. Body example <html> <head> </head> <body> <script type="text/javascript"> document.write("This message written by JavaScript"); </script> </body> </html>

  23. Internal example <html> <head> <script type="text/javascript"> function message() { alert("This alert was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html

  24. External example <html> <head> <script type="text/javascript" src="xyz.js"></script> </head> <body> </body> </html>

  25. How does JS access the page? • DOM: Document Object Model • A framework to describe a web page (document) in a tree-like structure

  26. DOM

  27. DOM

  28. Using the DOM to get at the page <html><body><p id="intro">Hello World!</p><script type="text/javascript">x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script></body></html>

  29. Using the DOM to get at the page <html><body><p id="intro">Hello World!</p><script type="text/javascript">x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script></body></html>

  30. JavaScript Basics

  31. JavaScript Basics • Statements • Variables • Events • Functions • Dialogs

  32. Statements <script type="text/javascript"> var a = 10; var b = 11; var c; c = a + b; alert(‘The answer is’ + c); </script>

  33. JavaScript Variables • Variables are used to store data. • Rules for variable names: • Variable names are case sensitive • They must begin with a letter or the underscore character • strname – STRNAME (not same)

  34. JavaScript Variables • Variables: containers for data • All variables have • Name • Type – JavaScript is loosely typed • Value or “null” • To declare a variable • varvariableName • Beware of reserved words: • E.g., ‘if’, ‘Document’, ‘Math’, etc.

  35. JavaScript Operators • Arithmetic Operators

  36. JavaScript Operators • Assignment Operators

  37. JavaScript Operators • Comparison Operators

  38. JavaScript Operators • Logical Operators

  39. User and Browser Events

  40. Functions <script type=“text/javascript”> function dontClick() { alert("I told you not to click!"); } </script> ... <input type="button" value="Don't Click Me!" onClick="dontClick()"/>

  41. Dialogs • alert("Hello!"); • confirm("Delete files?"); • var name=prompt("Your name?", "Tim Berners-Lee");

  42. Coding Tips • Check your statements are on one line • Check your " and ' quotes match • Take care with capitalisation • Lay it out neatly - use tabs • Use the Chrome developer tools • Or Firebug for Firefox

  43. A Word About Comments • JavaScript Comments • These comments must be within a script • // begins a single line comment • These can start anywhere on the line, but the remainder of the line becomes a comment • /* All of your comments here… */ • Everything between the start and end comment markers are comments • Can be on a single line or span many… • HTML Comments • <!-- All of your comments here… -->

  44. Ending Statements With a Semicolon? • With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). • Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! • Semicolons are required if you want to put more than one statement on a single line.

  45. Example

  46. JavaScript Libraries

  47. Reminders for this week • Do the JavaScript tutorials on w3schools: • 'JS Basic‘: www.w3schools.com/js/ • Assignment • Reading: • Pattern group I: Designing Effective Page Layouts • Pages 631-657

More Related