Skip to content

Commit 74b19a4

Browse files
kossonkosson
committed
Completări API-uri Canvas, DOM și ceva template la HTML
Trag tare pe ultima sută!
1 parent 5354444 commit 74b19a4

File tree

5 files changed

+148
-25
lines changed

5 files changed

+148
-25
lines changed

‎1-la-1-PRACTICA/public/VANILIE/index.html‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,50 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Vanilie</title>
6-
<script src="index.js" charset="utf-8"></script>
6+
77
</head>
88
<body>
99
<h1>e de test</h1>
10+
11+
<div class="demo">Unu</div>
12+
<div class="demo">Doi</div>
13+
<div class="demo">Trei</div>
14+
<script type="text/javascript">
15+
let sel = document.querySelector(".demo");
16+
console.log(sel.textContent);
17+
</script>
18+
<!-- <template id="fisa-biblio">
19+
<ul id="unitate">
20+
<li class="titlu"></li>
21+
<li class="autor"></li>
22+
<li class="editura"></li>
23+
</ul>
24+
</template>
25+
26+
<section id="ubeuri"></section>
27+
28+
<script type="text/javascript">
29+
let date = [
30+
{titlu: 'Amurgul cailor', autor: 'Emil Vinicius', editura: 'Ace'},
31+
{titlu: 'Când pleacă vacile', autor: 'Paris Maglavit', editura: 'Saniti'},
32+
{titlu: 'Vin crocodili', autor: 'Magdalena Ifrim', editura: 'Panika'}
33+
];
34+
35+
// selectăm template-ul
36+
let template = document.querySelector('#fisa-biblio').content;
37+
// selectăm inserția
38+
let ins = document.querySelector(`#ubeuri`);
39+
for (let ub of date) {
40+
// clonezi întreaga structură
41+
let fișa = template.cloneNode(true);
42+
43+
fișa.querySelector(`.titlu`).textContent = ub.titlu;
44+
fișa.querySelector(`.autor`).textContent = ub.autor;
45+
fișa.querySelector(`.editura`).textContent = ub.editura;
46+
47+
ins.appendChild(fișa);
48+
}
49+
</script> -->
1050
<!-- <button id="test">Apasă-mă!</button>
1151
<script>
1252
function ModStare () {
@@ -52,16 +92,18 @@ <h1>e de test</h1>
5292
console.log(element.innerText);
5393
};
5494
</script> -->
55-
<div id="primul">
95+
<!-- <div id="primul">
5696
<p class="verde">Primul</p>
5797
<p class="verde ceva">Al doilea</p>
5898
<p id="254" data-titlu="Apus de soare" data-isbn="143-432342" data-exemplare="3">O altă lectură care a plutit în vacanțele elevilor.</p>
59-
</div>
60-
<script>
99+
</div> -->
100+
<!-- <script>
61101
let bloc = document.getElementById('primul');
62102
let colectieP = document.getElementsByTagName('p');
63103
let colectieC = document.getElementsByClassName('verde');
64104
bloc.hasAttributes(); // true
65-
</script>
105+
</script> -->
106+
<!-- <canvas id="canvas" width="500" height="400"></canvas>
107+
<script src="index.js" charset="utf-8"></script> -->
66108
</body>
67109
</html>

‎1-la-1-PRACTICA/public/VANILIE/index.js‎

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
1-
let arr = ['ceva','altceva','după', 'abac'];
2-
let x = 10;
3-
function bubbleSort (arr) {
4-
const len = arr.length;
5-
for (let index = len - 1; index >= 0; index--) {
6-
for (let idxInt = 1; idxInt <= index; idxInt++) {
7-
let temp;/*?*/
8-
if (arr[idxInt - 1] > arr[idxInt]) {
9-
temp = arr[idxInt - 1];
10-
arr[idxInt - 1] = arr[idxInt];
11-
arr[idxInt] = temp;
12-
};
13-
};
14-
};
15-
return arr;
16-
};
17-
console.log(bubbleSort(arr));
1+
// let arr = ['ceva','altceva','după', 'abac'];
2+
// let x = 10;
3+
// function bubbleSort (arr) {
4+
// const len = arr.length;
5+
// for (let index = len - 1; index >= 0; index--) {
6+
// for (let idxInt = 1; idxInt <= index; idxInt++) {
7+
// let temp;/*?*/
8+
// if (arr[idxInt - 1] > arr[idxInt]) {
9+
// temp = arr[idxInt - 1];
10+
// arr[idxInt - 1] = arr[idxInt];
11+
// arr[idxInt] = temp;
12+
// };
13+
// };
14+
// };
15+
// return arr;
16+
// };
17+
// console.log(bubbleSort(arr));
18+
19+
let canvas = document.querySelector('#canvas');
20+
let context = canvas.getContext('2d');
21+
22+
23+
context.strokeStyle = "blue";
24+
context.lineWidth = 4;
25+
26+
27+
context.moveTo(150, 150);
28+
context.lineTo(200, 150);
29+
30+
context.rect(50, 50, 50, 50);
31+
32+
context.font = "20px Verdana";
33+
context.fillStyle = 'red';
34+
context.fillText("Teste", 200, 250);
35+
36+
// nu uita să pui la final această metodă
37+
context.stroke();

