Trisphee - View Single Post

Coda · Posted 01-05-2017, 03:25 AM

Seems I need to back up a level -- overestimated your past experience. I'm going to rearrange my response instead of answering your questions in order, so that I can build on what I'm saying.

So... First off.

A variable is a name you use to refer to something. What is that something? Anything you assign to it. When you say "x = 1" you're saying "from here on, when I say 'x', I really mean '1'." When you say "y = x" you're saying "whatever thing I was calling x before, I also want to be able to call it y (feel free to go ahead and use x to refer to something else if you want)."

There are some nitpicky details that vary from language to language about what the = there actually DOES. I'll stick to Javascript for this post, and I'll try to be as general as possible so that it DOES apply broadly, but you should be aware that there are other ways that things happen that do in fact come up in some modern programming languages.

In Javascript in particular, variables are references to values. If you change part of that value, then you can see that change through every variable pointing to that value. Of course, you can't change the value of the number 1, so it's irrelevant there, but if the value is an object, it matters. More on this below.

It's... actually really hard to explain what an object is in concrete terms because there are several different definitions with a lot of overlap that get used in a fuzzy way. The simplest definition of "object" that I think I can give is that it's a value made up of other values in a structured way. This definition jives with most (but not all) of the ways the term "object" gets used.

In particular, when I referred to treating a function as an object, that's one of the definitions that doesn't jive. *sweatdrop* In THAT case, "object" means any value that can be referred to and moved around as a single entity, regardless of what it's made of. In many languages, functions and values are completely different and you can't give one function to another function for it to use; in Javascript, you can store a function in a variable just like any other object.

In Javascript, you can create a new plain object using {}, and you can access parts of an object using the . operator.

Code:

var x = {};
x.a = 1;
x.b = 2;
x.a + x.b   // 3

There's also a shorthand way of creating objects and things that you immediately want to put inside:

Code:

var x = { a: 1, b: 2 };
x.a + x.b   // still 3

