JavaScript Boot Camp Resources Site

Fall 2022

proudly featuring the Mega Man Dance--click speaker in bottom right to toggle music

---

Labs:

Lesson 0 (Preliminary HTML/CSS Added Module)

Lab 1: Hello, World

• Create a new HTML document (as always, start with the boilerplate template: “!” shortcut in Visual Studio Code)
• Include the following elements: h1, p
• Ideally, include the text “Hello, World!” somewhere in there.

Lab 2: Images/Links/Nesting

• Create an HTML document
• Include the following elements: img, a, strong, em, u
• Of the elements strong, em, and u, at least two must be nested together.

Lab 3: CSS Stylesheets

• Create a "style.css" file
• Link it to an HTML document with at least two different elements
• Create a CSS rule for each element, with at least 2 properties each (for a total of at least 4 properties)
• Make sure to have at least one of your elements appear at least twice in your HTML document

Lab 4: The Revenge of Hello World; using the alert() method

• Make an HTML document
• Add a script element inside the body element, ideally at the bottom
• Add an alert(“”); inside, with the string of your choice inside the quotes. The example uses alert(“Hello, World!”); but you may change the phrase if you wish.
• Don't forget to end the line of JavaScript code with a semicolon!

~~~

Lesson 1: Introduction to JavaScript

Lab 5 (CIW Lab 1-2): appName and appVersion

• Follow instructions as given on the CIW curriculum
• Also be sure to add a comment in HTML and a comment in JavaScript as per the lecture!

~~~

Lesson 2: Working with Variables and Data in JavaScript

Lab 6 (CIW Lab 2-2): Storing User Data in a Variable

• Follow instructions as given on the CIW curriculum

Lab 7 (CIW Lab 2-5): Using the prompt() Method

• Follow instructions as given on the CIW curriculum

Lab 8 (CIW Lab 2-6): Using the confirm() Method

• Follow instructions as given on the CIW curriculum

~~~

Lesson 3: Functions, Methods, and Events in JavaScript

Lab 9: Return Statements/Functions

• Create a new HTML document.
• Add a button element in the body with the following attributes/values: type="button" onclick="returnExample();". Give it some text as its content, like "Let's do a Return"
• Create a script element at the bottom of your body element.
• Create a function called returnMe() that does the following:
• -declares a variable named examplePhrase and initializes it to a greeting (like "Hello")
• -declares another variable, named examplePhrase2, and initializes it to a farewell message (like "Goodbye")
• add a return statement concatenating examplePhrase and examplePhrase2
• Create an additional function named returnExample() that does the following:
• -declares a variable, finalPhrase, initialized with the value returnMe();
• -uses an alert(); method call that shows finalPhrase to the user.

Lab 10: The Parrot Lab

• Follow along with the recording of the lesson--it's complicated!
• parrot.jpeg

Lab 11: Normalizing Input

• Create a basic one question quiz script that normalizes input to accept answers regardless of case.
• There should be at least two answers accepted for the same question.
• Use a logical or operator to set up a ternary/conditional statement determining which message to show the user (one for a correct answer, one for a wrong answer).
• Use a workaround so "null" answers (empty input or if user clicks "Cancel") aren't run through toUppercase() and don't break anything.
• This one introduces some new concepts--it may be helpful to review the video.

Lab 12: Event Bubbling

• Create an HTML document.
• Give the body a background-color property with the style attribute in its start tag, and an onclick event handler that triggers an alert() that tells the user in some way that they clicked the body.
• Create a div element inside the body of your page. Give it a different, contrasting background color with the style attribute in its start tag. Give it a width of 800px and a height of 400px, also through the style attribute in its start tag. Finally, give it an onclick event handler that triggers an alert() telling the user in some way they clicked the div.
• Create a button element inside the div element. Don't forget to give it type="button" in the start tag to avoid compatability issues. Give it an onclick event handler triggering an alert() that tells the user in some way they clicked the button.
• Click on each--the body (visible based on its background-color), the div (visible based on its background-color), and the button--and see what happens.

