The section below introduces some aspects of the core language and offers an opportunity to play with a few browser API features too. Have fun!
A Hello world! example
Warning: If you haven't been following along with the rest of our course, download this example code and use it as a starting point.
Note: The reason the instructions (above) place the
The heading text changed to Hello
Following that, the code set the value of the
Note: Both of the features you used in this exercise are parts of the Document Object Model (DOM) API, which has the capability to manipulate documents.
Language basics crash course
Variables are containers that store values. You start by declaring a variable with the
You can name a variable nearly anything, but there are some restrictions. (See this section about naming rules.) If you are unsure, you can check your variable name to see if it's valid.
After declaring a variable, you can give it a value:
Also, you can do both these operations on the same line:
You retrieve the value by calling the variable name:
After assigning a value to a variable, you can change it later in the code:
Note that variables may hold values that have different data types:
So why do we need variables? Variables are necessary to do anything interesting in programming. If values couldn't change, then you couldn't do anything dynamic, like personalize a greeting message or change an image displayed in an image gallery.
If your comment contains no line breaks, it's an option to put it behind two slashes like this:
There are a lot more operators to explore, but this is enough for now. See Expressions and operators for a complete list.
Note: Mixing data types can lead to some strange results when performing calculations. Be careful that you are referring to your variables correctly, and getting the results you expect. For example, enter
Conditionals are code structures used to test if an expression returns true or
not. A very common form of conditionals is the
The expression inside the
Functions are a way of packaging functionality that you wish to reuse. It's possible to define a body of code as a function that executes when you call the function name in your code. This is a good alternative to repeatedly writing the same code. You have already seen some uses of functions. For example:
If you see something which looks like a variable name, but it's followed by parentheses—
For example, the
You can also define your own functions. In the next example, we create a simple function which takes two numbers as arguments and multiplies them:
Try running this in the console; then test with several arguments. For example:
Real interactivity on a website requires event handlers. These are code structures that listen for activity in the browser, and run code in response. The most obvious example is handling the click event, which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:
are many ways to attach an event handler to an element. Here we select the
is equivalent to
It's just shorter.
The functions we just passed to
Supercharging our example website
Before going any further, delete the current contents of your
Adding an image changer
This is what happened. You stored a reference to your
Adding a personalized welcome message
Next, let's change the page title to a personalized welcome message when the user first visits the site. This welcome message will persist. Should the user leave the site and return later, we will save the message using the Web Storage API. We will also include an option to change the user, and therefore, the welcome message.
A user name of null?
When you run the example and get the dialog box that prompts you to enter your user name, try pressing the Cancel button. You should end up with a title that reads
Mozilla is cool, null. This happens because—when you cancel the prompt—the value is set as
Also, try clicking OK without entering a name. You should end up with a title that reads Mozilla is cool, for fairly obvious reasons.
To avoid these problems, you
could check that the user hasn't entered a blank name. Update your
In human language, this means: If
If you have followed all the instructions in this article, you should end up with a page that looks something like the image below. You can also view our version.
If you get stuck, you can compare your work with our finished example code on GitHub.
In this module
Bagaimana Cara Belajar coding untuk Pemula?
Bagaimana Cara Belajar Coding yang Efektif?.
Pelajari konsep dasar coding. ... .
Pelajari jenis-jenis developer. ... .
Pahami perbedaan bahasa pemrograman. ... .
4. Cermati coding yang dibuat orang lain. ... .
Baca buku coding. ... .
6. Awali dari HTML. ... .
7. Kembangkan kemampuan coding..