free coding for beginners - html css and Javascript tutorials

Posts

Showing posts with the label javascript

Template strings in javascript (understanding ES6)

- January 10, 2021

Template strings in javascript (understanding ES6) Template strings are basically the latest way of concatenating strings or be it functions and has come alive with the ES6 version of ecmaScript. So let us understand how we use Template String to concatenate or join two given strings before ES6 and once it has come: < script > var FirstName = "Praveen" ; var MiddleName = "Kumar" ; var LastName = "Yadav" ; document.write( ` ${ FirstName } ${ MiddleName } ${ LastName } ` ); console.log( ` ${ FirstName } ${ MiddleName } ${ LastName } ` ); // OLD WAY OF CONCATINATION OF STRINGS ...

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

- January 10, 2021

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

- July 29, 2020

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

- July 29, 2020

HOW TO ADD AND DELETE CLASS NAME USING JAVASCRIPT DOM MANIPULATION 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...

How to change images on mouse hover using javascript | mouse hover events

- July 27, 2020

How to change images on mouse hover using javascript | mouse hover 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> </head> <body> <img id="photo" onmouseover="box3()" onmouseout="box4()" src="1.png" width="200px" height="100px" > //remember to change source of photo <script> function box3() { document.getElementById("photo").src="2.jpg"; //remember to change source of photo } function box4() { document.getElementById("photo").src="1.png"; //remember to change source of photo } </script> Here is how the output looks like :