Introduction to JAVASCRIPT
JavaScript: Don’t judge me by my bad parts, learn the good stuff and stick with that!
JavaScript commonly known as JS is very important to make a website responsive.
Ex: Imagine there is a website with a form after filling the form if the customer press Submit then the website needs to make some response on that click by which we can call the website a “True” website. So, to make the response it requires JavaScript.
How to include JS in the HTML file:
To include JavaScript in HTML files we use the <script></script> tag all the JS code is written in that.
This tag can be included in the <head> or <body> section of an HTML page.
If you want to make a separate file for JS and link it with the HTML file, we can just specify the src= “” in the script tag as
<script src= “index.js” type= “text/JavaScript”></script>
The type just specifies the type of script we will be using “text/JavaScript” it is not necessary to be included.
Practice:
By seeing the example, you will be thinking that why the “Hello” not get changed to “Bye” as we are updating the innerHTML part of “Hello”, you can get the answer by going through the below Note.
Note: The document (HTML file) is executed from top to bottom i.e., first the head section then the body part. So, including a script tag in the head section with operations to be done as updating elements by using DOM, changing the style of an element in the script tag can cause an error from the browser as we can’t set the properties of null. Because the browser will be loading the script first then the HTML body part, so it can’t know what element we are talking about. So, using a script tag at the end of the body which is before closing the body tag can overcome this problem.
So, let’s try the same example once again by changing the position of the script tag from head to body end.
Datatypes:
Let’s start with Data types in JavaScript. They are:
· Boolean type — Set value as “true” or “false”.
· Null type — Set value as null (empty).
· Undefined type — Set value as undefined (not a string).
· Number type — Set value to a number.
· String type — Set value to a String.
For using the data types in JavaScript, we use the following Keywords:
let — Variables defined with let cannot be Redeclared in the same Block. The let variable has Block scope i.e., we can’t use the let variable outside the Block.
var — Variables declared with var can be Redeclared.
const — Variables define using the const keyword cannot be reassigned, or their value cannot be changed.
Practice:
JavaScript is quite different from other languages like c, CPP, java, python. Since in this programming language to declare a variable of certain datatype we use the syntax: datatype variable = value. Whereas in JavaScript we use the syntax: let variable = value. We don’t use the datatypes name itself like int, string. We just declare the variable using let, var, or const, and the compiler itself based on the value gives the variable a datatype.
To clearly understand it is better to go with an example. So, Ex:
The typeof for a null data type will be an object and for undefined it will be undefined.
typeof just says the datatype of the variable.
If we declare a let variable once we can’t Redeclare it in the same Block, while it is possible by using the keyword var.
If we need to do it for let then we can do it like this:
If we need to do it for let then we can do it like this:
Same as the let keyword const does not allow us to Redeclare a variable and const also do not allow us to change its value.
Note that const is not of Block scope.
Comments:
The Comments are the part that is written for our reference or for other’s reference (to understand the code).
The lines in the comment are ignored, and will not be executed.
For a single line of comment, we use // whereas for multiple lines /* followed by */ is used.
If … else statements:
As the name suggests if the If statement is false then the else statement will be executed and vice versa.
The syntax for it is:
if (first-condition) {
The syntax for it is:
// block of code is executed if the first condition is true
}
else if (second-condition) {
// block of code is executed if the first-condition is false and second-condition is true
}
else {
// if both first-condition and second-condition are false
}
And to include more sets of statements we use else if statements which check if the condition is true.
Note: console.log() is used to just display the output in the console (present in Google Chrome Developer Tools).
Practice:
Here, as if the condition gets false then the compiler will check for else if condition, and as it is true so the statements under else if get executed, and then the compiler does not need to check for the other else if or else conditions.
Break and Continue:
The break statement is used to “jump out” of the loop and the continue statement is used to “jump over” of the loop.
I will discuss it more in the next Practice parts.
Switch:
The switch statement evaluates an expression and matches the expression’s value to a case clause, and executes statements associated with the case, as well as the statements in cases that follow the matching case.
After all case statements break is used, because if the case clause matches with the expression value then it gets should jump out of the switch statement. In switch, a default clause is generally used, because if the expression’s value doesn’t match with all the case clauses then the default statement should be executed.
Syntax:
switch (expression) {
case val1:
// Statement executes when the expression’s value matches with val1
break;
case val2:
// Statement executes when the expression’s value matches with val2
break;
default:
// Statement executes when the expression’s value doesn’t match with both val1 and val2
break;
}
Practice:
For the first switch statement, the ‘r’ value doesn’t match with any case clause so, the default statement gets executed and for the second switch statement the break was not used, so once the condition gets true in any case clause then from there all the statements will get executed even if the condition doesn’t match. Hence, using a break statement in the switch is necessary to avoid unnecessary outputs.
For loop:
The Basic for loop has three statements in it, which is
Syntax:
for (statement 1; statement 2; statement 3) {
// The code to be executed
}
Statement 1 — will initialize the value and it is executed only one time.
Statement 2 — will check if the condition is still true or now it has become false, once it becomes false the for loop ends.
Statement 3 — will be executed every time after the code is executed.
Practice:
Using Break, it gets jumped out of the for loop, hence when the condition got true i.e., when ‘i’ became 5 the for loop got braked. And when using Continue it gets jumped over the for loop, hence the statement of console log was not executed when ‘i’ became divisible by 5.
While loop:
In the while loop, we have only one condition, while we can add more conditions in that statement by using and (&&), or (||) operators.
Syntax:
while (condition) {
// The code to be executed
}
Practice:
Do-while loop:
There is also an additional type of looping in JavaScript called the do-while loop. This loop will always be executed at least once because the given condition is checked after executing the block of code in it.
Syntax:
do {
// The code to be executed
} while (condition)
Practice:
The main difference between the do-while and while loop is even when the condition is false the do-while loop will run the code under it once whereas the while loop doesn’t. Because the do-while loop checks the condition after executing the code.
This was just the intro and basics of JavaScript, you can do wonders by learning the JS and make your personalized websites or the websites you built more responsive and more effective.
To have a strong command of the JavaScript language, basics are important to keep in check. Constantly working on the JavaScript or other languages can make you a better developer isn’t it exciting? I hope all the above information will help you to be a better developer.
