JavaScript Basic Syntax

Wednesday, April 4, 2012

JavaScript, in its simplest form, is a sequence of statements to be executed by the user agent, or web browser. Having some experience with HTML and CSS will definitely help you in the process of learning JavaScript. Unlike HTML and CSS, JavaScript is a form of programming so it can be a bit intimidating at first. However, just as you had an "aha" moment with HTML and CSS, the same applies with JavaScript. You just need to learn the basics and practice what you have learned. Fortunately, unlike other programming languages, scripting is generally easier to learn and implement.

JavaScript is Case Sensitive

The first thing you should know about JavaScript is that unlike HTML, it is case sensitive. You should most definitely keep an eye on the case (upper, lower) you use to write JavaScript statements. In addition, it is a really good idea to develop a standard naming convention that you can use when creating variables, objects, and functions. This naming standard will not only help you prevent case sensitive issues, but also make it much easier for you to read and understand your JavaScript code when you are faced with a debugging situation.

Browser Compatibility

While browsers across the board support JavaScript, there is no requirement that they must do so. It is important that when you develop JavaScript statements, you thoroughly test your JavaScript across the browsers that you intend to support for your website.

JavaScript Statements

A JavaScript statement is essentially a command that instructs the browser to do something. Therefore, for JavaScript to run on a user's browser, JavaScript must be enabled. Fortunately, the default setting for most browsers is for JavaScript to be enabled. It is time to look at our first classic example, "Hello World!". The following statement instructs the browser to write "Hello World!" to the webpage:

<script type= "text/javascript">
document.write("Hello World!");

The first step was to instruct the browser we were using a script. We began the JavaScript block with a start <script> tag. Next we set the type property to a value of "text/javascript". We need to specify the type so that the browser knows what to expect within the starting and ending <script> tag. The next step is optional, but good to implement. We added an HTML comment that surrounds our JavaScript code. This is so that if the user's browser does not support JavaScript, the code will not be displayed in the browser as plain text. It will be treated by the browser as a typical comment in HTML code. However, you may notice that just prior to ending the HTML comment, two slashes "//" were added. These two slashes signify a comment in JavaScript. This is needed to prevent a browser from reading the end of the HTML comment as part of the JavaScript code. The main content contained in the this script element is the JavaScript statement, document.write("Hello World!");. This statement will simply render the words, Hello World! on the screen. While not an exciting example, it is a good example to start with. You may also notice that a semicolon was added to the end of the first statement. While this semicolon is not required in this case, it is a good programming practice. A semicolon is only required if you have more than one JavaScript statement on the same line. If you only allow one statement per line, the browser, according to the JavaScript standard, will interpret each line as a single statement. I always prefer to apply good programming practices and add the semicolon after each JavaScript statement.

JavaScript Block of Code

JavaScript statements can be grouped together in blocks.

<script type= "text/javascript">
document.write("<p>Hello World!</p>");
document.write("<p>This is my first JavaScript example.</p>");
document.write("<p>JavaScript is really easy!</p>");

Blocks are defined within a set of curly braces, { and }. The block starts with the left curly brace {, and ends with a right curly brace }. The purpose of a block is to execute group a sequence of statements. Generally a block is not used unless the statements are used within a function or a condition. You will learn more about functions and conditions in upcoming tutorials.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Professional JavaScript for Web Developers JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor