JavaScript for the Common Man

var a = [ ]; // Creating an empty array

var b = [ 1, 2, 3, 4, 5]; // An array filled with numbers 

var c = ['Hello', 'World', 'Please']; // An Array filled with strings

In array the first element is the 0th element, then it goes to 1, 2,3, etc. 

Example Usage 

var fruits = ["Apples", "Oranges", "Pears"];

console.log(fruits[0]);

Contribute to mac-dev-env development by creating an account on GitHub.

Going further into how I hate setting up environments once you have all the dependencies, it is smooth sailing, so lets see a simple example of scaffolding with Yeoman, we will scaffold an angular app. Remember, to have ruby, sass, and npm install, rvm also is good if you need to update your ruby. 

npm install -g yo

npm install -g generator-angular

mkdir projectName

cd/ into projectName

yo angular projectName

grunt server, or grunt serve "I believe they updated this"

grunt test

grunt

Now you have a scaffolded out app, on port 9000, ready to go,

What I have come to find out the hardest and most time consuming thing about web development are setting up environments. This maybe a little off topic but every company I had the privilege of working for has a different type of environment and build process. I just thought I would give you some freebies, if you want to set up a local host server quickly. 

I would like to recommend MAMP, (MySql Apache and PHP) if your own a Mac and would like to use a WSYWIG web server just to get started. 

- Also if you are comfortable with the command line, and you want to get started quickly and have Python

Python 2.x:

python -m SimpleHTTPServer

Python 3.x:

python -m http.server

No particular order, all awesome books !

1. JavaScript Design Patterns - Addy Osmani 

2. Eloquent JavaScript - Marijin Haverbeke 

3. Speaking JavaScript -  Axel Rauschmayer 

4. High Performant JavaScript - Nicholas C. Zakas

5. JavaScript the Good Parts - Douglas Crockford 

6. Maintainable JavaScript - Nicholas C. Zakas 

7. JavaScript: The Definitive Guide - David Flanagan

8. Functional Javascript - Michael Fogus

9. Secrets of the JavaScript Ninja - John Resig

10. Effective JavaScript - David Hermin 

Remember Unless Specified the Default Color is Always Black

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path.

Next, we can use the moveTo() method to position the context point.(i.e.) and then use the lineTo() method draw a straight line using stroke().

var canvas = document.getElementById('myCanvas'); // Targeting the Canvas Element Using the DOM's API var context = canvas.getContext('2d'); // Creating the Context Element Using the Canvas API context.beginPath(); // Function to begin a Path  context.moveTo(100, 150); context.lineTo(450, 50); // JavaScript Syntax context.lineTo(x,y) context.stroke(); // Context to Stroke or in other words fill in the Path

// Single Line Comment 

/*

Multi

Line

Comment 

*/

; // Semi-colon is used to terminate a statement 

i.e. var x = 0; 

/ * It is not necessary but it is good to end each statement with a semi-colon, because javascript does something called automatic semi-colon insertion so if you want your statements to behave correctly and not do something funky. I would recommend ended each statement with a semi-colon. */ 

// Declaring a variable 

var x;

// Declaring a variable and assigning it to something

var x = 0 ; 

// x is assigned to 0 

// You can also assign a value to a variable already created, let's take x 

x = 3;

// Variable Names 

/* A variable name cannot start with a number, but it can start with a letter */ 

x, abc, etc // good variable names 

1ajdjd, !please, 0go // Bad variable names

// Good variable names are descriptive the Describe what is being done 

If you want to be able to quickly style  a div with javascript. 

HTML

<div id="myDiv">

</div>

Here is an example (Javascript)

var myDiv = document.getElementById('myDiv');

myDiv.style.backgroundColor = 'green';

myDiv.style.border = 'solid 2px black';

What is a Method? And not Method Man ...

A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object.

Human Definition :) A function that is attached to an object.

Examples are:

objectName.methodname = functionName;

var myObj = {

myMethod: function (params) {

// .. do something

 }

};

object.methodname(params);

Now examples for us humans :-/

box2.insertAdjacentHTML('beforebegin', '<p>This get's inserted</p>');

insertAdjacentHTML is the Method (the Method Check 2 1 2 in my rappers voice), and beforebegin and <p>This get's inserted</p> are the paramaters.

function displayCar() {

var result = "A beautiful"  + this.year +  " " + this.make +

" " + this.model;

pretty_print(result);

}

Comparison Operators

== : equal to

=== : exactly equal to (equal value & equal type)

!= : not equal to

!== : not equal (different value or different type)

> : greater than

< : less than

>= : Greater than or equal to

<= : Less than or equal to

Example usage: if (age<18) x="Too young";

Logical Operators

&& : and

|| : or

! : not

var x; // Declaring a Variable

x = "Hello, World" ;

alert(x);

I didn't actually want to use this because it is so commonly used in coding, but I just wanted to create the Hello World alert so we all can get use to javascript syntax. As you can see it ends with a semi-colon and the message is parenthesis followed by quotes. We will get in further details on why we use parens and quotes in further lesson. But this is a basic sentence in the javascript language.