Just not getting javascript

Just not getting javascript
0

#1

I am having real problems understanding javascript.
I have been doing loads for JS lessons with treehouse but it just does not make sense to me.
Most challenges I don’t have a clue how to solve and when I watch the solution I knew I would not have been able to solve it and even know how to begin to start the challenge.
I’m getting to the point where I think I will never understand javascript, it’s getting me really down.
What do I do?


#2

Try

It is free and Gordon does an awesome job explaining the stuff.

I loved the course myself and know several others who say that this is the one javascript course where things began to make sense.


#3

Have you learned programming in another language, such as Python, before? Is it just JavaScript or programming in general that you’re finding hard?

You might try Udacity’s Introduction to Javascript course. It’s free, though they try to push paying for certification. I focuses on the basics of Javascript without worrying about web pages, and there are numerous little “quizzes” (they’re coding exercises) to practice with.

One caveat: Their coding interface is hokey with some quizzes, so if you think your answer was right but it’s not being accepted, check their forum. Don’t assume it’s you.

Also, it’s this course (below), not the Basic Javascript, which is older and more involved.

If you want a really slow, gentle intro to programming in general, take Coursera’s Programming for Everybody course. It’s Python, not Javascript. It’s also free, though again, they nag you to pay for a cert and try to mislead you by getting you to enroll for a free trial. You can enroll entirely for free as an audit student, so don’t be fooled.

If your problem solving skills need improving, you might want to study logic. You could also post an exercise or two along with how you would have solved it so we can see where your reasoning might be off.


#4

Check out this guy, he also has a facebook group.

oops: Looks like @Dragomara posted the same link too! So count that as 2 votes for W&C.


#5

maybe check code avengers.

it may look silly. but it was good to me.


#6

@sypher85
If you are new to programming altogether, perhaps you like to read and then perform tasks?

My suggestion as I am working through it in conjunction with everything else:
http://eloquentjavascript.net/

I did buy a copy, but the author Marijn Haverbeke just puts it out there for free in your web browser.
After that there are some “You don’t know JS” books.
Also some JS Ninja books.
Well lots of books to supplement what you are doing.

This might be the “ground up” approach you are looking for.

Keep at it, if it was effortless, you wouldn’t get the enjoyment from it that you will eventually realize.

Cheers,
-WWC, “Brad”


#7

Once you have watched the solution to a challenge, try and complete it yourself without looking anything up. After you have done this a few times and can understand what each line of code is doing then you’ll see progress. Even if you only understand small parts of JavaScript, as long as you learn something small each session then you’ll be surprised how quickly you learn more.


#8

Thank’s Brad, I will look into the eloquent javascript and “you don’t know JS”.


#9

Thank you for all the reply’s, I think I was in a bad mood after completing the last javascript challenge on treehouse but after some days away from it I feel better now.
I will look at all the links and see if they can help me in the future.


#10

Actually, stop for a moment.

If you have hard time understanding other’s code or even the solutions themselves, you should slow down, take a step back and stop stressing yourself like that.

Don’t think about solving a problem IN THE JavaScript [in evil voice].
Look at the problem, take it down to simple atomic sub-problems that have single obvious solutions, write it down, draw some squares and arrows, visualise your solution with the help of diagrams. Simply put, try writing something like a cooking recipe to solve any task. After you have figured the WHYS, start looking up the JavaScript syntax.

Programming is just problem solving, the specific language comes second. What you should be aware of, though, is that each programming language comes with “building blocks”.

They are the algorithmic and control flow structures like sequences, loops, conditionals, procedures/functions…

  1. Algorithms and control flow
  2. Pseudocode standard

After you have done a solution ala “cooking recipe” in a pseudocode using these simple building blocks, you can rewrite it in javascript by simply looking up the terms on google.


#11

JavaScript was specifically designed by psychopaths to liquefy brains, and make websites dynamic, in that order. It’s absolutely okay to not get it at first. Eventually, after all your grey matter has been burnt to a crisp, you’ll have what we like to call “The ‘Ah-hah!’ moment”. It’s the strange phenomenon where your brain will go from pulverized goo to thing that understands JavaScript, or at least parts of it.

To help you, here is a shove down the rabbit hole.

*****What follows in my short guide to JavaScript that while being a short guide, is admittedly long for a forum reply, so clear the next 30-45 minutes, get some coffee, get comfortable and read on. What follows is Murph Stranger’s Learn JavaScript in less than an Hour Guide *****

You probably know the<script> tag is how you attach your JavaScript to an html document, so we’ll skip the html lesson and assume you have your script tag at the bottom of the body tag’s content, and it points to an external file, something like ‘script.js’. If you haven’t figured out that much, slap<script src='./js/script.js' type='text/javascript'></script> in your index.html file, just above </body>, and then add a folder to the directory you saved index.html in, called js, and inside that folder make a file and call it script.js. Most of your code goes in that file.

JavaScript like most languages will start when loaded, at the top of the file and process line by line. There are ways to alter this and have your program do different things based on certain conditions, and we will get to that. But for now, keep in mind, top, down, left to right. Each line gets read, then processed.

