Din cursuri:

Character reference: sunt coduri care sunt folosite pentru a reda caracterele
speciale

< = nbsp

lang, id, class sunt atribute globale

href este atribut al elementelor a, link
src este atribut al elementelor img, iframe

<q> citat </q> <!-- phrasing content -->

<blockquote> citat </blockquote> <!-- flow content -->
<cite> referinta bibliografica </cite>

<pre> text preformatat </pre>

<code> cod intr-un limbaj de programare </code>

Elementele dl, dt, dd creaza o lista cu asocieri

<dl> dupa <dt>nume autori si in <dd> autorii

Legaturi interne
<a href=#numeid> Legatura la menu </a>
<a id=numeid> Menu </a>

Elementul img
<img src=adresa-imaginii alt=text-explicativ1>

<table> continutul tabelului, linie cu linie </table>

<caption> descrierea tabelului </caption> (optional)
<tr> linie formata din celule </tr>
<td> celula date </td>
<th> celula header</th>

<link href=style1.css type=text/css rel=stylesheet>

Unitati absolute: mm, cm, px, in, pt
Unitati relative:

em = dimensiunea fontului curent

% = procente din dimensiunea fontului curent

font-family: Helvetica,Times New Roman,serif;

font-size: 16px /* 16pt, 1.25em, 125%, x-large*/
font-weight: bold /* 100, , 900 */
font-style: italic /* oblique*/

Fonturi generice: serif, sans-serif, cursive, fantasy, monospace

Dimensiunea fonturilor:
Unitati: px, pt, em (m-size: 1em = dimesiunea fontului curent)
Valori: xx-small, x-small, smal, medium, large, x-large, xx-large
Procente: procent din fontul parintelui

Selectori pentru descendenti

E F selecteaza toate elementele F care
sunt descendenti ai lui E
Selectori pentru copii
E > F selecteaza elementele F care sunt
copii ai lui E
Selectori pentru frati
E + F selecteaza toate elementele F care
sunt frati cu E si care urmeaza imediat dupa E

overflow: hidden; /* visible, scroll */

descrie modul in care este redat textul care iese dintr-un cadru

{background-image: linear-gradient(to top, black, white);}

background-image: radial-gradient(circle at 50% 50%, black, white);}

coloane multiple
column-count: 4;
column-gap: px;
column-rule: px dotted black;

transform: rotate( ceva deg)

translate(stanga/dreapta, sus/jos)
-

display:block; /* permit stilizarea folosind box model; sunt plasate pe rand nou*/
display:inline; /* spatiul pe care il ocupa este lungimea
width si height,

elementului; nu accepta

dar accepta proprietati precum border, padding */

display:inline-block; /* element pozitionat inline care poate fi stilizat ca un element
bloc*/
display:none /* elementul este eliminate din pagina, dar este prezent in DOM */

float:left /*right, none*/

clear:both /*left, right*/

Elementele cu proprietatea float sunt scoase din fluxul documentlui si pozitionate

conform valorii, la stanga sau la dreapta. Ele afecteaza celelalte elemente care se
aranjeaza inconjurand (wrapping) elementele float. Elementele cu proprietatea clear nu
se aranjeaza in jurul elementelor float ci se deplaseaza sub acestea.

@media only screen and (min-width : 320px)

