(720) 728-8931

Interact with JavaScript

JavaScript Project Screenshot

Screenshot of the interactive JavaScript Project we will create during class

JavaScript is a web technology you can use to improve your user’s experience and is easy to learn. Yes, even YOU can learn to harness the power of JavaScript to meet your website objectives. JavaScript is a must-have tool for any Front-End Developer because it allows you to interact in real-time with your users, validate input from your users, update or retrieve data from the back-end asynchronously, manipulate any HTML or CSS settings without additional page loads and to give you access to the powerful new HTML5 objects such as; geopositioning, media plugins (audio/video), drag-n-drop, local storage, server-side events, canvas and more. JavaScript is flexible and easily included with any HTML document.

In Interact with JavaScript you will learn the basic constructs of the language as well as common uses of those constructs to make your web page react and interact with your users. You will be able to extrapolate the constructs and syntax to other popular C-based languages such as PHP to continue your journey in becoming a Web Developer. After we learn the basic concepts we will use our new found skills to write a useful interactive application you can use in any of your projects.

Course Description and Prerequisites

Now that you have a handle on HTML5/CSS3, it’s time to take your website development skills to the next level. Don’t be intimidated. You will learn the basics of coding in layman’s terms without being inundated by techno-speak. With JavaScript you can breathe life into your site by making it more dynamic and interactive, and by adding extra functionality to gather important visitor data. Learn the basic constructs of JavaScript programming to enhance your navigation menus, create powerful smart forms and manipulate user input to give them instant feedback and a custom experience. Take the mystery out of developing creative and interactive websites, and gain complete control of your site’s intended purpose! Prerequisite: It All Starts with HTML5/CSS3 or Basic understanding of HTML5/CSS3

Day One: Variables, Operators & Conditionals

On the first day we will dive right into JavaScript and write an inline script to get an idea of how it can improve the user experience. Following the introduction script we will take a look at variables and learn what they are, how they work and how to set them up. We will begin by creating a new JavaScript file that we plug into our HTML document via a <script> tag. By the end of the class, the utility script we will have written will have many useful functions you can return to for reference on all the basics of JavaScript. Now that we know what a variable is we will continue to learn the syntax and constructs to assign numeric or alpha values to a variable, work with variables arithmetically, compare variables with one another and how one goes about comparing multiple variable values. Once we have a good understanding of using and manipulating variables we will tackle the constructs of conditional statements including my favorite, the Conditional Operator, If…Else Statements and the Switch Case, all of which we use to make decisions and set up responses based on those decisions. We will end the day by covering the three JavaScript Popup Boxes and how we can use them both in debugging and interacting with our users.

