DEV Community: PUSHAN VERMA

Java JVM, JRE and JDK

PUSHAN VERMA — Thu, 12 Sep 2024 12:54:00 +0000

JVM (Java Virtual Machine )
JRE(Java Runtime Environment)
JDK(Java Development Kit)

For Java to run on your computer you need some software right , So you install JDK , it is a development kit as the name suggests it has a kit to run Java , just like you have cricket kit which contains pads, Helmet , and Bat etc. it has all the things for you to run java .

After installing JDK, you write some code in java in your IDE and compile the code and after compiling a class file is also generated why ? because JDK has a virtual machine which converts your “english code” to bytecode for system to understand because at the end computer only understands 0’s and 1’s.

And during compiling of your code , apart from your own written code you need some other files also to run the program i.e if you are using a java collection framework method i.e arrays.sort() , or using any method which is provided by java inbuilt , that means you are using inbuilt functions and that functions are provided by JRE(java run time environment )

So this is the lifecycle of a simple java program that you write.

Connect me here -https://www.linkedin.com/in/pushan-verma-559260176/

Hoisting and Temporal Dead Zone

PUSHAN VERMA — Tue, 05 Jul 2022 11:38:44 +0000

Hoisting

console.log('varname',varName);
var varName;
console.log('varname',varName);
varName ="captain america";
console.log('varname',varName);

fn();
function fn()
{
console.log("hello from fn");
}
fn();

Temporal Zone

//temporal dead zone is a zone where the variable is in accesible

with var
console.log(a);
var a =2;
op-undefined

with let
console.log(b);
let b=3;

op -(Error ) Missing initializer in const declaration

with const
console.log(c);
const c=4;

op -(Error ) Missing initializer in const declaration

CallBack Functions in JavaScript

PUSHAN VERMA — Tue, 05 Jul 2022 11:37:20 +0000

Callback Functions:let me explain to you in simple words .We call the second function through first function which takes second function as argument in 1st .

function printFirstName(firstname,cb)
{
console.log(firstname);
cb("Verma");
}

function printLastName(lastname)
{
console.log(lastname);
}

printFirstName("pushan",printLastName);

Functions in JavaScript

PUSHAN VERMA — Tue, 05 Jul 2022 11:35:16 +0000

method-1
let name2="pushan";
function greet(name2 )
{
console.log(This is my name ->${name2});
}
greet(name2);

method-2
function greet2(name2,rollno)
{
console.log(This is my name ->${name2} and rollno ->${rollno});
}
greet2(name2,114);

method-3
function greet3(name2,rollno="114")
{
console.log(This is my name ->${name2} and rollno ->${rollno});
}
greet3(name2);

with return value
console.log("+++++++++++++++++++++++++++++++++++++++++");
let no=1;
const value =function(no)
{
let sum=0;
for(let i=1;i<10;i++)
{
sum+=no*2;
}
return sum;
}

console.log(value(no));

returning from objects
console.log("*****************************");
let obj2={
name3 :"pushanVerma",
rollno: 114,
techStack: function()
{
return {
java:"good",
mysql: "moderate",
javaScript:"Normal",

}
}
}

console.log(obj2.techStack());

for Loop,while loop ,do-while loop,forEach Loop and forin loop

PUSHAN VERMA — Tue, 05 Jul 2022 11:15:01 +0000

for loop

console.log("for loop");

for(let i=0;i<10;i++)
{
console.log(i);
}

while loop

let i=0;
while(i<10)
{
console.log(i);
i++;
}

do-while loop

let i=0;
do
{
console.log(i);
i++;
}while(i<10)

forEach Loop
(used for iterate every value , it is a type of syntactic sugar , to write in a better way)

let arr2=[10,20,30,40];

arr2.forEach(function(element){
console.log(element);
})

forIn loop
(it is only used to iterate or display content present inside the object)

for(let key in obj)
{
// console.log(key);
// console.log(obj[key]);
console.log(The ${key} of the person is ${obj[key]});
}

if-else ,ternary Operator,switch statements in JavaScript

PUSHAN VERMA — Tue, 05 Jul 2022 08:49:59 +0000

if-else

let age=16;

if(age===16)
{
console.log("your age is 16");
}
else if(age<16)
{
console.log("age is less than 16");
}
else if(age ==20)
{
console.log("you are no longer a teen ager");
}
else
{
console.log("age is more than 16");
}

Ternary Operator
console.log((age==16?"my age is 16":"my age is not 16"));

switch
switch(age)
{
case 16:
{
console.log("you are 16");
break;
}
case 18:
{
console.log("you are 18");
break;
}
case 20:
{
console.log("you are 20");
break;
}
default:
{
console.log("you are not 16,18,20 , bhad mei jao");
break;
}
}

Arrays and Objects

PUSHAN VERMA — Tue, 05 Jul 2022 08:44:02 +0000

Arrays
let marks =[10,20,30,40,50,90];
const fruits =["orange","apple","banana","grapes"];

const mixed =[3,5,[6,"pushan"]];
const arr4 =new Array(23,144,"verma"); //new method to initialize array , just like java

console.log(arr4);
console.log(marks);

length of array

console.log(marks.length);

//changing value of array
marks[1]=200000;
console.log(marks);

indexof
console.log(marks.indexOf(30)); // present so gives index of array
console.log(marks.indexOf(1000000000000)); // not present in array so gives -1

Methods in Arrays

push -add to last
marks.push(70);
console.log(marks);

unshift -add to first
marks.unshift(100);
console.log(marks);

pop - removes element from last of array
marks.pop();
console.log(marks);

shift-it will remove elements from begin
marks.shift();
console.log(marks);

splice - it removes the elements from given indexes
marks.splice(1,3);
console.log(marks);

*reverse - it reverse the array *
marks.reverse();
console.log(marks);

concat-concat the array with another array
marks2=[100,200,300,400,500];
marks=marks.concat(marks2);
console.log(marks);

  **All the properties are changing the whole array**

Strings in JavaScript and their Important Methods

PUSHAN VERMA — Tue, 05 Jul 2022 08:20:46 +0000

Strings

Standard Approach
let topic ="verma this is my name -> vermaji ";

console.log(topic);

Concatination

let adname ="aditi verma "
topic =topic.concat("Pushan Verma ","chetna verma ",adname,"chandresh verma");
console.log(topic);

*character At method type in java *
console.log(topic[0]); // method to display the character present inside the string in js

indexOf,LastIndexOf,substring,slice,split,replace
console.log(topic);
console.log(topic.indexOf('verma')); // it will give the index of first character if it founds , otherwise it gives -1
console.log(topic.lastIndexOf('verma'));
console.log(topic.indexOf('Pushan'));
console.log(topic.substring(1,6));
console.log(topic.slice(-4)); // slice can give from back also , but substring cannot , if i write substring(-4 it will return the whole string )
console.log(topic.split(" "));
console.log(topic.replace("verma","rajput")); // it only changes the first occurence not all the occurences

Template Literals(Displaying js in HTml )
let fruit1="Banana";
let fruit2="Mango";

let content1=My favourite fruit is ${fruit1} and ${fruit2};

document.body.innerHTML=content1;

Introduction to syntax of Arrays and Objects

PUSHAN VERMA — Tue, 05 Jul 2022 07:24:25 +0000

*Arrays declaration and Intialization *

let arr =[1,2,3,4,"pushan","chandresh","aditi","chetna"];

console.log(arr);

ans ->

Objects declaration and Initialization

let myObj1={
name2:"Verma",
arr:["aditi","chetna","chandresh","pushan"],
exercise:true,
galatkaam:null
}
let myObj ={
name1:"pushan",
arr:[1,2,3,4,5],
sach:true,
myObj1
}

console.log(myObj);

ans ->

Data Types in JavaScript

PUSHAN VERMA — Tue, 05 Jul 2022 07:18:33 +0000

We have two types of data types in JavaScript . One is Primitive and other one is Non -Primitive data types

In Primitive Data Types , we have :
1) Number (Unlike java , we dont have int,float,double,BigInteger we only have number )

2) Boolean(return True or false)

3)String

4) undefined (when a variable is defined and not assigned a value
then it gives value as undefined)

5)null (absence of any value)

6)bigInt - used to store very large numbers

7) Symbol - Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object. That enables a form of weak encapsulation, or a weak form of information hiding

Non -Primitive Data Types, we have :
1)Array (collection of data of same data type, it is just like java)

2) Object (collection of several data types under a single heading called as Object)

3)Function (when some lines are to be executed several times , functions are used.)

TypeOf:
//typeof (number ,string , null,boolean , undefined)
console.log("data type is ->"+typeof name );
console.log("data type is ->"+typeof number );
console.log("data type is ->"+typeof sachkasamna );
console.log("data type is ->"+typeof nullval );
console.log("data type is ->"+typeof unde );

ans ->