@media screen and (max-width:500px){

Java Script
Alert()- mesaj simplu
prompt()= face casuta in care sa introduci datele
parseInt= conversteste din string in int;
typeof(ceva) returneaza tipul acelui ceva

tipul obiect
var ob= { prop1 : valoarea 1 , prop 2:valoarea2... }

Array
.Concat
var a = s.split( ); // a = [azi,este,joi]
a.reverse(); // a = [joi,este, azi]
var s= a.join(/); // s=joi/este/azi

for
for (variabila in obiect) {
instructiuni
}

for (item of iteratii) {

instructiuni
}

The map() method creates a new array with the results of calling a function for every
array element.
array.map(function(currentValue, index, arr), thisValue)
numbers.map(multiplyArrayElement);
var roots = numbers_vector.map(function(x){ return x * 2;

vector.forEach(function(orice_indice_care_parcurge_vectorul){ });

var clasa =[{nume:"Ion",nota:5},{nume:"Petre",nota:6},

{nume:"Paul",nota:3},{nume:"Ana",nota:8},
{nume:"Maria",nota:6},{nume:"Simona",nota:4}];

var copie=clasa.slice();
var rez = copie.filter((x) => (x.nota >= 5))
.map((x) => (x.nume+" are nota "+x.nota))
.forEach((x)=>{alert(x)});
var n=prompt("nr= ");

window.onload = myMain;
function myMain(){
document.getElementById(id').onclick = function(){);}
}

function myMain() {
document.getElementById('buton').onmouseover = functie1;
document.getElementById('buton').onmouseout = functie2;
}

Selectarea elementelor in DOM (I)

getElementById() // un obiect
getElementsByClassName() // NodeList object
getElementsByTagName() // NodeList object
getElementsByTagName(*)// toate elementele
querySelectorAll(span[lang=ro] ) // NodeList object
querySelector() // primul element sau null

Node.parentNode

// un obiect

Node.childNodes

//ListNode object

Node.firstChild

// un obiect

Node.lastChild

// un obiect

Node.nextSibling
Node.previousSibling

ParentNode.children

// un obiect
// un obiect

// lista copiilor Element

ParentNode.firstElementChild
ParentNode.nextElementSibling
Node.previousElementSibling
ParentNode.childElementCount

radio input
<label><input type=radio name=gust value=iute> iute </label>

checkbox input
<label><input type=checkbox name=topping1 value=rosii> rosii</label>

Inserarea elemenet primul

parentNode.insertBefore(newChild, refChild)

submit input
<input type=submit value=Trimite>
reset input
<input type=reset value=Reseteaza size=>
submit button
<button type=submit> Trimite </button>
reset button
<button type=reset> Reseteaza </button>

<label>Nume:</label>
<input type="text" name="name">

el.addEventListener("click", nume_functie, false)

=nume_eveniment
var b = document.getElementById(id);
luare id;

b.onclick = myfct;
function myfct (event) {alert(event.type);}

sau
b.addEventListener("click", myfct);
function myfct (event) {alert(event.type);}
sau
b.onclick = function (event) {
alert(event.type);}
sau
b.addEventListener("click",
function (event) {alert(event.type);} )

Evenimente determinate de mouse:

click
dblclick
mouseup
mousedown
mouseover
mouseout
mouseleave

Evenimente determinate
de tastaura:
keydown
keypress
keyup

event.button // 0(stanga)1(mijloc) 2(dreapta)

event.clientX, event.clientY// pozitia in fereastra
event.pageX, event.pageY//pozitia in document

event.relatedTarget

window.onload = myMain;
function myMain() {
window.addEventListener('mousemove', pozMouse, false); }
function pozMouse(event) { n
document.getElementById('cx').value = event.clientX;
document.getElementById('cy').value = event.clientY;}

Obiectele KeyboardEvent au proprietati speciale

event.key
event.altKey // boolean
event.ctrlKey // Boolean
event.keyCode
event.which

window.onload = myMain;
function myMain() {
window.addEventListener('keydown', function (event) {
document.getElementById('key').value = event.key;
document.getElementById('which').value = event.which;
document.getElementById('code').value = event.keyCode;
});

Client-side Web Storage

localStorage.length
localStorage.key(i)
localStorage.setItem("x", 1)
localStorage.getItem("x")
localStorage.removeItem("x")
localStorage.clear()
la fel pentru sessionStorage
localStorage.setItem("hello", "Hello World!");
console.log(localStorage.getItem("hello"));
localStorage.removeItem("hello");

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
functii canvas:
beginPath()
closePath()
moveTo(x,y)
lineTo(x,y)
lineCap
arc()

arcTo()
quadraticCurveTo()
bezierCurveTo()

Object.create(ob)
creaza un nou obiect care are ca prototip ob

function Interval(x, y) {
this.mx= x;
this.my= y; } // clasa

var obi = new Interval(1,4); // obiect din clasa Interval

call si apply permit aplicarea metodelor obiectului Array

avand ca argumente colectii array-like

var content = Array.prototype.map.call(listImg, fct)

function Student(nume){ this.nume =nume;}

Crearea unui nod

document.createElement(tag)
document.createTextNode(text)

Inserarea unui nod

parinte.appendChild(copil)
parinte.insertBefore(CopilNou, CopilVechi)

Daca nodul copil exista in arbore atunci doar muta nodul

(nu face copie)

Stergerea / Inlocuirea unui nod

parinte.removeChild(copil)
parinte.replaceChild(CopilNou, CopilVechi)

Modificarea atributelor

proprietati: el.id, el.className, el.href, el.src

metode:
el.getAttribute()
el.setAttribute(class, numeclasa)
el.hasAttribute()
el.removeAttribute()
Adaugare de proprietati noi:
el.proprietateNoua=valoare

Se poate schimba clasa unui element:

element.className=clasanoua
element.classList.add(clasa1,clasa2)
element.classList.remove(clasa1,clasa2)
element.classList.contains(clasa)

Evenimente
Atribut eveniment
<p onclick=codJavascript>

Proprietate eveniment
element.onclick= numeFunctie
element.onclick=function(){}
Gresit : element.onclick=numeFunctie();

Obiectele de tip Event

evenimentul= un obiect din clasa Event
-se poate referi in HTML : event
<p onclick=f(event)>

sau

-e parametrul implicit al functiei apelate de eveniment

element.onclick=function(e){}
Proprietati
event.target, event.currentTarget, event.type,
Metode
event.preventDefault()
event.stopPropagation()

Obiectele MouseEvent au proprietati speciale

event.button // 0(stanga)1(mijloc) 2(dreapta)
event.clientX, event.clientY// pozitia in fereastra
event.pageX, event.pageY//pozitia in document

Obiectele KeyboardEvent au proprietati speciale

event.key

event.keyCode
event.which

Metode obiect event:

event.stopPropagation()
opreste propagarea evenimentului in DOM;
event.stopImmediatePropagation()
daca mai multe functii listener sunt atsate aceluiasi
element iar una contine event.stopImmediatePropagation()
functiile listener urmatoare nu mai sunt apelate
event.preventDefault()
se anuleaza actiunea implicita a elementului

Identificare element target

<p onclick=f(event,this,+i+)>
-event.target
-this evaluat la aparitia evenimentului= elementul tinta
-i e evaluat la setare
el.setAttribute(onclick,f(event,this,+i+))
el.onclick=function(e){this;}
el.addEventListener(click,function(e){this;})

Window metode

vt=setTimeout(numeFunctie, intarziere, param);

vt=setTimeout(function(){}, intarziere, param);
clearTimeout(vt) ;- anulare functie lansata
vt=setInterval(numeFunctie, interval, parametrii);
vt=setInterval(function(){}, interval, parametrii);
clearInterval(vt) ;- anulare functie lansata
vt globala pentru a fi vazuta de clearTimeout (clearInterval)
parametrii sunt ai functiei care se va executa (numeFunctie sau anonima)

window.localStorage
-date pastrate in browserul client
(perechi: (proprietate, valoareString))
-nu se sterg la inchiderea browserului
-toate paginile din acelasi loc(domeniu) vor pastra si accesa aceleasi date
localStorage.propNoua=valoare
localStorage.setItem(propNoua, valoare)
localStorage.getItem(propNoua)
localStorage.removeItem(propNoua)
localStorage.clear();//elibereaza localStorage

<input>
type=text value=text afisat
type=button value=text afisat
type=radio checked=true/false
value=non-vizibila

name= acelasi pt intreg grupul

<select>
selectedIndex=valoarea selectata
value= campul value al optiunii selectate
options= vectorul de optiuni

var articles = document.querySelectorAll('article');

articles.forEach(function(article) {

element.childNodes.forEach(function(child)
for ( let j of element.childNodes)

var section = document.querySelector('section');