Let's declare any string variable

let myString = 'Some String'

The string variable has access to all

string functions

document.write(myString.toUpperCase());

The result will be:

SOME STRING

But if we let number variable to use the string function

toUpperCase()

let myNumber = 55
console.log(myNumber.toUpperCase());

Then we will get the following error. This is because number type variable does not have access to string functions

Uncaught TypeError: myNumber.toUpperCase is not a function

The function

addEventListener

creates the specified event listener for the object. In this case we add

click

event for the div element with id

div_element

without using anonymous function. First we select the object that we want to create

click

event listener to

let div = document.getElementById('div_element');

Then we create the actual event listener for the event without anonymous function

div.addEventListener('click', func);
function func() {
    alert('You clicked me!');
}

The same example using anonymous function

div.addEventListener('click', function(){
  alert('You clicked me!');
})

HTML part of the examples:

<div id="div_element">Click Me</div>

Another method to add the event listener is to include

onclick

attribute inside opening tag

<div onclick="func()">Click Me</div>

It's possible to have an object inside another object. In the example we have object

boyfriend

inside

cat

object

let cat = {
    name: 'Lucy',
    age: 4,
    meow() {
        console.log('Meowwww');
    },
    boyfriend: {
        name: 'Jack',
        age: 5,
        favoriteColors: ['Green', 'Yellow'],
        meow() {
            console.log('Meeoowwwwwwwwwwww');
        },
    }
}

Accessing nested object's attributes and methods:

console.log(cat.boyfriend.name); // Jack
cat.boyfriend.meow(); // Meeoowwwwwwwwwwww

The object

cat

combines attributes and behaviors of a cat in the following object

let cat = {
    age: 4,
    name: 'Bella',
    meow() {
        console.log('Meowwww');
    }
}

Instead of the object, we would have separated function and variables, which is not organized way

let catName = 'Bella';
let catAge = 4;

function meow() {
    console.log('Meowwww');
}

Sets

green

background color

document.body.style.backgroundColor = 'green';

Sets

display

property to

inline-block

for the element with id

element_id

document.getElementById('element_id').style.display = 'inline-block';

Prints the current web page title

console.log(document.title);

Updates the current web page title

document.title = 'Getting started with JavaScript';

The function sends ajax request with

vanilla JavaScript

and calls the

callback function

if the third parameter's type is

function

function ajax(url, methodType, callback){
    var xhr = new XMLHttpRequest();
    xhr.open(methodType, url, true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200){
            if (typeof callback === "function") {
                callback(xhr.responseText);
            }
        }
    }
}

Example of calling the above method

ajax(url, 'GET', function(resp) {
    console.log(resp);
})

The

getElementsByClassName()

method returns a collection of all elements (as an array) in the document with the specified class name. JS

var arr =  document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";

HTML

<div class="demo">1</div>
<div class="demo">2</div>

getElementById

method is used to select the element with

id="demo"

and change its content

let elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

The

document

object has methods that allow us to select the desired HTML element. These three methods are the most commonly used for selecting HTML elements

//finds element by id
document.getElementById(id) 

//finds elements by class name
document.getElementsByClassName(name) 

//finds elements by tag name
document.getElementsByTagName(name)

In the example below, the getElementById method is used to select the element with id="demo" and change its content

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

Note: The example above assumes that the HTML contains an element with

id="demo"

, for example

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