# JavaScript

PDF supports JavaScript for various purposes, such as form validation. However, please note that typeset.sh itself does not parse JavaScript like a browser would. Instead, scripts are attached to the PDF and executed by the client's PDF viewer application.

Not all viewer support all futures and events.

To include `<script>` tags, the `data-pdf` attribute must be present. This precaution is taken to avoid including any scripts by default.

PDF supports document event handlers that can be subscribed to by adding the attribute `data-on="EventType"`. The following event types are available:

```
WillClose
WillSave
DidSave
WillPrint
DidPrint
```

Ohter ineraction events (onclick, onmousedown, etc.) only work on form fields.

#### Simple JavaScript Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript.html</title>
    <style>
        @page {
            size: A4;
            margin: 10mm;
        }
    </style>
    <script type="text/javascript" data-pdf>
        var counter = 0;
        function test(event) {
            app.alert((++counter) + " Hello from "+app.viewerType+" by clicking "+event.target.name);
        }

        function validate() {
            app.alert("Email: " + this.getField("email").value);
        }
    </script>

    <script type="text/javascript" data-pdf data-on="didSave">
        app.alert("Saving complete");
    </script>

</head>
<body>
    <div>
        <input type="checkbox" name="foo" value="1" onclick="test(event)" />

        <input type="radio" name="bar" value="1" onclick="test(event)" checked />
        <input type="radio" name="bar" value="2" onclick="test(event)" />

        <input type="text" 
               name="email" 
               onmouseenter="console.println('email onmouseenter')"
               onmousedown="console.println('email onmousedown')"
               onmouseleave="console.println('email onmouseleave')"
               onmouseover="console.println('email onmouseover')"
               onmouseup="console.println('email onmouseup')"
               onfocus="console.println('email onfocus')"
               onblur="console.println('email onblur')"
               onkeystroke="console.println('email onkeystroke')"
               onvalidate="console.println('email onvalidate')"
               oncalculate="console.println('email oncalculate')"
               value="contact@typeset.sh" />
    </div>
    <div>
        <button onclick="validate()">Validate</button>
    </div>
</body>
</html>

```

More information can be found here: <https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/pdfs/acrobatsdk_jsapiref.pdf>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.typeset.sh/advanced-guides/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
