Intro to JavaScript and the browser Console
Lesson Intro
You’ve got to start somewhere!
How about here.
The Goals
-
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.
-
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!
-
Go over the basic syntax
It’s mostly the same as PHP. Numbers, Strings, Arrays, Objects. How do you create them?
-
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.”
-
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.
-
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.
-
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.
-
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.
-
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.
-
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. -
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:
-
Watch the video and follow along
Practice with the JavaScript syntax. Make sure you try all of the things discussed.
-
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!
-
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.
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