Digital Clock

Bookmarklet :
you can bookmark,the snippets of javascript,
by using URL "javascript: ~js code~"
when clicking bookmarklet, it access to the global object and the current Document.

Execution of JS programs

all javascript codes in a html file or what was called from it, has a single Global Window.
This means that they all see the same Document Objdct.

if web page has "iframe" element, the code in the embedded document has a different Global object.
However they can interact with each other.

I Load phase
1. load code from script tag.
2. the next script tag and so on.

II Asynchronous and Event-driven
3. the web browswer invokes event handler functions in response to events that occur asynchronously.
4. Event handlers are most commonly invoked in response to user input (mouse clicks, keystrokes, etc).
4.1 the load event == trigger ( with this, Ducument is fully loaded ) (1 or 2 seconds)
4.2 `onload` event handler functions ( triggered by the load event )


Note that Javascript and client-side Javascript is single threaded.
URL "javascript: jscode " embedded in a web page can be thought of as a type of Event Handler.

Synchronous, Asynchronous, and Deferred Scripts

on event handler state, `ducument.write()` function is the unique way to change the Documnet.

Table of factorials

In script tag can have "defer" and "async" tag.
* defer : put off , postpone
* async : not block the action of downloading<

The next code will do the same thing as async attribute :

Event-Driven Javascript

This synchronous code is the ancient JavaScript program.

events
* click
* change
* load
* mouseover
* keypress
* readystatechange : inicates the general type of event that has occured.

an event
* type
* target : the object on which the event occur

event handler (event listener, callback)

HTML5 defines "web worker"
a web worker is a backgrounded thread for performing computationally intensive tasks without freezing the user interface.

Client-Side Javascript Timeline

1. Document loading
`document.readyState` has the value "loading"
2. Synchronous scripts can use `document.write()`
3. Asynchronous script must not use `document.write()`
4. Document completes load, and `document.readyState = "interactive"`
5. `defer` script are executed, which must not use `document.write()`
6. The browser fires `DOMContentLoaded` event on the Document Object. This changes the phase 'Synchronous' => 'Async & Event-driven'.
7. The document is completely parsed at this point. 8. The browser may be waiting for additional contents such as images.
9. All images and async script loaded. then `document.readyState = "complete"` .
10. From this point on, event handlers are invoked asynchronously in response to user input events, network events, timer expirations. and so on.

Conditional Comments in IE

Security

Do not support

1. cannot write or delete arbitrary files or list arbitrary directories
2. cab script the HTTP protocol
3. WebSockets defines a scocket like API for communicating with specialized servers.

Restrict

Same Origin Policy

the origin of Document is set as the tuple "{protocol, host, port}".
a script from different origin cannot read the Document.

If server B has a script B-scr and a doc B-doc,
and A-scr loads B-scr,
B-scr in A-scr cannot read A-scr and C-scr, but read B-scr.

If your script opened the window,
you can close it,
but it cannot "look inside" it.

Relaxing the Same Origin Policy

A Doc of "dev.example.com" and a doc of "host.example.com" can see each other's documents with setting `document.domain` = "example.com"

/ " extends HTTP with a new Origin " :
* reauest header
* a new Access-Control-Allow-Origin response header

cross-document messaging
allows a script form one document to pass texutual messages to a script in another document.
it calls `postMessage()` method see Chap 23.

access to ".../index.html?hoge", The above code will display "Hello hoge"