JavaScript 101

About me 🤓

@ericmasiello
UI Architect @ Vistaprint
Front-End Web Development (FEWD) Instructor at General Assembly
Co-Author of Mastering React Native

--

Your turn to share 🤗

Your name
Any programming experience? (HTML, JavaScript, C, etc.)
What brought you here today

Agenda

What is JavaScript?
JavaScript & the DOM
JavaScript syntax
Responding to "events"
JavaScript variables and data types
BONUS: Node.js

Setting expectations

2 hours is not a lot of time

What is JavaScript?

Insanely popular
High level syntax, low(ish) barrier to entry
One of two languages that run in the browser (the other is WebAssembly)
Can be used "server-side" or "client-side"

Note:

High level syntax means you don't need to program to the specific hardware, the language is more generalized and typically easier to write
Hasn't always been only browser language, nor will it always be (probably)
Runs on the server, in robots, databases, etc

--

In the beginning, there was HTML

Credit: A Look Back at 20+ Years of Website Design - Myia Kelly

Note:

Internet predates web pages (developed by military and universities for information sharing)
WWW and HTML invented at CERN in the late 80s, early 90s in large part by Tim Berners-Lee
No styles, no interactivity - just text and links

--

Make it pretty(ish)

Credit: A Look Back at 20+ Years of Website Design - Myia Kelly

--

Make it interactive!

Note:

JavaScript was developed in 10 days by one developer (Brendan Eich) for Netscape. It needed to be done quickly so that it could gain adoption over Microsoft's browser language.
Has evolved enormously since 1995 when it was created

--

Java vs. JavaScript

Very, very, very different.

(But a little similar)

Note:

Two completely different languages
At around the time time JavaScript was created, Java was newish and had a lot of buzz
The language was originally named as LiveScript
Netscape renamed it to JavaScript to capitalize on the cachet of Java at the time
If you ever do a job interview, don't confuse these two languages

--

JavaScript vs. Javascript

Officially, its "JavaScript"
In reality, no one cares

What's the DOM?

--

Browser rendering in action

--

More details on how browser rendering works

https://itnext.io/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969

--

DOM: Document Object Model

Tree data structure managed by the web browser
Exposes an "API" to JavaScript allowing web developers to:
Manipulate what is rendered to the screen
Respond to interactions (e.g. specify what happens when a user clicks)

Note:

DOM is techncially not part of the JavaScript language. Its part of the browser

--

DOM: Document Object Model

Essentially, the DOM is an internal data structure managed by web browsers that represents what is in the web page. It takes HTML, CSS, and instructions written in JavaScript to decide what it should display at any moment.

`document` object

Browser exposes the DOM to JavaScript via the document object
Most client-side JavaScript involves manipulating the DOM via the document object

// Create a <p> node
var pNode = document.createElement("p");
// Create a text node
var textNode = document.createTextNode("Hello world");
// Append the text to <p>
pNode.appendChild(textNode);
// Append <p>Hello world</p> to <body>
document.querySelector("body").appendChild(pNode);

--

Getting data from the DOM

Method Name	Description
`.getElementById()`	Gets a single element by an ID selector
`.querySelector()`	Gets a single element matching the selector
`.querySelectorAll()`	Gets a list of elements matching the selector

* There are additional methods for getting DOM nodes

--

`getElementById`

<html>
  <body>
    <h1 id="title">The title</h1>
    <p class="message">foo</p>
    <p>bar</p>
    <p class="message">baz</p>
  </body>
</html>

// returns a single Node
var titleElement = document.getElementById("title");

--

`querySelector`

<html>
  <body>
    <h1 id="title">The title</h1>
    <p class="message">foo</p>
    <p>bar</p>
    <p class="message">baz</p>
  </body>
</html>

// returns a single Node
var titleElement = document.querySelector("#title");

// returns a single Node, but which one?
var messageElement = document.querySelector(".message");

--

`querySelectorAll`

<html>
  <body>
    <h1 id="title">The title</h1>
    <p class="message">foo</p>
    <p>bar</p>
    <p class="message">baz</p>
  </body>
</html>

// returns a NodeList of 2 elements
var messageElements = document.querySelectorAll(".message");

// returns a NodeList of 3 elements
var allParagraphElements = document.querySelectorAll("p");

--

JavaScript in the wild

Form Validation
Dynamic Navigation

How do we add JavaScript to a webpage?

`<script></script>`

--

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
  </head>
  <body>
    <!-- your webpage contents -->
    ...

    <script src="script.js"></script>
  </body>
</html>

Put it right before the closing </body> element

--

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script defer src="script.js"></script>
  </head>
  <body>
    <!-- your webpage contents -->
    ...
  </body>
</html>

Or use the defer attribute and put the script element anywhere

Syntax

"...set of rules that defines the combinations of symbols that are considered to be a correctly structured [code] in that language."

