Intro JS

Introduction

Hi my name is Bedford and I Javascript.

I thank you all for coming today. I also would like to thank all the people I learned from along the way.

Let's go around the room and state your name, a nickname, and what you hope to build.

email: bedford.williamson@generalassemb.ly
Site Files

Expectations

Javascript is a really fun language with a few gotchas. Today we will take a bird's-eye view of the spec and occasionally swoop in for a deep dive. Some of the material may be difficult or easy depending on your programming background. I will encourage you to collaborate with each other. I believe that pair programming is really positive for growth. Try your best to make this a challenging and safe learning space. I will be passing around a marker to each one of you. If you have the marker you must contribute with a statement, a question or ask for help. If you never programmed in Javascript or want to be guided through getting started, this will be helpful. If your are using all the newest and baddest,Bower, NPM, Angular, React, Node then this class will be less of what your looking for.

Objectives:

Learn Javascript History
Learn Javascript Fundamentals
Learn DOM Events
Learn JQuery
Learn Problem Solving & Best Practices
Learn Helpful Resources

Javascript History

Javascript is a light-weight dynamically typed programming language. Javascript was invented in 1995 by Brendan Eich. It has since gone on to become one of the three pillars in web development. HTML, CSS and Javascript comprise the three pillars of the web. You can do almost anything with those three languages.

Today we will be working in ES5 or ECMASCRIPT 5th edition. Javascript is now maintained by the TC39 technical working group and ECMA(European Computer Manufacturers Association) Governing Body. ES6 also known as ES2015 is the latest release but not fully implemented amongst browsers.

Javascript Getting Started

Helpful Terms & Symbols

We will use a lot of different terminologies and symbols during this course. Here are a few to get started.

( ) parentheses or grouping operator - we use these to call functions, to put in arguments and for precedence
( open parenthesis.
) closing parenthesis.
{ } curly braces - we use these to show blocks of code
{ open curly brace
} closing curly brace
[ ] brackets - we use these for arrays, accessing object properties, and bracket notation
[ open bracket
] closed bracket
; semi colon - we use this to end statements or lines of code
< > angle brackets - we use these for html tags, greater than, less than
< less than
> greater than
- hyphen
hyphenated-case: we use this for css classes and html ids
camelCase we use this to write variable names in javascript
PascalCase we use in multi named object constructors and error types
snake_case we use this to write variable names in databases
&& double ampersand means AND
|| double pipe means OR
! bang means NOT
taco I use this term to indicate that the text doesn't matter, it could be anything like "taco"
vanilla javascript term means standard js not plugins or frameworks
browser we use this to view the internet with programs such as Chrome, Safari, Firefox, IE
style sheets term means the file for your css(cascading style sheets) which is the styling of your site
text editor term means the program that you will write code into, SublimeText, Brackets, Atom, Webstorm
List of Punctuations

Chrome Developer Tools

via GIPHY

We will use the Chrome Developer Tool or similar. Open your browser and then Javascript Console.
Open Javascript Console.
Short Cut: option + command + j

Type 45 + 10;

Press enter. You will see the result is 55.

You might have noticed that pressing enter/return ran your code and displayed the result. What do you do if you want to skip a line to add more code without submitting?

Go to the next line in Javascript Console without running code.
Short Cut: shift + enter

Type and try it out:

                                           
                                               var num1 = 45;
                                               var num2 = 20;
                                               num1 + num2;  // press enter and result 65

Now let's try another way. We will now use code snippets to run js. With the snippets we can save many little programs of code without worrying about skipping lines or typos.

Look at your js console tabs and click Sources.
Then look at the left panel that just opened and select Snippets
Right Click to see options then select new
Enter a name to save the file. example1
Now type in the the Snippet Sandbox.

                                              
                                                  var num1 = 50;

                                                  var num2 = 50;

                                                  num1 + num2;  // press command + enter and result 100

Look at the snippet tabs above the Snippet Sandbox, you should see the name of the snippet you created with a * star next to it. That star means your snippet is not saved.
Press command + s to save your snippet.
Press command + enter from inside the Snippet Sandbox to run. OR press the Play button on the right panel.
Notice that the current program just ran and is still active in the console. Go ahead and type num1 in console and press enter You will see that num1 still exist.
To clean things up, use short cut key to refresh page.
Refresh Page Short Cut:
command + r

Go to the next line in Javascript Console without running code.
Short Cut: shift + enter

Type and try it out:

                                           
                                               var num1 = 45;
                                               var num2 = 20;
                                               num1 + num2;  // press enter and result 65

Now let's try another way. We will now use code snippets to run js. With the snippets we can save many little programs of code without worrying about skipping lines or typos.

Look at your js console tabs and click Sources.
Then look at the left panel that just opened and select Snippets
Right Click to see options then select new
Enter a name to save the file. example1
Now type in the the Snippet Sandbox.

                                    
                                        var num1 = 50;

                                        var num2 = 50;

                                        num1 + num2;  // press command + enter and result 100

Look at the snippet tabs above the Snippet Sandbox, you should see the name of the snippet you created with a * star next to it. That star means your snippet is not saved.
Press command + s to save your snippet.
Press command + enter from inside the Snippet Sandbox to run. OR press the Play button on the right panel.
Notice that the current program just ran and is still active in the console. Go ahead and type num1 in console and press enter You will see that num1 still exist.
To clean things up, use short cut key to refresh page.
Refresh Page Short Cut:
command + r

Console.log

console.log is our friend. We will use this simple command again and again. console.log is the what we type to print to the standard output which is our console. console is an object and log is a method. We call this by putting variables into the parentheses ( ) of log. More on this later. For now just follow along.