‎APIs/Canvas/introducere-canvas.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Canvas
2+
3+
Elementul `canvas` a fost adăugat în versiunea a cincea a standardului HTML și poate fi folosit pentru a realiza reprezentări grafice. Ceea ce este foarte util este că spațiul unui canvas poate fi controlat în JavaScript.
4+
5+
Există un obiect context care trebuie selectat pentru a avea acces la metodele care modifică un anumit desen. Sistemul de coordonate își are originile în colțul stânga sus al canvasului. Pentru un spațiu bidimensional fiind originea (0, 0). Valorile se măsoară în pixeli.

‎APIs/DOM/modificarea-atributelor-claselor-elementelor.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,26 @@ Hai să pornim făcând câteva verificări pentru un element înainte de a prel
2727

2828
Poți colecta atributele unui element prin constituirea unei colecții ale acestora de tip `NameNodeMap`. Acest tip de colecție permite accesarea informațiilor privind atributele, fie după numele atributului, dar utilizând indexarea, fie accesarea valorii unui atribut, menționând numele atributului.
2929

30-
## className și classList
30+
## Modificarea directă a claselor
3131

3232
Există două proprietăți care folosite în JavaScript permit modificarea claselor folosite pentru un anume element:
3333

3434
- `className` - care se bucură de o largă compatibilitate în ceea ce privește suportul browserelor și
3535
- `classList` - care este introdus ceva mai recent și mai ușor de folosit.
3636

37+
Aceste proprietăți sunt puse la dispoziție de interfața `Element`. Proprietatea `className` poate fi folosită atunci când suntem siguri că un element are o singură clasă. În caz contrar, existența mai multor clase impune folosirea lui `classList`.
38+
39+
```javascript
40+
let elem = document.querySelector('.top-sites');
41+
elem.classList.add('bau'); // adăugarea unei clase
42+
elem.classList.remove('bau'); // ștergerea unei clase
43+
elem.classList.toggle('bau');
44+
// dacă ai clasa returnează false și șterge clasa
45+
// dacă nu este clasa, o intruduce și returnează true.
46+
elem.classList.contains('bau'); // dacă există returnează true
47+
elem.classList.replace('bau', 'baubau'); // înlocuiește o clasă
48+
```
49+
3750
## Adăugarea unei clase folosind `className`
3851

3952
Să studiem cum s-ar putea scrie o funcție care să adauge o clasă la elemente într-o deplină compatibilitate și cu browserele Internet Explorer până la versiunea 8.
@@ -159,7 +172,7 @@ Odată cu versiunea 5 a HTML, există posibilitatea de a introduce în elemente
159172

160173
Atributele de acest tip formează o colecție care poate fi accesată folosind proprietatea `dataset`. Aceasta returnează un obiect de tipul `DOMStringMap`. Cheile acestui obiect vor fi numele atributelor, iar valorile, vor fi cele introduse.
161174

162-
Ceea ce se realizează astfel este o comunicare de date între pagina web și DOM.
175+
Ceea ce se realizează astfel este o comunicare de date între pagina web și DOM.
163176

164177
## Referințe
165178

‎APIs/LECTURA-OBLIGATORIE/HTML5-FISA.md‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,48 @@
11
# HTML5
22

3+
## HTML templates
4+
5+
Elementul `template` este utilizat pentru a declara fragmente de HTML care pot fi clonate și inserate în document folosindu-se JavaScript.
6+
7+
```html
8+
<template id="fisa-biblio">
9+
<ul id="unitate">
10+
<li class="titlu"></li>
11+
<li class="autor"></li>
12+
<li class="editura"></li>
13+
</ul>
14+
</template>
15+
16+
<section id="ubeuri"></section>
17+
18+
<script type="text/javascript">
19+
20+
let date = [
21+
{titlu: 'Amurgul cailor', autor: 'Emil Vinicius', editura: 'Ace'},
22+
{titlu: 'Când pleacă vacile', autor: 'Paris Maglavit', editura: 'Saniti'},
23+
{titlu: 'Vin crocodili', autor: 'Magdalena Ifrim', editura: 'Panika'}
24+
];
25+
26+
// selectăm template-ul
27+
let template = document.querySelector('#fisa-biblio').content;
28+
// selectăm inserția
29+
let ins = document.querySelector(`#ubeuri`);
30+
31+
// populare template
32+
for (let ub of date) {
33+
// clonezi întreaga structură
34+
let fișa = template.cloneNode(true);
35+
36+
fișa.querySelector(`.titlu`).textContent = ub.titlu;
37+
fișa.querySelector(`.autor`).textContent = ub.autor;
38+
fișa.querySelector(`.editura`).textContent = ub.editura;
39+
40+
ins.appendChild(fișa);
41+
}
42+
</script>
43+
```
44+
345
## Resurse
446

5-
[W3 HTML5 - A vocabulary and associated APIs for HTML and XHTML](https://www.w3.org/TR/html5/)
47+
- [W3 HTML5 - A vocabulary and associated APIs for HTML and XHTML](https://www.w3.org/TR/html5/)
48+
- [HTML. Living Standard. 9 aprilie, 2018](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)

0 commit comments

Comments
 (0)