reprezentare logo Kosson

Tehnologii web

Categoria tehnologiilor web cu care mă jos
Pentru toți cei care au nevoie de materiale de referință pentru a înțelege anumite aspecte ale limbajului de programare JavaScript, vă invit să considerați spre consultare acest prim release oficial de la https://github.com/kosson/javascript-invat-eu-inveti-si-tu/releases/tag/0.0.1 Este un efort de doi ani deja și încă nu s-a încheiat. Cu drag pentru voi toți. Add a comment

Pentru cei interesați de o resursă deschisă dedicată înțelegerii JavaScript, vă invit să accesați bit.ly/JS-tu-eu

Va fi actualizată cât de des posibil iar scopul final este un manual vizual, care să vină în sprijinul celor care doresc să netezească multe asperități legate de acest limbaj de programare. Resursa nu este una finală și poate suferi multe modificări de acum încolo.

Unele lucruri sunt abia la început, altele chiar sunt bine ilustrate, dar vă las să aruncați un ochi.

Add a comment

 flippingCardCSS

Primul pas este crearea unei liste.
Un element de listă conține două divuri care conțin fața și verso.
Fața are un șir iar pe verso este o imagine.

<div>
  <ul>
    <li>
      <div>1</div>
      <div>
        <img src="/card.svg" alt="verso de card">
      </div>
    </li>
    <li>
      <div>2</div>
      <div>
        <img src="/card.svg" alt="verso de card">
      </div>
    </li>
    <li>
      <div>3</div>
      <div>
        <img src="/card.svg" alt="verso de card">
      </div>
    </li>
    <li>
      <div>4</div>
      <div>
        <img src="/card.svg" alt="verso de card">
      </div>
    </li>
  </ul>
</div>

Stilizarea listei
1. Dai dimensiuni fiecărui element al listei
2. Pui culoare fundalului pentru a vedea efectul diferitelor transformări
3. Float la stânga și scoți bulleturile afișate în listei
4. Pentru că folosim svg-uri, va trebui să le dăm dimensiune și acestora
5. Ceva distanță se pune cu margin între elemente

li-urile la primirea dimensiunilor

li urile primesc dimensiuni 300wh

  
  li {
  width: 300px;
  height: 300px;
  background: green;
  list-style: none;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}

li img{
  width: 300px;
}
  
Add a comment

Extinderea prototipului - schemă

Sper să vă ajute să înțelegeți mai bine așa-zisa „moștenire” prin prototip în JavaScript.

JavaScript un mecanism clasic de moștenire așa cum este așteptat în cazul tipic al moștenirii unei clase copil a caracteristicilor clasei părinte, în fapt, o copiere a acestor caracteristici, după care se nu mai există nicio relație la instanțierea într-un obiect, nu există în JavaScript. De fapt, se poate vorbi de o „delegare comportamentală” și nu de o moștenire în sensul clasic. Obiectele stabilesc legături prototipale prin care se pot face delegări pe lanțul prototipal.

Add a comment

Pentru că există foarte puțină documentați în limba română pentru JavaScript m-am hotărât să scriu și eu câte ceva. Pentru că îmi place să și desenez, am făcut o schemă după explicațiile lui Kyle Simpson.

JavaScript este un limbaj bazat pe moștenire prototipală - prototypal inheritance

Mantre
- Nu există clase!
- Motorul Javascript construiește automat o metodă Obiect în obiectul window. Această metodă are un obiect foarte important care se numește prototype.
- În cazul tuturor funcțiilor, motorul JavaScript generează un obiect prototype (numeFunctie.prototype).
- Funcțiile sunt legate de obiectul prototip prin metoda .constructor
- Funcțiile nu sunt cele care generează obiectul prototype.
- Fiecare funcție are un prototype object diferit.
- O funcție apelată cu ```new``` în fața sa este un constructor.
- Obiectele pot moșteni alte proprietăți direct din alte obiecte
- [[Prototype]], adică proprietatea .prototype este o legătură de la un obiect la altul. Se obține legătura prin Object.create() sau ca efectul numărul 2 al folosirii cuvântului cheie ```new```. Mecanismul pe care-l realizează .prototype este unul de delegare a cererii pentru referința unei proprietăți sau metode către un oiect mai sus pe lanțul prototipal către un alt obiect.

Add a comment

Cred că de Markdown sunteți deja sătui... dar ce spuneți de o soluție de construit diagrame direct în text fără să mai treceți prin Inkscape. Iaca soluția vine sub formă de sirenă :)))) da, da, nu e o cioacă.

http://knsv.github.io/mermaid/#mermaid

și repo de pe github https://github.com/knsv/mermaid

Ce-i fain este că au suport și pe Atom (yuuuuum). Mai rămâne de văzut o integrare mai organică în workflowul de editare.

DiagramaCuMermaid

Add a comment

Chiar cum învăț o grămadă de lucruri în JavaScript și deja trebuie să deschid ochii pe noul standard: ES6

https://github.com/lukehoban/es6features

Spanac! Care papanaș poate ține pasul?! Un papanaș ca mine trebuie să devină nultithreaded foarte rapid.


P.S. Ar trebui să parcurg http://www.nand2tetris.org/

Add a comment

Pentru că există suport bun pentru ceea ce face în ECMA Script 6.

Cum să te încrezi în nativ: https://github.com/oneuijs/You-Dont-Need-jQuery

Add a comment

Subcategorii