Programming Fundamentals

learn.js

/**
* START 
* --------------------
* Go to http://jsbin.com, 
* Hit the X in the top left corner
* Ensure only JavaScript and Console are selected in the midlle  
* Enter code in the JavaScript window and see the results in the console
* Copy in each of the blocks below into the jacascript window
* Then in the top right hand cornr of the console press clear and then run 
* The coding style and patterns here is the accepted modern norm, you will see older styles in the wild
*/

/**
* COMMENTS
* --------------------
* Leaving comments in code is important for other developers or your future self
* The code tells you how, comments should tell you why
*/

// The dobuble forward slash is a single line comment, everything after it will be ignored and nothing will show in the console

/**
* This is a multi line comment 
* it starts with a forward slash folowed by 2 x asterisks /**
* each line starts with an asterisk
* after each asterisk there is a space
* again this will be ignored 
*/


/**
* SPECIAL CHARECTORS
* --------------------
* These are listed to ensure we both use the same names for the special charectors 
* {} curyl brackts
* [] square brackets
* () parenthesis 
* "" Quotes
* '' Single Quotes
* = Equals 
* : Colon
* ; Semi colon
* , Comma 
* / Forward slash
* \ Back slash
* | Pipe
* * Asterisk
* # Hash
* ^ Carret 
* _ Underscore
* ~ Tilde
* ` Back tick
* $ Dollar


* VARIALBES
* --------------------
* Varaibles have a Key and a Value and start with the words const or let
* const, once set cant be changed, const is Constant
* let can be changed, let can be changed if needed
* keys are a single word with no spaces, however capitaisation can be used to denote multiple words, do not use the minus-sign!
*/

const myBeer = 'good'
const topScore = 200
const profitPercentage = 40.5

// console.log allows us to show the value of a variable in the console

console.log(myBeer, topScore, profitPercentage)

// http://jsbin.com/ligobazewa/edit?js,console

// let can be changed
let myBeer = 'good'
myBeer = 'flat'
console.log(myBeer)

// http://jsbin.com/jowakicize/edit?js,console

// const can not be changed, try to use const wherever possible 
const myBeer = 'good'
myBeer = 'flat'
console.log(myBeer)

// http://jsbin.com/ruzepenoxu/edit?js,console

// The old way was using var, you will see var but try not to use it
var myBeer = 'good'
myBeer = 'flat'
console.log(myBeer)

// http://jsbin.com/riwucaqiwo/edit?js,console

/** 
* I started teaching the kids this by putting things in boxes or bags and getting them to remeber whats in them
* As they got older we stoped using physical boxes and bags
* We progressed to adding them together "in box A is the number 10 and in box B os the number 2, what is A + B?
* Take it in turns adding boxes or changing what in the boxes to test memory and add, subtract and divide boxes
* We can use a turn to lock a box that then cant be changed, if we try and change it we loose the turn
* It's a geeky version of eye-spy
*/

/** 
* DATA TYPES
* --------------------
* A data type is a particular kind of data item, as defined by the values it can take.
* The data types are Boolean, Numbers, Strings, Arrays, Objects
* It's important to be able to identify what the data types look like and type each without looking up the syntax
* Let's have a look at each...
*/

/** 
* BOOLEAN
* --------------------
* A Boolean is either true or false, there is no maybe, or other value it has to be true or false
* Here we are going to set variables to a boolean
* Everything in JavaScript can be evaluated to true or false
*/

const mathiasIsGay = true
const danIsGay = false

console.log(mathiasIsGay, danIsGay)


// http://jsbin.com/jeyayetawo/edit?js,console

/** 
* For the kids we would hold a toy and make a statement like the ball is red, they would then answer with true or false
*/

/**
* NUMBERS / INTEGERS
* --------------------
* Numbers can also be called integers or in short int's
* Here we are expressing that there are 4 adults
* Adults is the varaible and we are asiging the value of 4
* Numbers do not have quotes or sngl quotes around them
*/

const adults = 2
console.log(adults)

// Numbers can have up to 17 decimal places
const children = 2.5
console.log(children)

//  Decimals also called floats, in JavaScript shoud be avided as they produce some inacurate results (yes its stupid!)
const speed = 0.2 + 0.1;  
console.log(speed)

