JavaScript

JavaScript
Perhaps the most important programming language of the Web.
Nothing to do with the Java programming language. Should really have different name.
Formalized in the language definition: ECMAScript.

Program delivered with web page

JavaScript program is delivered with web page. Executes in browser.
Main use: Client-side program, delivered with page, interpreted in browser.
Can manipulate page.
Can talk back to server (Ajax).
Can do graphics in browser.
Also used on servers: Javascript server-side and command-line

Where to put the JS

Client-side JS. Code is sent with the page. Where should the JS code go on the page?

Embedded within HTML:

 
<script language="javascript" type="text/javascript"> 
(code) 
</script>

In fact this will probably work (and default to JS) on just about every browser:

 
<script> 
(code) 
</script>

In separate JS file containing just Javascript code:
```
 <script src="file.js" ></script> 
```
Q. Why might you use .JS files?
One-liners inside certain HTML attributes. See Event attributes.
```
 <div onmouseover="fn();" > div content </div>     

 <button onclick="fn();" > button text </button>      
```
This mixes up JS with HTML, which is a bit messy. See more on this later.

When should the JS be run?

If JS does not run on page load, but is only needed to run in response to user action later: Could include it at end of page, to get page loaded faster:
```
....
</body>
<script src="file.js" ></script>
```
If JS runs on page load and uses document.write to insert content, it must appear at a certain location:
```
<p>
<script src="file.js" ></script>
</p>
```
If JS runs on page load, but should not run until entire page is ready: Can load it at any time and then delay running it until after page load using:
- <body onload='fn();'>
- jQuery version: $(document).ready();

Include remote library

You can include a remote library at run-time:


   <script  src="http://remotesite.com/library/file.js" > </script>

Q. Why might you prefer to use a local copy?

Document Object Model (DOM)

Treats the page as an object that can be manipulated even after initial download.

Document Object Model (DOM)
DOM tutorial
- Finding and referencing page elements
Can label parts of the page and then address them and change them later:
```
  <p id="mainparagraph"> default text </p>
```
Sometimes we might need name= instead of id=
The history of the two, and differences between them, are complex.

Simple solution is use both:

  <img   src="Icons/play.png"  id="x2"  name="x2"  >

Can then address element using document.getElementById

document.getElementById("mainparagraph").innerHTML = "new text";

You may or may not find that the element exists as a JS variable in global variable space or under the document object:
```
mainparagraph.innerHTML = "new text"; 
document.mainparagraph.innerHTML = "new text"; 
```
But such variables can be re-assigned by any JS. Safest to stick to document.getElementById. See discussion.

How to write to page

How to output in JavaScript
"document.write" writes to "current" location in page - useful on page load, but not later.
To write somewhere after page has loaded, get element and use innerHTML or similar.

Javascript demos

I remove the header and footer to make it easier to View Source.

With these examples, the JS is inside the HTML file.
The exception is the syntax highlighting, which uses an external file.

Demo	HTML	JS
Javascript page change demo	HTML
Javascript page change demo (Minimal)	HTML
Javascript menu demo	HTML
Javascript environment demo	HTML
Javascript syntax highlighting	HTML	JS
Javascript demo - doing calculations on client side	HTML
Javascript percent encoder/decoder	HTML

JS used on my pages

I have gone JS crazy on my site. Here is some JS I use:

JS to define the Notes for my courses.
JS to include live stats in my header.
JS to highlight Wikipedia links in warning red.
JS graphics for header display and background display.

Is JS safe?

Remote site sending you code to execute is a strange idea.

It does not ask permission to execute. It just runs. Why?
Can it:
- Access your files?
- Fill your disk?
- Crash your computer?

What if JS goes into infinite loop?

What happens if a remote site sends you an infinite loop? Can JS crash the tab / browser / OS?

Try this:


        <script>
            while ( true ) { }
        </script>

Or this:


        <script>
            var i = 1;
            while ( i > 0 ) { }
        </script>

Loops in Javascript

JavaScript loops and other statements
If you make a loop that outputs to the page, you will find that loops in Javascript are odd. Browser will not redraw anything on page until Javascript loop ends.
To interleave code with redrawing the page multiple times, use setTimeout() or setInterval().

What if JS runs out of memory?

If JS goes into an infinite loop, needing more memory each time, it will run out of memory.
Browsers like Chrome are normally good at making sure only that tab/window crashes, not all tabs/windows.

However, you may discover that a JS coding bug can crash multiple tabs/windows.
Here is what seems to be the reason why:

When the user deliberately opens a new tab, the browser gives it N amount of memory.
JS on that page may open another tab, but that tab gets its memory from the same pool.
And so on, if JS on that page opens another tab.
If one of these tabs runs out of memory, then all the tabs in the group are out of memory.
Q. Is this what Chrome does? Can someone find proof of that for me?
Example: On my coding site Ancient Brain, click on a World page. Then click Edit (JS launches Edit tab). Then click Run from editor (JS launches Run tab). If the run runs out of memory, 3 tabs may crash: Run, Edit, World page. But not all tabs in browser.