Introduction to Programming (Writing Your First Code)

What is Programming?

In the last session we learned that computers think in binary, a language of 0s and 1s. But you will be relieved to know that you do not have to write binary to communicate with a computer. That is where programming languages come in.

A programming language is a tool that allows humans to write instructions in a way that is close to human language and then have those instructions translated into something the computer can execute. Think of it as a bridge between the way you think and the way the computer works.

When you write code you are essentially giving the computer a very precise set of instructions. Computers do exactly what you tell them, nothing more and nothing less. If your instructions are unclear or incorrect the computer will not guess what you meant. It will either produce the wrong result or throw an error. This precision is what makes programming both challenging and rewarding.

Choosing a Language to Start With

There are hundreds of programming languages in the world. Each one was designed with a specific purpose or philosophy in mind. For this series we will use JavaScript as our language of choice and here is why.

JavaScript runs in every web browser which means you do not need to install anything to get started. Open your browser, open the console and you can write and run code immediately. It is also the most widely used programming language in the world, powering everything from websites and mobile apps to servers and desktop applications. You will also see results in a context you already interact with daily which makes learning feel more connected to the real world. Learning JavaScript gives you skills you can apply almost anywhere and a foundation that transfers naturally to other languages later.

Setting Up Your Environment

Before you write code you need somewhere to write and run it. The great thing about JavaScript is that your browser already has everything you need built in.

On any web browser, whether Chrome, Firefox, Edge or Safari, you can open the developer console by pressing F12 on Windows or Command + Option + J on a Mac. A panel will open at the bottom or side of your screen. Click on the tab that says Console. This is a live JavaScript environment where you can type and run code instantly.

If you prefer a dedicated code editor, a great free online option is codepen.io or jsfiddle.net. Both allow you to write JavaScript in the browser and see results immediately without any setup.

For working locally on your computer you can use Visual Studio Code, a free and powerful code editor, and open any HTML file in your browser to run JavaScript. We will cover this setup in more detail in a later session. For now the browser console is all you need.

Your First Line of Code

Let us write something. Open your browser console and type the following exactly as it appears:

console.log("Hello, world!");

Now press Enter. You should see the following output:

Hello, world!

Congratulations. You just wrote and executed your first program.

Let us break down what happened. console.log is a built in JavaScript function. A function is a reusable block of code that performs a specific task. The job of console.log is to display output in the console. The text you want to display goes inside the brackets and inside quotation marks. When JavaScript sees this instruction it executes it and the text appears as output.

This single line of code follows the same input, process, output model we discussed in Session 02. The input is the text inside the brackets. The process is JavaScript executing the console.log function. The output is the text displayed in the console.

Writing Code That Talks Back

Now let us make our program a little more interactive. Type the following in your console:

let name = prompt("What is your name?"); console.log("Hello, " + name + "!");

Run it. A small popup will appear asking for your name. Type it in and press OK. The console will then greet you personally.

Here is what is happening. The prompt function displays a message in a popup and waits for the user to type something. Whatever the user types is stored in something called a variable. We named that variable name using the keyword let. Then console.log takes that variable and combines it with the greeting text to produce a personalised output.

We will go much deeper into variables in the next session. For now just notice how the program is no longer static. It responds to what the user does. This is the beginning of interactive software.

Understanding Syntax

Every programming language has its own syntax, which is the set of rules that define how code must be written. Just like English has grammar rules, JavaScript has syntax rules. Breaking them causes errors.

Here are a few important JavaScript syntax rules to know from the start.

JavaScript is case sensitive. The word console and the word Console are different things to JavaScript. Using the wrong case will cause an error.

Quotation marks must be opened and closed. If you open with a double quote you must close with a double quote. You can also use single quotes but you must be consistent.

Brackets must be opened and closed. Every opening bracket needs a matching closing bracket.

Statements in JavaScript typically end with a semicolon. While JavaScript is forgiving about this in many cases it is a good habit to include semicolons from the start as it makes your code cleaner and prevents subtle bugs.

Let us look at a common mistake and what happens:

Console.log("Hello, world!");

Running this produces:

TypeError: Console.log is not a function

JavaScript does not recognise Console with a capital C because it is case sensitive. The correct version is console in all lowercase. Errors like this are completely normal, especially when you are starting out. Every developer encounters them daily. The skill is learning to read the error message and understand what went wrong.

Comments: Writing Notes in Your Code

As your programs grow you will want to leave notes explaining what different parts of your code do. These notes are called comments and JavaScript ignores them when running your program. They exist purely for humans reading the code.

In JavaScript a single line comment starts with two forward slashes:

// This line displays a greeting to the user console.log("Hello, world!");

You can also write multi line comments like this:

/*
  This program asks the user for their name
  and then displays a personalised greeting
*/ let name = prompt("What is your name?"); console.log("Hello, " + name + "!");

Comments are a habit worth building from day one. They make your code easier to understand for others and for your future self when you come back to it weeks later and have forgotten what you were thinking.

Putting It Together: A Simple Program

Let us write a slightly more complete program that combines everything we have learned so far. Open codepen.io, create a new pen and type the following in the JavaScript section:

// Ask the user for their details let name = prompt("What is your name?"); let age = prompt("How old are you?"); let hobby = prompt("What is your favourite hobby?");  // Display a personalised message console.log("Nice to meet you, " + name + "!"); console.log("So you are " + age + " years old."); console.log("And your favourite hobby is " + hobby + "."); console.log("Welcome to Code with Viola!");

Run this program and go through it line by line. Notice how the comments explain what each section does. Notice how prompt collects information and console.log displays it. Notice how variables store the user's responses so we can use them later.

This is a real program. It takes input, processes it and produces output. It is simple but it follows every principle that large scale software follows too.

Checkpoint

At this point you should understand what a programming language is and why we use JavaScript. You should be able to write and run a basic JavaScript program in your browser console. You should understand what console.log and prompt do, what a variable is at a basic level, what syntax means and why it matters and how to write comments in your code. If any of these feel shaky go back and reread the relevant section and try rewriting the examples yourself from scratch without copying.

Assignment

This assignment has three levels. Work through as many as you can.

Level one is for understanding. Write a program that asks the user for their favourite colour and then displays a sentence using their answer. For example if they type blue the output should say something like "Blue is a great colour!" Use what you learned about prompt and console.log to build this.

Level two is for applying. Write a program that asks the user for their name, their age and their favourite hobby. Then display a short paragraph introducing them using all three pieces of information. Think carefully about how to structure your console.log statements so the output reads naturally.

Level three is a stretch. Research what an error message is in JavaScript and find out the difference between a syntax error and a runtime error. Write a short explanation in your own words with one example of each. You will encounter both types regularly as you progress through this series so understanding them early gives you a strong advantage.