Welcome back to another edition of {Kids: Code}, the free weekly newsletter that helps teach you computer coding! Last week we took a breather from our HTML journey to review how to “sort” with Python, but now we're going to resume our series on building webpages (you can start from the beginning here). Later we’ll also share a neat game made with augmented reality (AR) as well as talk a bit about the topic of “media literacy.”
As always, feel free to reach out to us or check us out on Twitter!
We're back this week, and building on our webpage tutorial! If you're new to this, you can follow the past issues starting here - each week we've been building on a webpage bit by bit and looking at the different languages used for coding them.
We've covered HTML (structure) and CSS (style) before. The third language used for building webpages is JavaScript, which can be used to apply interactivity (or functionality) to the page. For example, how could we make a button that shows a message box?
The HTML
When we left off in our last issue, we had built our website using the following HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>Your own text here</p>
</body>
</html>
And our CSS code, in styles.css:
h1 {
color: red;
background-color: blue;
}
Let's make a third file, and call it scripts.js. We can add it to our HTML template with a <script>
tag, like below - and we'll add a <button>
that we can use to hide or show our message (right before our closing </body>
tag):
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>Your own text here</p>
<button id="my_button">Show Message</button>
<script src="scripts.js"></script>
</body>
</html>
Heads up!
You might notice the
id=
on our<button>
element. Anid
is like aclass
, but can only be used once - but is a useful tool when you're writing JavaScript, as it gives you a quick way to store the element in a variable.
Getting Started with JavaScript
Now that we've got our script linked, we can try writing some code! Let's explain a few concepts we need to know before doing that, though.
Variables
A variable is used for holding data - like a message, number, or something custom you've made. It can be declared with a basic var
keyword, like so:
var x = 1;
Here, we've set x
to be equal to 1
. We can change the value by setting it again (without the var
this time):
x = 2;
We'll look at this more in a minute, but for now, just know: a variable is used to store data.
Protip!
You might also see this with a
const
orlet
instead ofvar
. They have slight differences, but for right now we're focusing onvar
to get the basics down. We'll make sure to cover these in a later issue!
Functions
A function
takes in data (variables), does some work with them, and then returns - sometimes with data, or sometimes without. If it's returning data, you'll see a return
keyword at the end, like so:
function add_two(my_variable_number) {
return my_variable_number + 2;
}
Here, we've got a function that adds 2
to whatever we pass in, and returns the new value. We can call it like this:
var x2 = add_two(4);
Document
JavaScript inside of a web browser (like Chrome or FireFox) has a few special variables. One that we want to pay attention to is document
: it wraps our HTML page, and lets us work with it to run code with the elements on our page.
Hiding and Showing
With those concepts reviewed, let's write some code to make our <button>
show our message.
To attach a function
to our <button>
, we'll want to store the button in a variable
. That special document
variable gives us a special function
to do just that:
var button = document.getElementById('my_button');
document.getElementById
gives us a variable that has built in functions to work with our element. We can add the addEventListener
function on this variable to add a function that will execute on a specific event - like a click! Just to try it, we'll pop up an alert
message when it's clicked:
var button = document.getElementById('my_button');
button.addEventListener('click', function() {
alert('clicked!');
}, false);
What's an Alert?
alert
is a browser function that pops up a small window with a message to the user (in this case, you!).
Save your scripts.js
file and reload your browser, then click the button. You should see a message pop up!
JavaScript is a powerful language with many features, but we hope this small tutorial has helped get your feet wet. We'll be sure to cover it more in-depth in future issues!
Little Red Coding Club is a unique game unlike the ones we’ve shared in our past issues since it can used augmented reality (AR) to make it look like the game is happening right in your room! (If you’re familiar with Pokémon Go, that’s what AR is.)
The game, like the title might hint at, is about helping Little Red get back to her grandmother’s house, and to do so needs some coding help. The game supports two-player mode, non-AR gameplay, and numerous different game modes! You can try it out free to see if you like it or not and then purchase the full version later, too. [Recommended ages 4+]
For the Parents
We’ve talked in the past about important tech topics like digital equity, so we wanted to take a moment at the end of the newsletter to put a spotlight on a related topic: media literacy.
EdTech Magazine recently published an article highlighting what media literacy is and how it applies to students and adults. Media literacy is an important concept in the digital age as it is all about knowing, as EdTech puts it, “the validity and intent behind a piece of media.” When there is so much information out on the Internet, though, how is it possible to know the validity or intent on everything? That’s what the article (which we recommend!) explores and offers guidance on.
This Week’s Vocabulary Word
JavaScript
A coding language used for building interactive parts of webpages.