What You Will Need
- You will need a basic code editor, such as Atom, Brackets or Visual Studio Code.
- For this tutorial I will also be using the Google Chrome browser however you should be able to follow along using other browsers such as Firefox or Safari if you prefer.
Table of Contents
- What is a Variable?
- Types of Variables
- Assigning Values to a Variable
- Working with the Console
- The Document Object Model (DOM)
- Next Steps
So now is a good time to get started.
- In you code editor make a new empty document.
- Go to the W3Schools HTML webpage and copy and paste the sample HTML code into your document.
Your code should look like this:
Now would be a good time to test running the code in a web browser. Code editors usually include a menu item or shortcut to do this. Alternatively, with a browser open you could select ‘Open File’ (or similar) from the browser’s menu.
In the browser you won’t see much yet, just the title in the browser tab and the sample HTML H1 heading and paragraph.
* Whenever you make changes to the code and you want to view the updated webpage in the browser, follow these simple steps:
- Save the document
- Return to the browser (where hopefully the document is still open)
- Refresh the page in the browser
* I think that when learning coding it really helps to type out the code manually, however of course you can always copy and paste the code from the examples provided if your prefer. I find that if I copy and paste code rather than typing it out myself I am more likely to get in the habit of needing to copy and paste it in the future. Also, if by chance your page is not loading correctly this is most likely because there is at least one simple spelling error in the code. When coding the code needs to be exact and you will need to learn how to look at your code closely to spot any errors.
I often use comments to comment out sections of code that I am having trouble with or trying different variations with. I also use comments when planning an app or website using ‘pseudocode’. This is like writing in plain language first, all the steps and processes that I need that app to do. (You will see demonstrations of this as we move along).
<script> // A single line comment </script>
or for multiple lines you would use a /* … */ (This is the same commenting protocol as for CSS and PHP)
<script> /* A multi-line Comment */ </script>
What is a Variable?
In simplistic terms, a variable is a something that has a value that may change and in scripting a variable generally has two main properties, a name and the corresponding value, that is the current value of the variable at a given time. In maths variables are often identified with alphabetical symbols such as x, y or z.
Sometimes it is useful to think of a variable as a type of container that holds a value.
For example, you may have three glasses on a table, one contains milk, one contains orange juice, and one contains water. In order to refer to each glass, you may call call them ‘Glass A’, ‘Glass B’, and ‘Glass C’. In this example the value of Glass C = ‘water’. However this could change if something else is put into Glass C.
Types of Variables
Obviously numbers are used when the variable has a basic numerical value. Something like x = 5, or score = 1, etc.
Strings are used when the value is a strings of text including spaces, something like username = ‘John Doe’.
Arrays are used to store multiple values in one variable, something like fruitsalad = [“Apple”, “Orange”, “Banana”].
Assigning Values to a Variable
<script> var glassA = "water"; // or var score = 12; </script>
* Note that a string value needs to be enclosed in single or double speech / quotation marks, whereas a numerical value does not.
You can also declare a variable without giving it value yet, eg ‘var score’. Sometimes it is useful to declare variables first before giving them values.
In most cases declaring a variable using the var term works fine however in some cases there can be issues relating to where variables are declared in relation to the overall code structure. At some point I will discuss the issue of ‘variable scoping’.
For a thorough outline of variables I would recommend this page on w3Schools.
In camel case words are joined together and the second word onwards is capitalised. In snake case words are lowercase and separated by an underscore.
<script> // Example of Camelcase myVariable = 1; // Example of Snakecase my_variable = 1; </script>
Working with the Console
Browsers usually contain a ‘console as part of the developer/ inspector tools. The console is a great tool for getting feedback from the browser and for verifying whether your code is working or not. Let’s try it out with this code:
<script> console.log("hello"); </script>
Now save your code, go to the browser, and view the inspector tools – console. To do this in Chrome:
- Right-click on the page and select ‘Inspect’.
- Click on the tab for console.
You should the console logging your text.
Now let’s get the console to log the value of a variable:
<script> var myLuckyNumber = 14; console.log(myLuckyNumber); </script>
* Note, when you want to log some arbitrary text to the console you include it between speech marks, however if you simply include the name of the variable the console will return the value.
Sometimes it can be useful to get the value as well as a description of what the value refers to, eg:
<script> var myLuckyNumber = 14; console.log("My Lucky Number is " + myLuckyNumber); </script>
* Note that here I have used the + symbol to return the text combined with the variable called ‘myLuckyNumber’. Notice that I also included a space after the word ‘is’. Try this and test it in the console.
Now let’s add a bit more:
So if you’ve made it this far you’ve done well, and this is probably a good point to save your file.
Save it and test it in the browser.
Now we will add the code to update the HTML with our variable values.
Secondly the code in the above example could be abbreviated by writing something like:
//document.getElementById("name-holder").innerHTML = "John Doe"; // or // document.getElementById("name-holder").innerHTML = myName;
However I have found that when developing apps etc, the code actually ends up being more graceful in the long run if I follow the standard practice of:
- Declaring the variables that I need, either with an initial value or without.
- Declaring variables for the HTML elements that will hold updating data.
The Document Object Model (DOM)
I’m not the best person to explain what the DOM is exactly, or how it works. – There is plenty of information about this on the net. For now however I’m simply going to show you how you can see it in action.
Firstly open the webpage we created previously in the browser and view the course code. In Chrome you can easily do this by right-clicking on the webpage and selecting ‘View Page Source’. Here chrome will simply open the code file in a new tab.
- Ending lines with a semicolon
- Understand what a variable is.
- Understand how to work with Variables, eg:
- Declaring variables
- Assigning number or string values to variables
- Know how to access and utilise the Browser console.
- Learning methods to capture user input though things like forms and buttons and use this data to update the HTML.
- Understanding variable scope.
- Learning how to work with simple arrays of data.
- Consolidating all these things by creating some simple apps.
Otherwise I hope you found this tutorial / guide useful. I am hoping to include the next tutorials in this series shortly as well as a video demonstration to go along with this tutorial.
If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.