Edvinas Urbasius

@edvinasurbasius

Front-end developer. Interested in IT, history and economics. The life-long learner.

https://edvinasurbasius.com/

The Notes from The ABC of Programming Chapter

The first chapter is divided into three parts:

  • What is a script and how do I create one?
  • How do computers fit in with the world around them?
  • How do I write a script for a web page?

A script is a Series of Instructions

Scripts can be compared to recipes, handbooks and manuals.

For example, a cook can create a dish by following the instructions in a recipe. For new cooks, there is a lot of terminologies, and the same happens for new programmers.

Employees get handbooks that contain procedures to follow in certain situations. However, they only have to follow certain steps in certain situations. Similarly, in a complex script, the browser might use only a small portion of code.

Mechanics use repair manuals to service cars they are not familiar with. Manuals contain a series of tests to check if the key functions of the car are working. This way a mechanic can pass tests and proceed further with the repairs. Similarly, the browser can perform only a set of steps.

Writing a Script

To write a script, you need to state your goal and the tasks that need to be completed in order to achieve it.

When learning something new, it’s a good idea to break it down into smaller tasks and learn one thing at the time.

The computer cannot perform like humans, it needs to follow instructions every time it performs the task. For a computer, every time is the first time.

  1. Define the Goal. First, you define a task you want to achieve.
  2. Design the Script. Split the goal out into a series of tasks.
  3. Code Each Step. Each of the steps needs to be written in a programming language that the computer understands. For us it’s JavaScript.

A good tip is to spend time designing your script before you start writing it.

Here is an example of tasks of a hotel cleaner:

  1. Remove used bedding
  2. Wipe all surfaces
  3. Vacuum floors
  4. Fit new bedding
  5. Remove used towels and soaps
  6. Clean toilet, bath, sink, surfaces
  7. Place new towels and soaps
  8. Wipe bathroom floor

Each individual task may be broken down into a sequence of steps. The steps then can be translated into individual lines of code.

Just like learning any new language, you need to get to grips with the:

  1. Vocabulary: The words that computers understand
  2. Syntax: How you put those words together to create instructions computers can follow

A programmatic approach to problem-solving.

We need to learn to “think” like a computer because they solve tasks in different ways than you or I might approach them.

How Do Computers Fit in With the World Around Them?

Computers Create Models of the World Using Data.

For example, a hotel is a real-world object for humans, but for a computer, a hotel doesn’t mean anything. It does not know what they are used for. To bridge the gap, programmers create a very different kind of model for computers and these models are made by using data.

Objects and Properties

In computer programming, each physical thing in the world can be represented as an object. For example, a car or a hotel.

Programmers say there is one instance of the car or hotel object.

Objects (Things)

Each object has its own:

  1. Properties
  2. Events
  3. Methods

Together it forms a working model of the object.

Properties (Characteristics)

Both of the cars share common characteristics. For example, all cars have a make, a color, and engine size. Programmers call these characteristics the properties of an object.

Each property has a name and a value.

One of the hotel properties can be its name, or rating, or rooms.

Events

In the real-world people interact with objects. These interactions can change the values of the properties in these objects.

What is an event?

We can interact with each type of object. For example, a car has at least two pedals. The car responds differently when the driver interacts with each of the different pedals.

  • The accelerator makes the car go faster
  • The brake slows it down

Similarly, programs are designed to do different things when users interact with the computer in different ways.

An event is the computer's way of sticking up its hand to say "Hey, this just happened!"

What does an event do?

Programmers choose which events they respond to. When a specific event happens, that event can be used to trigger a specific section of the code.

Scripts often use different events to trigger different types of functionality.

Methods

Methods represent things people need to do with objects. They can retrieve or update the values of an object's properties.

What is a method?

Methods typically represent how people (or other things) interact with an object in the real world.

What does a method do?

The code for a method can contain lots of instructions that together represent one task.

For example, hotels will commonly be asked if any rooms are free. A method can be written for this task.

Putting it all together

Computers use data to create models of things in the real world.

The events, methods, and properties of an object all relate to each other.

For example, when a reservation is made, the book event fires.

The book event triggers the makeBooking() method, which increases the value of bookings property. The value of the bookings property is changed.

Web browsers are programs built using objects

Window Object

The browser presents each window or tab using a window object.

The location property of the window object will tell you the URL of the current page.

Document Object

The* current* web page loaded into each window is modeled using a document object.

The title property of the document object tells you what is between the opening and closing tag for that webpage.

The document object represents an HTML page.

Using the document object, you can access and change what content users see on the page and respond how they interact with it.

The document object has:

  • Properties. For example, the title of the page.
  • Methods. For example, getting information from a specified element or adding new content.
  • Events. For example, a user clicking or tapping on an element.

When the browser creates a model of a webpage, it not only creates a document object, but it also creates a new object for each element on the page.

How a browser sees a webpage:

  1. Receive a page as HTML code
  2. Create a model of the page and store it in memory
  3. Use a rendering engine to show the page on a screen

All major browsers use a JavaScript interpreter to translate your instructions (in JavaScript) into instructions the computer can follow.

How do I write a script for a web page?

How HTML, CSS, & JavaScript fit together

Three languages that are used to create web pages: HTML, CSS, and JavaScript.

Keep three languages in separate files.

Each language forms a separate layer with a different purpose.

Content Layer

.html files. The page structure and semantics.

Presentation Layer

.css files. The CSS enhances the HTML.

Behavior Layer

.js files. The page behavior and interactivity.

Progressive Enhancement

These three layers form the basis of a popular approach to building web pages called progressive enhancement.

HTML Only

Allows you to focus on its content.

HTML + CSS

The Content and design rules are kept in a separate stylesheet.

HTML + CSS + JAVASCRIPT

Enhances the usability of the page or the experience of interacting with this site. The page still works if the user cannot load or run the JavaScript.

How to use Objects & Methods

document.write('Good Write');

The document object represents the entire web page. All web browsers implement this object.

The write() method of the document object allows new content to be written on the page.

The dot is a member operator. The document object has several methods and properties. They are known as members of that object.

You can access them by using a dot.

Whenever a method requires some information in order to work, the data is given inside the parentheses.

Each piece of information is called a parameter of the method.


You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: