- 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
Geolocation is much more accurate for devices with GPS, like smartphones
grab
an object and drag it to a different location.
To make an element draggable, we set the draggable
attribute to true.
JSfunction 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="" />
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 contentvar 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 contentlet elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";
getElementsByClassName()
method returns a collection of all elements (as an array) in the document with the specified class name.
JSvar arr = document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";
HTML<div class="demo">1</div>
<div class="demo">2</div>
parent
keywordparent::__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.
JSlet 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 examplevar 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
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>