Learning JavaScript
- Part 1: Creating and Using Variables
- Part 2: Data Types and Arrays
- Part 3: Functions
- Part 4: Objects
- Part 5: Document Object Model
- Part 6: Conditional Statements
- Part 7: Loops
JavaScript is an interpreted programming language commonly found in web browsers. First appearing in 1995, it has grown to be the de facto web programming language used in most websites and on many systems serving webpages.
Creating and Using Variables
As with any programming language, the two most common tasks are creating and using variables to accomplish different tasks. A variable is a container for different values. In JavaScript, a variable is defined using the keyword “var” and then its name.
The metaphor of a bucket is often useful in thinking about a variable. When using a variable, the two common tasks are either creating (“putting something in the bucket”) or using (“seeing what is already in the bucket”).
Creating Variables
JavaScript follows a tradition defined in earlier programming languages of using a single equal sign (=) as part of assignment.
In the metaphor of the bucket, this process of assignment is actually two different processes. Using the “var” keyword tells JavaScript to “make a new bucket called” and then to call it the variable name listed. Then, using a single equal sign, the assignment process tells JavaScript “put the following value into this bucket.”
The value of the variable bucket, then, is 1.
Variables can also be created using many different possible names. The only requirement is that the name of the variable not start with a number or contain spaces. They can contain the underscore.
It is highly recommended to name variables something useful. Because other developers working on the project or users can view the JavaScript on web pages and thus can see these variables, it is important to not name them something offensive or rude. While it may seem funny to some to do so, having crude variable names can ruin projects, companies, or land developers into major trouble when they seek to hide them within projects.
Using Math on Variables
The assignment of a variable need to be just a numerical value. It can also be some type of mathematical operation between other variables. Frequently, it is useful to create variables to store values as part of a much larger project to allow the programmer to more easily understand some process.
Any mathematical operation like addition, subtraction, multiplication, and division can be carried out on variables and used as part of its assignment.
Storing Values
Because it would be inefficient to keep creating new variables with each operation, the assignment process can happen without the keyword “var” in the line. In these cases, the value of the variable is changed instead of creating a new variable.
Like with creating variables as explained earlier, the lines are read from its right-hand side to its left-hand. Some type of calculation is done on the right-hand side and its final value is assigned as the value of the variable on the left.
Displaying Output
JavaScript would not be particularly useful if all it could do is perform mathematical operations and create and change variable values. There needs to be a way to output some type of value in order to test things and see exact what the code is doing.
When JavaScript is used in a HTML document, it is included within a SCRIPT tag. When a web browser encounters this tag, it will run the code.
For testing purposes, web browsers provide functionality called a console. The term is borrowed from a past usage of where code would be input in one place, a console, and then run somewhere else. In order to test the code, any error could be shown where the programmer was: the console.
In webpage terminology, the console is a place where errors or warnings show up. Often, when the web browser encounters a problem or something it does not understand, it will put information in the console.
Finding the console is often different in every web browser.
Google Chrome
In Google Chrome, the console is part of the Developer Tools. Can be be accessed through the extended menu of the page and then More Tools –> Developer Tools. It is the second tab.
Mozilla Firefox
In Mozilla Firefox, the console can be found through Web Developer –> Web Console.
Codepen Example:
See the Pen Learning JavaScript: Part 1: Creating and Using Variables by Dan Cox (@videlais) on CodePen.
Digital Ephemera 