HELLO

1) Please download Class 11 Starter Code

2) Move the following into your class-work directory:

• first-javascript

3) The solution to relaxr is included

Class #11

10/22/2018

Introduction to JS

Announcements

• Final Projects:

⇒ Second deliverable due Monday, October 29th

⇒ Wireframes

Agenda

• Intro to JS

• JS in the browser

• Intro to programming

• Pseudo code

• Working locally with JavaScript

• JS Basics

• Document Querying

Intro To JavaScript

JavaScript: An Overview

• JavaScript ≠ Java

• Born in 1995 - created in 10 days by Brendan Eich

• Most recent version: ECMAScript 2018 (ES9)

• JavaScript is one of the most popular languages

• Attwood's Law ⇒ "Any application that can be written in JavaScript, will eventually be written in JavaScript."

JavaScript: An Overview

• Current version is ES8; most developers using a mix of ES5-ES9

• ES ⇒ ECMAScript (European Computer Manufacturers Association)

• FEWD will focus on the ES5 implementation

JS in the Browser

JavaScript: Uses

Most uses of JavaScript fall into four categories:

1) Responding to user actions (events)

2) Changing HTML Content

3) Changing CSS Styles

4) Sending/retrieving data to/from the server

JavaScript: Uses

A few examples:

⇒ Adding / removing elements

⇒ Changing CSS on-the-fly

⇒ Detecting user interactions (clicks, scrolling, etc.)

⇒ Form validation

⇒ Loading dynamic content (ex: infinite scroll)

Javascript vs HTML + CSS

HTML/CSS

• HTML/CSS are used to define initial page state

• HTML/CSS are static

JS

• JS is used to define how page state can change

• JS is dynamic

Intro To Programming

Intro to Programming

Q: What is a program?

⇒ Set of instructions that tells a computer how to do a task

Q: What is programming?

⇒ Writing instructions in a way the computer understands

Q: How do I become a programmer?

⇒ Learning how to "think" like a computer

Introducing: Chandler-bot

Think like a CPU - What did we learn?

• You have to speak the same language

• Steps execute sequentially

• Steps need to be granular and precise

• The computer will only do what you tell it to do

• The computer is never wrong

Pseudo Code

Pseudo Code

• Process of thinking through a program, step-by-step

• No actual code is written

• End result is an outline that can be converted into code

• Allows you to focus on problem solving, not the layout of the code and its syntax

• Don't need to know how to code, to write pseudo code!

Pseudo Code

• Let's write pseudo code for a thermostat:

User inputs a temperature, if the current temperature is colder, turn the heat on, otherwise turn the heat off

• Things to think about:

⇒ What are the inputs for our program?

⇒ What is the desired output of our program?

Pseudo Code

set target_temperature = 72

get current_temperature = 68

if current_temperature < target_temperature

turn_heater_up

if current_temperature >= target_temperature

turn_heater_off

Working Locally With JS

Working Locally with JavaScript

• JavaScript files use the .js extension - script.js

• Two methods to link HTML and JS:

⇒ External (as a separate file):


  <script type="text/javascript" src="script.js">

⇒ Locally (in our HTML):


    <script type="text/javascript">
      // Write JavaScript here
    </script>
  </body>
Code Along: First JavaScript

1. Open first-javascript directory in SublimeText

2. Add the following to index.html, above </body>


  <script type="text/javascript" src="script.js"></script>

3. Add the following to script.js


  alert('This is an alert. This is annoying');

4. Save and open index.html in the browser

Let's take a Break

JavaScript Basics

JavaSript Basics: Data Types

• In the machine, there is only data

• Data are separated by type:

⇒ Numbers: 1, 2, 100

⇒ Strings: "cats", "i love javascript"

⇒ Booleans: true and false

⇒ Objects: { name: "Keanu Reeves" }

Data Types: Numbers

• Used for arithmetic: (operators: +, -, *, / )

2 + 2, 5 - 2, 8 * 20, 100 / 2

• Advanced operations contained in the Math library:

⇒ Math.pow(2,3) = 8

⇒ Math.sqrt(25) = 5

Data Types: Strings

• Used to represent text: "Hello, World!"

• Notable for string concatenation:


  'c' + 'a' + 't'

  // "cat"

• Can concatenate different data types (numbers, variables) with strings:


  'i have ' + 2 + ' cats'

  // "i have 2 cats"

JS Basics: Variables

JavaScript Basics: Variables

• Often, you will want to keep track of data in a program

• Declare using the var keyword

• Will store the piece of data in memory

• Use the variable's name to "call" it (retrieve it from memory):


  var x = 2;
  var y = 3;

  x
  // 2

  x + y
  // 5
Variables: Naming Rules

• Take care when naming your variables!

• Variable names should reflect the data they describe

• Other naming conventions:

⇒ Names should start with a lowercase letter

⇒ Cannot use spaces; use camelCase:


  var currentTemp = 70;
  var targetTemp = 73;

Document Querying

Document Querying

• Popular use case of JS is to "talk" to HTML/CSS

• Browser creates document to communicate with JS

• Majority of FE work leverages this document

• The Document Object Model (DOM)

• Always start with the document!

Document Querying

document.querySelector('selector')

⇒ Returns first element matching the selector

⇒ Can query for elements, classes, and ID's


  document.querySelector('#some-id')
  // returns the first element with id of "some-id"

  document.querySelector('.some-class')
  // returns the first element class of "some-class"
Lab: First JavaScript

1. Open first-javascript in SublimeText

2. Add the following elements to index.html:


  <h1 id="title">Some Title</h1>
  <p id="text-chunk">A block of text! Yay! Content! SEO!</p>

3. Use a document query to target the above elements and change their text color

Hint: combine your query with .style.color = 'red'

On Deck: #12 - Javascript and the Browser

• More JavaScript!

• Functions

• The DOM

• JavaScript events

• Getting Input/Writing Output

Exit Tickets!