Anyone Can Code

The Art and Science of Logical Creativity

Ali Arya

• Publisher: Chapman and Hall/CRC
• Year: 2020
• eBook ISBN: 9780429534638
• Topic: Ciencia de la computación
• Subtopic: Gráficos computacionales

Anyone Can Code: The Art and Science of Logical Creativity introduces computer programming as a way of problem-solving through logical thinking. It uses the notion of modularization as a central lens through which we can make sense of many software concepts. This book takes the reader through fundamental concepts in programming by illustrating them in three different and distinct languages: C/C++, Python, and Javascript. Key features: Focuses on problem-solving and algorithmic thinking instead of programming functions, syntax, and libraries; Includes engaging examples, including video games and visual effects; Provides exercises and reflective questions. This book gives beginner and intermediate learners a strong understanding of what they are doing so that they can do it better and with any other tool or language that they may end up using later.

PART 1

Getting Started

A good programmer is someone who always looks both ways before crossing a one-way street.

Goal

Programming is about logical creativity, solving problems through logical thinking and design, and also formal methods of presenting those thoughts and solutions.

In the first part of this book (Introduction, Chapters 1 and 2), I aim to provide some historical and background information on computer programming and introduce the basic concepts in logical creativity. This includes algorithmic thinking as the main approach to design and present solutions and programs that implement them.

In the next part of this book (Chapters 3–5), I will talk about actual programming languages as the tools we use to present the logic we have in mind as a set of computer instructions.

These two parts are necessary for the remaining parts of this book where I tackle real-world programming problems. After reading the Introduction, you may continue with Chapters 1 and 2 to prepare yourself for writing programs by understanding some basic concepts before proceeding to actual programming in Chapter 3. Alternatively, you may move to Chapters 3–5 after the Introduction, if you just can’t wait to get some code written and executed. But make sure you get back to Chapters 1 and 2 at some time during the process, before moving to Chapter 6.

Introduction

Topics

• Getting started with programs and programming
• Software development process

At the end of this chapter, you should be able to:

• Describe the main phases of a typical software development process
• Define the concept of modularization

Hello, World!

Since Brian Kernighan and Dennis Ritchie wrote their seminal book The C Programming Language (Kernighan & Ritchie, 1978), the most common starting point for programmers has probably been to write a simple “Hello, World!” code; one that displays the famous greeting message on the screen. It makes sense. Computer programming is the process of creating programs that are instructions for computers to perform different tasks. Greetings are the most common things to say at introductions, and we are, in fact, being introduced to programming and creating new programs to interact with users and the “outside world.” In a sense, we are “introducing” the computer to that world. So, we tell the computer to say hello to the world!

In order to tell computers to do things, we need to learn their language. And just like people, computers have multiple languages. Here is how to say “Hello, World!” in some of them:

• C: printf(“Hello, World!”);
• C++: cout << “Hello, World!”;
• C#: Console.WriteLine("Hello, World!");
• Python: print(“Hello, World!”)
• Java: System.out.println("Hello, World!");
• Javascript: document.write(“Hello, World!”);
• HTML: <p>Hello, World!</p>

While using most of these languages requires setting up software on your computer or visiting particular websites, there are pretty easy options to try. Let’s try the HTML for a quick start. HyperText Markup Language (HTML) is the primary language for creating web pages. HTML code describes the content of the page. We will talk about it more in Chapter 3, but for now, just open your favorite text editor and enter the HTML line above in it:

 <p>Hello, World!</p> 

This line of code defines a paragraph with the text “Hello, World!”. You can see more details about the syntax of HTML later, but one of the key concepts in HTML is an element that is a part of the document that HTML code is describing. P (short for Paragraph) is an HTML element. Each element is identified with an opening tag (a name inside < > pair) and a closing tag (same as the opening but starting with a/symbol).

Save the code into a file with extension. html (for example, hello.html), and then, open that file with your browser by using the file manager program on your computer (File Explorer for Windows, Finder for Mac, or similar programs), locating the file you just created, and double-clicking on it. You should see an almost-blank page with your greeting text on it. Congratulations! You just wrote and executed your first program. Executing (or running) a program means having the computer perform the instructions.

Key Point: Programs are instructions telling a computer what to do and how to do it. Programming is the process of designing and creating programs.¹

Now let’s make it a little more complicated. Go back to your text editor and add this line:

 <p id="demo">?</p> 

The second line creates a second paragraph with “?” as the text. It also gives a name (id, short for identifier) to the paragraph. You can use any name. I called it demo. HTML elements can have different information associated with them. A name or id is one such information that in HTML terminology, we call attribute. Each attribute is defined inside the opening tag for the element using name, an = sign, and a value inside " " (double quote).

¹ See Section I.1 for a discussion on the definition of programming and what it involves.

You can try saving the file and refreshing the browser to see the results (two paragraphs). After that, we are going to make things a little more interesting. Add the following text at the end of your HTML file:

 <script> demo.innerHTML = “What’s up?”; </script> 

The above lines are telling the computer to add a code written in Javascript language to the HTML page. Combining HTML that describes the web page and Javascript that adds interactivity and advanced operations to the page is a very common practice. The Javascript part is another element identified with <script> and </script>, just like a paragraph was identified with <p> and </p>. The Javascript code itself tells the computer to modify the text (called innerHTML) for the paragraph named demo. Save the file and refresh your browser to see both paragraphs.

If you have questions about details such as syntax and various elements in the program, just hold that thought. We will talk about all those details in the rest of the book. For now, let’s wrap up our example. Add another line to your Javascript code to make it like this:

 <script> demo.innerHTML = “What’s up?”; document.write("My name is Ali."); </script> 

Replace Ali with your own name and see the results. Voila! Now you have written a simple program using two popular languages. As complicated as it may seem, we all can write computer programs. That’s why this book is titled Anyone Can Code.

Key Point: Some programming languages like HTML “describe the output,” while others like Javascript “describe the actions.” Either way, a program instructs the computer to do something.

Reflective Questions: Do you feel overwhelmed with the sample program? Make sure you write the code and try it hands-on. Does it make any difference when you wrote and run the program yourself? As we move forward, things will be more clear. Embrace some uncertainty and explore the topic.

Now, let’s try to spice up our program with some user interaction. Replace your HTML code with the following lines:

 <p>Hello, World!</p> <p id="demo">0</p> <input id="userdata"> <button onclick="demo.innerHTML = userdata.value * 2;">Double</ button> 

The first two lines are the same as before, but the script element has been replaced with two new lines. They add an input box and a button to the web page. The input has an id, so we can refer to it later. We give names to things if we want to refer to them later. Keep that in mind. The button, on the other hand, has an operation defined fo...

Table of contents

• Cover
• Half Title
• Title Page
• Copyright Page
• Table of Contents
• List of Sidebars
• List of Tables
• List of Exhibits
• Preface
• Acknowledgments
• Definition of Key Terms
• Abbreviation
• Companion Website
• Part 1 Getting Started
• Part 2 Understanding Programs
• Part 3 Structured Programming
• Part 4 Object-Oriented Programming
• Part 5 More about Objects and Classes
• Part 6 Moving Forward
• Bibliography
• Index