Creating your first HTML5 Application: Hello World

In this tutorial, we will get started with a new Script# HTML5 Application project and continue working towards building a basic spreadsheet application.

Prerequisites

• Using the development branch
• Understanding of the [AMD Pattern] (http://requirejs.org/docs/whyamd.html)
• Familiarity with [RequireJS] (http://www.requirejs.org/)

---

Step 1: Create a new HTML5 Application Project and call it Spreadsheet

---

Step 2: Take a look at the project files under Solution Explorer

1. AssemblyInfo.cs contains assembly level information for the C# DLL that's generated when the project is built. In our project, the file name will be called Spreadsheet.DLL. In addition, it also defines a script template which will be used for the generated file.

2. FxCop.ruleset contains code analysis rules. Generally, you can ignore this file.

3. Script.Web is a reference to the Script# HTML Library. You can explore the available API's explosed by that library by double clicking that reference and viewing it in the Object Browser.

4. packages.config contains package references. You will not need to modify this file. It is automatically updated as you add or remove references. In addition, Nuget will use this file to automatically download project references.

5. Page.cs is a static class with a static constructor that gets executed when the resulting Javascript file is loaded.

---

Step 3: Modify Page.cs

Let's add an alert in the constructor:

Window.Alert("Hello World...");

Now, build the application and look inside the bin\Debug folder:

You will notice that there's a file called Spreadsheet.js. Let's open this file and take a look at it:

Notice that the Window.Alert ("Hello World...") was translated to alert('Hello World...')

---

Step 4: Create an HTML file

Create a static HTML file called Spreadsheet.html and set its "Copy to Output Directory property" as "Copy Always":

---

Step 5: Add script references

Add the following script tags to the head section of Spreadsheet.html

<script src="http://requirejs.org/docs/release/2.1.9/comments/require.js"></script>
<script src="ss.js"></script>
<script src="Spreadsheet.js"></script>

• require.js is an Javascript File and Module Loader that will allow us to load modules defined using the AMD pattern.

• ss.js is short for ScriptSharp.js. It provides us with some utility functions so we can potentially continue to think in C#. For example, Script# allows us to use Queues, but Javascript doesn't have a concept of queues. This Queue functionality is implemented in ss.js and the API is exposed via mscorlib.

• spreadsheet.js is the Script# compiler generated Javascript file that contains our code

---

Step 6: Run Spreadsheet.html

Build the project and double click bin\Debug\Spreadsheet.html to open it in a web browser. You should see an alert as soon as the file is loaded. If you don't see the alert, you should look at the debugger/console for any error messages. The process of debugging script# projects entails debugging the generated HTML/Javascript file in the browser.