Programs work with values. You can work with values directly, in which case we call them literals, like"this is a string".toUpperCase() takes the literal string value, “this is a string”, calls its toUpperCase() method (a method all strings have in javascript, whether you gave it to them or not, don’t worry about it now, I will cover it in a minute), and like most methods, this won’t change the string, but it will return a new string that can be assigned to a variable, or used exactly where you wrote it. That genuinely sounds a lot more complicated than it is and you’re likely to over think it, so stop thinking about it right now, I mean it, and know we will circle back to this too, and now move on to variables.
Not every value in your program is known before it is run, and sometimes you use the same value a hundred places and need to change it between tests. Congrats, you have identified the best cases for using a variable. They used to be declared with var, but lately you see them declared with let. That’s just a bit of weird that comes from the latest standards of ES6, the latest “version” of JavaScript. All declaring does is prepares a space in the computer’s ready access memory for you to put a literal value into, and the name of the variable is the way you refer to it. Thankfully JavaScript doesn’t require you to get too detailed about what kind of values the variable will be.


let myCat;

is a fancy way of telling the computer to mentally assemble a box and write myCat on it with a Sharpie marker. You put things in the imaginary box by assignment, like so:


myCat="fluffy";

Now, any place in your code that you needed to reference “fluffy”, such as"fluffy".toUpperCase(), can be rewritten as myCat.toUpperCase(). And just like that, your program works for everybody who was dumb enough to name their cat “mittens”.
Remember what I said about changing the flow of the program earlier? And it being based on conditions? Time to talk conditionals! Most decisions are made with if statements. If it is raining, bring an umbrella. If you are out of milk, buy more.

If (myCat=="mittens") {
    alert("Your cat has a stupid name");
}

And you probably thought I had no reason for my earlier crack at people who name their cat “mittens”.
The part in parentheses, with two values or variables separated by double equals, immediately following the if keyword is a conditional. As the program is read by the computer, that bit in parentheses will evaluate to a true or false value, and the block in the curly brackets will execute if it is true. So, say you had a line somewhere previous to this that assigned myCat to “fluffy” (remember, programs are read top, down, left to right), the conditional would evaluate at run time and the computer would read it as

If ("fluffy"=="mittens") {
    alert("Your cat has a dumb name.");
}

And since the part in parentheses is not true, the code in the curly brackets following the if keyword is skipped.
Loops work much the same way. while followed by a conditional executes code between it’s curly brackets until the conditional evaluates false. So, when dealing with loops, always put something inside to ensure the value eventually evaluates to false.

let count = 0;
//I want this to run ten times
while (count < 10) {
    //do some stuff
    console.log("Haha, your cat has a dumb name!");
    count = count + 1;
}

So far, I’ve been expecting you to ignore the alert() and console.log() and .toUpperCase() junk, but without really talking about it. So let’s talk about it.

You remember when I said you can make the computer assemble a box to put stuff in its memory? Like strings and numbers? You can make it do the same thing, but with blocks of code. Instead of “fluffy” or 345, you can make
x = num * 2;
a thing that’s called by a fancy made up name. These are functions. Functions can contain any code you would use any other place, but instead of writing it out, you call it by a name you gave it, and follow it with parenthesis. But like variables, you have to declare them to use them. The computer won’t have a box with that name on it until you ask it to make one, and making one DOES NOT execute the code you put in it, only calling it will make it run. So, say we declared a function like

function renameMyCat (name) {
     If (name=="mittens") {
          return "My owner gave me a stupid name";
     } else {
          return name;
    }
}

And then later in your code, you could use that function like so:
myCat = renameMyCat("fluffy");
In the above example, you see where we inserted “fluffy” where we had the name variable in our earlier declaration? That’s called an argument. Not Like how people disagree, but a value in place of a parameter, which is what name was in our declaration. Just fancy words for variable, in a declaration it’s a parameter, and the value you give it when you call it is the argument (which can be a literal value or another variable, in which case the value of the variable will be used). What it means tho, we can put whatever we want in place of name in our function calls, like renameMyCat("Shark Bait"), orrenameMyCat("Dog"), and inside our function, every place we used the parameter, name, in this instance, the computer would substitute it for the argument. The return keyword is how you get a value out of a function. Think of functions as being like vending machines. Still a box, technically, but parameters are where you put your input, your money, the arguments. And return is the window you reach your hand into to get your candy bar. When you have a return statement in a function, to catch the value that comes out, you have to put a variable ahead of the function call, like we did when we calledrenameMyCat(). We assigned it to myCat. Just think of it like this, if you don’t plan to eat the candy immediately, you want to put it in another box.

// here we call the function we declared
//with an argument of "Mouse Trap"
// and store the returned value to the 
//variable myCat
myCat = renameMyCat("Mouse Trap");

So all those weird names followed by parentheses are functions. But a funny thing happens when there is a dot, ., involved. That means it’s part of an object. Everything in javascript is an object, and functions that are part of an object are called methods. It’s exactly the same thing as a function, but calling it a method is a cue that that function is attached to an object. That’s important to some folks, not too much to our discussion.

