Ignition: Week 7

Javascript, jQuery and Objects

This week was interesting. After having breezed through last week with some introductory material to HTML/CSS and Javascript, things ramped up big time when we went in depth with Javascript and jQuery. It was interesting because, among other things, we were able to utilize concepts learned from Ruby and implement them with Javascript but there were a lot of syntax challenges involved along the way.

Put simply, Ruby is elegant and beautiful and Javascript, while functionally cool and interesting, is just not attractivesorry, Javascript. It’s not you, it’s me. No, it actually is you, but I AM sorry. 

mye

Nevertheless, we push on. Why? Because, like I said, functionally Javascript is a beast. In fact, I have a plan I am looking forward to setting into motion and it likely involves becoming something of an expert with Javascript. The simple fact is that JS is something that is built into all modern browsers, has a wide support base and a rich history in the coding community that anyone can learn from – if willing.

Back to the assignments of the week. One thing we covered was Object Oriented Programming from the perspective of Javascript. If you refer back to my previous article from Week 5, which covered building custom Classes, Methods and Objects in Ruby, you will notice some similarities with the ways in which we construct our custom Classes in Javascript.

Here is an example of building a class in Ruby:

screenshot-at-feb-26-23-48-11

Take notice of how we set it up. We begin with class then capitalize the name of our class (in this case – Rectangle), then we initialize our variables needed to form objects of this class by declaring their names, preceded by an @ symbol (eg. @width = width), this allows us to access these variables from anywhere within the scope of this class, very useful! From there, we create a method which will return a value based on the arguments passed when the object is created (eg. mikes_rectangle = new Rectangle(4,5)). Cool? Cool

Now, let’s look at how it is done in Javascript…

screenshot-at-feb-26-23-48-45

Now, this is looking fairly similar. We begin with class then capitalize our class name (Rectangle) but then we use the curly brackets {} to enclose the code of our class. From there, we use the name constructor instead of initialize, which is used in Ruby. After these instance variables of our class are named, we enclose our constructor, this time with assignments of our instance variables and instead of using @ like in ruby, we precede our instance variables with this. From there, everything is the same, minus the ().

I had fun doing this, believe it or not. If you go back to my previous posts on creating classes you will see that I had some difficulty getting started on the concept in the beginning but as time has moved on, I have come to truly enjoy creating custom classes. They free you up to so much customization! The possibilities are truly endless, and I am having a lot of fun playing around with them.

Just something I want to interject here, when it comes to string interpolation. Do the following when working with Ruby or Javascript respectively…

ddsf

Don’t get tripped up by the color coding, the file in Atom was saved as .rb, so the Javascript looks weird. Input it in your browser and try for yourself! You can open your console by right clicking ‘inspect’ then directing to ‘console’ or shortcut you way there by using (CMD+Option+J)

From there we moved to jQuery, which was pretty neat. This of jQuery like a shorthand version of Javascript. It is a catalog of functions and methods that you are likely to use frequently in Javascript, and instead of typing them all out, you can just call on a simple jQuery command and you’re all set! I would advise against relying too heavily on jQuery at the detriment of learning more foundational Javascript. I can’t speak from experience but from everything I have read it would seem as though, heavy use of jQuery can easily be construed as a crutch rather than a skill, pure Javascript understanding would seem to be more valuable to both your coding community and your potential or current team/employer!

When you are looking to access or label a specific part of your webpage with jQuery you are going to call on it in the following fashion. We will use the example of calling on any and all DIV’s with the class name of ‘christopher-walken’.

cwawy

Normally, with regular JS we would do something like this:

let walkenDivs = document.getElementsByClassName(‘christopher-walken’);

but we are using jQuery, and we want things simplified, so we do this:

let walkenDivs = $(‘christopher-walken’);

Nice, huh? Short, sweet and to the point. We are going to always precede any element that we would like to alter or modify with jQuery properties by using the dollar sign, $. No need to call methods on the document DOM, just point jQuery in the right direction and let it do the heavy lifting for you!

This was a fun week overall, a lot was learned and there was a lot of trial and error just on the syntax front alone but I feel like I made some really great progress in my understanding of Javascript, and overall comprehension of the Object Oriented way of Programming.

Next week will be my last week Ignition and then it is on to On-Campus Launch Academy classes and then to my new career as a Developer!

The future’s so bright I gotta wear glasses!

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s