JavaScript Intro

Section 1: Introduction

JavaScript was created to extend the functions a browser can perform.

JavaScript enables the programmer to manipulate HTML documents (checking form fields, submitting forms, creating dynamic pages, and such) and the browser itself (directing the browser to load other HTML pages, display messages, and so on).

Originally called LiveScript, JavaScript is a cross-platform, client-side scripting language for use on the web.

Scripting languages were designed to add interactivity to HTML pages.
A scripting language can best be thought of as a lightweight programming language.
JavaScript is the most popular scripting language on the Internet, used in millions of web pages to improve design, validate forms, detect browsers, create cookies, and much more.
JavaScript works in all major browsers, such as Chrome, Safari, Edge, Firefox, and Opera.

JavaScript is an interpreted language.

This means that it executes without prior compilation, i.e., each statement in the script is evaluated and executed as it is encountered.
This is in contrast to application development languages, like Java or C#, that are used to write programs that are compiled and then executed, and that have more complex features. (Scripting Languages vs. Conventional Languages)

JavaScript is an event-driven programming language.

This means it responds to events as they occur.
This allows it to interact with and respond to the actions of the person using the computer.
When writing JavaScript programs, you are writing a collection of scripts that respond to user interactions with the application and the events that they trigger.

It should be noted that despite the name, JavaScript does not share much of anything in common with Java (other than similar names, of course).

Section 2: Historical Context and Standards

JavaScript was developed by Netscape to run in Netscape Navigator and first appeared in Netscape 2.0 (Notable browser list).

Shortly thereafter, Microsoft countered with their own product called JScript (now deprecated).

Google is now trying to replace it with Dart.

In response to these competing scripting languages the European Computer Manufacturers Association (ECMA), an international standards body, proposed a standard that, to avoid the politics of appearing to side with any one major browser company, was dubbed ECMAScript.

ECMAScript is now the official name of the language.
Currently, the most recent version of the language is ECMAScript 2021.

Section 3: Uses of JavaScript

Since JavaScript is a client-side programming language, when you download a page with JavaScript in it, that script is run on your computer inside your web browser.

Most of what JavaScript can do revolves around monitoring or altering the content of web pages and interacting with the user through the web browser interface.

Such pages are referred to as interactive web pages.

One thing JavaScript can do is change the content of a document being displayed in the web browser.

JavaScript does not change the document itself, only what is being displayed.

For instance, JavaScript allows you to dynamically change the appearance of something when you move the mouse over it. Which, by the way, you can do with this paragraph in most any recent browser.

It can even make elements appear and disappear from a document. (Hover over this paragraph makes the following paragraph vanish.)

Now you see it....

JavaScript allows you to generate pop-up windows.

JavaScript also allows you to rewrite or even generate what is displayed on the screen.

A very commonly used (but potentially troublesome) JavaScript function is the write() method of the document object. It can be used to write content to the web browser screen. [Click this link for an example.]
The link takes you to a document written in JavaScript, and the contents of that document are as follows:
<script>
   document.open();
   document.writeln("<!DOCTYPE html>");
   document.writeln("<html lang='en'>");
   document.writeln("<head>");
   document.writeln("<title>JavaScript Write Demo</title>");
   document.writeln("<link type='text/css' rel='stylesheet' href='styleSheets/notes2017.css' />");
   document.writeln("<head>");
   document.writeln("<body>");
   document.writeln("<p class='bold'>This is interesting.</p>");
   document.writeln("<p>We are using JavaScript to write <span class='red'>text</span> to a page!<p>");
   document.writeln("<br />");
   document.writeln("<form>");
   document.writeln("<input type='button' onclick='window.close();' value='Close Window' />");
   document.writeln("</form>");
   document.writeln("</body>");
   document.writeln("</html>");
   document.close();
</script>
Since the browser requires HTML tags, we use an HTML tag to tell it that we are giving it a script and then we use JavaScript DOM functions to write content to the page
- document.open() tells the browser we are sending it information to be written to the screen, so it should clear out whatever is currently in the window and prepare to write a new document.
  - This avoids overwriting the previous document by opening this one in a new window.
- document.write() writes a string to the screen.
- document.writeln() also writes strings to the screen, but it includes a line feed at the end of the string it writes out.
  - Note that the line feed, like any other form of white space, is ignored by the browser when displayed.
  - Its purpose is to make the markup code the script generates more readable. More on writeln later.
- Lastly, document.close() tells the browser we are done writing the document and it should write it to the screen.
  - If you don't close a document you will at times get nothing on the screen, since it is still sitting in the output buffer waiting for the next command.
- You cannot nest quotes inside quotes, so if the text being written by document.writeln is enclosed in quotes, but that text also contains items that need to be in quotes, such as attribute values like lang="en", you must use the single quote (aka, apostrophe) inside the double quote.

