Web Dev Week 3: JavaScript
Tags: webdev, javascript, beginners, productivity
Published: 2020-05-07 19:21:07

####This week was JavaScript from Colt Steele The Web Developer Bootcamp.

###Introduction to JavaScript 
	-JavaScript Console
	-Primitives
	-Variables 
	-Null and Undefined
	-Useful Built-In Methods
###JavaScript Basics: Control Flow 
	-Boolean Logic
	-Logical Operators
	-Conditionals
	-Introduction to Loops
	-While Loops 
	-Intro to For Loops
###JavaScript Basics: Functions 
	-Introduction to Functions
	-Arguments
	-The Return Keyword
###JavaScript Basics: Arrays 
	-Introduction to Arrays
	-Array Methods
	-Array Iteration
###JavaScript Basics: Objects 
	-Introduction to Objects
	-Comparing Objects and Arrays
        -Nested Objects and Arrays 
	-Adding Methods to Objects

        
        
###JavaScript Console
The JavaScript Developer console is where we can write JavaScript code in the google browser. The Javascript console is primarily used to interact with HTML/CSS as well as test out snippets of code and debug issues. The console can also be used to play around with possible features that may be used in the actual code files. 

###Primitives
There are five primitive datatypes which are 
         -numbers 4/9.3/-10
         -strings "Hello World"
         -booleans true/fale
         -null and undefined.

###Variables 
JavaScript variables are containers that can have names to hold primitive data types that can be restored later. 
This is a variable named cat that hold a string of data called cat. 
      var cat = "cat"  

###Null and Undefined

Undefined variables are declared but never initialized and look like 
var name; var age. Null variables are explicitly nothing, they are empty variables and looks like var currentPlayer = "Rob" currentPlayer = null 


###Useful Built-In Methods
JavaScript has built-in methods the most commonly used are 
       alert() - is a pop-up alert box that the end user can visibly see. 
       prompt() - is an input dialog box that end users can see and input 
       data into. 
       console.log(), is only visible to developers in the chrome browser 
       as a way to pass data. 

It is best practice to put JavaScript file in a separate file and then link it into the HTML file. Script src=file.js and is recommended to be put at the bottom of the body tag, so that the web page can load first and then the script will load. 



###Boolean Logic
JavaScript like all other programming languages uses boolean logic. 
Boolean logic is using either true or false statements to control the flow of how the program will decide what to do. 

###Logical Operators: AND/OR/NOT 
&& is AND which looks like [x < 10 && x ! == 5]
|| is OR which looks like [y > 9 || x === 5]
! is NOT which looks like !(x === y) 


#####Truthy and Falsy Values 
Values that may not really be true or false are still registered as true or false in a boolean context. 


###Conditionals
JavaScript uses conditional statements such as If/Else If/Else to create the boolean logic. 

Some of the logic may be represented as: 
This would be if you were trying to gain access to a bar/club. 
    If you are younger than 18 then you cannot enter 
    If you are between 18 and 21 you can enter but can't drink
    Otherwise you can drink and enter. 

Within this example, age is the variable. 


###Introduction to Loops
JavaScript uses loops to repeat a process for x amount of times necessary. There are while loops and for loops 

###While Loops 

while loops are used when you are not sure how many times something needed to be repeated. 
```javascript
        var count = 1 
        while (count < 6) 
        console.log("count is: " + count)
        count++
```
###Intro to For Loops
for loops are used when you do know how many times a process needs to be repeated. 
```javascript
          for(var count = 0; count < 6; count++) 
          console.log(count)
```
for loops are much cleaner syntactic way to loop over items than a while loop. 

###Introduction to Functions
JavaScript uses functions to create reusable code without having to repeat code. 
```javascript
      function doSomething() 
      console.log("Hello World")
```
Every time doSomething is called then Hello World will be printed to the console. 



###Arguments
Functions can take inputs as arguments 
```javascript
    function sqaure(num) 
    console.log(num * num)
    square(5) 
```
functions can take multiple arguments 
```javascript
    function area (length, width) 
    console.log(length * width) 
    area (9,2) 
```


###The Return Keyword

The return keyword can replace the console.log statement to send data back as an output. 

###Introduction to Arrays
JavaScript first of many data structures is Arrays. 

Arrays are designed to hold large amounts of data. 
var friends = ["Rob","Bill","Sara"]; 

Arrays are indexed and start at 0. 
Rob = 0
Bill = 1
Sara = 2

Indexes are used to get data out of Arrays. 
```javascript
var friends = ["Rob","Bill","Sara"]; 
console.log(friends[1]) = Sara 
```
###Array Methods
Arrays have their own built-in methods 
push and pop 
shift and unshift 
indexOf 
Slice 

push is used to add to the end of an array. 
var colors = ["Red", "Blue"]
colors.push("green")
=> ["Red","Blue","Green"]

pop is used to remove the last item in an array. 
var colors = ["Red", "Blue", "Green"]
colors.pop()
=>["Red", "Blue"] 

Think of pop as popping off! 

unshift is used to add to the front of the array. 
```javascript
    var colors = ["Red, "Blue"] 
    colors.unshift("pink")
    ["Pink","Red, "Blue"]
```
shift is used to remove the first item in an array. 
    var colors = ["Red", "Blue"] 
    colors.shift() 
    => ["Blue"] 

IndexOf is used to find the index of an item in an array. 
```javascript
    var friends = ["Bob", "Sara", "Rob"]
    friends.indexOf("sara")
```
slice is used to copy parts of an array 
```javascript
    var fruits = ["Banana", "Strawberry", "Blueberry"]
    var food = fruits.slice(1,3) 
```
###Array Iteration

Arrays use a for loop to iterate over them. 
To use a for loop in an array, it is important to use the length property. 
```javascript
var colors = ["Red","Blue","Green"]
for (var i = 0; i < colors.length; i++) 
console.log(colors[i])
```
Arrays also use a forEach loop for iteration. 
```javascript
arr.forEach(someFunction)

var colors = ["Red","Blue","Green"]
colors.forEach(function (color)
console.log(color) 
```

###Introduction to Objects

JavaScript Object Notation (JSON) / JavaScript Objects is another data structure to hold a diverse set of data. 
```javascript
var person = {
name: "Sara",
age: 22,
city: "New York City"
}
```
The data is in a key-value pair structure. 


###Comparing Objects and Arrays
Objects and arrays both use key-value pairs, but arrays make the keys numbers only that are always in order, while in objects the key can be any data type. Arrays have order and a list. Objects do not have order and no list. 



###Nested Objects and Arrays 
Arrays and objects work together to create complex data structures. 
It is common to have an array of objects nested within each-other. 
```javascript
         var post = [
          {
              title: "Cats are cute", 
              author: "Cat in the hat"
           }

           ]
```
###Adding Methods to Objects
To access methods in objects dot notation is used. cat.delete(), 
the method is delete() while cat is the object. 








####My introduction to JavaScript was very detailed and I know that I have only scratched the surface for what is to come. I am trying to build a solid foundation from the ground up as I am aware that programming can become very complex very quickly. I am going to take my time and review some of these concepts over the coming days.