Document Object Model(DOM)

PUSHAN VERMA — Tue, 15 Mar 2022 17:18:27 +0000

Document Object Model is like a Tree .Window is called a Document .
What we'll learn in this post :

Event Listeners
Query Selector
addEvent Listener
appendChild
QuerySelectorAll
NodeList
insertBefore
getAttribute
setAttribute
classList

Understanding all these with some questions :

q1
<!DOCTYPE html>

Document

Say Hello

   <script>
          //📌Q1 on Clicking the Button append hello to the page
          let btn =document.querySelector("button");

          btn.addEventListener("click",function(e){
              let divElem =document.createElement("div");
              divElem.innerText="Hello";
              let body =document.querySelector("body");
              body.appendChild(divElem);
          });

   </script>

<!DOCTYPE html>

Document

   </ul>


   <script>
          // 📌Fix the list by inserting the missing element using querySelectorAll and insertBefore
          let list =document.querySelector("ul");

          let allListItems=document.querySelectorAll("li");

          let eightElem =allListItems[6];
          let sevenElem =document.createElement("li");
          sevenElem.innerText="7";

          list.insertBefore(sevenElem,eightElem);

   </script>

<!DOCTYPE html>

Document

2 + 2 = 22

<br>
let a=document.querySelector('p');<br>
a.innerText="2 + 2 =4 ";</p>
<div class="highlight"><pre class="highlight plaintext"><code></script>
</code></pre></div>
<p></body><br>
</html></p>

<p><head><br>
<meta charset="UTF-8" /><br>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><br>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><br>
<title>Document</title><br>
<style><br>
* {<br>
box-sizing: border-box;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 5rem;
}

.blue {
    background-color: blue;
    box-shadow: 0px 0px 6px 5px;
}

.green {
    background-color: green;
    box-shadow: 0px 0px 6px 5px;
}

.red {
    background-color: red;
    box-shadow: 0px 0px 6px 5px;
}

.card {
    border: 1px solid;
    height: 10rem;
    width: 10rem;
    margin: 2rem;
}

</style>
</code></pre></div>
<p></head></p>

<p><body><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="red"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="green"></div><br>
<div class="card" data-color="blue"></div><br>
<div class="card" data-color="green"></div><br>
<div class="card" data-color="blue"></div><br>
<script><br>
//📌 Q Write a script which fetches the data-color attribute of the card on double clicking on them and attaches the fetched class to that card. Also changes the data-color attribute to "used"</p>
<div class="highlight"><pre class="highlight plaintext"><code> let cards=document.querySelectorAll('.card');

    for(let i=0;i&amp;lt;cards.length;i++)
    {
        cards[i].addEventListener('dblclick',function(e){

            let classTobeAttached =e.currentTarget.getAttribute('data-color');
            e.currentTarget.setAttribute('data-color','used');
            e.currentTarget.classList.add(classTobeAttached);
        })
    }

</script>
</code></pre></div>
<p></body></p>

<p>📌Handwritten Notes:<br>
<a href="https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf">https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf</a></p>

Reading Files Serially through Callbacks and Promises

PUSHAN VERMA — Tue, 15 Mar 2022 16:22:15 +0000

Through Callbacks

const fs =require('fs');

console.log('Before');

fs.readFile('f1.txt',cb1);

function cb1(err,data){
if(err)
{
console.log(error);
}
else
{
console.log(" "+data);
fs.readFile('f2.txt',cb2);
}
}

function cb2(err,data){
if(err)
{
console.log(err);
}
else
{
console.log(" "+data);
fs.readFile('f3.txt',cb3);
}
}

function cb3(err,data){
if(err)
{
console.log(err);

}
else
{
    console.log(" "+data);
}

}

console.log('After');

//👉 ans ->
// Before
// After
// this is file 1
// this is file 2
// this is file 3

Through Promise

const fs =require('fs');

console.log('Before');

let f1p=fs.promises.readFile('f1.txt');

f1p.then(cb1);

function cb1(data){
console.log("File data->"+data);
let f2p=fs.promises.readFile('f2.txt');
f2p.then(cb2);
}

function cb2(data)
{
console.log("File data->"+data);
let f3p=fs.promises.readFile('f3.txt');
f3p.then(cb3);
}

function cb3(data){
console.log("File data->"+data);

}

console.log('After');

//👉 ans ->
// Before
// After
// File data->this is file 1
// File data->this is file 2
// File data->this is file 3

📌Handwritten Notes:
https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf