Where to Write JavaScript

[00:00:00]
>> This is just kind of a recap, cuz folks as we mentioned in the chat, have pointed out that JavaScript is part of the web. So HTML, and CSS, and JavaScript, are all kind of BFFs cuz we love acronyms here. [LAUGH] So [LAUGH] best friends forever, HTML, CSS, and JavaScript.

[00:00:19]
Can anybody help me break down? So HTML versus CSS versus JavaScript. How do you all think about them? How do you all think about how these three web technologies relate? Anybody in the room here wanna share too?
>> HTML is mostly for content structure.
>> HTML for content and structure, yes.

[00:00:40]
So HTML is sort of how we declare the stuff in the webpage would you say, the content, excellent point. Yeah, Paul.
>> I've had to describe the HTML is like the noun, CSS is the adjective, and JavaScript is the verb.
>> I like that a lot, that's great.

[00:01:03]
HTML is the noun, is the thing, CSS is the adjective, the description of the thing, and JavaScript is the verb, the action. That happens with the thing, I love that a lot. And that is sort of similar, that's kind of how I think about it. So I kind of think about this as sort of like a musical theater production or a stage production, a play or something, like Hamilton, for example.

[00:01:25]
So I think of HTML as kind of like the actors on stage or maybe the props, the things, the nouns, the content. The CSS kind of like the costumes and the set design and how the lighting looks and sort of how everything looks, and kind of feels, so sort of the style put on top of all that content.

[00:01:47]
And then, I think of JavaScript as sort of like the choreography, the dancing, the moving across the stage, giving things life, bringing things to life a little bit. So if either of these analogies, the noun, verb, adjective analogy or the the stage production analogy work for you, great.

[00:02:04]
But this is essentially how these three core web technologies play together. And JavaScript is the one that adds the pop if you ask me, the zing, the activity, the action, the movement, the life. So question is, how do we write it? [LAUGH] Well, that's I guess, what we're here to talk about.

[00:02:24]
So that's really my job to answer. [LAUGH] And at first, in this course, if you've never seen JavaScript before, if you have, you're gonna maybe feel more comfortable. But if you've never seen JavaScript before, there are times where it's just gonna feel like you are just saying some weird spell or some kind of jargon invocation, like light as a feather stiff as a board and anybody played this game as a kid, just me, just 90s kids, okay?

[00:02:50]
So this is like a game where sometimes you feel like you're just repeating spells that you don't totally understand. You're just saying, or writing in this case, something that you don't totally know how it works, but you know that it does something, like levitate your friend. But hopefully, by the time we finish this course and by the time we have the tools in our tool belt to go on and continue learning JavaScript, we will feel totally in control of this magic art of JavaScript.

[00:03:16]
And we will be able to wield its powers for good or evil as we so choose. And so this is the hope that we're gonna start by writing some things that we were just gonna repeat the words and we don't know what they mean. But we're gonna dig into them and we're gonna learn what they mean so that we can really have a strong command over the language.

[00:03:34]
So maybe a more apt question to get started is not so much how we write JavaScript but where we write JavaScript. So where do you write JavaScript to anybody? Anybody wanna throw in, there are several answers to this question, but anybody wanna throw in a place where you could write JavaScript?

[00:03:52]
>> Source script in the browser.
>> In the browser? Yes, so one place that we can write JavaScript is in the browser. And there are a couple of ways we can do that. So one place and where we're going to be working today is in the browser's JavaScript console.

[00:04:08]
Console is kind of a live dynamic sort of interpreter for JavaScript that we can use. I don't think it's at our fingertips, it's already in your computer, it's been hiding there. [LAUGH] So it's already in our web browsers, that's what we're gonna be using today. But there are also some other options that we have.

[00:04:28]
So one thing is that we could use a a txt file. So the same as we would write HTML in a .html file, we can also use a script tag, which I think someone also mentioned in the chat. We can use a script element to write JavaScript within our HTML files in a local file, which we can edit with whatever text editor we like.

[00:04:50]
So we could use something built-in to most systems like text editor or whatever editor your laptop maybe or your operating system comes with. Might not be a laptop, might be a, I don't know, any other kind of device, or we can use a kind of fully featured IDE, an integrated development environment.

[00:05:10]
[LAUGH] Which, for example, VS code is a hugely popular one among JavaScript developers, which gives us some nice extra, things like auto completion, and maybe some nice features to integrate with other tools in our developer workflow. And we can also use because JavaScript is such a hugely popular language, there are some amazing online playground.

[00:05:32]
So even if we're working, let's say on a smartphone or on some other device where we don't really have access to things like an IDE. Or maybe even the JavaScript console in the browser, we can use some of these cool playground sites like CodePen, .io, I think it is or code sandbox.io to write JavaScript in our browser.

[00:05:52]
And if you sign up for a free account on some of these sites, you can also save little snippets of JavaScript. So you have lots of options. We're gonna be working largely in our browsers, JavaScript console and local text files, but if you are doing something else, if you are in a CodePen or whatever else that is totally valid.

[00:06:10]
There are some minor differences between and sometimes major differences between different environments where we write JavaScript. So if questions come up, feel free to ask them. Today, we're gonna be focusing on the browser's JavaScript console. Shall we write some JavaScript? Let's open up our browser's console by doing the following things.

[00:06:31]
So there is if we go into the course site which again on Java.dev/havaScript-first-steps, you'll notice on day one link to a Tic Tac Toe. If you open that page, you'll see a very exciting web page like this. It's not much to look at, but it's a basic webpage that's gonna give us the scaffolding for some of the things we talked about today.

[00:07:00]
And we want to now on this page, just with this page open in your browser, so it's anjana.dev/javaScript-first-steps/1-tictactoe.html. We're going to now open our browser's developer tools so that we can get to the JavaScript console. Can anybody who's maybe already done this before walk me through how I would get the developer tools open in this page?

[00:07:26]
There's a few different ways.
>> You right click and then at the bottom of the drop down box is inspect.
>> Great, yes. So probably the easiest way to get the developer tools open is to right click anywhere on the page and inspect. Now, this is usually used for inspecting HTML elements, and we're gonna talk about that a little bit later.

[00:07:48]
What we'll see, yours might look a little bit different depending what browser you're in, what you'll see is some kind of HTML with whatever element you maybe clicked on, highlighted here. And as you move around, you'll see the different HTML elements get selected. And so from here, so now what we've done, again, we opened the file, if you'd like to download that file and open it locally, you can also do that.

[00:08:16]
You can open a local file in your browser, which is what we'll be working with more tomorrow. But right now the live file online is fine, we right clicked to click Inspect. And now, we wanna open the JavaScript Enos and so at the top or again, depending on your browser, you might be on the bottom of the page or what have you, you should see an option called Console.

[00:08:36]
And that will open up a little, what we call prompt so these two little lines and now, you are able to type stuff, and stuff will happen. So for example, I can say I'm gonna type a weird invocation here, just a spell. I can say "hell yes JS!", and press Enter and JavaScript does something.

[00:09:06]
In this case, I just told JavaScript to log or print or display something in the console. In this case, what I asked it to display was the string, hell yes JS. So we're gonna talk about all this later but the idea is that now you can enter JavaScript things.

[00:09:24]
You can do math for example. And every time I press Enter after entering some code, JavaScript will run and it will try to interpret or evaluate or basically make sense of that code, and so this is how we're gonna be interacting with JavaScript today.