JavaScript Tuorial

 JavaScript

 

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

 

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

   1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

 

Console Logs:-

In JavaScript, a console is an object which provides access to the browser debugging console. This object provides us with several different methods like log(), error() ,table() etc. Each method provides different functionalities. For more in-depth information, click on the link:

 

 

Variables In JavaScript:-

Data types in JavaScript are either Variables or Constants. ES6 has major changes over JavaScript's syntax and brings new features. Initially, we declare variables with a keyword "var". However, ES6 brings a new variable declaration keyword, "let" and "const." To create a single line comment in JavaScript, we have to place two slashes "//" in front of the code or text that we want the interpreter to ignore. Although a single line comment is quite useful, when we want to comment on a long segment of code, we have to use a multiline comment. The multiline comment begins with /* and ends with */

 

 

Data Types In JavaScript:-

In JavaScript, a variable stores two types of values: primitive and reference. JavaScript provides six primitive types like Boolean, number, string, undefined, null, symbol, and a reference type as object literals, array, functions, and dates. When we assign a value to a variable, the JavaScript engine will determine whether the value belongs to primitive or reference datatype.

 

 

Condition Statements:-

The if statement is one of the most popular statements that are used by the programmers. We use if statement when we want to execute a statement if a certain condition is satisfied. When the if condition evaluates to false, we use the else statement. The else statement must follow the if or else if statement. Multiple else statement at the same time is not allowed.

 

 

Functions In JavaScript:-

A function is a group of reusable code which can be called anywhere in the program. A Function Declaration defines a named function. To create a function declaration, use the function keyword, and then write the function's name.

 

 

Arrays In JavaScript:-

Arrays are the objects in which we can store multiple values in a single variable. An array stores a sequential collection of elements of fixes size. Arrays are zero-indexed. The first element of an array is store at 0 indexes, and the second element store at index 1, and so on

 

 

Loops In JavaScript:-

Duplicating code is never a good idea. The versatility of the computer lies in its ability to perform the set of instructions repeatedly. The generic solution for repeating code with control is provided in the form of loops. There are four kinds of loops in JavaScript that we can use to repeat some code. These are for, for…in, forEach, while, do…while.

 

 

Strings In JavaScript:-

As we know, strings are useful for holding data that can be represented in text form. One of the most popular operations on strings are to check their length, to build and concatenate them using the operator (+), checking for the existence or location of substrings with the indexOf() method, or extracting substrings with the substring() method.

 

 

Dom manipulation:-

A DOM represents the HTML document that is displayed in that window. The Document object has various properties that allow access to and modification of document content. We can access the document content and modified it is called the Document Object Model, or DOM.

 

HTML Elements Selector:-

DOM Selectors is used to selecting HTML elements within a document using JavaScript. There are two types of selector, i.e., single element selector and multiple element selector.To traverse downwards from a specific element, we can use querySelector( ) or querySelectorAll( )

 

 

Arrow functions:-

One of the most famous features in modern JavaScript is the arrow function.ES6 arrow functions provide us an alternative way to write a more concise and shorter syntax compared to the traditional function expression.

 

 

Date Object:-

With the advent of time, mathematical calculations have become an integral part of every programming language. In this article, we will cover the details of the Math object in JavaScript, which helps the user to perform all kinds of mathematical operations.

 

 

Local and session storage:-

The way to store data on the client's computer is by local storage. The local storage allows us to save the key/value pairs in a web browser, and it stores data with no expiration date. The session storage is used to store data only for a session, meaning that it is stored until the browser (or tab) is closed.

 

 

Template literal:-

Prior to ES6, we use single quotes (') or double quotes (") to wrap a string literal. At that time, the strings have very limited functionality. To help us in solving more complex problems, ES6 template literals provide the syntax that allows you to work with strings in a very cleaner way. In ES6, we can create a template literal by wrapping the string in backticks (``).

 

 

Code file index.html as described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Tutorial</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            border: 2px solid red;
            margin: 3px 0;
            background: cyan;
            padding: 9px;
        }
        .bg-primary{
            background-color: blueviolet;
        }
        .text-success{
            color: white;
        }
    </style>
</head>
<body>
    <h1>Welcome to this JavaScript Tutorial</h1>
    <div id="firstContainer" class="container">
        <button id="click" onclick="clicked()">Click Me</button> 
        <p>This is a paragraph which is the best para of this universe</p>
    </div>
    <div class="container">
        <p>This is a paragraph</p>
    </div>
    <script src="index.js"></script>
    </body>
</html>

 

Code file index.js as described in the video

