Skip to content

Commit

Permalink
Deploying to gh-pages from @ 9b1d828 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
balat committed Sep 3, 2024
1 parent f107384 commit 10e68d7
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions dev/manual/how-to-add-a-javascript-script.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@
</li></ul><nav class="how-doctree"><h1> Programmer's guide</h1><h2><a href="intro" class="ocsimore_phrasing_link">Introduction. Ocsigen: where to start?</a></h2><h2><a href="basics" class="ocsimore_phrasing_link">Client-server application programming guide</a></h2><h2><a href="basics-server" class="ocsimore_phrasing_link">Server-side website programming guide</a></h2><h1> Main tutorials</h1><h2><a href=".././../../install" class="ocsimore_phrasing_link">Install Ocsigen</a></h2><h2><a href="start" class="ocsimore_phrasing_link">Your first app in 5 minutes</a></h2><h2><a href="application" class="ocsimore_phrasing_link">Client/server application: Graffiti</a></h2><h2><a href="tutowidgets" class="ocsimore_phrasing_link">Eliom apps basics: writing client-server widgets</a></h2><h2><a href="how-to-register-session-data" class="ocsimore_phrasing_link">Session data: Eliom references</a></h2><h2><a href="tutoreact" class="ocsimore_phrasing_link">Reactive client-server Web applications</a></h2><h2><a href="interaction" class="ocsimore_phrasing_link">Service based Web programming</a></h2><h2><a href="misc" class="ocsimore_phrasing_link">Mixing traditional Web interaction with client-server app</a></h2><h1> 5-minute tutorials</h1><h2><a href="lwt" class="ocsimore_phrasing_link">Lwt</a></h2><h2><a href="html" class="ocsimore_phrasing_link">HTML</a></h2><h1> Other tutorials: Miscellanous features</h1><h2><a href="mobile" class="ocsimore_phrasing_link">Mobile applications with Ocsigen</a></h2><h2><a href="custom-conf" class="ocsimore_phrasing_link">Custom configuration</a></h2><h2><a href="rest" class="ocsimore_phrasing_link">RESTful JSON API</a></h2><h2><a href="ocsipersist" class="ocsimore_phrasing_link">Persistent tables with Ocsipersist</a></h2><h1> Improving Graffiti</h1><h2><a href="pictures" class="ocsimore_phrasing_link">Download pictures</a></h2><h2><a href="music" class="ocsimore_phrasing_link">Playing music</a></h2><h2><a href="reactivemediaplayer" class="ocsimore_phrasing_link">Reactive media player</a></h2><h1 class="howto"> HOW-TO</h1><h2> My first steps with Ocsigen</h2><h3><a href="how-to-make-hello-world-in-ocsigen" class="ocsimore_phrasing_link">How to make &quot;hello world&quot; in Ocsigen</a></h3><h3><a href="how-to-compile-my-ocsigen-pages" class="ocsimore_phrasing_link">How to compile my Ocsigen pages</a></h3><h3><a href="how-to-configure-and-launch-the-ocsigen-server" class="ocsimore_phrasing_link">How to configure and launch the Ocsigen Server</a></h3><h3><a href="how-does-a-page-s-source-code-look" class="ocsimore_phrasing_link">How does a client-server app source code look like?</a></h3><h2> How to put some elements in my page ?</h2><h3><a href="how-to-make-page-a-skeleton" class="ocsimore_phrasing_link">How to make a page skeleton</a></h3><h3><a href="how-to-use-get-parameters-or-parameters-in-the-url" class="ocsimore_phrasing_link">How to use GET parameters (parameters in the URL)</a></h3><h3><a href="how-to-add-css-stylesheet" class="ocsimore_phrasing_link">How to add CSS stylesheet</a></h3><h3><a href="how-to-add-a-javascript-script" class="ocsimore_phrasing_link">How to add a Javascript script</a></h3><h3><a href="how-to-add-a-div" class="ocsimore_phrasing_link">How to add a div</a></h3><h3><a href="how-to-add-a-list" class="ocsimore_phrasing_link">How to add lists in pages?</a></h3><h3><a href="how-to-add-an-image" class="ocsimore_phrasing_link">How to add an image</a></h3><h3><a href="how-to-write-titles-and-paragraphs" class="ocsimore_phrasing_link">How to write titles and paragraphs</a></h3><h3><a href="how-to-set-and-id-classes-or-other-attributes-to-html-elements" class="ocsimore_phrasing_link">How to set and id, classes or other attributes to HTML elements</a></h3><h3><a href="how-to-add-a-select-or-other-form-element" class="ocsimore_phrasing_link">How to add select (or other form element)</a></h3><h3><a href="how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service" class="ocsimore_phrasing_link">How to insert &quot;raw&quot; form elements (not belonging to a form towards a service)</a></h3><h3><a href="how-to-make-responsive-css" class="ocsimore_phrasing_link">How to make responsive CSS</a></h3><h2> Services</h2><h3><a href="how-to-do-links-to-other-pages" class="ocsimore_phrasing_link">How to do links to other pages</a></h3><h3><a href="how-to-write-forms" class="ocsimore_phrasing_link">How to write forms</a></h3><h3><a href="how-to-register-a-service-that-decides-itself-what-to-send" class="ocsimore_phrasing_link">How to register a service that decides itself what to send</a></h3><h3><a href="how-to-create-link-to-a-current-page-without-knowing-its-url" class="ocsimore_phrasing_link">How to create link to a current page (without knowing its URL)</a></h3><h3><a href="how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones" class="ocsimore_phrasing_link">How to create form wizard (sequence of pages depending on data entered on previous ones)</a></h3><h3><a href="how-to-write-a-json-service" class="ocsimore_phrasing_link">How to write a JSON service</a></h3><h3><a href="how-to-send-file-download" class="ocsimore_phrasing_link">How to send a file (download)</a></h3><h3><a href="how-to-send-file-upload" class="ocsimore_phrasing_link">How to send a file (upload)</a></h3><h2> Js_of_ocaml</h2><h3><a href="how-to-attach-ocaml-values-to-dom-elements" class="ocsimore_phrasing_link">How to attach OCaml values to DOM elements</a></h3><h3><a href="how-to-know-whether-the-browser-window-has-the-focus-or-not" class="ocsimore_phrasing_link">How to know whether the browser window has the focus or not</a></h3><h3><a href="how-to-build-js-object" class="ocsimore_phrasing_link">How to build js object</a></h3><h3><a href="how-to-stop-default-behaviour-of-events" class="ocsimore_phrasing_link">How to stop default behaviour of events</a></h3><h3><a href="how-to-call-an-ocaml-function-from-js-code" class="ocsimore_phrasing_link">How to call an OCaml function from js code</a></h3><h2> Eliom client-server applications</h2><h3><a href="how-to-call-a-server-side-function-from-client-side" class="ocsimore_phrasing_link">How to call a server-side function from the client side</a></h3><h3><a href="how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page" class="ocsimore_phrasing_link">How to make the client side program get an HTML element from the server and insert it in the page</a></h3><h3><a href="how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client" class="ocsimore_phrasing_link">How to attach OCaml values to the HTML nodes sent to the client</a></h3><h3><a href="how-to-iterate-on-all-sessions-for-one-user-or-all-tabs" class="ocsimore_phrasing_link">How to iterate on all sessions for one user, or all tabs</a></h3><h3><a href="how-to-implement-a-notification-system" class="ocsimore_phrasing_link">How to implement a notification system</a></h3><h3><a href="how-to-send-a-file-to-server-without-stopping-the-client-process" class="ocsimore_phrasing_link">How to send a file to server without stopping the client process</a></h3><h3><a href="how-to-detect-channel-disconnection" class="ocsimore_phrasing_link">How to detect channel disconnection</a></h3><h3><a href="how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed" class="ocsimore_phrasing_link">How to detect on client side that the server side state for the process is closed</a></h3><h2> Eliom Server side</h2><h3><a href="how-do-i-create-a-cryptographically-safe-identifier" class="ocsimore_phrasing_link">How do I create a Cryptographically safe identifier</a></h3><h3><a href="hash-password" class="ocsimore_phrasing_link">Protecting passwords</a></h3></nav></nav></aside></div><p class="reasonwarning">Warning: Reason support is experimental.
We are looking for beta-tester and contributors.
</p><button id="reason">Switch to </button><div class="twocols"><nav class="leftcol">Version <select class="how-versions" onchange="location = this.value;"><option value=".././../dev/manual/how-to-add-a-javascript-script" selected="selected">dev</option><option value=".././../7.1/manual/how-to-add-a-javascript-script">7.1</option><option value=".././../2.2/manual/how-to-add-a-javascript-script">2.2</option></select><nav class="how-doctree"><h1> Programmer's guide</h1><h2><a href="intro" class="ocsimore_phrasing_link">Introduction. Ocsigen: where to start?</a></h2><h2><a href="basics" class="ocsimore_phrasing_link">Client-server application programming guide</a></h2><h2><a href="basics-server" class="ocsimore_phrasing_link">Server-side website programming guide</a></h2><h1> Main tutorials</h1><h2><a href=".././../../install" class="ocsimore_phrasing_link">Install Ocsigen</a></h2><h2><a href="start" class="ocsimore_phrasing_link">Your first app in 5 minutes</a></h2><h2><a href="application" class="ocsimore_phrasing_link">Client/server application: Graffiti</a></h2><h2><a href="tutowidgets" class="ocsimore_phrasing_link">Eliom apps basics: writing client-server widgets</a></h2><h2><a href="how-to-register-session-data" class="ocsimore_phrasing_link">Session data: Eliom references</a></h2><h2><a href="tutoreact" class="ocsimore_phrasing_link">Reactive client-server Web applications</a></h2><h2><a href="interaction" class="ocsimore_phrasing_link">Service based Web programming</a></h2><h2><a href="misc" class="ocsimore_phrasing_link">Mixing traditional Web interaction with client-server app</a></h2><h1> 5-minute tutorials</h1><h2><a href="lwt" class="ocsimore_phrasing_link">Lwt</a></h2><h2><a href="html" class="ocsimore_phrasing_link">HTML</a></h2><h1> Other tutorials: Miscellanous features</h1><h2><a href="mobile" class="ocsimore_phrasing_link">Mobile applications with Ocsigen</a></h2><h2><a href="custom-conf" class="ocsimore_phrasing_link">Custom configuration</a></h2><h2><a href="rest" class="ocsimore_phrasing_link">RESTful JSON API</a></h2><h2><a href="ocsipersist" class="ocsimore_phrasing_link">Persistent tables with Ocsipersist</a></h2><h1> Improving Graffiti</h1><h2><a href="pictures" class="ocsimore_phrasing_link">Download pictures</a></h2><h2><a href="music" class="ocsimore_phrasing_link">Playing music</a></h2><h2><a href="reactivemediaplayer" class="ocsimore_phrasing_link">Reactive media player</a></h2><h1 class="howto"> HOW-TO</h1><h2> My first steps with Ocsigen</h2><h3><a href="how-to-make-hello-world-in-ocsigen" class="ocsimore_phrasing_link">How to make &quot;hello world&quot; in Ocsigen</a></h3><h3><a href="how-to-compile-my-ocsigen-pages" class="ocsimore_phrasing_link">How to compile my Ocsigen pages</a></h3><h3><a href="how-to-configure-and-launch-the-ocsigen-server" class="ocsimore_phrasing_link">How to configure and launch the Ocsigen Server</a></h3><h3><a href="how-does-a-page-s-source-code-look" class="ocsimore_phrasing_link">How does a client-server app source code look like?</a></h3><h2> How to put some elements in my page ?</h2><h3><a href="how-to-make-page-a-skeleton" class="ocsimore_phrasing_link">How to make a page skeleton</a></h3><h3><a href="how-to-use-get-parameters-or-parameters-in-the-url" class="ocsimore_phrasing_link">How to use GET parameters (parameters in the URL)</a></h3><h3><a href="how-to-add-css-stylesheet" class="ocsimore_phrasing_link">How to add CSS stylesheet</a></h3><h3><a href="how-to-add-a-javascript-script" class="ocsimore_phrasing_link">How to add a Javascript script</a></h3><h3><a href="how-to-add-a-div" class="ocsimore_phrasing_link">How to add a div</a></h3><h3><a href="how-to-add-a-list" class="ocsimore_phrasing_link">How to add lists in pages?</a></h3><h3><a href="how-to-add-an-image" class="ocsimore_phrasing_link">How to add an image</a></h3><h3><a href="how-to-write-titles-and-paragraphs" class="ocsimore_phrasing_link">How to write titles and paragraphs</a></h3><h3><a href="how-to-set-and-id-classes-or-other-attributes-to-html-elements" class="ocsimore_phrasing_link">How to set and id, classes or other attributes to HTML elements</a></h3><h3><a href="how-to-add-a-select-or-other-form-element" class="ocsimore_phrasing_link">How to add select (or other form element)</a></h3><h3><a href="how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service" class="ocsimore_phrasing_link">How to insert &quot;raw&quot; form elements (not belonging to a form towards a service)</a></h3><h3><a href="how-to-make-responsive-css" class="ocsimore_phrasing_link">How to make responsive CSS</a></h3><h2> Services</h2><h3><a href="how-to-do-links-to-other-pages" class="ocsimore_phrasing_link">How to do links to other pages</a></h3><h3><a href="how-to-write-forms" class="ocsimore_phrasing_link">How to write forms</a></h3><h3><a href="how-to-register-a-service-that-decides-itself-what-to-send" class="ocsimore_phrasing_link">How to register a service that decides itself what to send</a></h3><h3><a href="how-to-create-link-to-a-current-page-without-knowing-its-url" class="ocsimore_phrasing_link">How to create link to a current page (without knowing its URL)</a></h3><h3><a href="how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones" class="ocsimore_phrasing_link">How to create form wizard (sequence of pages depending on data entered on previous ones)</a></h3><h3><a href="how-to-write-a-json-service" class="ocsimore_phrasing_link">How to write a JSON service</a></h3><h3><a href="how-to-send-file-download" class="ocsimore_phrasing_link">How to send a file (download)</a></h3><h3><a href="how-to-send-file-upload" class="ocsimore_phrasing_link">How to send a file (upload)</a></h3><h2> Js_of_ocaml</h2><h3><a href="how-to-attach-ocaml-values-to-dom-elements" class="ocsimore_phrasing_link">How to attach OCaml values to DOM elements</a></h3><h3><a href="how-to-know-whether-the-browser-window-has-the-focus-or-not" class="ocsimore_phrasing_link">How to know whether the browser window has the focus or not</a></h3><h3><a href="how-to-build-js-object" class="ocsimore_phrasing_link">How to build js object</a></h3><h3><a href="how-to-stop-default-behaviour-of-events" class="ocsimore_phrasing_link">How to stop default behaviour of events</a></h3><h3><a href="how-to-call-an-ocaml-function-from-js-code" class="ocsimore_phrasing_link">How to call an OCaml function from js code</a></h3><h2> Eliom client-server applications</h2><h3><a href="how-to-call-a-server-side-function-from-client-side" class="ocsimore_phrasing_link">How to call a server-side function from the client side</a></h3><h3><a href="how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page" class="ocsimore_phrasing_link">How to make the client side program get an HTML element from the server and insert it in the page</a></h3><h3><a href="how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client" class="ocsimore_phrasing_link">How to attach OCaml values to the HTML nodes sent to the client</a></h3><h3><a href="how-to-iterate-on-all-sessions-for-one-user-or-all-tabs" class="ocsimore_phrasing_link">How to iterate on all sessions for one user, or all tabs</a></h3><h3><a href="how-to-implement-a-notification-system" class="ocsimore_phrasing_link">How to implement a notification system</a></h3><h3><a href="how-to-send-a-file-to-server-without-stopping-the-client-process" class="ocsimore_phrasing_link">How to send a file to server without stopping the client process</a></h3><h3><a href="how-to-detect-channel-disconnection" class="ocsimore_phrasing_link">How to detect channel disconnection</a></h3><h3><a href="how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed" class="ocsimore_phrasing_link">How to detect on client side that the server side state for the process is closed</a></h3><h2> Eliom Server side</h2><h3><a href="how-do-i-create-a-cryptographically-safe-identifier" class="ocsimore_phrasing_link">How do I create a Cryptographically safe identifier</a></h3><h3><a href="hash-password" class="ocsimore_phrasing_link">Protecting passwords</a></h3></nav></nav><article class="rightcol"><h1>How to add a Javacript script?</h1><p>If you have client-side programs on your website, you can use Eliom's client-server features, that will compile client side parts to JS using <strong>Ocsigen Js_of_ocaml</strong>, and include automatically the script in the page. But in some cases you may also want to include yourselves external JS scripts.
</p><h3> Include the script on the html header</h3><p>Javascript scripts are included in the header using the <strong>js_script</strong> function (defined in <span><span class="doclink_error">Error a_api: exception Dune__exe__Api.Error(&quot;invalid ocaml id \&quot;Eliom_content.Html.D\&quot;&quot;)</span></span>).
</p><h3> Include the script on the html header</h3><p>Javascript scripts are included in the header using the <strong>js_script</strong> function (defined in <span><a href=".././../../eliom/latest/api/server/Eliom_content.Html.D">Eliom_content.Html.D</a></span>).
</p><pre class=""><code class="language-ocaml translatable">open Eliom_content.Html.D (* for make_uri an js_script *)

js_script
~uri:(make_uri (Eliom_service.static_dir ())
[&quot;hello.js&quot;])
()</code></pre><p>This function has 2 parameters: the file path and unit.
</p><p>The file path is generated using the <strong>make_uri</strong> function (from <span><span class="doclink_error">Error a_api: exception Dune__exe__Api.Error(&quot;invalid ocaml id \&quot;Eliom_content.Html.D\&quot;&quot;)</span></span> module). This function creates the relative URL string using the static directory (which is a service) configured in the configuration file and the given list.
</p><p>The file path is generated using the <strong>make_uri</strong> function (from <span><a href=".././../../eliom/latest/api/server/Eliom_content.Html.D">Eliom_content.Html.D</a></span> module). This function creates the relative URL string using the static directory (which is a service) configured in the configuration file and the given list.
</p><p>Insert this piece of code on the list given in parameter to the <strong>head</strong> function.
</p><p>Or you can use:
<span><a href=".././../../eliom/latest/api/server/Eliom_tools.F#VALhead">Eliom_tools.F.head</a></span>
Expand Down

0 comments on commit 10e68d7

Please sign in to comment.