learningjavascript-blog

[learningjavascript-blog]

Getting Started with Arrays

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]);

// Prints Apples to the console

[learningjavascript-blog]

This posts looks beyond everyday usage of JavaScript’s objects. The fundamentals of JavaScripts objects are for the most part about as simple as using JSON notation. However, JavaScript also provides sophisticated tools to create objects in... | Bjorn Tipling | Software Engineer at @floobits

[learningjavascript-blog]

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

Are you tired of setting up environments, every time you get a new computer or work with a new project or company, me 2. Here is a great repo on setting up your environment on your New Mac

[learningjavascript-blog]

Scaffolding an Angular App with Yeoman

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,

For more on Yeoman please check out http://yeoman.io/learning/ 

[learningjavascript-blog]

The hardest thing about Web Development

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

Then go to localhost:8000 , to see your demo page. 

[learningjavascript-blog]

Style guides, cheat sheets, code samples, free books, and more valuable resources!

[learningjavascript-blog]

Top 10 Books for JavaScript Engineers

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 

Bonus : Learning to Program - Steven Foote 

[learningjavascript-blog]

Drawing a Simple Line in Canvas

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

View on CodePen  w3Schools Example

[learningjavascript-blog]

JavaScript Syntax

// 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 

var items; // Good variable name 

[learningjavascript-blog]

Styling with JavaScript

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';

myDiv.style.width = '500px';

[learningjavascript-blog]

JSbooks is a showcase of the bests free ebooks about Javascript. Find here the best publications about JS without spending any bucks !

[learningjavascript-blog]

Everything you need to know about web development. Neatly packaged. Learn HTML, CSS, Javascript, Python, Rails, Node, and more! Made with love in NYC by @jonhmchan.

[learningjavascript-blog]

What is a Method?

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);

}

In the above example this is the method, and the above function, is a function used created using the constructor pattern. I will get on to patterns later on, but I feel like no one talks about the basics of javascript anymore. The basic fundamentals.

[learningjavascript-blog]

Basics of setting up your environment for javascript coding as well as simple document.write script to get started, post originally from the new boston on youtube

[learningjavascript-blog]

Logical and Comparison Operators

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

Example usage: if (x=30 && y=5) {alert("Your Too Old"); }

[learningjavascript-blog]

Declaring a Variable and Initialization !

var x; // Declaring a Variable

x = "Hello, World" ;

alert(x);

The code above will do the same as the alert code before, but now I am assigning it to memory, by assigning the Hello World to a variable, which is var. Var is the name of the keyword for variable you can name variables anything you want just don't start a variable name with a number. I would recommend using friendly variable names or a name that explains what you are doing, so it can be easy for you and others to understand what is happening in your code.  // This signifies a comment, comments are good in code to help again in understanding of code. Also pay attention to the javascript syntax, end each statement with a semi-colon, strings are place inside quotes either single or double. 

[learningjavascript-blog]

Simple Alert

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.