The presentation layer is one of the three main layers in object-oriented programming.

The three main layers include:

  • Presentation Layer
  • Business Layer
  • Data Layer

Now, these three layers are typically related to enterprise web applications. It's a design pattern used to help separate your code out in three distinct areas that (if need be) can easily be switched out with another programming language or technology.

So if you keep all of your presentation layer code in one area of your application, switching presentation layer technologies shouldn't be too difficult.

Same rules apply to the business and data layers. If you separated your code out properly, switching databases shouldn't be too big of an issue.

Having said that, we'll be focusing on the presentation layer.

The four big players (in terms of technology) in the presentation layer are as follows:

  • HTML
  • CSS
  • JavaScript
  • jQuery

Let’s dive into the overviews of each of these big players, shall we?

HTML

HTML (HyperText Markup Language) is a technology used to communicate with web browsers. All browsers follow the rules laid out in HTML (currently in its 5th iteration).

HTML defines a bunch of different HTML elements known as tags that are put together to make up the basic layout of a web page. These tags are used to define things like the title of the webpage (which appears in the tab of your browser), the actual text that appears on the page, images, buttons and more.

Thankfully HTML isn’t too tough to learn as it’s more of a game of memorizing the most popular tags and using them to create your simple web pages. HTML is not a programming language, as it doesn’t define variables, data types, control structure or the like. This is also what makes it fairly easy to learn.

We’ll be diving into examples of HTML “code” later, so stay tuned.

CSS

CSS (cascading style sheets) is used to add some “pizazz” to your web pages. CSS is used to add a design look and feel to your web pages through the use of its cascading rules. We won’t get into the exact rules that CSS uses to apply its designs just yet, but again, stay tuned for a more in depth explanation.

All you need to know is that CSS is used to make a web page look nice. You can use it to choose which parts of the web page should be which color, how big or small elements should be, what fonts should be used and more.

If you’ve ever landed on a web page that wasn’t able to properly load its CSS, you’d likely think that the website was completely broken. It is often fixed by forcing the page to reload and then the CSS usually gets picked up the second time and everything loads properly and the website goes back to looking great. This situation is quite rare, but I thought I’d mention it because it’s a great example of just how powerful CSS is.

JavaScript

JavaScript is used to make your web pages interactive. It allows you to put some real programming functionality into web pages (as HTML is not a programming language and thus cannot add real programming elements to a page).

Examples of what JavaScript can do is when you’re logging into an application and you forget to provide information in one of the fields. JavaScript can detect that you’ve forgotten to type in your username or password and can provide you with a prompt explaining that you need to fill in your username and password before you can continue.

JavaScript shouldn’t be confused with Java, as they are two different technologies. Java is part of the business layer and has no place in the presentation layer. Java is known as a server side language, as it exists and runs on servers. JavaScript is known as a client side technology, and thus lives where the “clients” are, which is inside the actual web browsers.

A good way to think of the difference between the two languages is that when you land on a web page and it loads in your browser, it will also load any JavaScript code inside the page and you’ll actually be able to access that code and read it. Whereas, you’d never be able to read the Java code, as it’s not loaded in your browser because it’s a server side technology.

That simple distinction between the two languages makes for two very different languages in terms of their use and functionality.

The syntax for JavaScript, however, is fairly similar to Java. This is nice since you’ll be able to look at a piece of JavaScript code and more or less understand what’s going on. So you should be able to pick up the JavaScript language a lot quicker if you already have a good command of the Java language.

jQuery

JQuery is a technology that’s used in tandem with JavaScript. JQuery makes your life as a web programmer so much easier for one reason, it allows you to write code once and have it work across all the browsers.

In today’s world we have so many browsers that can be downloaded for free and used to peruse the web. This actually makes building websites a bit challenging, as every browser has made up their own minds on how to “render” an HTML web page.

This means that a webpage loaded on Safari might not look the same as if it’s loaded on Internet Explorer, or Firefox, or Chrome.

These inconsistencies drive web programmers crazy, so that’s why jQuery was introduced. It allows you to write your JavaScript in a sort of “browser agnostic” way. You can write it once, and jQuery will execute the code appropriately depending on which browser it’s loaded it. VERY COOL!

Summing Up

The best part of all of these technologies is that they are all free to use.

And thankfully, they are also free to learn via these tutorials!

Do you want to get a job as a full-stack developer?  Consider joining our Online Web Developer Bootcamp.

Free Java Beginners Course

Start learning how to code today with our free beginners course. Learn more.