Group session July 1st

This is in the works! Would you like to help flesh it out? Let's do it!

Global program

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Here are some examples of parts of a program that are in the global scope. You could think of them as being in the root (if that is helpful?). However, it works for you – make sure you are 100% comfortable with what that means. There is no encapsulation (except for the fact that the program itself is encapsulated).

Block scope

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

“Scope” is …

(introduced in es2015)

Function scope

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

A function is its own mini-program. So, it makes sense that it would have scope just like the global program does.

If they didn’t, then you could never use the same variable name twice, and well, – everyone would give up programming.

It is not as cut and dry as you might think.

Explicit variable declaration notes

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Functions and scope in loops

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

There are tons of areas with scope that we don’t think about that often.

IIFE

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Here’s a way to scope a block of code – and immediately run it when the page is ready.

Objects and Arrays

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Using an Object to encapsulate functionality

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Duplicating

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

The Difference Between Values and References in JavaScript – Dmitri Pavlutin

Many apps

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

A function to make objects

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

This works.

Duplicating objects

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

It’s hard to find a meaningful example – but stick with us. These objects are not connected to any master blueprint. They are just one-off copies that aren’t aware of each other or any backstory.

A special type of function for constructing objects

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

“Why does it work that way?”

Because they made it work that way. Someone designed it that way.

Constructor prototypes

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

It might seem unnecessary to plan ahead for this – when you only have two simple objects with a few properties each. But consider a 3D model. It’s made up of hundreds of thousands of tiny little triangles. Each triangle has 3 points that are somewhere in the x/y/z axis of 3D space. What if you needed to generate a complex 3D model from a huge set of JSON data? This type of thing might come in handy.

You don’t need to memorize all this stuff. Just be sure you get the concepts and that you know their names of them. That way – if you’re doing something and you think something like this could help you, you can look them up as needed.

"Classes" in JavaScript

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

There aren’t really any classes in JavaScript (in the traditional sense) – but we have these things that look like them now!

They are “syntactic sugar,” / meaning they do the same thing as constructor functions, but they’ve made it so you can write it like this to align to other languages.

You’ll be encountering and using both of these. So spend some time using both of them.

A more filled out class - just for fun

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

It is nice and tidy. This syntax offers you a slightly more formal framework to organize your code.

domain > kingdom > phylum > class > order > family > genus > species

Long before there was HTML, language designers had adopted the word “Class” to define the methods and variables of a particular kind of object.

HTMLElement > div > div.light > div.light.small

HTML and CSS have also borrowed the naming convention to further define elements.

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

we should make one more with a class being extended and show how an HTML element works or something…

Group session July 1st