Skip to content

Introduction to JavaScript

Jump to bottom Edit New page
yicui edited this page Feb 5, 2013 · 2 revisions

Note: A gist is created for this lecture note.

What Can You do with JavaScript?

  • Creating HTML Tags on the Fly
<head>
...
  <script type="text/javascript"> 
    document.write("<h1>This header is created by JavaScript</h1>"); 
  </script>
</head>
  • The code appears within the <script>...</script> pair
  • <script> can appear within <head> or <body>, or an external file
  • Semicolon or no semicolon? Doesn't matter
  • Displaying Time & Date
<head>
  <script type="text/javascript"> 
    var d = new Date();
    var time = d.getHours();
    document.write("<p>The curren time is " + d + "</p>");
  </script>
</head>
  • JavaScript is a dynamic type language, so you don't have to specify the type in variable declaration, just var is enough
  • JavaScript is object oriented, here Date is a Javascript predefined class, and you can certainly define you own classes
  • Writing Functions responding to Events
<head> 
  <script type="text/javascript"> 
    function displaymessage() { 
      alert("Hello World!") 
    }
  </script> 
</head> 
<body> 
  <form> 
    <input type="button" value="Click me!" onClick="displaymessage()" > 
  </form> 
</body>
  • The function displaymessage reacts to onClick, which is a mouse click event
  • Other popular events include onMouseOver, onSubmit, onLoad, etc.
  • There is no void or any return type in the function signature, cause you can't specify types in a dynamic type language anyway
  • But this doesn't prevent a JavaScript function from returning a value
  • Also we need the function keyword, otherwise we can't distinguish function call from function declaration!

Document Object Model (DOM)

  • A Tree Structure

    • The text in the HTML elements are text nodes
    • HTML attribute is an attribute node

    alt text

    • Every node has exactly one parent, except the root which has no parent
    • A node can have any number of children
    • Siblings are nodes with the same parent

    alt text

DOM Properties and Methods

  • Properties
    • x.innerHTML: the text value of x
    • x.nodeName: the name of x
    • x.nodeValue: the value of x
    • x.parentNode: the parent node of x
    • x.childNodes: the child nodes of x
    • x.attributes: the attributes nodes of x
  • Methods
    • x.getElementById(id): get the element with a specified id
    • x.getElementsByTagName(name): get all elements with a specified tag name
    • x.appendChild(node): insert a child node to x
    • x.removeChild(node): remove a child node from x
  • Commonly Used Objects
    • Document: the current HTML document
    • Navigator: the browser
    • Window: the currently active tag

A Concrete Example: Edit-in-Place

  • Have both the text and input elements in one place, but only show one type of them at any given time
<span class="editinplace">
  <span>02/07/2012</span><input type="text"/><input type="button" value="Save"/><input type="button" value="Cancel"/>
</span>
  • You can initialize the visibility setting in the styling sheet, but CSS can only carry you this far
.editinplace input { 
  display:none;
}
.editinplace:hover { 
  background:yellow;
}
  • You need JavaScript to act upon mouse-clicking events generated by the user
<span class="editinplace">
  <span id="assignment1duedate" onClick="edit('assignment1duedate')">02/07/2012</span>
  <input type="text"/><input type="button" value="Save" onClick="modify('assignment1duedate', true)"/>
  <input type="button" value="Cancel" onClick="modify('assignment1duedate', false)"/>
</span>
  • JavaScript mainly relies on getElementById to retrieve elements
  • You can call parentNode and childNodes to access parent and sibling nodes of an element
function edit(id) {
  var node = document.getElementById(id);
  node.style.display = 'none';
  var text = node.innerHTML;
  var childNodeArray = document.getElementById(id).parentNode.childNodes;
  for (var i = 0; i < childNodeArray.length; i++) {
    switch (childNodeArray[i].type) {
      case "button":
        childNodeArray[i].style.display = 'inline';
        break;
      case "text":
        childNodeArray[i].value = text;
        childNodeArray[i].style.display = 'inline';
        break;
      default:
        break;
    }
  }
}
  • JavaScript is fully capable of styling, in this case toppling the visibility of text and input elements
    • But this should be considered as the last resort, when CSS is incapable of reacting to certain user events
function modify(id, save) {
  var node = document.getElementById(id);
  var childNodeArray = document.getElementById(id).parentNode.childNodes;
  node.style.display = 'inline';
  for (var i = 0; i < childNodeArray.length; i++)  {
    switch (childNodeArray[i].type) {
      case "button":
        childNodeArray[i].style.display = 'none';
        break;
      case "text":
        if (save == true) 
          node.innerHTML = childNodeArray[i].value;
        childNodeArray[i].style.display = 'none';
        break;
      default:
        break;
    }
  }
}
Add a custom footer
Add a custom sidebar
Clone this wiki locally