Day 1 Scripts

This pair of scripts are used at the beginning of the 7-Day JavaScript Applications course at Eleven Fifty, now replaced by this course.

Script 1: Writing 1-10 list items

Files:

• index.html

In the process of building this project, students learn about the following:

• Basic HTML5 document structure.
• Including JavaScript code inside a <script> element.
• Reading user input with prompt.
• Testing numeric values with isNaN.
• Basic conditions.
• while, do... while, and for loops.
• DOM basics, including the document object.
• Output with document.writeln.

This project includes markup and code in a single file and does the following:

• Prompt the user for a first name.
• Prompt the user for a last name.
• Prompt the user for a number between 1 and 10, repeating the prompt upon receiving invalid input.
• Write a <ul> to the page, containing x <li> elements (with the supplied first and last name), where x is the number entered by the user.

Script 2: Roster (not-so-mega)

Files:

• roster.html
• js/roster.js

In the process of building this project, students learn about the following:

• Linking to external .js files from an HTML document.
• Selecting DOM elements with document.querySelector
• Very basic CSS selector syntax.
  • Tutorial and game for practice: http://flukeout.github.io/
  • Reference: http://tutorials.jenkov.com/css/selectors.html
• HTML forms, including text inputs, select boxes, and submit buttons.
• Reading values from a form.
• Basic form validation.
• Using focus() and select() on form fields.
• Basic event handling, including preventing default behavior.
• Editing DOM elements with innerHTML.
• Writing functions.
• String functions: split, substr, toUpperCase, trim
• Looping through Arrays.
• Array function: join
• Modifying style with JavaScript.