Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Incalzire in pardoseala etapizata

Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii
 Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...
 Rezultat RMN

Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor
 Discuții despre TVR Sport HD.

Cost abonament clinica privata

Tremura toata, dar nu de la ro...

Renault Android
 

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: 590
  • Î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: 625
  • Î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: 30,194
  • Î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: 590
  • Î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: 30,194
  • Î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: 590
  • Î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: 30,194
  • Înscris: 24.02.2007
Iti arata toate datele primite.

#9
anz

anz

    Member

  • Grup: Members
  • Posts: 590
  • Î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: 590
  • Î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 cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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