Apply for the next session

Lesson Intro

You’ve got to start somewhere!

How about here.

The Goals

  1. Get a quick overview of what JavaScript is and why it exists

    As you know, all the programming we’ve been doing requires a ‘server’ to run the code. This JS stuff can be run on the fly, right in the browser.

  2. Learn what the console is and how to get there

    Right in your browser is a “live” programming area. You can start your JS journey right there!

  3. Go over the basic syntax

    It’s mostly the same as PHP. Numbers, Strings, Arrays, Objects. How do you create them?

  4. Run through a few challenges to get the hang of things

    Writing JS is the lowest barrier of entry. You don’t even need a text editor, really!

Key
concept

Client

A “Client” is a funny name for an interface (hardware or software) that gives you access to a service provided by a “server” (another computer somewhere else). When you use a “web application” that is usually the “client” side / of a client/server relationship.

https://en.wikipedia.org/wiki/Client_(computing)


In our case – the browser is the “client.” You’ve got your server-side code (scripts/programs) (the PHP) – and then you have this other client-side scripting called JavaScript. It’s going to run IN the browser itself. The browser has its own – what they call “run time.” It can execute your JavaScript right there – on the fly – in real-time.

Ain't nothing but a syntax thing

What percentage would you say these shared, syntax-wise?

The concepts sure are the same.

Things you can do

We can’t spend a whole day just practicing writing variables over and over again. That stuff doesn’t stick until you can do something meaningful. And it would be really boring. Plus, you already know a lot about PHP.

It’s not about learning “what” to type. It’s about learning “what you can do.”

  1. Store something in memory

    Just by typing something – you are putting it up there in the browser brain (memory). But that isn’t very helpful… unless you give it a name that you can refer to it as. You have to create a shared language between you and the computer.

  2. Give something a name

    By creating something in memory, defining a variable, and then pointing that variable to the thing in memory… you are giving it a name. That way you can use that name/reference to refer to that thing later. You and the computer can agree on what that word/idea means.

  3. Do some basic math

    You can add some things together… subtract them… multiply them etc. just the same as PHP. And of course – you can name numbers and their totals with variables.

  4. Join words together

    You can “concatenate” strings of characters together. The only difference is… that in PHP you use a .  and in JavaScript, you use a +

    You can also combine variables too, right? Because – they are often also just representing some strings of characters in memory.

  5. Create lists of things

    With Arrays, you can organize lists and then grab things out of them with bracket notation. This is the same as PHP.

  6. Add things to existing lists

    With the array.push(item) method, you can add items to an existing array. The item will get added to the end of the list.

  7. Describe complex concepts

    With “Objects” – you can organize larger groups of data into sets of key:value pairs. They are like PHP associative arrays… but a more readable syntax with less typing! Hooray!

    You can access the object’s data with thing["key"] bracket notation – but in JS, you can use an . instead. It’s easier to type and read. thing.key

    .. and you can add new values to an object with dot notation too! thing.newKey = "Hey!";

Describing concepts

What percentage would you say these shared, syntax-wise?

The concepts sure are the same.

Which one do you like better?

Console?

Had to think aloud for a minute…

log and clear are methods of the console object. (which is not a JavaScript core language thing – it’s a part of the window) (which is essentially the browser)

Today's Exercises:

  1. Watch the video and follow along

    Practice with the JavaScript syntax. Make sure you try all of the things discussed.

    60+ minutes suggested
  2. Practice with some of your own ideas

    You’re going to have to just try a LOT of things for it to click. Have at it!

    45 minutes suggested
  3. PHP and WordPress aren't over

    Keep on truckin. We’re going to need that CMS setup for next week – so we can use it with JavaScript.

    60 minutes suggested

More things!

(If you’re interested in this type of stuff)


Lex interviews Brendan: https://www.youtube.com/watch?v=krB0enBeSiE

TONS of great history and inside information.

Also: this: https://codepen.io/sheriffderek/pen/EyQVqv?editors=1000

Apply for the next session