Web Dev Week 3: JavaScript

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.

        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.

          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.

      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

    function sqaure(num) 
    console.log(num * num)
    square(5) 

functions can take multiple arguments

    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.

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.

    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.

    var friends = ["Bob", "Sara", "Rob"]
    friends.indexOf("sara")

slice is used to copy parts of an array

    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.

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.

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.

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.

         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.