Web Applications Building in Python: Silviu Ojog

Web Applications Building in Python
Silviu Ojog
Ce vom învăța astăzi?
• Componentele unei Aplicații Web
• Architectura Client-Server
• Ce este JavaScript și la ce folosește
• Cum construim si cum folosim un server
Aplicație web
• Ce este o aplicație web?
• O aplicație web este un program care
foloseste un browser și tehnologii web
pentru a efectua taskuri pe internet.
Tipuri de website-uri
• Aplicații web
• ex: Google Drive, Facebook, email, stiri
• Site-uri de prezentare
• ex: site-uri de companii, prezentare
• Site-uri ecommerce
• ex: emag, Amazon, eBay, FashionDays
Ce este un Browser?
Browser
• Un browser este o aplicație desktop
• Există o diversitate de browsere
• Unele au la bază același engine (program)
• ex: Chrome și Brave folosesc engine-ul V8
• Variază modul în care sunt implementate
standardele HTML5
• Trebuie testat site-ul pe mai multe browsere
Browser
• Sursa: https://gs.statcounter.com/browser-
market-share
Ce este un URL?
• URL înseamnă Uniform Resource Locator și
reprezinta o adresa a unui site
Ce este un URL?
• URL înseamnă Uniform Resource Locator și are 3
părți
• Protocolul prin care ne conectăm
• Domeniul la care ne conectăm
• Documentul care este cerut
• de multe ori este vorba de mai multe
documente
Protocolul
• HTTP - Hyper Text Transfer Protocol
• http://www.link-academy.com/
• HTTPS - Secure Hyper Text Transfer Protocol
• https://www.link-academy.com/
• FTP - File Transfer Protocol
• ftp://link-academy.com/
Documentul
• URL-urile pot specifica documentul:
• https://www.link-academy.com/
contact.html
• În caz că nu este specificat, cel default este
returnat
• Convenția este index.html
Ce este un server?
• Un server este un computer (sau un cluster de
mai multe computere) conectat la internet care
așteaptă cereri de la browsere
• Fiecare server stochează fișiere HTML, imagini,
sunete și alte tipuri de fișiere.
Client - Server
Silviu Ojog
SERVER
CLIENT
(JAVA, PHP,
BROWSER
PYTHON)
HTML, CSS, JS
Silviu Ojog
Client - Server
• Fiecare browser are un engine (ex: V8, WebKit)
Silviu Ojog
CLIENT
BROWSER
SERVER
(JAVA, PHP,
PYTHON)
HTML, CSS, JS
Silviu Ojog
Ce este un client?
• Un client este o “aplicatie” care comunica cu un server
HTTP(S) Request
CLIENT SERVER
HTTP(S) Response
Ce este un client?
CLIENT SERVER CLIENT

Ce este un client?
CLIENT CLIENT
SERVER
CLIENT CLIENT
Ce este un client?
Web Desktop
CLIENT CLIENT
(site) (desktop app)
SERVER
Mobile Server
CLIENT CLIENT
(mobile app) (alt server)
Client - Server
HTTP(S) Request
CLIENT SERVER
HTTP(S) Response
*in cadrul cursul clientul va fi web

Client - Server
HTTP(S) Request
CLIENT SERVER
(front-end) HTTP(S) Response (back-end)
Web Development
(FRONT-END)
Java
HTML CSS
Script
Web Development
(FRONT-END)
Java
HTML CSS
Script
Content Markup
(continut si structura)
Web Development
(FRONT-END)
Java
HTML CSS
Script
Content Markup
(continut si structura)
- divizarea in pagina
- paragrafe
- ce contine
Web Development
(FRONT-END)
Java
HTML CSS
Script
Content Markup Cascading Style Sheets

(continut si structura) (User Interface)
- divizarea in pagina
- paragrafe
- ce contine
Web Development
(FRONT-END)
Java
HTML CSS
Script

- divizarea in pagina - fonturi
- paragrafe - culori
- ce contine - background
- padding
Web Development
(FRONT-END)
Java
HTML CSS
Script
Comportament si
interactivitate
- padding
Web Development
(FRONT-END)
Java
HTML CSS
Script
Comportament si
interactivitate
- mouse over
- verificarea unor parametrii
- padding
JavaScript
JavaScript - Istorie
• A fost creat in 1995 (numit original LiveScript)
Silviu Ojog
Silviu Ojog
• A fost numit JavaScript, pt ca Java era popular
Silviu Ojog
atunci (acum este confuz)
Silviu Ojog
Silviu Ojog

