Getting Started

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:

Getting Started with ASP.net

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:

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

  1. Download the latest release from the project site
  2. Unpack JavaScriptClientPages-DotNet.zip into your WebSites directory
    Example:
    C:\Users\User\Documents\Visual Studio 2008\WebSites\JavaScriptClientPages
  3. Open your Visual Studio Family IDE
  4. In the File menu, select Open Web Site...
  5. Select the directory where you unpacked the archive

Creating a JavaScript Client Page

  1. In the Solution Explorer, right-click on the jscp directory
  2. Select Add - New Item...
  3. Find and select "XML Document"
  4. Change the file name to HelloWorld.xml
  5. 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

  1. In the Solution Explorer, right-click on the project and select Add - New Item...
  2. Find and select the "HTML Page" template
  3. Change the file name to HelloWorld.html
  4. Add a reference to the JSCP JavaScript library to the <head> element:
    <script type="text/javascript" href="JSClientPages.js"></script>
  5. 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>
  6. 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>
  7. 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

  1. Press Ctrl+F5 to run your application in a Web browser
  2. Type your name in the Your Name field
  3. Click on the Go button
  4. The page will be rendered below the Go button, and it will say "hello" to you.

Getting Started with PHP

Prerequisites

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

  1. Download the latest release from the project site
  2. 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

  1. Create a file named HelloWorld.xml in the jscp directory within the directory where you extracted the original release
  2. 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

  1. In the JavaScriptClientPages directory (i.e. the directory where you extracted the original distribution), create a new page named HelloWorld.html
  2. Add a reference to the JSCP JavaScript library to the <head> element:
    <script type="text/javascript" href="JSClientPages.js"></script>
  3. 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>
  4. 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>
  5. 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

  1. Make sure that your Web server (e.g. Apache on Unix or IIS on Windows) is running. If it is not, start it.
  2. Open a Web browser and point it to the URL corresponding to the JavaScriptClientPages directory.
  3. Type your name in the Your Name field
  4. Click on the Go button
  5. The page will be rendered below the Go button, and it will say "hello" to you.