boat

Javascript

interactive web design

console.log

In this unit, we will be introduced to the <script> section of a webpage.

We will see how to create a variable using var.

We will see how to assign data to a variable using =.

We will see how to use your browser's console.

   Getting started

Here is some Javascript:

var age = 15;

console.log("Oh, today is your birthday!");

age = 16;

We are telling the browser that age is a variable where we will store some data.

Later we can update the data in the variable age without using the keyword var again. This is because the browser already knows that age is a variable.

Watch this video to see how to set up a <script> section in your webpage. This is where we will write some Javascript!

It will also introduce variables and how to use your browser's console.

TASK 1

If you are using Google Chrome, remember to use CTRL SHIFT J to open the console.

 
Create a folder called Javascript.
 
Create a project folder called JFocus1 inside the Javascript folder.
 
Using a text editor, save a new web document called JFocus-1.html in your project folder.
 
Inside JFocus-1.html,set up the <html>, <body> and <script> tags.
 
In the script section, create these three variables and assign your own personal data to them.
  • myName
  • myAge
  • myHometown
 
Write Javascript to create a sentence using console.log eg My name is Jack. I am 15 years old and I am from Hiroshima.

TASK 2

Under your current javascript, write the following and test it:

console.log("It is my birthday!");

myAge = myAge + 1

console.log("So, now I am ",myAge," years old!");

Notice that we updated the data stored in the variable myAge. Because we already told Javascript that this is a variable, we don't need to use the var keyword again.

TASK 3

To calculate your age in days, we will simply multiply myAge by 365.

Create a new variable called myAgeInDays.

Can you figure out how to assign the correct data to this new variable and how to create a sentence in the console log?

Hint: talk to your classmates and share your ideas!

SUBMISSION

Submit your project folder as instructed by your tutor.


Tags

browser file tags body save p html h4 structure refresh organised CTRL SHIFT Jscript console.log