- Calling Functions
You might have noticed that HTML isn’t really a programming language. It’s a markup language, which means that it lets you specify the content of a webpage. But it doesn’t contain any logic- the stuff like
for loops, and functions that you might expect from a coding language.
Let’s start with an example
<!DOCTYPE html> <html> <head> <title>Happy Coding</title> </head> <body> <p>Happy coding!</p> </body> </html>
Hopefully you’re already familiar with how HTML works. If not, go read the HTML tutorials and then come back!
<script> tag inside the
<script> tag. Here’s an example:
<!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. When this code is run, it adds `“Hello world!” to the webpage:
<head> tag of your
Similar to how you can load external
.css files into your
.html file, you can also load external
.js files. Create a new
main.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="main.js"></script> </head> <body> <p>Happy coding!</p> </body> </html>
<script> tag now points to the
main.js file, and you don’t have to include any code in the
index.html file itself.
Remember from the p5.js tutorials that functions let you tell the computer what to do. For example, in p5.js you can draw a circle by calling the
circle() function and passing in the appropriate parameters.
To call a function, you write the function’s name, then in
( ) parentheses you pass in parameters.
We’ll get into some more advanced function 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 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 shows a message 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.
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
Comments and Questions
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!