slides-intro-to-js

View Github Repository Open presentation in a new window

jesstelford

See all presentation from jesstelford

slides-intro-to-js

0 0

slides-intro-to-js

Introduction To JS slide deck

On Github jesstelford / slides-intro-to-js

General Assembly

Introduction to Javascript

  • Me: JS for over 12 years
  • SF -> Sydney
  • JS: set of instructions (like a recipe)
  • Works in every browser
  • Runs everywere (servers, phones, even robots!)

Introduction to Javascript

Today

HTML, CSS & JS

JS Fundamentals

Coding!

  • HTML = structure, CSS = styles, JS = functionality / interactivity
    • JS fundamentals: data types, functions, arrays, objects
    • Coding: live in class!

Introduction to Javascript

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

var theTweets = tweets.map(makeTweet).join('<br>')
document.querySelector('section').innerHTML = theTweets
  • A taster!
  • In 1hr we'll understand all this

Introduction to Javascript

Google Chrome

http://chrome.google.com

  • Chrome is best for coding
    • Available everywhere
    • Instal now. 5 min.

Introduction to Javascript

HTML

<body>
  <section>
    <p>Hello</p>
    <p>World</p>
  </section>
</body>
  • [3-fingers]:
    • 1 finger for "very familiar"
    • 2 fingers for "kinda know it"
    • 3 fingers for "not familiar"
  • It's the same as...

Introduction to Javascript

HTML

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>
  • The same as a list in a word document
  • Let's try it...

Introduction to Javascript

HTML

  • about:blank
  • Right click > "Inspect"
  • "Elements" tab
  • Show them
  • This is where you see / edit HTML
  • Works for every page on the internet
  • "Hand up when done"

Introduction to Javascript

HTML

  • Find <body></body>
  • Right click > "Edit as HTML"
  • Paste:
<body>
  <section>
    <p>Hello</p>
    <p>World</p>
  </section>
</body>
  • "Hand up when you see 'Hello World'"
  • Congratulations!
  • Simplest website ever
  • Refresh, and oops; it's gone

Introduction to Javascript

Don't Panic

  • Nothing we do today can hurt your computer
  • Mistakes are good to learn!
  • Just refresh to start over

Introduction to Javascript

CSS

<style>
  body {
    background-color: lightslategray;
  }
  section {
    font-size: 30px;
    color: white;
  }
</style>
  • [3-fingers]:
    • 1 finger for "very familiar"
    • 2 fingers for "kinda know it"
    • 3 fingers for "not familiar"

Introduction to Javascript

CSS

http://bit.ly/html-example

  • Find <head></head>
  • Click arrow to view the style
  • Base to work from
  • Hand up when done

Introduction to Javascript

Javascript

  • Onto the fun stuff!

Introduction to Javascript

Javascript

Console tab

Demo

  • In console, can run JS
  • Autocomplete
  • Example: Math.PI
  • Now you try
  • [Hands up when done]

Javascript

Types

  • Math.PI - number
  • "Hello World" - string
  • "Hello World' - Error!
  • "Hi" vs "Hi'
    • ILLEGAL token
    • "laws" of strings say quotes have to match
    • Don't Panic...

Introduction to Javascript

Don't Panic

Javascript

Types of values

  • Math.PI - number
  • "Hello World" - string
  • true / false - boolean
  • null / undefined - nothingness
  • {name: "jesstelford"} - object
  • true/false: yes/no
  • null/undefined: different from 0; implies a collection.
  • Object is a container of other types
  • We'll deal with strings & objects mostly today (most fun!)
  • That's the fundamentals out of the way

Introduction to Javascript

Review

Review

Fundamentals

  • HTML for content
  • CSS for styling
  • JS for functionality
    • Console
    • Types

Types of values

Objects

Types of values

Objects

A container of named values

aka: key/value pairs

{
  tweet: "Hello world", author: "jesstelford"
}
  • key === name
  • value === any value we just saw
  • Also known as... JSON

  • Whoops, wrong kind of Jason

Types of values

JSON

Types of values

Objects

Give it a try:

{name: "Sam Gogetter", age: 42}

Will output:

object {name: "Sam Gogetter", age: 42}

  • Try it in console
  • Hand up when done
  • object in output = JS recognizing it's an object

Javascript

Variables

  • Only dealt with values so far
  • What do we do with those values?

Javascript

Variables

Writing to a variable

var greeting = "hello world"
  • Like a bucket
  • Create bucket with var
  • Has a name greeting
  • Has a value of string type

Javascript

Variables

Reading from a variable

greeting
  • Access it by writing out its name

Javascript

Variables

Changing a variable

