#### JavaScript 101
# What is JavaScript
* Is the language of the browser
* Build very interactive user interfaces with frameworks like React
* Used in building very fast server side and full stack applications
* Used in mobile development (React Native, NativeScript, Ionic)
* Used in desktop application development (Electron JS)
# What am i gonna learn in this course:
* Variables & Data Types
* Arrays
* Object Literals
* Methods for strings, arrays, objects, etc
* Loops - for, while, for...of, forEach, map
* Conditionals (if, ternary & switch)
* Functions (normal & arrow)
* OOP (prototypes & classes)
* DOM Selection
* DOM manipulation
* Events
* Basic Form Validation
## Variables and how to use it
* // var, let, const
* we dont really wanna use "var" anymore because its globally scoped
* the difference betwen "let" and "const" is that you can re assign values with
"let"
1. let age=30
2. age=31
3. [Link](age);
you can reasign the value "age" like in "2. age=31"
if you do "cons" instead of "let", you wont be able to re assign the value.
1. const age=30
2. age=31
3. [Link](age)
an error message appears on your browser console.
* always use "const" unless you know you're gonna re assign the value, cause this
makes your code more robust and more secure.
* when you're refferencing a score, you should use "let", cause normally a score in
a game can vary, so you should write like:
1. let score;
2. score=100;
3. [Link](score);
your browser console will show the score value.
## Data Types
* primitive data types are directly assigned to memory, it's not a resource
(string, number, boolean, null, undefined, symbol)
string 1. const name = 'Jhon';
number 2. const age = 30;
number 3. const rating = 4.5;
boolean 4. const isCool = true;
null 5. const x = null;
undefined 6. const y = undefined;
undefined 7. let z;
now tipe the [Link] comand and specify with, ex:
8. [Link](typeof name);
# Strings
* // Concatenation
* [Link]('my name is name and i am age'); if you run this, it will transcribe
the same way on the console. So you should use the + sign to tag the "const", like
this:
2. [Link]('my name is ' + name + ' and i am ' + age);
* Now it will transcribe this way: " my name is Jhon and i am 30"
* // Template String
* uses backticks instead of quotes
* [Link](`my name is ${name} and i am ${age}`);
* you can also create a "const hello = `my name is ${name} and i am ${age}`;" and
then you just "[Link](hello)
* // properties and methods
* first, make a string "const s = 'Hello World!'". Now "[Link]([Link]);"
length is a propertie that defines how many characters the string have. The
information will appear in your browser's console log.
* "[Link](s. toUpperCase());" will convert all the alphabetic characters in a
string to uppercase.
* "[Link](s. substring(x, y));" will select a substring from a to y, ex:
1. const s = 'Hello World!';
2. [Link](s. subdtring(0, 5));
Only the word "Hello" will appear in your console. You can also tack on other
methods like:
2. [Link](s. substring(0, 5).toUpperCase());
## Arrays
* make a "const t = 'food, art, music, tec, nature';". Now you can use the line
"[Link]([Link](', '));" to make an array with the elements inside the string.
Notice that inside the parentheses, on quotes, we specified where we want the
string to be splited, in this case, "comma space(', ')".
* You can also write like this:
1. const numbers = new Array(1,2,3,4,5);
2. [Link](numbers);
* or this way:
1. const fruits = ['apples', 'oranges', 'pears'];
2. [Link](fruits);
[0] apples
[1] oranges
[2] pears
3. [Link](fruits[1]); in brackets you can specify the element you wanna
get, in this case, [1]=oranges.
* "fruits[3] = 'grapes'" with this comand you add another element, grapes. Although
its best to do "[Link]('mangos');" this way you're actually pushing the
element to the end of the array. If you wanna do the opposite, you can do
"[Link]('strawberries'); to put the element in the beginning.
* "[Link]();" pops the last one off the array
* if you want to chech if something is an Array, do it like this:
"[Link]([Link](fruits));".
* if you wanna get the index of a certain value you do this way:
"[Link]([Link]('oranges'));"
## Object Literals
* An object literal is the notation you use to define an object - which in
javascript is always in the form of a name-value pair surrounded by the curly
brackets.
1. const person = {
2. firstName: 'Jhon',
3. lastName: 'Doe',
4. age: 30,
5. hobbies: ['music', 'movies', 'sports'],
6. adress: {
7. street: '50 main st',
8. city: 'Boston',
9. state: 'MA'
10. }
11. }
* Now you have methods to adress the thing you want.
* First you can adress the thing directly like that:
13. [Link]([Link][1])
with that you successfully adressed 'movies'.
14. [Link]([Link])
with that you successfully adressed 'Boston'.
* You can also create a variable to make your life easier:
15. const {firstName, lastName, adress: { city}} = person;
now you just tipe "[Link](city)" and you get 'Boston'.
* If you want to add something to the object, you can do this way:
16. [Link] = 'jhon@[Link]'
# Arrays of Objects
1. const todos = [
2. {
3. id: 1,
4. text: 'Take out trash',
5. isCompleted: true,
6. },
7. {
8. id: 2,
9. text: 'Meeting with boss',
10. isCompleted: true,
11. },
12. {
13. id: 3,
14. text: 'Desntist appt',
15. isCompleted: false,
16. },
17. ];
18.
19. [Link](todos);
20. [Link](todos[1].text)
21. const todoJSON = [Link](todos);
22. [Link](todoJSON);
* Lines 1 - 17 describe an array of objects, a "to do" list.
* Line 20 is a way of picking up the text "Meeting eith boss"
* Line 21 is a way of converting the array into JSON format.
JSON format:
[
{
"id": 1,
"text": "Take out trash",
"isCompleted": true
},
{
"id": 2,
"text": "Meeting with boss",
"isCompleted": true
},
{
"id": 3,
"text": "Desntist appt",
"isCompleted": false
}
]
## Loops
# For
* The loop "for" holds three parameters:
* The iterator: "i = 0"
* The condition: "i < 10"
* The increment: "i++" ++ is the increment operator in JavaScript, it adds 1 to the
existing value.
* With those parameters, starting from "i=0" we add 1 every time we loop the
operation, getting all the values thar meet the conditions. That happens beacause
the operation is gonna run until the condition "i < 10" is true.
1. for(let i = 0; i < 10; i++)
2. [Link](i); to see the results
Results: "0, 1, 2, 3, 4, 5, 6, 7, 8, 9"
# While
* The difference here is that we set the variable outside the loop
1. let i = 0;
2. while(1 < 10) {
3. [Link](i);
4. i++;
5. }
* The 4th line is very important, cause if you don't add the increment (i++), the
operation will be a never ending loop, cause the condition(1 < 10) will never be
met.
## Loop trough arrays
# forEach
* This function allows you to get elements trough all the string, without having to
specify the adress.
* The "(function(p))" comand creates a parameter referring the array you want, in
this case, the 'todos' array.
* When you input "[Link]([Link])" the operation will loop trough the array and
collect every "text" element.
1. [Link](function(p) {
2. [Link]([Link]);
3. });
# map
* That is another way of doing the same thing, but in this case you're gonna creat
a variable for the array and operate a return function for the element that you
want.
* "[Link](tText)" will start the operation inside the "const tText", in other
words, the operation will return the "text" to you.
1. const tText = [Link](function(p) {
2. return [Link];
3. });
4.
5. [Link](tText);
# filter
* for thi example, we are gonna use "filter" to select every boolean that is
'true'(lines 1 and 2), and after we get that out of the way, we are gonna pull the
text from that using "map"(lines 3 and 4).
* On the 7th line you just ask for the variable, and the operation will run.
1. const tCompleted = [Link](function(p) {
2. return [Link] === true
3. }).map(function(p) {
4. return [Link]
5. })
6.
7. [Link](tCompleted);
// Conditionals
# if, else if, else
* It's important to know that "===" also compares data type, in other words, if
"const c" were a string, the operation wouldn't run. If you don't want the
operation to compare data types, use "==". "!==" means "different".
1. const g = '10'
2.
3. if(g === 10) {
4. [Link]('g is 10'); this line wouldn't run
5. } else if(g == 10) {
6. [Link]('g is kinda 10'); this line would run
7. }
* Now imagine your'e playing a rpg game and you want to buy a potion that costs 10
coins. If you have 10 or more coins, you can buy, but if you don't, you can't.
* Conditionals allow you to replicate this same scenario.
* First, define how many coins you have, in this case, lets say we have 20
coins(c), so "const c = 20"
* Now we set the conditions and their respective results:
1. const c = 10
2.
3. if(c === 10) {
4. [Link]('You got it')
5. } else if(c > 10) {
6. [Link]('yooo! calm down kiddo, just 10 coins will do')
7. } else {
8. [Link]('you broke bitch? cant do much for you')
9. }
* Now change the value of the "const c" to less than 10 and exactly 10 so you can
see how you get different responses for each condition.
* Now lets say that you wanna meet the thives guild leader, and you need to bring
exactly 10 coins, and you also need to be wearing a fedora. for the coins, we
already have "const c", now we need to create a new variable to represent the
fedora, so "const f" where f is a boolean.
* When there are multiple conditions to be met, we are going to need to use "&&"
and "||". "&&" represents "and", and "||" represents "or".
* In this case, we need to meet all the conditions in order to meet the thieves
guild leader.
* The 4th and 5th lines show what happens if we are not wearing the fedora and the
coin is not equal to 10
* The 6th and 7th lines show what happens if we meet both conditions.
* The 8th and 9th lines show what happens when we have the money but no the fedora.
* The 10th and 11th lines show what happens in any other occasion, in this case,
when we are wearing the fedora but dont have the money
1. const c = 10;
2. const f = true;
3.
4. if(c !== 10 && f === false) {
5. [Link]('i think you should go away, friend');
6. } else if(c === 10 && f === true) {
7. [Link]('you can pass')
8. } else if(c === 10 && f === false) {
9. [Link]('i think youre missing something sir')
10.} else {
11. [Link]('you bad at math?')
12.}
