Tutorials / JavaScript Tutorials / Calling JavaScript

Calling JavaScript

tutorial javascript

If you’re following these tutorials in order, then at this point you should be familiar with coding in p5.js and with setting up a 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 lets you specify the content of a webpage. But it doesn’t contain any logic- the stuff like if statements, for loops, and functions that you might expect from a coding language.

This is where JavaScript comes into play. JavaScript is a programming language that executes in a webpage and lets you create interactive webpages.

Running JavaScript

Let’s start with an example index.html file:

<!DOCTYPE html>
<html>
	<head>
		<title>Happy Coding</title>
	</head>
	<body>
		<p>Happy coding!</p>
	</body>
</html>

example webpage

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Hopefully you’re already familiar with how HTML works. If not, go read the HTML tutorials and then come back!

To add JavaScript to this webpage, add a <script> tag inside the <head> section of your HTML, and then put your JavaScript code inside that <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:

example webpage

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

External JavaScript

You could write all of your JavaScript inside the <head> tag of your index.html file, but that gets cumbersome if you want to run the same code on multiple pages. It’s also just a good idea to keep your JavaScript and your HTML separate. So most of the time you’ll have a separate .js file (or multiple files) that contain your JavaScript code.

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:

document.write("Hello world!");

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>

The <script> tag now points to the main.js file, and you don’t have to include any code in the index.html file itself.

Calling Functions

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()

The document.write() function adds some content to the webapge.

document.write('Hello world!');

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()

The alert() function shows a message to the user in a dialog with an OK button.

alert('Hello world!');

alert dialog

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

(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.log()

The console.log() function prints a string to your browser’s JavaScript console.

console.log('Hello world!');

To see the JavaScript console, open your browser’s developer tools (by pressing F12 or through the menu) and find the console tab.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

You can learn more about the developer tools in the developer tools tutorial.

Homework

  • Do a Google search to figure out how to disable JavaScript in your browser. Disable it, and then try going to some of your favorite websites. This will show you how much the web relies on JavaScript. What differences do you notice? Don’t forget to turn JavaScript back on when you’re done!
  • Create an HTML file that has an empty <body> tag. Add JavaScript code that uses the document.write() function to create a website. Congratulations, you just wrote your first JavaScript app!

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!