Ez a fajta asszociatív tömb nem létezik JS-ben, a legközelebbi az egy objektum, aminek string paraméterei vannak (ahogy át is jön json-ban). Ez nem tömbbe kell beleerőszakolni, hanem meg kell tartani objektumnak és stingként kell hivatkozni az elemekre:
const json = '{"0":0, "5":0}';
const obj = JSON.parse(json);
console.log(obj[0]);
console.log(obj[5]);
console.log(obj);
obj[8] = 1
console.log(JSON.stringify(obj));
> 0
> 0
> Object { 0: 0, 5: 0 }
> "{"0":0,"5":0,"8":1}"
A számból álló kulcsokat tényleg nem szereti JS, mert az objektum kulcsai csak stringek lehetnek.

[ Szerkesztve ]

JOGI NYILATKOZAT: A bejegyzéseim és hozzászólásaim a személyes véleményemet tükrözik; ezek nem tekinthetők a munkáltatóm hivatalos állásfoglalásának...

Jó lesz, köszönöm

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Sziasztok!

Kezdő vagyok JS-ben, és a következő problémára keresem a megoldást már egy ideje:
a célom, hogy létrehozzak egy olyan tömböt, amelynek van n db eleme, és mindegyikhez tartozik 2 property, de úgy, hogy mindkét propertryje egy-egy tömb. Továbbá, a létrehozásakor teljesen üres, csak a struktúrája jön létr, később töltöm majd fel.
Nagyjából így: var objArray = {prop1[], prop2[]}[]

Természetesen, ez szintaktikailag nem jó. Szerintetek hogyan lehetne ezt szépen megvalósítani?