~~~

Lesson 5: Controlling Program Flow in JavaScript

Lab 13: if Statements

• Create an HTML document with a script element in the body.
• Prompt the user for an answer to something using a prompt(); and accept input from them in a format you can then verify. Make the question something with multiple possible answers (at least 2 different unique correct answers).
• Using the various types of if statements you’ve learned so far, make it so your script provides unique feedback for each correct answer and one catch-all response for all incorrect answers. (You can communicate this on the page, in alerts… your choice)
• Feel free to refer back to the examples we’ve done so far and to your e-textbook.

Lab 14: the Lab That Wasn't

• This is that one we started in class but that I didn't have the correct code for saved and that we were thus unable to finish. It counts as an automatic "full credit" lab for grading purposes--you don't have to do/submit anything. It's on me. Sorry again about it not working correctly!

Lab 15: switch Statements

• Create an HTML document with a script element in the body.
• Make a basic program that does SOMETHING with a switch statement and follows the following guidelines:
• Your switch must have at least 3 specific “cases” and one “default,” so you must have at least 4 total.
• You can get creative on the program’s interactivity/purpose/theme/control flow, just make sure that each “case” (including default) makes something happen that is visible to the user—whether that’s in the form of an alert, document.write(), changing the page itself, etcetera is up to you.
• Feel free to refer back to the examples we’ve done so far and to your e-textbook.

~~~

Lesson 0-2: Forms and Intermediate HTML

Lab 16: Forms

• From scratch, make your own form with your own names, ids, for values, etc. Obviously we are not having it actually send the data to a PHP page or a server, but you should code your form as if it is (you may use a blank HTML page for the “action” property, or you may simply put the URL in where it WOULD go).
• You must use at least one text box, at least two radio buttons in the same group, at least two checkboxes, and a submit button.
• For the applicable elements, you must use labels. Do not forget to use line breaks where required.
• If you get stuck on anything, you may ask for help, use W3Schools or some other online resource, or feel free to use maininputs.html as a reference as well—it is a fully detailed, “correct” example of all the form concepts we have learned today.

Lab 17: Classes and IDs

• Make your own HTML page with at least 3 elements total. Use any of the elements we’ve learned, or try new ones! Feel free to reference your notes from before, any of our labs, W3Schools, Google, etc… And remember that every single tag, element, and property we’ve messed with in HTML officially so far (except for form stuff) is in coolwebsite.html—feel free to use it as a reference as well.
• Link an external stylesheet called “style.css” in the same folder. Remember att the top of styles.css to put @charset "UTF-8";
• Use at least one class and one id to apply styling to certain elements of your choice.
• As long as the styles you applied using class and id in your stylesheet are visible in the HTML page in browser, you’ve completed the lab successfully.

~~~

Lesson 6: The JavaScript Document Object Model (DOM)

Lab 18: Windows

• Make a new HTML document. Add a script element to start, as always.
• Make 3 clickable elements using onclick event handlers to trigger 3 different functions (a button is easiest, but you may be creative). Those functions should do as follows:
1. The first function should open a new window to another website of your choice.
2. The second function should do the same, but to a different website of your choice.
3. Finally, your third function should close either/both windows that were opened

Lab 19: Images/dot notation/getElementById() lab

• Create a new HTML document and give it a script element, like usual.
• You must include at least one image where, when an event handler is triggered by the user, the image changes on the page to a different image (it does not HAVE to change back, though that can be a fun challenge). You have lots of examples to go by. Remember to include the image files in your lab. You have to include the actual image files in the zip as well as the html itself. If you don’t, I won’t know if it actually works and won’t be able to grade it.
• Add at least one other HTML element that has some style property modified when the user interacts with it through an event handler—ie text changes color with onhover. Use getElementById() for this.

~~~

Lesson 7: JavaScript Language Objects

Lab 20: charAt()

