Options
Contents
3.1 Top level files
0.1 Try Fragments
Click to show TOC
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%%
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
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.
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
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%%
!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