Week 01, Day 04.

What we covered today:

  • Warmup Exercise
  • Demos
  • Git and Github
  • Javascript Objects

Warmup Exercise

Raindrops.

Git and Github

A very short history...

A Version Control System designed and developed by a Finnish guy, Linus Torvalds, for the Linux kernel in 2005. Apparently, he named it Git because of the British-English slang meaning "unpleasant person". Torvalds said: "I'm an egotistical bastard, and I name all my projects after myself".

What does it do?
  • A way to snapshot - you get a time machine
  • A way to collaborate - working in parallel
  • Saves us from moving code around on Floppy Disks
  • Automates merging of code
  • Lets you distribute a project

N.B. It is quite hard to understand, and you won't understand most of the problems that it solves yet! Just trust us.

Git is on your local computer. Github is in the cloud - it is the central repository!

For a nice introduction to it, see here. P.S. Octocat is the logo!

Some basic Git commands:

  • git init - This initializes the git repository (behind the scenes it creates a .git file in the folder - it has called .git because any file prefixed by a . is hidden in finder and ls). Make sure you don't do this in another git repository!
  • git status - This will tell you what is happening the current project. Commit status, untracked files etc.
  • git add . - This will add all files in the current directory into the "staging area". Git is now paying attention to all files. You can alternatively specify a particular file - git add octocat.txt. We could also add all files of a particular type - git add '*.txt' (this needs quotes!) or multiple files at a time - git add octocat.txt blue_octocat.txt.
  • git commit -m "You're commit message - This is the thing that takes the snapshot. You must give it a message!
  • git log - Will show you all of the snapshots in the current project
  • This has all been happening locally! So we need to connect it to Github...
  • git remote add origin https://github.com/try-git/try_git.git - It takes a remote name, the word origin, and a remote repository, the URL.
  • git push -u origin master - The first time you run git push (which moves it up to github), make sure you specify -u origin master. This tells your local machine to always use the remote link you specified in the step before. Once you have done this - you can run git push from now on
  • git pull - this brings the code down from Github
  • git diff HEAD - this will show the differences between the current commit and the previous commit
  • git diff --staged - You can show the differences between the currently staged files by using this command
  • git reset FILENAME - Will remove the specified files or folders from the staging area (so they won't be pushed!)
  • git checkout -- octocat.txt - This will go back to the last commit involving the octocat.txt file using this.
  • git branch clean_up - This allows us to work in an alternate reality - changes you make here won't effect anything in other branches
  • git checkout clean_up - Will move to the clean_up branch.
  • git rm FILENAME FILENAME - Will not only delete the file on your computer, but also remove it from the staging area with Git.
  • git add . then run git commit -m "COMMIT NAME". This will take a screenshot of the current branch position.
  • git checkout master - This will move to the master branch.
  • git merge clean_up - Will merge the clean_up branch into the current branch.
  • Now that everything has been merged, we can delete the clean_up branch - git branch -d clean_up.
  • We can run git push now! Everything is up there.

A really basic process: (Follow these steps every time!)

  • git add .
  • git commit -m "Commit message
  • git pull
  • git push

Some good github tutorials:

Javascript Objects

In Javascript, an object is a standalone entity - filled with properties and types (or keys and values). It is very similar in structure to a dictionary.

So most javascript objects will have keys and values attached to them - this could be considered as a variable that is attached to the object (also allows us to iterate through them).

They are sometimes called assosciative arrays. Remember that they are not stored in any particular order (they can change order whenever).

How to create a Javascript Object

// With object literal
var newObject = {};

// Using Object
var newObject = new Object();

How to add Properties

// Remember to seperate by commas!
var newObject = {
  objectKey: "Object Value",
  anotherObjectKey: "Another Object Value",
  objectFunction: function () {

  }
};

var newObject = {};
newObject.objectKey = "Object Value";
newObject.objectFunction();
newObject["anotherObjectKey"] = "Another Object Value";

// Can also use Constructors and Factories - see Week 1 Day 5 notes.

How to access properties

Like all JS variables - both the object name and property names are case sensitive.

var favouriteCar = {
  manufacturer: "Jaguar",
  year: 1963,
  model: "E-Type"
}

favouriteCar.year

// Or

favouriteCar["year"]

How to iterate through an object

Object.keys(newObject); // Returns an array of all the keys in the specified object.
Object.getOwnPropertyNames(newObject); // So does this

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var prop in obj) {
  console.log( "o." + prop + " = " + obj[prop] );
}

Deleting Properties

var favouriteCar = {
  manufacturer: "Jaguar",
  year: 1963,
  model: "E-Type"
}

delete favouriteCar.year;

Comparing Objects

In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

// Two variables, two distict objects with the same properties
var fruit = { name: "apple" };
var fruitbear = { name: "apple" };

fruit == fruitbear; // return false
fruit === fruitbear; // return false

// Two variables, a single object
var fruit = { name: "apple" };
var fruitbear = fruit;  // assign fruit object reference to fruitbear

// Here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true

No simple way though. Underscore js has an implementation - "_.isEqual", lots of alternatives here, but I would stick to the underscore method. I love underscore.

Homework

Geometry Function lab and the Bank.