Learn JavaScript — Part 1
Scripting the Web
This is a tutorial aimed at complete beginners.
First things first.
What is JavaScript and why should you learn it?
First, let’s clear the misconception first. JavaScript isn’t in any way related to the Java programming language. The language’s name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun’s Java runtime with their then-dominant browser. (Source — Wikipedia)
JavaScript is the scripting language of the web and it is used by programmers to make webpages interactive (Nowadays, Designers are also getting into this field with the help of JavaScript libraries like p5.js which simplifies the process to a great extent). All modern web browsers, game consoles, tablets, smartphones, and even a SpaceX Rocket! use JavaScript interpreters making it the most ubiquitous programming language. So, it's natural for anyone to learn JavaScript to get into the field of web development (Python is the only other closest competitor!)
Q. What is a scripting language?
Ans — A scripting or script language is a programming language for a special run-time environment that automates the execution of tasks.
You know HTML and CSS, so, how JavaScipt fits into the scheme of things?
Let’s clear this question with the help of a diagram.
- HTML defines the structure of the website is an analogue to the human skeleton.
- CSS is a styling language used to describe the appearance of the structure.
- JavaScript is the mind and nerves. It contains all the logic and provides dynamics to the site.
Now, starting with the tutorial.
The subject of this tutorial is the Introduction and Data Types.
This series will teach you the following things:-
- Data Types in JavaScript
- Lexical Environment
- Expressions and Operators
- Variables
- Wrapper Objects
- Statements
- Objects
- Arrays
- Functions
- Classes and Modules(Only in ECMAScript 6)
- Regular Expressions
- Window Object
- Document Object Model (DOM)
- Events
- Scripting HTTP
- Cookies (Client-Side Storage)
- Graphics
- Other APIs
- Procedural Programming and Asynchronous Programming
Now, let’s start the series.
JavaScript Data Types
What is Data type?
The values that can be represented and manipulated in a programming language is known as a Data Type.
JavaScript Provides us with the following two broad categories of Data Types:-
- Primitive Data Types — The building blocks of any other Data Type.
- Objects — It is a composite value: it aggregates multiple values(primitives or other objects) and allows us to store and retrieve the values by names. It is very similar to a hash-map (hash table).
Types in the primitive data type:-
- Number
- String
- null and undefined
- Boolean
- Big Int
- Symbol
We will cover the 5th and 6th Data Types in the Miscellaneous section of this series.
Note — You can directly jump onto the types which you don’t know if you have already done programming in some other language. Otherwise, you are encouraged to go through all the data types as described below.
Number
Numbers in JavaScript are 64-bit format IEEE-754 floating-point values (Don’t be afraid, I have written this just for the sake of completeness)which gives us a sufficiently large range of numbers for our use. There is no distinction between Integers and Floats/Doubles in JavaScript. If we use numbers greater than the available range then we may lose precision in trailing digits.
When a number appears directly in a JavaScript program then it is called a Numeric Literal.
Q. How are they written?
- Integer Literals
Base 10 (Decimal)(The numbers which can be represented using all the fingers in your hand) — 123456789
Base 16 (Hexadecimal)— These numbers begin with a leading “OX” or “Ox” followed by digits 0–9 and alphabets a- f, Example — 0xff (255 in base 10)
Base 8 (Octal) — These numbers begin with digit 0 and is followed by a sequence of digits between 0–7, Example — 0377 (255 in base 10)
This syntax varies between different implementations and the above syntax is the most widely implemented.
Note — There is something like a “strict mode” in JavaScript and Octal numbers are forbidden in that mode (The interpretation of the numbers with leading 0 varies between different implementations).
2. Floating-Point Literals
Floating-point literals can be represented using the traditional syntax or using the exponential notation.
Traditional Syntax Example — 3.14
Exponential Syntax — 314e-2 which is equivalent to 314 * 10^-2
General Notation — [digits].[digits][(E|e)[(+|e)]digits]
We will discuss useful Number methods when we have discussed wrapper objects.
String
A string is an ordered sequence of unsigned 16-bit values in JavaScript each of which represents a Unicode character.
There is nothing like “char” in JavaScript, everything is a string. And one special thing about JavaScript strings is that none of the characters in a string can be changed to any other character.
JavaScript strings use zero-based indexing which means that the first character is at 0. The length of a JS string is the number of Unicode characters it contains.
To include a string literal in our program we need to use either a single quote (‘ ’) or double quotes(“ ”) (This is due to the involvement of HTML).
Example — “Hello”, ‘Bye’, “Number’s”, ‘“Hell” let loose’.
Escape Sequences (Optional — Similar to other Programming languages)
Suppose you want to print a message like as follows:-
This is invalid since the JS interpreter will interpret the new line character at the end of the console.log() line as the delimiter which makes the syntax invalid.
So, What do we do in such cases? We can use two different console.log() but that's cumbersome.
So, that’s where the escape sequence comes in handy to describe some special things.
An escape sequence is a backslash character(\) followed by a character which tells the interpreter to interpret the escape sequence differently. Thatswhy, they are called escape sequences since the interpreter “escapes” the usual interpretation.
In the above case, we can use “\n” to tell the interpreter about a new line.
You are encouraged to try out different escape sequences yourself.
It is also common to use the escape character(\) to eliminate the special meaning of a character like “ in statements as shown below:-
Boolean
A Boolean value represents truth/1/on/yes or falsehood/0/off/no. There is only two value possible for this type.
The reserved keywords true and false evaluate to their corresponding values as described above.
The main use of this data type is in if/else and conditional statements and will be discussed in that article with a special focus on equality and strict equality operators.
“undefined” and “null”
null is a JavaScript reserved keyword that evaluates to a special value and undefined is a predefined global variable and these two are used to indicate the absence of values.
Using “typeof null”(We will also discuss this operator later) statement returns the string “object”, so, null can be thought of as a special object which indicates “no object”.
The undefined value is used to indicate another kind of absence. When a variable is initialized without any value or if we try to access a non-existent object/property then we get undefined as the return value.
Conclusion
That's all for this article. The next topic is the lexical environment of JavaScript where we will discuss the global object, function scope, block scope, etc.
You are encouraged to press “ctrl+i” (For Chrome and Firefox) and get on the console and start tinkering with JavaScript.
Thank Yor For Reading this article.
You can contact me through my E-Mail and you may view my work on my Portfolio.
