Welcome to Javascript for Non-Programmers

Thanks for enrolling in class. I have been at RISD long enough to know that the JavaScript course can be a source of much angst and frustration for some students. They have told me this explicitly and without hesitation. My life has taught me that some of the best accomplishments in life come through fighting angst and frustration and not giving up. Never before has this course been so important to web designers and developers as JavaScript has become more and more dominant as the scripting language of choice for client-side web processing - especially as popular HTML5 features are being integrated in our web browsers. I will do my best to motivate you so you can fight any setbacks with your full potential. I will also do my best to eliminate unnecessary angst and frustration, but I know I have a particular style that might just frustrate some of you no matter what the learning objective. My aim is to make you self-sufficient, confident, thoughtful developers and I don't think that can be done with a technical presentation and study alone. I need to give you so-called "life skills" in the process of battling new technical information. We can do this within the RISD classes with repetition through the JavaScript course content. Taking a Processing course can help too.

Through courses that I teach at RISD CE, you have three opportunities to gain exposure and practice with using scripting languages to enhance web presentation, usability, and information processing. If this is your first of the three, you are apt to struggle more than if it were your second or third course of this genre. Try and learn from your peers and colleagues more than you learn from me — especially those who you find think, learn, and explain in ways that are most beneficial to your own preferred learning style. That said, I personally always push myself to become a better learner through all possible learning experiences. Sometimes, the best content for learning something doesn't come in the form you like best. Someone has to learn your needs and translate content to your learning style. There is a niche for you to be that person, should you ever chose to do so. The niche is a very rewarding one. It's what got me into teaching in the first place. But, enough about me. Let's gain an overview as to the beast we are going to try and thrive in this course together...

What is JavaScript?

JavaScript is a cross-platform, object-oriented scripting language that has been evolving to a functional scripting capability over time. A scripting language is different from a programming language only in the level of access the language has to fundamental computing resources. A programming language accesses computing resources (like hardware and low-level operating system features) more directly. A scripting language accesses computing resources that have already been programmed for use. Modern web browsers provide many programmed services we can access with JavaScript code. Browsers tend to develop in lock-step with JavaScript's most useful features.

As a result, JavaScript has been a small, lightweight language, that continues to grow as it finds places to be useful; it is not useful as a standalone language because it relies on other programmed resources (we call that a context). JavaScript is designed for easy embedding in other products and applications, such as Web browsers. Java was first conceived as an embedded language and so there is a shared syntax without much of a shared implementation. Inside a host computing environment, JavaScript can access objects in its environment to provide programmatic control over them. Programmatic control means gaining control via a program that has been written — in this case scripting elements so we often better call our programs "scripts", rather than "programs". But, we can feel free to use the two words freely in our class. If you feel like you've written a lot of code to accomplish something nifty, do call your work a program if it makes you feel more accomplished. Scripts are intended to be simple yet elegant. The more you learn of JavaScript, the simpler and more elegant your code can become. Thankfully, we live in an age where computers are very powerful. It is OK to write sloppy and inefficient JavaScript code to get things done, but don't make sloppy the goal if you want clarity in how you develop your thinking. Learn how to write better code through good code recognition. Just like great writers become great writers by reading a lot and absorbing good writing skills by osmosis (yes, even subconsciously), we do the same as programmers and scripters.

Core JavaScript contains a core set of objects (a term we'll use a lot so let's work towards understanding it better) such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

  • Client-side JavaScript extends the core language by supplying objects to control a browser (Firefox, Chrome, Safari, etc.) and its Document Object Model (DOM). For example, client-side extensions allow an application to place interactive visual elements on an HTML form and respond to user events such as mouse clicks, mouse drags and hovers, form input controls, and page navigation.
  • Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

Through JavaScript's LiveConnect functionality, you can let Java and JavaScript code communicate with each other. From JavaScript, you can instantiate (make unique uses of) Java objects and access their public methods and fields. From Java, you can access JavaScript objects, properties, and methods. I used LiveConnect often in the 1990s. As JavaScript has grown, Java functionality has been incorporated in JavaScript.

