As most modern programing languages so does javascript support object oriented programing. If you have a light background in OOP in other languages what I will ask of you to do right now is totally forget about it as JavaScript is a different ball game. Once you get over the differences this language is one of the most powerful and agile languages in the world. Contrarily to most OOP languages that are based on Classes and Objects JavaScript in its core is built out of functions and objects.

Learning how to develop in Object Oriented JavaScript

This is a 3 part course that will go through step by step the core things you need to know to become an Object Oriented JavaScript developer. In these 3 parts you will learn all the key components and tools involved with building and deploying javascript OOP applications. In the process we will build and interact with the Google API and build and customize and interact with the Google Map API. In the process we will learn about : Google API's, Google Maps, Markers, Constructors, functions/methods, properties and variables, scope, extending objects, prototypes and much more.

In this first part we will setup and create our first Google map. We will learn how to create our own Objects and create our first Constructor. By the end of this class you will know how to build objects(classes) and learn how to work with them.

Although we will be working with DreamWeaver it really doesn't mater you should work with what ever tool you feel comfortable working with. This title isn't intended for totally new users but instead its intended for students that completed our getting started with JavaScript titles. If you are totally new to JavaScript you should stop right now and move to our earlier titles. In this first video we will build out the basic html file we will be working with for the remainder of our class. By the end of this video we will have a HTML page with CSS and our linked JavaScript files.

Google Maps JavaScript API V3 Access

In this video we go through the critical steps that are involved before we can start working with the Google Maps API. We start by visiting the google API site(https://code.google.com/apis/console) once there register/log in and fill out all legal requirements. When you complete you will reach the page that we dig deeper into in this video and explore how we add more API keys to our applications. By the end of this video you will know how to add Google API keys and see how to integrate it into our HTML pages.

Using JavaScript Logging instead of alerts

We start working in our application by creating our first init function in our application. As alerts are very retro we will take a look at a more modern and easier way to work within javascript using the Console.log(); in the console we can output information without it even reaching the user - that's really handy and useful so in this video for the most part we cover this topic. Until the more modern browsers we just had no way to output information in a way that is transparent to users but now days its easy and almost fun doing it. In this video we take a peak at how to find the console both on FireFox and on Safari.

Creating a Google Map

Its time for us to actually create a map. So far we covered all the details and steps we needed to take before starting to program. In this title we will build the map from start to scratch. We go step by step explaining the step involved with creating a google map. Starting with talking about Latitude and longitude and how we can figure out the values that would go into it. We discover some Google lab options for google maps that will enable us to pin point a location and get the lat/lng values for it. Once we know where we want our map to be centered it will be time for us to create a new google.maps.LatLng object. We continue going through all the steps to create the map. In this session we talk about what we are creating and hint into what is happening behind the hood (we will learn how to create this things later in these titles beyond using them).

Styling our Google Maps

Before we move on and start actually to build our own costume elements and dig into oop in JS let's add some customization to our map. Our goal will be to dynamically change the colors of our map and gray scale it. To do this its very easy although it will take us 3 steps. Our first step is to create our styling object, then we name our styling object and lastly we define our current view of the map to our new styled view. By the end of this session you will know the basics of styling in Google maps.

Our first JavaScript Constructor

Yes its time. Now that we created and worked with a few objects its time for us to know how to create our own objects. Constructors in JavaScript are very simple if you know what a function is then you know how to create a constructor. Now that you know its easy to create lets now talk about how to turn functions into constructors. Every function can be a constructor its that simple. Only when we actually trigger the function does javascript actually define it as that. The step involved is by calling the 'new' key. By the end of this session you will know how to create a constructor, you will know how to build objects based on this constructor and define them as a variable.

We start talking about 'this' and what it actually means. The this is not a static value it always returns to us what we are when we are in it. And as such when we call the this operator depending on where we are in our code we will get a different value returned. The nearest object we are in is always returns to us. Although we don't talk about it much at this stage pay a lot of attention to the key word this as it will help you a lot through out the course as we start in later sessions about scope.

JavaScript Scope

As promised in the last bio lets talk scope. We will talk a lot about scope and until you feel very confidante with scope in JavaScript you will not be comfortable as a Object oriented JavaScript Developer. One of the most critical key things you want to know really well is what scope is and how it works in general. So far we worked in an OOP world but so far we didn't own any of the objects and as such we didn't focus to much on scope. Now that we are moving deeper into OOP as we are creating our own objects we need to understand how scope works within objects. By the end of this session you will have a much more clear understanding of what scope is and how to solve issues when you loss you scope.

JavaScript is a very flexible language. We will focus our direction to one way of programing geared at learining how to prototype and how to build objects. There are many ways to add variables to an object we will explore some of them but our main goal will be to focus on one streamlined variation as javasciprt is really flexible and as such can get really complicated if you mix and match.

By the end of this first session in Objects Oriented JavaScript you will know how to create custom objects, build your own constructor and have a fair understanding of how to implement your learning into the Google Maps Environment.

Download
Source