Link correctly html to js document:
<script src="folderName/documentName.js"></script>
// One line comments
/* for more than one line comments*/
console.log();
console.table();
console.error('This is a error');
console.clear();
console.warn('This is a warning');
console.time();
between this 2 we can put anything (like console.log('Hello World!'); 4 times) and will print it in the console and tell us the time that took that process.
console.timeEnd();
Window Object: Global object of the browser enviroment.
Alert
To create an alert on the site:
alert('Hello World!');
Prompt
Similar to alert, excepts that takes an input
prompt();
Syntax:
prompt(text, defaultText)
var name = prompt("Your name:", "");
alert("Hello " + name);var name = prompt("Your name:", "Visitor");
document.write("Hello ", name);Confirm
Syntax:
confirm(message)confirm();
if(confirm('do you want to delete the picture?')){
console.log('Picture deleted');
}Outer height & weight
let val;
val = window.outerHeight;
val = window.outerWidth;
console.log(val);Returns the width or height of the window, top to bottom of the screen.
Inner height & weight
let val;
val = window.innerHeight;
val = window.innerWidth;
console.log(val);Returns the width or height of the window of the visible site itself
Scroll points
let val;
val = window.scrollY;
val = window.scrollX;
console.log(val);Returns the scroll point where the window of the site is at.
Location
let val;
val = window.location;
val = window.location.port;
val = window.location.href;
val = window.location.search;
console.log(val);Get different information of the site
window.location.href = "http://anything.com";Redirect the site
window.location.reload();will make it reload, will be inside a function not in gloal scope like the example, this will amke the site to reload constantly
History
let val;
window.history.go(-1);It goes in history as many steps as we indicate inside ()
window.history.length;It will saw the lenght of history ()
Navigator
let val;
val = window.navigator;
console.log(val);Navigator information
Document Object Model
The visual representation of the DOM will be like HTML.
The DOM is a cross-platform and language-independent application programming interface that treats a HTML document as a tree structure where each node is an object representing a part of the document.
It is object oriented, objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.
We can use javascript to manipulate de nodes/elements in the Document
Should know, usually it is done with methods selector.
Document
let val;
val = document;
val = document.all; //shows all the tags of the HTML in an array and it can be access with [].
val = document.lenght;
val = document.body; // or any part like links, forms, etc.
val = document.domain;
val = document.URL;
val = document.scripts[1].getAttribute('src'); // will get back the name of the second script in the dom.
console.log(val);DOM Selectors
will allows us to target elemnts in the DOM and do things with those.
Single element selectors
By ID: getElementById
const mainContainer = document.getElementById('container');
//the following ones are normally attached to events:
mainContainer.style.background = '#000'; //change style, in this case of background.
mainContainer.style.display = 'none'; //to hide
mainContainer.textContent = 'Shopping List'; //to change the content.
mainContainer.innerText = 'Shopping List'; //to change the content.
mainContainer.innerHTML = '<span>Shopping List<span>'; //to change the content.By anything: querySelector
document.querySelector('#container');
document.querySelector('li').style.color = 'black';
document.querySelector('ul li').style.color = 'black';"querySelector" will only affect one of them, the first one, in case of multiple elements with same class o element tag.
In case we need it to target one but not the first one:
document.querySelector('li:last-child').textContent = 'lemons';
document.querySelector('li:nth-child(3)').style.color = 'black';Multiple element selectors
By Class Name: getElementByClassName
const listItems = document.getElementByClassName('list-items');
console.log(listItems);// will retun all items with that class as an array.
listItems[3].style.color = "pink";By Tag Name: getElementByTagName
const listItems = document.getElementByTagName('li');
console.log(listItems);// will retun all items with the same tag as an array.
listItems[3].style.color = "pink";By anything: querySelectorAll
node list.
document.querySelectorAll('#container');
document.querySelectorAll('li').textContent = 'hello';
document.querySelectorAll('ul li').style.color = 'white';
document.querySelectorAll('li:nth-child(odd)').style.background = 'black';
document.querySelectorAll('li:nth-child(even)').style.background = 'red';for each loop (only for arrays):
liOdd = document.querySelectorAll('li:nth-child(odd)');
liOdd.forEach(function(li, index){
li.style.background = 'lightgrey';
});for loop:
liEven = document.querySelectorAll('li:nth-child(even)');
for(let i = 0; i < liEven.lenght; ++i){
liEven[i].style.background = 'hotpink';
}Move around the DOM
let val;
const list = document.querySelector('ul.shoppin-list');
const listItem = document.querySelector('li.shoppin-list-item');
//get child nodes - returns node list (not just elements)
val = list.childNodes;
//get the children element nodes - returns html collection
val = list.children;
val = list.children[2];
list.children[1].textContent = 'Hello';
//get children of children
val = list.children[2].children;
//get first node child:
val = list.firstChild;
//get first element child:
val = list.firstElementChild;
//get last node child:
val = list.lastChild;
//get last element child:
val = list.lastElementChild;
//get parents
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;
//get next sibling
val = listItem.nextSibling;
val = listItem.nextElementSibling;
//get previous sibling
val = listItem.previousSibling;
val = listItem.previousElementSibling;
console.log(val);const newItem = document.createElement('li');
// add class to the new li
newItem.className = 'list-item'
// add id to the new li
newItem.id = 'new-item'
// add attribute to the new li
newItem.setAttribute('title','New Item');
// Create text node and append - (if it does not have a text node just element tags .innerHTML)
const newText = document.createTextNode('Oranges');
newItem.appendChild(newText);
//this will be text inside of the li tag, so will look like this: <li id = 'new-item' class='list-item' title='New Item'>Oranges</li>
//append new li as a child to the existing ul
document.querySelector('ul.shoppin-list').appendChild(newItem);
console.log(newItem); Replace element
//create element
const newTitle = document.createElement('h2');
//add id
newTitle.id = 'task-title';
//new text node
const newText = document.createTextNode('Task List');
newTitle.appendChild(newText);
//get old title
const oldTitle = document.getEementById('task-title');
//parent
const cardContainer = document.querySelector('.card-container');
//Replace
cardContainer.replaceChild(newTitle, oldTitle);Remove element
const lis = document.querySelectorAll('li');
const list = document.querySelector('ul');
//remove a particular element/item by remove();.
lis[0].remove();
//remove a particular element/item by removeChild();.
list.removeChild(lis[2]);Class & Attributes
Class
const firstItem = document.querySelector('li:first-child');
const link = firstItem.children[0];
let val;
val = link.className; //return the classes names.
val = link.classList; // returns the array of classes of the element
val = link.classList[0]; // returns the first class of the element
link.classList.add('remove'); //added a new class
link.classList.remove('remove'); //remove the mentionned class
console.log(val);Attributes
const firstItem = document.querySelector('li:first-child');
const link = firstItem.children[0];
let val;
val = link.getAttribute('href');
val = link.setAttribute('href', 'http://anything.com');
val = link.hasAttribute('href'); //returns true or false after checking if it has that attribute or not.
//add & remove attribute:
link.setAttribute('href', 'http://anything.com');
link.removeAttribute('href');
console.log(val);Listening to the Dom
with anonymous function
cosnt submitButton = document.querySelector('.clearTask');
submitButton.addEventListener("click", function(e){
e.preventDefault();
console.log('Hola');
};)with a named function
cosnt submitButton = document.querySelector('.clearTask');
submitButton.addEventListener("click", onClick);
function onClick(e){
e.preventDefault();
console.log('Hola');
}Event Object
this object it is called when the function it is triggered.
usually reffer to as: e, evt, or event
contains information about the event
cosnt submitButton = document.querySelector('.clearTask');
submitButton.addEventListener("click", onClick);
function onClick(e){
let val;
val = e; //to see everything associated with the event object.
val = e.target; // returns the targeted element
val = e.target.className; // returns class name of the targeted element.
e.target.innerText = 'Hello'; // change the text on the targeted element when the event happens
val = e.type;//will show the type of event associated
//There is many other properties for the event object, check documentation about it if neccesary.
console.log(val);
}const submitButton = document.querySelector('.clearTask');
//click
submitButton.addEventListener("click", runEvent);
//Double-click
submitButton.addEventListener("dblclick", runEvent);
//mousedown
submitButton.addEventListener("mousedown", runEvent);
//mouseup
submitButton.addEventListener("mouseup", runEvent);
//mouseenter
submitButton.addEventListener("mouseenter", runEvent);
//mouseleave
submitButton.addEventListener("mouseleave", runEvent);
//mouseover
submitButton.addEventListener("mouseover", runEvent);
//mouseout
submitButton.addEventListener("mouseout", runEvent);
//mousemove
submitButton.addEventListener("mousemove", runEvent);
//event handler function
function runEvent(e){
e.preventDefault();
console.log(`Event type: ${e.type}`);
}Example inspired by this lesson Mouse event in codepen
form - submit event: redirects neccsary e.preventDeafult.
to clear input: inputClass.value = " ";
get input value: console.log(inputClass.value);
get input value - inside of function event handler: console.log(e.target.value);
Example inspired by this lesson event target - input value - keyup in codepen
key events
Events: keydown, keyup, keypress.
Input
Blur: when click outside of the input area
focus: when click inside of the input area
also events: cut, paste,
Input event: anything that happens in the input. any of the above.
change
Bubbling
Bubble up, to the parents, of events in the DOM.
Event Delegation
the listener it is on the parent element.
neccessary in case we want to target elements that are created dinamically with js.
const deleteItemList = document.querySelector(".delete-item");
deleteItemList.addEventListener("click", deleteItem);
function deleteItem(e){
if(e.target.parentElement.classList.contains("delete-item")){
e.target.parentElement.parentElement.remove();
}
}Delete targeting the parent for the event listener.
var
var city = "Madrid";
This is how you declare a variable.
Can be reassigned a different value.
Naming conventions
- dont use numbers as first character
- dont use spaces
- dont use "-"
- can be used "_" or "$" to start the name but not recomended.
- Use camelCase naming for a multi-word property name, and avoid the space or -.
Initialize a variable
var city;
without asigning any value initially.
the value can be assigned afterwards.
It is often used when there is a condition (If statement, if something it is true city = Barcelona).
city = Madrid;
let
works similar to var.
was implemented with ES6.
const
constant.
can not be reassigned.
a value has to be assigned initially.
In some cases, like when a const declares an object like the one in the following example, and values in the object can be change, what can not change in this case is sister, but can change the age number, the name, etc.
We can change the data inside of the object but not the object itself, can not be reassigned to a new object.
Example:
const sister = {
name: "Sarah",
age: 23,
parents: [ "alice", "andy" ],
siblings: ["julia"],
favoriteColor: "purple",
pets: true
};Const make your code more robust and readable.
Primitive & Refrence //needs clarification***************************************
Primitive data types:
- String ('' inside of quotation mark any concadenation of caracthers)
- Numbers
- Null (empty value)
- Undefined (variable that has no value assigned)
- Boolean (true/false)
- Symbols (ES6 - )
Reference data types:
- Arrays
- Objects
- Functions
- Dates
- anything that we can store in a variable
JavaScript is dinamically typed language
data types are associated with values not with the variables.
same variable can store different types and does not need to specify the type of data.
Data Type Conversion
To a string:
by adding string(value)
let amount = string(5); -> it is no longer a number, it is a string.
same can be done with any data type.
by adding .toString() property
let amount = (5).toString();
To a number
by adding Number(value)
by adding .parseInt() property
by adding .parseFloat() property
Data Type Cohersion
//needs clarification***************************************
Math.round(); will round the number.
Math.ceil(); will round the number up.
Math.floor(); will round the number down.
Math.sqr(); will give you the square root of the number.
Math.abs(); will give you the absolute of the number.
Math.pow(); will take 2 values and first the value number, second the value for the times the number will multiply by itself. number to the power of the second number
Math.min(); will return the minimun number of the value-numbers inside of the ().
Math.max(); will return the biggest number of the value-numbers inside of the ().
Math.random(); will return a random number ().
concadenation
const name = 'Elena';
const place = ' is here!';
let status;
status = name + place
console.log(status);append +=
let name;
name = 'Elena';
name += 'is here!'
console.log(name);escaping \ in case of conflict with quotation marks
.lenght
.conact();
.toUpperCase();
.toLowerCase();
.indexOf();
.lastIndexOf();
.charAt();
.charAt(variableName.lenght - 1); will always return last character
.substring(0, 3); will return a new string (will bring the characters in between the index inside the () in this case the characters from the string from 0 to 3 ) from the original one
.slice(); more use with arrays. similar to the substring, but if you put a negative number can start from the end of the string
.split(); a string can be split by the space or coma (what it is split by needs to be specified inside of the ()) an crate an array with the result. (tags example)
.replace();
.includes(); checks in the string if the value you put inside the () it is inside of the original string.
Easier way to write html with js without using concadenation.
example:
const building = 'New Tower';
const city = 'Berlin';
const country = 'Germany';
let list;
list = `
<ul>
<li>Building: ${building}</li>
<li>City: ${city}</li>
<li>Country: ${country}</li>
</ul>
`;
document.body.innerHTML = list;Evaluate a condition an execute based if the condition it is true or not.
const amount = 50;
if(amount == 50){
console.log("Well done, It´s correct!")
} else {
console.log("Sorry, not correct this time!")
}returns:
Well done, It´s correct!
const flavor = "lemon";
if(flavor === "lemon"){
console.log("The flavor is lemon!");
} else if(flavor === "mint"){
console.log("The flavor is mint!");
} else {
console.log("Sorry, there is no flavor!")
}returns:
The flavor is lemon!
> greater than
>= greater than or equal
< less than
<= less than or equal
== equal value
=== equal value and type
!= not equal
!== not equal value and type
&& and
|| or
example:
const name = "Marta";
const age = 20;
if(age > 0 && age < 12){
console.log(`${name} is a child because she is ${age} years old`);
} else if(age >= 13 && age <= 19){
console.log(`${name} is a teen because she is ${age} years old`);
} else {
console.log(`${name} is an adult because she is ${age} years old`);
}returns:
Marta is an adult because she is 20 years old
Shorter way to make operators
represented by the "?" question mark.
//needs clarification*****************************************
Recommended when there is a lot of cases.
very similar else if.
const flavor = "lemon";
switch(flavor){
case "lemon":
console.log("The flavor is lemon!");
break;
case "mint":
console.log("The flavor is mint!");
break;
default:
console.log("The flavor is not lemon or mint!");
break;
}returns:
The flavor is lemon!
Allows iteration. Repeat an action for a number of times.
Break & continue
apply to all kind of loops
Break: will stop the iteration
continue: will make the iteration continue.
Example: Count up to a 100 monkeys 🐒
var x = 0;
while (x <= 99) {
x = x + 1;
console.log( x + " monkey");
}While the condition is true (x <= 99) will add one x = x + 1;, from the starting point var x = 0; and print console.log( x + " monkey") for each adition, until the condition stops being true.
Three main parts for a loop:
- When to start
var x = 0;declaration. - When to stop
while (x <= 99)condition. - How to get to next item
x = x + 1
"Fizzbuzz" example:
- Loop through the numbers 1 to 100
- If the number is divisible by 3, print "Fizz"
- If the number is divisible by 5, print "Buzz"
- If the number is divisible by both 3 and 5, print "FizzBuzz"
- If the number is not divisible by 3 or 5, print the number
var x = 1;
while (x <= 100) {
if (x % 3 === 0 && x % 5 === 0){
console.log ("FizzBuzz");
}else if (x % 5 === 0){
console.log("Buzz");
}else if (x % 3 === 0){
console.log("Fizz");
}else {
console.log(x);
}
x = x + 1;
}"Nasa" example:
- Orbiter transfers from ground to internal power (50 seconds)
- auto sequence start (31 seconds)
- Activate sound suppression system (16 seconds)
- Activate burnoff system (10 seconds)
- engine start (6 seconds)
- ignition and liftoff! (0 seconds)
- If there's a task being completed, it prints out the task
- If there is no task being completed, it prints out the time as x seconds
var x = 60;
while(x >= 0){
if (x === 50){
console.log ("Orbiter transfers from ground to internal power");
}else if (x === 31){
console.log("auto sequence start");
}else if (x === 16){
console.log("Activate sound suppression system");
}else if (x === 10){
console.log("Activate burnoff system");
}else if (x === 6){
console.log("engine start");
}else if (x === 0){
console.log(" ignition and liftoff!");
}else {
console.log( x + " seconds");
}
x = x - 1;
}for ([initialExpression]; [condition]; [incrementExpression]) statement MDN Reference
Example: Count up to a 100 monkeys 🐒
for (var i = 0; i <= 100; i = i + 1 ){
console.log( i + " monkey");
}All the neccesary information is declare in the first line.
Three main parts for a loop:
- When to start
var i = 0;the declaration. - When to stop
i <= 100;the condition. - How to get to next item
i = i + 1ori++
Even if the condition it is not true, the out put will run at least once.
var x = 200;
do{
console.log( x + " monkey");
x = x + 1;
}
while (x <= 99);One or more loops can be nested inside of other loop.
The First/Main loop will triger the loop, then the nested one will loop until the condition is not longer true, stops, to go back to the main loop, that will trigger the nested ones everytime, until its condiction it is no longer true.
example:
for (var x = 0; x < 4; x = x + 1) {
for (var y = 0; y < 3; y = y + 1) {
console.log(x + "," + y);
}
}that will print:
0, 0
0, 1
0, 2
1, 0
1, 1
1, 2
2, 0
2, 1
2, 2
3, 0
3, 1
3, 2
Increment and decrement
x++ or ++x // same as x = x + 1
x-- or --x // same as x = x - 1
x += 3 // same as x = x + 3
x -= 6 // same as x = x - 6
x *= 2 // same as x = x * 2
x /= 5 // same as x = x / 5
package up code so you can easily use (and reuse) a block of code.
functions expressions, functions declarations, property methods.
They all can take parameters.
function greeting() {
return 'Hello';
}
console.log(greeting());Returns:
Hello
One parameter, in this case name:
function greeting(name) {
return 'Hello ' + name;
}
console.log(greeting('Leticia'));Returns:
Hello Leticia
More parameters, in this case name & lastName:
function greeting(name, lastName) {
return 'Hello ' + name + ' ' + lastName;
}
console.log(greeting('Leticia', 'Smith'));Returns:
Hello Leticia Smith
Default values for parameters in case of undefine, in case the parameters are not passed:
function greeting(name = "John", lastName = "Smith") {
return 'Hello ' + name + ' ' + lastName;
}
console.log(greeting());Returns:
Hello John Smith
If paramaters are passed will over-write the default values.
A function stored inside a variable it's called a function expression. Examples:
const amount = function(y = 3){
return y + y;
};
console.log(amount(5));Returns: 10.
"y" is = 3 to have a default, but it is over-writen by the arguments passed 5, in this case.
var catSays = function(max) {
var catMessage = "";
for (var i = 0; i < max; i++) {
catMessage += "meow ";
}
return catMessage;
};Function has no name, it is anonymous.
callback: A function that is passed into another function.
//needs clarification***************************************** Example:
function movies(messageFunction, name) {
messageFunction(name);
}
movies(function displayFavorite(movieName) {
console.log("My favorite movie is " + movieName);
}, "Vikings");Returns: My favorite movie is Vikings
Example:
function emotions(myString, myFunc) {
console.log("I am " + myString + ", " + myFunc(2));
}
emotions("happy", function laugh(num) {
var risa = "";
for (var i = 0; i < num; i++){
risa += "ha";
}
return risa + "!";
});Returns: I am happy, haha!
Example:
var cry = function sad() {
return "boohoo!";
}
console.log(cry());Returns: boohoo!
anonymous inline function expressions: for functions that are not going to be reused.
Example:
var laugh = function(num) {
var L = "";
for (i = 0; i < num; i++){
L += "ha";
}
return L + "!";
}
console.log(laugh(3));Returns: hahaha!
It is declare and run at the same time.
very useful in case of modules.
(function(city){
console.log('We are travelling to ' + city + '!')
})('Oslo');Put functions inside of objects:
const list = {
add: function(){
console.log('Add item')
}
}
list.add();using console.log, like this example, only displays a value.
function sayHello() {
var message = "Hello!"
console.log(message);
}Good to test code, get feedback and debugging purposes.
console.log to test your code in the JavaScript console, just that.
Return statement:
function sayHello() {
var message = "Hello!"
return message; // returns value instead of printing it
}Stops the execution of the function.
Build a triangle:
function makeLine(length) {
var line = "";
for (var j = 1; j <= length; j++) {
line += "* ";
}
return line + "\n";
}
function buildTriangle(length) {
var Line = "";
for (var i = 1; i <= length; i++) {
Line += makeLine(i);
}
return Line;
}
console.log(buildTriangle(10));prints:
function laugh(num){
var laughter = "";
for (var x = 0; x < num; ++x ){
laughter += "ha";
}
return laughter + "!";
}
console.log(laugh(3));prints: hahaha!
Up to here we only have declare the functions.
For the function to do something, we have to invoke or call the function using the function name,
followed by parentheses with any arguments that are passed into it, if it has any.
cookChiken(6); or doubleAction(look, jump); or sayHello()
Parameters are always variables name and appears in the function declaration, that are used to store the data that's passed into a function for the function to use.
Arguments are always going to be a value, the actual data (i.e. any of the JavaScript data types - a number, a string, a boolean, etc.) and will always appear in the code when the function is called or invoked.
Global Scope: defined at the top level, not inside of any functions. Available everywhere.
Function Scope: variable defined inside a function. Available inside of the function it was declared in (even in functions declared inside the function).
Block Scope: //needs clarification***************************************
JavaScript Engine´ll start looking inside the current function when trying to access an identifier.
If it does not get any results it'll continue to the next outer function to see if it can find any there.
It will keep doing this until it reaches the global scope.
Minimize the use of global variables. Can lead to bad variable names, conflicting variable names, and messy code.
var, let and const
var has function scope
let and const have a block scope
This first case will shadow, since "x" it is re-asign inside of the function:
var x = 1;
function addTwo() {
x = x + 2;
}
addTwo();
x = x + 1;
console.log(x);The way to avoid it´s by declering "x" in a new variable inside of the function. From altering a global scope variable becomes a function scope variable.
var x = 1;
function addTwo() {
var x = x + 2;
}
addTwo();
x = x + 1;
console.log(x);//needs clarification***************************************** To avoid bug due to this: always declare functions at the top of the sripts and variables at the top of the functions. This way syntax and behavior are consistent.
Stores information.
Stores multiple values into a single, organized data structure.
Start an array by listing values separated with commas between square brackets [].
Most used one: var donuts = ["glazed", "powdered", "jelly"];
Also can be done with the Array constructor: var donuts = new Array("glazed", "powdered", "jelly");
You can store strings, like the example above or numbers, booleans or any type of data, even mixed them. But usually arrays are made out of same data values.
We can even put an array inside an array to create a nested array.
Arrays Elements : Are the individual pieces of data in the array.
Index: the position/location of the element inside of the Array (starts counting from 0).
Accessing Array elements:
First put the name of the array followed by square brackets [] containing the index of the value you want to access.
Example:
var donuts = ["glazed", "powdered", "sprinkled"];
console.log(donuts[0]);Prints: "glazed"
In case we need to change the value of an element in array:
donuts[1] = "glazed cruller";
console.log(donuts[1]);
Prints: "glazed cruller"
MDN documentation about Arrays
JavaScript provides a large number of built-in methods for modifying arrays and accessing values in an array.
List: concat() Array() copyWithin() entries() every() fill() filter() find() findIndex() flatMap() flatten() forEach() includes() indexOf() join() keys() lastIndexOf() map() pop() push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toLocaleString() toString() unshift() values()
Array.lenght = find the lenght of an array.
example:
var donuts = ["glazed", "powdered", "sprinkled"];
console.log(donuts.length);
Prints: 3
Array.push & Array.pop:
modifying arrays.
push()
add elements to the end of an array.
example:
var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled"];
donuts.push("powdered");
Returns: 7
donuts array: ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"]
pop() =
remove elements from the end of an array.
example:
var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];
donuts.pop();
donuts.pop();
donuts.pop();
Returns: "cinnamon sugar"
donuts array: ["glazed", "chocolate frosted", "Boston creme", "glazed cruller"]
splice() =
powerful method.
changes the contents of an array by removing existing elements and/or adding new elements.
allows you to specify the index location to add new elements, as well as the number of elements you'd like to delete (if any).
sintax:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
Examples:
Remove 0 elements from index 2, and insert "drum":
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');
result:
myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
removed is [], no elements removed
Remove 1 element from index 3:
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
result:
removed is ["mandarin"]
myFish is ["angel", "clown", "drum", "sturgeon"]
More examples MDN Splice()
Example:
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
for (var i = 0; i < donuts.length; i++) {
donuts[i] += " hole";
donuts[i] = donuts[i].toUpperCase();
}Prints:
donuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]
The forEach() loop
alternative way to iterate over an array
Parameters: can take up to 3.(iterator, index, array )
Example:
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
donuts.forEach(function(donut) {
donut += " hole";
donut = donut.toUpperCase();
console.log(donut);
});Prints:
JELLY DONUT HOLE
CHOCOLATE DONUT HOLE
GLAZED DONUT HOLE
forEach() method calls the function once for each element in the array.
Example:
words = ["cat", "in", "hat"];
words.forEach(function(word, num, all) {
console.log("Word " + num + " in " + all.toString() + " is " + word);
});Prints:
Word 0 in cat,in,hat is cat
Word 1 in cat,in,hat is in
Word 2 in cat,in,hat is hat
Example:
var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4,
19, 300, 3775, 299, 36, 209, 148, 169, 299,
6, 109, 20, 58, 139, 59, 3, 1, 139
];
test.forEach(function(value,index) {
if(value % 3 === 0){
test[index] += 100;
}
});
console.log(test);Prints:
[ 112, 929, 11, 103, 199, 1000, 7, 1, 124, 37, 4, 19, 400, 3775, 299, 136, 209, 148, 169, 299, 106, 109, 20, 58, 139, 59, 103, 1, 139 ]
Map
Returns a new array from an existing array.
Accepts only 1 argument.
Example:
var donuts = ["jelly donut", "chocolate donut", "glazed donut"];
var improvedDonuts = donuts.map(function(donut) {
donut += " hole";
donut = donut.toUpperCase();
return donut;
});Prints:
donuts array: ["jelly donut", "chocolate donut", "glazed donut"]
improvedDonuts array: ["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]
Example:
var bills = [50.23, 19.12, 34.01,
100.11, 12.15, 9.90, 29.11, 12.99,
10.00, 99.22, 102.20, 100.10, 6.77, 2.22
];
var totals = bills.map(function(amount){
amount += Number (0.15*amount)
return Number(amount.toFixed(2));
})
console.log(totals);Prints: [ 57.76, 21.99, 39.11, 115.13, 13.97, 11.38, 33.48, 14.94, 11.5, 114.1, 117.53, 115.11, 7.79, 2.55 ]
Example:
var donutBox = [
["glazed", "chocolate glazed", "cinnamon"],
["powdered", "sprinkled", "glazed cruller"],
["chocolate cruller", "Boston creme", "creme de leche"]
];
for (var row = 0; row < donutBox.length; row++) {
for (var column = 0; column < donutBox[row].length; column++) {
console.log(donutBox[row][column]);
}
}Prints:
"glazed"
"chocolate glazed"
"cinnamon"
"powdered"
"sprinkled"
"glazed cruller"
"chocolate cruller"
"Boston creme"
"creme de leche"
Example:
var numbers = [
[243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
[34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
[67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
[12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
[4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
[5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
[74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
[53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
[67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
[76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];
for (var row = 0; row < numbers.length; row++) {
for (var column = 0; column < numbers[row].length; column++) {
if(numbers[row][column] % 2 === 0){
numbers[row][column] = "even";
}else{
numbers[row][column] = "odd";
}
}
}
console.log(numbers);Prints: [ [ 'odd','even','odd','even','odd','odd','even','even','odd','odd' ], [ 'even','even','odd','odd','odd','even','even','odd','even','odd' ], [ 'odd','even','odd','odd','even','odd','odd','even','even','odd' ], [ 'even','odd','odd','odd','odd','even','even','even','even','odd' ], [ 'even','even','odd','even','odd','odd','even','odd','odd','odd' ], [ 'odd','odd','even','odd','odd','even','odd','odd','odd','even' ], [ 'even','even','even','odd','odd','odd','odd','odd','odd','even' ], [ 'odd','even','odd','even','odd','even','odd','even','odd','even' ], [ 'odd','even','odd','odd','even','even','even','even','odd','even' ], [ 'even','odd','odd','even','odd','odd','odd','even','even','even' ] ]
It is a data structure in js that allows to store data about a particular item and we can keep track by using "key".
key : value pairs separated from each other by commas.
Inside curly Braces {} entire object is wrapped by it.
Example:
var sister = {
name: "Sarah",
age: 23,
parents: [ "alice", "andy" ],
siblings: ["julia"],
favoriteColor: "purple",
pets: true,
address:{
city:"Barcleona",
country:"Spain"
},
hobbies: ["gym", "music"]
}This is object-literal notation.
Use they key to get in return value, to acces properties:
sister["parents"] by bracket notation.
sister.parents by dot notation.
Both returns: [ "alice", "andy" ]
To access other values:
sister.address.country returns: "Spain"
sister.hobbies[0] returns: "gym"
"Key" can be a property (like the ones above) or a method.
properties (information about the object) and methods (functions or capabilities the object has).
Method in the following example is paintPicture with a function as a value (the remaining keys are properties):
var sister = {
name: "Sarah",
age: 23,
parents: [ "alice", "andy" ],
siblings: ["julia"],
favoriteColor: "purple",
pets: true,
paintPicture: function() { return "Sarah paints!"; }
};
sister.paintPicture();Returns: "Sarah paints!"
Naming conventions:
To name properties:
- dont use numbers as first character.
- dont use spaces
- dont use "-". Usel camelCase naming for a multi-word property name, and avoid the space or -.
Example:
var savingsAccount = {
balance: 1000,
interestRatePercent: 1,
deposit: function addMoney(amount) {
if (amount > 0) {
savingsAccount.balance += amount;
}
},
withdraw: function removeMoney(amount) {
var verifyBalance = savingsAccount.balance - amount;
if (amount > 0 && verifyBalance >= 0) {
savingsAccount.balance -= amount;
}
},
printAccountSummary: function () {
return "Welcome!\nYour balance is currently $" + savingsAccount.balance + " and your interest rate is " + savingsAccount.interestRatePercent + "%."
}
};
console.log(savingsAccount.printAccountSummary());Returns:
Welcome!
Your balance is currently $1000 and your interest rate is 1%.
Example:
var facebookProfile = {
name: "Elena",
friends: 200,
messages: ["Hola", "Feliz año", "Cómo estas?"],
postMessage: function(message){
message = "have a great one!";
return facebookProfile.messages.push(message);
},
deleteMessage: function(index){
index <= facebookProfile.messages.length;
return facebookProfile.messages.splice(index, 1);
},
addFriend: function(){
return facebookProfile.friends +=1;
},
removeFriend: function(){
return facebookProfile.friends -=1;
}
}Array of objects
Example:
var person = [
{ name: "Mario", age: 40 },
{ name: "Teresa", age: 36 },
{ name: "Cristina", age: 4 }
];
for(let i = 0; i < person.length; i++){
console.log(person[i].name);
}Returns:
Mario
Teresa
Cristina
Example:
var donuts = [
{ type: "Jelly", cost: 1.22 },
{ type: "Chocolate", cost: 2.45 },
{ type: "Cider", cost: 1.59 },
{ type: "Boston Cream", cost: 5.99 }
];
donuts.forEach(function(element) {
console.log(element.type + " donuts cost $" + element.cost + " each");
});Returns:
Jelly donuts cost $1.22 each
Chocolate donuts cost $2.45 each
Cider donuts cost $1.59 each
Boston donuts Cream cost $5.99 each
For in loop
allow us to iterate through the key value pairs.
const customer = {
Name: "Cristina",
LastName:"Smith",
age:"25"
}
for (let person in customer){
console.log(`${person} : ${customer[person]}`);
}Returns:
Name : Cristina
LastName : Smith
age : 25
Should start with a capital letter
Example:
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
const patricia = new Person("Patricia", 14, "female");
const alberto = new Person("Alberto", 54, "male");
console.log(patricia);
console.log(alberto);prints:
Person {name: "Patricia", age: 14, gender: "female"}
Person {name: "Alberto", age: 54, gender: "male"}
Example
function Person(name, dob) {
this.name = name;
this.birthday = new Date(dob);
}
const patricia = new Person("Patricia", "03-07-2003");
console.log(patricia);prints:
Person {name: "Patricia", birthday: Fri Mar 07 2003 00:00:00 GMT+0100 (Hora estándar romance)}
Method
create a method in the constructor:
a method is a function inside of an object
Example
function Person(name, dob) {
this.name = name;
this.birthday = new Date(dob);
this.calculateAge = function(){
const diff = Date.now() - this.birthday.getTime();
const ageDate = new Date(diff);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
}
const patricia = new Person("Patricia", "03-07-2003");
console.log(patricia.calculateAge());prints:
14
not often use, no many resason to do so.
also slows down the execution, so better to use primitive. But it is good to know.
From Primitive data to a constructor:
strings:
const nameOne = "Tamara";
const nameTwo = new String("Carolina");
console.log(nameOne);
console.log(nameTwo);Print:
It is a string - primitive value Tamara
It is an object - not primitive value String {"Carolina"}
Numbers:
const numberOne = 12;
const numberTwo = new Number(12);
console.log(numberOne);
console.log(numberTwo);Print:
It is a number - primitive value 12
It is an object - not primitive value Number {12}
Same happends with booleans, objects(both cases is object, one way it is simpler than the other 2 write) and arrays (both cases is an array, one way it is simpler than the other 2 write)
Functions:
const getSumOne = function(x,y){
return x + y;
}
const getSumTwo = new Function("x","y", "return 5 + 5");
console.log(getSumOne(5,5));
console.log(getSumTwo(5,5));Print:
It is a function 10
It is an object - not primitive value 10
In global scope will reffer to the window.
inside of a function will reffer to the object inside the function.
Each object in js has a prototype, and prototype is an object itself.
all objects inherit their properties and methods from their prototype.
Object Literals: inherit from a prototype called object.prototype
objects not literal but build by constructor: inherit from Person.prototype
Example
function Person(name, lastName, dob) {
//the properties
this.name = name;
this.lastName = lastName;
this.birthday = new Date(dob);
}
//Calculate Age:
//this is now inside the prototype
Person.prototype.calculateAge = function(){
const diff = Date.now() - this.birthday.getTime();
const ageDate = new Date(diff);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
//Get Full Name:
//this is now inside the prototype
Person.prototype.getFullName = function(){
return `${this.name} ${this.lastName}`;
}
//Change Name:
//this is now inside the prototype
Person.prototype.getChangeName = function(NewName){
this.name = NewName;
}
const john = new Person("John", "Smith", "10-10-1988");
const maría = new Person("María", "Smith", "11-12-1978");
console.log(john.calculateAge());
console.log(maría.getFullName());
john.getChangeName("Juan");
console.log(john.getFullName());prints:
27
María Smith
Juan Smith
//Person constructor:
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
// Prototype method : greeting
Person.prototype.greeting = function(){
return `Hello ${this.firstName} ${this.lastName}`;
}
const personOne = new Person("Carla", "Pascual");
console.log(personOne.greeting());Returns:
Hello Carla Pascual
//Person constructor:
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
// Prototype method : greeting
Person.prototype.greeting = function(){
return `Hello ${this.firstName} ${this.lastName}`;
}
//Customer constructor:
function Customer (firstName, lastName, phone, membership){
//"call" allows us to call another function on the current context:
Person.call(this, firstName, lastName);
this.phone = phone;
this.membership = membership;
}
//Inherit the person prototype methods:
//without this greeting will not work for Customer
Customer.prototype = Object.create(Person.prototype);
//Make customer.prototype return Customer()
Customer.prototype.constructor = Customer;
//create a customer:
const customerOne = new Customer("Luis", "Ruiz", "6555655655", "Standard");
console.log(customerOne);
console.log(customerOne.greeting());Returns:
Customer {firstName: "Luis", lastName: "Ruiz", phone: "6555655655", membership: "Standard"}
Hello Luis Ruiz
Create prototypes
An alternative way create objects using this method
const personPrototypes = {
greeting: function(){
return `Hello ${this.firstName} ${this.lastName}!`
},
getsMarried: function(newLastName) {
this.lastName = newLastName;
}
}
const mary = Object.create(personPrototypes);
mary.firstName = "Mary";
mary.lastName = "Martín";
mary.age = 25;
console.log(mary);
console.log(mary.greeting());
mary.getsMarried("López");
console.log(mary.greeting());
//another posible sintax to use and create a new person:
const roberto = Object.create(personPrototypes, {
firstName : {value: "Roberto"},
lastName : {value: "Guerrero"},
age : {value: 35}
});
console.log(roberto);
console.log(roberto.greeting());Returns:
{firstName: "Mary", lastName: "Martín", age: 25}
Hello Mary Martín!
Hello Mary López!
{firstName: "Roberto", lastName: "Guerrero", age: 35}
Hello Roberto Guerrero!
convenience/sugar sintax
changes the way we write not the way it works bellow in the engine
class Person {
constructor(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.birthday = new Date(dob);
}
greeting(){
return `Hello ${this.firstName} ${this.lastName}!`;
}
calculateAge(){
const diff = Date.now() - this.birthday.getTime();
const ageDate = new Date(diff);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
getsMarried(newLastName) {
this.lastName = newLastName;
}
}
const mary = new Person("Mary", "Colt", "06-06-1955");
console.log(mary);
console.log(mary.greeting());
console.log(mary.calculateAge());
mary.getsMarried("Pop");
console.log(mary.greeting());Returns:
Person {firstName: "Mary", lastName: "Colt", birthday: Mon Jun 06 1955 00:00:00 GMT+0200 (Hora de verano romance)}
Hello Mary Colt!
62
Hello Mary Pop!
class Person {
constructor(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
greeting(){
return `Hello ${this.firstName} ${this.lastName}!`;
}
}
//customer the class we are creating
//Person the class we are extending, it will become a subclass of Person
class Customer extends Person {
constructor(firstName, lastName, phone, membership){
//calls the parent class constructor
super(firstName, lastName);
this.phone = phone;
this.membership = membership;
}
}
//create a customer:
const luis = new Customer("Luis", "Ruiz", "6555655655", "Standard");
console.log(luis);
console.log(luis.greeting());Returns:
Customer {firstName: "Luis", lastName: "Ruiz", phone: "6555655655", membership: "Standard"}
Hello Luis Ruiz!
It is an object
let val;
const today = new Date();
val = today;
console.log(val);Returns:
Today´s date.
If you want to declare any other date, just put it inside the () of new Date.
const importantDate = new Date("9-10-1981 12:30:00");
that will include the date especified date and time. and there is different ways to write it.
let val;
const today = new Date();
val = today.getMonth();
val = today.getDate();
val = today.getDay();
val = today.getFullYear();
val = today.getHours();
val = today.getMinutes();
val = today.getSeconds();
val = today.getMilliseconds();
val = today.getTime();
console.log(val);Months are cero based, so january it is 0.
Day is cero based, and start counting on sunday, so saturday is 6
To modify/maniulate dates can be done with "set":
let anniversarie = new Date("September 21 2006");
anniversarie.setMonth(1);
anniversarie.setDate(10);
anniversarie.setDay(5);
anniversarie.setFullYear(1986);
anniversarie.setHours(2);
anniversarie.setMinutes(45);
anniversarie.setSeconds(22);
anniversarie.setMilliseconds(22);
console.log(anniversarie);local storage
will stay until clear manually.
to see: browser dev. tools > application > local storage
add in the console:
example:
localStorage.setItem("name", "Marta");remove from storage:
localStorage.removeItem("name");get value from storage:
const name = localStorage.getItem("name");
console.log(name);clear local storage:
localStorage.clear();add task to local storage:
document.querySelector("form").addEventListener("submit", function(e){
//get the input value
const inputContent = document.getElementById("task").value;
//JSON & If statement neccesary to stored more than one task. otherwhise will only be stored one at the time.
let tasks;
if(localStorage.getItem("tasks") === null){
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem("tasks"));
}
task.push(inputContent);
//add the value to the local storage
localStorage.setItem("tasks", JSON.stringify(inputContent));
alert("Task saved!");
e.preventDefault();
});
//to print the list of tasks stored locally
const tasks = JSON.parse(localSotage.getItem("tasks"));
tasks.forEach(function(task){
console.log(tasks);
});sesion storage
will be clear when browser it is close.
to see: browser dev. tools > application > session storage
add in the console:
example:
sessionStorage.setItem("name", "Carlos");Stands for: Asynchronous JavaScript And XML
Consist on a set of web technologies that sends and recieve data asynchronously
It does that behind the scenes without having to reload the entire website-page, makes it more interactive and faster
XML has mostly being replace by JSON(javaScript Object Notation), even can be plain text
to work with async code:
- callbacks
- promises
- async/await
XHR
Stands for: XmlHttpRequest
It is a core technology in AJAX
Provided by the browser, js enviroment, all browser have this API
mostly deal wit JSON data
There is other methods to use to make request: - Fetch API (part of js)
- External libraries: Axios and others.
- jQuery (not recommended)
- Node HTTP
- And more.
[example XHR on plain text] (https://github.com/elena-in-code/XHR-with-text)
It is a javaScript Library.
$ is a function that points to jQuery.
It is a data structure
parent elements: one level above child elements: one level below sibling elements: in same level
CDN = Content Delivery Network
Selectors by tag name: $('div'); Selectors by class name: $('.container'); Selectors by id name: $('#footer');
DOM transversal methods to move around the Dom:
toggleClass() examples:
var featuredArticle;
featuredArticle = $('.featured');
featuredArticle.toggleClass('featured');toggleClass() & next()
var article2, article3;
article2 = $(".featured");
article2.toggleClass("featured");
article3 = article2.next();
article3.toggleClass("featured");first() & attr()
var navList;
navList = $('.nav-list li a').first();
navList.attr('href', '#1');css()
var articleItems;
articleItems = $('.article-item');
articleItems.css("font-size", "20px");val() & text()
$('#input').on('change', function() {
var val;
val = $('#input').val();
$(".articles").children("h1").text(val);
});remove()
var articleItems;
articleItems = $(".article-item");
articleItems.find("ul").remove();this add children to an element: append() : adds last child to the selected element prepend() : adds first child to the selected element
this add sibling to an element: insertBefore() : adds the siblings before the selected element insertAfter() : adds the siblings after the selected element
var family1, family2, bruce, madison, hunter;
family1 = $('#family1');
family2 = $('<div id="family2"> <h1>Family2</h1> </div>');
bruce = $('<div id="bruce"> <h2>Bruce</h2> </div>');
madison = $('<div id="madison"> <h3>Madison</h3> </div>');
hunter = $ ('<div id="hunter"> <h3>Hunter</h3> </div>');
family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madison);
hunter.insertAfter(madison);each()
$('p').each(function(){
var count = $(this).text().length;
$(this).append(" " + count);
});monitorEvents();
elements that are neccesary:
- target element to listen
- the event we are listening (kind of event)
- reaction to the event (function)
the target element calls the callback function when the event occurs
remove() & addClass()
$("#my-button").on("click", function(){
$("#my-button").remove();
$('body').addClass("success");
});event object: this object it is called when the function it is triggered usually reffer to as: e, evt, or event contains info about the event very useful tool.
example:
$( 'article' ).on( 'click', function( evt ) {
console.log( evt );
});Common Event Properties: altKey, bubbles, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, key, keyCode, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, toElement, view, which there is more.
example:
$( 'article' ).on( 'keypress', function( evt ) {
$( evt.target ).css( 'background', 'red' );
});event object can be used to prevent the default action:
$( '#myAnchor' ).on( 'click', function( evt ) {
evt.preventDefault();
console.log( 'You clicked a link!' );
});The Convenience Method
Instead of writing like the previus examples, after the target $( 'article' ).on( 'keypress', function( evt ),
the event that we are waiting for to triggers the function/reaction it becomes a method.
example:
$( "#other" ).click(function() {
$( "#target" ).keypress();
});Event Delegation what about when the target doesn't exist yet? Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. adding a third parameter between the event and the function
example:
$( '.container' ).on( 'click', 'article', function() { … });- Primitive & Refrence data types: difference between them
- Data Type Cohersion
- Ternary Operators
- block scope
- difference between var, let and const in scope
- Event bubbling and event delegation
- Hoisting
- Inline function expressions
- event delegation in javascript
- Prototypes
- this key word
- Reserve words for variables
- regular expressions
- MDN
- Udacity Google Challenge Scholarship: Front-End Web Dev 2017-2018
- Wikipedia
- learn.jquery.com
- JavaScript from the bigining by Brad Traversy
- Code Maven