Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advanced web-development with Javascript – Part 1

Monday, October 7th, 2013 by Servage

The Anatomy of a Script

Originally, JavaScript’s functionality was mostly limited to crude methods of interaction with the user. We could use a few of JavaScript’s built-in functions to provide user feedback, such as alert() to push a notification to a user and confirm() to ask a user to approve or decline an action. To request the user’s input, we were more or less limited to the built-in prompt() function. Although these methods still have their time and place today, they’re jarring, obtrusive, and—in common opinion, at least—fairly obnoxious ways of interacting with users. As JavaScript has evolved over time, we’ve been afforded much more graceful ways of adding behaviour to our pages, creating a more seamless experience for our users.

In order to take advantage of these interaction methods, we have to first understand the underlying logic that goes into scripting. These are logic patterns common to all manner of programming languages, although the syntax may vary. To draw a parallel between programming languages and spoken languages, although the vocabulary may vary from one language to another, many grammar patterns are shared by the majority of them.

The basics

There are a few common syntactical rules that wind their way through all of JavaScript.

It is important to know that JavaScript is case-sensitive. A variable named “myVariable”, a variable named “myvariable”, and a variable named “MYVariable” will be treated as three different objects. Also, whitespace such as tabs and spaces are ignored, unless they’re part of a string of text and enclosed in quotes.

Statements

A script is made up of a series of statements. A statement is a command that tells the browser what to do. Here is a simple statement that makes the browser display an alert with the phrase “Thank you.”

alert("Thank you.");

The semicolon at the end of the statement tells JavaScript that it’s the end of the command, just as a period ends a sentence. According to the JavaScript standard, a line break will also trigger the end of a command, but it is a best practice to end each statement with a semicolon.

Comments

JavaScript allows you to leave comments that will be ignored at the time the script is executed, so you can leave reminders and explanations throughout your code. This is especially helpful if this code is likely to be edited by another developer in the future.

There are two methods of using comments. For single-line comments, use two slash characters (//) at the beginning of the line. You can put single line comments on the same line as a statement, as long as it comes after the statement. It does not need to be closed, as a line break effectively closes it.

// This is a single-line comment.

Multiple-line comments use the same syntax that you’ve seen in CSS. Everything within the /* */ characters is ignored by the browser. You can use it to “comment out” notes and even chunks of the script when troubleshooting.

/* This is a multi-line comment.

Anything between these sets of characters will be completely ignored when the script is executed.

This form of comment needs to be closed. */
Variables
If you’re anything like me, the very term “variables” triggers nightmarish flashbacks to eighth grade math class. The premise is pretty much the same, though your teacher doesn’t have a bad comb-over this time around.

A variable is like an information container. You give it a name and then assign it a value, which can a number, text string, an element in the DOM, or a function—anything, really. This gives us a convenient way to reference that value later by name. The value itself can be modified and reassigned in whatever way our scripts’ logic dictates.

The following declaration creates a variable with the name “foo” and assigns it the value 5:

var foo = 5;

We start by declaring the variable using the var keyword. The single equals sign (=) indicates that we are assigning it a value. Because that’s the end of our statement, we end the line with a semicolon. Variables can also be declared without the var keyword, which impacts what part of your script will have access to the information they contain.

Advanced web-development with Javascript - Part 1, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.