🔎 Intro
In this post, I will be covering the fundamentals of web apps, which is the part0 of the course and list the concepts I’ve reviewed and learned so far.
💡 New concepts
- Callback function:
A callback function is a fuction passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. More details: Callback function - Event handler:
Event are signals fired inside the browser window that notify of changes in the browser or operating system. Programmers can create event handler code that will run when an event fires, allowing web pages to responde appropriately to change. More details: Event handler
(* Comparative thinkging: In Python, you can create an event handler using Django signals which has the similar mechanism.)
- AJAX (Asynchronous JavaScript and XML):
AJAX is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With AJAX, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. More details: AJAX
(* Comparative thinkging: HTMX is a modern JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML, using attributes without writing JavaScript.)
- SPA (Single Page Application)
- JavaScript libraries:
jQuey, AngularJS, React, Vue.js, Backbone.js, etc.
👨💻 Reviewed concepts
- HTML (HyperText Markup Language):
HTML is the code that is used to structure a web page and its content. More details - CSS (Cascading Style Sheet):
CSS is the code taht styles web content. More details - HTML forms:
HTML forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage. More details - HTTP request
- DOM (Document Objcet Model):
DOM connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. The DOM represents a document with a logical tree. More details - Full-stack web development
📝 Course exercise:
- Review HTML
- Review CSS
- Review HTML forms
- Create a diagram depicting the situation where the user creates a new note on the page https://studies.cs.helsinki.fi/exampleapp/notes by writing something into the text field and clicking the Save button. Link to the Submmited diagram.
- Create a diagram depicting the situation where the user goes to the single-page app version of the notes app at https://studies.cs.helsinki.fi/exampleapp/spa. Link to the Submmited diagram.
- Create a diagram depicting the situation where the user creates a new note using the single-page version of the app. Link to the Submmited diagram.