Object-Oriented JavaScript — Separating Behavior

Object-Oriented JavaScript — Separating Behavior

Make our code clean and easy to work with.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Coding and Design Patterns

To organize our code in ways that we can work with them easily, we got to follow some patterns that allow that to happen.

Many people have thought of this problem, so we can follow existing patterns mostly.

Coding patterns are some best practices we can follow to improve our code.

Design patterns are language-independent patterns that are popularized by the Gang of Four book.

Separating Behavior

The building blocks of a web page includes HTML, CSS, and JavaScript code.

The content should be in the HTML code.

They have the markup to describe the meaning of the content.

For instance, we use ul for lists and li for list items and so on.

HTML code should be free from any formatting elements.

Visual formatting belongs to the presentation layer and should be achieved with CSS.

The style attribute shouldn't be used for formatting.

Presentational HTML tags also shouldn’t be used.

Tags should be used form their meaning.

So section for dividing the text into sections, aside for a sidebar etc. should be used instead of div for everything.


To make our pages presentable we can reset the browser defaults to be the same across all browsers.

Popular CSS frameworks like Bootstrap will do this.

programming javascript technology

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript: Chessboard Program

Exercise from Eloquent JavaScript. Today, we will write a function that forms a chessboard. You can find the exercise in the Eloquent Javascript book (3rd edition, chapter 2; Program Structure). Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a “#” character. The characters should form a chessboard.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

[ Professor JavaScript ]: Introduction

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Introduction to JavaScript Async Programming

Async callbacks or promises. Introduction to JavaScript Async Programming