Developing client-side code using JavaScript has never been easier! To get
started please click on one of the following links depending on the platform
you are planning to use:
Prerequisites
Important Note: This tutorial was written under the assumption that you
have access to the Microsoft® implementation of the .NET
platform version 3.5 or above,
as well as one of the following IDEs:
-
Microsoft® Visual Web Developer (Freeware)
- Microsoft® Visual Studio (Commercial)
It should be noted that JavaScript Server Pages can be used on other implementations of the .NET
Framework, nor do they require an IDE. However, this tutorial does not address those cases simply
because they have not been thoroughly research and tested yet.
First Steps
-
Download the latest release from
the project site
-
Unpack JavaScriptClientPages-DotNet.zip into your
WebSites directory
Example:
C:\Users\User\Documents\Visual Studio 2008\WebSites\JavaScriptClientPages
- Open your Visual Studio
Family IDE
- In the File menu, select
Open Web Site...
- Select the directory where you unpacked the archive
Creating a JavaScript Client Page
-
In the Solution Explorer, right-click
on the jscp directory
-
Select Add - New Item...
-
Find and select "XML Document"
- Change the file name to HelloWorld.xml
-
Copy and paste the code below into the XML document you have just
created
Important Note: Although it is also possible to use the
HTML Page template in this situation, it is better
to use an XML document instead in order to enable IntelliSense with custom schemas,
as well as to prevent the IDE from treating <?js ... ?> processing instructions
occurring within certain elements (e.g. tables) as syntax errors.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Getting Started with JSCP - Hello World</title>
<meta name="JSClientPage" content="HelloWorld" />
</head>
<body>
<h1>My First JSCP Page</h1>
<p>
Hello <?js text(input.name); ?>! I am a JavaScript Client Page.
</p>
</body>
</html>
Invoking the Page from Client Code
-
In the Solution Explorer, right-click on the
project and select Add - New Item...
-
Find and select the "HTML Page" template
-
Change the file name to HelloWorld.html
-
Add a reference to the JSCP JavaScript library to the <head> element:
<script type="text/javascript" href="JSClientPages.js"></script>
-
Add a request to the JSCP compiler for the HelloWorld page you have just
created (HelloWorld.xml)
<script type="text/javascript" href="JSClientPage.ashx?page=HelloWorld.xml"></script>
-
Add the XHTML code for user input to the body:
Your Name: <input type="text" name="name" id="input-name" value="John Doe" />
<br />
<button onclick="go(); return false;">Go!</button>
<div id="hello-world-container"></div>
-
Create an event handler function that renders the JavaScript
client page:
<script type="text/javascript">
function go() {
JSClientPage.render(
'HelloWorld', // the name of the page to render (from the meta tag)
'hello-world-container', // The destination container
{
name: document.getElementById('input-name').value
}
);
}
</script>
That's it! The programming part is done.
Testing your Application
- Press Ctrl+F5 to run your application in a Web browser
- Type your name in the Your Name field
- Click on the Go button
-
The page will be rendered below the Go button, and it will say "hello" to you.
- PHP 5.2.x
-
The XSLT extension, which is bundled with PHP 5.x
(the one that is described in the PHP manual under
"XSL Functions")
Warning: The bundled PHP-based JavaScript Client
Pages compiler
will not work with the XSLT processor bundled with
PHP 4.x or any other XSLT processors bundled with PHP. While it might be possible to
retrofit it, the steps involved in doing so are beyond the scope of this document.
Warning: Due to the diversity of tools encountered
in the PHP community and the lack of a dominant development environment, no
instructions will be given for specific editors or IDEs. Also, enabling code
completion in the various PHP IDEs available on the market is beyond the scope
of this document.
First Steps
-
Download the latest release from
the project site
-
Unpack JavaScriptClientPages-PHP.zip into your
Web server's document root or any other directory that can be
accessible through the Web
Example:
/var/www/html/JavaScriptClientPages
Creating a JavaScript Client Page
-
Create a file named HelloWorld.xml in the
jscp directory within the directory where
you extracted the original release
-
Copy and paste the code below into the XML document you have just
created
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Getting Started with JSCP - Hello World</title>
<meta name="JSClientPage" content="HelloWorld" />
</head>
<body>
<h1>My First JSCP Page</h1>
<p>
Hello <?js text(input.name); ?>! I am a JavaScript Client Page
</p>
</body>
</html>
Invoking the Page from Client Code
-
In the JavaScriptClientPages directory (i.e. the
directory where you extracted the original distribution), create a new page
named HelloWorld.html
-
Add a reference to the JSCP JavaScript library to the <head> element:
<script type="text/javascript" href="JSClientPages.js"></script>
-
Add a request to the JSCP compiler for the HelloWorld page you have just
created (HelloWorld.xml)
<script type="text/javascript" href="JSClientPage.php?page=HelloWorld.xml"></script>
-
Add the XHTML code for user input to the body:
Your Name: <input type="text" name="name" id="input-name" value="John Doe" />
<br />
<button onclick="go(); return false;">Go!</button>
<div id="hello-world-container"></div>
-
Create an event handler function that renders the JavaScript
client page:
<script type="text/javascript">
function go() {
JSClientPage.render(
'HelloWorld', // the name of the page to render (from the meta tag)
'hello-world-container', // The destination container
{
name: document.getElementById('input-name').value
}
);
}
</script>
That's it! The programming part is done.
Testing your Application
- Make sure that your Web server (e.g. Apache on Unix or IIS on Windows) is
running. If it is not, start it.
- Open a Web browser and point it to the URL corresponding to the
JavaScriptClientPages directory.
- Type your name in the Your Name field
- Click on the Go button
- The page will be rendered below the Go button, and it will say "hello" to you.