Fall 2022 TECH 276: Week 3

Best Practices: Organize Your Work By Linking Files In Your HTML | Unobtrusive JavaScript: A Way of Thinking | Creating Variables: Var, Let & Const | JavaScript in the Wild | Using Pseudocode To Plan Your JS: Be Concise & Be Precise

Upon being asked, I see that one line in last week's HW didn't need to be there. I must have turned it on at some point and saved it:

var img = div.getElementsByTagName("img")[0];

I have since commented out that line but wanted to bring this up as a great example of analyzing work, line by line, making sure everything works and every line is necessary. 

That all said, I thought I'd explain the code asked about anyway, as it touches directly on what we are learning.

Let's think of what our HW code is doing.

We have a div in the HTML DOM containing among other things, an image. We want that image to be replaced by another image once the button is clicked.

The first step is to identify the location of where the old image is and where the new image goes. We put that value in a var called "div", in this case - an element in our webpage with an ID of "main_headline":

var div = document.getElementById("main_headline");

The line asked about, were we to use it:

var img = div.getElementsByTagName("img")[0];

is creating a var called img, whose value is the first image the browser finds in "div" which we created above. 

getElementsByTagName

this looks for a tag name in HTML. What's that? Think of a paragraph, for example: <p>some text</p>.

The <p> and </p> are each considered "tags" by the HTML and when used like above (open tag then content then closed tag) that completed code is considered an "element". So

getElementsByTagName

is looking for a tag called "img" which would render as an element:

<img src="">

var img = div.getElementsByTagName("img")[0];

Specifically, the zero represents the first tag of that type which the code encounters (computers start counting on zero).

So we're saying via code, "find the first image and stuff its value into a var we named img". Once we had that, we'd set it as the new value of our "div" var we created above in the code.


 

Pro tip: Keep your code readable.

In Codepen in the HTML panel, look on the upper right for a drop-down icon. Click it, and choose Format HTML. It'll clean up the code's appearance, a real life-saver. Works for CSS and JS too.

 


 

This week we'll start with more about best practices for writing JS.

This is a must-have skill to get and keep a job, and the good news is, it's easy and portable. Once you get in the habit of it, you'll find it works with other languages too.

Specifically, we are talking about how (and where) to save files.

Please note: this is software- and platform-agnostic. That means, it applies everywhere.

HTML, JS & CSS Directory Structure
This HTML, JS & CSS directory structure is a common starting-point for web projects (look under "assets" on this page for a link to the files I'm discussing.)

As coders, designers and information specialists, one of our goals is to keep ourselves and our work efficient and streamlined. That comes from following certain procedures for organizing your work which you can use over and over again, on any kind of coding project.

I've talked before about how important it is to keep the different languages we use in our code separate from each other. That is, it is usually a bad idea to mix HTML, CSS and JS together. If you do mix them, it is much harder to make changes down the road and keep your code orderly for anyone else on the team. Look below under "Unobtrusive JavaScript: Separation of behavior from markup structure" for an explanation.

Instead we'd follow an approach whereby CSS goes in its own CSS document (eg, custom.css); JS goes in a JS file (eg, custom.js), and so on.

This applies too to the way you save your files. The goals are similar: to keep things efficient through best practices promoting streamlined efficiency.

In this case, we make sure we have a directory structure that keeps everything orderly, that is, in its proper place. CSS files get a folder for themselves, as do JS files, images and more.

The "root" directory is the top level of whatever you're working on. Any folders inside the root are called "subdirectories".

The root contains the files of the website, at least one of which is often named "index.html"

A subdirectory inside the root with a CSS file called custom.css would look like this:

"css/custom.css"

Note that it is in a folder named "css"

A subdirectory inside the root with a JS file called custom.js would look like this:

"js/custom.js"

Note that it is in a folder named "js"

The directory structure with a top-level folder called "myProject" would look like:

myProject
myProject/index.html
myProject/css/custom.css
myProject/js/custom.js
myProject/images/myImage01.jpg

 

 

Unobtrusive JavaScript: Separation of behavior from markup structure

Just as we should separate our structure and presentation by putting all our HTML in 1 file and our CSS in a separate file and eschewing the use of style attributes or other such presentational markup, we should also separate our HTML structure and JavaScript behaviour.

The reasons are the same: it separates your concerns, keeps your code clean, and allows you to work on the JavaScript without touching either HTML or CSS.

The basic rule is simple: an HTML file should not contain any JavaScript, just as it should not contain any CSS. There are two things JavaScript authors put in their HTML files: embedded scripts and event handlers. Removing them is the simplest way to achieve separation of structure and behaviour.

Traditionally, JavaScript was often placed inline together with an HTML document's markup. For example, the following is a typical way to register a JavaScript event handler in HTML:

<input type="text" name="date" onchange="validateDate()" />

The purpose of HTML markup is to describe a document's structure, not its programmatic behavior. Combining the two can negatively impact a site's maintainability, like combining content and presentation.

JavaScript behavior created and referenced in the HTML (as above) can be harder to use and maintain, for example when setting handlers for several events on a single element, when setting the same event handler on several elements, or when using event delegation.

The unobtrusive solution is to register the necessary event handlers programmatically, rather than inline. Rather than adding an onchange attribute explicitly as above, the relevant element(s) are simply identified, for example by class, id or some other means in the markup:

<input type="text" name="date" id="date" />

A script that runs when the page is first loaded into the browser can then look for each relevant element and set it up accordingly:

window.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('date').addEventListener("change", validateDate);
});

