Scribd
Upload
12 views12 pages

Making Websites Interactive

Uploaded by

selamselam0970
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views12 pages

Making Websites Interactive

Uploaded by

selamselam0970
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

CodeLab Academy

Where your innovation journey begins!

Making Websites Interactive


Instructor: Negasi Kiflom (Senior Software Engineer and Architect)
CodeLab Academy
Where your innovation journey begins!

How Does the Web Work?

User enters a URL: Asks the web server


E.g. codelab.com for the websites code

Web server with IP


User Browser Web server address: 192.168.0.3

Sends the
Website displayed website’s code to
browser

Browser asks DNS for Give the IP back to the


the IP browser. E.g. 192.168.0.3

Searches for the IP related


to the website URL DNS Server
CodeLab Academy
Where your innovation journey begins!

…Cont’d

- Steps
1. User:- user sends a request to a website. Example: codelab.com
2. Browser:- the browser sends request to a DNS (Domain Name System) server to get IP (internet protocol)
address of the requested website
3. DNS (Domain Name System):- DNS searches for the IP and sends it back to the browser
○ DNS is a server or a computer that stores website names with their respective IP (internet protocol)
address.
○ DNS stores website names and IP addresses in a dictionary format.
○ It’s like the phonebook of the internet

Example: codelab.com = 192.168.0.3


CodeLab Academy
Where your innovation journey begins!

…Cont’d

- Steps
4. Browser: the browser the server/computer that has the IP address for the website code
5. Web Server: the web server send the website code (HTML, CSS, JavaScript) to the browser
○ The web server is any computer that accessible via an IP address.
○ It is where the website code (HTML, CSS, JavaScript) is stored
6. Browser: the browser processes the website code and displays the website to the user

Example: Test your PC and the portfolio project using ngrok (https://ngrok.com/)
CodeLab Academy
Where your innovation journey begins!

How Do Browsers Display Websites?

- A browser is just a desktop app that enables us to run other desktop apps, i.e., web pages,
dynamically on top of it.

Steps followed when displaying a webpage:


1. HTML to DOM Tree: The HTML is processed and converted to a DOM (Document Object Model)
○ DOM is a tree-like structure that represents the hierarchical structure of the page
CodeLab Academy
Where your innovation journey begins!

…Cont’d

HTML sample code DOM representation

<html> HTML
<head>
<title>My Page</title>
</head>
Head Body
<body>
<h1>Hello, World!</h1>
</body>
Title h1
</html>
CodeLab Academy
Where your innovation journey begins!

…Cont’d

Example task:

- Copy portfolio website code and paste it at the following website:

https://software.hixie.ch/utilities/js/live-dom-viewer/

- See what the DOM looks like


CodeLab Academy
Where your innovation journey begins!

…Cont’d

- Every element is represented as an object


- An object is a data structure in JavaScript
- Example:
const obj = {

name: "Negasi",

job: "Software Engineer",

};
CodeLab Academy
Where your innovation journey begins!

…Cont’d

- Example: methods to select HTML elements

a. document.getElementById("contact-btn"):- to select an element by id


b. document.getElementsByClassName("className"):- to select all elements with the specified
class name
c. document.getElementsByTagName("tagName"):- to selects all elements with the specified tag
name (e.g., div, p)
d. document.querySelector("selector"):- to select the first element that matches the given
CSS selector (e.g., #id, .class, tag).
e. document.querySelectorAll("selector"):- to select all elements that match the
given CSS selector
CodeLab Academy
Where your innovation journey begins!

…Cont’d

const dom = {
nodeName: "HTML",
children: [
{
nodeName: "HEAD",
children: [
{
nodeName: "TITLE",
textContent: "My Page",
children: [],
},
],
},
{
nodeName: "BODY",
children: [
{
nodeName: "H1",
textContent: "Hello, World!",
children: [],
},
],
},
],
};
CodeLab Academy
Where your innovation journey begins!

…Cont’d

2. CSS to CSSOM Tree:The browser parses the CSS code, creating another tree-like structure called the CSSOM (CSS
Object Model).
3. Combine DOM and CSSOM: The browser merges the DOM and CSSOM to create a Rendering Tree
4. Layout Calculation: The browser calculates the exact size and position of each element in the Rendering Tree.
5. Painting: The browser paints the pixels on the screen to display the webpage.
6. JavaScript Execution: If there's JavaScript code, the browser executes it.
○ JavaScript can manipulate the DOM, CSSOM, and other aspects of the page, creating dynamic and interactive
elements.
CodeLab Academy
Where your innovation journey begins!

Resources

1. https://web.dev/articles/howbrowserswork?hl=en
2.

You might also like