• Make a new HTML document. Add a script element to start, as always, and an onclick event handler that will call your function.
• Your script should do the following, inside a function:
1. query the user for their favorite word starting with a given letter (you may decide the letter)
2. If their word does start with that letter, give them an affirmative response including that word. (ie. “Wow, I love Armadillos too!”)
3. If their word does not start with that letter, repeat the instructions and continue asking them until they give you a word that meets your criteria
4. Your script must be case-insensitive—ie. if your letter was “A,” you must accept “armadillo” or “Armadillo”. However, you must use the same capitalization the user did when you repeat the word to them in your affirmative response.

Lab 21: regular expressions and phone numbers

• Start with the phoneregexstartercode.html starter file from Week 6 Additional Files Download
• Put your own regular expression in line 13.
• Your regular expression must test for a valid standard US phone number, with or without dashes (so 555-555-5555 and 5555555555 should both be valid).
• You’ll likely need to use the metacharacters/special characters: \d, ?, and { } (brackets).

~~~

Lesson 8: Custom Objects

Lab 22: Custom Objects

• Make a new HTML document. Add a script element to start, as always, and an onclick event handler tied to a button that will call your function--in this case, a method of a custom object you will create for this lab.
• Your script should do the following:
1. Make an object constructor
2. Give it at least 3 properties
3. Give it at least one method. This method should display the properties of the object to the user in an easily understandable format.
4. Make a named instance of that object with all properties properly initialized.
5. You have an example if you get lost: objectslabexample.html in Lesson8CompleteFiles.zip

Lab 23: Custom Classes

From scratch, create the following:
• An HTML page with just a script
• In that script:
1. Make a new class with a constructor function
2. Include at least 3 properties
3. Make a new class using the “extends” and “super” keywords to pull your properties from the first class.
4. Include at least 1 method added in this new, second class. This method should display the properties of the object to the user in an easily understandable format if called by alert()
5. Make a named instance of that object with all properties properly initialized
6. Set up an alert() at the end that automatically calls your named instance’s method.
• You have an example if you get lost: classeslabexample.html in Lesson8CompleteFiles.zip

~~~

Lesson 9: Changing HTML on the Fly

Lab 24: getElementsBy() lab

• Make an HTML page with as many elements as you’d like (as long as you can meet all requirements). They can be the same or different.
• Give at least two the same class name, and give at least one an ID.
• Make a button that, when clicked, changes a property of the elements of the given class name, and that changes a different property of the element with the ID. For the part that changes this based on class name, use a for...of loop like in our recent examples.
• EXAMPLE PROPERTIES YOU CAN USE: color (changes text color), backgroundColor (changes background color), display (“block” or “inline” shows it, “none” hides it), fontFamily/fontSize (change font name/size). More at: W3Schools.

Lab 25: appendChild/removeChild/createTextNode/createElement/removeElement lab

From scratch, create the following:
• Make an HTML document with a script and one element with an onclick event handler (it can be a button, an image, whatever—your choice). Do not add any elements to the HTML itself beyond the script and this clickable one! More will be added with JavaScript.
• Make a script that includes the function that will be called by your initial element's onclick event handler. This function should:
1. create a div using document.createElement() and add it to the body of the page using document.body.appendChild().
2. Append at least two other elements to this div, as “children,” using document.appendChild().
3. Add text to at least one of those “child” elements with document.createTextNode() and then document.appendChild().
4. Use Element.remove() to remove the original clickable element that called this function—for instance, if it were a button, you would want to make the button disappear when the rest of the page content appears.

~~~

Lesson 10: Developing Interactive Forms With JavaScript

Lab 26: More Fun With Forms

• Make an HTML page with a form element.
• Add at least 5 other form elements (input, textarea, etc) within, divided between at least two fieldsets, each with their own legend.
• Make a basic confirmation page the form will direct the user to upon submission (the value of the form element’s “action” attribute). This can just be a basic message to the user.
• Each element should have a name.
• There must be at least one input element of the button type which calls a function/script/statement that references another element by its name using dot notation. (example1.html)

