Knowledge anywhere: July 2021

Saturday, 31 July 2021

JavaScript Playlist tutorial #14 | Full information on Arrow function and class @echocoding | soham

Arrow function and class Introduction of arrow function 00:20 class in JavaScript 5:45 ------------Subscribe channel please ----------- Arrow function is like a normal function but difference is we use here () in place of function . It is introduce in ES6. Arrow function is very easy to code and make our code reusable and clean We can also pass variable in arrow function Class is used in oops concept here I am going to give short introduction of class .

source 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>Arrow function</title>
</head>
<body>
   <script>
    //    function hello(){
    //     return document.write("this is coding");
    //    }
       hello = function(){
         return  document.write("this is coding");
       }
       hello();

    //    hi = () =>{
    //     document.write("<br>this is coding throw arrow function");
    //    }
    //    hi();
        
    hi = (x) => document.write("<br>this is coding throw arrow function"+x);
      
       hi(3333);

       class Car {
           constructor(name,year){
                this.name = name;
                this.year = year;
           }
       }

       var car1 = new Car("Ford",2000);      
       document.write(car1['name']);
       document.write(car1['year']);

       var car2 = new Car("Rrrr",1200);
       document.write(car2['name']);
       document.write(car2['year']); 



   </script> 
</body>
</html>

JavaScript tutorial #13 | loops in javascript @echocodin | soham kavde

source 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>
      
     for(let i =1; i<=10; i++){
         document.write(i+'<br>');
     }
    document.write("arrays")
     var number  = [1,2,3,4,5];
     for(var u = 0; u<=number.length-1; u++){
         document.write(number[u]+'<br>');
     }
     console.log("while")
     var w = 0;
     while(w<=5){
        console.log(w);
         w++;
     }
     console.log("do while")
     var e = 0;
     do {
        console.log(e);
         e++;
     } while (e<=5);
        
    </script>
</body>
</html>

JavaScript tutorial #12 | Conditional statements (if , else else if , switch ) @echocoding | soham

source code

var x = 1;
var y = 1;

if(x==y){
    //code
    document.write("X is equal to Y");
}

var x1 = 11;
var y2 = 12;

if(x1==y2){
    //code
    document.write("X1 is equal to Y2");
}else{
    document.write("<br>X1 is not equal to Y2");
}


var x11 = 11;
var y22 = 12;
var z33 = 11;
var r33 = 12;

if(x11==y22){
    //code
    document.write("X11 is equal to Y22");
}else if(x11 == r33){
    document.write("X11 is equal to R33");
}else if(x11 == z33){
    document.write("<br>X11 is equal to Z33");
}else{
    document.write("No match found");
}

var x11 = 11;
var y22 = 12;
var z33 = 111;
var r33 = 12;

if(x11==y22){
    //code
    document.write("X11 is equal to Y22");
}else if(x11 == r33){
    document.write("X11 is equal to R33");
}else if(x11 == z33){
    document.write("<br>X11 is equal to Z33");
}else{
    document.write("<br>No match found");
}



var x121 = 11;
var y222 = 12;
var z323 = 11;
var r323 = 12;
switch (x121){
    case y222:
        document.write("X11 is equal to Y22");
        break;
    default:
            document.write("<br>default No match found");   
            break;
     case z323 :   document.write("<br>X11 is equal to Z33");
        break;
    case r323:
        document.write("X11 is equal to R33");
        break;
   

}

Monday, 26 July 2021

JavaScript tutorial #11 | Array in one video @echocoding | soham kavde

<!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>Array</title>
</head>
<body>


    <script>
        // var car = [1111,true,"3333","4444"]; //first way to create array
        var car = new Array(1111,true,"3333","4444","5555"); //second way to create array
        car[0] = 'one_one';
        var x = car[0];
        console.log(car);//accessing complete array
        console.log( x );
        console.log(car[1]);
        console.log(car[2]);
        console.log(car[3]);
        console.log(car[4]);
        console.log(car.length);
        console.log(car.toString());
        console.log(car.join(" | "));
        console.log(car.pop());
        console.log(car); //(4) ["one_one", true, "3333", "4444"]

        console.log(car.push("5555"));
        console.log(car); // (5) ["one_one", true, "3333", "4444", "5555"]

        var number = [8,1,2,3,4];
        console.log(number.sort());
        console.log(number.reverse());

        var number = ["cat","dog","apple","ball"];
        console.log(number.sort());
        console.log(number.reverse());
        console.log(typeof(number)); // typeof object
        console.log(Array.isArray(number)); //return true
        console.log(number instanceof Array); //return true
     

    </script>
  
