If we have a complex object, and we’d like to convert it into a string, to send it over a network, or just to output it for logging purposes, we can use

toString

method

let user = {
  name: "John",
  age: 30,
  toString() {
    return `{name1: "${this.name}", age1: ${this.age}}`;
  }
};

document.write(user);
// document.write(JSON.stringify(user));

The code above will produce the following result:

{name1: "John", age1: 30}

The drag and drop feature lets you

grab

an object and drag it to a different location. To make an element draggable, we set the

draggable

attribute to true. JS

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

HTML

<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div>

<img id="image" src="https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg" draggable="true" ondragstart="drag(event)" width="150" height="50" alt="" />

element.

childNodes

returns an array of an element's child nodes. JS

function setText() {
    let a = document.getElementById("demo");
     let arr = a.childNodes;
     for(let x=0;x<arr.length;x++) {
       arr[x].innerHTML = "new text";
     }
}

//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);

HTML of the example

<div id ="demo">
  <p>some text</p>
  <p>some other text</p>
</div>

Note: The code above changes the text of both paragraphs to

new text

This code creates a new paragraph and adds it to the existing div at the end of its content. JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {

    //creating a new paragraph
    var p = document.createElement("p");
    p.innerHTML = 'Some new text 1';
       
    //adding the paragraph to the div
    var div = document.getElementById("demo"); 
    div.appendChild(p);
};

HTML

<div id="demo">some content</div>

getElementsByTagName

method returns all of the elements of the specified tag name as an array. The following example gets all paragraph elements of the page and changes their content. JS

let arr = document.getElementsByTagName("p");
for (let x = 0; x < arr.length; x++) {
  arr[x].innerHTML = "Hi there";
}

HTML of the example

<p>Hi</p>
<p>Hey</p>
<p>Hello</p>
<div>Hello there</div>

Note: We used the

length

property of the

array

to loop through all the selected elements in the above example

All style attributes can be accessed using the style object of the element. JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
    var x = document.getElementById("demo");
    x.style.color = '#6600FF';
    x.style.width = '100px';
};

HTML

<div id="demo" style="width:400px">Some text inside this DIV</div>

Note: All CSS properties can be set and modified using JavaScript. We cannot use dashes (-) in the property names: these are replaced with

camelCase

versions, where the compound words begin with a capital letter. For example: the

background-color

property should be referred to as

backgroundColor

.

Variable

lastName

declared by the keyword

let

is not added to the global

window

object. That is why the variable is equal to

undefined

// Declaring variable using keyword "var"
var firstName = "Jet"

// Declaring variable using keyword "let"
let lastName = "Li"

// Declaring variable without using any keyword
carMark = "Tesla"

function driveCar() {
  console.log(this.firstName + ' ' + this.lastName + ' is driving a car '+this.carMark)
}

driveCar()

The result will be:

Jet undefined is driving a car Tesla

Because declaring variable with

var

keyword and without any declaration keyword are the same. Both add the variable to the global

window

object. After running the above code, global object

window

will have

firstName

and

lastName

attributes

window.firstName;  // "Jet"
window.lastName;  // undefined
window.carMark;  // "Tesla"

we can change the attributes of elements. For example, we can change the src attribute of an image. JS

var el = document.getElementById("myimg");
el.src = "https://www.sololearn.com/Images/home-new/1073.png";

HTML

<img id="myimg" src="https://www.sololearn.com/Images/home-new/1068.png" alt="" />

Note: Practically all

attributes

of an element can be changed using

JavaScript

Regular anonymous function:

// Anonymous function
document.addEventListener('click', function(){
  console.log('You clicked me!');
})

The same function with arrow function syntax

// Arrow function
document.addEventListener('click', () => {
  console.log('You clicked me!');
})

Even more minimalistic arrow function

// More minimalistic arrow function 
document.addEventListener('click', () => console.log('You clicked me!'))

Variable

variableVAR

is visible outside the

if

statement because it uses function scope instead of block scope

function callMePlease() {
  if (1 == 1) {
    let variableLET = 'LET'
    var variableVAR = 'VAR'
  }
  document.write('My ' + variableVAR + '</br>')
  document.write('My ' + variableLET + '</br>')
}

callMePlease()

Another variable

variableLET

is not visible outside the block because it uses block scope and the code above will generate the following error:

Uncaught ReferenceError: variableLET is not defined