Coding tutorial for beginners

Note: Since this page was written we have built the EasyCoder Codex, which is also a tutorial but in addition gives you a coding playground where you can try out ideas and run them without the need to set up a web page. It also contains a full programmers' reference. That doesn't make this page redundant, though; you may find it useful to look at both of them as they approach the subject in different ways.

This tutorial is for web designers and other non-programmers, for whom coding is often a locked room full of treasures, guarded by scary beasts. I will show you how EasyCoder lets you get at many of the treasures without having to fight the beasts.

I assume you have at least an outline knowledge of HTML and CSS. If you don't then it would help to read up on the subject before trying the tutorials presented here. If you still find the tutorials hard to follow, try starting at our For absolute beginners page, which will explain in the simplest terms possible what EasyCoder is all about.

CSS is Cascading Style Sheets. These are external markup files... more
CSS is Cascading Style Sheets. These are external markup files that work alongside your HTML, providing style information to add to the content provided by the HTML. By keeping the two separate we make it easier to change the appearance of a page or of several pages without the need to edit the page text itself. The page text then becomes easier to work with as it isn't full of style information. less

What is JavaScript?

JavaScript is a programming language and its programs are called scripts. It's an integral part of any web browser and its scripts affect the way your web pages behave. Without JavaScript, pages are mostly static, in that once they are displayed all that happens when the user interacts with them is another page gets loaded. The page content is provided by the HTML and the style by CSS.

A script can find any page element that has a CSS id - a string of letters and numbers such as para1 or help-button. The script can do a huge range of things to an element. It can change the text or the color, border, background, size, position, visibility and much, much more. It can also examine your page and do things that depend on what it finds.

Using JavaScript

JavaScript files are usually called up in the <head> part of the web page. The scripts are downloaded from the server and run after the page has loaded, to do whatever the programmer intended. For example, a script might look for a particular id and set the text of that id to bold, or a particular color. It might examine the text itself and pick a different color if it detects certain words. To the average non-programmer, the code to do this looks very complex and hard to learn. Libraries like JQuery make the code easier to use by programmers but do little to help anyone else.

Instead of referring to an external script file you can also put JavaScript code directly into the page itself; again generally into the <head> part. You would normally only do this for scripts that will only be used by just this one page.

If what you want to do is simple you can also put scripts into the body (the part you see in the WordPress editor). This is often not encouraged as it's regarded as mixing content with programming, but the realistic view is that anything that works is OK even if it doesn't follow the conventions generally observed by experts.

EasyCoder is rather different

EasyCoder lets you do things in a way that is more natural to non-programmers. Instead of being in separate script files, EasyCoder scripts are included in your page itself, inside a special HTML element. The language tries to look as much like English as possible and we ignore many of the conventions designed to help programming teams create large-scale systems.

Because in most cases we're not talking about large systems here. All you - the designer - want to do is add a bit of interactivity to your page. If you need to make substantial and widespread changes to the page you might consider looking for a more suitable theme or employing a professional JavaScript programmer. There's a rather fuzzy line here, but in general I'd say that once an EasyCoder script reaches 1000 lines or so it may be time to look at a more conventional approach. A thousand lines of script can do quite a lot, though.

Why not use a WordPress plugin?

No reason at all. If there's a plugin that does what you want, by all means use it. However, there are tens of thousands of them so it may take you a while to find one that does what you need. Then you have to figure how to use it, and given that most plugins are submitted by programmers, who are not renowned for their writing skills, you may find the documentation less than helpful. The alternative is to roll your own, and EasyCoder is one way to do that.

Is EasyCoder a proper programming language?

Many novice programmers are concerned about picking the right language... more

Is EasyCoder a proper programming language?

