Show Admin


LINKS:
  1. Article about scripting languages
  2. Crimson Editor
  3. JavaScript Games
  4. FF download


  1. Introduction

    For day one we'll just go over some things you can do with JavaScript and I'll show you some basic tasks that you use often. You may not understand all the code that you see but don't worry. In the following classes we'll start getting into the details of JavaScript as a programming language. Hopefully some of the things that might confuse you tonight will start to become clear as the course progresses.

    (Note: one of my goals for day one is that you understand the power of document.getElementById(). Although you may not understand it letter by letter, I want you to understand how you can use it in combination with element id attributes).

    Talking points
    A few good books on Javascript.
    JavaScript runs on the client (in the browser window).
    HTML is the content
    CSS is the presentation
    JavaScript is the behavior
    Small sample scripts
    Don't try to understand every little detail, accept the arbitrary
    Look at other people's code.
    The future of JavaScript looks bright (HTML5)

    We are going to spend most of our time looking at code samples. Don't worry if you don't understand everything (but feel free to ask any questions).
    Hopefully, as we look at code, you'll have some light bulb moments. When I was learning JavaScript I got hung up trying to understand every single little detail.

    Here are some examples of what you can do with JavaScript. Some are very simplistic, while others really demonstrate the power of JavaScript.
    Respond to user events
    Animation
    Validation
    Alter the content of a page or element
    Image swaps
    Alter the style of a page or element.
    Games
    JavaScript Text Editor
    Google Maps

  2. Download FF and demonstrate view source
    Download course files from my website

  3. Embedding JavaScript in HTML
    Embedded in script tag
    Embedded in in-line HTML
    Embedded in external .js file
    Our Template

  4. Browser Issues
    Check your code in many browsers (and versions, on many operating systems)
    It's getting better!

  5. Common HTML elements that we'll be using.
    div, inputs (type=text,button,radio,checkbox,select,submit), textarea

  6. Respond to Events
    Respond to user events
    Samples
    Advanced Samples

  7. Manipulate Styles
    Rollover
    Another Rollover
    Changing Display CSS Property
    More Advanced Example
    Changing the position of an element.

  8. Alter Content
    Alter the content of a page or element

  9. Syntax and Errors
    This will be the most frustrating part of learning JavaScript!!!!!!!!!
    JavaScript is case sensitive!!!!!
    Lines end in semi-colon;
    Demonstrate Error Console in FireFox
    Using ctrl-g in your editor
    99% of all my errors are syntax errors.
    1. Did you forget a semi colon?
    2. Did you forget to close a parenthesis?
    3. Is your capitalization correct?

  10. Comments


  11. EXERCISE
    EXERCISE Completed


NOTES FROM DAY 1
  1. Download FF, Web Developer plugin, Crimson, and class files right away.
  2. When going through the samples, work from your local copy, not the files on my web server.
  3. Optional:Rather than using view sorce, just open the sample file in Crimson to view source (so you can edit quickly).
  4. RUN CODE EARLY AND OFTEN as you are developing!!!!
  5. I checked Dreamweaver, it does not seem to have intellisense for JavaScript, but we can check with John Montet
  6. Hypothesis about error on 'line 1' - it seems to occur when JavaScript embedded inline has errors
REVIEW
  1. JavaScript is event driven W3C events
  2. document.getElementById() to 'get a handle' on an html element - note that it's in camelCase!
  3. JavaScript is case sensitive
  4. camelCase
  5. CSS style notation vs. JavaScript style notation
  6. value attribute
  7. name vs. id attribute
  8. lines end in ;
  9. display style property (block, none, inline)
  10. innerHTML
  11. error checking in FF

PROGRAMMING FUNDAMENTALS
  1. Variables
    Variables
    Variables 2
    String Variables
    String concatenation
    String concatenation with escape characters.
    Booleans
    Most full blown Object Oriented Programming languages are strongly typed, meaning that when you declare a variable you must specify its type.
    But JavaScript it loosely typed.
  2. null and undefined
    null and undefined example
  3. VARIABLE EXERCISE - MIGHT BE BROKEN!!!!! (Note for future classes - do an exercise more like string-function-exercise.html before throwing them into this fire!)
  4. Code Blocks {} - group a set of instructions to together
    Code blocks are used with functions and control structures
    Code blocks can be nested.
    Two styles for code blocks...

    function{

    }

    AND

    function
    {

    }

  5. Functions
    Functions do work (process a set of instructions) when they are called or invoked.
    Function 1
    Function 2
    Function That Uses Inputs
    Function with arguments/parameters
    Function that calls another function
    Function with return value
    Function with BOOLEAN return value
    Function with return value 2
    Side Note: Functions in ActionScript
    Because of the importance of functions in JavaScript (or any programming language)....PLEASE ASK QUESTIONS BEFORE DOING THE EXERCISE!
    DON'T FORGET TO END YOUR LINES WITH A SEMI-COLON;
    FUNCTION EXERCISE (Note for future classes - do string-function-exercise.html before this one!)