~~~

Lesson 11: JavaScript Security

Lab 27: Tasty Cookies

• Make an HTML page.
• Create a JavaScript script that creates two valid cookies.
• At least one of these should get some kind of input from the user to fill the value in its name=value pair.
• Your script should produce an alert with the cookies once they’re created.

Lab 28: A Tough Cookie

• Similar to in the cookies1fixed.html example, make a page that prompts the user for their name and then for a style property’s value for an element of some sort—whether it’s a text-align value for a div, font color for an h1, etc.
• It cannot be for the background color—that is too close to the example.
• Do not simply copy and paste the example and change a couple things on it, either. You may use similar code to the examples, but you must make this yourself and without copying/pasting.
• Make it so a cookie is saved with the user’s name and the value the user provided for the element’s style property.
• The style property of the element must be changed by extracting it from the cookie directly, like in the script starting on line 23 of cookies1.html. The page should change to reflect this style change visually once the cookie is made.
• Either by writing it to the page somewhere using innerHTML or innerText OR by using an alert, show the cookie(s) that were created to the user using document.cookie.

~~~

Optional Labs Submission Form (for any/all optional labs--can reuse)

Optional Lab Starter files (with instructions in comments):

• Week 2 Optional Labs
• Week 3 Optional Challenge Labs (HIGHLY ENCOURAGED!!!)

---

Sample files (referenced in PowerPoints and lectures):

• Week 2 Sample Files Download
• Week 3 Sample Files Download
• Intermediate HTML/Forms Example Files Download
• Week 5 Sample Files Download
• Week 6 Sample Files Download
• Week 6 Additional Files Download
• Lesson 8 Sample Files Download
• Lesson 9 Sample Files Download
• Lesson 10 Sample Files Download
• Lesson 11 Sample Files Download
• Lab 28 Example File (Fixed)

---

Supplemental Resource Links:

1. Visual Studio Code download (official site)
2. CIW uCertify (online curriculum access)
3. Visual Studio Code Tips and Tricks (official site)
4. W3schools HTML Attribute Reference
5. W3schools CSS Properties Reference
6. Flavio Copes' HTML Handbook
7. Flavio Copes' CSS Handbook
8. Flavio Copes' JavaScript Beginner's Handbook
9. W3schools HTML DOM Event Handlers For Use With JavaScript Functions
10. W3Schools HTML Event Attributes (for use with inline JavaScript)
11. JavaScript Spread Operator (used in one CIW example lab but never mentioned in curriculum otherwise, helpful to know though)
12. The Agile Manifesto (original official site from 2001!!!)
13. W3Schools HTML Input "Types"
14. W3Schools HTML Input "Types" (More Examples)
15. The 2020 Scrum Guide
16. Scrum.org: What is Scrum?
17. Northeastern University: Agile vs. Scrum
18. Ron Jeffries - Dark Scrum
19. W3schools HTML DOM Style Object Properties (list of CSS-equivalent HTML DOM terms for use with JavaScript)
20. regex101 (regular expressions cheat/help site)
21. W3Schools: JavaScript Sorting Arrays/Compare Function (this is the complex way of customizing Array.sort() that we didn’t go over in curriculum/class, if you’re curious to learn it)
22. W3Schools: JavaScript Classes Tutorial
23. W3Schools Forms "enctype" Property
24. W3Schools Form Input "autocomplete" Tutorial
25. W3Schools validity/validation Overview
26. CSS-Tricks.com - Indeterminate Checkboxes
27. Mozilla WebDocs - HTML "file" input element/"accept" property
28. W3Schools JavaScript Cookies Guide
29. Mozilla WebDocs Cookies page
30. GDPR Official Compliance Checklist
31. SlashDot
32. HackerNews
33. Cookie Library Examples
34. FreeCodeCamp: The Difference Between a Framework and a Library