Scribd
Upload
28 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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
28 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)
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy