Create a blank HTML page from your template and call it jsconcatenation.html.  Concatenation is a fancy word for joining stuff.

Create a script element in your page (in the head element).  In there initialise three variables by pasting in this code:

var name='Sara';
var time='13:21';
var tasks=8;

Imagine these actually come from a bigger system which tells employees what jobs they have to do today.  That could be done with PHP and SQL which you may learn about next but for now we can cheat.

You could display the data in three parts but it is more friendly to make it into a sentence.  To prepare for that add this into the body element:

<h1 id="welcome">Welcome</h1>
<p id="message"></p>

<p onmouseup="updateMessages();">Update</p>

You now have two HTML elements ready for use and the event trigger (in the real system updates would be scheduled).  The function needs to be added after the three variables:

function updateMessages() {
    var currentWelcome=document.getElementById('welcome').textContent;
    var newWelcome=currentWelcome+' '+name;

Look at the code but don't get confused.  This is what the three lines inside the function do:

  1. get the existing text from inside the h1 element and put it into a variable
  2. create another variable and join three things together using the + operator:
    1. the existing welcome
    2. a space
    3. the name
  3. change the content of the h1 to the new welcome message

Save and try by clicking on the update paragraph.

To finish this add these lines to the function after the existing three already inside the function:

var tasksMessage=name+' you have '+tasks+' tasks to do and the time is now '+time+'.';

Save and try.  This illustrates how confusing concatenation can become but unfortunately you will probably need to do a lot of it!

The + operator here is known as the concatenation operator.  In JavaScript it looks like the same operator used to do arithmetic as you will see soon.