Newbie Guide to JavaScript

Microsoft did not invent DOS. They bought it for $65,000. Then they licensed it to IBM who needed an operating system to power their newly-invented PCs. Of course that one cleverly-negotiated business deal turned Microsoft into a monopoly that lasted for many years.But Microsoft has had its creative moments. They did not buy or steal everything.Bill Gates, Paul Allen, and some friends wrote the BASIC programming language. BASIC is wonderful in its simplicity. It still exists in Microsoft Office products and in various variations in Windows like VBScript and even VB.net. It is perhaps the easiest programming language in the world. In addition to its easy syntax, you can stop a running BASIC program, change a line of code, and then let it continue.BASIC is how this writer learned to program. I bought a Texas Instruments pocket computer with a tiny 64KB of RAM way back in 1980. Then I programmed a simple one-line word processor, like a typewriter, and showed it to a businessman whose company sold mortgage processing software. That is how I got my first job.Now BASIC has faded away in importance but another simple language has surged ahead to take its place as the king of easy languages: JavaScript.JavaScript is important because it runs in the browser. That gives the browser the ability to interact with the user in a way that does not required making a round trip to the web server, which of course slows everything down. Twitter, Facebook, and other popular sites make use of this and what is called Isomorphic JavaScript, which means they render web pages on a backend server, usually Node.js, and then push out only incremental changes to the user. So it makes web pages load very fast.But all of that are advanced topics. Let’s start with the basics.

Easy as Pie, but as Annoying as Poison Ivy

JavaScript is not a typed language. What that means is you do not need to declare variable types (integer, float, string) in order to use it. Instead you just write:var variable;or something like this to give it an initial value:var variable = “123”;The easiest way write and debug JavaScript code is to use a language-aware editor like vim and then run your code on Node.js, which is a JavaScript server. If Node.js sounds complicated know that it makes life simpler because working with JavaScript in a browser or web server requires that you understand DOM (Document Object Model), which carries with it some frustrations for the beginner. So forget about the HTML stuff first and use Node.js just to learn the JavaScript language.So, go install Node.js and then come back here and continue reading.Now, write a simple program like this and save it as beginner.js. Note the file suffix.js, which is a convention.var x = "hello word"; console.log(x);Then run it with Node.js like this:nodejs beginner.jsIt will say:hello word One annoying thing about writing JavaScript in a web page is if you leave off a semi-colon, curly brace, or spell a variable name wrong the browser is not going to tell you. You will be faced with stone-faced silence as you pound your head trying to figure out what is wrong. But if you use Node.js it will show you what your error is right away.To illustrate, suppose we spelled the variable name wrong like this:var x = "hello word"; console.log(y);The vim stupid editor does not tell us anything. Vim does not know anything more useful than how to match up curly braces. So it cannot tell us that we spelled “x” wrong. Worse, there are not really any very useful JavaScript editors that show compile errors, meaning code problems that would show up at run time, as JavaScript is not compiled but is interpreted at runtime. Plus there is a kind of twisted bravado among JavaScript programmers that take pride in not needing such things.Anyway, use Node.js as it will throw this easy-to-understand error.The way to find errors in your code when you are writing web pages is to use the debugger built into the browserlike the one in Google Chrome.If you want to see that go to this simple web page (It shows the air pollution levels in Santiago, Chile.), then select Tools/Developer tools in Chrome. (You can also select Tools/JavaScript console for further debugging tools.)

Functions

Now let’s write a simple function by replacing all the code in beginner.js with this:console.log(square(2)); function square(x) {return x * x;}When you run this it will output “4.”Make note that it has a function name, parentheses for the argument (), and curly braces {} to show the beginning and end of the function. Also it does not matter if the function declaration comes before or after where you invoke it.If you compare this code with other programming languages you will notice that it is not necessary to declare the type of value the function returns nor the input parameter types. In other words there is no need to declare that the parameters or return types are an integer, real number, character string, or object. Also, unlike Python you can only return 1 variable and not more than 1.Now. Regarding object-oriented programming, you can create objects in JavaScript. But it’s not really designed for that. For example there is no “class” declaration. So use another language for that or, better yet, use frameworks to make complicated tasks easy.

Frameworks

The JavaScript in the Chrome debugger graphic looks a little odd because it uses a framework called jQuery. You can tell that because it uses the “$” sign to refer to DOM elements. Google wrote jQuery. It also includes a lot of functions like getJSON, shown above, to read JSON data from a web page. But the main thing jQuery does is it lets you modify the DOM easily, meaning changing the web page by adding elements, fields, tables, etc., instead of using the regular, wordy JavaScript approach:document.getElementById(if).value = "x";There are many other frameworks besides jQuery, most of which are quite complicated to learn. For example AngularJS lets you write code that replaces wordy, long, awkward, and repetitive sections of a web page with something that is compact. For example, it lets you loop over an array of elements instead of having to write <td>value x</td> a zillion times.

Now is the Time to Learn JavaScript

JavaScript has become an import server-side programming language with the advent of Node.js and the proliferation of frameworks, which has also pushed its growth on the client side. So learn the basic syntax then try to learn a framework, like Express (to create web pages using MVC, the model view controller), to grow your skills. And use the jsFiddle online editor since it lets you show off your code to prospective employers or just publish answers to a question on StackOverflow in a compact way. But when you use jsFiddle remember to set the settings for the HTML and JavaScript sections of the editor based on other examples you see in jsFiddle. Otherwise the code won’t work and you will be frustrated.Everything you need to know about outsourcing technology developmentAccess a special Introduction Package with everything you want to know about outsourcing your technology development. How should you evaluate a partner? What components of your solution that are suitable to be handed off to a partner? These answers and more below.

Conclusion

Let's Talk
Lets Talk

Our Latest Blogs

With Zymr you can