- in the browser console
- in node
- via a script tag
- we can also have an external script.
We will talk about how we can actually run those.
The simplest is to open up your browser dev tools and go to your console.
1 + 1 and hit enter and the console returned
For example You can type the following to grab all the paragraphs from the github page that you are currently on. 👇
(Don't worry about what document.querySelectorAll() does, we will cover that in a future video).
The code that runs in your dev tools console is running in the context of the page that is loaded in your browser tab.
The next way to do it is a script tag.
Go into the
/playground folder and create a new file
Wes has an Emmet extension in VS Code so he is going to hit
Tab to scaffold out some HTML for us.
In the body, we can have a script tag in which we will add
If you go ahead and open the
running-js.html file in the browser, and open the console, you will see that it says "hey".
Don't sweat this too much, we will be explaining what console.log() and everything does shortly.
One thing to keep in mind is that it's almost always worth running scripts just before the closing body tag.
So if we were to modify
<body> <p>Hey</p> <script> const p = document.querySelector("p"); console.log(p); </script> </body>
If you were to move the script tag above the paragraph element (or move the paragraph element below the script tag), and refresh the page, the console will show
null because that means it found nothing.
In order for your script tag to access the elements on the page, the elements must first be on the page before you select them. If we try to select something that doesn't yet exist (because it gets created later), we won't have access to it.
some.js. In that file, add the following code 👇
console.log("I am in another file");
running-js.html file, remove the existing script block and instead add a script tag with a
src attribute. (You do not need a
type= attribute until we hit ECMAScript Modules.)
Inside of the
src= attribute, you need to give it a relative path, like so 👇
That works because the HTML file is in a folder where the sibling file is
./means in this folder.
../would mean go up a folder level.
In our case, it's in the same folder so
./some.js is the relative path to our file.
Now if you run that, it will say in the console
Again, if you were to put the script inside the
head element, it will still work.
However, if you were to try to select some things on the page, such as the paragraph tag, you will get
Why? Because of the same reason, the script will run before the actual HTML is finished building on the page. Leave the script tag right before the closing body tag for the best performance and to save yourself future debugging headaches.
(There are some options like the
Another thing you may have noticed is why is there a closing script tag if there is no content in between the opening and closing tag?
That is a quirk with the script tag. It cannot be self closed.
That will not work.
You can have multiple script tags in an HTML file, if you like.
One more is actually running it in Node.js.
console.log("I'm from node");
The way we do that is we open our terminal and
cd into the
You can run the script in Node by entering the following in the terminal and hitting enter 👇
That will run whatever code is in the script file, and once it's done, it will exit out of node and return you to the terminal.
Find an issue with this post? Think you could clarify, update or add something?
All my posts are available to edit on Github. Any fix, little or small, is appreciated!