That code would go in the myProject/js/custom.js folder, which is linked in the footer of your index.html page.

This way we keep our HTML and JS seperate from each other as much as we can - make a change to the custom.js file, and it will update automatically across all pages referencing that script.

Unobtrusive JS is an example of modular programming, where we may re-use the same component over and again, whether within the same project or withinin sundry projects.

We use Unobtrusive JS as a "Best Practice" - a major tenant of Unobtrusive JS is understanding that not everybody's browser supports JavaScript, and having a fall-back to handle this scenario.

Similarly, we cannot assume all browsers work the same - our code must be ready to handle such a scenario.

Finally, your code should be readable by another coder.

 

 

A quick look ahead: tying the console and pseudocode together.

We're going to learn next time about IF/ELSE statements. This screenshot is from part of that lesson.

Note how the simple decisions made by this code give us a solid plan of action in pseudocode, already prioritized with steps ready to go. (As we'll learn later, "===" means is equal to both value and type. Note that the code also has a single "=" sign in use. It has a diffeent meraning than "===").

That is, an IF/ELSE is a pretty basic concept in many coding languages, but from something as simple as coding whether a user "is logged in" or "is user type" or whatever, further general steps are spelled out in pseudocode - coding tasks to be completed.


For instance, in pseudocode I'd spell out my basic programming tasks:

"if someone is a user, then SHOW  a custom message then SHOW the user's courses.

However, if the visitor is a teacher then SHOW a message to the teacher then SHOW the teacher's courses.

Finally, if the visitor is neither teacher nor user, then SHOW a message about SPAM."

Each of these is a fairly complex series of steps to be carried out in code, with numerous sub-steps for each, of course.

 

This Week's Class Links & Assets

Today we looked at real-world examples of JavaScript in use. We looked at 2 sites that do basically the same thing (they’re devoted to selling floor coverings.) Each employs typical uses of JS in the wild which could be applied to almost any kind of front-end development. 

They use JS + AJAX (notice how the entire page doesn’t have to reload):

Home Depot

Lowe’s

The HTML, JS & CSS directory structure we reviewed in class:

Video of todays class:

https://montgomerycollege.zoom.us/rec/share/b0lgzINXgjNkcngRT_e0UbuAZ3hvLpopg0dvoqutbZ2ZP_-GcESzubQc35Hm1VgC.l1kWqUFipbAmX5gv
Passcode: $P#6^iKB

This Week's Homework Readings & Videos

Please read each article and watch each video on this page. Please review all the notes as well in the pens for this class.

The principles of unobtrusive JavaScript
A VG read. It’s technical in places, but informative:

https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

 

How To Add JavaScript to HTML
Now that we’ve placed the JavaScript in a file, we can call it in the same way from additional web pages and update them all in a single location

JavaScript, also abbreviated to JS, is a programming language used in web development. As one of the core technologies of the web alongside HTML and CSS, JavaScript is used to make webpages interactive and to build web apps. Modern web browsers, which adhere to common display standards, support JavaScript through built-in engines without the need for additional plugins.

When working with files for the web, JavaScript needs to be loaded and run alongside HTML markup. This can be done either inline within an HTML document or in a separate file that the browser will download alongside the HTML document.

This tutorial will go over how to incorporate JavaScript into your web files, both inline into an HTML document and as a separate file.

https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html

A Simple Explanation of Scope in JavaScript
The scope is an important concept that manages the availability of variables. The scope is at the base closures, defines the idea of global and local variables.

If you’d like to code in JavaScript, understanding the scope of variables is a must.
https://dmitripavlutin.com/javascript-scope/

var, let and const for beginners
https://www.youtube.com/watch?v=jwZv-TL3W90&t=4s

Creating Vars in JS: VAR vs LET vs CONST
In this article, we’ll discuss var, let and const

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

JavaScript ES6+: var, let, or const?
https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

This Week's Homework Assignment(s)

HW ASSIGNMENT: Pseudocode Plan For Interactive Zoom Navigation

DESCRIPTION
For your assignment this week you will create a detailed pseudocode plan which lays out an approach to coding the project I supply. The pen for this project is here (we will cover the new JS in this pen in detail in week 4):

PRIMARY LEARNING GOAL
The main goal of this assignment is to get used to thinking like a computer does by laying out the basic processes your code will take to complete the task.

SECONDARY LEARNING GOAL
Another goal is to get used to combining what we’ve learned so far with more new concepts as we learn fundamental JavaScript. Functions, variables, if/else, addEventListener and more.

TERTIARY LEARNING GOAL
Another goal is to get an early intro to creating real-world JavaScript components you can reuse as often as needed.

GUIDELINES
You are *not* coding this week, you are creating a roadmap for your code by planning it out first with pseudocode.

You must follow the guidelines of this assignment for your work to be accepted for grading – no other approaches allowed, please.

You may use any “action words” of your choice which you feel represents the assignment. For example, while I might use words such as DELETE, SHOW, CHANGE, REPLACE, you might choose different words. You can see some examples in week 2.

Whatever action words you choose, make sure you consistently use the words throughout your pseudocode – don’t use different which mean the same thing.

Make sure the action words are in all caps, per my example.

Similarly, you must indent any sub-steps, such as demonstrated below.

Be specific in your pseudocode. If a click is needed to initiate things, your plan should have a click on something specific (such an HTML button with an ID) as well as something to do once that click has registered.

While there are 5 navigation items in the example, your pseudocode only needs to account for one. Why? The same pseudocode plan will apply for the other 4 (or 6, or 25, or however many you’d need. D.R.Y.)

Be specific. If there is a step or programming task to be taken, it should be in your pseudocode.

Make sure also to include at a minimum anything related to the action on the screen:

headline, subheadline, image, :hover on and off (aka mouseover/mouseoff), click events and so on. For example, a partial pseudocode snippet for showing text only when a button is hovered could be written:

ON HOVER

– LISTEN to the page for a :hover event on a button named “yourNameHere”
— on :hover, ENSURE button has ID or class names used in the CSS
— CHANGE the CSS class(es) to SHOW the button
— ENSURE text is readable WHEN HOVERING
— ENSURE background image is set in the CSS

Your pseudocode steps and tasks should be in order. That is, a user can’t see much until the button has been clicked – therefore, a click and a listener must preceed any steps that happen later in the process.

Spelling counts. So does grammar.

DELIVERABLES
As before, this assignment is due in full at the beginning of next class (week 4).

You will create a new pen on CP.

Type or paste your Pseudocode HW into the JS tab (nothing in HTML or CSS).

Comment the text you just pasted (so the JS doesn’t show errors.).

Make sure all sub-sections are clearly indicated with hyphens (why? spaces might get stripped by email.)

You will send an email to me to your pen:

Subject Line: Tech 276 Week 3 – Pseudocode Plan For Interactive Zoom Navigation

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.