It is useful to be able to store values for later use. This is done using variables. Variables are containers for values that can change. In other programming languages variables are often identified in some way. In JavaScript anything might be a variable.
For example create a blank HTML Web page from your template (call it variables.html) and insert this in the BODY:
<button onclick="larger()">Larger</button>
<p id="first" style="font-size:16px;">Some text in a paragraph.</p>
That will trigger this function which you should put in the HEAD:
<script>
<!--
function larger() {
alert(window.document.getElementById('first').style.fontSize);
var currentSize=window.document.getElementById('first').style.fontSize;
alert(currentSize);
var lengthOfString=currentSize.length;
alert(lengthOfString);
var numericSize=currentSize.substring(0, lengthOfString-2);
alert(numericSize);
var newSize=numericSize*2;
alert(newSize);
var newSize=newSize+"px";
alert('The new size will be '+newSize);
window.document.getElementById('first').style.fontSize=newSize;
}
-->
</script>
The first line will pop up a dialog showing the current font size. This is just to check that the style property exists.
In the second line of the function a variable is declared (created) using the special word "var". A value is "assigned" to it using the equals (=) operator which should really be read as "make equal to".
Later in that same line a string literal (a word) is used ('first'). Strings of text are put inside single or double quotes (either works but single avoids confusion with HTML attributes and PHP). Any word out of quotes is assumed to be either a variable or a reserved word such as function or alert.
Click on the button to see what the code does. Click it again.
The alert boxes should give you some idea of what is going on but work through it line by line (ignoring the alerts):
- the word var is used to create a new variable which is empty until the same line sets its value to the current font size
- the second line (ignoring alerts) gets the length of that value so that the end two letters (px) can be removed
- a new variable numericSize is used to hold the size of the font without the px (substring gets part of the variable starting at the beginning - the 0 points to the first character - and ending 2 less than the end of the string to get rid of the px)
- a new variable is created/initialised and set to the old font size doubled
- the style is set to the doubled font size
Note that in the final alert a string is included (The new size will be) in quotes. Then a plus sign and then the variable. The plus sign joins the string to the variable and displays them both.
Those used to programming may be screaming at the changing of the variable from text to number with no shame but JavaScript is happy to treat numbers as strings or strings as numbers.
In this script you have met variable initialisation, assigning values to variables, alert dialogs to display variables, extracting parts of variables as substrings, arithmetic and using variables to affect the page. Spend some time making sure you understand all of these by trying them out in various ways.
