J avaScript J JP P resentation Jeff Watson Web & Internet Programming Group.

JJavaScriptavaScriptJJJPJPPPresentationresentation

Jeff WatsonJeff Watson

Web & Internet Programming Web & Internet Programming GroupGroup

JavaScript OriginsJavaScript OriginsJavaScript was developedJavaScript was developedby Brendon Eich of Netscapeby Brendon Eich of Netscapein early 1995, who is currentlyin early 1995, who is currentlythe Chief Technology Officerthe Chief Technology Officerof the Mozilla Corporation.of the Mozilla Corporation.First called Mocha, named LiveScript to showcase First called Mocha, named LiveScript to showcase the dynamic nature of the scripting language.the dynamic nature of the scripting language.December 4, 1995 - Sun Microsystems and December 4, 1995 - Sun Microsystems and Netscape collaborated and renamed LiveScript Netscape collaborated and renamed LiveScript "JavaScript“."JavaScript“.Possibly named to capitalize on Java, an Possibly named to capitalize on Java, an unrelated language which was quickly becoming unrelated language which was quickly becoming popular with internet developers.popular with internet developers.

Beware of ImpostorsBeware of ImpostorsWhen JavaScript was released in March of 1996, Microsoft When JavaScript was released in March of 1996, Microsoft quickly introduced VBScript (initially only worked on Windows quickly introduced VBScript (initially only worked on Windows PCs), then JScript on July 16 1996. This was essentially their PCs), then JScript on July 16 1996. This was essentially their own version of JavaScript, which initially only worked with IE own version of JavaScript, which initially only worked with IE 3.0.3.0.Most JavaScript developers simply checked for Netscape, Most JavaScript developers simply checked for Netscape, ignoring IE. After Mozilla was recognized as a widespread ignoring IE. After Mozilla was recognized as a widespread browser, programmers created scripts for it, prompting other browser, programmers created scripts for it, prompting other browsers to declare themselves as Mozilla when opening these browsers to declare themselves as Mozilla when opening these pages, even though they were different browsers.pages, even though they were different browsers.Netscape wanted standardization and submitted JavaScript to Netscape wanted standardization and submitted JavaScript to ECMA (European Computer Manufacturer's Association) which ECMA (European Computer Manufacturer's Association) which produced the ECMA-262 specification in June 1997.produced the ECMA-262 specification in June 1997.ECMAScript is often used as a synonym for JavaScript and ECMAScript is often used as a synonym for JavaScript and JScript, the two prevailing dialects, but Microsoft has stated JScript, the two prevailing dialects, but Microsoft has stated that JScript does NOT conform to ECMA Standards. Said to be that JScript does NOT conform to ECMA Standards. Said to be developed as a compromise between Microsoft and Sun, developed as a compromise between Microsoft and Sun, JavaScript creator Brendon Eich was quoted as saying that JavaScript creator Brendon Eich was quoted as saying that "ECMAScript was always an unwanted trade name that sounds "ECMAScript was always an unwanted trade name that sounds like a skin disease."like a skin disease."

RevisionsRevisionsThe ECMA standard has released 2 revisions after The ECMA standard has released 2 revisions after the initial release, with a third in the works.the initial release, with a third in the works.Edition 2 added small revisions to conform to Edition 2 added small revisions to conform to ISO/IEC standards. ISO/IEC standards. The third edition added regular expressions, The third edition added regular expressions, better string handling, new control statements, better string handling, new control statements, try/catch exception handling, tighter definition of try/catch exception handling, tighter definition of errors, formatting for numeric output and other errors, formatting for numeric output and other enhancements.enhancements.The fourth edition will correspond to JavaScript The fourth edition will correspond to JavaScript 2.0, and introduce classes, structural types, 2.0, and introduce classes, structural types, packages and namespaces, static typing, packages and namespaces, static typing, generators and iterators, algebraic data types generators and iterators, algebraic data types and other small additions.and other small additions.

JavaScript is NOT JavaJavaScript is NOT JavaThere are several main differences:There are several main differences:

Java is used to create standalone applications, while JavaScript Java is used to create standalone applications, while JavaScript is text which needs to be embedded into HTML.is text which needs to be embedded into HTML.Java is a much larger and more complicated language, with Java is a much larger and more complicated language, with many more built-in functions and objects, as well as several many more built-in functions and objects, as well as several libraries to support it. JavaScript is a much smaller set of built-libraries to support it. JavaScript is a much smaller set of built-in functions and objects used for simple internet applications.in functions and objects used for simple internet applications.Java is strongly typed (type-checking at compilation, Java is strongly typed (type-checking at compilation, JavaScript is dynamically typed (type-checking performed at JavaScript is dynamically typed (type-checking performed at run-time).run-time).Array indices are not checked for validity (required in Java).Array indices are not checked for validity (required in Java).Although it supports instances of ADTs (objects), JavaScript Although it supports instances of ADTs (objects), JavaScript does not support inheritance nor dynamic binding of method does not support inheritance nor dynamic binding of method calls to methods, so it is not a true object-oriented language.calls to methods, so it is not a true object-oriented language.Java doesn’t have global functions due to OOP limitations, Java doesn’t have global functions due to OOP limitations, while they are used regularly in JavaScript code.while they are used regularly in JavaScript code.

FunctionalityFunctionalityThe first main draw for JavaScript was the incorporation of The first main draw for JavaScript was the incorporation of images properties, such as being able to click on various images properties, such as being able to click on various parts of an image with varying results.parts of an image with varying results.The other main feature was that JavaScript could easily The other main feature was that JavaScript could easily spawn new windows, enabling new information to be spawn new windows, enabling new information to be presented without navigating away from the main page. presented without navigating away from the main page. This caused many annoying pop-up ads when the internet This caused many annoying pop-up ads when the internet was becoming popular in the United States.was becoming popular in the United States.JavaScript is embedded directly into HTML, and enables JavaScript is embedded directly into HTML, and enables programmers to put static control structures as well as programmers to put static control structures as well as dynamic code into web pages.dynamic code into web pages.The scripts would be run on the client’s machine rather The scripts would be run on the client’s machine rather than a server so that valuable information on the server than a server so that valuable information on the server could be more easily protected.could be more easily protected.JavaScript works easily with HTML forms as well as JavaScript works easily with HTML forms as well as alongside several other internet programming languages, alongside several other internet programming languages, and it is a simple way to accept and manipulate user input. and it is a simple way to accept and manipulate user input.

Dynamic FeaturesDynamic FeaturesTypes are associated with values, not variables. Types are associated with values, not variables. Variables can be bound to several types of values Variables can be bound to several types of values throughout the course of a script.throughout the course of a script.Objects are instantiated as associative arrays, which lets Objects are instantiated as associative arrays, which lets programmers bind methods and variables to them programmers bind methods and variables to them whenever they decide it is necessary.whenever they decide it is necessary.JavaScript is interpreted, not compiled. The only way to JavaScript is interpreted, not compiled. The only way to test code is by running it, and this is the only time that test code is by running it, and this is the only time that errors can be detected as well.errors can be detected as well.Although there are debuggers available, virtually all of Although there are debuggers available, virtually all of them only work with the JavaScript code and since the them only work with the JavaScript code and since the script code works within HTML and alongside other script code works within HTML and alongside other languages, debugging can be very problematic.languages, debugging can be very problematic.

JavaScript vs. C++JavaScript vs. C++JavaScript is object-based, which is a limited version JavaScript is object-based, which is a limited version of an object oriented language, mainly due to its of an object oriented language, mainly due to its lack of inheritance and its prototype-based object lack of inheritance and its prototype-based object handling.handling.JavaScript object properties can be added at any JavaScript object properties can be added at any time and do not need to be pre-defined in an object time and do not need to be pre-defined in an object declaration or constructor.declaration or constructor.JavaScript does not support block-scoping, only JavaScript does not support block-scoping, only global and function scoping.global and function scoping.JavaScript uses prototypes rather than classes. JavaScript uses prototypes rather than classes. While they are not the same thing, it enables While they are not the same thing, it enables programmers to do many operations that are programmers to do many operations that are comparable to working with classes.comparable to working with classes.JavaScript relies on other applications, specifically a JavaScript relies on other applications, specifically a JavaScript-enabled web browser to run properly.JavaScript-enabled web browser to run properly.

Embedding JavaScript in Embedding JavaScript in HTMLHTML

Embedding JavaScript into HTML is simple, and since JavaScript code is self-contained in <script> tags it allows for code from other languages and forms to be included in the page as well.

Functions in JavaScriptFunctions in JavaScriptBuilt-in functions are almost completely concerned Built-in functions are almost completely concerned with validating argument types which are commonly with validating argument types which are commonly passed into functions or methods as well as converting passed into functions or methods as well as converting variables to and from these types.variables to and from these types.This includes specifics such as NaN(), infinity(), and This includes specifics such as NaN(), infinity(), and undefined(), as well as functions for encoding and undefined(), as well as functions for encoding and decoding data.decoding data.Functions can be created through several different Functions can be created through several different techniques, and since JavaScript uses first-class techniques, and since JavaScript uses first-class functions, they are treated as objects.functions, they are treated as objects.Function objects have properties, and can be passed Function objects have properties, and can be passed around and used just like any other object.around and used just like any other object.Functions can be declared within other functions. Functions can be declared within other functions. These are called “inner functions” and are the main These are called “inner functions” and are the main idea behind closures in JavaScript.idea behind closures in JavaScript.

Function Declaration Function Declaration ExampleExample

JavaScript has many different techniques for creating functions, and these show the objective nature that functions take on in the language.

ClosuresClosuresAn expression (typically a function) that can have An expression (typically a function) that can have free variables together with an environment that free variables together with an environment that binds those variables (that "closes" the binds those variables (that "closes" the expression).expression).This generally happens when a function contains This generally happens when a function contains another function inside it, and has access to the another function inside it, and has access to the outer function's variables. If the outer function outer function's variables. If the outer function returns and the inner function is still accessible to returns and the inner function is still accessible to outside code, the inner function still has access to outside code, the inner function still has access to the outer function's variables.the outer function's variables.This can result in security issues in some cases, This can result in security issues in some cases, but also has some practical applications.but also has some practical applications.

Closure ExampleClosure Example

Output (Along with a blank page):

The function getSecret() is declared within Guard(), which returns a reference to function getSecret(). This gives outside code access to an internal function, in turn giving the outside code access to the variables used within the inner function which, in this case, belong to function Guard().

Built-in ObjectsBuilt-in ObjectsJavaScript’s collection of built-in objects is JavaScript’s collection of built-in objects is relatively small compared to other languages, but relatively small compared to other languages, but still provides the basic objects needed for most still provides the basic objects needed for most functional programming.functional programming.This includes mathematical objects, date/time This includes mathematical objects, date/time objects and objective arrays.objects and objective arrays.Each type of built-in object is supported with Each type of built-in object is supported with several methods used to manipulate and display several methods used to manipulate and display the data associated with them.the data associated with them.As stated before, JavaScript functions themselves As stated before, JavaScript functions themselves are objects, and there are some other surprising are objects, and there are some other surprising objects such as strings and numbers which many objects such as strings and numbers which many programmers are used to seeing within built-in programmers are used to seeing within built-in data types. This allows for elaborate string and data types. This allows for elaborate string and number manipulation.number manipulation.

Forms and JavaScriptForms and JavaScript

It is easy to utilize JavaScript in HTML forms, it adds functionality as well as plenty of ways to transfer and manipulate data.

JavaScript allows HTML forms to be more dynamic in ways such as providing a simple means to manipulate and display input in an environment familiar to the modern programmer.

Pop-Up Window CreationPop-Up Window Creation

JavaScript’s popularity grew very quickly once advertisers realized that they could spawn windows with client-side code, resulting in massive amounts of pop-up advertisements, especially during early development of the language. Of course, spawning windows has very many practical uses as well.

Window Creation/Manipulation Window Creation/Manipulation CodeCode

See? Easy.

Menus and RolloverMenus and RolloverJavaScript is able to recognize where images are clicked and can provide different procedures for different areas and images, providing an easy way to create internet menus.

Rollover IllustratedRollover Illustrated

The buttons darken as the mouse rolls over them, this helps to show users which objects are clickable and/or lead to links. Button A will link to http://www.google.com and Button 2 will link to http://www.yahoo.com.

Current UsageCurrent UsageJavaScript has now become commonplace when JavaScript has now become commonplace when creating online forms, buttons, menus, and other creating online forms, buttons, menus, and other input methods, as well as ways to validate input. input methods, as well as ways to validate input. This is the dynamic nature of JavaScript.This is the dynamic nature of JavaScript.Developers like JavaScript because it is easy to Developers like JavaScript because it is easy to learn and keeps virtually all code executing on learn and keeps virtually all code executing on the client’s side, preventing security issues the client’s side, preventing security issues present in other internet languages.present in other internet languages.Also, almost every web browser in the industry Also, almost every web browser in the industry has developed a JavaScript debugger due to its has developed a JavaScript debugger due to its growing popularity.growing popularity.Future development will include the inclusion of Future development will include the inclusion of classes and even more built-in functionality, and classes and even more built-in functionality, and JavaScript 2.0 will provide developers with a JavaScript 2.0 will provide developers with a myriad of new internet programming techniques.myriad of new internet programming techniques.

ReferencesReferences

http://http://en.wikipedia.orgen.wikipedia.org/wiki/JavaScript/wiki/JavaScript

Sebesta, Programming Languages. 8th Sebesta, Programming Languages. 8th Edition.Edition.

JavaScript with DOM Scripting and JavaScript with DOM Scripting and AjaxAjax