• JavaScript nu e Java (nu au mimic in comun)
Silviu Ojog
Silviu Ojog

• JavaScript nu e Java (nu au mimic in comun)
• ECMA Script (standardizarea JS) in 1997. Oficial
Modzilla detinea JavaScript si noi lucram cu ECMA.
Silviu Ojog
JavaScript
• Este un limbaj de scripting*
• Este un limbaj limitat, in mod intentionat
Silviu Ojog
• Nu putem crea aplicatii desktop standalone ca in Java

• Functioneaza doar in interiorul unei alte aplicatii
(WebBrowser-ul)
• Nu are access la fisierele de pe computerul pe care ruleaza
• Nu exista access direct la o baza de date (Nu exista keywords)
• Nu exista access la hardware (ex: Porturi USB) Silviu Ojog
JavaScript
• JS a fost creat pentru a manipula pagini web, si o
face foarte bine.
Silviu Ojog
• JS este un limbaj creat pentru a rula pe partea de

client (client-side), dar in ultima perioada se
gaseste in alte parti decat in browser
Silviu Ojog
JavaScript - Frameworkuri
• In prezent, JS are o comunitate extrem de mare
• Exista o multime de frameworkuri de JS
Silviu Ojog
Silviu Ojog
Silviu Ojog
REACT
(Facebook)
2013
Silviu Ojog
Silviu Ojog
REACT ANGULAR
(Facebook) (Google)
2013 2010
Silviu Ojog
• Exista o multime de frameworkuri de JS pe partea
Silviu Ojog
front-end
REACT ANGULAR EXPRESS
(Facebook) (Google) (NodeJS)
2013 2010 2010
Silviu Ojog
• Exista o multime de frameworkuri de JS pe partea
Silviu Ojog
front-end
REACT ANGULAR EXPRESS
(Facebook) (Google) (NodeJS)
2013 2010 2010
Silviu Ojog
• Toate au la baza conceptele invatate in acest curs

Silviu Ojog
Silviu Ojog
JavaScript (JS)
face foarte bine.
Silviu Ojog

client (server-side)
HTTP REQUEST SERVER

CLIENT
(JAVA, PHP,
BROWSER
PYTHON) Silviu Ojog
JavaScript (JS)
face foarte bine.
Silviu Ojog