Section 4: Browser Control

JavaScript includes commands that allow you to control the content being displayed in the browser.

It can be used to open new documents in a window, or to return to a previously visited document. In the above example it was used to open a new document in a new window and then close the window when the "Close Window" button is clicked.

JavaScript can also be used to pass information between windows and frames. JavaScript is also commonly used for creating interactive menus. Most of the class web pages use JavaScript driven menus, and the notes pages get their functionality from extremely complex JavaScript code.

Section 5: Data Handling

JavaScript can be used to process data.

Its ability to process data is normally tied to its ability to interact with forms.
It can be used to create things like calculators.
- A typical calculator downloaded off the web is JavaScript running behind a special purpose form.
- JavaScript is capable of doing mathematical computations and performing other typical computational actions.
- This is very useful when people want to be able to play around with the data a little before submitting it back to the server.

Another way of interacting with forms is validating data before you submit an online form.

This can be done by making sure required information is there.
It can also be done by checking that information is of the correct type, for instance, by making sure that you didn't try to tell the server that your Zip Code is "BOB."

It can also be used to keep track of someone shopping on an online catalog and store information on things they want to buy until they are ready to check out.

The only real limit on what it can do in validating and processing online form data is that JavaScript is a slow language and complicated programs not only take a long time to download, but also a long time to run.

Scripts that take too long may concern the user that the page has locked up, causing them to try to refresh it, or to click on the submit button again. Both of these actions can be problematic.

Section 6: Limitations

JavaScript has no graphics capabilities.
- It can dynamically generate HTML and dynamically change document styling.
- This can be used for simple graphics effects, such as simple animations, but JavaScript cannot actually draw things.
JavaScript cannot read or write files.
- It has no access to the contents of your computer.
- It does have the ability to request permission to do some forms of file management, but it cannot in and of itself read or change the contents of your computer storage devices.
This is a matter of information security, because when you run JavaScripts you are running other people's programs on your computer.
- You don't really know who they are, or whether or not they might want to load malicious code on your machine, or for that matter, whether they know what they're doing.
- If JavaScript could read and write files they could do untold damage to your machine.
- Therefore you should (almost) never give external code permission to override this security feature.
JavaScript has no networking support.
- It does not know how to use the network.
- It does know how to request that the web browser send or retrieve information from the network, but it cannot engage in any network activity of its own.
- If you have security set to a very strict setting on your computer, your browser will even ask for confirmation before obeying any request by a script to send or retrieve information.

Section 7: Information Assurance

Most of the limitations on JavaScript are limitations that have been set for security reasons. JavaScript is reputed to be the safest scripting language out there. All known security loops have been closed.

By maintaining a very limited set of abilities for the language, it becomes very hard for anyone to try to assault your computer with malicious JavaScript code. (Perhaps the worst they can do is write script that opens a whole string of new windows containing the same script, causing your browser windows to multiply until your browser or computer crashes.)

Although there is no guarantee that new security holes won't surface, it is still one of the safest languages available because of these restrictions.

Notes on why some people disable JavaScript.

Section 8: Script Placement

Depending on the nature of the script, the code will be placed either in the <head> element or in the <body> element where the script is being used.

No matter where they are used, scripts are placed inside a <script> tag.

Take a look at the JavaScript example below:

When placed in the <body> element of a page, the code above will result in a popup that announces "Hello World!"

Scripts placed in the <head> tag are executed when they are called, or when an event is triggered. When you place a script in the <head> tag, you will ensure that the script is loaded before anyone uses it.

Scripts to be executed when the page loads go in the <body> section. When you place a script in the <body> section it generates the content of the page.

Linking External JavaScript Files

Often you need to run the same JavaScript on several pages, without having to write the same script on every page. In such cases, it's possible to use JavaScript in an external file.

Write the script in a text editor, and save the file with a .js file extension. The external JavaScript files must end with a .js extension.
Then insert a link in the <head> tag, just as you would with an external CSS file.
- The name of the external JavaScript file is assigned to the src attribute of the <script> tag in the html file.
- The name includes the full URL if the script is on another server, or just the script name if in the local directory.
- Until recently, the recommendation was to include "type='text/javascript'" in the script statement, However, the type attribute is now considered unnecessary for JavaScript resources.
- You can include multiple scripts in a .js file, and links to multiple .js files in a web page.
See examples below:
<head>
<script src="script.js"></script>
</head>
<head>
<script src="http://classweb.cob.isu.edu/smitjohn/sample1/script.js"></script>
</head>
Be sure to omit the <script> tag within your external JavaScript file.
Placing scripts in external files also helps to hide your code from casual observers and adheres to layered web design.