You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: resources/codex/md/step0.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -15,10 +15,10 @@ So let's take our first step into the world of coding. Click this link to contin
15
15
16
16
~next:Hello world~
17
17
18
-
Note to developers: Throw away your preconceptions; this is unlike anything else. See our **Background** page.
18
+
Note to developers: Throw away your preconceptions; this is unlike anything else. See our ~link:background:Background~ page.
19
19
20
20
As well as being a learning resource, ~ec~**_Codex_** is also a complete IDE for writing, running and testing scripts that are to become browser applications. Scripts written here can be deployed as web apps with few changes being needed in most cases.
21
21
22
22
You can also download and run Codex locally on your own computer. There's no difference except that when you save a script it will be written to a file on the computer's hard drive instead of being kept in browser storage. This can be very convenient as it allows you to write and test code even without an Internet connection.
23
23
24
-
You can optionally install Codex on your own server. For more information see our **Installation** page.
24
+
You can optionally install Codex on your own server. For more information see our ~link:install:Installation~ page.
We'll start off with some very basic things and gradually introduce you to more and more of the ~ec~ system. You can break off at any point and return later (on the same computer and browser); the system will remember where you were. Above this text are navigation buttons that let you return to the previous step in the tutorial or move on to the next one. So let's get started.
3
3
4
-
On the left you can see a blank panel with just a line number '1'. (On a smartphone you'll have to tap the (Cycle) button to go to the Code panel.) This is where you will put your program code. Above it are buttons to let you save your code, load code you previously saved and run what you have on-screen at the moment.
4
+
On the left you can see a blank panel with just a line number '1'. (On a smartphone you'll have to tap the ~icon:cycle:20px:Cycle screens~ (Cycle) button to go to the Code panel.) This is where you will put your program code. Above it are buttons to let you save your code, load code you previously saved and run what you have on-screen at the moment.
5
5
6
-
It's a tradition in programming that your first program is called "Hello, world". It just displays a message - that's all. So we'll honor the tradition by doing it here. Type the text you see below into the panel on the left, or click the "Copy to editor" button. (If you're on a smartphone you may like to read on a bit before doing this, but remember you can return here at any time by tapping the **Cycle** button.)
6
+
It's a tradition in programming that your first program is called "Hello, world". It just displays a message - that's all. So we'll honor the tradition by doing it here. Type the text you see below into the panel on the left, or click the "Copy to editor" button. (If you're on a smartphone you may like to read on a bit before doing this, but remember you can return here at any time by tapping the ~icon:cycle:20px:Cycle screens~ button.)
7
7
8
8
~pre:alert`Hello, world!`~
9
9
~copy~
@@ -12,7 +12,7 @@ You'll see that in our editor the text inside the backticks is colored whereas t
12
12
13
13
The word ~code:alert~ is an ~ec~ command word and the text between the backticks is fixed text. We programmers call it a string. Words that are colored black are all part of ~ec~ itself; everything else has a color that indicates the part it plays in the language. Strings are always dull red.
14
14
15
-
When you click the **Run** button its icon will change to **Stop** and a popup box will appear containing your message. When you click the OK button in the box everything will be returned to as it was before. Your script has finished its job.
15
+
When you click the ~icon:run:20px:Run~ button its icon will change to ~icon:runstop:20px:Stop~ and a popup box will appear containing your message. When you click the OK button in the box everything will be returned to as it was before. Your script has finished its job.
16
16
17
17
The program actually behaved as if you'd typed
18
18
@@ -24,16 +24,16 @@ If you leave off the exit instruction the ~ec~ compiler puts one in for you, but
24
24
~pre:alert`Hello, world!`
25
25
stop~
26
26
27
-
In this case, after you click the OK button and the popup box disappears, the button doesn't change back to . This is because the script is still in a 'running' state but it isn't actually doing anything. If you click the button the script will be forced to exit. Try it and see.
27
+
In this case, after you click the OK button and the popup box disappears, the button doesn't change back to . This is because the script is still in a 'running' state but it isn't actually doing anything. If you click the ~icon:runstop:20px:Stop~ button the script will be forced to exit. Try it and see.
28
28
29
29
The alert popup is very useful when you want to stop your script and check what it's doing. You can construct a message that contains whatever information you need. For the next couple of steps in this tutorial we'll use alerts to explore some of the basic programming features and do some arithmetical computing before we get onto the visual stuff.
30
30
31
31
Before we continue, let's just fit in one more thing here.
32
32
33
-
This script may only comprise one line, but it's your first script. You might have made changes to it to see what effect they have (I hope you do, in fact; it's the best way to learn). If you want to come back another time and run it, to save having to type it in again how about saving it? Do this by typing a suitable name - such as ~code:hello~ - into the Script Name box and then clicking the **Save** button. If you're running the Codex from our web server, your scripts are saved into an area of memory managed by your browser and are only visible by you while you are using this website. This means they are not permanent, so if you really want to save a script you should copy it and paste it into a text document or an email.
33
+
This script may only comprise one line, but it's your first script. You might have made changes to it to see what effect they have (I hope you do, in fact; it's the best way to learn). If you want to come back another time and run it, to save having to type it in again how about saving it? Do this by typing a suitable name - such as ~code:hello~ - into the Script Name box and then clicking the ~icon:save:20px:Save~ button. If you're running the Codex from our web server, your scripts are saved into an area of memory managed by your browser and are only visible by you while you are using this website. This means they are not permanent, so if you really want to save a script you should copy it and paste it into a text document or an email.
34
34
35
-
When you click **Open** you will see all the scripts you have saved while using ~ec~. Click any one of them to load it into the editor, where you can make changes and run it.
35
+
When you click ~icon:open:20px:Open~ you will see all the scripts you have saved while using ~ec~. Click any one of them to load it into the editor, where you can make changes and run it.
36
36
37
-
To clear the current script (without removing it from storage), click **New**, and to delete the current script from storage click **Delete**.
37
+
To clear the current script (without removing it from storage), click ~icon:new:20px:New~, and to delete the current script from storage click ~icon:trash:20px:Delete~.
Copy file name to clipboardExpand all lines: resources/codex/md/tools.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -17,4 +17,4 @@ run Script~
17
17
18
18
(This is the simplest form, that assumes you don't need to communicate with the script once it's running.)
19
19
20
-
It should be fairly obvious that when plugins are used in this way the code you want to run must be in a separate script that's loaded and run _after_ the plugin is ready. An alternative to this is to declare the plugin globally at the point ~ec~ starts up. In the top-level easycoder folder is a file called ~code:plugins.js~, which allows you to specify which plugins should be loaded at startup and which will be available to load on demand. This will make the initial page load a little more slowly, but in practice the difference is minute.
20
+
It should be fairly obvious that when plugins are used in this way the code you want to run must be in a separate script that's loaded and run _after_ the plugin is ready. An alternative to this is to declare the plugin globally at the point ~ec~ starts up. In the top-level easycoder folder is a file called ~code:plugins.js~, which allows you to specify which plugins should be loaded at startup and which will be available to load on demand. This will make the initial page load a little more slowly, but in practice the difference is very small.
0 commit comments