// if you must use decimals 
const speed = ((0.2 * 10)+(0.1 * 10))/10
console.log(speed)

// Numbers can also be negative numbers
const temperature = -2
console.log(temperature)

// numbers stay accurate up to 15 numbers long 
const x = 999999999999999;
const y = 9999999999999999;
console.log(x, y)

// For the kids we just taught them what a number is and isnt and interchanged the word Number and Integer, numbers dont have air quotes!

/**
* STRINGS
* --------------------
* Strings should be single quotes however you will see people using double quotes ""
*/
const happy = 'yes'
const sad = 'no'
const notPercentage = '1.5'
const notNumber = '15'

console.log(happy, sad, notPercentage, notNumber)


// here we are joining 2 strings
const age = '1' + '1'
console.log(age)

// here we are adding 2 numbers 
const myAge = 1 + 1
console.log(myAge)

// For the kids we use air quotes if we want to explicitly talk about a string, we make trick questins like what is "2" plus "4" the answer is 24

/**
* ARRAY
* --------------------
* An array is list of values and is always presented inside square brackets, seperated with commas.
* It can be presented in a singe line or on multiple, whatver reads best.
*/

const shopping = ['soap', 'beer', 'talc']
const peeps = ['Tom', 'Slip', 'Dan']
const fruit = [
  'Tomato', 
  'Pineapple', 
  'Orange'
]


console.log(shopping, peeps, fruit)


// to get a single value from an array we can assign the values to varaibls like this 

const list = ['dog food', 'beer', 'pizza']
const [df, fd, pz] = list;
console.log(df, fd, pz)

// Here we just interchage the word list for array, "can you make an array of things we need to do?, and what shall we call this list"

/** 
* OBJECTS
* --------------------
* An object is a list of properties 
* notice the keys do not have quotes
* properties can be lised on a single or multiple lines
*/

const pizza = {type:'thin crust', size:'12 Inches', Sauce:'Mariana'};
const jewelry = {type:'earings', color:'red', weight:'10oz'};
const beer = {type:'budweiser', size:'320ml', percentage: 5};
const test = {name:'steve', alzheimers: true};

const fish = {
  siz:'large', 
  age: 3,
  color: 'Blue'
};


console.log(pizza, jewelry, beer, test, fish)


// access a properties value with the dot .
console.log(pizza.size, beer.type)

// Here we ask the kids to point at an object, then ask what properties does it have, they may point at a car, then tell us it has a property of color that is red


/**
* BASIC MATH 
* --------------------
* + plus
* / divided
* * times
* - minus
*/

const adults = 4
const grandparents = 4
const children = 2.5

const total = adults + children + grandparents
console.log(total)

const divided = adults / children
console.log(divided)

const times = adults * children
console.log(times)

const minus = adults - children
console.log(minus)

// Pi also available to us and s expressed as 
const pi = Math.PI
console.log(pi)

// Javascript has allot of other math functions that we wont cover here

/**
* INCREMENT
* --------------------
*/
let num = 1;
num += 1;
console.log(num)

/**
* DECREMENT
* --------------------
*/
let num = 1;
num -= 1;
console.log(num)

/**
* ADDING STRINGS
* --------------------
*/
const size = '12'
const color = 'Blue'
const addTogether = `${size}  ${color}`
console.log(addTogether)

/**
* MIXING STRINGS AND VARIABLES
* --------------------
* pay carefull attention to single quotes '' and the back ticks ``
*/
const size = '12'
const color = 'Blue'
const addTogether = `My car is ${color} and is ${size} years old`;
console.log(addTogether)


/**
* LOGICAL OPERATORS
* --------------------
* == Equal to
* != Not eqaul 
* > Greater than
* < Less than
* >= Greater than or wqual to 
* <= Les than oe equal to 
*/

const adults = 4
const grandparents = 4
const children = 2.5


const isEqual = adults == children
console.log(isEqual)

const isNotEqual = adults != children
console.log(isNotEqual)

const isGreateThan = adults > children
console.log(isGreateThan)

const isLessThan = adults < children
console.log(isGreateThan)

const isGreaterThanOrEqual = adults >= grandparents
console.log(isGreaterThanOrEqual)

const isLessThanOrEqual = adults <= grandparents
console.log(isLessThanOrEqual)