Day One Outline Register CFU Outline PDF
  1. Greetings and Introductions

  2. An Introduction to JavaScript

    1. What is JavaScript?
    2. What Can You Do with JavaScript?
    3. A Brief History of JavaScript
    4. JavaScript and HTML
      1. The Script Tag
      2. HTML Inline JavaScript
      3. External JavaScript File
  3. JavaScript Statements

    1. Case Sensitive Unlike HTML
    2. End Each Statement with a Semicolon
    3. Execution Sequence of Statements
    4. JavaScript Code Blocks
  4. JavaScript Comments

    1. Single Line Comments
    2. Multiple Line Comments
    3. Comments as Documentation
    4. Comments as Tool for Debugging
  5. JavaScript Variables

    1. Variables are Case Sensitive (y vs Y)
    2. Variables Can Contain Values (x=5) or Expressions (x=y+z)
    3. Variables Must Start with a Letter or Underscore
    4. Semantic Variable Names
    5. Declaring Variables
      1. The JavaScript var Keyword
        1. Declaring Variables without Assigning a Value
        2. Assigning Values on Declaration
        3. Redeclaring Variables
      2. JavaScript Variable Types
        1. JavaScript Has Dynamic Types
        2. JavaScript Numbers
        3. JavaScript Strings
        4. JavaScript Booleans
        5. JavaScript Arrays
        6. JavaScript Objects
        7. Undefined, Null and Empty Variables
        8. JavaScript typeof Operator
      3. Local Variables
        1. The Scope of Local Variables
        2. Same Names, Different Functions
        3. Local Variables are Destroyed When Exiting the Function
      4. Global Variables
        1. The Scope of Global Variables
        2. Global Variables are Destroyed When Exiting the Page
        3. Not using the var Keyword Creates a Global Variable
  6. JavaScript Arithmetic Operators

    1. Addition (+)
    2. Subtraction (-)
    3. Multiplication (*)
    4. Division (/)
    5. Modulus (%)
    6. Increment (++)
    7. Decrement (--)
  7. Adding Strings in JavaScript

    1. Use the (+) Operator to Add Text Values
    2. Inserting Spaces in Strings Added Together
      1. Insert a Space in One of the Original Strings
      2. Insert a Space into the Expression
    3. Adding Strings to Numbers in JavaScript
  8. JavaScript Assignment Operators

    1. Assignment Operator (=)
    2. Addition Assignment Operator (+=)
    3. Subtraction Assignment Operator (-=)
    4. Multiplication Assignment Operator (*=)
    5. Division Assignment Operator (/=)
    6. Modulus Assignment Operator (%=)
  9. JavaScript Comparison Operators

    1. Is Equal to in Value (==)
    2. Is Equal to in Value AND Type (===)
    3. Is Not Equal to in Value (!=)
    4. Is Not Equal to in Value AND Type (!==)
    5. Is Greater Than (>)
    6. Is Less Than (<)
    7. Is Greater Than OR Equal (>=)
    8. Is Less Than OR Equal (<=)
  10. JavaScript Logical Operators

    1. The Logical AND (&&)
    2. The Logical OR (||)
    3. The Logical NOT (!)
  11. JavaScript Conditional Statements

    1. The Conditional Operator
      1. Used to Assign a Variable Based on Some Condition
      2. Syntax: variablename = (condition) ? value1 : value2;
    2. The If...Else Statement
      1. The If Statement: if (condition) { block of code }
      2. The If...Else Statement: if (condition) { block of code } else { block of code }
      3. The If...Else If...Else Statement: if (condition) { block of code } else if (condition){ block of code } else { block of code }
    3. The Switch Statement
      1. Used to Execute One of Many Blocks of Code
      2. Syntax: switch(n) { case 1: code block; break; case 2: code block; break; default: code block }
  12. JavaScript Popup Boxes

    1. The Alert Box
      1. User Must Click 'OK' to Continue
      2. Syntax: alert(string or variable);
      3. Use in Debugging
      4. Use console.log() for Debugging
    2. The Confirm Box
      1. Use to Ask User a Yes or No Question
      2. User Must Click 'OK' or 'Cancel' to Continue
      3. Returns a Boolean Value
      4. Syntax: confirm(string);
    3. The Prompt Box
      1. Use to Get Input from User
      2. User Must Click 'OK' or 'Cancel' to Continue After Entering an Input Value
      3. Returns User Input if 'OK' or null if 'Cancel'
      4. Syntax: prompt(string, default value);

Day Two: Loops, Functions, DOM Access & the Project

On Day Two we will continue our JavaScript discussion starting with more on JavaScript Functions. We will learn how to setup Functions with a singular focus and use multiple Functions to accomplish multiple tasks. We will look at passing variable values into Functions and returning calculated values back to the calling Function. We will also take a look at how to implement three JavaScript Loop constructs including the For Loop, the While Loop and the Do While Loop. After Loops we will turn our attention to JavaScript Events and how they can be helpful in interacting with your users. We will then learn more about the JavaScript Array and three ways in which we can define an Array. We will review some handy JavaScript String Object Methods for manipulating strings to our advantage. Lastly, we will learn how to access the DOM both HTML Elements and CSS Styling Properties so we can change anything we want on the fly. Finally, we will build our first JavaScript application to interact with our users and present information on demand in a way that saves precious browser window space.

