<div class="grid--cell fl1 lh-lg">
<div class="grid--cell fl1 lh-lg">
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, <a href="/help/reopen-questions">visit the help center</a> for guidance.
</div>
</div>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2011-11-08 02:06:17Z" class="relativetime">8 years ago</span>.</div>
</div>
</aside>
Ok I trying to learn javascript for my first language but I'm having trouble with the logic/structure of "programming". I know almost everything in javascrupt I can write statements/loops/arrays/objects/ect... but I can't wrap my head around how to use it or put it into action and I can't find what I looking for on the web.
So I guess my question is how do you structure a program in javascript?
does it go like:
variables go here
functions go here
arrays go here
ect...
I just dont get it..
</div>
It is very hard to define a structure for a program without specifying what it will do, what will be its size, extensibility, purpose etc.
That said, a good rule of thumb for (local) variables is to define them at the beginning of the function. Because javascript doesn't use a block scope like other C-like language, all of the variable declarations are internally shifted to the beginning of the function anyway.
As for functions, it is usually good to organize them into objects or modules using common functionality and data as a base (javascript is an object oriented language, so pretty much all OOP principles apply here).
If you must start with javascript as a programming language, then a good reference for having good structure and habits for your javascript code would be Douglas Crockford's Javascript: The Good Parts. There are a lot of gotchas in javascript, and Crockford is meticulous about style and structure in it.
I can't stress enough how important a good resource is for learning a language.
MDN is wonderful for learning about each of the available objects/methods. Additionally, treat JavaScript: The Good Parts as required reading.
Use jslint.
Ask lots of questions.
As for the actual structure of the program:
//wrap your code in a self-executing closure to prevent global namespace pollution
(function () {
//use strict because it's good to brush your teeth
"use strict"
//initialize all vars at top of functions
var a, b, c, d;
//declare your functions after your variables
function foo(bar, baz) {
var fizz, buzz;
function subfunction() {
//some code
}
//more code
}
//whatever code needs to run should follow function declarations
a = 1;
b = 2;
c = foo(a, b);
//if you need to make something globally accessible, do it explicitly
window.foo = foo;
}());
Also: HTML, CSS, and JS work together in an MVC pattern if you use them correctly. Keep your HTML in .html files, your CSS in .css files, and your JavaScript in .js files. Don't use inline events <body onload="whatever();"> breaks the separation of content from style from interaction.
I would take a step back and ask Why JS as you're first language? If you're going to spend your career as a script kiddie (I mean no offence, some very clever people are script kiddies) then carry on. However if you want to get into server side / desktop development then you will find the transition to something like Java or .Net very hard. JS is a first-class language and unless you're just going stay within the family (F#, python, ruby, etc) moving to Object Orientation is very hard. If you really want to learn how to program check out Alice, you'll have a lot of fun too. Anyway back to the question:
function myFunc(param) {
....
}
or
(function(){
. . . .
function anotherFunc() {
. . . . .
}
}())
or
var myFunction = function() {
. . . . .
}
All of these structure are valid under different circumstances and as Thomas states, one size doesn't fit all.