Web Front-End, DOM and AJAX [Dev Concepts #11]

Share on facebook
Share on twitter
Share on linkedin
Learn all about Front-end, DOM and AJAX in this lesson!

In this lesson,  you will learn which technologies help us build user interfaces for software apps, what is the DOM (Document Object Model) and how we implement DOM interactions in JavaScript using the DOM API. Finally, Svetlin Nakov will explain and demonstrate the AJAX technology, the XMLHttpRequest, and the Fetch API, which allow consuming RESTful APIs from the back-end.

Web front-end, HTML, CSS and JavaScript, together with the Document Object Model (DOM), AJAX and few others are the dominant technology for building user interfaces for modern software apps.

This set of web front-end technologies is known under the name “HTML5 platform” or “The Web Platform“.

(See https://platform.html5.org for more details about the HTML5 platform.)

It consists of lots of technologies, APIs and standards, implemented in the modern Web browsers.

It is very important for every modern software engineer to be familiar with these HTML5 technologies and the concepts behind them.

Web front-end technologies are the way developers build the user interface, displayed in Web pages, Web sites, Web apps and cross-platform apps.
The HTML and CSS languages describe documents, content, layout, formatting and everything we see on the screen in the Web browser.
JavaScript (which is called also ECMAScript) is the main language, used by developers to program user interfaces in a Web browser.
The DOM technology allows accessing the elements in a Web page through JavaScript.
The AJAX technology allows invoking back-end services from JavaScript front-end apps.
JS front-end frameworks (such as React, Angular and Vue) simplify the Web front-end development by providing structure, components, guidelines and patterns to build maintainable front-end apps.
 
What exactly is AJAX?
AJAX stands for “Asynchronous JavaScript and XML“.
This acronym doesn’t describe its nature well, but this is for historical reasons, from the time when XML was popular.
A better description for the AJAX technology is the following:
AJAX is a technology for asynchronous execution of HTTP requests from client-side JavaScript code. JavaScript front-end apps use AJAX calls to access the back-end services and APIs and consume data from the Web server over the HTTP protocol.

If you are new to programming, make sure to watch our Free Full Java Basics course! It will give you the necessary foundation to build upon and become a successful software engineer!

Lesson Topics

In this video we review the following topics:
  • Web Front-End and DOM
  • Using the DOM API
  • Live Demo – DOM Interaction
  • AJAX and RESTful APIs

Remember that coding is a skill, which should be practiced. To learn to code, you should write code, every day, for a long time. Watching tutorials is not enough. You should code! 

We would love to hear from you, so leave a comment below saying what topics you would like to see next. 

Leave a Comment

Scroll to Top
small_c_popup.png

Sign in

Don’t have an account? Register with us to join the community.