We will work hard in this class to understand the boldfaced words have I used above since understanding them will allow us to communicate better with each other as we write scripts (and give us a framework from which to master additional scripting languages like PHP and VBScript). The words will also give us insight into what computers do to compute and even give us insights into how nature works to process information (performing chemical and protein development tasks according to our DNA being one of the really beautiful information processing activities in nature).

The wildly successful company of 1992-95, Netscape, invented JavaScript and, as a result, JavaScript was first used in the Netscape's browsers that had huge market share during their remarkable run as a company.

JavaScript offers a way to add intelligence and interactivity to Web pages. With JavaScript, you can:
  • process data collected from form control elements locally in the user's browser, without involving a server.
  • create and store data on the user's machine
  • add interactivity to graphics
  • change page elements on the fly based on user input; and
  • integrate HTML data more tightly with other Web technologies (like Scalable Vector Graphics (SVG) and Extensible 3-D (X3D)).
  • deliver a whole web application as that becomes the goal of the language when paired up with a Web browser.

Before JavaScript

Before JavaScript, creating interactive Web pages was far more difficult — for the web designer and the hardware. Collecting and processing user data most commonly used something called a common gateway interface (CGI) script that ran on the Web server. To use a CGI script, you first design an HTML-based Web page containing forms to gather input from users. Then you create (or pay someone to create) a CGI script in C or Perl to process the gathered input on the Web server.

Unfortunately, each time a user views the page and submits the form, the data travels from the Web browser to the CGI script. The CGI script then processes the data and returns any results to the user in the form of a new HTML-based Web page. This happens every time a user makes changes to the Web form, thus soaking up the server's CPU power and wasting time sending information back and forth across the Internet connection.

Why Use JavaScript?

JavaScript solves many of these problems by collecting and processing the data inside the browser on the user's system, and providing an intuitive user experience. JavaScript is also an interpreted language, meaning it doesn't end up as an executable file for a specific computer. Instead, the code runs only on a JavaScript interpreter in the user's Web browser. You can write JavaScript code once, and it will work on any system with a JavaScript-capable browser (almost all browsers now that JavaScript has fully come of age) on any computing platform.

As novices, we will learn much of our JavaScript by example. Thankfully, there are many insightful JavaScript libraries on the Web from which we can learn to script. As we review scripts, I will force the discussion to return to the vocabulary you've been introduced to in this welcome to class document. I will count on you all to diverge the discussion to the aspects of JavaScript that you are interested in discussing — I trust you can do that well inside and outside of class. My responsibility is to tickle your left brain as you continue the typical successful designers journey of right brain dominance. We will diagram the JavaScript scripts we use to learn such that we can tie the visual inspection of JavaScript to its computing constructs. This process will go a long way to making you successful and yet independent of any particular language. In other words, you be thinking like a scripting language designer than a basic scripting language user. We're all about design at RISD and so we'll pursue JavaScript as a design study as we use it to design our own Web presentation interactivity.

JavaScript and Java

