You might be wondering about the second line:
// in front of the text makes the entire line (after the
By now you’re probably itching to write some code, and I don’t blame you! First of all, create a new folder on your computer with an
index.html file inside. Next, let’s add some boilerplate HTML code:
Time to add our
<script> tag! It can be put in either the
<body> tags. Note that it executes at its position in the HTML. This means that if we’re modifying an
<h1> but then
<h1> is after the
<script> tag then it won’t have been loaded yet, and the code will not work. Because of this,
<script> tags are usually placed just before the ending
</body> tag, so everything has loaded first.
Let’s add it in!
If you save and reload the page, nothing will have changed - this is because our script doesn’t do anything yet!
We’re going to be creating a popup saying “Hello World!” - This is a classic message that programmers often use when they first try using a new technology or language.
Here’s the code:
WAIT! Don’t copy the code into your editor yet! Before we try out this code, we need to understand what’s going on here first. Do I see your mouse slowly moving over to your code editor? Just stay with me here a bit.
This line is made up of a word, some brackets, some quotes with text inside them and a semicolon. The
alert(...) bit is called a function. A function is basically a specific action that you tell the computer to do. A function can have inputs, which are the bits in the brackets. If a function doesn’t have inputs, we just leave the brackets empty (eg.
myFuction()). A function can also have outputs, which I will go into in a later article. Here our
alert function doesn’t have an output because it does something (in this case creates a popup) instead of returning a value. I’ll go more into functions in a later article.
Now let’s have a look at what is inside the brackets - the input for the
alert function. As you can see, we have our message,
So, here’s the moment you’ve been waiting for - go type the line inside your
<script>, under the comment…
If you’re feeling super-inspired, type it yourself instead of being a copy-paste wizard 😉
Reload the page, and see what happens…
You know how you can link
<link> tag we use a
<script> tag. Here’s an example:
As you can see, we use the same
<script> tag as before but leave it empty. Instead, we give the opening tag and
index.html, create a
Next in the HTML, update the
Also, these articles take time and effort, so I’d really appreciate it if you shared it :)
Finally, if you have any questions or feedback, tell me about it in the comments.
Want to get new posts in your inbox? Sign up to my newsletter.
I’ve worked hard on these tutorials and as of now do not make any money on them, so I’d really appreciate if you signed up ;)