Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Enel / Regularizare si calcul din...

Dimensiune rost profil trecere

Se cauta femeie cu sau fara famil...
 rusa vs ruseasca

Serena Williams se retrage din te...

Este informatie publica/accesibil...

French Drain+ Turnat Alei casa
 Instalatie electrica apartament

Vremurile imperiilor

amenda ISU

Magazine macbook pro
 Fața nevazuta a vestului civ...

The Sandman (2022- )

Curatare jante aluminiu bicicleta

Plafoniera led cu backlight
 

Problema de intelegere a CSS si JS la parsarea unei pagini a site-ului Devjob.ro ?

- - - - -
  • Please log in to reply
11 replies to this topic

#1
anz

anz

    Member

  • Grup: Members
  • Posts: 541
  • Înscris: 16.02.2013
Salutare.
Am de realizat pentru facultate un parser pentru site-ul Devjob.ro.
Am salvat pagina principala, am deschis fisierul HTML in NetBeans pentru a vedea structura si a-l putea procesa, etc.
Am intampinat insa urmatoarea problema. Asa cum se poate vedea, pe site sunt peste 100 anunturi de joburi, puse intr-un panou scroll-abil.
M-am uitat in fisierul HTML, aceste anunturi sunt reprezentate printr-un element <ul>, care are elemente <li> corespunzatoare fiecarui anunt de job. Problema este in acel <ul> exista doar 16 elemente <li> de job-uri, apoi elementul se incheie cu tag-ul de sfarsit.
Dupa tagul de sfarsit </ul> apare urmatorul element:
<div class="resize-triggers">
    <div class="expand-trigger">
    <div style="width: 769px; height: 518px;"></div>   
    </div>
    <div class="contract-trigger"></div>   
</div>
, care banuiesc ca are rolul de a adauga , dipa cele 16 elemente, pe urmatoarele 16, s.a.m.d. pana cand se ajunge la cele 160, atatea cate se pot vedea pe pagina din browser.
Acesta este codul CSS care defineste clasele acestui <div>, adica "resize-triggers"

<style id="detectElementResize" type="text/css">@keyframes resizeanim { from { opacity: 0; } to { opacity: 0; } }
    .resize-triggers { animation: 1ms resizeanim; visibility: hidden; opacity: 0; }
    .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; }
    .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }
</style>
<script src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/wonderpush-loader.min.js.download">
</script>

si alta portiune de cod imediat deasupra acestuia:
<style type="text/css">
</style>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/0.37f1efd0.chunk.js.download">
</script>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/2.b30e1540.chunk.js.download">
</script>
<link rel="stylesheet" type="text/css" href="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/4.cdba37f8.chunk.css">
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/4.3abc06e0.chunk.js.download">
</script>
<link rel="stylesheet" type="text/css" href="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/1.e1fde4ea.chunk.css">
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/1.c91823e4.chunk.js.download">
</script>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/9.60c69195.chunk.js.download">
</script>

Intrebarea mea este : stie cineva, care a lucrat cu CSS, Javascript, sau ce mai este aici, ce Doamne-iarta-ma se petrece in pagina aceasta de site? Cum se pun automat celelalte anunturi in acel element <ul> al fisierului, care initial are doar 16, iar pe pagina  randata de browser apar 160 anunturi?
Multumesc celui care se oboseste sa citeasca, si mai ales celui care stie sa raspunda!

#2
GaBogdan

GaBogdan

    Member

  • Grup: Members
  • Posts: 620
  • Înscris: 02.09.2020
Daca nu vezi ce e in js, nu pot zice clar. Si fara suparare, momentan nici nu am timp sa ma uit peste fisiere :D
O solutie pe care o propun mereu si de ft multe ori merge ( depinde si de caz ), pune scriptul la sfarsitul body-ului.

Nu ai conflict de scripturi?
debugger; nu te ajuta?

#3
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,033
  • Înscris: 24.02.2007
Apar doar x elemente <li> fiindca doar atatea vezi pe ecran in acelasi timp. E o optimizare.

Pagina contine multa logica client side (se schimba la greu DOMul din javascript), probabil folosind https://reactjs.org/

Edited by dani.user, 27 January 2022 - 11:39.


#4
coniac

coniac

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 17.12.2019
E in React

Folosesti Network tab