JavaScript and Java are similar in some ways but fundamentally different in others. The JavaScript language resembles Java in much of its basic syntax and control structure (which is a relatively basic similarity not worth as much as a novice might think) but differs in much of its implementation (which may seem highly technical in nature, but we can understand it on important laymen's terms). JavaScript does not have Java's static typing and strong type checking (important concepts we'll discuss together in class).

In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.

JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.

Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript authoring.

In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.

If we can gain an understanding of JavaScript technically up to this point in this welcome to class document, we'll have met our minimum requirements for a six week class for non-programmers. The rest of this document just reminds you that there is a lot more you could learn about JavaScript in the context of all programming and scripting languages of worth in the world. Do take a look with the spirit that you are going to be willing to stretch yourself in this class technically without beating yourself up if it doesn't stick the first time you are exposed to it. I believe that's a very important step in becoming a better Web developer -- being able to read and consider technical information to prime your brain for later learning, even when the material seems too difficult to learn right now. Don't "spin your wheels" on such technical information, just baste your brain in it a bit here and there with the motivation to want to learn it if it can make you a better Web designer and developer.

For more information on the differences between JavaScript and Java, see the chapter Details of the Object Model.

JavaScript and the ECMAScript Specification

Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. However, Netscape is working with Ecma International - the European association heavily funded by the European Union for standardizing information and communication systems (formerly known as ECMA - the European Computer Manufacturers Association) to deliver a standardized, international programming language based on core JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification.

The ECMA-262 standard is also approved by the ISO (International Organization for Standardization) as ISO-16262. You can find a PDF version of ECMA-262 at the Mozilla website. You can also find the specification on the Ecma International website. The ECMAScript specification does not describe the Document Object Model (DOM), which is standardized by the World Wide Web Consortium (W3C). The DOM defines the way in which HTML document objects are exposed to your script.

Relationship between JavaScript Versions and ECMAScript Editions

Netscape worked closely with Ecma International to produce the ECMAScript Specification (ECMA-262). The following table describes the relationship between JavaScript versions and ECMAScript editions as JavaScript has grown over time:

Table: JavaScript versions and ECMAScript editions
JavaScript Relationship to ECMAScript edition
JavaScript 1.1 (1997) ECMA-262, Edition 1 is based on JavaScript 1.1.
JavaScript 1.2 (1998) ECMA-262 was not complete when JavaScript 1.2 was released. JavaScript 1.2 is not fully compatible with ECMA-262, Edition 1, for the following reasons:
  • Netscape developed additional features in JavaScript 1.2 that were not considered for ECMA-262.
  • ECMA-262 adds two new features: internationalization using Unicode, and uniform behavior across all platforms. Several features of JavaScript 1.2, such as the Date object, were platform-dependent and used platform-specific behavior.

JavaScript 1.3 (1999)

JavaScript 1.3 is fully compatible with ECMA-262, Edition 1.

JavaScript 1.3 resolved the inconsistencies that JavaScript 1.2 had with ECMA-262, while keeping all the additional features of JavaScript 1.2 except == and !=, which were changed to conform with ECMA-262.

JavaScript 1.4

JavaScript 1.4 is fully compatible with ECMA-262, Edition 1.

The third version of the ECMAScript specification was not finalized when JavaScript 1.4 was released.

JavaScript 1.5 (2009) JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.
JavaScript 1.6 (2015) JavaScript 1.6 gained dramatic traction in browsers and began becoming standardized through the ECMA process. With a change in naming conventions, ECMA Script 2015 influenced JavaScript ES6
ECMAScript YEAR is anticipated to stay aligned with each JavaScript specification (for that YEAR). There were new ECMAScript versions for 2016, 2017, 2018, 2019, and will be in 2020 (more information is available at W3Schools.

As JavaScript tries to expand beyond the European market, JavaScript will always include features that are not part of the ECMAScript specification — and yet the ECMAScript specification is highly useful to refer to; JavaScript is compatible with ECMAScript, while providing additional features.

JavaScript Documentation versus the ECMAScript Specification

The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to determine whether a JavaScript feature is supported in other ECMAScript implementations. If you plan to write JavaScript code that uses only features supported by ECMAScript, then you may need to review the ECMAScript specification.

The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.

JavaScript and ECMAScript Terminology

The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality outlined in the ECMAScript specification.

The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer. For example:

  • The Global Object is not discussed in the JavaScript documentation because you do not use it directly. The methods and properties of the Global Object, which you do use, are discussed in the JavaScript documentation but are called top-level functions and properties.
  • The no parameter (zero-argument) constructor with the Number and String objects is not discussed in the JavaScript documentation, because what is generated is of little use. A Number constructor without an argument returns +0, and a String constructor without an argument returns "" (an empty string).