Day Two Outline Register CFU Outline PDF
  1. JavaScript Functions

    1. Functions Prevent the Execution of Code When the Page Loads
    2. The Code Executes Only When the Function is Called
    3. A Function Must be Defined Before a Call is Made
    4. Defining a JavaScript Function
      1. Syntax: function functionname(par1, par2, ..., parX) { code block }
      2. Parameters are Variable Values Passed into the function
      3. A function Without Parameters Must Include ()
      4. A function Name is Case Sensitive
    5. The return Statement Specifies the Value to be Returned
    6. The Lifetime of JavaScript Variables
  2. JavaScript Loops

    1. The JavaScript For Loop
      1. Loops Through a Block of Code a Specified Number of Times
      2. Syntax: for (var i=startvalue; i <=endvalue; increment) { code block }
      3. The Increment Parameter Can be Positive or Negative
      4. Can Use Any Comparison Operator
    1. The JavaScript While Loop
      1. Loops Through a Block of Code While a Condition is True
      2. Syntax: while (condition) { code block }
    1. The JavaScript Do...While Loop
      1. A Variation of the While Loop
      2. Syntax: do { code block } while (condition)
      3. Loops Through a Block of Code at Least Once
      4. Continues to Loop if the Condition is True
    1. The JavaScript Break and Continue Statements
      1. The break Statement will Stop the Execution of the Loop and Execute Code that Follows if Any
      2. The continue Statement will Stop the Execution of the Current Loop and Continue with the Next Value
  3. JavaScript Events

    1. Actions that can be Detected by JavaScript
    2. When Detected a Call can be Made to a Function to Execute Some Code
    3. Allows the Ability to Create Interactive Web Pages
    4. All Elements in a Web Page Have Certain Events that can be Triggered
    5. Page Load Events
      1. onload
      2. onunload
    6. Mouse Action Events
      1. onmouseover
      2. onmouseout
      3. onclick
      4. ondblclick
    7. Keyboard Action Events
      1. onkeydown
      2. onkeyup
    8. HTML Form Events
      1. onfocus
      2. onblur
      3. onchange
      4. onsubmit
  4. More on JavaScript Arrays

    1. Arrays are Special Variables that can Hold More than One Value
    2. Use Loops to Loop Through Values of an Array
    3. The Three Methods to Create an Array
      1. Regular Array
      2. Condensed Array
      3. Literal Array
  5. Useful JavaScript String Object Methods

    1. length Property: Returns the Length of a String
    2. toUpperCase(): Converts a String to Uppercase Letters
    3. toLowerCase(): Converts a String to Lowercase Letters
    4. charAt(): Returns the Character at a Specified Index
    5. slice(): Extracts Part of a String and Returns a New String
    6. split(): Splits a String into an Array of Substrings
    7. substring(): Extracts Characters from a String Between Two Specified Indices
    8. concat(): Joins Two or More Strings and Returns a Copy of the Joined String
    9. indexOf(): Returns the Position of the First Occurrence of a Specified Value in a String
    10. lastIndexOf(): Returns the Position of the Last Occurrence of a Specified Value in a String
    11. trim(): Removes Whitespace from Both Ends of a String
  6. Accessing the DOM and CSS with JavaScript

    1. Get an HTML Element by It's ID: document.getElementById('idname');
      1. Returns the HTML Object
      2. Access Any Attribute Value of an Object
      3. Access the Inner Content Using object.innerHTML
    2. Get all HTML Tags in a Document: document.getElementsByTagName('tagname');
      1. Returns an Array of All Instances of the Specified Tag
      2. Loop Through Array to Get the Element Desired
      3. Can Use Array Index Value if Known: arrayName[i]
    3. Access an Element's CSS Properties: document.style.propertyName
      1. CSS Property Names in JavaScript are Camel Case
      2. All Property Values are Set as Strings
  7. Putting It Together: Interactive Class Project

What Former Students Have Said

Good class. Covered more topics than maybe the class was designed for.

David R. - August, 2015

Great way to learn a new programming language / web development!

Brennan L. - August, 2015

Loads of info in a short amount of time. Highly recommended.

Christopher S. - November, 2014

Great class. I just need some time to absorb JavaScript. Thanks!

Hilarie S. - November, 2014