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.