Autor Zpráva
Anonymní
Profil *
Čau, zkouším různé blbinky v javascriptové knihovně jQuery a občas se pozastavím nad otázkou jestli je lepší dělat v jQuery (js knihovně) nebo v "čistém(bez jQuery fw)" javascriptu. Díky za každý názor.
Witiko
Profil
Anonymní:
jQuery je převážně pouze nadstavbový toolkit na snadnou manipulaci s DOM (Objektový Model Dokumentu) a zacházení s Ajaxem založený na silně imperativním modelu zápisu, který se často pomalu ani nedá nazvat programováním. Zbytek bude stejně třeba napsat v "čistém" javascriptu. :-)
Tedy jde samozřejmě o to, čeho se snažíš docílit. Skutečnost je taková, že u "hloupých" webových stránek (čti ne RIA - Rich Internet Application) je povětšinou manipulace s DOMem to jediné, na co se javascript využívá.
Anonymní
Profil *
No, jako celkově asi dělám pouze ty "hloupé" stránky. jQuery jsem si vybral z toho důvodu, že je jednodušší a jQuery zápis se mi zdá přehlednější (asi proto, že je jednodušší).
joe
Profil
Zápis s jQuery není zase tak o moc jednodušší, spíš kratší. A jinak použít ho můžeš, klidně ho můžeš dávat do stránky z nějakých serverů - například od Googlu.
Na jednodušší věci je ale zbytečný.
Anonymní
Profil *
joe:
A jinak použít ho můžeš, klidně ho můžeš dávat do stránky z nějakých serverů - například od Googlu.
Tohle moc nechápu jak to myslíš.
_es
Profil
Anonymní:
jestli je lepší dělat v jQuery
„Dělat v jQuery“ znamená programovať v JavaScripte s jednou dodefinovanou funkciou navyše. Teda aj na dobré výsledky s pomocou jQuery potrebuješ dobre ovládať JavaScript - hlavne spoločné jadro - ECMA script. Viď aj stručne tu.
joe
Profil
Anonymní:
Měl jsem na mysli CDN servery, více se můžeš dočíst třeba v tomto článku.
Witiko
Profil
joe:
Ve většině případů je mnohem jednodušší, protože jQuery poskytuje abstraktizační vrstvu a uživatel se tedy nemusí starat o rozdíly mezi prohlížeči při psaní kódu.

_es:
na dobré výsledky s pomocou jQuery potrebuješ dobre ovládať JavaScript
Mno, pokud půjdeme do extrémů, tak nemusí. Stačí mu naučit se "syntax jQuery" - tedy omezený výřez znalostí javascriptu bez znalosti kontextu umožňující psaní kódu - a jQuery moduly. Jde o cíleně účelový postup, ale každý nemá zájem umět programovat, takže je to asi věcí volby. Pokud někdo rád javascript jako takový, doporučuji framework jako MooTools místo toolkitu.
joe
Profil
Witiko:
Ano, ale myslel jsem na takové ty základní věci, které fungují všude stejně... v nich zase tolik odlišností není.
Anonymní
Profil *
Jjoe:
Sice se mi zdá, že to moc není k tématu, ale takhle to používám.

_es:
Vím, že to je "nádstavba" na js. Takže si můžu propojit "čisté" js s jQuery a bude to programátorky "čisté"?
_es
Profil
Witiko:
omezený výřez znalostí javascriptu bez znalosti kontextu umožňující psaní kódu
Je som písal o dobrých výsledkoch, nie o niečom „nejako fungujúcom“, keď „programátor“ ani poriadne nechápe, ako skript funguje.

Anonymní:
Vím, že to je "nádstavba" na js.
Syntakticky je to naozaj len jedna funkcia/objekt. Teda buď tú funkciu v nejakom príkaze použiješ - ak sa ti to hodí, alebo ju nepoužiješ.
Nie je žiadny „čistý JS“ verzus jQuery. Ak si definujem funkciu f a v inej časti kódu ju použijem, tak už to nebude „čistý JS“?
Niečo ako „syntax jQuery“ je nezmysel.
Witiko
Profil
Anonymní:
Jak říká _es, je to zjednodušeně řečeno jen jedna funkce. Takže až na spouštěný objem kódu, který bude pravděpodobně nevyužit, je to nejspíš "programátorsky čisté".

