The easiest way to get started with ChildScript is to use our interactive whiteboard. This allows you to write code in the left hand box and when you click the "Reload" button the programme will be run in the right hand box. Go ahead and give it a try. Click the link above to the interactive whiteboard then write the following command in the left window:
type hello world
Click reload and you will see the words hello world come up in the right window. So the left window is input and the right window is output. Now you can add to this by writing the next line:
draw car
Reload the programme by clicking load again and you will see a picture of a car icon pop up. Try these other commands one by one to see what they do:
title Hi bold Hey newline italic Hola colour red background pink place box JimsBox target JimsBox write This is my new box background blue flash
If you are learning to code for the first time we recommend you check out the Lessons Section which will take you through creating your first programmes. Alternatively you can skip right ahead to the Functions Section if you want to learn some more commands and see what else is possible or view some Example Programmes.
Icons & Backgrounds
There are lots of backgrounds and icons built in to childscript for you to use in your programmes. They can be added using the background and draw commands like this:
To move your shell around you must first target it using the command "target shell" we will talk about this further in the next chapter
Targeting
For javascript users one of the biggest timesavers with childscript is it's targeting ability. Instead of typing document.getElementById('box'); you can just write:
target #box
You also have other options including:
target document - targets the document object
target body - targets document.body or the main page
target parent - targets the parent of the element currently targeted
target image - targets the image most recently placed on the page
target object - targets the last object placed on the page
target last - targets the previous target used
target penultimate - targets the element before last
target reset - resets to the default target, normally document.body
HTML & CSS
ChildScript is primarily designed to simplify web development and HTML and CSS is built right in. If you are not familiar with either of these markup languages learning childscript will make them more familiar as you build increasingly complex programmes. Some examples of how you can manipulate HTML and CSS elements on a web page have been shown below.
target #box; float right
bold this is bold text
link facebook http://facebook.com
place div myid; background red; border black; color: black;
addclass myclass;
height 100%; width 200; width: 200px;
target #myimage; set src mypic.jpg;
if, elseif, while statements
There are a number of conditional statements built in to childscript for use with the if, while and elseif commands. Here's a list of examples:
if x equals y
if x does not equal y
if x contains y
if x does not contain y
if x is greater than y
(can also use if x is more than y or if x > y)
if x is less than y
(can also use if x < y)
if x exists
if msie
if firefox
if chrome
if safari
if ipad
if iphone
if android
if mobile
if key spacebar
if idx is touching idy
(can also use if x touching y)
Below is a full code example:
set x 1
set y 2
if x exists
type well now we know x exists
end
if x is less than y
alert this works!
elseif x is greater than y
alert this wont run obviously
end
while x is less than 10 {
type note how we can use optional brackets to tidy up the code
type you can do that for if, elseif and else too.
add x 3
}
onkeydown {
if key a {
alert you just pressed the a key
}
}
if mobile {
alert You must be reading this on a mobile device
} else {
alert You are not reading this on your mobi
}
place div mydiv
target reset
place div mydiv2
if mydiv is touching mydiv2 {
type this is useful for building games
}
Syntax & Usage (Advanced)
We recommend everyone starts with the interactive whiteboard but advanced coders may wish to place childscript inside existing applications. To run childscript inside a web application you have to include a js file in the same way you would jquery. At some place inside the
tags of your HTML document you can place the following code:
<script src="http://childscript.com/childscript.js"></script>
<script type="childscript">
type hello world
</script>
Notice how the script tag is labelled as type="childscript", this is essential. As standard, the code will automatically be run after the document has finished loading. You can also include external childscript files in the same way you would for javascript.
A more advanced way of running child script is to execute it from a string anywhere in javascript. You can do this at any time by running:
cS.run(codeToBeRun);
An easy way to get the code into a string is to use the multiline function within childscript and then execute from that. See example below.
var cscode = cS.multiLine(function() {/*!
type hello world
type you can write multiple strings without escaping lines
*/});
cS.run(cscode);
Functions
Core Functions
Usage
Explanation
Compiled Code
type
type hello world
Writes text or html to the page or target, a line break is added at the end of each line
target.innerHTML += 'hello world<br>';
write
write hello world
As above but does not add an automatic line break
target.innerHTML += 'hello world';
if
if $myvariable equals 7 if $mystring contains searchterm
Do something if a condition is met either "equals", "does not equal", "contains", "does not contain", "is greater than", "ipad", "chrome", "is touching" and all the conditional operators listed here
if (myvariable.toString() == '7') { if (mystring.indexOf('searchterm') > -1) {
else
if $mystring equals sarah; else; end;
Used with if statement to provide an alternative block of code
Closes any statement such as an if statement or function etc. What you are ending is optional i.e. you can use end or end if
}
function
function myFunc $myvariable
Declare a function which is a block of code to be run later using the start command. You can pass variables to and from the function. If you include any brackets for parsing variables it will be executed as javascript.
myFunc = function(myvariable) {
return
return $myvariable
Returns a variable from the function
return myvariable;
start
start myFunc $myvariablereturn $myvariablesend
Runs a function. Variables are optional and are used when provided. The first variable is used to store the returned output of the function. The second variable is sent to the function for processing. To send a variable you must also specify a received variable even if it is a foobar throwaway as the send variable is always the second parameter.
myvariablereturn = myFunc(myvariablesend);
do
do 3 times
Runs a nested loop and runs a block of code multiple times. The "times" at the end is not required it is possible to just write do 3. Remember to add an end or } after the block of code you want to repeat
Works like document.getElementById with a few extras see The Targeting Section for more info.
document.getElementById('myid');
alert
alert hello world
Launches an alert box with a message
alert('hello world');
ask
ask $myvariable What is your name?
Launches an alert box with a text field prompt and sets the reply to a variable
myvariable = prompt('What is your name?');
confirm
confirm Are you sure?
Starts a code block which is only run if the user clicks OK to the confirm message. Requires an end or } after the codeblock
if (confirm('Are you sure?')) {
onclick
onclick
Sets up a function to be run when the target is clicked
target.onclick = function() {
onhover
onhover
Sets up a function to be run when a user hovers the mouse over the target
target.onhover = function() {
onfocus
onfocus
Sets up a function to be run when it comes in to focus i.e. when a text field is clicked on.
target.onfocus = function() {
onkeydown
onkeydown {
Runs a block of code when a keyboard key is pressed down. You can use "if key w {" to lookup the key. Dont forget to close off the block of code with either a end or a }
document.onkeydown = function(csKeyEvent) { var key = csKeyEvent.keyCode || csKeyEvent.which;
onkeyup
onkeyup {
Runs a block of code when a keyboard key is released
document.onkeyup = function(csKeyEvent) { var key = csKeyEvent.keyCode || csKeyEvent.which;
onkeypress
onkeypress {
Runs a block of code on key press.
document.onkeypress = function(csKeyEvent) { var key = csKeyEvent.keyCode || csKeyEvent.which;
onscroll
onscroll {
Runs a block of code when window is scrolled up or down.
window.onscroll = function() {
set
set $myvariable hello world
Sets a variable to a value, dollar sign is optional
myvariable = 'hello world';
setattribute
setattribute myobject hello world
Sets an attribute of the current targeted object.
target.setAttribute('myobject','hello world');
debug
debug
Turns debug mode on which currently will bring up an alert box with the compiled javascript code.
window.csDebug = 1; alert(csCode);
HTML Functions
Usage
Explanation
Compiled Code
title
title My Heading
Writes the h1 tag for a web page which will be displayed big and bold normally
target.innerHTML += '<h1>My Heading</h1>';
newline
newline
Adds a line break in the html
target.innerHTML += '<br />';
horizontalrule
hr
Adds a horizontal line to a html page. Just use hr for shorthand.
Embed a video from the web, currently supports youtube and vimeo. The code at the end is the video reference you can get this in the URL for the video link.
background red background golf background http://mysite.com/mypic.jpg
Changes the background CSS style. You can use it to just set the color i.e. background #FCC. You can also choose a url either from the web or one of our childscript backgrounds. You can see what icons are available here: Backgrounds List You can also set up to eight background properties "color image repeat attachment position size origin clip|initial|inherit" i.e. background = #f3f3f3 url('img_tree.png') no-repeat
target.style.background = 'red'; target.style.background = 'url(\'http://childscript.com/background/golf.jpg\') no-repeat center center fixed'; target.style.background = 'url(\'http://mysite.com/mypic.jpg\') no-repeat center center fixed'; target.style.backgroundSize = 'cover';
backgroundsize
backgroundsize cover
Changes the size of the background. backgroundsize cover sets the background to take up full screen.
target.style.backgroundSize = 'cover';
color
color black
Sets targets text color, can use the English spelling colour if preferred.
target.style.color = 'black';
opacity
opacity 0.5
Sets the opacity or transparency of an object from 0 (invisible) to 1 (no transparency)
target.style.opacity = '0.5';
border
border 2
Places a border around the target. You can either use shorthand i.e. "border 2" to place a 2px black solid border or you can provide the full css i.e. "border solid 2px #000000"
target.style.border = 'solid 2px #000';
borderradius
border 10
Rounds corners on a div
target.style.borderRadius = '10px';
font
font Arial
Sets the font for a target element with a back up to sans-serif.
target.style.fontFamily = 'Arial, sans-serif';
fontsize
fontsize 10px
Sets the size of the font, you can use standard CSS ie. font 10px or font 1.3em
target.style.fontSize = '10px';
fontweight
fontweight bold
Sets the font weight i.e. bold, normal, 900
target.style.fontWeight = 'bold';
underline
underline
Underlines the text in the target element
target.style.textDecoration = 'underline';
nounderline
nounderline
Removes the underline from text within the target element
target.style.textDecoration = 'none';
zindex
zindex 99
Sets the CSS z-index property for an element. This is used to stack elements on top of each other so an element with a zindex of 2 will appear above an element with a zindex of 1.
target.style.zIndex = '99';
lineheight
lineheight 14
Sets the lineheight for an element which is useful for vertically aligning text
target.style.lineHeight = '14px';
float
float right
Floats an element left or right. You can also use float center which sets margins left & right to auto and text-align to center which will center a fixed width element and the text within it.
target.style.float = 'right';
addclass
addclass myclass
Adds a class to an element so you can have all the CSS inside a .css file and then just switch classes in and out as needed.
Adjusts the CSS display property from an element common options include "block, inline, inline-block, none, table, inherit, flex". Switching between display block and display none will make an item appear and disappear.
target.style.display = 'none';
toggle
toggle
Adjusts the CSS display property from none to '' depending on what it's currently set to. Useful for buttons and UI features
Adjusts the position of a CSS element. Options include "static|absolute|fixed|relative|initial|inherit"
target.style.position = 'fixed';
height
height 20
Sets the height of an element, can use 20, 20px, 20%
target.style.height = '20px';
width
width 20
Sets the width of an element, can use 20, 20px, 20%
target.style.width = '20px';
maxheight
maxheight 20
Sets the max-height of an element, can use 20, 20px, 20%
target.style.maxHeight = '20px';
maxwidth
maxwidth 20
Sets the max-width of an element, can use 20, 20px, 20%
target.style.maxWidth = '20px';
minheight
minheight 20
Sets the min-height of an element, can use 20, 20px, 20%
target.style.minHeight = '20px';
minwidth
minwidth 20
Sets the min-width of an element, can use 20, 20px, 20%
target.style.minWidth = '20px';
rotate
rotate -90
Rotates an element so -90 is counter clockwise 90 degrees.
target.style.transform = 'rotate(-90deg)';
textalign
textalign right
Sets the text within a target div to align left, right or centre (or center for our US friends).
target.style.textAlign = 'right';
margin
margin right 50
Sets the outside margin of a targeted element. Can either set one at a time with margin (top|right|bottom|left) 50% or you can set all four together i.e. margin 10px.
target.style.marginRight = '50px';
padding
padding 50
Works like margin but for the inside padding of an element. Again you can set one at a time with padding right 40 or you can set them all together with padding 5
target.style.padding = '50px';
left
left 10
Sets the CSS left attribute which is useful when positioning an element. Can be a percentage or px (pixels) or defaults to px if just a numeric value is provided.
target.style.left = '10px';
right
right 10%
Sets the CSS right attribute, as above.
target.style.right = '10%';
top
top 0
Sets the CSS top attribute,as above
target.style.top = '0px';
bottom
bottom 10px
Sets the CSS bottom attribute, as above.
target.style.bottom = '10px';
focus
focus
Focuses on the target element. This can be used to place the cursor on a text field for example.
target.focus();
unfocus
unfocus
Unfocuses on the target element. This can be used to remove the cursor from a text field for example. Can also use blur for the same command.
target.blur();
Record Functions
Usage
Explanation
Compiled Code
record
record type hello play 3
Starts a code block which will run after a set amount of time.
Removes an element from the document by selecting the parent and then deleting the child, this is less painful than it sounds. Can also just use remove on its own to remove the targeted element.
Input a string into a variable, useful when working with complicated strings including variables. Must include escape characters and no $ for variables as it is passed directly to the variable without being parsed.
myvariable = 'foo'+myothervar+'.cs';
replace
replace $myvariable badword goodword
Replaces multiple occurrences of a substring in a string
Removes whitespace from the front and back of a string so ' hello world ' becomes 'hello world'.
string = string.trim();
split
split myarray mystring mydelminator
Splits a string into an array. So if melons was split on the deliminator of l you would end up with an array looking like ['me','ons'] stored in myarray
myarray = mystring.split(mydeliminator);
join
join mystring myarray mydeliminator
Using the above example we can join the array back up with X as the deliminator so mystring will be 'meXons'
mystring = myarray.join(mydeliminator);
Array Functions
Usage
Explanation
Compiled Code
shuffle
shuffle myarray
Shuffles all elements inside an array using the fisher yates shuffle method
Generates a random number between 1 and the second variable, in this example it would set a random number between 1 and 52.
myvariable = Math.floor(Math.random() * 52 + 1);
geturlparams
geturlparams myobject
This will take url paramaters from the page i.e. if you load mypage.htm?myparam=hello&myparam2=world, then it will load "hello" into the variable myobject.myparam and myobject.myparam2 = world.
myobject = cS.getUrlParams();
password
password $myvariable
Generates a random alphanumeric 10 character string for use with passwords or random string assignments.
myvariable = cS.genPassword();
date
date $myvariable datestring
Sets the current date and time to a variable. datestring is optional and will default to 25/01/2015 if nothing is given.
myvariable = new Date(datestring);
scroll
scroll to #myid
Animates a nice scroll down or up the page. The to is optional so you can use scroll top, or scroll to top. Options include top, bottom, #element id