Păvă | Alexandru Păvăloi
Creative
Learning
Team-work
If you want to go fast, go alone. If you want to go far, go together.
The power is in you!
Responsive
HTML
CSS
Performance
JavaScript
Testing
WantDo's
NoDo's
Tim Berners-Lee
To think about what app would you like to implement
Pictures from Unsplash ❤
First instruction...
Practical Project #0
Practice #1
Practice #2
Practice #3
Practice #4
App Idea
To code: in the Twitter mock, if the credentials are missing and the person click's Login, show an alert error!
Estimated time: 20 mins
To research: how to check if an input is empty
Let's remember...
numbers
booleans
undefined
null
IF instruction
// Decision instruction
if (condition) {
// instructions
} else {
// other instructions
}
Objects
// We can put anything inside object.
// Even other objects
var myFamily = {
numberOfPeople: 4,
mother: {
name: 'Cecilia',
age: 50,
hobbies: ['television'],
eat: function() {
console.log('wild mother is eating');
}
},
grandmother: {
//...
}
}
// JavaScript already has some built-in objects
// for the most common usecases
// Date
var now = new Date();
console.log(now.getHours());
// Array
var arr = new Array(10);
// String
// Number
// RegExp
Prototype
Chain
Loop instructions
// Looping instructions
var arr = [11, 22, 33];
// FOR
for(var i = 0; i< arr.length; i++ ){
console.log('The current element is '+ arr[i] + '!');
}
// WHILE
var i = 0;
while(i<arr.length) {
console.log('The current element using while is ' + arr[i] + '!');
i++;
}
Strings & Arrays
var name = "Pava";
var hobbies = ['coding', 'biking', 'traveling'];
// Accessing elements
console.log("My name's first letter is " + name[0] + "!!!");
console.log("My main hobby is " + hobbies[0] + "!");
// Length
console.log("My name is " + name.length + " letters long.");
console.log("I've got around " + hobbies.length + " hobbies!");
Array'ception
// Array elements can be any data type
var randomStuff = [22, 'ceva', true,
['biking', 'cooking'], undefined, null];
String exercises
// Exercise #0: replace
// Input: a string containing 'Morning'
// Output: the string obtained by replacing
// 'Morning' with 'Night'
replace("It's Morning! Hoooray!"); // It's Night! Hoooray!
// Exercise #1: week day
// Input: a string
// Output: true/false weather that string is a day of the week
isDay('monday'); //true
isDay('sunflower'); //false
// Exercise #2: search bar
// Input: a string & an array of names
// Output: all names that contain the string
search('alex',
['balex', 'alexandru', 'bob']); // ['balex', 'alexandru']
// Exercise #3: name parser
// Input: full name separated by a space
// Output: object with 2 properties 'first' and 'last' in which
// we put the first and last part of the name after splitting
splitName('Alex Pavaloi'); // {first: 'Alex', last: 'Pavaloi'}
// Exercise #4: CNP parser
// Input: CNP string
// Output: year of birth
parse(1940529112233); // 94
Array exercises
// Exercise #0: filter
// Input: an array of people { name , isFriend}
// Output: an array of just my friends
filterFriends( [
{name: 'Dragos', isFriend: true},
{name: 'Dan', isFriend: false},
{name: 'Hendra', isFriend: true}
] );
/* [
{name: 'Dragos', isFriend: true},
{name: 'Hendra', isFriend: true}]
*/
// Exercise #1: max
// Input: an array of numbers
// Output: max value from the array
max([1, 11, -2, -14]); //11
// Exercise #2: add to beginning
// Input: an array of numbers & a number
// Output: an array obtained by inserting that number
// to the beginning of the array
insert([3, 2, 11, -5], 4); // [4, 3, 2, 11, -5];
// Exercise #3: reverse an array
// Input: an array of numbers
// Output: the reverse of the above array
reverse([1,11,5]); // [5, 11, 1]
// Exercise #4: sorting an array
// Input: an array of numbers
// Output: the numbers sorted in ascending order
sort([22, 11, 33]); // 11, 22, 33
Object exercises
// Exercise #0: object sort
// Input: array of people
// Output: people sorted by birthDate
buildCar('Bibi', 'sport');
/*
{
name: 'Bibi',
engine: 'V6',
horsePower: 500,
seats: 2,
brakeLevel: 'medium'
*/
// Exercise #1: car builder
// Input: name, type(sport || family)
// Output: car object depending on type
// Extra details
// Sport will add to the car a V6 engine and 500 HorsePower
// Family will add extra seats and better brakes
// The resulted car must have all of the following properties
// "name", "engine", "horsepower", "seats", "brakeLevel"
buildCar('Bibi', 'sport');
/*
{
name: 'Bibi',
engine: 'V6',
horsePower: 500,
seats: 2,
brakeLevel: 'medium'
*/
// Exercise #2: property getter
// Input: object, string containing one '.'
// Output: the property found at that path
getProp(
{
name: 'Amazon',
ceo: {
name: 'Jeff Bezos',
age: 49
}
}, 'ceo.name'); // Jeff Bezos
// Exercise #3: modify object
// Input: person object, amount of money
// Output: person object with an account balance to
// which we add those money
addFunds({
name: 'Bob',
age: 22,
money: 930,
occupation: null,
moviesWatched: ['Harry Potter', 'Buggs Bunny']
},500)
/*
{
name: 'Bob',
age: 22,
money: 980,
occupation: null,
moviesWatched: ['Harry Potter', 'Buggs Bunny']
}
*/
Function exercises
// Exercise #1: create a double function
// Input: a number
// Output: the number multiplied by 2
double(2); 4
// Exercise #2: func'cenption
// Input: a number & a function
// Output: the result of calling the function on the number
funcCeption(2, double); // 4
// Exercise #3: generic sort
// Input: array or unlimited numbers
// Output: the sum of the elements in
// the array or passed as parameters
genericSum( [ 1, 2, 3 ] ); // 6
genericSum( 1, 2, 3 ); // 6
// Exercise #4: func'return
// Input: number and a function
// Output: a function that when called return the value
// of calling the function on the number
var newF = funcReturn(2, double);
newF(); // 4
❤ but first, the Window! ❤
Getting our hands on DOM
Elements
// By "id"
document.getElementById('trafic-light');
// By "class"
document.getElementsByClassName('container');
// Kinda like in CSS
document.querySelector('#trafic-light');
Modifying the DOM
Everything* you can do with HTML, you can do with JavaScript too
🚀🚀🚀
JavaScript + Events= ❤
// FINALLY, A CLICK EVENT
var button = document.getElementById('myButton');
button.addEventListener('click', function (e) {
console.log('click');
});
❤ Homework ❤
do not disturb...
responsive layout scroll event multi-thread vs async callbacks &debouncer
Callbacks - quick recap ❤
PROMISES to the rescue
❤ I PROMISE to exercise ❤
GET
POST
PUT
DELETE
PATCH
200's
300's
400's
100's
500's