_es
Povšimni si, že používám slovíčko "uživatel", ne programátor. :-)
Anonymní
Profil *
Tak se tedy omlouvám, že to spatně říkám. Takže když budu dělat v jQuery tak nejsem programátor? Už jsem v tom trošku zamotaný. Co mi tedy doporučujete (co používáte).
Witiko
Profil
Anonymní:
Nešťastná volba slov. Člověk využívající jQuery může být programátor, pouze říkám, že ani nemusí být s tím, jak je jQuery jednoduché. :-) Já osobně využívám vlastní funkce, případně části řešení konkrétních problémů dostupných na internetu. Žádný ucelený framework momentálně nepotřebuji ani nejsem nikým nucen používat.
_es
Profil
Witiko:
Člověk využívající jQuery může být programátor, pouze říkám, že ani nemusí být s tím, jak je jQuery jednoduché.
Programátor - vytvára kód programu.
Teda ak niekto vytvára kód JS s jednou dodefinovanou funkciou, s názvom $, tak samozrejme je programátorom v JS.
Často to je programátor zmätený, lebo si myslí, že neprogramuje v JS ale „v Jquery“.
Otázka, či robiť v „čistom JS“ alebo „v jQuery“ je nezmyselná.
Otázka je, či pri programovaní v JS knižnicu jQuery použiť, alebo ju nepoužiť.
Ak by nenastávalo takéto mätenie, tak by nevznikali nezmyselné dotazy, či existuje v jQuery niečo ako cyklus while, kde sa v jQuery píšu funkcie, snaha narvať do každého príkazu znak $, aj po rade, ako to jednoducho vyriešiť (Príklad). Vzorová ukážka zmätenia: Nechci to řešit JS, aby nenastal nějaký problém, pokud ho bude mít uživatel vypnutý. Napadlo mi pro tento případ použít JQuery, ten by měl fungovat i při vypnutí JS, ne? Alebo úplný extrém - ako sa v Jquery sčitujú čísla (nedarí sa mi to nájsť).
Witiko
Profil
_es:
ako sa vJquery sčitujú čísla (nedarí sa mi to nájsť)
Máš na mysli tohle? :-)
Anonymní
Profil *
_es:
Ak by nenastávalo takéto mätenie, tak by nevznikali nezmyselné dotazy, či existuje v jQuery niečo ako cyklus while, kde sa v jQuery píšu funkcie, snaha narvať do každého príkazu znak $, aj po rade, ako to jednoducho vyriešiť (Príklad)

Myslím, že vím o čem je řeč jen se nejspíš špatně vyjadřuji. Teď jsem si hrál s js abych si udělal kód, co by mi přidával inputy a vyřešil jsem to následovně (posuďte jestli to je dobře nebo ne):

Js:
$(function(){

      function checkInputs()
      {
          var maxInputs = 5;
          var inputs = $('.inputs').find(':input[type=text]');

          if(inputs.length > maxInputs){
              alert('Maximální počet řádků je ' + maxInputs);
              $('.add').hide();
          }
      }

      $('.add').click(function(){
          var input = '<div class="test"><input type="text" name="test[]"> <p><a href="" class="remove">Odebrat položku</a></p></div>';
          $('.inputs').append(input);
          checkInputs()
          return false;
      });

      $('.remove').live('click', function(){
          $(this).parent().parent().remove();
          checkInputs()
          return false;
      });
  });


Html:
<div id="content">
          <form action="#" method="GET">
              <div class="inputs">
                  <input type="text" name="test[]"> <p></p>
              </div>
              <a href="" class="add">přidat další položku</a>
              <input type="submit" name="send" value="Odeslat">
          </form>

          <div class="cleaner"></div>
      </div>
_es
Profil
Anonymní:
Teď jsem si hrál s js abych si udělal kód, co by mi přidával inputy a vyřešil jsem to následovně (posuďte jestli to je dobře nebo ne):
Myslím, že len na uvedené zadanie jQuery nie je užitočné aplikovať. Približne rovnako zložitý kód asi pôjde spraviť aj bez jQuery, možno aj trochu zrozumiteľnejší a efektívnejší. Odhadujem, že v tomto prípade asi jQuery veľmi nerieši nejaké nekompatibility v prehliadačoch, len je namiesto štandardných metód DOM použité jQuery.
Witiko
Profil
Anonymní:
Netuším, proč je v $('.inputs').find(':input[type=text]'); ta dvojtečka, jelikož ta značí pseudotřídy. JQuery vyhledávací funkce Sizzle se snaží napodobovat v případě nepodpory nativní funkci document.querySelectorAll, jež využívá CSS preprocesor. Proto to krm jenom CSS identifikátory, které bys používal u definic stylů. Tedy $('.inputs input[type=text]').
Celkový postup je samozřejmě zjednodušený pro pisatele kódu ale nesmyslně složitý pro interpreta. Počet vygenerovaných inputů by nebylo problém skladovat v nějaké proměnné. Vyhledávání podle atributů, jež přichází s CSS3 ( [type=text] ) je totiž u prohlížečů bez nativní podpory document.querySelectorAll (a podpory CSS3) simulováno nepříliš efektivním cyklem, jemuž by se většina vývojářů chtěla vyvarovat.
Anonymní
Profil *
Tak jsem to zkusil přepsat, ale moc úspěšný jsem bohužel nebyl:

