What's a "Stack"?

Inventory

Infrastructure

Ecosystem

Repertoire

It can describe the tools used in a given project, the tools/environment used by a given team or company, or the tools that an individual is competent in.

https://cmci.colorado.edu/infopedia/uploads/Main/stack.png

Back End

Front End

Front end? Back end?

Client

Browser/Web Page

Chrome, Firefox

Server

Cloud

Google Cloud, Amazon, Heroku

UI/UX

Applications

Databases
ML/AI
Big Data

Our Stack

PLATFORMS

LANGUAGES

5 platforms

3 "languages"

webpages

text + media assets + style markup + code

HTML = hypertext markup language

markup

hypertext

html

<tag>lorem ipsum</tag>

webpages

webpages

Browser

webpage displayed on devices

text file on "server"

webpages

Browser

webpage displayed on devices

text file on "server"

CSS

JS

EXAMPLE CODEPEN

     <!-- Create an first level heading "element"
           and give it an ID "textToChange" -->
      <h1 class="greentext" id="textToChange">
        Today is a lousy day!
      </h1>
     
      <!-- Create a button labeled "Click to Change Text"
           and specify its type and the JavaScript
           action that should happen in the event
           the button is clicked -->
      <button type="button" onclick="changeText()">
        Click to Change Text
      </button>

heading tags <h1></h1>

/*
Create a "class" called "greentext" with a single style instruction: anything with this class should be rendered green
*/

.greentext {color: green;}

Cascading Style Sheet

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

Learning a lot from a little bit of JS

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

/*comments*/

//comments

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

keywords

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

{block of code}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

STRINGS/LITERAL TEXT

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

parameters/arguments*

( parameters)

document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"

"Dot" Notation

something dot something dot something is a way of zooming in on the subparts

the subparts can be components, properties, or actions - but more on that later

This one says, "webpage (document), grab an element with the name "textToChange" and point to the text between the tags...

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

// This is the script that does the work
function changeText() {
 
    /*
    "document" refers to this whole webpage.
    The document can locate elements by their ID.
    The text between the tags of an element is called its "innerHTML."
     We can change the text by "assigning" it a new value.
     */
    document.getElementById("textToChange").innerHTML="No, it's a wonderful day!"
}

properties

 at W3 Schools

document.getElementById("textToChange").innerHTML = "No, it's a wonderful day!"

the left side

a statement

the right side

is given the value of

//this turns my shirt yellow
faculty.getProfById("Dan").shirt.color = "YELLOW"

//If my shirt is yellow, this makes make house yellow

faculty.getProfById("Dan").house.color = faculty.getProfById("Dan").shirt.color

EMBEDDING CODEPEN

EXERCISE