</body>
</html>

Saturday, 24 July 2021

JavaScript tutorial #10 | numbers and number method detailed video @echocoding | soham kavde

timestamps: number with or without decimal value 1:16 scientific notation in JavaScript 3:12 limitation of number 4:50 add number and string 6:00 number methods 13:40

number.js

var x = 5;
var y = 5.5;
var z = 43e1;
// console.log(z);
var r = 43e-3;
// console.log(r);
var ff = 999999999999999;
// console.log(ff);
var f_f = 9999999999999999;
// console.log(f_f);

// adding number and strings

var num = 1;
var str = '2';
// console.log(num+str);

var one = 1;
var two = 2;
var ss = one+two;
// console.log(ss);

let onre = "1";
let twor = "2";
let sss = onre  + twor;
console.log(sss);

let yy = "10";
let uu = "8";
let tt = yy-uu;
console.log(tt);

let y_y = "10";
let u_u = "8";
let t_t = y_y*u_u;
console.log(t_t);


var hello = 10;
var strin = "Hello";
console.log(hello*strin);// Not a number

// Number methods
var ffff = hello.toString();
// console.log(typeof(ffff));
var ffff = strin.toString();
console.log(ffff);

// toFixed()
var numbers= 9.653;
console.log(numbers.toFixed(1));

JavaScript tutorial #9 | JavaScript Search text string method @echocoding | soham kawde

free source code :- content of table is indexOf( ) string method lastIndexOf( ) string method search( ) string method Difference between indexOf and search includes( )string method startWith( ) endWith( ) indexOf( ) string method : - This javaScript string method get the position of given word's first occurrence. Example of indexOf( ) :- If given text is "My name is soham"; and You are searching for "name" in the indexOf method. You will get 3 in result. Because in "name" , n is first character so the position of n is result position number of indexOf( ). method. Note: IndexOf( ) search and count from left to right and return position of first occurrence only. lastIndexOf( ) string method : - This JavaScript string method return the position of last occurrence but it count same as indexOf( ) method ( left to right ) and search from Right to left . Example :- Given text is "This glass of water has no water." search for "water" in given text you will get 25 position number for water. from Right side to left side lastIndexOf( ) start searching and from left side to right side it start counting. Hence result is 25 What happens if searching text like name and water is not exist in given text ? IndexOf and lastIndexOf method return -1 for no match. Difference between indexOf( ) and search( ) IndexOf() method get no regular expression. search() method has no second parameter to pass. includes() : - return true for match occurrence and false for no match. startWith() :- Return true if the text is start with searching text with is passed in startWith method else return false. endWith( ) : - return true if the text is end with searching text with is passed in endWith() method else return false.

<!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>
        var text = "this is programming coding programming";
        var x = text.indexOf('programming',10);
        // document.write(x);
        var y = text.lastIndexOf('programming',20);
        // document.write(y);

        var yl = text.lastIndexOf('otherword');
        // document.write(yl);
        var s = text.search('programming');
        // document.write(s);
        var inc = text.includes('coding');
        // document.write(inc);
        var start = text.startsWith('is',5);
        // document.write(start);
        var end = text.endsWith('programming',19);
        document.write(end);
    </script>
</body>
</html>

Thursday, 15 July 2021

JavaScript tutorial #8 | string properties , methods in javaScript @echocoding |soham kawde

string properties , methods in javaScript

