JavaScript Basics

What is it?

• Light-weight language (Interpreted or parsed, not compiled)
• Object-oriented
• Client side (can do SS - not used much)
• NOT Java
• • LiveScript
  • JavaScript
  • JScript

Limitations:

• Can't create graphics (by itself)
• Doesn't work the same in all browsers

The client -side object hierarchy and Level 0 DOM

Mechanics

• Comments:
  • //This is a single line comment
  • /*This is a multiple
    line comment*/
  • 
    
• Troubleshooting
  • Netscape or Mozilla (FireFox - what I suggest you use)
  • • Type 'javascript:' in URL and hit return to open JavaScript Console
    • Go Tools > Web Developement > JavaScript Console -or- JavaScript Debugger (Venkman)
  • Internet Explorer
  • • PC: Double click on status bar error message (gives almost no information!)
    • Mac: Turn on error messages in Preferences > Web Content
  • JavaScript Protocol
  • • By typing 'javascript:' into the URL, you are envoking this protocol, meaning that you have access to all of the JavaScript on this page!
    • So - typing javascript: alert("hello"); will make the window execute the alert method
    • Also - typing javascript: myFunction(); will make whatever code is in myFunction execute!
• 
  
• Placement
  • Between a pair of <script> and </script> tags
  • • in body or head
    • Ex: (the language attribute is old, and you don't have to put it - I wont)
      <script language="JavaScript" type="text/javascript">
      <!--
      //comments, code and functions go here!
      var x=5;
      dansFunct(x);
      //-->
      </script>
  • From an external file specified by the src attribute of <script tag>
  • • <script type="text/javascript" src="../myScript.js"></script>
  • In an event handler, specified as the value of an HTML attribute such as onclick or onmouseover
  • • <a href="#" onclick="window.location='http://www.rit.edu'; alert(dansFunct())">click to make it happen</a>
  • As the body of a URL that uses the special javascript: protocol.
  • • <a href="javascript: window.location='http://www.rit.edu'; alert(dansFunct())">click to make it happen</a>
• 
  
• Dot Notation
  • For now - how to simply go down the DOM chain to find the element you are seeking:
  • All of these are finding the same element:
  • • document.images.dan.src
    • document.images['dan'].src
    • document.images[2].src
    • document.dan.src
  • Can get as complicated as:
  • • window.parent.frames[0].document.forms[0].elements[3].options[2].value
• 
  

Programming Refreshers

• Variables (type, scope, declaration)
• Decisions (if, switch)
• Loops (for, for...in, while, do...while)
• Functions

Objects

• Everything is an object!
• • Window
  • Document
  • Navigator
  • elements
• Properties - Object Descriptions
• • Name
  • Length
  • Source
  • Value
• Methods - Object Actions
• • write()
  • open()
  • cloneNode()
  • RemoveEventListener()

Events

• Object 'Triggers':
• • onload
  • onunload
  • onclick
  • onmouseover
  • onmouseout
  • onmousemove
  • onmousedown
  • onmouseup
  • onmove
  • onresize
  • onchange
  • onsubmit
  • onreset
  • onresize
  • onabort
  • onblur
  • onfocus
  • ondblclick
  • ondragdrop
  • onerror
  • onkeydown
  • onkeypress
  • onkeyup
  • ...

• JavaScript Event vs. HTML attribute
• • HTML attribute events are case in-sensitive (onmouseover -or- onMouseOver)
  • • <img src="pic.jpg" onmouseover="jsFunct();"> - OK!
    • <img src="pic.jpg" onMouseOver="jsFunct();"> - OK!
  • JS event (written between <script> tags) MUST be lower case (onmouseover)
  • • objName.onmouseover=functToHappen; - OK!
    • objName.onMouseOver=functToHappen; - Will Break!

-Tells us that JS is Case Sensitive! (var x is a different variable than var X)!

Functions

• Why functions?
• • Convenient, Cleaner Code, re-usability, can make execute only when we desire!
  
  
• Function Creation
• • Must use the function keyword with parenthesis and {}'s!
  • function dansFunct(arg1, arg2){
    //code goes here!
    }
  • 
    
• Function Calls
• • Simply put the name of the function in the code with ()! (that is 2 parenthesis!)
  • dansFunct();
  • -or-
  • dansFunct(arg1, arg2);
  
  
• return
• • Can be used to return a value
  • or jump out of a function early...
  
  
• Useful (pre-built) functions
• • setTimeout()
  • setInterval()
  • eval()
  • parseInt()
  • typeof()
  • Math.random()
  • Math.floor()
  • blur()
  • focus()

Arrays

• Simple array construction: (all the following are same!)
• • var newArr = new Array(3);
    newArr[0]="dan";
    newArr[1]=34;
    newArr[2]=6.1;
    
  • var newArr=new Array("dan",34,6.1);
  • var newArr = ["dan", 34, 6.1];

• Ordered set of indexed elements...
• • Ordinary vs. Associative
  • (indexed by numbers vs name value pairs)
  • • document.images[0].width - Index the array with a number
    • document.images['name'].width - Index the array with a name
    • • document.name.width - simply a property of the document

Build array & variable scope thingie...