When Should Reading/Understanding Algorithms & Programming Logic Become Not Difficult

I've been going through JS tutorials for a week and a half (Lynda.com, and HeadFirst series). Things make general sense, but JS is not nearly as easy for me as HTML/CSS. When I look at really simple, beginner, code (e.g. Lynda.com's tutorial where you create a bingo card), I'm struggling to really read through the code in terms of the representation of logical arguments. My guess is that if I don't tackle this rightaway any other language I try to learn will be impossible, not to mention that I won't learn JS well-- or at all.

So can anybody suggest a book/web site that offers good basic instruction about algorithms? OR, am I just being too impatient and after a couple weeks, things should settle and the code will make more sense.

Here is an example of the silly basic code that still preplexes.

function newCard() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
     开发者_如何转开发       setSquare(i);
        }

HTML/CSS are document description languages, a way of representing visual structure and information, they are not programming languages as such.

JavaScript is not necessarily a simple language per se, so take it easy and you could do with an elementary programming introduction book.

Try to convert what you are reading to English, line by line, in order. The syntax, the symbols and the way it is written are probably the main source of confusion as you are not used to them. People who are not used to algebra panic at the sight of it, with cries of "I will never understand that, how do you read it?" - in time you will become accustomed.

Take this simple bit of code:

1 for (var i=0; i<24; i++) {
2    setSquare(i);
3 }

Line 1: a "for-loop"

A loop is a block of code (denoted by the braces {}) that is repeated until some point. In the case of a for loop, there are 3 settings (arguments) that control the loop.

The first is for initialisation, starting conditions, in this case setting the new variable i to 0, i=0.

The second is the condition it tells the loop whether to keep going and is checked every time the loop starts over. Here the condition is i < 24, keep going while the variable i is less than (<) 24.

The final part is an increment, whatever happens in the last part happens once per list. In this case at the end of the list, before the next loop. i++ means increment i by one, shorthand for i = i + 1.

So the loop is run multiple times, i starts at 0 and goes up by 1 each time, and once it is no longer less than 24, ie. it reaches 24, it ends. So the block of code is executed 24 times, with i = 0 to 23.

Line 2: Inside the loop is a single statement, a function call, to a function called setSquare, the value i is passed to it each time.

Line 3: The closing brace of the for-loop.

So all together, this code calls the setSquare() function 24 times, with values from 0 to 23.

What setSquare() does is a mystery without seeing that code as well.

Answering your question

It seems to me you're having some problems with basic programming constructs, such as functions, loops, variable declaration, etc - and if you don't understand those you're bound to never understanding any code at all. So my suggestion is to grab a book about programming (preferably about Javascript, in your case). I never learned JS from a book as I already had a programming background so the main concepts were already there, but a friend of mine liked O'Reilly Head First Javascript. Then, when the main concepts of the language are learned, take a look at the jQuery library.

Also, two quick notes:

1. HTML and CSS are not programming languages
2. You don't need to concern yourself with algorithms, at least for now - an algorithm is a series of complex procedures designed to solve a specific problem, and not a simple for loop used to iterate an array :)

You find learning JavaScript harder than the other two more difficult because it is a programming language where as CSS and HTML are markup/styling.

JavaScript isn't an easy first language to learn either. I wouldn't be too worried if you find yourself confused, programming is hard and it doesn't come naturally to everyone. Eventually, your mindset will change and things that seemed impossible at first will seem very intuitive.

That being said, there are very few good starting resources to learn JavaScript. Your best bet is to look at a book like Head First JavaScript. They will take a very slow progression through how to program (the mentality of writing algorithms to solve problems) and also introduce you to all of the features of JavaScript.

Keep your head up : ).

I would hope that you're not having trouble with the for-loop as that's fundamental to programming.

1 for (var i=0; i<24; i++) {
2   setSquare(i);
3 }

To follow up on on @Orbling's detailed answer, line 2 reveals the main point of the program. Assuming that setSquare(i) means what it says, the for loop apparently has the side effect of changing the state of a square to the current value of i in a for loop. My guess is that the width of the square changes with i.

A key team I mentioned is "side effect", which means that a program will affect the state of another entity outside of itself. The following for loops also has a side effect.

1 for (var i=0; i<24; i++) {
2   print(i);
3 }

where I will stipulate that print(i) will render the value of i in a JS popup.