JavaScript I – Day 1

Geekwise Academy

Instructors:

Corey Shuman

Aaron Lurz

Slack Channel:

https://geekwise-js1.slack.com

Github:

https://github.com/coreyshuman/Geekwise-JavaScript-I

Lesson plans:

http://coreyshuman.github.io/Geekwise-JavaScript-I/html/

Today's Topics

· Class Goals

· Introductions

· What is JavaScript?

· Development Tools

· Data Types

· Number Systems

· Basic Syntax

· Github

Introductions

· Name

· A little background on yourself

· What do you want to get out of this class?

Class Goals

· Develop a solid foundation in programming basics

· Learn how to use JavaScript

· Learn development techniques and best practices in JavaScript

· Discover how JavaScript can be used to manipulate the DOM

· Have lots of hands-on experience programming in JavaScript

· Apply our learned fundamentals to build a working application

· Become comfortable enough in JavaScript to create on your own and move on to JSII

· Learn to use Github to manage projects

What is JavaScript?

· Programming language used most often in Web Browsers to power the web

· Allows for handling of user behavior. For example, if user does "this" the page does "that"

· Created in 10 days in May 1995 by Brendan Eich for Netscape

· Name changes: Mocha -> Livescript -> JavaScript -> ECMAScript

· Standardized by ECMA in 1996-1997 so other browsers could also use it

· European Computer Manufacturers Association (ECMA) International is a nonprofit with the goal of developing standards. Because of them you can write (mostly) the same JavaScript code and have it work the same on every Browser

· ECMAScript 2015 (ES6) was released last year, work has started on ECMAScript 2016

Examples of JavaScript

· http://coreyshuman.com/projects/constellation/

· http://coreyshuman.com/projects/mazesolver/

· http://carvisualizer.plus360degrees.com/threejs/

· http://cs.stanford.edu/people/karpathy/reinforcejs/puckworld.html

· http://hellomonday.com/

Development Tools

· Web Browsers

· Developer Console – we will use this a lot!

· Text Editors – syntax highlighting

· Online Resources

o Stack Overflow - http://stackoverflow.com/

o jsFiddle - https://jsfiddle.net/vsgtjgdo/1/

o W3schools.com - http://www.w3schools.com/js/default.asp

Variables

· Variables are containers for storing data values

· Format to "declare" a variable:

var name = "Corey";

· Example:

var a = 5;

var b = 6;

var c = a + b;

· JavaScript names (identifiers) must be unique

· Rules for constructing identifier names (from w3schools.com):

o Names can contain letters, digits, underscores, and dollar signs.

o Names must begin with a letter

o Names can also begin with $ and _

o Names are case sensitive (y and Y are different variables)

o Reserved words (like JavaScript keywords) cannot be used as names

Comments

· Comments don’t do anything in the code.

· They are there specifically for the coder (you) to leave yourself notes

// initialize my variables

var a = 5;

var b = 6;

// now add these variables together and store them in ‘c’

var c = a + b;

· Variables can exists on multiple lines as well:

/* This long comment is called a multiline

     comment because it continues onto

     many lines.

*/

Data Types

· String

o Strings are used to store and manipulate text.

o Strings can be declared inside of single or double quotes.

var text = "This is a string in JavaScript";

var numberString = ‘This is a 2nd string’;

· Number

o JavaScript has one kind of number type which can be written with or without decimals.

var n1 = 123;

var n2 = 123.4;

o Large or small numbers can be written with scientific (exponent) notation:

var largeNumber = 4e5;      // 40000

var smallNumber = 12e-5;  // .00012

o 1 + 2 = 3. What about "1" + "2"?

· Boolean

o Booleans can represent one of two values: true or false;

var a = true;

var b = false;

· Array

o Arrays are used to store many values within a single variable.

var a = [];

var colors = ["red", "green", "blue"];

· Object

o Objects are a complex variable type that can contain many variables and functions in one place. These variables and functions are usually referred to as properties and methods.

o JavaScript objects often are used to represent real-life objects.

o Properties usually represent information and values in the object.

o Methods usually represent actions the object can take.

var a = {};

var car = {name: "Volkswagen", color: "blue", price: 550};

· Null

o A null is "nothing"

o It is used to represent something that doesn't exist.

var example = null;

· Undefined

o A variable without a value is undefined.

o A variable can be emptied by setting its value to undefined.

var name;          // value is undefined

var a = 4;

a = undefined;  // value is undefined, a is now empty

Number Systems

· Decimal – base 10

o 1, 15, 1e7, 1.2, -5.3e2

o NaN, +-Infinity, +-0

· Binary – base 2 – recently added

o 0b1, 0b1011

· Hexadecimal – base 16

o 0x1, 0xf, 0x15

· Octal – base 8

o 02, 07, 017

· Number Gotchas

o .1 + .2

o 11.13 * .08125

· Floating-point number representation

o https://en.wikipedia.org/wiki/Double-precision_floating-point_format

1.2345 = 12345 x 10e-4

                 Significand, base, exponent

Computers usually use IEEE 754 standard for Floating Point Arithmetic

· Many programming languages have many number types, such as integer, float, decimal, long…

· JavaScript has only one number type: double precision floating point

· This format stores numbers in 64 bits, where the number (the fraction) is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:

Value (aka Fraction/Mantissa)	Exponent	Sign
52 bits (0 – 51)	11 bits (52-62)	1 bit (63)

Test Our Knowledge

· Create a new file in your text editor of choice and name it app01.js

· Add a comment that contains your name, the date, and the name of this class at the top of the file

· Create three variables. The first two should store the number values 12 in decimal and 30 in hexadecimal (you translate 30 into the hexadecimal equivalent). The third variable should store the string "Answer equals: "

· Add the first two numeric variables together using the + operator, save this to a new variable

· Concatenate the string from your third variable with the number from your fourth (new) variable. Save this to a new variable called "answer"

· Copy your whole code into the developer console and hit <enter>

· View the contents of variable "answer"