JavaScript basics and intermediates for Web Development

Javascript support is built directly into modern web browsers. We can run Javascript directly into the browser console, or as a full .js script connected to an HTML file.

Javascript is a full programming language, meaning unlike HTML or CSS is supports things such as arrays, loops, and general logic. It’s used to better the user response on the website.

1.Basics of JavaScript :

You can try most of these commands in console part of the browser, click the left mouse button, then click on the inspect element option. You should be able to see something similar to this,

1.alert(” Information to display “) : This function is used to display information on the web browser.

2.Basic data types:

1. JS treats all numbers same like instead of integer and floats, they are just numbers.
2. “Strings” to contain all the characters permutation
3. boolean( 0 ||1) : it can be either zero and one

For more information,

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
2. https://www.w3schools.com/js/js_datatypes.asp

3.clear(): To clean your web console

/* Any thing inside this is a comment */

4.Variables (var) : to name a variable in js, you have to use camel casing.

var myName="hridyesh";
var greet="Yo soy";
alert(greet+myName);

Undefined : variable was created but never defined, NULL: means you are setting nothing on the variable.

5.console.log(” To display information in the console”) : It is used to display information in console.

6.prompt(“Enter Input”) : It used to take input from the user using the pop up

var lbs = prompt("What is the weight in pounds (lbs)? ");
var kg = lbs*0.454;
alert("Weight in: "+kg+" kilograms");
console.log("Conversion Completed");

Q. How to link js file to HTML file?

We use the script tag in HTML to connect the two files.

http://Your_JS_file_for_html_file.js

7.Operators in js: Now the strange part in operators in js is it does not consider the type of the variable, it considers the value of variable.

2==2 => true
"2"==2 => true

Now we generally don’t want to a string type variable to be equal to number type variable, well to prevent this we use “===”

2===2 => true
"2"===2 => false

Also sometimes true and false are represented by 1 and 0 . Which can also be solved using “===” .

true==1 => true
true===1 => false

Types of logical operators :

1. And operator (&&) :All conditions have to be true.
2. Or operator (||) : Any one condition has to be true.

8.Control Flow : They decide the flow of the program

var temp = 75
if (temp > 80){
    console.log("Hot outside!")
} else if(temp <= 80 && temp >= 50){
    console.log('Nice outside!')
} else if(temp <= 50 && temp >= 32){
    console.log("Its cooler outside!")
} else{
    console.log("Its really cold outside!")
}

If the “if condition”, is empty then by default it will equate it to true.

9.Loops in js : They are used to iterate through a condition or repeat block of code.

1.While loop :

var x=0;
while(x < 5){//A condition to check
    console.log("x is currently: "+ x); 
    x = x+1;//increment the variable to iterate
// blocks of code to execute until condition is met
}

2. For loop :

for (int i = 0; i < 5; i++) {
// for( initialization, condition , increment)
    console.log("Number is " + i );
}

With all this basic js knowledge we could make some basic interaction with the user,

1. You could go and check out the GitHub and search for, first assignment in js file https://github.com/kakabisht/Web-Dev-Blog-UI

2.Intermediates of JavaScript :

1.Functions (parameter ) : We use functions as, we follow the most followed programming concept called, “DRY“, Don’t Repeat Yourself.

function hola(name){
 console.log("Hola "+name);
}

Now there are multiple cases in functions, such as :

1. calling a function without the brackets. It just returns the entire function

2.calling a function and not passing the arguments. It returns undefined

3.calling a function and not passing in a the correct argument

4.Using a function correctly

Do check the type of parameter, as due to parameter conversion we can face issues.

Also I recommend instead of printing, you can perhaps try the return keyword as it should have better flexibility. Also do learn more about scope of variables, local and global variables.

1. https://www.w3schools.com/js/js_scope.asp
2. https://developer.mozilla.org/en-US/docs/Glossary/Scope

2.Arrays : They are used to store elements in continuous memory locations, under a single name but each element as an individual index representing its memory location inside the array.

To know more basic information on arrays, just refer my data structure blog https://programmerprodigy.code.blog/2020/04/01/data-structures/

Index of array starts from zero, Index is used to access the information at a particular location.

1.Mixed array : It can take different types of data types in an array.

var mixed = [true,20,"string"];
mixed.length 

2.Nested array : It can store array inside an array

var matrix = [[1,2,3],[4,5,6],[7,8,9]]
matrix

Q. How to access array elements?

We will use index of the particular element, but what in the case nested array we use both indexes of both the arrays.

var mixed = [true,20,"string"];
var matrix = [[1,2,3],[4,5,6],[7,8,9]];
mixed[1];//to access the 1 st index
matrix[1][2];/* to access the 1 st index of first array and then 2nd index of second array. */

Ways to iterate in an array :

var arr = ['A','B','C']

1.for of loop

for (letter of arr) {
  alert(letter);
}

2.for each loop

arr.forEach(alert);

For more info, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

3.JavaScript Objects :

JS Objects are hash-tables, they store information in a key-value pair. In other languages this is sometimes also called a dictionary. Unlike an array a JS Object does NOT retain any ordering.

The typical JS Object is in the form, You then access values through their corresponding key

 { key1 : “value one”, key2 : “value two”,...}

Unlike Python the keys do not have ” “, in the representation part.

Let’s take an example, this is a very general example,

var car = {type:"Fiat", model:"500", color:"white"}; 
car //access the entire object or use console.dir(car);
car["type"] //access the particular key value pair

You can also nest objects inside objects,

var mess = { a: "hello", b: ['x','y','z'] , c: {'inside': [ 4 ,5, ["weird"]]}};

// Grabbing the letter number 5:
mess['c']['inside'][1];

We have to define the method inside the object, then we need this keyword which just points towards the current instance of the object.

var carInfo = {
  make: "Toyota",
  year: 1990 ,
  model: "Camry" ,
  carAlert: function(){
    alert('Your car info is, make: '+this.make+ " year: "+this.year+ " model:"+this.model)
  }
};

For more information on objects,

1. https://www.w3schools.com/js/js_objects.asp
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
3. https://duckduckgo.com/?q=this+keyword+in+javacript&t=canonical&atb=v225-7&ia=web

To summaries the importance of HTML+CSS+JS,

Now that we have understood at least basics of HTML + CSS +JS, here is a short summary on them.

Previous blog containing HTML+CSS+Bootstrap : https://programmerprodigy.code.blog/2020/06/18/web-developmenthtmlcss-basics/

Next blog containing Document Object Model And jQuery: https://programmerprodigy.code.blog/2020/06/26/document-object-model-and-jquery/

GitHub Link to check the basic source code : https://github.com/kakabisht/Web-Dev-Blog-UI.

For more reference from a JavaScript developer perspective: https://www.toptal.com/javascript#hiring-guide