- [Wikipedia](https://en.wikipedia.org/wiki/Syntax_(programming_languages)

Note: Like with any language, there are formal rules around how to write it. This is the syntax.

--

JavaScript syntax examples

Semicolon: marks the end of a statment
Quotation Marks: a string (of characters)
Parentheses: used to define or execute a function

function illuminateRed() {
  // do stuff
}

function setupEvents() {
  document.getElementById("stopButton").onclick = illuminateRed;
}

setupEvents();

--

JavaScript syntax - comments

// Single Line Comments

/*
Multi
line
comments
*/

--

Basic JavaScript Syntax

https://www.w3schools.com/js/js_syntax.asp

Responding to “events”

event + event handler => run some code

Note:

Let's cover some basic definitions

--

Event

Typically a user interaction

e.g. click, scroll, mouseover (hover), etc.

<!-- I want to know when someone clicks on this button -->
<button id="dealButton">Deal cards!</button>

--

Event listener/handler

A function whose job is to respond to some user input.

// I want to know whenever someone *clicks* on the element
// with an id of "dealButton"

--

Function

A self-contained set of instructions that can be reusable

function dealRandomCard() {
  // code here that picks a card at random
}

Functions can be easily rerun (e.g. on every click, run these instructions)

--

Example

HTML

<!-- I want to know when someone clicks on this button -->
<button id="dealButton">Deal cards!</button>

JS

function dealRandomCard() {
  // code here that picks a card at random
}

// whenever someone clicks the html tag with an id="dealButton",
// run the dealRandomCard function
document.querySelector("#dealButton").onclick = dealRandomCard;

How we solve problems in the browser with JavaScript

Find some elements on the page
Listen for some user interaction (click, scroll, mouseover)
Respond to that event
- Add, remove, or modify HTML
- Add, remove, or modify CSS
- Or anything else 🤓

--

Traffic light

http://codepen.io/ericmasiello/pen/vxbgXo

Fork this on Codepen

--

Traffic light Assignment

15 mins

Make the slow button turn the 2nd light yellow
Make the go button turn the last light green
BONUS: Make it so that I can click the lights themselves to turn them on

If you finish early, help others around you if they're stuck.

Variables & data types

--

Variable

Containers for storing data values.

var age = 13;

--

Variable declaration

var keyword tells our program that we wish to make a variable
We choose the name
Variables should only be declared once

var age;

--

Variable assignment

Give our declared variable a value
This can happen multiple times

age = 13;

--

Variable assignment and declaration

// Do assignment and declaration separately
var a;
a = 22;

// Do assignment and declaration at the same time
var b = a + 2;

--

Variable reassignment

var a = "Eric";

a = "Erika";

--

Name variables using "camelcase"

Start with lowercase letter
Each new word is capitalized

var numberOfStudents = 20;

--

Variable naming rules (syntax)

Names can contain letters, digits, underscores, and dollar signs
Names must begin with a letter, $, or _
Names are case sensitive (y and Y are different variables)
Reserved words (e.g. function or while) cannot be used as names

Data types

--

Breaking down this line of code

var numberOfStudents = 20;

JavaScript reservered word: var
Name: numberOfStudents
Value: 20

--

Data types

What can those values be??

--

JavaScript data types

Boolean
Null
Undefined
Number
String
Symbol
Object*

* includes Dates, Arrays, Regular Expressions, Functions, and more

--

Number

// We call this type of number an "integer"
var myInteger = 10;

// And this type a "float"
var myFloat = 10.13093;

var sum = myInteger + myFloat;

--

Common JavaScript Math Operators

Operator	Description	Example
`+`	Addition	`x = y + 2;`
`-`	Subtraction	`x = y - 2;`
`*`	Multiplication	`x = y * 2;`
`/`	Division	`x = y / 2;`
`%`	Remainder	`x = y % 2;`

JavaScript Arithmetic Operators

--

String

Text, a collection of characters.

var firstName = "Eric";

var lastName = "Masiello";

// fullName = 'Eric Masiello'
var fullName = firstName + " " + lastName;

Note:

This operation is called concatenation

--

Boolean

True or False

var lightOn = true;

function turnLightsOff() {
  lightOn = false;
}

Score keeper

CodePen

Fork this on Codepen

--

Score keeper Assignment

15 mins

Add a button labeled "Double" that takes the current score and doubles it
Add a button labeled "Half" that takes the current score and cuts it in half

If you finish early, help others around you if they're stuck.

BONUS: Node.js

--

Node.js

Developed in 2009
Built on top of Google Chrome's V8 JavaScript engine
Open source runtime environment for running server-side JavaScript applications
Install the LTS version from https://nodejs.org/

--

Sample Node app

Copy this code http://bit.ly/2tpAOXZ
Save as add.js
Open your command line tool

node add.js 3 4

Resources

Books
You Don't Know JS: Up & Going
HTML and CSS: Design and Build Websites
Online
Code Academy (Free)
Beginner JavaScript
JavaScript 30 (Free)
In Person Courses
Web Development Immersive (Full Time)
Front End Development (Part time)
JavaScript (Part Time)

Files

slides.md

Latest commit

History

slides.md

File metadata and controls

JavaScript 101

About me 🤓

Your turn to share 🤗

Agenda

Setting expectations

What is JavaScript?

In the beginning, there was HTML

Make it pretty(ish)

Make it interactive!

Java vs. JavaScript

JavaScript vs. Javascript

What's the DOM?

Browser rendering in action

More details on how browser rendering works

DOM: Document Object Model

DOM: Document Object Model

document object

Getting data from the DOM

getElementById

querySelector

querySelectorAll

JavaScript in the wild

How do we add JavaScript to a webpage?

<script></script>

Syntax

JavaScript syntax examples

JavaScript syntax - comments

Basic JavaScript Syntax

Responding to “events”

Event

Event listener/handler

Function

Example

How we solve problems in the browser with JavaScript

Traffic light

Traffic light Assignment

Variables & data types

Variable

Variable declaration

Variable assignment

Variable assignment and declaration

Variable reassignment

Name variables using "camelcase"

Variable naming rules (syntax)

Data types

Breaking down this line of code

Data types

JavaScript data types

Number

Common JavaScript Math Operators

String

Boolean

Score keeper

Score keeper Assignment

BONUS: Node.js

Node.js

Sample Node app

Resources

Thank you! 🙏🏼🙏🏼🙏🏼

`document` object

`getElementById`

`querySelector`

`querySelectorAll`

`<script></script>`