Week 4, CSS & JavaScript
Intermediate CSS and Intro JavaScript
- HTML is not great at putting one element next to another.
- only block & inline elements to place one another.
- Until flexbox, float property in CSS was great for very specific things but not for layout.
Flexbox provides a more efficient and flexible way to layout HTML elements. Contains Flex-container and flex-items.
The main idea behind the Flexbox layout is to leverage a container element and give it the ability to alter the width or height to fit within the available space. (Very useful when designing for different mobile devices with different screen sizes.)
The flex container can expand or shrink to fill the available space.
Flexbox is better for small-scale, linear layouts.
- Flexbox does not use float.
Intro to JavaScript
Variables hold information = temporary storage locker can store a number, some text, or a value like true or false.
A variable declaration starts with the keyword let followed by the variable name you choose
Ex.
let username;
(let is the keyword, and username is the variable name)
Assign a value to a variable with an equal sign.
It’s not equal, it is called the assignment operator.
let username = “Eva”;
“Eva” is the value that we assigned to the variable username.
let username;
username = “Eva”;
Data Types
Data types are the types of values we can assign to a variable.
- numbers
- strings
- booleans
- arrays
- objects…
For example:
object
> let x = {x: “100”, y: “99”};array
> let x = [“100”, “99”];string
>let x = “100”;number
>let x = 100;
Mathematical Operators:
JS has the ability to add, subtract, divide, multiply and other functions…
let firstName = “Eva”;
let lastName = “Kim”;
let fullName = firstName + lastName;
console.log(fullName);
Console Output: Eva Kim
Comparison Operators:
Use these operators to evaluate a statement by comparing one value
result: boolean true or false.
Logical Operators:
Allow to combine two or more comparison operators into one statement
In Logical expression, if the first condition can provide enough information to get the answer, then there is no need to evaluate the second condition.
Array
Array is a collection of values (items) that may or may not have a specific order; like a linear collection of items.
Each value is automatically assigned a number called an index.
Array indexes always begin at the number 0 (“zero-indexed”)
Loops
To perform similar instructions in code many times.
For example:
let color = ["red", "orange", "yellow", "green"];
for (let i = 0; i < color.length; i++) {
text += "This color is" + color[i] + "<br>";
}
Loops:
JS supports different kinds of loops.
for: loops through a block of code a number of times
while: loops through a block of code while a specified condition is true
do/while : same;
You initialize the counter by writing: let i = 0;
I<5 loop should continue to run until the counter “i” reaches this specified number.
i++ updates the counter. “i” will continually increase until that condition returns false.
If you know how many times you need to run through the problem, for loops are good to use.
While Loop
The while loop gives you a little more flexibility with when it will stop.
The loop will continue to run as long as the condition inside the parentheses returns “true”. In the example, the counter is part of the code block i++, without which the code will be running an infinite loop (it won’t stop).
So be very careful! infinite loop may never stop!
Function
Functions are at the center of the JavaScript universe.
They are reusable bits of code that execute the commands we program.
Once written, we can use it in other areas of code.
When writing a function name, be as descriptive and brief as possible.
function sumTwo(numOne, numTwo) {
return numOne + numTwo;
}
- function encapsulates our task.
- when stored, we can call it when we need it.
