Table of Contents

HTML

HTML tags are implemented as builtin HopScript functions. When using the HTML syntax, identifiers are case-insensitive. For instance, <DIV>, <div>, and <Div> are equivalent.

HTML5 tags

HTML tags have the orginal HTML5 meaning. Some tags have additional attributes that are for Hop.js use only. These are described in this document.

<HEAD>

Hop.js extends the HTML5 <head> attributes with the following list:

Example

function foo( title ) {
  return <head title=${title} css=${PATH + "/my-css.hss"} inline=${true}>;
}

<IMG>

Hop.js can automatically inline images, which might be used to generate self-contained HTML documents. For that is supports the extra inline property.

Hop.js tags

In addition to standard HTML5 tags, Hop.js supports the following tags.

<SVG:IMG [attributes]>

An SVG image. The attributes are:

The tag <svg:img> may be used everywhere in HTML documents. It should not be used inside a <svg> section.

This example illustrate basic SVG in Hop.js. It uses standard SVG tags and the svg:img which is a convenient facility exclusively provided by Hop. This new tag automatically reads the svg image and creates the appropriate SVG nodes.

The example also uses basic SVG tags to draw some shapes in the Web page.

svg/svg.js

var cfg = require( hop.config );

service svgServerDate() {
   return Date.now();
}

service svg() {
   var path = cfg.shareDir + "/icons/hop/hop.svg";
   return <html>
     <table>
       <tr>
         <td>
           <svg:img width="1em" height="1ex" src=${path}/>
         </td>
         <td>
           <svg:img width="5em" height="5ex" src=${path}/>
         </td>
         <td>
           <svg:img width="10em" height="10ex" src=${path}/>
         </td>
       </tr>
     </table>
     <svg width="400" height="430">
       <svg:polygon style="stroke:blue; stroke-width:1.5;fill:silver"
                   points="10,10 180,10 10,250 50,50 10,10"/>
       <svg:circle style="stroke:red; stroke-width:2; fill: yellow; opacity: 0.5"
                  cx="100" cy="80" r="75"/>
       <svg:rect style="stroke:green; stroke-width:3; fill: #ded; opacity:.8"
                x="30" y="80" height="120" width="220"/>
       <svg:path style="fill:red;fill-rule:evenodd;stroke:none"
                d="M 230,250 C 360,30 10,255 110,140 z"/>
     </svg>
   </html>;
}
   
console.log( "Go to \"http://%s:%d/hop/svg\"", hop.hostname, hop.port );

<MATH:TEX>

Parse a math formula expressed in the TeX syntax and build the corresponding MathML DOM tree.

SVG tags

Hop.js supports the following SVG tags.

<SVG [attributes]>

<SVG:DEFS [attributes]>

<SVG:RECT [attributes]>

<SVG:CIRCLE [attributes]>

<SVG:ELLIPSE [attributes]>

<SVG:FILTER [attributes]>

<SVG:FEGAUSSIANBLUR [attributes]>

<SVG:FECOLORMATRIX [attributes]>

<SVG:FOREIGNOBJECT [attributes]>

<SVG:G [attributes]>

<SVG:IMG [attributes]>

<SVG:LINE [attributes]>

<SVG:PATH [attributes]>

<SVG:POLYLINE [attributes]>

<SVG:POLYGON [attributes]>

<SVG:TEXT [attributes]>

<SVG:TEXTPATH [attributes]>

<SVG:TREF [attributes]>

<SVG:TSPAN [attributes]>

MathML tags

Hop.js supports the following MathML tags.

<MATH [attributes]>

<MATH:MSTYLE [attributes]>

<MATH:MI [attributes]>

<MATH:MN [attributes]>

<MATH:MO [attributes]>

<MATH:MROW [attributes]>

<MATH:MUNDER [attributes]>

<MATH:MOVER [attributes]>

<MATH:MUNDEROVER [attributes]>

<MATH:MSUP [attributes]>

<MATH:MSUB [attributes]>

<MATH:MSUBSUP [attributes]>

<MATH:MFRAC [attributes]>

<MATH:MROOT [attributes]>

<MATH:MSQRT [attributes]>

<MATH:MTEXT [attributes]>

<MATH:MTABLE [attributes]>

<MATH:MTR [attributes]>

<MATH:MTD [attributes]>

<MATH:MPADDED [attributes]>

Tilde

new Tilde( string )

Constructs a new client-side program. This constructor is to used to generate client-side programs whose contained are obtained by a computation. In most situations, one should normaly prefer using the ~ syntax.