Javascript Notes1: Characteristics and Uses

Javascript Notes

JavaScript was developed as Netscape’s cross-platform scripting language and is based on an object model that allows you to control user interaction with HTML pages.

JavaScripts consist of special commands embedded in an HTML document (which increases the size and complexity of the HTML document).
JavaScripts execute when a browser loads a page and interprets the HTML code in which they are embedded.

There are two types of JavaScript:

  1. Server-side JavaScript, such as LiveWire JavaScript.
  2. Client-side JavaScript, such as Navigator JavaScript.

JavaScript programming is simple compared to Pascal, Perl, Java, C, and C++. (Java does not support pointers and memory allocation programming, which are complex components of C and C++.)

Writing JavaScript programs is considered to be as easy as writing BASIC programs.

JavaScript has the following uses:

  • Display messages to the user, either as part of a web page or in alert boxes.
  • Animate images or create images that change when you move the mouse over them.(rollovers)
  • To trap events such as moving the mouse over a certain area of the screen.
  • Request information from a server and display as needed, without reloading the whole page(AJAX)
  • Show or hide content based on user interaction
  • Use javascript libraries or frameworks to more easily accomplish common scripting tasks
  • Customize interface elements like scrolbars
  • Add newer functionality to older browsers(Shims or Polyfills)
    • html5 shim used to enable Internet Explorer 8 and earlier to recognize and style newer HTML5 elements such as article, section, and nav.
    • selectivizr a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8
    • modernizr - Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.
  • Create lightbox style galleries
  • Create slideshows
  • Detect the browser in use and display different content for different browsers.
  • Detect installed plug-ins and notify the user if a plug in is required.
  • As a scripting language to handle user events, like clicking on a form element. You can add dynamic mechanisms to your page that would have previously required CGI scripts. For example, you can display fonts in a larger or smaller type style. In this case, the browser’s JavaScript interpreter provides this functionality.
  • JavaScript can also validate user input in a form before sending data to the server, acting as a buffer between Web servers and clients.
    For example, if you have a form that requests an email address, you can check to see if the cell contains an @ sign or some text data before transferring the data to the server. In JavaScript, because the interpreter runs at the browser, all validation is done at the client. This acts as a buffer for the Web server by off-loading processing tasks. With a CGI script (such as PERL), data must go back and forth between client and Web server.
  • As a control language for HTML page elements.
    You can build programming logic into your HTML document using JavaScript.
    For example, you can alter the content of a Web page based on day of the week, date, time, and user domain.
    You can also use JavaScript to identify a user and greet them when they access your Web site.
    For example, when user Ryan accesses your Web site, you can display a message such as “Good Morning Ryan.”
  • As a downloadable computation engine.
    The JavaScript interpreter can perform calculations at the client. Many Web sites have implemented calculators and tax calculation forms using JavaScript.
    (In a Perl script, data you enter must be sent to the Web server, computed, and the result returned to the client.)
  • To generate answers to a user’s follow-up questions.
    This way a user will never see irrelevant questions.
    You can create a friendly interface for distributing data.
  • To create spreadsheets and worksheets.
  • To display text.
  • Add scrolling or changing messages to the browsers status line.
  • and more...

JavaScript Characteristics

JavaScript resembles Java and supports most of Java’s expression syntax. Some other characteristics of JavaScript are...

JavaScript is interpreted, not compiled. Some programming languages must be compiled, or translatd into machine code, before they can be executed. Javascript, on the other hand, is an interpreted language: the browser executes each line of script as it comes to it. Javascript code is read line by line and acted upon by the browser in a top-down manner.

JavaScript is case sensitive.
Any reference to a function or object in a JavaScript must match the case used to define the function or object.

For example, a function named fieldBox1() must be referenced in the program as fieldBox1() using the uppercase “B” in box.

Single-line comments start with a double-slash (//). To include a comment in a JavaScript, you can place the slashes anywhere within a line. Typically, slashes are placed as first characters on a line. The JavaScript interpreter ignores all text after the slashes until it reaches the end of the line.

Multi-line comments begin with a slash-asterisk (/*) and end with an asterisk-slash (*/). The interpreter ignores comments between the /* and */ combination.

JavaScript uses the same rules as C where variable names can use letters, digits, or underscores.

Variables can change type dynamically. Variables in JavaScript are “loosely typed” like in Perl. In Java, C, and C++, variables are tightly typed, which means they are strictly assigned a type (integer or string) and cannot change types after being assigned.

All quotation marks must be in pairs. A single and double quote must have a corresponding single and double quote.

JavaScript can perform actions on various objects in an HTML document, such as frames, buttons, links, and other objects.

The JavaScript/Document Object Model (DOM)

JavaScript operates in a world of objects.

  • An object can be a button, form, document, window, frame, or URL.
  • Each object has properties such as methods, colors, values, names, and the location on a screen within a window.

For example, a coin has certain characteristics, such as the shape, color, thickness, weight, and the type of figure embossed on each side. This helps distinguish it from other objects like a car, which has properties such as horsepower, size of wheels, and color.

Understanding JavaScript’s built-in objects will help you easily identify relationships between objects and references to objects in HTML code.

An object in a JavaScript is easily identified because it uses dot notation.
For example, if you are working with the name of a document, the construct will look like this:
document. name

The NAME attribute you use when creating HTML documents is used by JavaScript to identify objects.

Some objects can share the same properties. For example, a coin object and a car object of the same color share the same property. An object’s properties help differentiate it from other objects.

Every time you use a JavaScript-enabled browser to load an HTML page, the browser creates objects corresponding to the page. You can use JavaScript to access these objects.

Objects originate from many sources. They can be

  1. Built into the JavaScript language. Most objects are established when you load an HTML document and the browser creates them for you. All elements of a Web page, such as forms, windows, frames, and links, are examples of built-in objects. Each object in turn has its own set of methods and properties.
  2. Created by you. You can create functions to define new object types.
  3. Created by others. You can use Web pages containing JavaScripts that have been created by others, or you can use distributed JavaScript libraries.

Hierarchical Structure/Document Object Model (DOM)

In this hierarchy, an object's descendants are properties of the object.
For example, a form named form1 is an object as well as a property of document, and is referred to as document.form1

To identify the value of a text field in a form you must reference the value as follows: document.form.text.value
where form is the name assigned to the form and text is the name assigned to the input text field in the form.

JavaScript Language Concepts

JavaScript allows you to do the following:

  1. Create a set of commands or subroutines called a method.
  2. Define conditional constructs that respond differently based on some value, situation, or input.
  3. Create looping constructs using if, then, and else logic.
  4. Define events that activate JavaScripts based on a user’s action.