// Parse the URL and get the pieces we need from it
url = require('url').parse(url);
var hostname = url.hostname, port = url.port || 80;
var path = url.pathname, query = url.query;
if (query) path += "?" + query;
// Make a simple GET request
var client = require("http").createClient(port, hostname);
var request = client.request("GET", path, { 
"Host": hostname    // Request headers
}); 
request.end();
// A function to handle the response when it starts to arrive
request.on("response", function(response) {
// Set an encoding so the body is returned as text, not bytes
response.setEncoding("utf8");
// Save the response body as it arrives
var body = ""
response.on("data", function(chunk) { body += chunk; });
// When response is complete, call the callback
response.on("end", function() {
if (callback) callback(response.statusCode, response.headers, body);
});
});
};
// Simple HTTP POST request with data as the request body
exports.post = function(url, data, callback) {
// Parse the URL and get the pieces we need from it
url = require('url').parse(url);
var hostname = url.hostname, port = url.port || 80;
var path = url.pathname, query = url.query;
if (query) path += "?" + query;
// Figure out the type of data we're sending as the request body
var type;
if (data == null) data = "";
if (data instanceof Buffer)             // Binary data
type = "application/octet-stream";
else if (typeof data === "string")      // String data
type = "text/plain; charset=UTF-8";
else if (typeof data === "object") {    // Name=value pairs
data = require("querystring").stringify(data);
type = "application/x-www-form-urlencoded";
}
// Make a POST request, including a request body
var client = require("http").createClient(port, hostname);
var request = client.request("POST", path, {
"Host": hostname,       
"Content-Type": type
});
request.write(data);                        // Send request body
request.end();       
request.on("response", function(response) { // Handle the response
12.2  Asynchronous I/O with Node | 303
Core JavaScript
Pdf link open in new window - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
pdf link; add hyperlink pdf document
Pdf link open in new window - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add links to pdf; adding hyperlinks to pdf files
response.setEncoding("utf8");           // Assume it is text
var body = ""                           // To save the response body
response.on("data", function(chunk) { body += chunk; });
response.on("end", function() {         // When done, call the callback
if (callback) callback(response.statusCode, response.headers, body);
});
});
};
304 | Chapter 12: Server-Side JavaScript
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
Please note that, there will be a pop-up window "cannot open your file" if your loaded Please click the following link to see more C# PDF imaging project
add a link to a pdf file; add links to pdf in preview
VB.NET Image: VB Code to Download and Save Image from Web URL
to download image from website link more easily. reImage, "c:/reimage.png", New PNGEncoder()) End powerful & profession imaging controls, PDF document, image
add hyperlink in pdf; change link in pdf
PART II
Client-Side JavaScript
This part of the book, Chapters 13 through 22, documents JavaScript as it is imple-
mented in web browsers. These chapters introduce a variety of scriptable objects that
represent web browser windows, documents and document content. They also explain
important web application APIs for networking, storing and retrieving data, and draw-
ing graphics:
Chapter 13, JavaScript in Web Browsers
Chapter 14, The Window Object
Chapter 15, Scripting Documents
Chapter 16, Scripting CSS
Chapter 17, Handling Events
Chapter 18, Scripted HTTP
Chapter 19, The jQuery Library
Chapter 20, Client-Side Storage
Chapter 21, Scripted Media and Graphics
Chapter 22, HTML5 APIs
C# PDF Convert to Jpeg SDK: Convert PDF to JPEG images in C#.net
Open source codes can be added to C# class. String inputFilePath = Program.RootPath + "\\" 1.pdf"; PDFDocument doc = new PDFDocument(inputFilePath
accessible links in pdf; add links to pdf in preview
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
is trying to display a PDF document file inside a browser window. PDFDocument pdf = new PDFDocument(@"C:\input.pdf"); pdf.ConvertToVectorImages(ContextType.HTML
adding links to pdf in preview; adding a link to a pdf in preview
VB.NET Word: VB.NET Code to Draw and Write Text and Graphics on
fileName, New WordDecoder()) 'use WordDecoder open a wordfile Dim Word document function, please link to Word & profession imaging controls, PDF document, tiff
add links pdf document; convert a word document to pdf with hyperlinks
C# TIFF: C#.NET TIFF Document Viewer, View & Display TIFF Using C#
TIFF Mobile Viewer in most mobile browsers; Open, load & Free to convert TIFF document to PDF document for management Please link to get more detailed tutorials
pdf edit hyperlink; add links in pdf
CHAPTER 13
JavaScript in Web Browsers
The first part of this book described the core JavaScript language. We now move on to
JavaScript as used within web browsers, commonly called client-side JavaScript. Most
of the examples we’ve seen so far, while legal JavaScript code, have no particular con-
text; they are JavaScript fragments that run in no specified environment. This chapter
provides that context.
Before we begin talking about JavaScript, it is worth thinking about the web pages we
display in web browsers. Some pages present static information and can be called
documents. (The presentation of that static information may be fairly dynamic—
because of JavaScript—but the information itself is static.) Other web pages feel more
like applications than documents. These pages might dynamically load new informa-
tion as needed, they might be graphical rather than textual, and they might operate
offline and save data locally so they can restore your state when you visit them again.
Still other web pages sit somewhere in the middle of the spectrum and combine features
of both documents and applications.
This chapter begins with an overview of client-side JavaScript. It includes a simple
example and a discussion of the role of JavaScript in both web documents and web
applications. That first introductory section also explains what is coming in the
Part II chapters that follow. The sections that follow explain some important details
about how JavaScript code is embedded and executed within HTML documents, and
then they introduce the topics of compatibility, accessibility, and security.
13.1  Client-Side JavaScript
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
. The Window object defines properties like 
location
, which refers to
a Location object that specifies the URL currently displayed in the window and allows
a script to load a new URL into the window:
307
// Set the location property to navigate to a new web page
window.location = "http://www.oreilly.com/";
The Window object also defines methods like 
alert()
, which displays a message in a
dialog box, and 
setTimeout()
, which registers a function to be invoked after a specified
amount of time:
// Wait 2 seconds and then say hello
setTimeout(function() { alert("hello world"); }, 2000);
Notice that the code above does not explicitly use the 
window
property. In client-side
JavaScript, the Window object is also the global object. This means that the Window
object is at the top of the scope chain and that its properties and methods are effectively
global variables and global functions. The Window object has a property named
window
that always refers to itself. You can use this property if you need to refer to the
window object itself, but it is not usually necessary to use 
window
if you just want to
refer to access properties of the global window object.
There are a number of other important properties, methods, and constructors defined
by the Window object. See Chapter 14 for complete details.
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. The Document
object has important methods such as 
getElementById()
, which returns a single docu-
ment element (representing an open/close pair of HTML tags and all of the content
between them) based on the value of its 
id
attribute:
// Find the element with id="timestamp"
var timestamp = document.getElementById("timestamp");
The Element object returned by 
getElementById()
has other important properties and
methods that allow scripts to get its content, set the value of its attributes, and so on:
// If the element is empty, then insert the current date and time into it
if (timestamp.firstChild == null)
timestamp.appendChild(document.createTextNode(new Date().toString()));
Techniques for querying, traversing, and modifying document content are covered in
Chapter 15.
Each Element object has 
style
and 
className
properties that allow scripts to specify
CSS styles for a document element or to alter the CSS class names that apply to the
element. Setting these CSS-related properties alters the presentation of the document
element:
// Explicitly alter the presentation of the heading element
timestamp.style.backgroundColor = "yellow";
// Or just change the class and let the stylesheet specify the details:
timestamp.className = "highlight";
The 
style
and 
className
properties, as well as other techniques for scripting CSS, are
covered in Chapter 16.
308 | Chapter 13: JavaScript in Web Browsers
Another set of important properties on Window, Document, and Element objects are
the event handler properties. These allow scripts to specify functions that should be
invoked asynchronously when certain events occur. Event handlers allow JavaScript
code to alter the behavior of windows, of documents, and of the elements that make
up those documents. Event handler properties have names that begin with the word
“on”, and you might use them like this:
// Update the content of the timestamp element when the user clicks on it
timestamp.onclick = function() { this.innerHTML = new Date().toString(); }
One of the most important event handlers is the 
onload
handler of the Window object.
It is triggered when the content of the document displayed in the window is stable and
ready to be manipulated. JavaScript code is commonly wrapped within an 
onload
event
handler. Events are the subject of Chapter 17. Example 13-1 demonstrates the 
onload
handler and shows more client-side JavaScript code that queries document elements,
alters CSS classes, and defines event handlers. The HTML 
<script>
element holds the
JavaScript code of this example and is explained in §13.2. Note that the code includes
a function defined within another function. Nested functions are common in client-
side JavaScript, because of its extensive use of event handlers.
Example 13-1. Simple client-side JavaScript for revealing content
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS styles for this page */
.reveal * { display: none; }  /* Children of class="reveal" are  not shown */
.reveal *.handle { display: block;} /* Except for the class="handle" child */
</style>
<script>
// Don't do anything until the entire document has loaded
window.onload = function() {
// Find all container elements with class "reveal"
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) {  // For each one...
var elt = elements[i];
// Find the "handle" element with the container
var title = elt.getElementsByClassName("handle")[0];
// When that element is clicked, reveal the rest of the content
title.onclick = function() {
if (elt.className == "reveal") elt.className = "revealed";
else if (elt.className == "revealed") elt.className = "reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Click Here to Reveal Hidden Text</h1>
<p>This paragraph is hidden. It appears when you click on the title.</p>
</div>
13.1  Client-Side JavaScript | 309
Client-Side
JavaScript
</body>
</html>
We noted in the introduction to this chapter that some web pages feel like documents
and some feel like applications. The two subsections that follow explore the use of
JavaScript in each kind of web page.
13.1.1  JavaScript in Web Documents
A JavaScript program can traverse and manipulate document content through the
Document object and the Element objects it contains. It can alter the presentation of
that content by scripting CSS styles and classes. And it can define the behavior of docu-
ment elements by registering appropriate event handlers. The combination of scriptable
content, presentation, and behavior is called Dynamic HTML or DHTML, and tech-
niques for creating DHTML documents are explained in Chapters 1516, and 17.
The use of JavaScript in web documents should usually be restrained and understated.
The proper role of JavaScript is to enhance a user’s browsing experience, making it
easier to obtain or transmit information. The user’s experience should not be dependent
on JavaScript, but JavaScript can help to facilitate that experience, for example by:
• Creating animations and other visual effects to subtly guide a user and help with
page navigation
• Sorting the columns of a table to make it easier for a user to find what she needs
• Hiding certain content and revealing details progressively as the user “drills down”
into that content
13.1.2  JavaScript in Web Applications
Web applications use all of the JavaScript DHTML features that web documents do,
but they also go beyond these content, presentation, and behavior manipulation APIs
to take advantage of other fundamental services provided by the web browser
environment.
To really understand web applications, it is important to realize that web browsers have
grown well beyond their original role as tools for displaying documents and have trans-
formed themselves into simple operating systems. Consider: a traditional operating
system allows you to organize icons (which represent files and applications) on the
desktop and in folders. A web browser allows you to organize bookmarks (which rep-
resent documents and web applications) in a toolbar and in folders. An OS runs mul-
tiple applications in separate windows; a web browser displays multiple documents (or
applications) in separate tabs. An OS defines low-level APIs for networking, drawing
graphics, and saving files. Web browsers define low-level APIs for networking (Chap-
ter 18), saving data (Chapter 20), and drawing graphics (Chapter 21).
With this notion of web browser as simplified OS in mind, we can define web appli-
cations as web pages that use JavaScript to access the more advanced services (such as
310 | Chapter 13: JavaScript in Web Browsers
networking, graphics, and data storage) offered by browsers. The best known of these
advanced services is the XMLHttpRequest object, which enables networking through
scripted HTTP requests. Web apps use this service to obtain new information from the
server without a page reload. Web applications that do this are commonly called Ajax
applications and they form the backbone of what is known as “Web 2.0.” XMLHttpRe-
quest is covered in detail in Chapter 18.
The HTML5 specification (which, at the time of this writing, is still in draft form) and
related specifications are defining a number of other important APIs for web apps.
These include the data storage and graphics APIs of Chapters 21 and 20 as well as APIs
for a number of other features, such as geolocation, history management, and back-
ground threads. When implemented, these APIs will enable a further evolution of web
application capabilities. They are covered in Chapter 22.
JavaScript is more central to web applications than it is to web documents, of course.
JavaScript enhances web documents, but a well-designed document will continue to
work with JavaScript disabled. Web applications are, by definition, JavaScript pro-
grams that use the OS-type services provided by the web browser, and they would not
be expected to work with JavaScript disabled.
1
13.2  Embedding JavaScript in 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.
The subsections that follow explain each of these four JavaScript embedding techni-
ques.  It  is  worth noting, however,  that  HTML event  handler  attributes  and
javascript:
URLs are rarely used in modern JavaScript code (they were somewhat
common in the early days of the Web). Inline scripts (those without a 
src
attribute) are
also less common than they once were. A programming philosophy known as unob-
trusive JavaScript argues that content (HTML) and behavior (JavaScript code) should
as much as possible be kept separate. According to this programming philosophy,
JavaScript is best embedded in HTML documents using 
<script>
elements with 
src
attributes.
1.Interactive web pages that communicate with server-side CGI scripts through HTML form submissions
were the original “web application” and can be written without the use of JavaScript. This is not the kind
of web application that we’ll be discussing in this book, however.
13.2  Embedding JavaScript in HTML | 311
Client-Side
JavaScript
13.2.1  The <script> Element
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. If your
JavaScript code contains the 
<
or 
&
characters, these characters are interpreted as XML
markup. For this reason, 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>
Example 13-2 is an HTML file that includes a simple JavaScript program. The com-
ments explain what the program does, but the main point of this example is to dem-
onstrate how JavaScript code is embedded within an HTML file along with, in this case,
a CSS stylesheet. Notice that this example has a structure similar to Example 13-1 and
uses the 
onload
event handler in much the same way as that example did.
Example 13-2. A simple JavaScript digital clock
<!DOCTYPE html>                 <!-- This is an HTML5 file -->
<html>                          <!-- The root element -->
<head>                          <!-- Title, scripts & styles go here -->
<title>Digital Clock</title>
<script>                        // A script of js code
// Define a function to display the current time
function displayTime() {
var elt = document.getElementById("clock");  // Find element with id="clock"
var now = new Date();                        // Get current time
elt.innerHTML = now.toLocaleTimeString();    // Make elt display it
setTimeout(displayTime, 1000);               // Run again in 1 second
}
window.onload = displayTime;  // Start displaying the time when document loads.
</script>
<style>                         /* A CSS stylesheet for the clock */
#clock {                        /* Style apply to element with id="clock" */
font: bold 24pt sans;         /* Use a big bold font */
background: #ddf;             /* On a light bluish-gray background */
padding: 10px;                /* Surround it with some space */
border: solid black 2px;      /* And a solid black border */
border-radius: 10px;          /* Round the corners (where supported) */
}
</style>
</head>
<body>                    <!-- The body is the displayed parts of the doc. -->
<h1>Digital Clock</h1>    <!-- Display a title -->
<span id="clock"></span>  <!-- The time gets inserted here -->
</body>
</html>
312 | Chapter 13: JavaScript in Web Browsers
Documents you may be interested
Documents you may be interested