JS-ben ezt neked nem kell külön megadnod. Csinálsz egy sima tömböt, (var array = []) aztán szépen pusholhatod bele az objecteket (jelen esetben {prop1: "sth", prop2: "sth"}

Ilyesmire gondolsz?

var objArray = [
    {
      prop1: [],
      prop2: []
    }
];

[ Szerkesztve ]

Rally against apathy draws small crowd

Működik , szuper! Pont erre gondoltam, a push-olás is megy. Köszönöm mindkettőtöknek a gyors segítséget.

Ez nem azt csinálja, amit a kérdező gondol: itt létrehozol benne egy üres objectet, a megadott paraméterekkel, nem pedig a formátumát adod meg. Ez egyrészt jelenthet gondot amikor iterálni akarsz rajta (lesz egy üres, semmire nem jó object) másrészt pont azt a hatást nem fogja elérni, amit a kérdező szeretett volna (nem lesz "kényszerítve", hogy minden object így nézzen ki)

Csak kiigazítottam a szintaktikát. Javascriptben változónak nyilván nem tudsz adni típust.

Rally against apathy draws small crowd

Jó, de ezt a kérdező nem biztos, hogy tudja

Sziasztok!

Az lenne a kérdésem, hogy ha a Weboldalamon használnék Window localStorage-t, az Cookie-nek számítana? Úgy értem, hogy létrejönne-e Cookie a felhasználó gépén?

Előre is köszönöm a választ.

[ Szerkesztve ]

But who is watching the guardians?

Szia!

Szerintem nem. Ahogy én állok a saját lapommal, egyelőre még csak a local storage-ot használom, cookie-kig még nem jutottam. És a böngészők is külön kezelik őket:

Szia!

A kettő két különböző dolog. Ergo a localStorage nyilván nem fog Cookie-t létrehozni, ahogy a Cookie se hoz létre localStorage-ot
Légyszi olvass utánuk, most még arra is lusta vagyok, hogy egy Let me google it for you linket ide dobjak

Én kérek elnézést!

Köszönöm a válaszokat. Utána olvastam, csak zavaros volt kicsit számomra, azért is kérdeztem.

But who is watching the guardians?

Nem, a ketto ket kulon dolog ket kulon dologra is valo.

Nem cookie-t hoz létre, hanem adat file-t. Korlátos mérete van, szóval csak valami személyi cucc fér bele. 5 megára számíthatsz, többre nem. Adatkezelési tájékoztatót írni róla alkalmasint jogi rémálom, ha oda személyes adatokat pakolnál. Rendesen csúnyán fog kinézni adatbiztonsági kockázatként.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Sziasztok!

Továbra is nagyon kezdő vagyok (vagyis újrakezdő, több mint 10 éve tanultam kezdő szinten a nyelvet), ezért lehet, hogy hülye kérdés: adott egy GitHubos JS függvénykönyvtár, amit használni szeretnék teljesen offline módon, magyarul le akarom tölteni. Konkrétan erről van szó: https://www.skypack.dev/view/maplibre-gl
Itt egy példa alkalmazás: https://codepen.io/klokan/pen/WNoZRyx

Régebben mindig úgy csináltam, hogy normálisan hivatkoztam bármely JS függvénykönyvtárra a HTML-ből így, aztán ha kellett, letöltöttem a webszerveremre:
  <script src='valami.js'></script>
Ez a mostanában népszerű import-os megoldás számomra teljesen új. A célom az lenne, hogy egyben letöltsem az egészet a webszerveremre, és behivatkozzam a klasszikus módon. Azonban itt nem tálok ilyen lehetőséget, mert oké, hogy fenn van minden az src könyvtárban, de nem lehet ezt a hagyományos módon, egyben elérni? Tehát "ömlesztve" egy fájlban sehol nem találom. Megjegyzem, ezt más egyéb open-source JS-nél is tapasztalom mostanában.

import *-gal elvileg hozzáférek az egészhez, de nekem "normálisan" kellene, egy fájlba kiírni.

Tudtok esetleg erre valami jól bevált megoldást?

Amit hirtelen találtam arról az importról, hogy a browser fér hozzá az anyaghoz, és előkészíti neked böngésző kiegészítésként az erőforrásait. Magát a file-t te nem kapod meg. Gyaníthatóan licencelési kérdés van mögötte. Tényleg vicces, hogy képesek voltak ilyesmit is fejleszteni.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Sziasztok!
SSL telepítés óta nem jön be az oldalam, csak az én gépemen firefox, chrome, opera böngészővel. Explorerrel behozza. Az én gépemen kívül mindenkinek működik az oldal.

A firefox konzol ezt írja
[Exception... "Favicon at "https://"WEBOLDALAM.hu"/favicon.ico" failed to load: Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 253" data: no]

Tud valaki segíteni, hogy ne kelljen újra raknom a windowst?

Böngésző cache clear megvolt?

Nyilt forráskódú a cucc, tehát nem hiszem, hogy licenszelési oka van. Mindenesetre bosszantó a dolog, hogy nem tudom offline használni...

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="maplibre-gl.css" />
    <style>
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="module">
        import { Map, GeolocateControl } from './maplibre-gl.js';
        const mapTilerKey = "get_your_own_OpIi9ZULNHzrESv6T2vL";  // https://cloud.maptiler.com/account/keys/
        const map = new Map({
            container: "map",
            style: `https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerKey}`,
            center: [1, 15],
            zoom: 3
        });
        map.addControl(
            new GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true
                }
            })
        );
    </script>
  </body>
</html>

Innen lehúzhatod a css-t: [link]
Ez meg a js: [link]

Nem egyszerű megoldás, de ez a lib eléggé friss még. Majd alakul.

[ Szerkesztve ]

Rally against apathy draws small crowd

Igen, már megvolt az is, semmi.
Közben megnéztem lányom gépén ami fent van az emeleten és wifin csatlakozik a routerhez, ugyan ez a jelenség. Pedig már az összes lan eszközt újraindítottam.

ES6 module syntax-al kell megírnod a javascriptedet, és valamilyen csomagolóval compile-olni a kimenet javascriptet a cégén. PL. webpack erre a legelterjedtebb.
Elsőre zavarónak hathat, hogy compile-olni kell a javascriptet, de ha belejössz, akkor már tök természetes lesz, miközben van egy csomó előnye ennek a megközelítésnek.

Én kérek elnézést!

Emberek, el lehet valahogy érni hogy ez a script működjön? Csak így lehet, hogy a script a detektálni kívánt elem előtt van. Vagy egyetleg valami más megoldás erre? A sorrendnek muszály ennek lennie.

<script>
document.getElementById("box").innerHTML ="Hello";
</script>

<div id="box" style="display:inline-block;width:90%;height:50px;text-align:center;color:black;">
</div>

Tökéletes, köszönöm szépen! Pont erre a JS-re volt szükségem.

Elso lehetoseg, `defer` tag https://betterprogramming.pub/improve-page-load-performance-with-these-different-script-loading-techniques-b0d912eae7b1

Masodik lehetoseg, window load event https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Azt a scriptet függvénybe teszed bele. A függvényre a window.onload eventről hívsz rá.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Ha már feljött a window load event témája:

Az oldalamon infinite scroll-lal töltöm be a tartalmat. Egyetlen egy oldal, ahol görgetéssel jön az újabb és újabb tartalom.
Amikor betölt az oldal, ott meg tudom jeleníteni a töltő ikont addig, amíg az oldal teljesen be nem tölt.
document.readyState === "complete" vagy akár a window.onload is. (A logból és a leírásból látom, hogy a window.onload adja a pontosabb állapotot, de ez mindegy is most.)

document.onreadystatechange = function() { 
    if (document.readyState !== "complete") { 
        spinnerShowHideToggle("spinnerShow");
    } else { 
        spinnerShowHideToggle("spinnerHide");
    } 
};

A gondom az, hogy mivel ugye az oldal maga már betöltött, ezért ahogy folyamatosan fűzöm hozzá az újabb és újabb tartalmakat, az már nem számít bele az oldal betöltésébe, így a fentieket egyáltalán nem triggereli.

Hogyan tudom az így pluszban hozzá fűzött tartalmaknál is megjeleníteni a töltő ikont addig, amíg az elemekhez tartozó képeket be nem tölti teljesen?

Van egy sablon html feed_item, azt tölti fel a szükséges adatokkal minden új elemnél újra és újra. Ezeket az img tageket kellene valahogy figyelnem? Vagy mi ennek a jó módja?
Vagy van valami event, amit lehetne figyelni?

Köszi!

[ Szerkesztve ]

Amikor lekéred az új adatot, amivel bővíted az oldalt, akkor megjeleníted a spinnert. Amikor betöltött az adat, akkor berakod a DOM-ba, ahova annak kerülnie kell.

Miután ez megvan, akkor ahova került az új tartalom, megnézed a tartalomban van-e új img, ezeket kigyűjtöd.

Itt lehet akár két lehetőség is
- Megszámolod mennyi van, majd feliratkozol a képek load és error eseményeire és amikor bármelyik bekövetkezik, akkor kivonsz egyet a számlálóból, ha elérted a nullát, akkor elrejted a spinnert.

- Vagy a képeket beburkolod egy-egy Promise-ba a resolve/reject a kép load és error eseményeire következik be. Bevárod az összes Promise-t és elrejted a spinnert.

ha van egy images nevű tömböd, a képekkel, abból így lesz egy promise lista:
const imagePromises = images.map(image =>
new Promise((resolve, reject) => {
        image.onload = () => {
        console.debug('image loaded', image);
          resolve(image);
        };
        image.onerror = () => {
        console.error('image not loaded', image);
          reject(image);
        };
      }));

“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude

Köszönöm az ötletet és a részletes választ!

Hello,
Pontosan ugyanazt beÍrtam amit a srác 3:12-nél neki át vált pirosra a szöveg, nekem nem.
Miért?
Karakterről karakterre megnéztem, pont ugyanaz a html és a js is. /css üres neki is, később látszik majd/
Chrome alatt és Edge alatt is néztem, nekem fekete marad.
console fül alatt nincs hiba Chrome alatt
Edge alatt hibakód - nem tudja betölteni a favicont - de nincs is rá hivatkozva, tehát nem értem miért dobja ezt a hibát.
/nem tudom hogy tudok ide kódot beszúrni ezért csak írni tudom, hogy tuti minden ugyanaz mint neki/

