With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. With capturing, the process is in reverse. We usually attach an event to a handler using the addEventListener function.
The third argument useCapture is the key. The default value is false. So, it will be a bubbling model where the event is handled by the innermost element first and it propagates outwards till it reaches the parent element. If that argument is true, it is capturing model.
<div onClick="divHandler()">
<ul onClick="ulHandler">
<li id="foo"></li>
</ul>
</div>
<script>
function handler() {
// do something here
}
function divHandler(){}
function ulHandler(){}
document.getElementById("foo").addEventListener("click", handler)
</script>
When we click the list element, the order of execution of handlers is like this in bubbling (default) model.
Hoisting is a process of pushing the declared variables to the top of the program while running it. For Ex:
doSomething(foo); // used before
var foo; // declared later
In this mechanism, a JavaScript VM does two things while running a program:
First scan the program, collect all the variable and function declarations and assign memory spaces for it.
Run the program now by filling variable values assigned any, if not, fill undefined
In the above code snippet, console.log prints “undefined”. It is because in the first pass variable foo is collected. VM looks for any value defined for variable foo. This hoisting can result in many JavaScript code situations where code can throw errors in some places and uses undefined silently in another. You should be knowing hoisting to clear the ambiguity! See a few examples!
You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.
You may assume the two numbers do not contain any leading zero, except the number 0 itself.
Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si < ei), determine if a person could attend all meetings.
Example 1:
Input: [[0,30],[5,10],[15,20]]
Output: false
Example 2:
put: [[7,10],[2,4]]
Output: True
class Solution:
def canAttendMeetings(self, intervals: List[List[int]]) -> bool:
start = 0
end = 1
intervals.sort()
print(intervals)
for i in range(1, len(intervals)):
if intervals[i][start] < intervals[i-1][end]:
return False
return True
window.onload = function () {
//buttons
var addBtn = document.getElementById("add");
var addFormDiv = document.querySelector(".addForm");
//form fields:
var fullname = document.getElementById("fullname");
var phone = document.getElementById("phone");
var email = document.getElementById("email");
//address book display
var addBookdiv = document.querySelector(".addbook");
//Intialize storage array
var dataArray = [];
//eventListeners
addBtn.addEventListener("click", addToBook);
addBookdiv.addEventListener("click", removeContact);
function structure(fullname, phone, email) {
this.fullname = fullname;
this.phone = phone;
this.email = email;
}
function addToBook() {
//test if fields are empty
var testIfempty = fullname.value != '' && phone.value != '' && email.value != '';
//console.log(testIfempty);
if (testIfempty) {
//add contents to array and add contents to localstorage
var obj = new structure(fullname.value, phone.value, email.value);
dataArray.push(obj);
localStorage['contactInfo'] = JSON.stringify(dataArray);
//clear form
clearForm();
//update display from the form data collected
displayContactInfo();
}
}
function clearForm() {
var filledForm = document.querySelectorAll(".formFields");
for (var i in filledForm) {
filledForm[i].value = "";
}
}
function removeContact(e) {
if (e.target.classList.contains("removeButton")) {
var rmId = e.target.getAttribute("data-id");
dataArray.splice(rmId, 1);
//update localstorage
localStorage['contactInfo'] = JSON.stringify(dataArray);
displayContactInfo();
}
}
function displayContactInfo() {
//look for localstorage key if not present create it
//if exists load content from LS and loop it on page for div to populate
if (localStorage['contactInfo'] === undefined) {
localStorage['contactInfo'] = "[]" //string
} else {
dataArray = JSON.parse(localStorage['contactInfo']);
addBookdiv.innerHTML = '';
for (var i in dataArray) {
var str = '<div class="entry">';
str += '<div class="name"><p>' + dataArray[i].fullname + '</p></div>';
str += '<div class="email"><p>' + dataArray[i].email + '</p></div>';
str += '<div class="phone"><p>' + dataArray[i].phone + '</p ></div>';
str += '<div class="del"><a href="#" class="removeButton" data-id="' + i + '" >Delete</a></div>';
str += '</div >';
addBookdiv.innerHTML += str;
}
}
}
displayContactInfo();
}
Notes:
The read-only localStorage property allows you to access a Storage object for the Document‘s origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
**The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).**
