JavaScript

INTRODUCTION



Scripting Languages

  • Client-side scripting languages.

    The two most popular client-side scripting languages are JavaScript (a Microsoft version called JScript) and Microsoft Visual Basic Scripting Edition, called VBScript. Java Script and VBScript can be also used on the server side. Both languages are supported by Internet Explorer. Nescape Communicator does not support VBScript.

  • Visual Basic and VBScript.

    VBScript is a subset of Visual Basic, a Microsoft's popular programming language. Internet Explorer is the only browser that currently supports VBScript, although the language is supported on the Web server side by Microsoft Internet Information Services (IIS) with Active Server Pages (ASP). VBScript is attractive to programmers who are already familiar with Visual Basic, because many of the constructs and the syntax in both languages are the same (or at least quite similar), which makes VBScript easy to learn.

  • JavaScript and Java

    Although its name might imply that JavaScript is a subset of Java, it is not. JavaScript is a completely separate language from Java that was developed by a different company. (Java was developed by Sun Microsystems; JavaScript was originated by Netscape Communications.) Despite the differences, however, JavaScript does share some constructs and syntax with its namesake.

  • JavaScript and JScript

    JScript is the version of JavaScript that is part of Internet Explorer. In most respects, JScript is exactly the same as JavaScript. The European Computer Manufacturer's Association produced a standard (ECMAScript or ECMA-262), encompassing the core features of JavaScript and JScript. Internet Explorer versions 4 and later and Netscape Navigator versions 4.06 and later support ECMA-262, although each support some extra functionality.

Advantages of JavaScript.

  • Ease of Use

    Basic scripting is easy to learn and use. Scripts bring much of the power of programming to the nonprogrammer in the form of simple blocks of code that respond to user actions (event-driven code).

  • Client-Side Processing

    Another significant advantage is that scripts run on the user's browser rather than on a server that might be halfway around the world. This advantage is especially important when combined with other features such as form validation, multimedia, and the Dynamic HTML. This is quite different from the old method of server sending the user a new Web page every time the page should change content or appearance.

  • Rapid Development

    Scripts are interpreted languages, that is, it is not necessary to compile the code before it is run, as it is for C++ and other traditional programming languages. As a developer, you can create a script in an HTML file and execute it immediately in a browser. If you need to make a change to the script, you can simply edit the HTML file, reload it in the browser, and instantly view the effect of your change.

  • Power

    Despite their simplicity, scripts can be very powerful. These features include object manipulation, the ability to create objects at run time, and control over virtually everything in the browser.

  • Security Issues

    The power of scripting in the browser is limited in certain areas. For example, browsers do not allow scripts to read or write files on the user's hard disk. This prohibition is intended to prevent rogue Web programmers from damaging end users' hard disks or stealing their data.



Disadvantages of JavaScript.

  • Performance

    Because VBScript and JScript were designed for ease of use and simplicity, they do not offer the same level of performance that many traditional compiled languages offer. For example, it is possible to write a mathematically intensive encryption program in JScript, but it would probably be prohibitively slow. However, this is not normally much of a restriction because most tasks you would want to perform in a browser do not require high computational performance.

  • Complexity

    A common misconception is that because basic scripting is easy, all scripting is easy. In fact, VBScript and JScript are sophisticated languages, and mastering them requires a thorough understanding of programming concepts. Because of this complexity, beginners are often a bit overwhelmed when first exposed to advanced scripts.


JavaScript: Object 0riented and Event Driven Programming Language.

Objects

One type of objects are the objects belonging to the browser hierarchy. For example, window, document, form, and any element defined by HTML tags. The browser hierarchy is organized by parent-child relationship. For example, window is parent to document; document is a parent to all forms in a document, every control in a form is form's child. Also every nested element is a child in of the element in which it is nested.

Elements are addressed in the code either by their predefined name, such as window or document or by its name or id, defined by a programmer.

Properties

Typical properties are attributes of HTML attributes addressed in JavaScript code (e.g. href, or src). Every parent or a child (if any) of an object, can be considered as a property of the object.

Properties can be addressed using dot notation: document.location //URL of the document img_friend.src //source of an image div_intro.style.backgroundColor //from <div id="div_intro" width=" .......

Methods

Methods describe the actions or function the object can perform. For instance, the window object has a method named alert(), which directs the window to open a dialog box with a message and the OK button.

Athough methods are called in code also using dot notation, but unlike properties, the name of a method must be followed by parentheses window.open() frm_order.submit() //from <form name="frm_order" method=" .......

Events

  • Browser tracks just about everything that happens on a page. For example, if user clicks a picture, the browser detects that the mouse button was clicked and that it was clicked while the mouse pointer was positioned on that particular image.


  • An action or occurrence on the page, such as a mouse click, is referred to as an event. When an event occurs on the page, the item that receives the event notifies the browser that the event has taken place. This is known as firing the event.

  • Different objects are associated with different events. The events typical for most objects are:

    onclick event Fired when the user clicks the mouse button
    ondblclick event Fired when the user double clicks the mouse button
    onmouseover event Fired when the user positions the mouse pointer over an object
    onmouseout event Fired when the user moves the mouse pointer outside the boundaries of an object
    onkeypress event Fired when the user presses a key
    onfocus event Fired when an object receives the focus



  • An event is trapped or handled if script is present that responds to the firing of that event. Such script is known as an event handler. Event handler is associated with an object by being placed in the object's tab. <button type="button" onClick="[JavaScript code]">Change Color</button> <img src="myImage.jpg" onMouseover ="[JavaScript code]" />


Basic Elements of JavaScript Code.

JavaScript is a case sensitive programming language

JavaScript is a line oriented programming language

  • Unlike HTML, every line of code is considered as a separate statement or statements (you may place more than one statement on a line, if you separate them with semi-column).


  • Blank lines are ignored by the interpreter. Separating blocks of code by blank lines is a great means to inhanse code readability.

Line and block comments

// This is a line comment. The interpreter ignores everything on a line that follows a double slash. /* This is multiline, or block comment. JavaScript interpreter ignores everything between slash-asterisk and asterisk-slash. Note, the above blank line is also ignored by the interpreter. */

JavaScript Variables

  • JavaScript uses variables, or named memory locations that stores values.


  • Preferably, variables are introduced by explicit variable declaration statements, using var keyword: var s_message = "This is an example of a string constant, or literal" var n_price = 123.99 vare s_name = "John Doe", n_age = 23 //you may declare more than one variable at a time
  • HTML object properties can be considered as prediclared variables

Assignment Statements

Assignment statement using the assignment operator = assigns a value on the right to the variable on the left: s_message = "The total price is 55.80" s_name = txtName.value //assigns what is entered in the textbox with name "txtName" div_intro.style.backgroundColor = "red" //changes color of the division background to red