Many novice programmers are concerned about picking the right language when learning to program, as if picking the wrong one will in some way harm them. These questions occur frequently on Quora and the best answer is that all learning is good. Learning to program is more about the core skills involved than in mastering a particular language or dialect. Programming requires a certain discipline plus an ability to think logically, and learning these skills is the most important part of your first steps. Most languages use a similar set of basic concepts such as variables, values and control structures, and these are learned more quickly if you succeed in writing code that works. EasyCoder is easy to master and will give you a good foundation that will make learning another language much easier. It will certainly not harm your future efforts to learn JavaScript or Python. less

So having given you an outline of what this is all about, let's move on to an example.

Tutorial 1 - Responding to a user action

To get started, the first thing is to install the EasyCoder plugin, which you get from the WordPress plugin library. Next, create a new, blank Page. I'm assuming you already know how to do both these things, as this tutorial isn't aimed at complete WordPress novices.

Let's suppose your page has a button to initiate actions when clicked/tapped. The usual thing is to call up another page, but it's also possible to perform actions in the same page. For the moment we won't worry what these actions are; all we're concerned with here is triggering the process. Here's the page HTML:

<button id="tutorial-button">Click me</button>

and when it loads in the browser it looks like this:

Note the id with its special name tutorial-button. When you add this to your blank page, make sure the editor is in Text mode. Next we'll introduce an EasyCoder script. Add a special preformatted tag (<pre>) to your page; you can put it at the top, the bottom or somewhere in between, according to whatever works best for you. For example:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">

This block will hold the EasyCoder script. It has a special id that enables our plugin to find it. At the moment it's empty, so lets put some stuff into it. The first thing is a variable that we'll use when we refer to the button:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

The name of the variable is Button, with a capital B, and it's declared as being of the type button. To non-programmers this is a bit confusing, but think of having a dog called Dog (well it's not unknown). The capitalised word is the actual name and the lower-case one says what it is, i.e. not a cat or a bird. I could have given the button any name, for instance MyButton, so I'm being a bit perverse here just to make a point. In EasyCoder, types are all lowercase and names start with a capital, just like in real life (unless you're k. d. lang). This makes it easy to tell which is which.

In order to interact with the button we have to 'attach' the variable to the DOM (HTML) element itself. Here's the program with a line to do that:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button`

The `tutorial-button` bit is a text constant. If you've done any programming before you'll probably have seen text in double-quotes; we use backticks for a couple of reasons that are explained in our documentation. The line is telling EasyCoder to associate the variable Button with the element containing the button.

I've also added a stop command at the end, telling the system to stop running the script when it reaches this point. It's often not necessary to do this (EasyCoder usually puts one in for you) but it's good practice.

Now we have to define what happens when the user clicks the button. This is also quite simple:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button`
  on click Button alert `Click!`

The added line is saying "When the user clicks the button, show an alert box containing the message inside the backticks".

And that's it. Click the button below to see it working, then add the code to your page and verify it does the same thing.

Congratulations - you've written your first EasyCoder script!
Tutorial 2 - Changing styles

img DuckThink
if mobile
attach DuckThink to `ec-duckthink`
set style `display` of DuckThink to `none`

button Button
div Default
div Replace
a More
a Less
div Default2
div Replace2
a More2
a Less2

attach Default to `tutorial-default`
attach Replace to `tutorial-replace`
attach More to `tutorial-more`
attach Less to `tutorial-less`
attach Default2 to `tutorial-default2`
attach Replace2 to `tutorial-replace2`
attach More2 to `tutorial-more2`
attach Less2 to `tutorial-less2`

attach Button to `tutorial-button`
on click Button alert `Click!`

fork to SetupDefault2

set style `display` of Default to `block`
set style `display` of Replace to `none`
on click More go to SetupReplace

set style `display` of Replace to `block`
set style `display` of Default to `none`
on click Less go to SetupDefault

set style `display` of Default2 to `block`
set style `display` of Replace2 to `none`
on click More2 go to SetupReplace2

set style `display` of Replace2 to `block`
set style `display` of Default2 to `none`
on click Less2 go to SetupDefault2