Click to show TOC

TryITJs Tutorials

Introduction To TryITjs Tutorial

Directory Structure

What is a .try file

Top level files

Basic Example

The code below is the basic.try file for the example

!head
  ~~lt%%title~~gt%%First Tryit~~lt%%/title~~gt%%
  @@include tools/head.try

!md 
    # Introduction
    This a very simple **TryITjs** file. It has only one page.

    ## Code example

    This is a simple code example to create a javascript array and display it.

    Press the RUN button to execute the code (you can eddit the code and run again if you like)

!tryit
    var array = [ 'a String', 1 , { name: 'tryit'} ]; // array with a `string`, `number`, and an `object`
    array


!md
    **What just happened**, if you execute the code above it will display the array just created. 

    __Note: the last expression `array` is displayed.

    ~~lt%%a href="some-more.html"~~gt%%More Example~~lt%%/a~~gt%%

Two Page Example

In this example we show you how to create a multi page try file. The way to create a new page is to use '#' heading h1 to create a new page.

The following is the .try file used for this example

!head
  ~~lt%%title~~gt%%Sligltly More elaborate example~~lt%%/title~~gt%%
!md 
    # Introduction
    This is a slightly more elaborate example

    ## Code example

    This is a simple code example to create a javascript array and display it.

!tryit
    var array = [ 'a String', 1 , { name: 'tryit'} ]; // array with a `string`, `number`, and an `object`
    array


!md
    **What just happened**, if you execute the code above it will display the array just created. 

    _Note: the last expression `array` is displayed._

    ## Some simple notes

    * You can edit the example above and runit as may time as you want
    * The code changes its theme once you edit it to show you
    A variable created within a **!tryit** snippet  usin a ``let`` only exists in the snipped

!md
    # Another Page

    This is one more example in a new page. The is it my test.
!end




Page - 1




Modularizing a try file

Once you start creating a significant tutorial file it can start to become large and unwieldy. The tool that supports modularization is @@include file_name.try.

Try Fragments

This the file we are using to implement the page

!head
    ~~lt%%title~~gt%%Modular Tryit~~lt%%/title~~gt%%
    @@include tools/head.try

!md
    # Example of Modularizaion

    I am going to see how to modularize a try example into multiple files.

    While we are here we can demonstrate how to display data, amd show how to incorporate into a new file (in a sub directory __modular__)

    @@include modular/disp_data_simple.try

Internal file 1

The internal file is the following:

!md
    ## Displying data

    The simplest way of displaying data is to end the script with a expression that
    returns a value that is not __undefined__.

!tryit
    let arr = [0, 1, 2, 3, 4, 'hello'];
    arr.slice(2, 5);

!md
    ## Displaying and may values

    If we need to display display and other points of the script at ponts other than at the end, we need a display function, for example __console.log__

    * $$.D(exp1,exp2...) __Display Javascript expression results __
    * $$.HTML(str)  __Display string as HTML__
    * $$.json(expr) __Display data as JSON string__

    ### Displaying Javascript Data $$.D

    First we will use the __$$.D__ to display Javascript expressions. This function is
    very similar to __console.log(expr1, expr2)__

!tryit
    let name = "TryITjs"
    $$.D('Name: ', name); // display the naame and give it a description

    let jobTitle = "Developer";
    $$.D('Job Title', jobTitle);

    let arr = [0, 1, 2, 3, 4, 'hello'];
    $$.D(arr);

!md
    \
    ### Displaying HTML from string

    Here we will show how to render some HTML. In order to support remdering, TryITjs uses 
    ~~lt%%a href="https://semantic-ui.com/introduction/getting-started.html" target="_blank"~~gt%%Semantic-UI~~lt%%/a~~gt%%




Page - 2




Creating UI

!head
  ~~lt%%title~~gt%%Modular Tryit~~lt%%/title~~gt%%
  @@include tools/head.try
  ~~lt%%script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js" crossorigin="anonymous"~~gt%%~~lt%%/script~~gt%%
  ~~lt%%script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js" ~~gt%%~~lt%%/script~~gt%%
  ~~lt%%script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"~~gt%%~~lt%%/script~~gt%%
!md
   # Create UI

!tryit
//HTML in display area

// add some style
$$.HTML(`
      ~~lt%%style~~gt%%
       .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    ~~lt%%/style~~gt%%
`)

// Now render some html

$$.HTML(`
  ~~lt%%div style="height: 30rem"~~gt%%
    ~~lt%%h1~~gt%%Hello World ${(new Date()).toLocaleDateString()}~~lt%%/h1~~gt%%
    ~~lt%%img class="center" src="https://www.w3schools.com/html/pic_trulli.jpg" /~~gt%%
  ~~lt%%/div~~gt%%
`)





!tryit
  // JSX example
  var aClock= () =~~gt%% (
    ~~lt%%div style={{height: "30rem"}}~~gt%%
      ~~lt%%h1 class="center"~~gt%%~~lt%%b~~gt%%Hello World~~lt%%/b~~gt%% {(new Date()).toLocaleDateString()}~~lt%%/h1~~gt%%
      ~~lt%%img class="center" src="https://www.w3schools.com/html/pic_trulli.jpg" /~~gt%%
    ~~lt%%/div~~gt%%
  );

  aClock()

!md
    ## A simple clock

    Using React to render a simple clock

!tryit
    // React JSX
    function Clock() {
        const clock = () =~~gt%% ReactDOM.render(aClock(), document.getElementById('clock-id'));
        $$.lastly( () =~~gt%% setInterval(clock, 1000)); // execute after all rendering of output

        $$.HTML('~~lt%%div id="clock-id" /~~gt%%~~lt%%br /~~gt%%~~lt%%br /~~gt%%~~lt%%br /~~gt%%~~lt%%br /~~gt%%---------------'); // render some HTML
    }    

    Clock();

!md
    ## Semantic-UI example

    ### Creating a target 

    ~~code%%tryit
      \!html
         \~~lt%%div id="ui-target1" /~~gt%%
    ~~code%%

!html 
  ~~lt%%div id="ui-target" /~~gt%%
  ~~lt%%div style="margin-left: 30rem"~~gt%%
   ~~lt%%img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/AJ_Digital_Camera.svg" /~~gt%%
  ~~lt%%/div~~gt%%   

!tryit
  var strHtml =   `
    ~~lt%%div style="width: 70%; margin-left: 10rem"~~gt%%
      ~~lt%%div class="ui three buttons"~~gt%%
        ~~lt%%button class="ui active button red"~~gt%%One~~lt%%/button~~gt%%
        ~~lt%%button class="ui button green"~~gt%%Two~~lt%%/button~~gt%%
        ~~lt%%button class="ui button"~~gt%%Three~~lt%%/button~~gt%%
      ~~lt%%/div~~gt%%
    ~~lt%%/div~~gt%%
  `;

  ducument.getElementById('ui-target').innerHTML = strHtml;


!md
  ###

!tryit
  // Javascript - $$.HTML = builtin HTML
  $$.HTML(

  );

!tryit
  // JSX - 
  (
  ~~lt%%div style={{width: "70%", marginLeft: '10rem'}}~~gt%%
    ~~lt%%div class="ui three buttons"~~gt%%
      ~~lt%%button class="ui active button red"~~gt%%One~~lt%%/button~~gt%%
      ~~lt%%button class="ui button green"~~gt%%Two~~lt%%/button~~gt%%
      ~~lt%%button class="ui button"~~gt%%Three~~lt%%/button~~gt%%
    ~~lt%%/div~~gt%%
  ~~lt%%/div~~gt%%
  )
!end



Page - 3