JavaScript

Document Sample
JavaScript Powered By Docstoc
					Introduction to JavaScript

            LIS390W1A
  Web Technologies and Techniques
           24 Oct. 2007
        M. Cameron Jones
            What is JavaScript?
• What is HTML?
• Programming language for controlling the
  content, presentation, or behavior of a
  webpage (HTML document, DOM) in the
  user’s browser.
      Server Land               Client Land

          HTML
                     Internet
            +
                                    JavaScript
        JavaScript
                                   Interpreter
 What can you do with JavaScript?
• Manipulate the DOM
   – Create, Remove, and Move nodes
   – Modify styles and other attributes
• Interact with the user
   – Listen for keyboard + mouse events
   – Process user input
   – Send messages to user
• Communicate with the server
   – Send and Retrieve data
• Interact with the browser
   – Detect browser version and settings
   – Firefox extensions are written in JavaScript
                      Examples
•   http://www.google.com/webhp?complete=1
•   http://maps.google.com/maps
•   http://www.walterzorn.com/dragdrop/dragdrop_e.htm
•   http://script.aculo.us/
•   http://dojotoolkit.org/demos
•   http://jsmsxdemo.googlepages.com/jsmsx.html
     How do we create JavaScript?
    <script type=“text/javascript”>
      <!-- // Java Script Goes Here -->
    </script>
•   In the <HEAD>
•   Inline with other elements
•   In URL’s with javascript: scheme
•   Various event attributes added to elements
           My First JavaScript
• Create a new folder in your I-Drive
  courseweb_html folder called “javascript”
• Open TextWrangler and create a new HTML
  file called “helloworld.html” and save it in
  your javascript folder
• Block out a basic HTML document with a
  <head> and <body>.
• Add a <h1> heading in the <body> with
  some message
          My First JavaScript
<html>
  <head>
     <title>Hello world!</title>
  </head>
  <body>
     <h1>Hello World</h1>
     <script type="text/javascript">
          alert("Hello World");
     </script>
  </body>
</html>
         My Second JavaScript
• Move the <script> element into the <head>
• Save the file and Refresh your browser
• What happened?
• The browser interprets the HTML in a “top-
  down” fashion.
• The Javascript executes before the body has
  been parsed, so the <h1> headline hasn’t
  been displayed yet.
       Some cooler JavaScript
• Save your file with a different name,
  “domexample.html” and close
  “helloworld.html”
• Popups are annoying, so let’s write our
  message dynamically into the webpage
• Delete the <h1> headline
• Move the <script> element back into the
  body
           Improved Hello World
<html>
   <head>
       <title>Hello world!</title>
   </head>
   <body>
       <script type="text/javascript">
       var hello = document.createElement("h1");
       var msg = document.createTextNode("Hello World");
       hello.appendChild(msg);
       document.body.appendChild(hello);
       </script>
   </body>
</html>
             Helloworld Autopsy
Let’s read this from right to left
var hello = document.createElement("h1");
  Create a new element on type “h1”
  Store that new element in a variable named hello
var msg = document.createTextNode("Hello World");
  Create a new text node with value “Hello World”
hello.appendChild(msg);
  Add the text node to the h1 node we created
document.body.appendChild(hello);
  Add the h1 node to the body of the document
              General Concepts
• Variables
   – document (predefined)
   – hello (we defined it with var)
   – msg (we defined it with var)
• Strings
   – “h1”
   – “Hello World”
• Functions
   – createElement
   – createTextNode
   – appendChild
       Getting more advanced
• Save your file with a new name
  “domexample2.html” and close the old one.
• Move the <script> into the <head>
• Add a hyperlink in the body
  <a href=“#”>Say Hello</a>
                   Getting tougher
<html>
  <head>
    <title>Hello world!</title>
    <script type="text/javascript">
    function sayHello() {
      var hello = document.createElement("h1");
      var msg = document.createTextNode("Hi");
      hello.appendChild(msg);
      document.body.appendChild(hello);
    }
    </script>
  </head>
  <body>
   <a href="#" onClick="sayHello()">Say Hello</a>
  </body>
</html>
                   Say Hello!
• Click the link
   What happened?
• Click the link a bunch of times
   What happened?
• The onClick attribute of the <a> tag allows
  us to execute some JavaScript every time the
  link is clicked
• We are calling our “sayHello” function
  defined above in the <head>

				
DOCUMENT INFO