/intro-to-js

Introduction to Programming in Javascript

#Introduction to Programming in Javascript

##ROADMAP

  • Datatypes
  • Variables
  • Arithmetic Operators
  • Data Structures:
    • Arrays
    • Objects
  • Anatomy of a Function
  • Comparison Operators
  • Control Structures:
    • The 'if' statement
    • The 'for' loop
  • Math & Random

#Datatypes

A type in a programming language specifies a kind of data. While this might not be the most technical way to describe it, it's how we're most likely to think about it.

Javascript has five primitive types:

  • String - characters or textual data..stuff like: "abc", and "hello there 123"
  • Number - just like it sounds..this is a number: 123 or 12.3
  • Boolean - these are truthe or false values
  • Null - has exactly one value which is: null . This is used to signify an empty value.
  • Undefined - usually this is a variable that hasn't been initialized: 'var x;' will result in x being undefined at this point.

#Variables

What's the point of having data types if there is nowhere we can temporarily store them? This is where variables come in.

Keywayrd var tells the program that is going to define a variable. It is followed by the name of the variable. This is "variable declaration":

var myVariable;
var anotherVariable;

If we want to give it a value, use the = operator. This is " variable assignment".

myVariable = 1;
anotherVariable = 2;

You can also do declaration and assignment in one line:

var number = 7;

How do we name variables? Use common sense and camelCase.

#Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

#Data Structures Data Structures are ways of organizing data. Javascript has two main ways of doing this. Arrays and Objects.

###1. Arrays

Arrays are lists. They start and end with square brackets:

var myArray = [ "A", "B", "C" ];

You can access elements by using [ ] and passing the index of the desired element.

Arrays are "zero indexed" : that means that the first element is always found by using [0]:

myArray[0];
myArray[1];
myArray[2];

Each element in an array can be assigned, exactly like a variable:

myArray[0] = "A";
myArray[1] = "B";
myArray[2] = "C";

Arrays can do very useful things, such as sort themselves, count their content, search their content, manipulate their content and all sorts of other cool tricks:

Method Description
join() Joins all elements of an array into a string
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
valueOf() Returns the primitive value of an array

###2. Objects

Objects are also lists, but you can choose what each element is called. This is known as the key

Objects are formed of key, value pairs and are very useful for describing real world objects.

var car = {type:"Fiat", model:"500", color:"white"};

Sometimes it is easier to visualize objects by adding line-breaks:

var car = { 
	type:"Fiat",
	model:"500",
	color:"white"
};

#Anatomy of a Function

Functions are reusable blocks of code, that perform a given task. They are made up of 5 parts:

  1. Keyword function tells the program that is going to be a function (just like var for variables)
  2. They have a name (just like variables) so you can call (invoke) them.
  3. They can be given arguments (a.k.a parameters) in parenthesis ( )
  4. The code block. This is where the magic happens. Denoted by curly braces { }
  5. Javascript functions always return a result. If you do not explicitely tell a javascript function to return something, it will return undefined anyway.
function function_name (argument) {
	// body...
	return "strings, numbers or other things too";
}

You can use a function by calling it. This is also known as invoking. This is done like so:

function_name();

Example: This function adds 2 to any given parameter:

function addTwo (givenParameter) {
	return givenParameter + 2;
}

#Comparison & Logical Operators In addition to Arithmetic Operators, there are a few more useful operators in javascript:

###1. Comparison Operators

Operator Description Comparing Returns
== equal to x == 8 false
x == 5 true
x == "5" true
=== equal value and equal type x === 5 true
x === "5" false
!= not equal x != 8 true
!== not equal value or not equal type x !== 5 false
x !== "5" true
x !== 8 true
> greater than x > 8 false
< less than x < 8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true

###2. Logical Operators

Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true

#Control Structures:

###The 'if' statement

if ("this is true") console.log("it was true!");
if ( "this evaluates to true" ) {
	// do this 
} else if ( "instead this is true") {
	// then do that
} else {
	// you can always fallback on this 
}

###The 'for' loop

for (var i = 0 ; i < 10 ; i++ ) {
	console.log(i);
}

// for (start ; stop ; step)

#Math & Random