<!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>string</title>
</head>
<body>

    <script>
        var text = 'Hello programmers';
        var text1 = "Hello programmers";
        // console.log(text);
        // console.log(text1);
        var single = 'it\'s my pleasure';
        var singlew = "it\"s my pleasure";
        console.log(single);
        console.log(singlew);

        // single quotes in double quote and vise wersa
        var single = "It's my pleasure";
        var single = 'It"s my pleasure';
        // var back = "2\3" // throw an error
        var back = "2\\3";
        console.log(back);

        var len = "this is paragraph text paragraph for paragraph length checking";
        console.log(len.length);
        var x = len.slice(0,4); // starting point , end point
        console.log(x);
        x = len.slice(5);
        console.log(x);
        x = len.slice(-12,-2);
        console.log(x);
        
       var y = len.substring(0,4); // substing not take negative values (-12,-2); starting point , end point
        console.log(y);

       var c = len.substr(10,10); // starting point , length
        console.log(c);

       var f = len.replace(/paragraph/g,'div');
        console.log(f);
        f = len.replace(/Paragraph/i,'div');
        console.log(f);

        // upperCase 
         var upp = len.toUpperCase();
        //  document.write(upp);
         var low = upp.toLowerCase();
        //  document.write(low);

         var con = upp.concat(' ' + low);
        //  document.write(con);

         var trimmm = "       heloo    sdf    fdf         ";
         document.write(trimmm.trim());


    </script>
</body>
</html>

JavaScript tutorial #7 | object and event in one video @echocoding | soham kawde

object and event

object source 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>
        var car = {color:'red',wieght:'500kg',sum : function(){
            return 'the car color is '+ this.color + ' and wieght is ' + this.wieght;
        }};
        // car.color = 'blue'; // change object properties
        console.log(car.color);
        document.write(car['color']);
        document.write(car.color);
        document.write(car.sum());
     
    </script>
</body>
</html>

event source 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 >
    <button onclick="func()">click me</button>
    <p id="demo" onmouseover="second()" onmouseout="thirdp()">This is text</p>
   <script>
       function func(){
           alert('alert box');
       }
       function second(){
           document.getElementById('demo').style.color= 'red';
       }
       function thirdp(){
        document.getElementById('demo').style.color= 'black';
       }
   </script>
   
</body>
</html>

object and event intor of object 00.01 creating properties 01.40 access object properties 02.30 methods in obejct and access of methods 03.25 this keyword in object 06.05 object :- object is an real world entity which we are going to use in programming by accessing its properties and method . We can say object is a container of variables. object are created with { } In this video we are going to learn about object , object methods , object properties and how to access object . IF you want to change object values than you can do it easily by using simple steps shown in the video. object properties - it like an real world object properties like color , weight etc. object method - It is functions in object which can we call dynamically and manually both easily. event - events are the browser actions that perform perticular task in browser . We are going to discuss here onclick , onmouseout , onmouseover events also I will tell you the website W3school where you can simply find all events in sequecial manner and also execute that event in real time. all events list are here below www.w3school.com

JavaScript tutorial #6 | JavaScript function , definition , caller @echocoding | soham kawe

JavaScript function , definition , caller

<!DOCTYPE html>
<!-- 07.27-09.07 -->
<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>Fuction</title>
</head>
<body>
    
    <button onclick="display()">click me</button>
    <p id="demo"></p>
    <script>
        // function definition
        function display(){
            // document.write("this is function definition");
            document.getElementById("demo").innerHTML = 'Hello world';
        }
        function display1(){
            document.write("this is function definition<br>");          
        }

        display1(); // automatic calling 
        display1(); // automatic calling 

        function sum(a,b){
            var x  = 4; // local variable
            c = a+b+x;
            return c + '<br>';
        }
        // document.write(x); // through an error
        x = sum(3,5);
        document.write(x);
        x = sum(3,7);
        document.write(x);
        x = sum(13,5);
        document.write(x);
        function program(){
           return 'Hello programmers';
        }
        document.write(program());
    </script>
</body>
</html>

Operators in JavaScript #5 | JavaScript Operators in one video @echocoding | soham kawde

code source JavaScript Operators

