Let's learn to write programs with LiveCode

Share tips, tools, and other resources for helping educators bring LiveCode into the classroom

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:08 pm

This series of posts is based on a number of presuppositions:

1. You have never done any computer programming before.

[Or, if you have, you did not really understand what was going on]

2. Your teacher has installed LiveCode on your computer so that when you start it up it
up it looks something like this:

[I am using LiveCode 9.6.x on Macintosh, but most of the time everything will look very much
the same as on Windows or Linux]
-
SShot 2021-10-23 at 14.02.55.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:13 pm

Let's get started by using the Menu to make a "new stack":
-
c1.jpg
-
c2.jpg
-
This 'stack' is really like a bit of paper on which we can draw things we want for our programming.

Why a window is called a 'stack' is interesting, but is not very important at the moment.
When it becomes important we'll explain why it is called a 'stack'.

We can make it bigger if we want to by dragging the window bigger with the mouse from the
bottom right corner.
Last edited by richmond62 on Sat Oct 23, 2021 3:59 pm, edited 2 times in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:16 pm

If we now look at the TOOLS on the left of our window we will see that there
are lots of things we can put on our window to help us with our program:
-
c3.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:21 pm

We are going to start by looking at BUTTONS and FIELDS:
-
c3btnsNfld.png
Last edited by richmond62 on Sat Oct 23, 2021 4:22 pm, edited 2 times in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:29 pm

Let's put a BUTTON on our window by DRAGGING one from the TOOLS:
-
SShot 2021-10-23 at 14.27.33.png
-
Now, let's put a FIELD on our window by DRAGGING one from the TOOLS:
-
SShot 2021-10-23 at 14.27.52.png
Last edited by richmond62 on Sat Oct 23, 2021 4:20 pm, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 12:35 pm

We can use a BUTTON to TELL the computer to DO things:
-
SShot 2021-10-23 at 14.31.59.png
SShot 2021-10-23 at 14.31.59.png (13.66 KiB) Viewed 4991 times
-
TELLING a computer to DO something is called INPUT
-
And we can use a FIELD for the computer to TELL us things:
-
SShot 2021-10-23 at 14.32.18.png
SShot 2021-10-23 at 14.32.18.png (11 KiB) Viewed 4991 times
-
When a computer TELLS us something, that is called OUTPUT

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:19 pm

Let's get the BUTTON to ASK for some INFORMATION from US:

The FIRST thing we do is find the SCRIPT EDITOR to enter some CODE:
-
c4.jpg
-
c5.jpg
-
NORMALLY we use a BUTTON to get INFORMATION when we CLICK a computer mouse:
-
c6.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:27 pm

When we have typed some CODE into a SCRIPT EDITOR we need to APPLY it:
-
c6x.jpg
-
NOW it is important that the INFORMATION a computer gets goes somewhere so we can see it.

SO it is important that we give our FIELD where we want our INFORMATION to go a NAME:

We need to open the PROPERTY INSPECTOR of our FIELD:
-
c7.jpg
-
c8.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:38 pm

Here we can change the NAME of our FIELD to something that makes sense to us:
-
c9.jpg
c9.jpg (17.02 KiB) Viewed 4962 times
-
This also makes things easy when we want to send INFORMATION there:
-
c10.jpg
-

HOWEVER, ALL we have done so far is INPUT some INFORMATION and told the computer to OUTPUT
it again WITHOUT doing any OPERATIONS.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:45 pm

We can see this if we CLICK on the PLAY button on the TOOLS bar:
-
c11.jpg
-
c12.jpg
-
c13.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:46 pm

c14.jpg
-

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:55 pm

SO: LET'S try an OPERATION with the INFORMATION we have TOLD the computer:

BEFORE we do that we should NAME our work and SAVE it:

WE need to open the PROPERTY INSPECTOR of our work:
-
c15.jpg
-
c16.jpg
-
And NAME our work to something that makes sense to us:
-
c17.jpg
c17.jpg (12.97 KiB) Viewed 4948 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 2:57 pm

And then SAVE our work:
-
c18.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 3:54 pm

Now, let's CHANGE the CODE in the BUTTON:
-
c19.jpg
-
And we will see that our OUTPUT has been changed:
-
c20.jpg
-
c21.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9356
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Let's learn to write programs with LiveCode

Post by richmond62 » Sat Oct 23, 2021 3:59 pm

NOW, let's CHANGE our CODE so the OUTPUT is a bit easier to understand:
-
c22.jpg
-
c23.jpg

Post Reply

Return to “Educational Outreach”