client (server-side)
SERVER
CLIENT
(JAVA, PHP,
BROWSER
PYTHON) Silviu Ojog
HTML, CSS, JS
JavaScript (JS)
• Fiecare browser are un engine (ex: V8, WebKit)
Silviu Ojog
CLIENT
BROWSER
SERVER
(JAVA, PHP,
PYTHON)
HTML, CSS, JS
Silviu Ojog
JavaScript in HTML
• Exista doua modalitag de integrare a codului
JavaScript in HTML
JavaScript in HTML
JavaScript in HTML
• Inline coding (integrarea in acelasi fisier HTML)
JavaScript in HTML
JavaScript in HTML
• Inline coding
<script>
console.log ("Hello World!”);
</script>
JavaScript in HTML
• Exista doua modalitag de integrare a codului JavaScript in HTML
• Inline coding
<html>
<head>
<script>
console.log ("Hello World!”)
</script>
</head>
<body>
</body>
</html>
JavaScript in HTML
JavaScript in HTML
• In fisier separat
JavaScript in HTML
• Exista doua modalitag de integrare a codului JavaScript in
HTML
<script src=“texoile.js” type=“text/javascript”>
</script>
JavaScript in HTML
JavaScript in HTML
</script>
Nu mai este necesar in ultimele versiuni,
dar este ok pentru compatibilitate
JavaScript in HTML
JavaScript in HTML
<script src=“texoile.js”>
</script>
Nu mai este necesar in ultimele versiuni,
dar este ok pentru compatibilitate
JavaScript in HTML
<html>
<head>
</script>
</head>
<body>
</body>
</html>
JavaScript in HTML
<html>
Ar trebui sa amanam cat mai mult posibil executia
<head> JS pentru a permite paginii sa se incarce rapid
</head>
<body>
</script>
</body>
</html>
DOM in JavaScript
• Document Object Model - este o reprezentare a
unei pagini web in bucag mai mici.
• Exemple de folosire a DOM-ului:
• Sa gasesc gtlul unui paragraf
• Sa schimb linkul dintr-o lista
• Sa adaug un element intr-o list
• Schimbarea culorii unui element
DOM in JavaScript
• Document Object Model
• DOCUMENT -> reprezinta pagina web care are
doua reprezentari (souce code si randarea)
• OBJECT -> Componentele individuale (ex:
headline, lista)
• MODEL -> reprezinta pagini intr-un format
simplificat, adica a structura de gp arbore.
DOM in JavaScript
• Codul sursa HTML este transformat in noduri
<html>
<head>
<gtle>Core Javascript</gtle>
</head>
<body>
<h1> Curs 1</h1>
<p> Astazi invatam </p>
<ul id="list">
<li>Istoria limbajuli</li>
<li>Funcgi</li>
<li>DOM</li>
</ul>
</body>
</html>
DOM in JavaScript
• Codul sursa HTML html
<html>
<head>
<gtle>Core Javascript</gtle>
</head>
<body>
<h1> Curs 1</h1>
<ul id="list">
<li>Funcgi</li>
<li>DOM</li>
</ul>
</body>
</html>
DOM in JavaScript
<html>
<head>
<gtle>Core Javascript</gtle> head body
</head>
<body>
<h1> Curs 1</h1>
<ul id="list">
<li>Funcgi</li>
<li>DOM</li>
</ul>
</body>
</html>
DOM in JavaScript
<html>
<head>
</head>
<body>
<h1> Curs 1</h1>
title
<ul id="list">
<li>Funcgi</li>
<li>DOM</li>
</ul>
</body>
</html>
DOM in JavaScript
<html>
<head>
</head>
<body>
<h1> Curs 1</h1>
title h1 p ul
<ul id="list">
<li>Funcgi</li>
<li>DOM</li>
</ul>
</body>
</html>
DOM in JavaScript
<html>
<head>
<gtle>Javascript</gtle> head body
</head>
<body>
<h1> Curs 1</h1>
title h1 ul p
<ul id="list">
<li>Funcgi</li> li li li
<li>DOM</li>
</ul>
</body>
</html>
Variabila document
• Variabila document este create de catre Browser si
reprezinta nodul root al documentului html/ o
instanta a DOM-ului
Variabila document
• Variabila document este create de catre Browser si
reprezinta nodul root al documentului html/ o instanta
a DOM-ului
• O folosim pentru a altera structura DOM-ului
• Create
• Read
• Update
• Delete
Variabila document
• Metode de a indengfica elemente/nod-uri in DOM
• document.getElementById()
• Intoarce un element al cărui id îl punem ca
argument.
• Id-ul trebuie sa fie unic
Variabila document
• Intoarce un element al cărui id îl punem ca argument.
• Id-ul trebuie sa fie unic
<p id="unic">Acesta este id-ul</p>
<script>
var unic = document.getElementById("unic");
unic.innerHTML = "I am green!";
</script>
Variabila document
• document.getElementsByClassName()
Variabila document
• O lista de elemente in fct de numele
unei clase (atributul class)
Variabila document
<p class="ClassName">Acesta este un p</p>
Variabila document
<p class="ClassName">Acesta este un alt p</p>
Variabila document
<p class="ClassName">Acesta este un alt p</p>
<script>
var list = document.getElementsByClassName(“ClassName");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
</script>
Variabila document
• document.getElementsByName()
Variabila document
• document.getElementsByTagName()
• O lista de elemente in fct de numele
tagului
Variabila document
• document.getElementsByTagName()
var divs =
document.getElementsByTagName(“div”);
Variabila document
• Spre deosebire de metoda getElementById,
metodele getElementsBy... se pot executa şi asupra
elementului, nu doar pe document.
Variabila document
• Spre deosebire de metoda getElementById,
metodele getElementsBy... se pot executa şi asupra
elementului, nu doar pe document.
Exercitiul 1
Aveg urmatoarea pagina:
<script> 
var language = 'en_us';
var locales = {
'en_us':{
hello:"Hello",
welcome:"Welcome to our page",
how_are_you:"How are you today?"

},
'ro':{ 
hello:“Bună ziua,
welcome:“Bine aţi venit pe pagina noastră,
how_are_you:“Ce mai faceţi astăzi" }
} 
</script>
<div style="font-size:2em; font-weight:bold;">hello</div> <
div style="font-size:1.5em; font-weight:bold;">welcome</div>
<div>how_are_you</div>
Exercitiul 1
Creaţi un program JavaScript care sa inlocuiască
conţinutului elementelor div.
În locul acestuia trebuie să introduceți o frază
adecvata, localizată, din lista de fraze reprezentată
cu ajutorul obiectului locales.
Exercitiul 1
<div style="font-size:2em; font-weight:bold;">hello</div>
<div style="font-size:1.5em; font-weight:bold;">welcome</div>
· Toate elementele cu o anumită denumire se pot obţine cu

ajutorul metodei getElementsByTagName
· var divElements = document.getElementsByTagName(‘div’)
· Conţinutul elementului se schimbă sau preia cu proprietatea
innerHTML
· var element.innerHTML = …
Exercitiul 1
· Toate elementele cu o anumită denumire se pot obţine cu ajutorul

metodei getElementsByTagName
var divElements = document.getElementsByTagName(‘div’)
· Conţinutul elementului se schimbă sau preia cu proprietatea
innerHTML
for (let i=0;i<divElements.length;i++){
divElements[i].innerHTML = ….
}
Rezolvare - Ex 1
var locales = { Localizat?
'en_us':{ var language = ‘en_us’
hello:"Hello",
},
'ro_ro':{
welcome:“Bine aţi venit pe pagina
noastră,
how_are_you:“Ce mai faceţi astăzi"
}
}
Rezolvare - Ex 1
var locales = { Localizat?
'en_us':{ var language = ‘ro’
hello:"Hello",
},
'sr_rs':{
noastră,
}
}
Rezolvare - Ex 1
var language = ‘en_us’ var greeting =
var locales = {
'en_us':{
locales[language]
hello:"Hello",
},
'ro_ro':{
noastră,
}
}
Rezolvare - Ex 1
var locales = {
'en_us':{
locales[language][hello]
hello: "Hello",
},
'ro_ro':{
noastră,
}
}
Rezolvare - Ex 1
var locales = {
'en_us':{
locales[language][welcome]
hello:"Hello",
},
'ro_ro':{
noastră,
}
}
Rezolvare - Ex 1
var locales = {
'en_us':{
locales[language][…]
hello:"Hello",
},
'ro_ro':{
noastră,
}
}
Rezolvare - Ex 1
for (let i=0;i<divElements.length; i++){
var greeting = locales[language][…]
divElements[i].innerHTML = greeting
}
Rezolvare - Ex 1
for (let i=0;i<divElements.length; i++){
var greeting = locales[language]
[divElements[i].innerHTML]
divElements[i].innerHTML = greeting
}
Rezolvare - Ex 1
· Toate elementele cu o anumită denumire se pot obţine cu ajutorul

metodei getElementsByTagName
· Conţinutul elementului se schimbă sau preia cu proprietatea innerHTML
for (let i=0;i<divElements.length;i++){
divElements[i].innerHTML = locales[language][divElements[i].innerHTML];
}
Exercițiul 2
• Construiți o pagina web cu todo list
Exercitiul 2 - extensie
Creag o lista cumparaturi: un input cu un buton cu
gtlul “Adauga” si o lista neordonata:
1. Sa se introduca intr-o lista in aceeasi pagina
toate cuvintele introduse.
2. Verificag ca inputul sa congna cel pugn 3
caractere. In caz contrar, afisag-i uglizatorului o
alerta in care sa ii spuneg ce sa faca.

Web Applications Building in Python: Silviu Ojog

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Applications Building in Python: Silviu Ojog

Încărcat de

Drepturi de autor:

Formate disponibile

Web Applications Building in Python

CLIENT SERVER CLIENT

*in cadrul cursul clientul va fi web

Content Markup Cascading Style Sheets

Content Markup Cascading Style Sheets

atunci (acum este confuz)

atunci (acum este confuz)

atunci (acum este confuz)

• Nu putem crea aplicatii desktop standalone ca in Java

• JS este un limbaj creat pentru a rula pe partea de

• Toate au la baza conceptele invatate in acest curs

• JS este un limbaj creat pentru a rula pe partea de

HTTP REQUEST SERVER

• JS este un limbaj creat pentru a rula pe partea de

welcome:"Welcome to our page",

how_are_you:"How are you today?"

welcome:“Bine aţi venit pe pagina noastră,

how_are_you:“Ce mai faceţi astăzi" }

· Toate elementele cu o anumită denumire se pot obţine cu

· Toate elementele cu o anumită denumire se pot obţine cu ajutorul

· Toate elementele cu o anumită denumire se pot obţine cu ajutorul

S-ar putea să vă placă și