<!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>Operator</title>
</head>
<body>
    <script>
        // Arithmetic operators
        var x = 5 +4;  console.log('add '+x);
        var y = 5-4; console.log('substract '+y);
        var z = 5*4; console.log('multiply '+z);
        var r = 20/2; console.log('divide '+r);
        var modulus = 25%2; console.log('modulus' + modulus);
        var exponentiation = 2**3; console.log('exponentiation '+ exponentiation);
        // Assignment operators
       var add = 5;
       add +=4; // add = 4+5;
       console.log(add);
       var sub = 5;
       sub -=4; // substract = 5-4
       console.log(sub);
       var multiply = 4;
       multiply *=5; //multiply = 4*5
       console.log(multiply);
       var divide = 20;
       divide /=2; //divide = 20/2
       console.log(divide);
       var modulus = 25;
       modulus %=2; // modulus = 25 % 2
       console.log(modulus);
       var exponentiation = 2;
       exponentiation **= 3; // exponentiation =  2**3
       console.log(exponentiation);

       // string operators
       var one = "hello program";
       var end = "end program";
       console.log(one +' '+ end);
       console.log(one += " " + end);

    // Comparison operators
    var first  = 1;
    var second = '1';
        console.log(first == second); // equal to 
        console.log(first === second); // equal to and eqaul type
    
    var third = 3;
    var fourth = 4;
    console.log(third != fourth);// not equal to 
    console.log(third !== fourth);// not equal to or not equal type
    console.log(3>4);//Greater than
    console.log(3<4);//less than

    var numone = 2;
    var numtwo = 3;
    console.log(numone >= numtwo); // Greater than or equal to
    console.log(numone <= numtwo); // less than or equal to

    var numone = 2;
    var numtwo = 2;
    console.log(numone >= numtwo); // Greater than or equal to
    console.log(numone <= numtwo); // less than or equal to
    
        // logical operators
        var fisrtone = 1;
        var secondone = 2;
        var thirdone = 1;
        var fourthone = 2;

        console.log(fisrtone == thirdone && secondone == fourthone); // && and operator
        
        var fisrtone = 1;
        var secondone = 2;
        var thirdone = 1;
        var fourthone = 2;

        console.log(fisrtone == fourthone || secondone == thirdone); // || Or operator
        
        console.log(fisrtone != fourthone || secondone != thirdone); // ! NOt operator
        console.log(fisrtone != fourthone && secondone != thirdone); // ! NOt operator
    </script>
</body>
</html>

timestamps: Arithmetic operators 00.01 Assignment operators 06.02 string operators 12.01 Comparison operators 14.32 logical operators 21.08 JavaScript Operators JavaScript Arithmetic Operators :- It is used to perform arithmetic operation on numbers and variables. Addition arithmetic operators (+) : With this operator programmer can add two values ; var a = 4+5; console.log(a); //Output : 9 Subtraction arithmetic operators ( - ) : With this operator programmer can subtract two values. var a = 5-4; console.log(a) // Output : 1 Multiplication arithmetic operators (*): this help a programmer to multiply two values; var a = 4*5; console.log(a) // Output: 20 Exponentiation arithmetic operators (**):By using this programmer can get output in Exponentiation form (23 ). Modulus (Division Remainder) arithmetic operators (%) : with this programmer divide two values and get remainder in the result. Increment arithmetic operators (++): this operator increase value by adding value 1 in existing value. Decrement arithmetic operators(--) this operator decrease value by adding value 1 in existing value. JavaScript Assignment Operators It assign value to left side varible or number from the right side variable or number on given condition. = assign operator : this assign right value to left side values or variables. += this operator add right side value to left side value. -= this operator substract right side value from left side value. *= this operator multiply right side value to left side value. /= this operator divided left side value from right side value. %= this operator give remainder by divided left side value from right side value. **= this operator give exponentiation result in the form of 23 . JavaScript string operator this helps to cancatenate (add) strigns. Adding string to number return string Javascript comparison operators If programmer wants to compare two or more than two values than comparison operator is used. If check both values and datatype. Equal to (==) It will return true if condition equal in value. Not equal (!=) it will return true if condition is not equal in values. Equal values and Equal datatype (===) it will return true if conditionn is equal both in values and datatype. Not equal values or not equal datatype (!==) it will return true if condition is not equal in values or datatypes terms. Greater than It will return true if first first variable or values is greater than second variable or values. Less than It will return true if first values or variable is less than second variable or values. Greater than or Equal to this will return true if first variable or value is greater than or Equal to second variable or values. Less than or Equal to this will return true if first variable or values is less than or equal to second variable or values. JavaScript Logical Operators && Logical and : this operator return true if each and every given condition is true. || logical or : this operator return true if any one of given condition is true. ! logical not : this will return true on false condition and false on true condition. JavaScript Type operators We can also find the type of data we used in programming By using typeof( ) function.