// 1. Ways to print in JavaScript
// console.log("Hello World");
// alert("me");
// document.write("this is document write")

// 2. Javascript console API
// console.log("Hello World", 4 + 6, "Another log");
// console.warn("this is warning");
// console.error("This is an error");

// 3. JavaScript Variables
// What are Variables? - Containers to store data values

/*
multi 
line 
commment
*/

var number1 = 34;
var number2 = 56;
// console.log(number1 + number2);

// 4. Data types in JavaScript
// Numbers
var num1 = 455;
var num2 = 56.76;

// String
var str1 = "This is a string";
var str2 = 'This is also a string';

// Objects
var marks = {
   mena: 34,
    nikita: 78,
    divya: 99.977
}
// console.log(marks);

// Booleans
var a = true;
var b = false;
// console.log(a, b);

// var und = undefined;
var und;
// console.log(und);

var n = null;
// console.log(n);
/*
At a very high level, there are two types of data types in JavaScript
1. Primitive data types: undefined, null, number, string, boolean, symbol
2. Reference data types: Arrays and Objects
*/

var arr = [1, 2, "bablu", 4, 5]
// console.log(arr)

// Operators in JavaScript
// Arithmetic Operators
var a = 100;
var b = 10;
// console.log("The value of a + b is ", a+b);
// console.log("The value of a - b is ", a-b);
// console.log("The value of a * b is ", a*b);
// console.log("The value of a / b is ", a/b);

// Assignment Operators
var c = b;
// c += 2;
// c -= 2; // c = c - 2;
// c *= 2;
// c /= 2;
// console.log(c);

// Comparison Operators
var x = 34;
var y = 56;
// console.log(x == y);
// console.log(x >= y);
// console.log(x <= y);
// console.log(x > y);
// console.log(x < y);

// Logical Operators

// Logical and
// console.log(true && true)
// console.log(true && false)
// console.log(false && true)
// console.log(false && false)

// Logical or
// console.log(true || true)
// console.log(true || false)
// console.log(false || true)
// console.log(false || false)

// Logical not
// console.log(!false);
// console.log(!true);

// Function in JavaScript
function avg(a, b) {
    c = (a + b) / 2;
    return c;
}
// DRY = Do not repeat yourself
c1 = avg(4, 6);
c2 = avg(14, 16);
// console.log(c1, c2);

// Conditionals in JavaScript
/*
var age = 41;
// Single if statement
if(age > 18){
    console.log('You can drink rasna water');
}
// if - else statement
// if(age > 18){
//     console.log('You can drink rasna water');
// }
// else{
//     console.log('You cannot drink rasna water');
// }

age = 25;
// if-else Ladder
if(age > 32){
    console.log("You are not a kid");
}
else if(age >26){
    console.log("Bachhe nahi rahe");
}
else if(age >22){
    console.log("Yes Bachhe nahi rahe");
}
else if(age >18){
    console.log("18 Bachhe nahi rahe");
}
else{
    console.log("Bachhe rahe");
}
console.log("End of ladder");
*/

var arr = [1, 2, 3, 4, 5, 6, 7];
// console.log(arr);
// for(var i=0;i<arr.length;i++){
//     if(i==2){
//         // break;
//         continue;
//     }
//     console.log(arr[i])
// }

// arr.forEach(function(element){
//     console.log(element);
// })
// const ac = 0;
// ac++;
// ac = ac +1;
// let j = 0;
// while(j<arr.length){
//     console.log(arr[j]);
//     j ++;
// }

// do{
//     console.log(arr[j]);
//     j++;
// } while (j < arr.length);

let myArr = ["Fan", "Camera", 34, null, true];
// Array Methods
// console.log(myArr.length);
// myArr.pop();
// myArr.push("Pooja")
// myArr.shift()
// const newLen = myArr.unshift("Pooja")
// console.log(newLen);
// console.log(myArr);

// String Methods in JavaScript
let myLovelyString = "Pooja is a good girl good good Pooja";
// console.log(myLovelyString.length)
// console.log(myLovelyString.indexOf("good"))
// console.log(myLovelyString.lastIndexOf("good"))

// console.log(myLovelyString.slice(1,4))
d = myLovelyString.replace("Pooja", "Neha");
// d = d.replace("good", "bad");
// console.log(d, myLovelyString)

let myDate = new Date();
// console.log(myDate.getTime());
// console.log(myDate.getFullYear());
// console.log(myDate.getDay());
// console.log(myDate.getMinutes());
// console.log(myDate.getHours());
 
// DOM Manipulation
let elem = document.getElementById('click');
// console.log(elem);

let elemClass = document.getElementsByClassName("container")
// console.log(elemClass);
// elemClass[0].style.background = "yellow";
elemClass[0].classList.add("bg-primary")
elemClass[0].classList.add("text-success")
// console.log(elem.innerHTML);
// console.log(elem.innerText); 

// console.log(elemClass[0].innerHTML);
// console.log(elemClass[0].innerText); 
tn = document.getElementsByTagName('div')
// console.log(tn)
createdElement = document.createElement('p');
createdElement.innerText = "This is a created para";
tn[0].appendChild(createdElement);
createdElement2 = document.createElement('b');
createdElement2.innerText = "This is a created bold";
tn[0].replaceChild(createdElement2, createdElement);
// removeChild(element); ---> removes an element
 
// Selecting using Query
// sel = document.querySelector('.container')
// console.log(sel)
// sel = document.querySelectorAll('.container')
// console.log(sel)

// function clicked(){
//     console.log('The button was clicked')
// }
// window.onload = function(){
//     console.log('The document was loaded')

// }
// Events in JavaScript
// firstContainer.addEventListener('click', function(){
//     document.querySelectorAll('.container')[1].innerHTML = "<b> We have clicked</b>"
//     console.log("Clicked on Container")
// })

// firstContainer.addEventListener('mouseover', function(){
//     console.log("Mouse on Container")
// })

// firstContainer.addEventListener('mouseout', function(){
//     console.log("Mouse out of Container");
// })

// let prevHTML = document.querySelectorAll('.container')[1].innerHTML;
// firstContainer.addEventListener('mouseup', function(){
//     document.querySelectorAll('.container')[1].innerHTML = prevHTML;
//     console.log("Mouse up when clicked on Container");
// })

// firstContainer.addEventListener('mousedown', function(){
//     document.querySelectorAll('.container')[1].innerHTML = "<b> We have clicked</b>"
//     console.log("Mouse down when clicked on Container");
// })


// Arrow Functions
// function summ(a, b){
//     return a+b;
// }
summ = (a,b)=>{
    return a+b;
}

logKaro = ()=>{
    document.querySelectorAll('.container')[1].innerHTML = "<b> Set interval fired</b>"
    console.log("I am your log")
}
// SetTimeout and setinterval
// clr = setTimeout(logKaro, 5000);
// clr = setInterval(logKaro, 2000);
// use clearInterval(clr)/clearTimeout(clr) to cancel setInterval/setTimeout

// JavaScript localStorage
// localStorage.setItem('name', 'Pooja') 
// localStorage 
// localStorage.getItem('name')
// localStorage.removeItem('name')
// localStorage.clear();

// Json 
// obj = {name: "Pooja", length: 1, a: {this: 'tha"t'}}
// jso = JSON.stringify(obj);
// console.log(typeof jso)
// console.log(jso)
// parsed = JSON.parse(`{"name":"Pooja","length":1,"a":{"this":"that"}}`)
// console.log(parsed);

// Template literals - Backticks
a = 34;
console.log(`this is my ${a}`)

 

 

Comments

Post a Comment

Popular posts from this blog

Top 6 CSS FrameWorks for Web Developers

Image
  Top 6 CSS Frameworks for Web Developers                Those days are gone when web developers spend a lot of time designing websites, but now CSS frameworks have removed the burden of   web developers . The web developers generally have two concerns: the first is time efficiency, and the second is browser compatibility. The arrival of the best   CSS frameworks  has created a win-win situation for both users and developers. Let’s first know what is CSS frameworks? CSS means the Cascading Style Sheets that separate the document content from the document presentation. Although web developers widely use CSS frameworks, there are still some web developers who are confused about –  Which CSS framework to choose for web development? Here is the top  CSS frameworks list : Bootstrap Foundation Materialize Semantic UI Bulma Tailwind How does CSS framework work? CSS frameworks provide a structure to t...
Read more

How to download and Install Visual Studio for C# in windows

Image
  How to Download and Install Visual Studio for C# in Windows Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs for Microsoft Windows. Visual Studio is one stop shop for all applications built on the .Net platform. One can develop, debug and run applications using Visual Studio. Both Forms-based and web-based applications can be designed and developed using this IDE. Below is a step by step process on how to install Visual Studio.     How to Download and Install Visual Studio for Windows Let’s look at the Visual Studio installation steps and download Visual Studio IDE so that we can work with creating programs in the subsequent tutorials. In this tutorial, we will learn how to download Visual Studio for Windows.   Step 1) Download Visual Studio       Step 2) Open the .exe file Click on the downloaded exe file   Step 3) Start the installation In the next screen, click cont...
Read more