/**
* IF CONDITIONS
* --------------------
*/
const hungry = true 

if(hungry){
  console.log('Im hungry')
} 

/**
* IF / ELSE CONDITIONS
* --------------------
*/
const thirsty = false 

if(thirsty){
  console.log('Im thirsty')
} else {
  console.log('Im not thirsty')
}

/**
* FUNCTIONS
* --------------------
* A function is a single piece of work that you want to do many times easily
*/

const talk = function () {
    console.log('Hello')
}
talk()


/**
* PASSING TO A FUNCTION
* --------------------
*/
const dogs = function (count) {
    console.log(count)
}
dogs(5)

/**
* PASSING MANY THINGS TO A FUNCTION
* --------------------
*/
const goats = function (count, color) {
    console.log(count)
    console.log(color)
}
goats(5, "black")

/**
* RETURNING FROM A FUNCTION
* --------------------
*/
const bigSize = function (size) {
    return size + 10
}
const newSize = bigSize(2)
console.log(newSize)

/**
* PASSING AND RETURNING FROM A FUNCTION
* --------------------
*/
const calculate = function (size, amount) {
    return size + amount
}
const calc = calculate(2,10)
console.log(calc)

/**
* BLOCK SCOPE
* --------------------
* Anything inside [] or {} is called a block
* varabes set outside a block can be accessed inside a function
*/
const myName = 'Will'
const whatsMyName = function () {
  console.log(myName)
}
whatsMyName()

// varabes set inside can not be accessed outside a function, this will error

whatsMyName()

const whatsMyName = function () {
    const myName = 'Will'
}
 console.log(myName)


/**
* GET THE LENGTH OF A STRING
* --------------------
*/
const message = 'Hello you'
const qty = message.length
console.log(qty)

/**
* GET THE LENGTH OF AN ARRAY
* --------------------
*/
const list = ['eggs', 'flour', 'butter']
const qty = list.length
console.log(qty)

/**
* GET THE INDEX OF AN ITEM IN AN ARRAY
* --------------------
*/
const array = ['eggs', 'milk', 'flour']
const index = array.indexOf('flour')
console.log(index)

/**
* DELETE ITEM IN AN ARRAY BY INDEX USING SPLICE
* --------------------
* at index 1 remove 2 items
*/
let array = ['eggs', 'milk', 'flour'];
array.splice(1, 2);
console.log(array)


/** 
* ADD/PUSH AN ITEM INTO AN ARRAY
* --------------------
* notice the push puts the item at the end of the list/array
* notice we only use let once to define an empty array
*/

let list = []
list.push('eggs', 'flour', 'butter')
console.log(list)

/**
* REMOVE/POP AN ITEM FROM AN ARRAY
* --------------------
* notice the pop removes the fist item from the list/array
*/
let list = ['eggs', 'flour', 'butter']
list.pop()
console.log(list)

/**
* GET THE NUMBER OF KEYS IN AN OBJECT
* --------------------
*/
const pizza = {type: 'thin crust', size: '12 Inches', sauce: 'Mariana'}
console.log(Object.keys(pizza).length)

/**
* ADD A PROPERTY TO AN OBJECT
*  --------------------
*/
let pizza = {type: 'thin crust', size: '12 Inches', sauce: 'Mariana'}
pizza.cheese = 'mozerealla';
console.log(pizza)

/**
* DELETE A PROPERTY OF AN OBJECT
* --------------------
*/
let pizza = {type: 'thin crust', size: '12 Inches', sauce: 'Mariana'}
delete pizza.sauce
console.log(pizza)


/**
* GET TIME AS UNIX EPOCH
* --------------------
* the unix epoch is the number of seconds snce 1st of Jan 1960 GMT
* the epoch can be converted back to a local date time
*/
const epoch = (new Date).getTime();
console.log(epoch)

/**
* WAITING 
* --------------------
*/
setTimeout( function() { 
    console.log("Hellooooo")
}, 3000)

/**
* WAITING TO CALL A FUNCTION
* --------------------
*/
const goats = function (count, color) {
    console.log(count, color)
}

setTimeout( () => { 
    goats(5, "black")
}, 3000)

/**
* REPEAT
* --------------------
*/
setInterval( () => { 
  console.log("Again")
}, 6000)