Delving into JS

JavaScript
1

With HTML/CSS pretty much learned, I am focusing on Javascript…completed the 10hr course on codecademy. Just some quick questions. I’ve always used jQuery to fufill my Javascript needs and googling scripts and adapting them for my needs has always been easy to do. I want to advance in my industry, as my primary job is HTML/CSS (and I love it, and I am thriving right now - I feel like I’m impressing my co-workers and staff)…but I need to add more to my stack. Javascript/PHP I can do but I’d google examples of scripts and work them in with my scripts. I want to do everything myself now.

var Person = new Object();
That’s the same as function Person() { }, right?

Then I’d do like…var ryan = new Person() as my constructor?

A property would be like ryan.firstName=“Ryan”; and a method would be ryan.firstName() = function(){}?

I could also do that exact same code I typed above but like…

function Ryan()
{
  this.firstName="Ryan";//property
  this.firstName() = function()
  {
    //method
  }
}

I have switches, prototype, functions, methods…those I’m confident at…sorta.

Now I have these tools under my belt, what should I learn? I see properties like innerHTML and …

Should I focus on learning these?

Also I notice some sites have like <a onclick="functionHere();"> etc. I thought that was no longer neccessary? Should inline Javascript like this be avoided? How would you do it? An event listener? What do you all think I should make sure I learn? E.g. event listeners, dom element properties…

2

var Person = new Object() is not the same with function Person() {} but with var Person = {}.

3

Yes it should be avoided - an event listener is far more flexible.

There are lots of ways of defining objects in JavaScript. They are not necessarily exactly equivalent and not all need the new keyword.

There are lots of Document Object Model commands for performing all sorts of updates to the web page.

I have hundreds of code examples at http://javascriptexample.net

1 Like
4

What wouldn’t I be able to do with that function property that I would be able to do with the new Object()? And did your text mean that var Person=new Object(); = var Person = {}? Ah yeah that is right…

@felgall,nice. I’ll read through your website. It’s hard finding a resource that is good for users who have learned the basics of switches/loops/methods,etc etc. It’s either beginner/advanced that I’ve found so far. Should I delve straight into DOM commands?

5

Defining a new object using the literal notation {} is the recommended way of creating new objects, instead of using the Object() constructor function together with the new operator.

Your function does not create an object. The way the function is defined, using this keyword, is adding the properties and the methods to the global object instead. If you were to make a var ryandouble = new Ryan() call, only then it will create a object.

1 Like
6

Ah so I’d reference those global Object properties like Object.property etc etc? Using the new Ryan() example, I’d be able to call Ryan.method() instead of Object.method()? I think I understand you. Unless I declare a new Object, all properties will be assigned to the global Object. Thank you! I appreciate your help.

Felgalls site looks like it has a lot of information. I’m reading through everything…gah I wish it could be Friday so I could spend the weekend reading all this.

7

ryandouble.method() You need to learn more about prototype and inheritance.

8

What?

Also, if I added properties via this keyword…say I had 3 functions all giving new properties via the this keyword. I could access THEM ALL? via Object.property ? What if I overwrite a property with another? The latest value given to the property will be the one used?

Edit- to make this.property avaialble to all Objects, would I do this.prototype.property etc? Or do I even need to?

9

http://www.objectplayground.com

I think it will clarify a few things for you.

1 Like
10

I’ll watch that on my lunch break - got anything text-based for now? Could you answer my above post just so I know?

Edit-there is more than just a youtube video on that page…I see they have examples. Thanks. I’ll read them.

11

this keyword points to the current object. It could be the global object, it could be a new Ryan() created object, ryandouble.

You can easily overwrite properties and methods in javascript, there are no namespaces available. That’s why there are API rules you have to follow.

this doesn’t work like that. Ryan.prototype.property is what you’re looking for.

12

Thank you vion9929 I understand now. You’ve been a great help. I completely ignored the fact that this applies to the current Object.

13

You should watch the video. Inheritance in javascript can be prototypal or classical.

14

The video is 27 minutes so I plan on just watching it during lunch since I get 30 minutes or so. Can’t focus on coding and listening to the video. I’d rather listen to my music and code instead and leave that video for when I’m more focused :smile: .

15

I highly highly highly recommend https://developer.mozilla.org/en-US/learn/javascript

It has lots of high quality learning resources, and it groups them by introductory, intermediate, and advanced. CodeCademy is the first item in the introductory section. You could move on now to the next in the list.

1 Like
16

Yes I actually went through all that Jeff. Thank you. Couple of links I still have to read but…

I watched the video. Very informative. Is “use strict” basically, at the top of my JS file, I write…?

"use strict";

17

nope. it can only be prototypal. every inheritance that looks like it were classical has some wrapper code to update the prototype or mimics it using properties (since functions are first-class objects, assigning a function to a property is completely legit, but doesn’t make it an inherited method).

PS. essentially all functions in JS are properties (functions belonging to an object) because the global scope is also an object.

18

Ah that’s interesting. I wish I had some practice programs to code to get a better understanding of OOP…any ideas? Part of hte reason I am so late on learning Javascript is because I don’t know what I could use it for.

19

Question, what cases would I need to do Object.functionName(); apposed to just functionName();? I understand they are properties but why would I ever need to access them as such?

Assuming that the function is globally set. outside of any functions (if inside a function I’d do Object.functionName.methodThing() to access a function inside of a function?) Or can functions inside of functions only be accessed if they are Objects?

20

One of the key concepts behind OOP is the packaging of data and its associated behavior into a cohesive unit (i.e object). There are several reasons why you might want to do this, here’s one:

Imagine a scenario where you are processing an order, looping over each item to get a shipping cost or something. If your items are just dumb data containers, you’ll have to pass each one to a function that calculates the shipping cost for that item.

Let’s say that you have some items that require a different shipping requirements, and therefore a different method to calculate the cost. You’d have to introduce some sort of logic to determine the type of item and call the correct function.

With OOP, each item is an object with it’s own calculateShipping() method. We could introduce different types of item objects, so that we can call the same method on each order item, and the object itself takes care of how that cost is calculated.