JavaScript 101: An Introduction

Many visitors to the MSDN FrontPage developer portal are unfamiliar with programming, so I decided that the best way to help non-developers understand our developer content is to provide education. This is the first installment, and its purpose is to teach JavaScript to the non-developer. The JavaScript 101 series is not designed for developers, as most of our developer content is, so it may be far too simple for a seasoned JavaScript developer. However, if you are either new to JavaScript or completely unfamiliar with JavaScript, this series is for you. For a list of all the posts in this series, scroll down the page and click JavaScript 101 under Post Categories.

Before I start on the programming end of JavaScript, I wanted to explain the purpose of JavaScript and a bit of the background. Last summer, we published an article titled Introduction to Web Development that described the various languages and technologies that Web developers may encounter and need to use. After a description of what programming languages are and how they are used on the Internet, the article gave the following description for JavaScript:

JavaScript is an interpreted scripting language commonly used on the Internet for creating Web pages that respond to user actions, such as when a user moves a mouse pointer over an image or clicks a form button. Combined with HTML and CSS, JavaScript allows you to create Dynamic HTML pages.

JavaScript is generally used for client-side scripting; as a result, users can easily view JavaScript code along with the HTML code in a page. Although it may be used for server-side scripting, JavaScript works best for visual animation (such as changing an image when a user moves the mouse pointer over it) or for validating form fields.

Various browsers may implement the JavaScript scripting objects differently, but most popular browsers support JavaScript.

The biggest disadvantage of JavaScript is that users can turn it off in the browser, which makes pages that use it not function as expected.

Netscape developed the JavaScript programming language. JScript is the Microsoft implementation of ECMAScript, as defined by the specification of Ecma International. Both JavaScript and JScript are ECMAScript-compliant languages.

As the article mentions, there are basically two types of programming languages: compiled and interpreted. Most programs have .exe files. An .exe file is where the code that runs a program lives, and usually you can double-click an .exe file to start a program. (For example, if you use Windows Explorer to locate FPage.exe and double-click it, FrontPage starts.) Compiled programming languages require a language compiler to create the .exe files. Interpreted programming languages aren't compiled into .exe files but require an interpreter to understand the code.

Much like you may need an human interpreter to understand a natural language (such as Danish or Swahili), browsers need a JavaScript interpreter to understand JavaScript code. As the preceding quote mentions, JavaScript is an interpreted language and a JavaScript interpreter lives inside most browsers, so when you write JavaScript code, you don't need to buy an interpreter to run the code. Instead, the interpreter sees the code and in effect tells the browser what to do with it. Some browsers don't understand JavaScript code. For example, older browsers that were developed before JavaScript was invented obviously wouldn't support it. Plus, most browsers allow the user to turn off JavaScript. In both of these cases, the user wouldn't receive an error; your code just doesn't run.

Because JavaScript usually runs in a browser, it's also called client-side scripting. You can use other languages for client-side scripting, but no client-side language is as universally accepted as JavaScript or understood in more browsers. This is why most Web developers use JavaScript to animate their Web pages using Dynamic HTML (DHTML). DHTML allows you to respond to the actions of your users; thus the term "dynamic."  For example, when a user moves her mouse over an element on a page, you may want to perform an action, such as displaying an element that was previously hidden (as is usually the case with drop-down menus). Or when a user clicks the Submit button on a form, you may want to verify that he has entered all the necessary information in the fields.

JavaScript is also termed an object-oriented programming (OOP) language. OOP is a programming paradigm that differs from traditional programming in that it separates elements of an application into discrete elements. I'll explain OOP a little bit at a time, especially as it relates to JavaScript, because it can be quite confusing when taken as a whole; however, the simplest explanation is this: OOP uses objects, and objects are basically things — specifically, things as they relate to an application. For example, think of an object, or thing, that you use every day: your car. Cars have values that describe them, such as make/model and color, and you can perform certain tasks with them, like start and drive them.

Before you begin pulling your hair out and yelling "I don't care about OOP or that JavaScript is an interpreted language; all I want to do is add this little bit of code to my page," let me assure you that this information is very important. The first JavaScript book I ever read never made one mention of OOP. I felt like I had watched a game and missed the winning play. Without this information you may be able to incorporate scripts that others have written into your page, but you will never be able to troubleshoot the code, and I promise you that you will at some point need to do that. So please bear with me. This introduction (and the one or two topics that follow) is critical to helping you understand what you need to know to not only incorporate scripts into your page but also write a few scripts of your own. However, I promise that this info won't be book-length. I'll include only the information you need to be able to move forward. Promise!

So the things you learned about JavaScript in this post are

• JavaScript is an interpreted programming language.
• JavaScript is a scripting language that you can use for client-side scripting.
• You can use JavaScript to animate Web pages using DHTML.
• JavaScript allows you to respond to user actions.
• JavaScript is an OOP (object-oriented programming) language.

Next time I'll talk a little more about JavaScript as an OOP language.