var greeting = "hello world"
...
greeting = "g'day everyone"
  • Change its value by using equals again, but not var!

Javascript

Variables

Give it a try:

var greeting = "hello world"
greeting
greeting = "g'day everyone"
greeting
  • Try it in console
  • Hand up when done

Javascript

Functions

  • Reusable statements
  • Don't have to rewrite again and again
  • Recipe book = book of functions
  • Ingredients = paramters (bits you put in)

Functions

Built in functions

  • Types have functions. Known as methods

Functions

Built in functions

"hello world"
  • Revisit our String type

Functions

Built in functions

"hello world".toUpperCase()
  • What do you think this will do?

Functions

Built in functions

"hello world".toUpperCase()
"HELLO WORLD"
  • Now you try it

Functions

Built in functions

"hello world".toUpperCase()
"HELLO WORLD"

"hello world".replace("world", "Jess")
  • Try this one too
  • parameters go inside parentesis
  • They're the "ingredients" into "replace" recipe

Functions

Built in functions

console.log("Hello world")
  • Don't have to exist on types
  • Free standing
  • 43(ish) minutes at this point!

Functions

Writing Functions

  • we can create our own function!

Writing functions

Snippets

  • Using Chrome's feature "Snippets"
  • Can save our work
  • Will be switching between "Snippets" and "Console"

Writing functions

Snippets

  • "Scripts" tab
  • "Snippets" (on left)
  • Right click > "New"
  • Name it greeter.js
  • Show a demo

Writing functions

Our first function

function greeter() {
  console.log("Hello Jess")
}
  • Create a function
  • Called greeter
  • That prints a string
  • Read it like a sentence
  • [2 min]: Type this out in the Snippet window (show them)
  • Right click > save

Writing functions

Executing our function

  • Right click code > select "Save"
  • Right click greeter.js > select "Run"
  • "Console" tab
  • Type, then press :
    greeter()
  • Hand up once complete

Writing functions

Our first function

function greeter() {
  console.log("Hello Jess")
}
  • Same thing every time.
  • Imagine 1000 names === 1000 functions!

Writing functions

Our first function

greeterForAmy()
greeterForJess()
greeterForAsh()
greeterForSamantha()
...
...
greeterForLeeroy()

Writing functions

Our first function

function greeter() {
  console.log("Hello Jess")
}

Writing functions

Adding a parameter

function greeter(name) {
  console.log("Hello " + name)
}
  • + is adding to the end of the string
  • name is a variable; the parameter we pass becomes the value of name

Writing functions

Executing our function

  • Save
  • Run
  • In "Console":
greeter("Amy")
  • [2 min] Try it
  • Hands up when complete
  • Example running it 3 times with different names
  • 1000 = 1 function now!

Writing functions

Executing our function

greeter("Amy")
greeter("Jess")
greeter("Ash")
greeter("Samantha")
...
...
greeter("Leeroy")
  • But; 1 function run 1000 times :(

Writing functions

Arrays To the rescue!

  • Another type; a collection of other types
  • Similar to how objects are
  • variables = buckets; arrays = series of buckets

Writing functions

Arrays

["Amy", "Samantha", "Leeroy"]
  • square brackets
  • value == bucket

Writing functions

Array Functions

["Amy", "Samantha", "Leeroy"]

Writing functions

Array Functions

["Amy", "Samantha", "Leeroy"]

.forEach()
  • Like string; has method

Writing functions

Array Functions

["Amy", "Samantha", "Leeroy"]

.forEach()

["Amy", "Samantha", "Leeroy"].forEach(greeter)

Try this in the "Console"

  • Do something once per value in array
  • aka; Iterating / looping
  • Try it [hand up when complete]
  • Why good?
    • imagine twitter writing out greeter millions of times!
    • Instead, iterate over the array

Writing functions

Returning

function greeter(name) {
  console.log("Hello " + name)
}
  • console.log is for your eyes only
  • What can JS do with "Hello" + name? Nothing
  • Change it slightly...

Writing functions

Returning

function greeter(name) {
  return "Hello " + name
}
  • Now, JS can do something with "Hello" + name
  • return pass value back out
  • recipe: return == the finished dish

Writing functions

Returning

  • Edit greeter.js
  • Save
  • Run
function greeter(name) {
  return "Hello " + name
}

Writing functions

Returning

["Amy", "Samantha", "Leeroy"].forEach(greeter)
  • Press up to get last command entered
  • No more output (only undefined)
  • forEach doesn't understand return
  • Arrays have another built in function: map

Writing functions

Returning

["Amy", "Samantha", "Leeroy"].map(greeter)
  • understands return
  • gives us a new array

Writing functions

Returning

["Amy", "Samantha", "Leeroy"].map(greeter)

Output:

▼ Array[3]
  0: "Hello Amy"
  1: "Hello Samantha"
  2: "Hello Leeroy"
  • Hurray!
  • Learned a new function, map, and return
  • Add that line to the bottom of greeter.js

Writing functions

Review

Review

greeter.js:

function greeter(name) {
    return "Hello " + name
}
["Amy", "Samantha", "Leeroy"].map(greeter)

Output:

▼ Array[3]
  0: "Hello Amy"
  1: "Hello Samantha"
  2: "Hello Leeroy"
  • walk through the function
  • it's a recipe
  • types (array, string)
  • .map function = iterator / visit each value in array

Writing functions

Tweets

(sort of)

Tweets

Setup

  • To save on typing

Tweets

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}
  • Array is collection of values
  • values are objects
  • object have string values in them
  • makeTweet is very similar to greeter func

Tweets

.map()

  • As before, .map over array

Tweets

.map()

tweets.map(makeTweet)
  • Try it out in the console
  • If it works, add it to your "snippet"

Tweets

.map()

tweets.map(makeTweet)

Output:

▼ Array[3]
  0: "hello by @jesstelford"
  1: "hi by @taylorswift"
  2: "g'day by @bigbird"
  • Outputting an array isn't so useful

Tweets

.join()

  • Converts array to string

Tweets

.join()

tweets.map(makeTweet).join()

Tweets

.join()

tweets.map(makeTweet).join()

Output:

hello by @jesstelford,hi by @taylorswift,g'day by @bigbird
  • Don't add to "snippet" yet
  • Added a comma

Tweets

.join()

tweets.map(makeTweet).join('<br>')
  • Can change with a parameter
  • <br> is HTML (break / new line)

Tweets

.join()

tweets.map(makeTweet).join('<br>')

Output:

hello by @jesstelford<br>hi by @taylorswift<br>g'day by @bigbird
  • Add to "Snippet"
  • Save

Introduction To Javascript

Dom

  • Fun, but no one can see it
  • To put JS output into page, use DOM
  • DOM = Document Object Model
  • It's how JS interacts with HTML

DOM

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>
  • Remember this from the start?
  • Right == DOM
  • How do you interact with them?

Dom

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>

document.querySelector()
  • Pick out a DOM element

Dom

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>

document.querySelector('section')
  • Parameter = HTML element name
  • No angle brackets needed

Dom

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>

document.querySelector('section')

Output:

► <section>...</section>
  • Try it out in "Console"

Dom

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>

document.querySelector('section').innerHTML
  • HTML contents as a string
  • It's a variable!

Dom

<body>                   * body
  <section>                * section
    <p>Hello</p>             * p: Hello
    <p>World</p>             * p: World
  </section>
</body>

document.querySelector('section').innerHTML

document.querySelector('section').innerHTML = 'Foo Bar'
  • Can set any string to it.
  • Notice the Page changed!
  • JS can change HTML!

Dom

tweeter.js

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

tweets.map(makeTweet).join('<br>')
  • Can we use this to modify the DOM?

Dom

tweeter.js

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

tweets.map(makeTweet).join('<br>')
  • Output on last line
  • Returns a string
  • innerHTML takes a string!

Dom

tweeter.js

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

var theTweets = tweets.map(makeTweet).join('<br>')
  • First, save it to a variable
  • Save, and Run

Dom

tweeter.js

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

var theTweets = tweets.map(makeTweet).join('<br>')
document.querySelector('section').innerHTML = theTweets
  • Now, set it as the HTML
  • Should see the tweets

Dom

tweeter.js: http://bit.ly/tweeterjs

var tweets = [
  {tweet: "hello", name: "jesstelford"},
  {tweet: "hi", name: "taylorswift"},
  {tweet: "g'day", name: "bigbird"}
]

function makeTweet(tweetData) {
  return tweetData.tweet + ' by @' + tweetData.name
}

var theTweets = tweets.map(makeTweet).join('<br>')
document.querySelector('section').innerHTML = theTweets
  • Link to complete code

Introduction to Javascript

Review

Review

  • HTML vs CSS vs JS
  • Console
  • Types
  • Functions
    • .toUpperCase()
    • greeter()
    • makeTweet()
  • DOM
    • document.querySelector()
    • .innerHTML

Success

  • That's JS!

  • Starts May 23rd
  • 2 nights a week
General Assembly Introduction to Javascript Me: JS for over 12 years SF -> Sydney JS: set of instructions (like a recipe) Works in every browser Runs everywere (servers, phones, even robots!)