Posts

Showing posts with the label learn javascript

Use of Let, Var and Const in Javascript along with their Scopes

Image
 Use of Let, Var and Const in Javascript along with their Scopes The data type "var" can be used to redeclare or assign a variable n number of times without any troubles. But the data type "Let" can be initialised only once and cannot be initialized again and again. However it can be assigned n number of times but it cannot be initialised. What i essentially mean can be understood with the below given example: CASE 1 ( VAR Data type): Var Name = "Rishu";  // here i have initialised my variable "Name" and declared its value as                                               //   well as "Rishu"; Var Name = "Calc";    // re initialized the value of Name as "Calc"  console.log(Name);     // It will print Calc without any error CASE 2 ( Let Data type): Let Name = "Rishu";  // here i have initiali...

addEventListener() in DOM Manipulation Methods in Javascript

Image
HERE WE WILL LEARN ABOUT "addEventListener()" METHOD OF ADDING EVENTS <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title>   <script src="main.js"></script> </head> <body> <h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque d...

HOW TO ADD AND DELETE CLASS NAME USING JAVASCRIPT DOM MANIPULATION METHODS

Image
HOW TO ADD AND DELETE CLASS NAME USING JAVASCRIPT DOM MANIPULATION METHODS <!-- HERE WE WILL SEE THE CONCEPT OF ADDING/DELETING A  CLASS BY USING 'ByClassName'  METHOD UNDER DOM MANPULATION METHODS--> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title>   <script src="main.js"></script> </head> <body> <h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesent...

CSS STYLING IN JAVASCRIPT USING ByClassName DOM STYLING METHOD

Image
CSS STYLING IN JAVASCRIPT USING 'ByClassName' DOM STYLING METHOD <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title> </head> <body> <h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque distinctio vel doloremque sunt unde harum placeat, quam perfere...

Dom CSS styling methods - By style, ClassName and by ClassList

Image
 Dom CSS styling methods - By style <!--  SO OUT HERE WE WILL TRY TO ACCESS THE BORDER PROPERTY OF THE STYLE ATTRIBUTE. BY USE OF querySelectorAll() using style property  --> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title> </head> <body> <h1 id="selector" class="name" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1> <div id="selector1" class="name">   <h1 style="border: padding : 2px">RTJ</h1> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, r...

Practice Exercise for drop down selection using DOM Manipulation

Image
Practice Exercise for drop down selection using DOM Manipulation

DOM in Javascript - how to get/set all ID, CLASS and TAGS (full information with working code)

Image
DOM in Javascript - how to get ID, CLASS and TAGS (full information with working code) /*This is the simple HTML and Javascript Code we will use */ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Test Page</title> </head> <body>     <div class="wrapper">         <div id="header">           <h1 class="header-tag" style="text-align:center; color:red;">THIS IS A SAMPLE SITE</h1>           <div id="main">             <ul>               <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis molestias enim adipisci nisi, aut official.HELLO</li>    ...