Thursday, December 4th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

CCV Class tomorrow – stay on top of your work – 1 week left
New FAFSA forms released – if you are planning to go to college in the next year or two, I highly recommend you complete the Free Application for Federal Student Aid. The result will tell you what kind of money you can receive to assist with college
Mid Quarter ends on Friday

10:10 Learning a Language

Whether we are working with C#, Python, JS or any host of languages, all languages at the base level have to get parsed through an interpreter into ones and zeros so that a machine can carry out the instructions.

So, languages may be similar in structure by not the same in syntax. Here are some rules that cover JavaScript.

A semi-colon is used as an End of Line (EOL) marker. let myname = “William”;

Javascript is case-sensitive, name and Name are two separate items. However a better way to write these would be firstName or firstname as you rarely are the only one looking at your code and having identifiers with more meaning makes for better programming. List of JS Reserved Words

A string is a piece of text and is always surrounded by quotes, a literal is usually number used in the program, such as 17, and is only surrounded by quotes if you wand to use it as a string and not manipulate it mathematically.

Speaking of math, JS has a list of operators:…Again, W3schools has a list of operators.

Note that = does not mean “equals to” but rather “contains”. var myname = “William”; means the variable myname will contain the text William.

If something is to be equal to, then we use ==, which means “is identical to”, and we can go one step further by using === which means “is identical in all ways, even type”.

JavaScript Output – There are Four Places you can output JS…

innerHTML
console.log
an alert
document.write

innerHTML

innerHTML is a property of any HTMLelement on a document.
you need to define which element is being targeted for output with
getElementByID(“Greeting”).innerHTML=“Hello World, Nice to see you”;
Order is important. The element must be loaded before the script
calling it.

window.onload = function () {
    //loads all the js before doing anything

    }

document.addEventListener('DOMContentLoaded', function() {
    //This method is generally preferred over assigning directly to window.onload because it allows you to add multiple load event handlers without the new one overwriting previous ones.
})

console.log()
• The console is a convenient way of testing your script, and so you can send output there anytime
• let greeting = “Hello there”;
• console.log(greeting);

alert()
• Alerts are always useful
• they are “modal” forms or dialog boxes.
• When they show up on the screen they have to be dealt with.
• Sometimes referred to as window.alert
• let dude = “Hello My Man”;
• window.alert(dude);

document.write()
• document.write is a method of the document
• it will refresh the document and write to it.
• Be careful of this. It may clear your content at the same time!
Using document.write() after an HTML document is loaded, will delete all existing HTML:

Adding a button and a function

The standard and recommended way to add a click event listener using only JavaScript is to use the addEventListener() method. This approach separates JavaScript behavior from HTML structure, which leads to better code organization and maintainability. Modern JS coders use this method for handling events.

function easyButton(){
    document.getElementById("Greeting").innerHTML = "You Just Clicked the Easy Button";
}
document.getElementById("myButton").addEventListener("click", easyButton);

/* or
const button = document.getElementById("myButton");
button.addEventListener("click", easyButton);
*/
//The event name is passed as a string (e.g., "click").
The second argument is the function to run when the event occurs.

10:50 Morning Break (10 minutes)

11:00 Responsive Typography with Type Scales and CSS Variables

Responsive Design consists of three characteristics:
1. Media Queries
2. Images that Resize
3. Fluid Layouts (using Grid, Flexbox or % for widths)

As our screens change size, so can the fonts. We don’t have to guess what the right typography is. We can use some simple tools to help make sure that no matter what our screen size is or what font size we want to use, we can have it work together.

So typography can also be responsive! First, let’s get an understanding of the basics.

Absolute Length Units

Absolute length units are considered absolute because they are not relative to any other element. These units will not scale to browser size and will always remain the same size. These include the following:

pt – points
px – pixels
in – inches
cm – centimeters
mm – millimeters
pc – picas

Pixels are really the only absolute CSS length unit we should consider using for the web. The others are mostly used for physical (not digital) measurement (like print). A pixel unit refers to the size of one “dot” of your device display (which will vary slightly with each device). Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.

Relative Length Units

Relative Length units are considered relative because they change/scale depending on the length of other elements. One common example is percentage, which is dependent on the length of the parent element.

em – relative to the element’s parent font-size
rem – relative to the root element’s font-size – the default HTML
vw – relative to 1% of your browser’s viewport width
vh – relative to 1% of your browser’s viewport height
vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width). vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh . If the width of the browser is less than it’s height, 1vmin is equivalent to 1vw .
vmax – is the opposite. vmax uses the larger of the viewport width or height to set the size.
% – relative to 1/100 of the parent element’s width.

All of these units are used for the web. Want to see an example of all of these in action and understand the difference between em and rem- Fork my CodePen so you have a reference for yourself.

Using Modular Scales

From Exploring Responsive Scales Article on Medium.com

Modular Type Scales

You’ve heard of musical scales, well the same concept can be applied to typography. Modular Scale typography grows and shrinks based on a ratio. Using a ratio allows the type to look consistent and related.

Some sites do better with large type and contrasting sizes better than others sites… For example news and product/information sites don’t have a lot of variation. Creative sites have much more variation in size.

For example, product sites, shopping sites, news sites and commerce sites tend to do better with smaller changes in type size. BBC HappySocks

Marketing sites (like Apple for example) tend to use large type sizes and show great range in the type size variation. Apple RedBull

Let’s play around with type scale. A nice tool is type-scale.com and another one is modular scale. Both do the same thing – they are tools to help you get consistent type.

Using a Scale = Consistency in Design!

Let’s practice. Fork this CodePen and we will apply some type scales to the html elements.

Variables in CSS and Custom Properties

Clean code is always a good goal to work towards. To reduce redundancies in your CSS you may want to learn about creating variables. I had a professor use the term DRY out your stylesheets (Don’t Repeat Yourself)

See how annoying it is to have something repeat!

You might have seen custom properties when inspecting a page. They usually begin like this in your CSS Stylesheet:

:root {
--color:red;
--font-size-large: 2rem;
}

p {
color: var(--color);

.specialtext {
font-size:var(--font-size-large);

The CSS syntax for creating a variable is as follows: var(–name – value)

Where you place your variables matters. They follow the cascade in Cascading Style Sheets (CSS)!

We can create both global variables – defined in the :root and we can also change them at the element level

:root {
  --bg-color: #fff;
  --main-color: #000;
  --secondary-color: #222;
}
/* Elements inherit variables from their parents. */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
}

/* Elements can define their own values and variables, overriding inherited ones.*/
body.dark {
  --bg-color: #080808;
  --main-color: #fff;
  --secondary-color: #ccc;
}

Let’s tackles some basics with variables while also improving our code from earlier today where we worked with type scales.

11:55 Lunch

*Creative Commons Attribution 4.0* – Animal Style Burgers from In-n-Out

12:25 English with Mx. Yopp

1:10 Afternoon Break

1:25 Speed Design

1:45 Independent Production & Guided Support

Hard Surface Modeling – SciFi or Classic shipping container – Due Tuesday, December 9th
Famous Photographer Project – Due Wednesday, December 10th
Decorative Silhouette in Photoshop – Due Wednesday, December 11th
Purinton Tree Farm – new website – Due Wednesday, December 17th

2:10 Dailies

2:15 Independent Reading