So earlier when I said"fluffy".toUpperCase(), I was calling the toUpperCase() method, or a function of a string literal object. Everything in javascript is an object, even the literals, which is how that string has a method at all. I won’t get into too much detail with objects, because Object Oriented Programming is a whole separate headache you won’t need just yet, and not fully understanding that mess at this time won’t stop you from making use of it in your code, which is where the real wizardry of JavaScript comes in.

Document Object Model, or DOM, is how your code will interact with your html. All those variables and functions you write can make your html change after the users browser loads it. Hence, Dynamic HTML.

So, everything in javascript starts at the window. Your browser window is an object, handily referred to as window. Look, the guys who originally wrote this stuff weren’t that imaginative. It has some methods, like .resize() which is called whenever the window is, no surprise here, resized. There are others, and properties as well, but I’m not going to cover all of them, because we have to get to one important property, document. That’s going to be the one you will probably want to interact with most in your code, as it holds all of your html. It’s also an object. Document Object Model. And all your html elements are objects too. If you give an element in your html an id attribute, like<div id="container"></div>, you can interact with that element, and target it with document's getElementById() method, like this:


let container = document.getElementById("container");

As you can see, the value of the id attribute is the argument you pass to the document’s getElementById method, and it returns the reference to your html object to a variable you assigned it to. Now you can use the variable container in your code to refer to the div element with the id attribute of “container”. And like everything, it’s an object, and has properties and methods.

The most useful property is the innerHTML property. It’s a not a method (function), it’s a property (variable), so when you refer to it, leave off the parentheses:
container.innerHTML="Now we are getting fancy";
HTML elements can have their insides rewritten this way. You can change the contents of a heading, paragraph, the underlined text of a link, really anything. And you can use html in the string you assign to innerHTML, so you can use JavaScript to add more html elements to your html elements, nesting them like you do when you write html normally in the html file. It is in a string tho, so start and end with quotes, and use escaped quotes if you need quotes in your string (", that’s backslash double-quote, will be ignored as a special character that ends strings, and instead just becomes a quote within the string, keeping you from accidently signalling the end of a string early).

You can make your code respond to the user by using events. These are methods of html elements that trigger when a user interacts with the document, and have pretty easy to remember names like onclick, which as you can imagine, triggers when the user clicks on the element. You can add these in your html, with onclick attributes like


<div id="container" onclick="function() {
    myCat = renameMyCat(document.getElementById("container").innerHTML);
}">Fluffy</div>

which my example here using stuff we’ve mostly talked about already demonstrates in a complicated way, but you may actually understand it if you’ve read all this so far (congrats if you have, I know it was long, hopefully it wasn’t boring). The one concept I used that we didn’t mention is the anonymous function, which is declared without a name, since we don’t need to call it anywhere else in the code. The syntax is simply


function () {
    //the code in these curly braces 
    //will run once, when processed
}

Anonymous functions are handy when you have something like an onclick event, which is used to trigger a function, but you want it to do more than run a single function, or you need it to assign a variable to the return value of a function, but its inconvenient to do so in the context of where the function is called, like an onclick. You could just as easily declare a function in your script file that does all of that and assign that function by name to the onclick attribute and it will work the same. You can also ignore mucking about in your html with this entirely, and add the onclick event listener with your JavaScript (a solution you have to use if you add an element using javascript and the innerHTML property discussed earlier).
In your JavaScript code it looks like this:


let container = document.getElementById("container");
containter.addEventListener("click", function() {
    myCat = renameMyCat(document.getElementById("container").innerHTML);
});

Here again, I’m using an anonymous function, but I am passing it as an argument, along with the type of event I want to use to trigger the function, to the addEventListener method of our container html object.

You can use this to not only change the text of html elements, or assign new values to variables in javascript, as I have shown here. You can change the styles of elements as well. I won’t get into how, other then to say all elements have a style attribute that takes css as it’s value and applies it, and that style property is another JavaScript object that can be manipulated in very similar ways to what we covered, and the effect is absolute magic.

So, that’s a lot to digest, said as simply as I think it can be stated. Hopefully any of this proves helpful. Check out freeCodeCamp’s lessons on JavaScript for a much more in-depth explanation, and w3schools.com or Mozilla Dev pages to get an even more detailed explanation. Good luck, you got this.


#12

thanks for the reply, its been a year since I had problems getting my head around javascript, I put it aside for a bit and been mostly working on HTML and CSS but in the last two weeks I have started to learn JS again so your post will help me loads.


#13

Wow thanks for the reply, I shall read it properly soon.


#15

To whom this may concern,
There’s also an app you can download on your phone which makes it easy to understand and they explain it in a beginner friendly way. its called Grasshopper. it`s free and explains Fundamentals all the way to Animations II. And if you get stuck there are little practice parts you can play that will help you with what you are stuck with so when you go back you can do it and continue on. Good Luck!


#16

It’s probably good you didn’t read it right away, in its entirety. I forgot the forum isn’t code friendly on the mobile version, so I had to come back and add the script annotations. Now it should make sense.
If you have questions, feel free to hollar at me.