# Table of Contents
- [The pillars of a web page | TIC](#the-pillars-of-a-web-page-tic)
- [Extra resources | TIC](#extra-resources-tic)
- [Extra Resources | TIC](#extra-resources-tic)
- [How web pages work | TIC](#how-web-pages-work-tic)
- [The Color Game | TIC](#the-color-game-tic)
- [Programming paradigms | TIC](#programming-paradigms-tic)
- [Extra Resources | TIC](#extra-resources-tic)
- [Runtime Engine, Callstack, Scope | TIC](#runtime-engine-callstack-scope-tic)
- [Advanced Positioning | TIC](#advanced-positioning-tic)
- [Description and basic syntax | TIC](#description-and-basic-syntax-tic)
- [Description and Basic Syntax | TIC](#description-and-basic-syntax-tic)
- [Basic assignment | TIC](#basic-assignment-tic)
- [The Document Object Model | TIC](#the-document-object-model-tic)
- [Extra: Getting Started with GitHub | TIC](#extra-getting-started-with-github-tic)
- [Description and Basic Syntax | TIC](#description-and-basic-syntax-tic)
- [ES6 | TIC](#es6-tic)
- [OOP vs. Functional Programming | TIC](#oop-vs-functional-programming-tic)
- [Securing your database | TIC](#securing-your-database-tic)
- [Tehnologii ale informaţiei şi comunicaţiilor (TIC) | TIC](#tehnologii-ale-informa-iei-i-comunica-iilor-tic-tic)
- [Database as a Service | TIC](#database-as-a-service-tic)
- [Google Cloud Firestore | TIC](#google-cloud-firestore-tic)
---
# The pillars of a web page | TIC
[PreviousHow web pages work](/tic/basic-web-principles/untitled)
[NextExtra: Getting Started with GitHub](/tic/basic-web-principles/extra-getting-started-with-github)
Last updated 2 years ago
[](#html)
HTML
-------------------
**Markup language.**
**Stands for Hypertext Markup Language.**
The minimum a web page needs to exist.
It describes the content and the structure of a document.
[](#css)
CSS
-----------------
**Meta-language** (it cannot produce results without HTML).
**Stands for Cascading Style Sheets.**
It is used for styling and positioning HTML elements.
[](#javascript)
Javascript
-------------------------------
**Programming language.**
It brings interactivity (or better said, a behavior) to web pages (but it is also used as a stand-alone programming language in other fields).
Analogy between the human body and web page technologies
---
# Extra resources | TIC
[PreviousDescription and Basic Syntax](/tic/basic-html/descriere-limbaj)
[NextDescription and Basic Syntax](/tic/basic-css/descriere-limbaj)
Last updated 1 year ago
[HTML Tutorial](https://www.w3schools.com/html/)
[HTML basics - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
---
# Extra Resources | TIC
[PreviousThe Document Object Model](/tic/basic-javascript/the-document-object-model)
[NextBasic assignment](/tic/basic-javascript/basic-assignment)
Last updated 4 years ago
[JavaScript Tutorial](https://www.w3schools.com/js/DEFAULT.asp)
[JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/javascript)
---
# How web pages work | TIC
[PreviousTehnologii ale informaţiei şi comunicaţiilor (TIC)](/tic)
[NextThe pillars of a web page](/tic/basic-web-principles/the-pillars-of-a-web-page)
Last updated 3 months ago
[](#what-is-the-internet)
What is The Internet
---------------------------------------------------
The Internet is a global network of computer (and other devices) networks that can communicate between them through the **TCP/IP protocol**.
It is mainly used for accessing resources (and services) such as hypertext documents of the World Wide Web, electronic mail, various files, or data streams.
Given its high complexity global reach, it doesn't have a single centralized governance. This means that if a certain component (network or computer) becomes unavailable, the Internet as a whole doesn't collapse.
[](#www)
WWW
-----------------
The World Wide Web, or The Web, is a colossal evergrowing collection of documents interconnected via the Internet, that are identifiable through **Uniform Resource Locators** (URLs, such as http://google.com/) and accessible through HTTP.
[](#http)
HTTP
-------------------
Stands for **Hypertext Transfer Protocol** and it is an application layer protocol, part of the TCP/IP suite and it is used by Web Servers to communicate to Web Browsers (and other client applications).
It has been initiated by Tim Berners-Lee in 1989, a moment called by many the beginning of the Internet.
HTTP follows a classical **client-server** model, with a client opening a connection to make a request, then waiting until it receives a response.
[](#web-servers-web-browsers-and-dns-servers)
Web servers, Web browsers, and DNS Servers
---------------------------------------------------------------------------------------------
**Web servers generate HTTP responses** while **Web browsers initiate HTTP requests and interpret HTTP responses.**
HTTP/2, finalized in 2015, brought significant improvements to website performance and efficiency over its predecessor, HTTP/1.1. The key advancements include multiplexing, allowing multiple requests and responses to occur simultaneously over a single connection, and header compression, reducing overhead. It also introduced server push, enabling servers to proactively send resources to the client before they're even requested. These enhancements result in faster page load times, reduced latency, and better resource utilization.
**WebSockets -** a different protocol used in web technologies
**Persistent connection:** WebSockets establish a persistent, two-way connection between the client and server. Once the connection is established, both parties can send data at any time.
**Stateful:** WebSockets maintain state, meaning the server can keep track of the client's connection and any data that has been exchanged.
**Full-duplex:** Communication is full-duplex, allowing both the client and server to send data simultaneously.
**Ideal for:** Real-time applications like chat, online games, live updates, and collaborative tools where instant communication is crucial.
**DNS stands for Domain Name System** and is basically a systemized way to label computers and other devices over the Internet or private networks making them identifiable via a Domain Name rather than through a unique IP address.
In reality, this interaction is a multi-step process as shown below:
The Domain Name System (DNS) is like a global phonebook for the internet, translating human-readable domain names (like google.com) into machine-readable IP addresses. Its maintenance is a shared responsibility. At the top level, the Internet Corporation for Assigned Names and Numbers (ICANN) oversees the root servers and delegates authority for top-level domains (like .com, .org) to registries. These registries then work with registrars (companies like GoDaddy or Namecheap) who sell domain names to individuals and organizations. Finally, website owners manage the DNS records for their specific domains, specifying how their domain name maps to their web server's IP address. This distributed system ensures redundancy and resilience, keeping the internet running smoothly.
[](#web-pages)
Web Pages
-----------------------------
Web pages are (basically) documents formatted with HTML and can be optionally packed with styling guides (CSS files), behavior (Javascript files), and multimedia (images, audio, video files).
[](#frontend-vs.-backend)
FrontEnd vs. BackEnd
---------------------------------------------------
FrontEnd refers to the source code (received as a plain answer from HTTP requests) which a browser can interpret.
BackEnd is the source code executed at a Web Server level, and cannot be accessed by the browser. It is typically used for generating HTTP responses, interacting with Databases or other Information Systems, and for performing various other logical tasks.
Full Internet map of 29 June 1999. Antoniou, Pavlos & Pitsillides, Andreas. (2007)
Example structure of a HTTP request
A simplified interaction between a Web browser and a Web server
---
# The Color Game | TIC
[PreviousBasic assignment](/tic/basic-javascript/basic-assignment)
[NextRuntime Engine, Callstack, Scope](/tic/advanced-javascript/runtime-engine-callstack)
Last updated 1 year ago
---
# Programming paradigms | TIC
[](#objectives)
Objectives
-------------------------------
* Easy to understand
* Easy to extend
* Easy to maintain
* Memory efficient
* DRY (Do not repeat yourself)
**JavaScript is a multi-paradigm programming language.**
Among these, we'll discuss **Object-Oriented Programming** and **Functional Programming**.
[PreviousES6](/tic/advanced-javascript/es6)
[NextOOP Javascript](/tic/oop-javascript)
Last updated 4 years ago
---
# Extra Resources | TIC
[PreviousAdvanced Positioning](/tic/basic-css/advanced-positioning)
[NextDescription and basic syntax](/tic/basic-javascript/description-and-basic-syntax)
Last updated 1 year ago
[CSS Tutorial](https://www.w3schools.com/css/default.asp)
[CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
---
# Runtime Engine, Callstack, Scope | TIC
[PreviousThe Color Game](/tic/basic-javascript/the-color-game)
[NextES6](/tic/advanced-javascript/es6)
Last updated 3 months ago
[](#jit-compilers)
JIT compilers
-------------------------------------
In modern browsers and in other environments such as NodeJS, JavaScript is a Just In Time Compiled language, which is a mix between Ahead Of Time Compilation and Interpretation.
After parsing and analyzing the source code, this approach achieves both interpretation followed by execution the explicit source code, and generating an optimized low-level language (Bytecode) which can be later executed if a similar context appears in the original source code thread.
A process called **Hoisting** is also performed before execution. All declarations, for both variables and functions, are processed first during the compilation phase before any of the code is executed. The declaration code is moved, or hoisted, from where they appear in the flow of the code to the top of the scope and pushed to the heap. Only declarations are hoisted, while assignments or other executable logic is left in place. Functions declarations are hoisted first, then variable declarations.
Therefore a function can be called even if it is explicitly described further in the code and variables declared with var do not throw errors if referenced before being assigned any value.
Copy
loggToConsole() //it will print Hello
x //it will print undefined
function loggToConsole() {
console.log('Hello')
}
var x = 5
[](#javascript-runtimes)
JavaScript runtimes
-------------------------------------------------
Popular JS runtimes (engine and additional methods) are V8 (behind Chrome, recently Microsoft Edge and NodeJS), JavaScriptCore (Safari) and SpiderMonkey (Mozilla Firefox).
The JS engine is single-threaded indeed but inside a runtime, we can achieve asynchronous computing. The anatomy of the runtime is described below.
The **Call Stack** operates as a Last-In-First-Out (LIFO) structure. When a function is called, it’s pushed onto the stack; once it completes, it's popped off. This process repeats until all functions are executed.
Once a task requires external APIs or methods (such as DOM manipulation, setting a timeout, or making an external API request), it triggers an asynchronous operation. When the operation completes, its callback is pushed to the **Callback Queue**. These callbacks will be executed in the order they were added, but only after the **Call Stack** is completely cleared of all synchronous tasks.
Copy
//Execution context
debugger //it allows step by step execution and evaluation
console.log('1')
setTimeout(function() {
console.log('2')
}, 3000)
console.log('3')
console.log('4')
console.log('5')
setTimeout(function() {
console.log('6')
}, 0)
console.log('7')
console.log('8')
console.log('9')
**The microtask queue** is a special queue that is processed by the JavaScript engine before the callback queue. This means that microtasks, such as promises or mutation observers, are always executed before any tasks from the callback queue, even if the callback was scheduled first.
Copy
console.log("Start");
// Callback queue (setTimeout)
setTimeout(() => {
console.log("Timeout callback");
}, 0);
// Microtask queue (Promise)
Promise.resolve().then(() => {
console.log("Promise microtask");
});
console.log("End");
// OUTPUT:
// Start
// End
// Promise microtask
// Timeout callback
Even though the `setTimeout` callback is initiated before the `Promise`, the promise is placed in the **microtask queue** and runs before the timeout, which is in the **callback queue**.
When you make a **fetch** request, the actual network operation is asynchronous, and the callback that handles the response (e.g., when the request finishes) is sent to the **callback queue**.
However, the response from `fetch` typically returns a **promise**. Once that promise is resolved (e.g., after processing the response), the `.then()` or `.catch()` handlers are sent to the **microtask queue**.
Thus, the initial fetch goes to the callback queue, and any promises yielded from it go to the microtask queue.
Copy
// here is an example of how HTTP fetches are added to the microtask queue
fetch('https://example.com/api/users')
.then(response => response.json())
.then(data => {
// This callback will be executed after the HTTP fetch is complete
});
HTTP response promises are added to the microtask queue with the following aims:
* It ensures that HTTP fetches are executed as soon as possible.
* It prevents HTTP fetches from blocking the main thread.
* It allows developers to write more efficient and responsive asynchronous code.
[](#scope)
Scope
---------------------
The Scope is the context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.
Copy
var x = "declared outside function";
exampleFunction();
function exampleFunction() {
console.log("Inside function");
console.log(x);
}
Copy
//Scoping
var favouriteFood = "grapes";
var foodThoughts = function () {
console.log("Original favourite food: " + favouriteFood);
var favouriteFood = "sushi";
console.log("New favourite food: " + favouriteFood);
};
foodThoughts()
Function parameters have local scope within that function's body.
Declaring variables with `let` turns the scope to block scope, meaning it basically creates a clone (a mask) if that variable has already been declared in the parent scope. More details on the ES6 features.
V8 JS engine compiling example
Example of the scope chain
---
# Advanced Positioning | TIC
[PreviousDescription and Basic Syntax](/tic/basic-css/descriere-limbaj)
[NextExtra Resources](/tic/basic-css/resurse-suplimentare)
Last updated 1 year ago
[](#flexbox)
Flexbox
-------------------------
Provides a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown and/or dynamic.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate all kinds of display devices and screen sizes).
Copy
After setting the CSS to use flexbox, the positioning changes as follows.
Copy
.container {
display: flex;
}
Flexbox properties can be categorized into 2 main types:
1. Container properties (flex-direction, flex-wrap, justify-content, align-items, align-content)
2. Flex Item properties (order, flex, flex-grow, flex-shrink, align-self)
1. Flex Container: This refers to the container that has display: flex; set to it.
2. Flex Item: These are the individual children inside of the Flex Container
3. Main-axis: By default is set from left to right.
4. Cross-axis: By default is set from top to bottom.
As soon as display: flex is set on a container, these imaginary axes are going to work together to determine how the flex items inside of the flex container should move around and behave.
Here is an example:
Copy
Copy
/* CSS flexbox example */
.container {
display: flex;
flex-direction: row;
align-items: top;
justify-content: center;
}
.square {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 100px 0 100px 0;
}
.square:first-child {
margin-top: 0;
}
.square:last-child {
margin-top: auto;
margin-bottom: 0;
}
**More details and examples below:**
**Another external resource:**
[A visual guide to CSS FlexboxfreeCodeCamp.org](https://www.freecodecamp.org/news/do-you-even-flex-box-c16449cfca96/)
[A Complete Guide to Flexbox | CSS-TricksCSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
---
# Description and basic syntax | TIC
[](#language-overview)
Language overview
---------------------------------------------
JavaScript is arguably the most popular programming language.
> JavaScript is a **programming language** that conforms to the **ECMAScript specification**. JavaScript is **high-level**, often **just-in-time compiled**, and **multi-paradigm**. It has **curly-bracket syntax**, **dynamic typing**, **prototype-based object-orientation**, and **first-class functions**.
>
> More than this, JavaScript is **single threaded**, **non-blocking**, **asynchronous**.
JS in 100 seconds
Along with **HTML** and **CSS**, **JavaScript** (often abbreviated as JS) is one of the three pillars of the World Wide Web and was started as a way to add interactivity to web pages. However, its role has expanded over the years.
The biggest leap in JavaScript's evolution was the ES6 iteration which will be detailed starting with the Advanced Javascript section.
As well as many other languages, Javascript supports, but it is not limited to the following programming concepts:
* **Variables** of Data Types (ex: Booleans, Numbers, Strings)
* **Operators** (ex: Arithmetic, Assignment, Comparison, Logical, Bitwise)
* **Structural types:**
* **Functions**
* **Objects**
* **Conditional statements** and **loops**
[](#adding-javascript-to-a-web-page)
Adding JavaScript to a web page
-------------------------------------------------------------------------
1. Inline
2. Directly in the HTML file between `script` tags
3. Using external `.js` files
inline JS
Copy
JS between script tags
Copy
index.htmljs/script.js
Copy
Copy
document.getElementById("demo").innerHTML = "Hello JavaScript!";
[](#syntax)
Syntax
-----------------------
JavaScript basic statements and comments
Copy
var myNumber = 3;
counter = counter + 1;
myFunction(); //executing myFunction this is a single line comment
function myFunction() {
console.log('Hello World!')
}
[](#variables)
Variables
-----------------------------
[](#functions)
Functions
-----------------------------
**Functions are named blocks of reusable code.** (Actually starting with ES6, functions can also be anonymous)
Functions can return a desired value; the default returned value in case the `return` statement is missing is `undefined`
JavaScript applies **function scoping** for its variables.
We can only use the arguments inside the function, they are not accessible from the outside.
We can also declare local variables that have the same scope as parameters.
Variables from outside the function are accessible only if declared in the enclosing scope
Copy
function someName(argument1, argument2) {
let x = argument1 + argument2;
return(x);
console.log("hello!"); //this is not executed
}
console.log(someName(3,5))
[](#operators)
Operators
-----------------------------
[](#conditional-statements)
Conditional statements
-------------------------------------------------------
if / else if / ele
Copy
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false
// and condition2 is true
} else {
// block of code to be executed if the condition1 is false
// and condition2 is false
}
###
[](#conditional-ternary-operator)
Conditional (ternary) operator
Shorter syntax for simple conditions: `condition ? exprIfTrue : exprIfFalse`
Copy
function tooYoung(person) {
return ((person.age < 18) ? "too young" : "allowed")
}
[](#looping-statements)
Looping statements
-----------------------------------------------
Basic `for` loop has the following general syntax: `for ([initialExpression]; [conditionExpression]; [incrementExpression]) { statement`}
JavaScript
Copy
for (let step = 0; step < 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Made another step');
}
The following example shows the difference between a `for...of` loop and a `for...in` loop. While `for...in` iterates over property names, `for...of` iterates over property values.
Copy
const arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // logs 3, 5, 7
}
A `while` statement executes its statements as long as a specified condition evaluates to `true`
Avoid infinite loops
Copy
// Infinite loops are bad!
while (true) {
console.log('Hello, world!');
}
[PreviousExtra Resources](/tic/basic-css/resurse-suplimentare)
[NextThe Document Object Model](/tic/basic-javascript/the-document-object-model)
Last updated 2 years ago
---
# Description and Basic Syntax | TIC
[PreviousExtra: Getting Started with GitHub](/tic/basic-web-principles/extra-getting-started-with-github)
[NextExtra resources](/tic/basic-html/resurse-suplimentare)
Last updated 1 year ago
[](#html-hypertext-markup-language)
HTML - HyperText Markup Language
-------------------------------------------------------------------------
* gives content structure and meaning
* headings, paragraphs, images, etc.
* represents the skeleton of a webpage
[](#html-terminology)
HTML Terminology
-------------------------------------------
**Tags** \- HTML tags are keywords that define how a web browser should display the content of a web page. They are enclosed in angle brackets (< >) and usually come in pairs, with an opening tag and a closing tag. Ex: `` `` `
`
* the **img** element with the **src** attribute: ``
[](#divisions-and-spans)
Divisions and Spans
-------------------------------------------------
* act as containers for the page content
* help divide the page
* no meaning or semantic value
* exist only for styling purposes
[](#the-basic-structure-of-a-web-page)
The basic structure of a web page
-----------------------------------------------------------------------------
Copy
The HTML basics
TIC
Hello world!
[](#linking-between-pages)
Linking between pages
-----------------------------------------------------
Creating Hyperlinks:
* used to link resources and pages
* identified by the **href** attribute
* relative paths to links pointing to other pages on the website
* absolute paths to pages outside your domain
Copy
YoutubeContact
[](#adding-media)
Adding media
-----------------------------------
* using the `inline` element
* the `` element doesn’t wrap any other type of content
* the `src` attribute is needed to specify the source of the image
* can also take the `alt` attribute
* can also be added using the `background-image` property in CSS
* `background-image` is mainly used when the image is not relevant to the content of the page
[](#block-vs.-inline-vs.-inline-block-elements)
Block vs. Inline vs. Inline-block elements
-----------------------------------------------------------------------------------------------
###
[](#block-elements)
**Block elements**
* begin on new lines
* occupy any available width
* respect left, right top & bottom margins and padding
* Examples:
* `
`
[](#divisions-and-spans)
Divisions and Spans
-------------------------------------------------
* act as containers for the page content
* help divide the page
* no meaning or semantic value
* exist only for styling purposes
[](#the-basic-structure-of-a-web-page)
The basic structure of a web page
-----------------------------------------------------------------------------
Copy