Let's take a look at the basic syntax and grammar.

Comments

You will see a lot of this // in the code examples. It simply means leaving a comment.

JS is case-sensitive

This mean you can't mix and match upper-case and lower-case

                                    
                                        var num = 5;
                                        var Num = 6;

                                        console.log(num); // 5
                                        console.log(Num); // 6

Identifiers

When declaring variable names you must follow proper naming conventions. Variables are the symbolic identifier for your values in your scripts.

Can not be a reserved word.Example (new, var, default, function)
Must begin with a letter, underscore , or dollar sign $ and can be followed by numbers (0,1,2,3 ...)
reserve words blog post

Use var to declare variables.

                                
                                    var name = "Bedford";

A few things to note about variables.

When writing our programs we will declare all variables at the top of the page for readability.

Pop-Quiz: What Identifiers are valid?

A:
var 22people = 22;
B:
var _people = 22;
C:
var newPeople = 22;
D:
var new = "people";
E:
var $people = 22;

See the Pen pop quiz by goodbedford (@goodbedford) on CodePen.

Brief Detour:

See the Pen todo-part3 by goodbedford (@goodbedford) on CodePen.

Primitives Data Types & Data Structures

Data types are the backbone of the language. You will declare the different types and perform evaluations on them. Primitives:Data that is not an object.

Boolean: true or false

                                          
                                                var isOpen = true;
                                                var isClosed = false;

null: A Special keyword denoting a null value. It is used to declare a null value;
var animalHouse = null;
undefined: A variable that is declared but not defined.
var animalHouse;
Number: Numerical value 55, 4.56
var numOfCars = 300;

String: "hello world" as char based value.

                                        
                                            var someString = "I am a string with double quotes.";
                                            var otherString = 'I am a string with single quotes. No difference.';

Symbol: (ES-2015) unique and immutable instances
var sym1 = new Symbol("someText");
Other Data Types
functions
functions

                                    
                                      function doSomething() {
                                        //do something;
                                      }

Object: A data type that contains data and instructions for working with it. Methods(are functions that belong to an object). Objects are also used to represent real-world things (cars, people, events...).

                                       
                                           var listOfSupplies = ["paper", "pencils", "pen", "markers"]; // array
                                           var teacher = {
                                           name: "Mrs. Alexander",
                                           yearsOfEx: 20,
                                           highestDegree: "masters",
                                           listOfSupplies: listOfSupplies,
                                           prevSchools: ["Mission", "Del Ray", "Twin Peaks"],
                                           };
                                           var car = {};  //is an object
                                           car.wheels = 4;
                                           car.engine = "V8";
                                           car.type = "suv";
                                           car.isAutomatic = true;
                                           car.prevOwners = ["Barry", "Ruth", "Donald", "Debbie"];
                                           car["color"] = "blue";

Run each console.log from your console.

                                
                                    console.log("typeof true:", typeof true);
                                    console.log("typeof false:", typeof false);
                                    console.log("typeof 5:", typeof 5);
                                    console.log("typeof 5.35:", typeof 5.35);
                                    console.log("typeof 'word':", typeof "word");
                                    console.log("typeof '5.35':", typeof "5.35");
                                    console.log("typeof null:", typeof null);
                                    console.log("typeof Object:", typeof Object);
                                    console.log("typeof object:", typeof {});
                                    var fn = function() {
                                    var str = "I am inside a function.";
                                    }
                                    console.log("typeof fn:", typeof fn);

Arrays

Array: are objects used to store list of variables of any type.

Array Length Property

Array Index

Note: Arrays begin at index Zero. This can sum times cause the 1-off errors. These type of logic errors usually don't stop the program and can be over looked.

Array Pop/ Push/ Shift/ Unshift

Operators

Javascript has a host of operators. We will review the most used ones. Full List of Operators

Assignment Operators

Equality / Comparison Operators
The triple equal and double equal evaluate to true or false

Relational/ Comparison Operators

Arithmetic Operators

Operator Precedence
The rules for the order in which values get evaluated

Control Flow

Conditional statements are sets of commands that executes if the condition is true or false

if/else
if/else/if
while
switch

via GIPHY

Loops & Interators

Loops are used to circulate through list or list-like objects

Bootstrap

Bootstrap Is a responsive, mobile first css framework

FizzBuzz Test

Write a function that takes a number and then prints the number or fizz for numbers divisible by 3, buzz for divisible by 5, and fizzbuzz divisible by 15

DOM Events

The Document Object Model is the interface between HTML and Javascript.

DOM Intro

Selectors

Event Listeners

Jquery: Yeah!!

A great library for making sense of the webs inconsistency.

Jquery

Party Time Code

See the Pen IntroJs-Party-Time-vanilla-js by goodbedford (@goodbedford) on CodePen.

Hover Button Racer - Jquery

See the Pen racer by goodbedford (@goodbedford) on CodePen.

RSVPS List

See the Pen Add a simple listener by goodbedford (@goodbedford) on CodePen.

Click Game - Jquery

See the Pen Click Game 2 by goodbedford (@goodbedford) on CodePen.

Click Game with Timer - Jquery

See the Pen Click Game 3 timed by goodbedford (@goodbedford) on CodePen.

Price Menu Site - Vanilla Javascript

See the Pen price menu by goodbedford (@goodbedford) on CodePen.

Style Guides & Other Resources

Style Guides
AirBnB Javascript Style Guide Reference
AirBnB CSS Style Guide References
Books
JavaScript & jQuery interactive front-end web development
If Hemingway wrote Javascript
You Don't Know JS
Online Text Editor & Coding Sandboxes
Repl.it
Code Pen
Plunker