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
    // React exanple

    ~~lt%%h1~~gt%%~~lt%%b~~gt%%Hello World~~lt%%/b~~gt%% {(new Date()).toLocaleDateString()}~~lt%%/h1~~gt%%

!md
    ## A simple clock

    Using React to render a simple clock

!tryit
    // React JSX
    function Clock() {
        const clock = () =~~gt%% ReactDOM.render(~~lt%%div style={{fontSize: "2rem"}}~~gt%%~~lt%%b~~gt%%Time:~~lt%%/b~~gt%% {(new Date()).toLocaleTimeString()} ~~lt%%/div~~gt%%, 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

!tryit
    // JSX
    ~~lt%%div className="ui stackable padded grid"~~gt%%
      ~~lt%%div className="ten wide column"~~gt%%
          ~~lt%%p style={{background: "grey"}}~~gt%%.ten.wide.column~~lt%%/p~~gt%%
          ~~lt%%div className="ui stackable grid"~~gt%%
            ~~lt%%div className="eight wide column"~~gt%%~~lt%%p style={{background: "grey"}}~~gt%%.eight.wide.column~~lt%%/p~~gt%%~~lt%%/div~~gt%%
            ~~lt%%div className="eight wide column"~~gt%%~~lt%%p style={{background: "grey"}}~~gt%%.eight.wide.column~~lt%%/p~~gt%%~~lt%%/div~~gt%%
          ~~lt%%/div~~gt%%
        ~~lt%%/div~~gt%%
        ~~lt%%div className="six wide column"~~gt%%~~lt%%p  style={{background: "grey"}}~~gt%%.six.wide.column~~lt%%/p~~gt%%~~lt%%/div~~gt%%
    ~~lt%%/div~~gt%%
!end



Page - 3