[ Szerkesztve ]

Van a HTML-edben .title osztályú elem?

Pontosan úgy ahogy neki /igen/
.title, nincs, mivel pont jelöli, hogy osztály title pedig a nevét, tehát "title" osztály van
Minden úgy van mint neki.

Megvan, a visual studio code rossz helyre dobta a script file hivatkozás linket
automatizáció....hozta a hibát
<script>"ide tette"</script>
<script "nem ide"></script>
Köszönöm a segítséget

Hello,

Kérlek segítsetek már. Nagyon szeretném megtanulni js programozást.
HTML, CSS, JS nagyon alapok meg vannak.
JS: adattipusok, operátorok, tömb, objektum, ciklus, elágazás, függvény...ezek meg vannak
értem is mind.
De mikor van egy feladat nem tudom alkalmazni.
Főleg ott bukok el, hogy mi az "action" , ott épp melyiket kell használnom, vagy hogy magát az "action"-t hogy érem el.
pl csinálok egy gombot, és a besz urt youtube video play/pause hozzá rendelem
Nem megoldani akarom ezt, ez csak példa.
Itt pl nem tudom, hogy a play/pause "action" az honnan lesz, vagy hol találok rá.
Rengeteg videót néztem, magán órát is vettem, de nem értem ezek honnan jönnek, hogy találom meg.
Ok, értem, hogy gyakorlás gyakorlás és még több gyakorlás, de valami nincs meg valami hiányzik, egy egyeszerű kis programot se tudok készíteni /nem a youtube, sokkal sokkal egyszerőbbet se, pl egy gomb dob egy random számot ami nem lehet ugyanaz mint az előző/ és nulla a pozitív élményem, nem tudom hol, vagy mit keressek, nem tudom merre, azt se tudom mit kellene keresnem.
Mivel semmi pozitív élményem ezért csak felidegesít az egész, hogy toporgok, semerre se jutok, falak mindenhol.
Könyvből nem tudok tanulni.
Angolommal nincs gond.
Volna valami js oktató videó teljesen idiótáknak?
Szerintem az egész elképzelésem hibás lehet, ezt tudom elképzelni, hogy ezért ütközöm falba folyamatosan. Vagy nem tudom.
Teljesen tanácstalan vagyok.

Most a kedvedért rákerestem a javascript code challanges kulcsszavakra.
Ez az oldal egész jópofának tűnik: Edabit
De van kismillió másik hasonszőrű.

Én kérek elnézést!

Ha ezek az alapok megvannak, jöhetnek az olyan varázsszavak, mint DOM, event loop, Promise, event bubbling (eventek, ez lesz a válasz a kérdésedre), closure. Amik a JS saját dolgai

Hogy ki hogyan tud / szeret tanulni, az embere válogatja. Éppen a programozást illetően az oktató videók talán nem a legjobbak kezdetben. Sokkal inkább ilyesmi könyvekkel érdemes elkezdeni. Hogy e-book formájában meg tudod-e szerezni valahonnét / valahogyan, az rajtad áll. Általában beszerezhető valami. Leír alapokat, aztán mutat rá gyakorlatot, mire és hogyan jó.

A "mindent megtanulni" - nem, az úgy nem szokott működni. Valamit megtanulni, úgy már esélyesebb. Válassz egy darab elemi konkrétumot, mire akarod használni. És azt csináld meg. Aztán csinálod az egyik példát a másik után. Ha 5 év múlva még mindig csinálod, valószínűleg addigra már megtanultál tanulni. (Vagy réges-régen feladtad.)

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

Először is köszönöm szépen mindenkinek.

Végre tudom mit keressek, találtam is, és így legalább tudom merre tovább :)

A weboldalt is elkezdtem, és tetszik. Van nagyon könnyű, és ad egy kis pozitív visszacsatolást, hogy azokat legalább meg tudom csinálni. Ez nagyon kellett.

