HTML is a markup language, which lets you specify the content of a webpage. CSS is a style sheet language, which lets you style that content. But HTML and CSS don’t contain any logic! You can create a button in HTML, and you can style it in CSS, but you can’t tell the browser to display a message when that button is clicked.
Let’s start with an example
This HTML creates a webpage that contains a single
<script> tag inside the
<script> tag. Here’s an example:
When the browser loads the webpage, it reads the
<script> tag and executes the code inside of it. When this code is run, it adds
"Hello world!" to the page. Try changing the code so it says
"Hello, your_name_here!" instead.
Writing code is a little bit like writing a recipe. Similar to how a recipe is a set of steps that another person follows, a program is a set of steps that the computer follows.
A single step of a recipe might be something like “preheat the oven to 350 degrees” or “add 2 cups of flour”, and you might write each step on its own line. The other person then follows those steps in order, one after the other, to bake a cake.
preheat oven to 350 degrees get a large bowl add 2 cups of flour add 1 cup of sugar ...
This is similar to how a computer program works. A program is a set of instructions that tells the computer to follow a series of steps. Each step is written on its own line, and the computer follows the instructions one at a time.
A function is one of those steps. Calling a function is giving the computer a single instruction that tells it to do one thing.
To call a function (which is another way to say “tell the computer to follow the step on this line of the directions”), you need to do four things:
()after the function’s name.
In our recipe instructions, imagine if one of the steps just said “preheat the oven” - that wouldn’t be enough information! What temperature should you use? That step requires more information: specifically, a temperature.
It’s the same idea when you’re writing code. Computers are very dumb, so they only know how to do exactly what you tell them. When you ask a computer to jump, it’s going to ask you: how high? You pass that extra information into a function through its parameters.
The recipe from above might look like this in code:
preheatOven(350); getLargeBowl(); addFlour(2); addSugar(1);
Notice that the
getLargeBowl function doesn’t take any parameters, because you don’t need any extra information to follow that step.
Note: Parameters are also often called arguments. I generally use the terms parameter and argument interchangeably.
We’ll get into some more advanced functions in the next few tutorials, but for now let’s focus on some functions that you’ll use a lot while coding and debugging.
document.write() function adds some content to the webapge.
You’ve already seen this one in the example above. You’ll learn more about the
document variable in the interactive HTML tutorial, but for now it’s enough to know the
document.write() function takes whatever parameter you pass into it and adds it to the webpage.
' ' single quotes around the
'Hello world!' parameter. That’s because
'Hello world!' is a
string of characters, and the
' ' single quotes group them together into a single value that you can use as a parameter. You’ll learn more about this syntax when you learn about variables, but for now try to remember your
' ' single quotes when you’re working with text!
alert() function shows a message to the user in a dialog with an OK button.
Try changing the code to show a dialog that says
'Hello, your_name_here!' instead. Note: CodePen automatically re-runs the code as you make changes, so changing the code might show you multiple dialogs.
Alert dialogs can be pretty annoying if you overuse it (nobody likes popups), but it can be useful for debugging your code.
You can learn more about your browser’s developer tools in the developer tools tutorial.
<script> tag in your
Similar to how you can load external
.css files into your
.html file, you can also load external
.js files. Create a new
script.js file, and put your code in that:
This is a little silly because this code is only one line long, but this will come in handy as your code gets more complicated. Now your
index.html file can load that file using the
src attribute of the
<script> tag, like this:
<!DOCTYPE html> <html> <head> <title>Happy Coding</title> <script src="script.js"></script> </head> <body> <p>Happy coding!</p> </body> </html>
<script> tag now points to the
script.js file, and you don’t have to include any code in the
index.html file itself.