Html:
<a href="javascript:" class="add" onClick="addInput()">přidat další položku</a>


Js:
function addInput()
  {
      var current = document.getElementById('inputs').innerHTML;
      document.getElementById('inputs').innerHTML = current + '<div id="test"><input type="text" name="test[]"> <p><a href="javascript:" onClick="removeInput()">Odebrat položku</a></p></div>';
  }

  function removeInput(){}


Ale tím jsem bohužel skončil. Můj problém je v tom, že nevím jak zjístit který prvek mám dát pryč a asi jak ho dát z dokumentu pryč. Mohli by jste mě prosím nakopnout? (jak pokračovat, ne do zadnice :D ) Díky.
_es
Profil
Anonymní:
var current = document.getElementById('inputs').innerHTML;
Ale v tom tvojom kóde nemáš žiadny element s id="inputs".
Nájdi si, na čo metóda document.getElementById slúži - stačí kliknúť v kóde v tejto diskusii.
Anonymní
Profil *
Omlouvám se, na to jsem zapoměl, dal jsem to id k tomu class="inputs" (<div class="inputs" id="inputs">). Přidání bez problémů funguje. Jen jsem nevěděl jak zjístit element podle class.
_es
Profil
Anonymní:
Jen jsem nevěděl jak zjístit element podle class.
To je práve problém, že nie dosť prehliadačov podobné „výmysly“ podporuje.
Otázne je, či je podobný „výmysel“ pre aplikáciu vôbec nutný.
Ak nutný nie je, tak je aplikácia efektívnejšia, či už s JS knižnicou alebo bez nej.
Anonymní
Profil *
Trošku jsem se v tom, co jsi napsal ztratil. Takže místo braní elementů podle class mám používat id ? A mohl by jsi mi prosím poradit jak udělat to odebrání inputu? Díky!
Chamurappi
Profil
Reaguji na Witika:
Netuším, proč je v $('.inputs').find(':input[type=text]'); ta dvojtečka, jelikož ta značí pseudotřídy.
V jQuery se jim říká spíš filtry, protože se mohou řídit jinými pravidly než CSS pseudotřídy. Dvojtečku používají, aby se to méně nepletlo.

Vyhledávání podle atributů, jež přichází s CSS3
Spíš s CSS 2. Mimochodem zrovna u <input>ů může fungovat v různých prohlížečích různě, pokud není uveden atribut type (jehož výchozí hodnota je text) — alespoň před pár lety jsem si všiml nekonzistencí. Nelze se tedy vždy spoléhat na to, že $ vrátí za všech okolností totéž ve všech prohlížečích.
_es
Profil
Anonymní:
A mohl by jsi mi prosím poradit jak udělat to odebrání inputu?
Odkaz na nadradený element sa dá spraviť rovnako ľahko aj bez jQuery a $(this).parent().parent().remove(); sa dá nahradiť úplne jednoducho - len sa mi nechce písať kompletný skript.
Anonymní
Profil *
Tak jsem to dělal tak dlouho, dokud se mi nepodařilo dojit k cíli:

Js:
function addInput()
  {
      var current = document.getElementById('inputs').innerHTML;
      document.getElementById('inputs').innerHTML = current + '<div id="test"><input type="text" name="test[]"> <p><a href="javascript:" onClick="removeInput(this)">Odebrat položku</a></p></div>';
  }

  function removeInput(current)
  {
      var id = current.parentNode.parentNode.id;
      var oDiv = document.getElementById(id);
      oDiv.parentNode.removeChild(oDiv);
  }


Html:
<div id="content">
          <form action="#" method="GET">
              <div class="inputs" id="inputs">
                  <input type="text" name="test[]"> <p></p>
              </div>
              <a href="javascript:" class="add" onClick="addInput()">přidat další položku</a>
              <input type="submit" name="send" value="Odeslat">
          </form>
          <div class="cleaner"></div>
      </div>
Witiko
Profil
Chamurappi:
Díky za poopravení. Mimochodem, nezpůsobí tato speciální syntax nekonzistenci s document.querySelectorAll kterou jQuery v případě podpory využívá? Případně by samozřejmě bylo možné poslaný selektor předparsovat a před posláním document.querySelectorAll upravit, ale to se mi nechce zdát. :-)
Anonymní
Profil *
Tak jsem se zamýšlel znovu nad kódem a zjístil jsem, že jde o jeden řádek zkrátit:

function removeInput(current)
  {
      var oDiv = current.parentNode.parentNode;
      oDiv.parentNode.removeChild(oDiv);
  }


Co tedy říkáte na kód bez využití jQuery?
_es
Profil
Anonymní:
Co tedy říkáte na kód bez využití jQuery?
Nepridávaj elementy formulára menením innerHTML elementu, ale pomocou metód DOM, na to určených. Viď toto vlákno a tento vysvetľujúci príspevok.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: