JavaScript Flashcards
for Each on array
arr.forEach(function(part, index, theArray) {
theArray[index] = “hello world”;
});
window.open
window.open(URL, name, specs, replace)
Parameter Description
URL Optional. Specifies the URL of the page to open. If no URL is specified, a new window/tab with about:blank is opened
name Optional. Specifies the target attribute or the name of the window. The following values are supported:
_blank - URL is loaded into a new window, or tab. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window (Note: the name does not specify the title of the new window)
specs Optional. A comma-separated list of items, no whitespaces. The following values are supported:
channelmode=yes|no|1|0 Whether or not to display the window in theater mode. Default is no. IE only
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE only
fullscreen=yes|no|1|0 Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only
height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not allowed
location=yes|no|1|0 Whether or not to display the address field. Opera only
menubar=yes|no|1|0 Whether or not to display the menu bar
resizable=yes|no|1|0 Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only
top=pixels The top position of the window. Negative values not allowed
width=pixels The width of the window. Min. value is 100
replace Optional. Specifies whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
true - URL replaces the current document in the history list
false - URL creates a new entry in the history list
Return Value: A reference to the newly created window, or null if the call failed
What is the difference between window.location.href () and window.open () methods in JavaScript
window. location.href is a property from (window.location), it returns current url location in browser and when change it it will redirect the same page to the new url.
window. location.href = ‘yourwebsiteurl’; window.open() is a method that will open the page you request inside it in new window.
window. open(‘yourwebsiteurl
date
startDate = new Date(1990, 0, 5);
january 51990 -0 jan
0=sunday 1=monday 6=saturday
const day = (d || new Date()).getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
comparing dates
The Date object will do what you want - construct one for each date, then compare them using the >, =.
The ==, !=, ===, and !== operators require you to use date.getTime() as in
var d1 = new Date(); var d2 = new Date(d1); var same = d1.getTime() === d2.getTime(); var notSame = d1.getTime() !== d2.getTime(); to be clear just checking for equality directly with the date objects won't work
var d1 = new Date(); var d2 = new Date(d1);
console. log(d1 == d2); // prints false (wrong!)
console. log(d1 === d2); // prints false (wrong!)
console. log(d1 != d2); // prints true (wrong!)
console. log(d1 !== d2); // prints true (wrong!)
console. log(d1.getTime() === d2.getTime()); // prints true (correct)
template literal/string and tagged template literals
https://stackoverflow.com/questions/27565056/es6-template-literals-vs-concatenated-strings
If you are using template literals only with placeholders (e.g. Hello ${person.name}) like in the question’s example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ‘ and “ since you don’t have to escape those characters any more.
Readability is a great feature, but the most interesting thing about templates are Tagged template literals:
let person = {name: 'John Smith'};
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];
Console.log(tag `My name is ${person.name}!`); // Output: My name is JOHN SMITH!
In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.
The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale’s language, for example into German:
console.log(msgMy name is ${person.name}.) // Output: Mein Name ist John Smith.
The value returned by the tag function doesn’t even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:
$a.${className}[href=~'//${domain}/']
JavaScript Event Delegation
https://davidwalsh.name/event-delegate
One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. The base concept is fairly simple but many people don’t understand just how event delegation works. Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.
Let’s say that we have a parent UL element with several child elements:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual LI element, but what if LI elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent UL element. But if you add the event listener to the parent, how will you know which element was clicked?
Simple: when the event bubbles up to the UL element, you check the event object’s target property to gain a reference to the actual clicked node. Here’s a very basic JavaScript snippet which illustrates event delegation:
// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an LI element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- UL and LI is a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an A tag with the classA CSS class:
// Get the parent DIV, add click listener...
document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if (e.target && e.target.matches("a.classA")) {
console.log("Anchor element clicked!");
}
});
Using the Element.matches API, we can see if the element matches our desired target.
Since most developers use a JavaScript library for their DOM element and event handling, I recommend using the library’s method of event delegation, as they are capable of advanced delegation and element identification.
Hopefully this helps you visually the concept behind event delegation and convinces you of delegation’s power!
Element.matches API
// Get the parent DIV, add click listener...
document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if (e.target && e.target.matches("a.classA")) {
console.log("Anchor element clicked!");
}
});ECMA Script vs ES6
Officially, the name is “ECMAScript 2015 Language” and it’s the 6th Edition of the ECMA-262 standard.
ES6 is the last big release, and future versions will be smaller, and they will be released more frequently.
ECMA Script vs Javascript
Is it ECMAScript or JavaScript? In everyday life, you can use the terms ECMAScript and JavaScript interchangeably. ECMAScript is a specification of a language. JavaScript is an implementation of that language among JScript and ActionScript. The language specification deals with abstract concepts such as “[[GetPrototypeOf]] internal slot” while JavaScript has a concrete getPrototypeOf method.
New features in JS engines before in ECMAScript standard
A new language feature goes through many phases before being included in the specification. It grows from an idea into a commented proposal and into an accepted language feature. Periodically, the committee responsible for the ECMAScript specification collects accepted language features and writes an updated edition of the ECMAScript specification.
In the last stage, before the feature being accepted into the language, the committee requires that two shipping VMs exist that implement the feature. This means that Chrome and Firefox can implement a language feature before it’s included in an official ECMAScript specification.
The ‘implementation first’-approach means that you will be checking if a JS engine supports a specific language feature instead of supporting a specific ECMAScript version. The situation is similar to CSS, HTML, and browser runtime environment. Instead of checking for a version number, you’d check if Intersection Observer API works in your choice of browsers.
What name to use? ECMA or ES6
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMAScript is the official name of the language.
From 2015 ECMAScript is named by year (ECMAScript 2015).
The ECMAScript 2015 Language version was the last big release. Future updates to the specification will be smaller. New language features will be implemented in JavaScript engines before they are officially included in the specification.
You should talk about
use ES6 to refer to “ECMAScript 2015 Language” (arrow functions, template strings, Promises), it’s shorter than ES2015, and both are unofficial, ES6 was the last big release, and the name is in line with the previous big release ES5, things change after that
after ES6, use names of language features, such as “globalThis” and “Array.prototype.flatMap”, the specification is only updated after working implementations exist in JS engines, check TC39 Finished Proposals for a list of features to be included in the next specification
for historically referring one year’s updates to the ECMAScript specification use ES[year]
https://www.w3schools.com/js/js_versions.asp#
:~:text=The%20latest%20JavaScript%20version%20
was,after%20the%20organization%20adopted%20JavaScript.
check TC39 Finished Proposals for a list of features to be included in the next specification
https://github.com/tc39/proposals/blob/master/finished-proposals.md
Browser Javascript feature support
https://kangax.github.io/compat-table/es6/
What is V8?
V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.
