If you’re following these tutorials in order, then at this point you should be familiar with programming in Processing and with setting up a basic webpage using HTML and CSS.
You might have noticed that HTML isn’t really a programming language. It’s a markup language, which means that it allows you to specify the content of a webpage. But it doesn’t really contain any logic- the stuff like
for loops, and functions that you learned about in Processing.
Let’s start with an example
<!DOCTYPE html> <html> <head> <title>Happy Coding</title> </head> <body> <p>Happy coding!</p> </body> </html>
This is just a basic HTML file, and hopefully it’s pretty familiar by now.
<script> tag inside the
<script> tag. It’s probably easier to just show you what I mean:
<!DOCTYPE html> <html> <head> <title>Happy Coding</title> <script> document.write("Hello world!"); </script> </head> <body> <p>Happy coding!</p> </body> </html>
Now when the browser loads the webpage, it gets to the
<script> tag and executes the code inside of it. You don’t really have to understand exactly what’s going on yet, but you can probably guess that when this code is run, it causes `“Hello world!” to be added to the webpage:
<head> tag of your
Similar to how we can load external
.css files into our
.html file, we can also load those external
.js files. To do this, let’s create a new
main.js file, and put our code in that:
This is a little silly because our code is only one line long, but this will come in handy as your code gets more complicated. Now our
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="main.js"></script> </head> <body> <p>Happy coding!</p> </body> </html>
Notice that our
<script> tag now points to our
main.js file, and we don’t have to include any code in our
In real life you’ll see a combination of both approaches, so it’s good to be familiar with both.
Calling Basic Functions
I’m going to assume you’re coming from Processing so you already know what a function is and what it means to call a function. For example, in Processing I would draw a circle by calling the
ellipse() function and passing in the appropriate parameters.
( ) parentheses you pass in the appropriate parameters.
We’ll get to more advanced function in the next few tutorials, but for now let’s focus on some more basic functions to get started.
You’ve already seen this one in action. We’ll go into more detail about the
document variable in the interactive HTML tutorial, but for now you should just know that the
document variable is an object, and that object contains functions you can call. One of those functions is the
write() function, which adds whatever you pass into it to the webpage.
alert() function is an easy way to show a message to the user. Pass it a string value, and that value will be displayed to the user in a dialog with an OK button.
(Note: CodePen automatically reloads the page if you make changes, so changing the code might show you multiple dialogs.)
This can be pretty annoying if you overuse it (nobody likes popups), but it can be a useful way to debug your code.
console variable is another object that contains functions that you can call. One function that you’ll use all the time is the
F12 or through the menu) and find the console tab.
You can learn more about the developer tools in the developer tools tutorial.
- Create an HTML file that has an empty