JOURNEY THROUGH JAVASCRIPT
This is a Basic Introduction to JavaScript and is aimed at helping young developers improve and increase their knowledge when it comes to the field of website, app/software, data science/machine learning, and game development.
Before we proceed we have to get a brief history of JavaScript. According to the definition gotten from www.tutorialpoint.com.
JavaScript was first called Live Script, but Netscape changed its name to JavaScript, possibly due to the thrill being generated by Java. JavaScript made its start in Netscape 2.0 in 1995 with the name Live Script.
JavaScript is seen as a dynamic computer programming language. It is lightweight and most commonly used as a component of web pages, whose implementations allow client-side scripts to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities. JavaScript gives functionality to the website. As a web developer, there are other packages you need to learn before learning JavaScript, they are HTML and CSS.
HTML stands for HyperText Markup Language. From the full meaning of HTML, we can clearly see that HTML is not a programming language, it is a markup language that makes it easy for the web browser to read the content being displayed on it. CSS stands for cascading style sheet and it is used in styling the website i.e. those colors and designs shown on the website. JavaScript is now the functionality of the website. Without JavaScript, the website won’t be functional.
JavaScript is a scripting language you can use with HTML to create interactive Web pages. A scripting language is a programming language that is designed to give/create easy access to already built components. In JavaScript, the already built components are the building blocks that make up a Web page such as links, navigations, images, font elements, etc.
JAVASCRIPT IMPLEMENTATION
Now we will be diving into the main reason for this article, which is the implementation of JavaScript. Trust me it will be a very easy journey.
To write JavaScript code, you need a web browser a text editor. JavaScript can be included in two major ways, which is;
1. Internal JavaScript
2. External JavaScript.
In the text editor, an internal JavaScript code is a code that is placed anywhere using HTML tags. A script element is used to implement internal JavaScript code. <script> </script>. Where <script> is the opening tag and </script> is the closing tag, then all the code goes in-between the script open and closed tag.
Example of an Internal JavaScript code;
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><title>Document</title></head><script>var inputValue = document.getElementById(‘input’);var addBtn = document.getElementById(‘push’);var tasksDiv = document.getElementById(‘tasks’);addBtn.addEventListener(‘click’, addTodos)</script><body></body></html>
An External JavaScript Code is a code that is placed in a file separate from the HTML code. In order to implement an external JavaScript code, you will have to create a new file and the file should carry an extension of “.js” (index.js). This tells the text editor that the new file created is a JavaScript file. For an external JavaScript code to be functional in the web browser, it must be linked in the HTML file using “script-src” and the src means source i.e.<script src=’index.js’> </script>. The reason why this is being done is to let the web browser know that the JavaScript file is an external file and is sourced in the HTML file.
Example of an External JavaScript Code;
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><title>Document</title></head><body><script src = ‘index.js’> </script></body></html>
And the JavaScript code can now be written on its own in the index.js file which was previously created i.e.
var journal = [];function addEntry(events, squirrel) {journal.push({events, squirrel});}function phi(table) {return (table[3] * table[0] - table[2] * table[1]) /Math.sqrt((table[2] + table[3]) *(table[0] + table[1]) *(table[1] + table[3]) *(table[0] + table[2]));}function tableFor(event, journal) {let table = [0, 0, 0, 0];for (let i = 0; i < journal.length; i++) {let entry = journal[i], index = 0;if (entry.events.includes(event)) index += 1;if (entry.squirrel) index += 2;table[index] += 1;}return table;}
The example above shows the external javascript file being linked in the HTML file using the ‘src’ attribute.
For the external javascript code, the <script src = ‘index.js’> </script> tag can be placed anywhere in the HTML file but it is advised to be placed at the lower region in-between the body tag.
JAVASCRIPT SYNTAX
In this section, you will know about five concepts which are;
· White Spaces
· Case sensitivity
· Literals
· Identifiers
· Comments
White Spaces
A whitespace character is an empty space that has no visual representation on screen. The use of whitespaces in JavaScript is ignored. For example
var b = f * d + e;
The code above is the same as;
var b = f*d+e;
Both codes will provide the same result. Another example of whitespaces is;
Function someMessage( ) {
Let Message = [ ];
Console.log(Message)
};
someMessage( );
From the code above, you can see the spaces in-between each code, those spaces are ignored in JavaScript. Whitespace is important because you can use it in writing code that is more readable and understandable.
Imagine having a code that looks like these;
Function someMessage() {Let Message = [ ]; console.log (Message)}; someMessage( );Looking at the code above, it is a very complicated code and it is very hard to read and understand. But imagine a code that looks like these;
Function someMessage ( ) {Let Message = [ ];Console.log(Message);};someMessage( );
The code above is readable and understandable even by a beginner. It can help you detect easily where a mistake is coming from and make necessary amends to it.
CASE SENSITIVITY
JavaScript is a case-sensitive language. This means that keywords, variables, function names, etc must always be typed in a constituent manner. For example, in JavaScript, the word “Team and team” are two different things like-wise when we use “Book and book” are also two different words. So be careful not to make such mistakes.
LITERALS
In javaScript, Literals provide a means of representing some specific values in a JavaScript program. A literal can be a number, string, Boolean, array literals, and object literals. For example;
Var Name = “Frankenstein”; //stringVar Amount = 100; //numberTrue/false //BooleanVar people = [“Faye”, “Frank”, “Prince”]; // Array literalsVar Pub = {name: ‘CityOfLove’, year: 2000, street: “westernUnionGerman”}; //Object Liiterals
IDENTIFIERS
A javascript identifier must start with a letter, an underscore_, or the dollar sign $. For example
Var b = “world”;Var _b = “world”;Var $b = “world”;
A JavaScript identifier should not and cannot start with a number eg var 8b = “world”; It is very wrong for a JavaScript identifier to start with a number.
COMMENT
A comment is not shown in the web browser i.e. comments are usually ignored. A comment is very important because it is a meaningful way of delivering a message. It is used to add information about a written code, suggestions, etc. comments helps with easy understanding of a written code by the end-user.
The javascript comments are of two types, which includes;
· The single Line comments
· The Multiple line comments
The single-line comments can be represented with //. It is usually placed before a statement. The single-line comment is used in commenting on one line of code. Example;
document.getElementById(“demo”); //this gets the Id named “demo” located in the HTML file.console.log(“person”); //this logs out the value of “person” in the console of the browser.
The Multiple line comments can be represented with /* */. The multiple-line comment consists of an opening slash and two asterisks, then a closing slash. The comment is written in between the two asterisks. Example;
/* it is multi line comment. It will not be displayed, this gets the Id and displays it in the web browser */Let us talk about “semicolons”;
SEMICOLON
It is very hard for you to see a JavaScript code without seeing a semicolon (;) at some point. A semicolon is used to terminate a line of code and it is also used to show a point where a code ends. Putting semicolons in your line of code is not that necessary but in some situations or most situations, it is important you do so because it helps your line of code look neat and readable for you and also for the next person who wants to read your code.
VALUES
Javascript values comprise of many types, some of them are, Booleans, strings, arrays, numbers, etc. Examples the word “car” is a value, 65 is a value, true/false is a value etc.
For you to reference a value, a variable will be assigned to it. The variable will have a name and then the value will be stored into a variable.
VARIABLE
In JavaScript, a variable is used to store the data value. From the previous section, we said a value is being stored in a variable. A variable can be represented with a var keyword. Let's look at a variable being used in a code;
Var store = “city”;Var stick = 30;
From the code above, var is the variable that has a name of store and stick, while “city” and 30 are the values which are being stored in the variable.
In javascript, a variable can also be declared/implemented using the const keyword and also a let keyword.
For the const keyword, you cannot reassign a new value to it, which means any value given in the const keyword cannot be changed. Example;
const store = “city”store = “New York”
From the code above, the result will be an error because the variable store was reassigned again and given a value of “New York”, in const, it should not be in that manner.
For the let keyword, you can assign a new value to it, which means the let keyword is an inverse of the const.
Let store = “city”store = “New York”
From the code above, the result will not be an error because the variable store was reassigned again and given a value of “New York”, in Let, it accepts that.
DATA TYPES
In javascript, we have two main kinds of data types, which are; the primitive data type and the object data type.
For the primitive data types, they are;
· Strings
· Numbers
· Booleans
· Symbols
· Null
· Undefined
The object data type is anything that is not a primitive data type. Object data types consist of properties and also have a method that acts on those properties.
STRINGS
Before now we talked about strings and showing what it looks like in an example. String is an example of a primitive data type and it is represented or implemented using a quote “ ” or ‘ '. Note that both signs can be used in implementing a string.
Example of a string;
var place = “Abuja”;console.log(place); // Abuja
From the code above, var is the variable and it was given a name of the place, then “Abuja” is the string. The code above can also be written as;
var place = ‘Abuja’;console.log(place); // Abuja
You can see that in both examples, a double and single quote was used, and the answers were all the same. Strings cannot be written in this manner;
var place = “Abuja’;console.log(place); // syntax error.
NUMBERS
Just like strings, we have also used numbers as an example earlier before now. Numbers are an example of a primitive data type, unlike strings you don’t need a quote to implement a number, you can just write the number. Let’s see an example;
var amount = 50000;console.log(amount); // 50000
BOOLEANS
Boolean’s are examples of primitive data type that is implemented/represented with True or False. Example;
let amount= 1000;amount = 1000>980;console.log(amount); // true.
The result gotten is true, which means that 1000 is greater than 980. Another example is;
let amount = 500;amount = 500>20000;console.log(amount); //false.
From the code above, the result is false because 500 is not and cannot be greater than 2000.