Sunday, 11 July 2021

JavaScript tutorial #4 | Difference between var , let , const @echocoding | soham kawde

source 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>Differece between var , let and const keywords</title>
</head>
<body>
    <script>
        var person = "soham";
        var person = "programmer";
        // console.log(person);
        let person_1 = "Rohan";
        // let person_1 =  "Web developer"; we can not re-declared the let variable again in same scope
        const number = 1;
        // number = 2; we can not re-declared the const variable again in same scope
        if (0<1){
            var person = "website developer";
            let person_1 = "web Developer";
            const number = 2;
            console.log(number);
            // console.log(person_1);
        }
        console.log(number);
        console.log(person);
        // console.log(person_1);
    </script>
</body>
</html>

Difference between var , let , const var can reassigned values in same block scope or different block of scope , although It can assign values befor declared variables (hoisting is possible). let can not reassigned values in same block scope but It can assign values in different block of scope. Hoisting is not possible(In let , variable can not assign values before let declaration). const can not reassigned values in same block of scope but it can assign values in different block of scope. Hoisting is not possible (In let , variable can not assign values before let declaration).

Saturday, 10 July 2021

JavaScript tutorial #3 | Variable , datatypes , Complete information with rules @echocoding | soham

third.html

<!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>variable</title>
</head>
<body>
    <script>
        var person  = "Kunal";
        var person;
        person = "Rohit";//string

        var number = 1;//int
        var floatdatatype = 1.02 //float
        var number = "1";//string
        var _coder = "Programmer";
        var myFirstVariable;
        // multiple variable in single line
        var Programmer = "Rohan",myclass = "12th",website = "xyz.com";
        var Programmer = "Rohan",
        myclass = "12th",
        website = "xyz.com";
    
        // Re-declaration  in variable
        var program = "Javascript is easy to learn";
        console.log(program); 
        program = "HTML is more easy than javaScript";
        console.log(program);
           
    </script>
</body>
</html>

Variables

Imagine programmer has a glass of water So we can say glass is variable and water is value or data . As programmer imagine glass store water in the same way Varibles are also contain different different values.

Data Type

Data type are nothing but the type of data that a values contain.

like Int , float , string , boolean , arrays , objects , more...

"NO need to declared data type in JavaScript"

Rules in JavaScript to Declared varibles

1 Variables contains letters , underscores , digits and dollars sings.

2. Variables are start with letter , $ sign and _ underscore only.

3. Variables Name are CaseSensitive.

4. Reserved keywords (class , id , function) cannot used in javascript.

One statement and many variables

var programmar = "Rakesh" , class = "12th" , subject = "Maths";

var programmar = "Rakesh",

class ="12th",

subject = "Maths";

overriding in JavaScript

var person = "rohit";

person = "Rakesh";

Difference between var , let , const

var can reassinged values in same block scope or different block of scope , although It can assing values befor declared variables (hoisting is possible).

let can not reassinged values in same block scope but It can assing values in different block of scope.Hoisting is not possible(In let , variable can not assing values before let declaration).

const can not reassinged values in same block of scope but it can assing values in different block of scope. Hoisting is not possible (In let , variable can not assing values before let declaration).

Timestapms

Introduction and use of variable 00.01

Datatype 03.05

Rules to define variable name 05.40

One statement with multiple variables 07.50

Re-declaration of varialbes (Override variables) 09.48

Knowledge anywhere