REVIEW
  1. variables - we use the var keyword to declare them and a literal value to initialize them.
  2. null and uncefined
  3. functions - we call or invoke them
  4. parameters - we 'pass' them into functions (we had some confusion over this, but we'll try to clarify)
  5. return values - we use the return keyword to do this
  6. JavaScript is loosely-typed (why?)
  7. parseInt() and str.toUpperCase()
  8. booleans
  9. getting a handle on an element by it's name attribute, rather than its id attribute
  10. we concatenate strings
  11. escape characters \' \" \n
  12. What's the diff....?

    var someVariable = document.getElementById("txtFirstName");

    var someOtherVariable = document.getElementById("txtFirstName").value;

  13. Portable FF (also included in class files)

    OPERATORS/IF/ELSE/WHILE

  1. String Concatenation Revisited
    Concatenation Example
  2. Exercise
  3. Operators
    Operators Example
  4. Control Structures
  5. if statements
    if Statement Example
    if Using Booleans Example
  6. else
    If/Else Statement Example 1
    If/Else if
  7. EXERCISE


REVIEW
  1. Operators - quick review
  2. parseInt("STRING")
  3. Code Blocks and Nested Code Blocks
  4. Control Flow
  5. if statements
  6. if else statments
  7. if else if



  1. while loops
    While Loop Example 1
    While Loop Example 2
    While Loop Password Example
    Watch out for interminable loops!
  2. EXERCISE
  3. Arrays (getting arrays with getElementsByName, or document.a)
    An array is like a container for grouping together a set of variables. A single array can contain many different values. You can store and access individual values contained in the array (known as the array's elements). You can also work with the values as a group by manipulating the array variable directly. The most common type of array is an indexed array, which uses a number index to select from among the array's values. ActionScript 3 includes two classes that serve as indexed arrays:
    more on ActionScript arrays
    Array Example 1
  4. EXERCISE
  5. More on Loops (now that we know about arrays)
    For Loop
    Now we're getting into the really useful stuff!(Exercise)
    Always 'break' out of your loops when you've found what you're looking for.
  6. EXERCISE
  7. EXERCISE TO MAKE UP FOR THE ONE THAT FLOPPED IN WEEK 2!


REVIEW
  1. while loops
  2. infinite loops!!!
  3. arrays - index, element, associative, .length
  4. += operater
  5. for loops - for(initialize; test; increment){}
  6. document.getElementsByName()
  7. JavaScript properties and HTML attributes
  8. var arCheckBoxes = document.getElementsByName("someCheckBoxes");
    for(var x=0; x < arCheckBoxes.length; x++){
        var currentCheckBox = arCheckBoxes[x];
        currentCheckBox.checked = TRUE/FALSE;
        //YOU COULD CONDENSE THE PREVIOUS TWO LINES INTO A SINGLE LINE...
        //arCheckBoxes[x].checked = TRUE/FALSE;
    }



  1. MORE ON FOR LOOPS AND ARRAYS!!!!
  2. Getting the selected option from a select box(revisit the for loop exercise)
  3. the break; statement
  4. EXERCISE TO MAKE UP FOR THE ONE THAT FLOPPED IN WEEK 2!
  5. Image Swaps
    Example
    Exercise

REVIEW
  1. EVALUATIONS
  2. for loop
  3. break statement
  4. onmouseover
  5. onmouseout
  6. new Image()


  1. Getting the selected option from a select box(revisit the for loop exercise)
    Exercise
  2. Keywords
    List of keywords
  3. DOM (Document Object Model)
    Download the DOM Inspector and Web Developer Tools for FF.
    It starts with the window object
    The document object represents an HTML document
    DOM Chart
    DOM Reference

    Frames
  4. Timers and Animation
    Example
    Exercise
    GAME exercise that we did as a class
  5. variable scope
    don't initialize a variable to an html element before that html element has loaded
    ** A good example for this is the image swap
  6. String,Array functions (split, indexOf)
  7. continue keyword
  8. other loops - for in, do while
  9. event keyword
  10. switch case


EXTRAS
  1. Custom Pop Up Window
  2. Show/Hide Box
  3. Open new browser window
  4. Image Fade