When I say "a is defined on x" this is what I mean -- the object "x" has something named "a" inside it (if it didn't, "x.a" would be said to be "undefined"), and the place where it's specified what "a" is is called the definition.

Some kinds of objects have stuff preloaded onto them. For example, the "document" object that a web browser gives you has "body" and "getElementById" preloaded into it. Usually you can add new stuff. Sometimes you can't. At your level, best to assume you can't, because adding stuff to objects you didn't make can make things confusing to reason about.

So basically, the difference between a variable and an object is that an object is a concrete thing that has some value to it, and a variable is a name that points at one (or possibly zero) of those concrete things.

EDIT: I said I'd come back to it, and here it is. A variable can only point at one object, but you can have multiple variables pointing at the same object. A quick demonstration:

Code:

var x = { a: 1, b: 2 };
var y = x;
y.a  // 1
y.a = 3;
x.a  // 3 now

Invoke is a jargon term that's basically synonymous with "execute"/"run"/"call". The specific meaning of invoke is that you're intentionally and directly pointing at a function and telling it to do its thing.

A method is a function accessed through an object that does things with that object. In Javascript, a function that you invoke as a method has the special variable "this" refer to the containing object.

In your specific example: Yes, "addEventListener" is a function inside the object called "window", and so you can say that it is a method of "window". If you could look at the code inside "addEventListener" (you CAN'T, but if you COULD) you would see that it would be using "this" inside, and when you call it as "window.addEventListener" then "this" would be the same as "window". If, on the other hand, you had taken a button from the page and called "button.addEventListener" then "this" inside would be the same as "button".

The reason "load" is in quotes is because events (a jargon word meaning "things that happen from outside of your code, and you can do something when they occur") in Javascript are referred to by string names. There's nothing particularly magical about it. The browser just says "okay, everything on the page is done loading, so I'm going to see who added event listeners for the event named 'load' and invoke them."

For "addEventListener" in specific, the first parameter is the name of the event, and the second parameter is the function (not the name of the function, the function itself) that you want the browser to invoke when the event "fires" / is "dispatched." It should be noted that this function doesn't WAIT for anything -- the code below it keeps running. When an event happens, the browser dispatches it as soon as there isn't any other Javascript code running.

Your description of writing Javascript code is... well, it's not WRONG. A function IS, at its core, a list of instructions of what to do to the variables the function can see.

I think that covers everything you were asking for?

EDIT: Oops, forgot to go back and touch on my "more on this below". Editing that in with a second edit...

		#66	Coda Developer
Seems I need to back up a level -- overestimated your past experience. I'm going to rearrange my response instead of answering your questions in order, so that I can build on what I'm saying. So... First off. A variable is a name you use to refer to something. What is that something? Anything you assign to it. When you say "x = 1" you're saying "from here on, when I say 'x', I really mean '1'." When you say "y = x" you're saying "whatever thing I was calling x before, I also want to be able to call it y (feel free to go ahead and use x to refer to something else if you want)." There are some nitpicky details that vary from language to language about what the = there actually DOES. I'll stick to Javascript for this post, and I'll try to be as general as possible so that it DOES apply broadly, but you should be aware that there are other ways that things happen that do in fact come up in some modern programming languages. In Javascript in particular, variables are references to values. If you change part of that value, then you can see that change through every variable pointing to that value. Of course, you can't change the value of the number 1, so it's irrelevant there, but if the value is an object, it matters. More on this below. It's... actually really hard to explain what an object is in concrete terms because there are several different definitions with a lot of overlap that get used in a fuzzy way. The simplest definition of "object" that I think I can give is that it's a value made up of other values in a structured way. This definition jives with most (but not all) of the ways the term "object" gets used. In particular, when I referred to treating a function as an object, that's one of the definitions that doesn't jive. sweatdrop In THAT case, "object" means any value that can be referred to and moved around as a single entity, regardless of what it's made of. In many languages, functions and values are completely different and you can't give one function to another function for it to use; in Javascript, you can store a function in a variable just like any other object. In Javascript, you can create a new plain object using {}, and you can access parts of an object using the . operator. Code: var x = {}; x.a = 1; x.b = 2; x.a + x.b // 3 There's also a shorthand way of creating objects and things that you immediately want to put inside: Code: var x = { a: 1, b: 2 }; x.a + x.b // still 3 When I say "a is defined on x" this is what I mean -- the object "x" has something named "a" inside it (if it didn't, "x.a" would be said to be "undefined"), and the place where it's specified what "a" is is called the definition. Some kinds of objects have stuff preloaded onto them. For example, the "document" object that a web browser gives you has "body" and "getElementById" preloaded into it. Usually you can add new stuff. Sometimes you can't. At your level, best to assume you can't, because adding stuff to objects you didn't make can make things confusing to reason about. So basically, the difference between a variable and an object is that an object is a concrete thing that has some value to it, and a variable is a name that points at one (or possibly zero) of those concrete things. EDIT: I said I'd come back to it, and here it is. A variable can only point at one object, but you can have multiple variables pointing at the same object. A quick demonstration: Code: var x = { a: 1, b: 2 }; var y = x; y.a // 1 y.a = 3; x.a // 3 now Invoke is a jargon term that's basically synonymous with "execute"/"run"/"call". The specific meaning of invoke is that you're intentionally and directly pointing at a function and telling it to do its thing. A method is a function accessed through an object that does things with that object. In Javascript, a function that you invoke as a method has the special variable "this" refer to the containing object. In your specific example: Yes, "addEventListener" is a function inside the object called "window", and so you can say that it is a method of "window". If you could look at the code inside "addEventListener" (you CAN'T, but if you COULD) you would see that it would be using "this" inside, and when you call it as "window.addEventListener" then "this" would be the same as "window". If, on the other hand, you had taken a button from the page and called "button.addEventListener" then "this" inside would be the same as "button". The reason "load" is in quotes is because events (a jargon word meaning "things that happen from outside of your code, and you can do something when they occur") in Javascript are referred to by string names. There's nothing particularly magical about it. The browser just says "okay, everything on the page is done loading, so I'm going to see who added event listeners for the event named 'load' and invoke them." For "addEventListener" in specific, the first parameter is the name of the event, and the second parameter is the function (not the name of the function, the function itself) that you want the browser to invoke when the event "fires" / is "dispatched." It should be noted that this function doesn't WAIT for anything -- the code below it keeps running. When an event happens, the browser dispatches it as soon as there isn't any other Javascript code running. Your description of writing Javascript code is... well, it's not WRONG. A function IS, at its core, a list of instructions of what to do to the variables the function can see. I think that covers everything you were asking for? EDIT: Oops, forgot to go back and touch on my "more on this below". Editing that in with a second edit... Games by Coda (updated 4/8/2025 - New game: Marianas Miner) Art by Coda (updated 8/25/2022 - beatBitten and All-Nighter Simulator) Mega Man: The Light of Will (Mega Man / Green Lantern crossover: In the lead-up to the events of Mega Man 2, Dr. Wily has discovered emotional light technology. How will his creations change how humankind thinks about artificial intelligence? Sadly abandoned. Sufficient Velocity x-post)
	Posted 01-05-2017, 03:25 AM