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

Question

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);
        }

Answer 1

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.

Answer 2

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 :)