Intro

to

web Development

about me

Păvă | Alexandru Păvăloi

about you

 programmer's life

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!

 front-end dev's life

Responsive

HTML

CSS

Performance

JavaScript

Testing

Community

curriculum

WantDo's
NoDo's
  • fundamentals of Web
  • fundamentals of FE Development
  • algorithms & data structures
  • HTML, CSS & JavaScript
  • build a full-fledged client App
  • not much frameworks
  • not advanced CSS
  • no server side
  • no Database

THE INTERNET

internet vs world wide web

Tim Berners-Lee

client            server

  • Java
  • PHP
  • JavaScript
  • etc...

protocols

http/https vs ftp

state of front end

HTML

css

javascript

until tomorrow

To think about what app would you like to implement
Pictures from Unsplash

Intro to web

day 2

Morning

Shots

Anything else...⁉

Intro to web

day 3

Morning

Shots

programming

why not straight to JS?

Algorithm

data structures

pseudocode

complexity

programming

language

history of js

people to follow

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

 

 

Intro to web

day 4

Let's remember...
  • numbers
  • booleans
  • undefined
  • null

overnight q&a

IF instruction
// Decision instruction

if (condition) {
    // instructions
} else {
    // other instructions
}

Intro to web

day 5

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];

exercises

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

break...😊

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

break...😊

the DOM...

 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

congratulations!😊

Week 2

Intro to web

day 6

weekend exercises 💥

final app demo

architecture

team split

do not disturb...

Intro to web

day 7

responsive layout
scroll event
multi-thread vs async

callbacks &debouncer

Intro to web

day 8

Callbacks - quick recap 
PROMISES to the rescue
I PROMISE to exercise 

client            server

  • Java
  • PHP
  • JavaScript
  • etc...

http verbs

GET
POST
PUT
DELETE
PATCH

status codes

200's
300's
400's
100's
500's

network inspect

xhr   vs   fetch

what is an api?

chuck generator