...primarily because I want to carry out a sort of test on how deeply I understand the core principles of the programming language and hopefully get to provide some insights for anyone who stumbles on this.
My journey into coding has been an on-again, off-again type of relationship but I started taking it seriously in March when the lockdown and WFH due to the Coronavirus pandemic kicked in fully.
I started off with what can arguably be considered the table stakes (for frontend development) - HTML and CSS - using Codecademy, FreeCodeCamp and YouTube.
Now that I have started taking classes on Javascript, I thought to document my learnings after every module, primarily because I want to carry out a sort of test on how deeply I understand the core principles of the programming language and hopefully get to provide some insights for anyone who stumbles on this.
Also, I put together a bunch of music for you to enjoy while you read.
🔴 What is Javascript?
Javascript is popularly known as the programming language of the web. It started out as a way to add small bits of functionality to a website, now its functions have evolved into much more.
The language now supports the:
Ability to create business applications on the web
Ability to create any kind of utility, security or data application
Ability to communicate with Browser Application Programming Interfaces (APIs)
Ability to communicate with third-party APIs
Ability to rapidly build sites and native applications using third-party frameworks and libraries
🔴 Adding Javascript to HTML
A Javascript code can be added to an .html file by making use of the script tag and then inserting it inside the body tag of the .html file.
<body>
<p> I am ready </p>
<script>
alert('hello world!');
</script>
</body>
It is common to use the script tag with the source attribute set to an external Javascript file.
<script src="./home.js"></script>
It is best practice to have the Javascript code in a .js file and HTML in a .html file, that way there is good separation of concern.
🔴 Commenting Code
This is important to avoid any form of ambiguity in your code when another developer picks it up. Any kind of complexity, trickiness or indeed anything that could be confusing should be commented on in your code.
Single line comment can be added using a double slash.
// single line comment
A multiple line comment can be added using a slash and star before the comment and a starand slashafter the comment.
/* multiple line comment */
🔴 Variables
Essentially, Javascript are containers for storing values.
Any application that is being written depends on data (for eCommerce, we need data on the product e.g product name, price and all the data that belongs to an invoice or a purchase order. Same applies for an application that works within a car, games etc ), in Javascript variables are used to hold this information.
source: pluralsight
🔴 Declaring Variables
Letting Javascript know what variables will be used is termed declaring variables.
When declaring a variable, a keyword (a special symbol that Javascript knows about and performs some type of action) let is used. After the keyword let, we have the variable identifier that we want to use, then an equal sign, followed by the value of that variable.
let total = 149.99;
let product = 'hiking boots';
let discounted = true;
From the above code snippet, you will notice that the value assigned to the variable product is enclosed in quotation marks, the reason is becausehiking bootsis a string and computers don't recognize strings without quotation marks, this however doesn't apply to numbers as seen in total. While for discounted, the absence of quotation marks is as a result of the assigned values being Boolean values as they are used so often that Javascript recognizes them by default.
Rules For Naming Variables
A variable name (also known as identifier) can begin with "_", "$" , "letter" and subsequent characters can be digits (0–9)
let _2total = 149.99;
let $to_tal = 149.99;
let total99 = 149.99;
You cannot begin a Javascript identifier with a number.
let 5total = 149.99;
🔴 Constant
While the let keyword is used to declare variables with dynamic values, const keyword is used to declare variables whose values are static (i.e the value of a constant can't be changed through reassignment, and it can't be redeclared).
An advantage of using const is that it helps guide other developers looking at your code in the future giving them a clue that something is not suppose to change.
const price = 149.99;
price = 50.99;
ShowMessage(price;
console.log (err);
// expected output: TypeError: invalid assignment to const `number'
const price = 149.99;
ShowMessage(price);
console.log(price);
// expected output: 42
The next set of Javascript learnings I'll be embarking on and documenting are:
Types and Operators
Program Flow
Feel free to drop a comment for me if you spot anything off and will like to point me in the right direction. I'll appreciate that.
Thanks to Bisi and Seun for helping out with the edits.