There are two types of web storage objects:

- sessionStorage()
- localStorage()

Local vs. Session

- Session Storage is destroyed once the user closes the browser
- Local Storage stores data with no expiration date

Note:

You need to be familiar with basic JavaScript in order to understand and use the API

In HTML5, the Geolocation API is used to obtain the user's geographical location. Since this can compromise user privacy, the option is not available unless the user approves it. Note:

Geolocation is much more accurate for devices with GPS, like smartphones

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="" />

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>

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

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>

We can call parent class constructor from child class using

parent

keyword

parent::__construct($name);

Complete example:

class User {
    public $username;

    function __construct($name) {
        $this->username = $name;
    }
}
class Admin extends User{
    public $admin_level;
    
    function __construct($name, $admin_level) {
        parent::__construct($name);
        $this->admin_level = $admin_level;
    }
}
$admin1 = new Admin('Tom', 'Manager');

echo $admin1->username;
echo "\n";
echo $admin1->admin_level;

If there is no constructor in child class, then parent class constructor will be called (when appropriate parameters are passed)

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

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

Changing the

href

,

text

of a link JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
    var el = document.getElementsByTagName('a');
    el[0].href= 'http://www.sololearn.com';
};

HTML

<a href="http://www.example.com">Some link</a>
<br />
<a href="https://google.com">Google.com</a>