Web Developer Bootcamp
Bootstrap 4
Flexbox
We can use flexbox for responsive design by declaring flex-md-row (Topic 100. 6 min )
Project_Museum of Candy
We can use the class "order" with the different sizes to make things show up when we need
them to change them order. order-1 order-md-1
Javascript
Boolean:
A Boolean value can have two different options. True or False
We hace comparison Operators like this ones on Javascript:
Screenshot_20_03_26_15h:38m.png
== is used when we want to compare two different kinds of values
=== is used when we want to compare different kinds of value
We have different cases here that are... interesting:
Screenshot_20_03_26_15h:42m.png
Logical Operators:
We have different logical operators that helps us to merge different boolean expressions
Screenshot_20_03_26_15h:44m.png
Loops:
We always want to keep our code as DRY as possible DRY: Don't repeat yourself. It saves us
a lot of time and makes our code cleaner.
While Loop: It's very similar to an if statement except it repeats a given code block instead of just
running it once.
while(condition) {
// Run some Code
}
var count = 1;
while(count < 6) {
console.log("count is: " + count);
count++;
}
//Count is: 1
//Count is: 2
//Count is: 3
//Count is: 4
//Count is: 5
var str = "hello";
var count = 0;
while(count < str.length) {
console.log(str[count]);
count ++
}
//"h"
//"e"
//"l"
//"l"
//"o"
Excercise
// First: Print all numbers between -10 and 19
var num = -10;
while(num < 20) {
console.log(num);
num++;
}
// Second Print al even numbers between 10 and 40
while(num <= 40) {
if(num % 2 === 0) {
console.log(num);
}
num++;
}
// Third: Print all odd numbers between 300 and 33
var num = 300;
while(num <= 333) {
if(num % 2 !== 0) {
console.log(num);
}
num++;
}
//Fourth: Print all numbers divisible by 5 and 3 beetween 5 and 50
var num = 5;
while(num <= 50) {
if(num % 5 === 0 && num % 3 === 0) {
console.log(num);
}
num++;
}
for(init; condition; step) {
// run some code
}
FUNCTIONS:
Functions let us wrap bits of code up into Reusable packages. They are one of the building
blocks of JS
First, here's how we declare a function:
function doSomething() {
console.log("HELLO WORLD");
}
// Then we call it
doSomething()
doSomething()
doSomething()
doSomething()
ARGUMENTS:
We can write a function with an argument that takes a value. For example
function square(num) {
console.log(num * num);
}
square(10); // 100
square(3); // 9
square(4); // 16
RETURN:
Often we want a function tosend bacl an output value
Screenshot_20_03_28_16h:45m.png
function square(x) {
console.log(x*x);
}
square(4)
// It returns 16
function square2(x) {
return x*x;
}
We use the return keyword to output a value from a function
function capitalize(str) {
return str.chartAt(0).toUpperCase() + str.slice(1);
}
var city = "paris";
var capital = capitalize(city);
Function Declaration vs. Function Expression
function capitalize(str) {
return str.chartAt(0).toUpperCase() + str.slice(1);
}
// Function expression
var capitalize = function(str) {
return str.chartAt(0).toUpperCase() + str.slice(1);
}
Arrays:
Methods:
We use push to add to the end of an array
We use pop to remove the last item in an array
We use unshift to add to the front of an array
We use shift to remove the first item in an array
We use indexOf to find the item of an intem in an array
We use slice to copy different parts of an array
Javascript provides an easy built-in way of iterating over an array: ForEach
var colors = ["red", "orange", "yellow", "green"];
colors.forEach(function(color){
console.log(color);
});
Objects:
var person = {
name: "Cindy",
age: 32,
city: "Missoula"
};
The objects store data in key-value pairs
Note: Unlike arrays, objects have no order
You have two choices: bracket and dot notation.
console.log(person["name"]);
console.log(person.name);
Note: You can't use the dot notation if the property begins with a number
person["age"] += 1;
person.city = "London";
We use this functions to add or change the values in the object
Movie Data Base Exercise
var movies = [
{title:"In Bruges", hasWatched: true, rating: 5},
{title:"Frozen", hasWatched: false, rating: 4.5}
]
movies.forEach(function(movie){
var result = "You have ";
if(movie.hasWatched) {
result += "watched ";
} else{
result += "not seen ";
}
result += "\"" + movie.title + "\" ";
result += "rating: " + movie.rating;
console.log(result);
})