https://devjob.ro/api/jobsLight

#5
anz

anz

    Member

  • Grup: Members
  • Posts: 541
  • Înscris: 16.02.2013

View Postdani.user, on 27 ianuarie 2022 - 11:39, said:

Apar doar x elemente <li> fiindca doar atatea vezi pe ecran in acelasi timp. E o optimizare.

Pagina contine multa logica client side (se schimba la greu DOMul din javascript), probabil folosind https://reactjs.org/
Le ai cumva cu React sau cu Javascript? Te-ai putea uita si intelege ca sa-mi explici si mie cum anume se incarca automat si restul de anunturi in pagina? Eu nu am lucrat cu asemenea tehnologii pana acum. Stiu Javascript insa de pe timpul cand a aparut prima data, acum au aparut tot felul de tehnici care mai de care...

View Postconiac, on 27 ianuarie 2022 - 12:27, said:

E in React

Folosesti Network tab

https://devjob.ro/api/jobsLight
Ce inseamna acel NetworkTab...? Nu cunosc tehnologia React ce-i drept, nu am avut ocazia sa lucrez in ea pana acum... stiu Javascript dar din acela vechi, am fol. pt manipularea DOM HTML, insa cu mai mult nu ma pot lauda...

Si fisierul acela care mi l-ai dat, jobsLight, ce mai doreste sa fie ...?

#6
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,033
  • Înscris: 24.02.2007
Browserul iti ofera o suita mare de unelte apasand F12. Vezi acolo tot ce misca.

#7
anz

anz

    Member

  • Grup: Members
  • Posts: 541
  • Înscris: 16.02.2013
Pai si cu ce ma ajuta acel Network Tab din MS Edge...? Ce ar trebui sa fac in el, sa selectez vreo optiune ceva de acolo? Si daca da care, si cu ce  scop ...?

#8
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,033
  • Înscris: 24.02.2007
Iti arata toate datele primite.

#9
anz

anz

    Member

  • Grup: Members
  • Posts: 541
  • Înscris: 16.02.2013
INca o data, nu le am cu React-ul, nu cunosc tehnologia.
Din cate am observat, fisierul pe care l-a specificat colegul Coniac aici: https://devjob.ro/api/jobsLight
este JSON-ul pe care il foloseste pagina Devjob.ro,  este asa sau nu?
Si as putea sa iau datele de acolo, nu?

#10
coniac

coniac

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 17.12.2019
Pai ai inteles
Parsezi JSON-u' si ai rezolvat problema , sper
Nu ai specificat daca e o tema de la facultate sau daca e un task de la sef
Ca daca e tema de la profesor, mai bine intrebi care sunt cerintele exacte
Ca uitatul pe Network tab is kind of cheating
Poate vrea sa folosesti Selenium WebDriver

#11
anz

anz

    Member

  • Grup: Members
  • Posts: 541
  • Înscris: 16.02.2013

View Postconiac, on 30 ianuarie 2022 - 14:39, said:

Pai ai inteles
Parsezi JSON-u' si ai rezolvat problema , sper
Nu ai specificat daca e o tema de la facultate sau daca e un task de la sef
Ca daca e tema de la profesor, mai bine intrebi care sunt cerintele exacte
Ca uitatul pe Network tab is kind of cheating
Poate vrea sa folosesti Selenium WebDriver
Dar ce importanta are daca este pt facultate sau e un task de la serviciu...? Ca eu nu vad nicio diferenta, indiferent care ar fi...
Inca ceva, tu cum ai obtinut JSON-ul acela? De acolo din Network Tab, sau cum anume l-ai obtinut? Ca sa stiu cum sa-l obtin si eu in aplicatia mea Spring

#12
coniac

coniac

    Member

  • Grup: Members
  • Posts: 497
  • Înscris: 17.12.2019
Importanta e data de context: daca tema pentru acasa are ca obiect HTML Parsing, s-ar putea sa conteze modalitatea in care ajungi la rezultat
Daca tot ce conteaza e sa obtii datele, probabil nu importa modalitatea

Te duci pe pagina
Apesi F12
Selectezi Network Tab
Apesi butonul Refresh sau tasta F5
Iei la puricat toate requesturile aka documente
TIP poti sa filtrezi in functie de content-type , de exemplu json

Anunturi

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate