Javascript Tutorial
Starting down the road with Javascript
Javascript example...
Click a button...
Just a reminder, you need to have a basic understanding of HTML before starting this mini tutorial. There is a tutorial on HTML on this site, click on the 'HTML' button on the top menu bar. You should read at least the introductory part and through a few of the examples.
Javascript (JS) usually performs some kind of action on your webpage after a user enters information or clicks on a button. You can create games with JS where the user interacts with the computer. It can manipulate data such as numbers, button clicks, colors, text (known as strings) and user input. Strings are just words or phrases as opposed to numbers. For example the word 'hello' would be considered a string in computer language but 2351 would be considered a number. An example of a program using JS and numbers is my 'Times Table Speed Test'. You can click on it in the menu bar at the top. This program is about 90% JS and 10% HTML. JS is what looks at the numbers entered and compares them with the 'correct' answer. It will then give a readout of how long it took to give an answer and if it was correct. You can also look at the source code for two more short javascript games on the main webpage blog, 'To Daze Fraze' and 'Pick a number between 1 and 100,000'. Javascript works closely with HTML and one of the first 'commands' you will learn in JS is 'document.getElementById'. Yes it is a rather long command and it's a pain if you want to use it a lot. That's where copy and paste comes in handy. Anyway, assuming you have already learned some basic HTML, you know that HTML is comprised of different 'elements'. You should have learned also that you can give the different elements an 'id' name. For example:
<p id="somename"> The 'somename' part is the id name you gave that particular element. JS can manipulate that element by using it's 'id' name, thus the command 'document.getElementById'. Observe the spelling and what letters are capitalized.....E,B and I. There's a period between 'document' and 'getElementById'.You will use this command often in your JS code. For example:
<!DOCTYPE html>
<html>
<head>
<title>Javascript example</title>
</head>
<body>
<p id="ex">
This is a regular paragraph element. With a click of a button, Javascript can change the color and font size of this paragraph. It can even change the words. Click the button to observe.
</p>
<button type="button" onclick="myTest()">Click Me!</button>
<script>
function myTest(){
document.getElementById("ex").innerHTML="This sentence has been changed";
document.getElementById("ex").style.fontSize = "25px";
document.getElementById("ex").style.color = "violet";
return;
}
</script>
</body>
</html>
The above code starts out with your basic HTML elements. Notice we have given an id="ex" to the first <p> element . After the paragraph element we write a 'button' element with a 'onclick' attribute to a function called 'myTest()'. Functions will be explained shortly. Next we have the <script> element. All javascript code must be written between an opening and closing <script> and </script> tag. In the next line of code, the first document.getElementById("ex") 'gets' the HTML element with the id "ex" and changes the text with the attribute 'innerHTML=" ". The text will read 'This sentence has been changed' after the function is called (by clicking the button). The next javascript statement changes the size of the font and the last statement changes the color of the text. The 'return' is to return back to the previous code after running the 'function'. Notice the way javascript uses the CSS style attribute. It is similar but different than the way HTML uses CSS. Where HTML might say style="color:violet;" javascript says .style.color="violet"; Observe the 'period' between document.getElementById(" ") and 'style', also before 'innerHTML'. The 'curly brackets' surround the function 'myTest'. If we run this code we would get:
This is a regular paragraph element. With a click of a button, Javascript can change the color and font size of this paragraph. It can even change the words. Click the button to observe.
Understanding Javascript code and variables
Back to strings and numbers. If a user is entering information into your webpage, the computer needs to differentiate between if the user is entering a number or a string. It will be up to you to tell the computer (that is, write the code) if the information is a number or a string (plain text). Numbers can be thought of as a string also, such as the house number of an address. But numbers that will be used in math manipulations need to be identified as numbers. Some computer languages use an identifying phrase to denote if user information is a 'string' or a 'number'. For example X$ = "text". The '$' after the X denotes that we are assigning a string to the variable 'X'. If we wrote X = 5, without the '$' then that would denote the variable is a number. In Javascript, we don't use the '$', if we put X = "example string", then JS knows it is a string because of the quotes around the 'example string' part. If we just had X = 5, then JS knows that X is now a number, more precisely, an interger. From the examples above, we can see that once the user enters information in the computer, we need to assign a 'name' to each separate piece of information, kind of like giving it an 'id' name, only in Javascript it is known as a variable name. We need a different variable name for each different kind of information, for example, there will be a different variable name for people's name, a different variable name for addresses, a different variable for their age, emails and so on. The computer stores the information the user entered into memory under the variable names you assign it. We use the variable name to retrieve the information stored in the computer to manipulate it in any way we want. For example adding two numbers together that the user entered. To name or give an 'id' to the information that the user entered we use the 'var' keyword. (Javascript now has the 'let' keyword for assigning variables but for now we will be looking at 'var') For example:
var b = 5;
(or let b = 5;)
The letter 'b', or more correctly, the variable 'b' represents the 'name' or 'id' we gave the information that the user entered. The user more than likely entered his information into a 'textbox' on your webpage. Whatever information the user put in that textbox will be represented by the variable 'b' now. We can later in our program have the user put in a different value in the textbox but it will still be the variable 'b' only with a different value. For example:
b = 7;
Notice the second time we didn't use the identifier 'var'. We don't need it once 'b' has been established as a variable the first time. We didn't need to use the letter 'b', we could have used any letter, for example 'x'.
var x = 25;
Or, we could use a describing phrase instead of just one letter, for example:
var numberone = 34;
Actually, you should use a describing phrase to describe your variables so that it is easier to remember what your variable denotes, especially if you're using multiple variables. For example:
var firstnumber = 45;
var secondnumber = 50;
What do we use these variables for? One use may be where we have a user entering data, for example, numbers that we want to add together for a certain result. For example we could have a sample program written something like:
Please enter your first number____(Then we would assign a variable name to it, like var a = 'first number entered')
Please enter your second number_____(Again assign a different variable name to the second number, like var b = 'second number entered')Then we could assign another variable name to the result of adding the numbers together, for example:
var c = a + b;
If you haven't noticed by now, Javascript code statements end in a semi-colon. Here is another example of some Javascript code:
<!DOCTYPE html> <html> <body> <p id="example">Problem, if a = 14 and b = 15 what is c = a + b? </p>
<button type="button" onclick="myTest()">Click Me!</button> <script> var a = 14; var b = 15; var c = 0; function myTest(){ c = a + b; document.getElementById("example").innerHTML="The answer to c = " + c ; } </script>
</body> </html/
When you run the program in your browser, you get:
Problem, if a = 14 and b = 15 what is c = a + b?
Functions
First, notice in the code part that we gave our <p> element an 'id' called 'example'. Then we wrote a button element with the 'onclick' attribute pointing to the function 'myTest'. When someone clicks the button the code that is under 'myTest' is run. 'myTest' is the name I gave this function, it could have been any name. A 'function' is a block of code surrounded by curly brackets that represents a 'subroutine' that you want to do something, which in this example, you want it to change the text in the <p> element to the answer of the question. The majority of Javascript code will have functions. Some functions you make up yourself and other functions are built in to Javascript. Notice that a function name ends in parenthesis (). Also notice that functions and all Javascript code is written between the tags <script> and </script>. It will not work otherwise. In the 'myTest' function you will notice the 'document.getElementById' mentioned in the intro. This is 'retrieving' that <p> element with the id 'example' and changing the text of the 'p' element with the attribute 'innerHTML='. It started out asking a math problem, and after the button was clicked, it answered the problem with "The answer to c =".
This is just scratching the surface of Javascript and to give a full in-depth tutorial is beyond the scope of this blog (although I will be adding more). There are many good Javascript tutorials on the internet. Check out Youtube and search 'javascript tutorial'.