Nem igazán szeretnék sok időt elvesztegetni annak a kezelésére, hogy amíg nem töltenek be a képek a feed item-eknél, addig is látszódjon "valami".

Már megkapták a betöltendő kép méretét, így a helyük "le van foglalva".
Arra gondoltam először, betöltök valami pörgő-forgó ikont, de aztán azt bénának találtam.
Aztán jött az, hogy akkor megcsinálom rendesen egy loading skeleton-nal. Ez el is készült: https://codepen.io/pasztorlaszlo/pen/VwmBKpm

Viszont sajnos nem úgy kezdtem megcsinálni az oldal felépítését, hogy ezt könnyen be tudnám építeni, így arra gondoltam, leegyszerűsítem a dolgot, és ezt az (ill. ehhez hasonló) animációt simán beállítom a feed item template-jébe háttérnek. Amíg töltődik a kép, megy az animáció, nem "üresen" vár a user, látja, hogy oda töltődni fog valami, aztán betöltődik a kép és kész.

A kérdésem az lenne, hogy "okosak" annyira a böngészők, hogy ha "rá töltődik" a háttére a kép, (azt nyilván teljesen eltakarva), akkor az animációt leállítják, vagy ez a végtelenségig fut a háttérben is tovább, pörgetve a cpu-t, és kezelnem kell valahogy?

Köszi!

fut a háttérben is tovább. Bár lehet, hogy vannak már annyira értelmesek a böngészők, hogy a nem látható elemek animációira ne pazaroljanak erőforrást.

Jól megválaszoltam

Én kérek elnézést!

Szerintem a legegyszerűbb ha kipróbálod, így hirtelen nem találtam róla semmit, de nem hinném, hogy ok foglalkoznak ezzel

Ha jól látom leszeded a loading class-r róla betöltéskor, amihez kötve van az animáció, így szerintem nem fogja utána tovább az erőforrást használni.

Do the thing!

Az csak a skeleton loader-ben van úgy megcsinálva, viszont azt túl sok idő lett volna a mostani formátumra ráhúzni.

Végül arra jutottam, hogy a template-be beraktam az feed image-khez, hogy ha betöltött, távolítsa el a háttérért felelős osztályokat:
onload="removeLoadingBackground(this);"

function removeLoadingBackground(element){
    if (element.classList.contains("loading-bg")){
        element.classList.remove("loading-bg");
    }
    if (element.classList.contains("loading-logo")){
        element.classList.remove("loading-logo");
    }
    if (element.classList.contains("loading-img")){
        element.classList.remove("loading-img");
    }
}

Csak az a biztos tényleg, ha nem hagyom ott pörögni, ki tudja, melyik böngésző hogyan kezeli (vagy nem kezeli).

Nem a legszebb megoldás, ellenben működik.

Köszönöm a gyors választ amúgy mindenkinek.

[ Szerkesztve ]

A classList-nek van toggle metódusa, azzal nem kell if-eket írnod.

Do the thing!

Korábban (mintha akkora nagy JS-múlttal rendelkeznék ) már voltak gondjaim vele, nem mindig működött (megfelelően), így próbálom kerülni a használatát.

Megkérdezhetem miért találtad "bénának" a forgót?

Aktuálisan szintén van loading indicator problémám, de én nem bénának találtam, hanem kompatibilitás kérdések miatt húzom a számat.

Amit egyenlőre én csináltam, az egy még sokkal bénább dolog. A teljes div-et egy másik div-vel takarom le (z indexet írok át, és a másiknak fölé rakom). A takaró div kapott fehér hátteret, így nem látszik, ami mögötte van. És egyenlőre placeholder-ként egy darab szöveg van a takaró div-en "please wait". Na ez aztán a tényleg béna Viszont 100% böngésző kompatibilis.

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។

[link]

Az én megoldásom volt csak a béna, több időt kellett volna annak a rendberakásával töltenem, mint ezt így megcsinálni, ahogy végül sikerült.