Fall 2022 TECH 276: Week 2

The DOM & More: Refresher From Last Time | Intro to JavaScript Variables | Why JavaScript Functions Are Great | Intro to JavaScript Strings | What Is "Pseudocode"? | HW Assignment 2: Before and After Function

This week we'll have a refresher on the DOM and JavaScript's relation to manipulating HTML elements in it.

For example, we'll learn to add and remove HTML elements from the DOM using innerHTML and removeChild().

We'll get an intro to JS variables (or vars, for short) and learn to combine HTML and JS together in a "string" of text.

We'll talk about Pseudocode, and how it makes you a better developer inside and outside of JavaScript.

Finally we'll tie that in to the HW as we explore JS functions, another building block of efficient coding, which like variables are a major part of coding.

What is The DOM?

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.

The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated.

The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Some Good Questions

In HTML, line 19, where it says type = "text", is this a variable that I have to change or is this standard to switch statements, and it is clarifying that text will be entered into the search box for the computer?
Good question. "text" in HTML refers not to a variable but to the type of input we're using/expecting. It's saying to the page, the visitor can add content and submit it, and that content must be text-based (as opposed to being a number or date, for instance.)
So you would not need to change it unless you needed a different type of input.
Similar question: In JS, for line 29 where it says title and lines 31 and 33 where it says myVariable, are these standard to the switch or are they variable names that I have to change?
Those are names which you would change. In other words, you are creating them as part of your custom coding (a standard practice) as opposed to "input" which is built-in to HTML. 



JS | Switch Statement + Random Number


This Week's Homework Readings & Videos

JavaScript Variables

what innerHTML is doing in javascript?

JavaScript Strings

HTML Element Syntax

JavaScript Syntax

Introduction to JavaScript: Functions

HTML DOM Document getElementById()

JS removeChild() Method

JavaScript Style Guide

What is Pseudocode And How Do You Use It?
watch through 8:06, and remember: this is software-agnostic

What is Pseudocode and How Does it Make You a Better Developer?


This Week's Homework Assignment(s)

For this assignment you will create a “Before and After” function in HTML and JS showing initial text and a button.

Your Goal: When that button is clicked, the text, button and image will be replaced by new text and a different image of your choosing.

Please note: the link we reviewed (and are using for this week’s HW) is listed on this page under Related Pens as “Welcome to Pseudocode.”

The main goal of this assignment is to get you used to core coding concepts such as functions and variables – what they are, how/when/where they are used, and why they are so important in JavaScript and beyond.

The secondary goal involves gaining experience updating the DOM dynamically, that is, using JS to add/edit/delete HTML content and CSS styles in the DOM. 

We are also getting an intro to “concatenation”, whereby we create a single variable  that combines HTML *and* JS in a single JavaScript string, as opposed to creating a bunch of individual values.

Finally, one of our goals is to get some experience dealing with things that break your code – you break something and you learn how to fix it. In this case, changing ID, class and function names is a great way to make sure everything works.

-The 4 items of content should reflect anything you’re interested in. Soon enough we will start focusing our deliverables on real-world scenarios.

-Make sure you follow all the details in the pseudocode above.

-You will use the pen I provided in the class website (see above).

-You will replace each occurence of the element ID and CLASS names in the JS and HTML with your own. For example, you’ll change the function “change-me()” to a different name in both the HTML and the JS, using appropriate names as described in the HW readings..

-You will repeat this for each HTML element that already has a name.

-You do not have to add a name to something that does not have a name to begin with.

-Make sure to change any names in the CSS as well.

-The code in the pen must render properly, as assigned.

-You must follow the approach detailed in the assignment, anything else will not be accepted for grading.

This is due by the start of next class.

As before, you’ll email me the CodePen URL for this assignment to my school email.

Subject Line: TECH 276 Week 2 “Before and After” Function HW


Details and Deliverables Broken Down in Pseudocode to help us focus on our programming task:

READ the guidelines

CHANGE the function name in HTML & JS from change_stuff to before_after()

REPLACE each occurence of the element names in the JS with your own. EG, “element” could become “main_content” and “element2” could become “secondary_content”

SAVE your work after making sure it still works

CHANGE “change-me” into a different ID name in the HTML, CSS and JS

SAVE your work after making sure it still works

REPLACE image, headline, paragraph and small-print text with that of your own
–decide what you want to say in 4 pieces of information
–find your data
–copy and paste it replacing the 4 variables holding the “after” text
—make sure the image is already online

DELETE all comments

SAVE your work after making sure it still works

READ the guidelines again, adjust if needed

DELIVER the project

Course Syllabus

Here's the course syllabus: learn it, live it, love it.

Please Remember

You are responsible for reading all of the content I provide each week on our class website (notes, explanations, articles, links, videos, code examples, etc.)

Please note also that turning in work up to one week past the due date is OK but will receive a reduced grade. After 1 week, it will not receive a passing grade, FYI.

Finally, all assignments must follow the guidelines laid out - variations will not receive a passing grade, FYI.

Course Lessons

Links to lessons will be activated the week of their occurrence.