Scribd
Upload
20 views

06 JavaScriptClientSide

This document provides an overview of JavaScript and client-side scripting. It discusses embedding scripts in HTML using the <script> tag, JavaScript execution order, and defer attributes. It also covers common window scripting methods like setTimeout, location properties, and navigator. The document outlines JavaScript security considerations and the same-origin policy. It recommends testing for capabilities instead of browser versions. In the end, it provides an example homework of simulating a CPU-intensive task without disrupting the user experience.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
20 views

06 JavaScriptClientSide

This document provides an overview of JavaScript and client-side scripting. It discusses embedding scripts in HTML using the <script> tag, JavaScript execution order, and defer attributes. It also covers common window scripting methods like setTimeout, location properties, and navigator. The document outlines JavaScript security considerations and the same-origin policy. It recommends testing for capabilities instead of browser versions. In the end, it provides an example homework of simulating a CPU-intensive task without disrupting the user experience.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 8

JavaScript & Client-Side

Embedding Scripts in HTML


<script> tag and its usages, execution order and defer type=text/javascript Content-Script-Type header or meta XHTML and <![CDATA[]]>
Inline JavaScript in event handlers (onclick, onmouseover) head, body, onload, onbeforeunload and onunload

JavaScript in URLs: javascript: someMethod();


Evaluation and output of JavaScript URLs Definition phase and event-driven / user-triggered model

Window shared scope and life-cycle

Level 0 DOM

Threading Model & Event Handlers


JavaScript is single-threaded

Document parsing stop while scripts are executed


Browsers stop responding to user input while events are handled No thread-safe implementation needed

Execution should not take too long and degrade user interaction setTimeout( ,0) and deferring execution
Manipulating documents while loading is not safe Document-ready: DOMContentLoaded / deferred script

Common Window Scripting

setTimeout, clearTimeout, setInterval, clearInterval


location and its host, path, search, hash, href history and its back(), forward(), go() window geometry and position / cross-browser screen object and user display information navigator object and user OS / user-agent information Open, close, move and scroll windows Global error handling with window.onerror alert(), confirm() and prompt() simple dialogs Accessing frames and their context: frames[], getElementById

Compatibility & Feature Testing

Best practice: test feature (capability) not browser version

if (element.addEventListener) { }
else if (element.attachEvent) { } else { element.eventName = handler; }

Browser sniffing using navigator object


Conditional comments in IE

<!--[if gte IE 6]><![endif]-->

http://www.quirksmode.org/compatibility.html

JavaScript Security

Can open new windows as long as it's user triggered

Can close windows opened by itself


Cannot hide the href of a link from the status bar Cannot open small windows or outside's user visibility

Cannot write the value of a file input


Same-origin policy or cross-domain restrictions: protocol, host and port

Recap and Homework

Simulate a CPU-intensive task triggered by user and without disrupting user control

You might also like