JavaScript Jumpstart

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

christopher-smith

If you are new to programming, I suspect you may get lost at some point, but, keep at it. JavaScript is a programming language—unlike HTML & CSS which are for browser rendering. To me, computer programming is about moving data from A to B via whatever techniques (or languages) are needed.

For this article, search the Mozilla Development Network (MDN) for references when you get stumped or don’t totally get what I’m talking about. Just plug in the word and MDN to any Google search: “JavaScript array MDN”. I’ll try to be as descriptive as possible. MDN is more informative than its cousin w3schools.com.

I also urge you to take any part of this article, paste it into CodePen, Sublime Text, or your favorite code editor—tweak, play, ask questions and learn more!

It’s also very important to note, JavaScript is NOT Java. The Java programming language is a lower-level strictly typed, Class based, Object Oriented Programming language. “Java is to JavaScript as Car is to Carpet.”

Let’s do this.


VARIABLES and DATA TYPES.

Variables are references to data. They work as a Key/Value pair. The key is the name of the variable, the value is its data.

– Variables have different data types based on their purpose and (most the time) will not change type in their existence. (It’s important to note JavaScript is loosely typed.)

You’ll notice throughout this tutorial that I’m using the camelCase naming convention. There are other conventions, but this one is widely used as a standard. The JavaScript language is case sensitive, so be aware. myVariable is not the same as myvariable.


OBJECTS.

Objects are a bit more abstract. Essentially, they are a container for any other data type or more objects.

Pretty cool right?

One of the best utilities you have when you are programming for a web browser is the Developer Tools. Not only can you use it to tweak CSS/HTML with the element inspector, but you can log JavaScript messages to the console. So, play around with the console.log() function and view the console in Google Chrome to see different values on the screen. Also, if you don’t have Google Chrome, get it. You’ll have to test your app in every other browser eventually, but it’s a more productive workflow to use Chrome to start.

Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to access the console directly.


FUNCTIONS.

Now, since we have that out of the way and it’s super clear, let’s talk about functions. You can think of the functions as the “actions” or ways for the program to execute a set of rules. Functions also (can) produce data types. Meaning, they can be used like variables that manipulate data and return a new value. Or, if there is no returned value, it is simply a void function that executes commands.

Functions can accept arguments in their parentheses like this:

functionName( argument1, argument2 );

This is a way to pass data to said function for it to manipulate or use for reference.

Wait, that’s weird.. Didn’t I put a 2 in the brackets? Arrays are ZERO index based. Meaning, they start at 0.

Nice.


FUNCTIONS inside of OBJECTS

Let’s define a new object who’s job is to create new people. This object is a reusable blueprint or a Class that will have its own instance in memory.

Semantics note:
– “CreateNewPerson” is a Class. (use CamelCase uppercase first initial in a class to delineate)
– variables inside of a class are called “properties” of that class.
– functions inside of a Class are called “methods” of that class.

Now we’re starting to get Object Oriented

Bullseye.

Both of these are of the same blueprint CreateNewPerson, however, they have entirely different values.

mike.getAge() returns 25 and jack.getName() returns Jack.

It’s important to understand the “scope” of these values. For instance:

If I do console.log(CreateNewPerson.person.age); it will throw an error. In fact, if I attempt to use CreateNewPerson.person in any way, it will cause an error. This is because the blueprint has no values until you have created a new instance using Object.create and also called the newObj.construct() function with the correct arguments.

Now, from here, the concepts of Object Oriented Programming get hairy. To be honest, JavaScript isn’t the best language to learn OOP patterns because it doesn’t support traditional inheritance without a work-around or framework and like I said earlier, it’s loosely typed. So, that’s for another tutorial about OOP Design Patterns.

Moving on… Let’s talk about routine tasks.


LOOPS

Why do we use them?
– to save time and write less.

If I want to figure out how many people are in the “people” array I created just above without a loop, I would have to do this:

Think about if we had 4 people..

Now think about if we had 400… Not fun! That’s looking like assembly code. 🙂

So, we use loops to execute the same code over and over until we have our results.

This is a common for loop:

Boom!

There are other loop types too. Again, depending on what we are doing, we may opt for one or the other.

We can also use loops to create new objects. Let’s create a bunch of people.

There we have it. We just created 500 person objects. Let’s loop through them and log their values to the console.

Neato burrito.


TIME BASED LOOPS

Thinking in terms of “animation frames” if you’re familiar with editing video or animation. Every time the screen refreshes that’s an applications’ frame. So, with this pattern, we can introduce the concept of something changing over time—like programmatic animation, a clock or checking to see if a web service has been updated.

I really like this kind of functionality. I’ll get into it more in a different tutorial. It deserves its own post.


LOGIC

Programming is about telling a computer EXACTLY what to do. Make no mistake, if you don’t tell the computer what to do, it  won’t do it. You, as the programmer, have to make logical decisions with your data. Sometimes you filter, sometimes modify, mutate, destroy, or direct differently depending on the problem you are trying to solve. Since I introduced the modulus operator above and you were confused about what it was doing, don’t hesitate to go read all about the expressions & operators available to you.

Let’s work through a string manipulation scenario.

This stuff gets a lot deeper, but this is a good introduction to a lot of the basics of JavaScript.

If this is fun to you, keep going and researching. If you really like programming, don’t just learn JavaScript. Branch out and use other languages that have more processing power, better inheritance, and do different tasks outside of an internet browser. Play with processing.org!

Don’t hesitate to reach out to me and ask questions about this post or tell me how bad/awesome it is.

Keep learning.

<3 Chris

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *