├── .gitignore
├── .vscode
└── settings.json
├── css
├── fonts.css
├── prism.css
├── style.css
└── tooltip.css
├── exemplos
├── assincrono
│ ├── 1.html
│ ├── 10.html
│ ├── 11.html
│ ├── 12.html
│ ├── 13.html
│ ├── 14.html
│ ├── 15.html
│ ├── 16.html
│ ├── 17.html
│ ├── 18.html
│ ├── 2.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ ├── 6.html
│ ├── 7.html
│ ├── 8.html
│ └── 9.html
├── bubble
│ ├── 1.html
│ ├── 10.html
│ ├── 11.html
│ ├── 12.html
│ ├── 13.html
│ ├── 14.html
│ ├── 15.html
│ ├── 16.html
│ ├── 17.html
│ ├── 18.html
│ ├── 19.html
│ ├── 2.html
│ ├── 20.html
│ ├── 21.html
│ ├── 22.html
│ ├── 23.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ ├── 6.html
│ ├── 7.html
│ ├── 8.html
│ └── 9.html
├── linkclick
│ ├── 1.html
│ ├── 2.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ ├── 6.html
│ ├── 7.html
│ ├── 8.html
│ └── 9.html
├── promises
│ ├── 1.html
│ ├── 10.html
│ ├── 11.html
│ ├── 12.html
│ ├── 13.html
│ ├── 14.html
│ ├── 15.html
│ ├── 16.html
│ ├── 17.html
│ ├── 18.html
│ ├── 19.html
│ ├── 2.html
│ ├── 20.html
│ ├── 21.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ ├── 6.html
│ ├── 7.html
│ ├── 8.html
│ └── 9.html
└── settimeout
│ ├── 1.html
│ ├── 10.html
│ ├── 11.html
│ ├── 12.html
│ ├── 13.html
│ ├── 14.html
│ ├── 2.html
│ ├── 3.html
│ ├── 4.html
│ ├── 5.html
│ ├── 6.html
│ ├── 7.html
│ ├── 8.html
│ └── 9.html
├── fonts
├── IBMPlexMono-Bold-Latin1.woff
├── IBMPlexMono-Bold-Latin1.woff2
├── IBMPlexMono-Italic-Latin1.woff
├── IBMPlexMono-Italic-Latin1.woff2
├── IBMPlexMono-Regular-Latin1.woff
└── IBMPlexMono-Regular-Latin1.woff2
├── img
├── arrow.svg
├── loop.svg
└── navarrow.svg
├── index.html
├── js
├── prism-custom.js
├── prism.js
├── script.js
└── tooltip.js
└── readme.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .vscode
3 | .DS_Store
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "spellright.language": "pt",
3 | "spellright.documentTypes": [
4 | "markdown",
5 | "latex",
6 | "plaintext",
7 | "html"
8 | ]
9 | }
--------------------------------------------------------------------------------
/css/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'IBM Plex Mono';
3 | src: url('../fonts/IBMPlexMono-Italic-Latin1.woff2') format('woff2'),
4 | url('../fonts/IBMPlexMono-Italic-Latin1.woff') format('woff');
5 | font-weight: 400;
6 | font-style: italic;
7 | font-display: swap;
8 | }
9 |
10 | @font-face {
11 | font-family: 'IBM Plex Mono';
12 | src: url('../fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2'),
13 | url('../fonts/IBMPlexMono-Regular-Latin1.woff') format('woff');
14 | font-weight: 400;
15 | font-style: normal;
16 | font-display: swap;
17 | }
18 |
19 | @font-face {
20 | font-family: 'IBM Plex Mono';
21 | src: url('../fonts/IBMPlexMono-Bold-Latin1.woff2') format('woff2'),
22 | url('../fonts/IBMPlexMono-Bold-Latin1.woff') format('woff');
23 | font-weight: bold;
24 | font-style: normal;
25 | font-display: swap;
26 | }
--------------------------------------------------------------------------------
/css/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.15.0
2 | https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript */
3 | /**
4 | * prism.js Dark theme for JavaScript, CSS and HTML
5 | * Based on the slides of the talk “/Reg(exp){2}lained/”
6 | * @author Lea Verou
7 | */
8 |
9 | code[class*="language-"],
10 | pre[class*="language-"] {
11 | color: white;
12 | background: none;
13 | text-align: left;
14 | white-space: pre;
15 | word-spacing: normal;
16 | word-break: normal;
17 | word-wrap: normal;
18 | line-height: 1.5;
19 | overflow: auto;
20 | tab-size: 2;
21 | hyphens: none;
22 | font-family: "IBM Plex Mono", monospace;
23 | font-size: 0.875rem;
24 | border-radius: 4px;
25 | box-sizing: border-box;
26 | }
27 |
28 | pre[class*="language-"],
29 | :not(pre) > code[class*="language-"] {
30 | background: #222222;
31 | }
32 |
33 | /* Code blocks */
34 | pre[class*="language-"] {
35 | padding: 1rem;
36 | }
37 |
38 | /* Inline code */
39 | :not(pre) > code[class*="language-"] {
40 | padding: 0.15em 0.2em 0.05em;
41 | }
42 |
43 | .token.comment,
44 | .token.prolog,
45 | .token.doctype,
46 | .token.cdata {
47 | color: #8b888f;
48 | font-style: italic;
49 | }
50 |
51 | .token.punctuation {
52 | color: #8b888f;
53 | }
54 |
55 | .namespace {
56 | opacity: 0.7;
57 | }
58 |
59 | .token.property,
60 | .token.boolean,
61 | .token.number,
62 | .token.constant,
63 | .token.symbol,
64 | .token.condicional {
65 | color: #9bf;
66 | }
67 |
68 | .token.property,
69 | .token.object-property {
70 | color: #bbc;
71 | }
72 |
73 | .token.attr-value,
74 | .token.string,
75 | .token.char,
76 | .token.builtin,
77 | .token.inserted {
78 | color: #8b4;
79 | }
80 |
81 | .token.operator,
82 | .token.entity,
83 | .token.url,
84 | .token.variable {
85 | color: #f72;
86 | }
87 |
88 | .token.atrule,
89 | .token.keyword {
90 | color: #daf;
91 | font-style: italic;
92 | }
93 |
94 | .token.tag,
95 | .token.special,
96 | pre[class*="language-css"],
97 | code[class*="language-css"] {
98 | color: #daf;
99 | }
100 |
101 | .token.regex,
102 | .token.important {
103 | color: #f72;
104 | }
105 |
106 | .token.attr-name,
107 | .token.selector,
108 | .token.function,
109 | .token.function-2,
110 | .token.arrow {
111 | color: #fd4;
112 | }
113 |
114 | .token.important,
115 | .token.bold {
116 | font-weight: bold;
117 | }
118 | .token.italic {
119 | font-family: "IBM Plex Mono", monospace;
120 | font-size: 0.875rem;
121 | }
122 |
123 | .token.entity {
124 | cursor: help;
125 | }
126 |
127 | .token.deleted {
128 | color: red;
129 | }
130 |
131 | pre[class*="language-"].line-numbers {
132 | position: relative;
133 | padding-left: 3.8em;
134 | counter-reset: linenumber;
135 | }
136 |
137 | pre[class*="language-"].line-numbers > code {
138 | position: relative;
139 | white-space: inherit;
140 | }
141 |
142 | .line-numbers .line-numbers-rows {
143 | position: absolute;
144 | pointer-events: none;
145 | top: 0;
146 | font-size: 100%;
147 | left: -3.8em;
148 | width: 3em; /* works for line-numbers below 1000 lines */
149 | letter-spacing: -1px;
150 | border-right: 1px solid #333;
151 |
152 | -webkit-user-select: none;
153 | -moz-user-select: none;
154 | -ms-user-select: none;
155 | user-select: none;
156 | }
157 |
158 | .line-numbers-rows > span {
159 | pointer-events: none;
160 | display: block;
161 | counter-increment: linenumber;
162 | }
163 |
164 | .line-numbers-rows > span:before {
165 | content: counter(linenumber);
166 | color: #555;
167 | display: block;
168 | padding-right: 0.8em;
169 | text-align: right;
170 | }
171 |
172 | pre[data-line] {
173 | position: relative;
174 | padding: 1em 0 1em 3em;
175 | }
176 |
177 | .line-highlight {
178 | position: absolute;
179 | left: 0;
180 | right: 0;
181 | padding: inherit 0;
182 | margin-top: 1em; /* Same as .prism’s padding-top */
183 |
184 | background: hsla(24, 20%, 50%, 0.08);
185 | background: linear-gradient(
186 | to right,
187 | rgba(255,255,255,.2) 70%,
188 | rgba(255,255,255,.2)
189 | );
190 |
191 | pointer-events: none;
192 |
193 | line-height: inherit;
194 | white-space: pre;
195 | }
196 |
197 | .line-highlight:before,
198 | .line-highlight[data-end]:after {
199 | content: attr(data-start);
200 | position: absolute;
201 | top: 0.4em;
202 | left: 0.6em;
203 | min-width: 1em;
204 | padding: 0 0.5em;
205 | background-color: hsla(24, 20%, 50%, 0.4);
206 | color: hsl(24, 20%, 95%);
207 | font: bold 65%/1.5 sans-serif;
208 | text-align: center;
209 | vertical-align: 0.3em;
210 | border-radius: 999px;
211 | text-shadow: none;
212 | box-shadow: 0 1px white;
213 | }
214 |
215 | .line-highlight[data-end]:after {
216 | content: attr(data-end);
217 | top: auto;
218 | bottom: 0.4em;
219 | }
220 |
221 | .line-numbers .line-highlight:before,
222 | .line-numbers .line-highlight:after {
223 | content: none;
224 | }
225 |
226 | .evt {
227 | display: inline-block;
228 | border-radius: 2px;
229 | font-size: .7rem;
230 | }
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import './fonts.css';
2 | @import './tooltip.css';
3 | @import './prism.css';
4 |
5 | body, h1 {
6 | margin: 0px;
7 | padding: 0px;
8 | font-family: 'IBM Plex Mono', monospace;
9 | font-size: .875rem;
10 | }
11 |
12 | pre {
13 | margin: 0px;
14 | }
15 |
16 | .nav {
17 | text-align: center;
18 | margin-top: 20px;
19 | }
20 |
21 | nav.hide {
22 | display: none;
23 | }
24 |
25 | .js-engine {
26 | display: grid;
27 | grid-gap: 20px;
28 | box-sizing: border-box;
29 | grid-template-rows: 150px 50px 34px 150px;
30 | grid-template-columns: 45% 23% 1fr;
31 | grid-template-areas: "code call memory"
32 | "code call memory"
33 | "code event api"
34 | "code queue api"
35 | "log anotacao anotacao";
36 | }
37 |
38 | .js-engine > section {
39 | overflow-y: scroll;
40 | }
41 |
42 | .js-engine > section.event,
43 | .js-engine > section.code,
44 | .js-engine > section.html-nav {
45 | overflow: hidden;
46 | }
47 |
48 | .js-engine > section::-webkit-scrollbar {
49 | width: 10px;
50 | height: 10px;
51 | background: #EEE;
52 | border-radius: 4px;
53 | }
54 |
55 | .js-engine > section.code pre::-webkit-scrollbar,
56 | .js-engine > section.html::-webkit-scrollbar,
57 | .js-engine > section.html pre::-webkit-scrollbar,
58 | .js-engine > section.log::-webkit-scrollbar {
59 | width: 10px;
60 | height: 10px;
61 | background: #222;
62 | border-radius: 4px;
63 | }
64 |
65 | .js-engine > section.code pre::-webkit-scrollbar-corner,
66 | .js-engine > section.html::-webkit-scrollbar-corner,
67 | .js-engine > section.html pre::-webkit-scrollbar-corner,
68 | .js-engine > section.log::-webkit-scrollbar-corner {
69 | background-color: #222;
70 | }
71 |
72 | .js-engine > section.code pre::-webkit-scrollbar-thumb,
73 | .js-engine > section.html::-webkit-scrollbar-thumb,
74 | .js-engine > section.html pre::-webkit-scrollbar-thumb,
75 | .js-engine > section.code::-webkit-scrollbar-thumb {
76 | background: #777;
77 | border: 3px solid #222;
78 | border-radius: 4px;
79 | }
80 |
81 | .js-engine > section::-webkit-scrollbar-thumb {
82 | background: #c8c8c8;
83 | border: 3px solid #EEE;
84 | border-radius: 4px;
85 | }
86 |
87 | .js-engine > section::-webkit-scrollbar-corner {
88 | background: #EEE;
89 | }
90 |
91 | .code {
92 | grid-area: code;
93 | }
94 |
95 | .call {
96 | grid-area: call;
97 | }
98 |
99 | .memory {
100 | grid-area: memory;
101 | }
102 |
103 | .event {
104 | grid-area: event;
105 | }
106 |
107 | .queue {
108 | grid-area: queue;
109 | }
110 |
111 | .api {
112 | grid-area: api;
113 | }
114 |
115 | .log {
116 | grid-area: log;
117 | }
118 |
119 | section {
120 | border-radius: 2px;
121 | padding: .875rem;
122 | display: flex;
123 | flex-direction: column;
124 | }
125 |
126 | .content span {
127 | display: inline-block;
128 | padding: .5rem;
129 | border-radius: 4px;
130 | margin-bottom: .5rem;
131 | }
132 |
133 | .closure {
134 | overflow: hidden;
135 | }
136 |
137 | .closure span:first-child {
138 | margin-left: 0px;
139 | }
140 |
141 | .closure span:first-child::before {
142 | display: none;
143 | }
144 |
145 | .closure span {
146 | position: relative;
147 | }
148 |
149 | .closure span::before {
150 | content: '';
151 | width: 2px;
152 | height: 38px;
153 | position: absolute;
154 | z-index: 200;
155 | top: -10px;
156 | left: -10px;
157 | border-left: dotted 1px rgba(0,0,0,.5);
158 | }
159 |
160 | .content {
161 | display: flex;
162 | flex-direction: column;
163 | align-items: flex-start;
164 | }
165 |
166 | .call .content {
167 | margin-top: auto;
168 | }
169 |
170 | .closure span {
171 | display: flex;
172 | float: left;
173 | clear: left;
174 | margin-left: 20px;
175 | margin-bottom: .5rem;
176 | }
177 |
178 | .content div {
179 | margin-bottom: 1.2rem;
180 | }
181 |
182 | .call, .queue, .api, .memory {
183 | background: #EEE;
184 | box-shadow: 1px 1px 0 1px rgba(0,0,0,.1);
185 | }
186 |
187 | h1 {
188 | font-weight: normal;
189 | color: #445;
190 | font-size: .875rem;
191 | margin-bottom: 1rem;
192 | font-weight: bold;
193 | }
194 |
195 | .func {
196 | background: #fc3;
197 | color: #222;
198 | }
199 |
200 | .str {
201 | background: #555;
202 | color: #fff;
203 | }
204 |
205 | .dom {
206 | background: #555;
207 | color: #fff;
208 | }
209 |
210 | .evt {
211 | background: #B1E;
212 | color: #fff;
213 | position: relative;
214 | }
215 |
216 | .evt.time::before {
217 | display: block;
218 | content: '';
219 | position: absolute;
220 | width: 10px;
221 | height: 10px;
222 | border: 4px solid #B1E;
223 | border-left: 4px solid #d8d8d8;
224 | background: #d8d8d8;
225 | border-radius: 50%;
226 | top: -5px;
227 | left: -5px;
228 | animation: time 1s forwards 5 linear;
229 | }
230 |
231 | @keyframes time {
232 | from {
233 | transform: rotate(0deg);
234 | }
235 | to {
236 | transform: rotate(360deg);
237 | }
238 | }
239 |
240 | .api-link span {
241 | position: relative;
242 | padding: .5rem 1rem;
243 | }
244 |
245 | .api-link span::after {
246 | display: inline-block;
247 | content: '';
248 | height: 4px;
249 | top: 15px;
250 | right: -14px;
251 | width: 20px;
252 | position: absolute;
253 | background: #555;
254 | z-index: 200;
255 | }
256 |
257 | .api-link span:last-child {
258 | padding-right: .5rem;
259 | }
260 |
261 | .api-link span:last-child::after {
262 | display: none;
263 | }
264 |
265 | .event, .code {
266 | padding: 0px;
267 | }
268 |
269 | .event div {
270 | display: flex;
271 | justify-content: flex-end;
272 | align-items: center;
273 | }
274 |
275 | .event span {
276 | background: #B1E;
277 | color: white;
278 | padding: .5rem;
279 | border-radius: 2px;
280 | margin-right: 10px;
281 | }
282 |
283 | .event svg g {
284 | stroke: #B1E;
285 | stroke-width: 2px;
286 | }
287 |
288 | .code {
289 | background: #222;
290 | }
291 |
292 | [data-anime] {
293 | animation: slide .5s forwards;
294 | }
295 |
296 | [data-remove] {
297 | animation: slide-out .5s forwards;
298 | }
299 |
300 | @keyframes slide {
301 | from {
302 | opacity: 0;
303 | transform: translate3d(-30px, 0, 0);
304 | }
305 | to {
306 | opacity: 1;
307 | transform: translate3d(0, 0, 0);
308 | }
309 | }
310 |
311 | @keyframes slide-out {
312 | 0% {
313 | opacity: 1;
314 | transform: translate3d(0, 0, 0);
315 | }
316 | 99% {
317 | opacity: 0;
318 | transform: translate3d(-30px, 0, 0);
319 | }
320 | 100% {
321 | display: none;
322 | opacity: 0;
323 | transform: translate3d(-30px, 0, 0);
324 | }
325 | }
326 |
327 | .animate svg {
328 | animation: time 2s reverse infinite linear;
329 | }
330 |
331 | [data-update] {
332 | position: relative;
333 | }
334 |
335 | [data-update]::after {
336 | display: block;
337 | content: '';
338 | position: absolute;
339 | width: 8px;
340 | height: 8px;
341 | background: greenyellow;
342 | border-radius: 50%;
343 | top: -4px;
344 | right: -4px;
345 | border: 2px solid black;
346 | transition: .3s;
347 | animation: show-update .3s forwards, update 1.2s alternate infinite linear;
348 | }
349 |
350 | @keyframes show-update {
351 | from {
352 | transform: scale(0);
353 | }
354 | to {
355 | transform: scale(1);
356 | transform-origin: center;
357 | }
358 | }
359 |
360 | @keyframes update {
361 | from {
362 | background: black;
363 | }
364 | to {
365 | background: #6D6;
366 | }
367 | }
368 |
369 | .log {
370 | background: #222;
371 | }
372 |
373 | .log h1 {
374 | color: #fff;
375 | }
376 |
377 | .log .content {
378 | color: #6D6;
379 | counter-reset: span;
380 | }
381 |
382 | .log .content span {
383 | display: block;
384 | padding: 0px;
385 | margin-bottom: .5rem;
386 | }
387 |
388 | .log .content span::before {
389 | counter-increment: span;
390 | content: counter(span) ' ';
391 | opacity: .5;
392 | }
393 |
394 | .html {
395 | grid-area: log;
396 | background: #222;
397 | padding: 0px;
398 | }
399 |
400 | .anotacao {
401 | grid-area: anotacao;
402 | overflow: hidden !important;
403 | min-height: 120px;
404 | position: relative;
405 | }
406 |
407 | .nav {
408 | position: absolute;
409 | right: 0;
410 | bottom: 0;
411 | display: flex;
412 | align-content: center;
413 | }
414 |
415 | .anterior, .proximo {
416 | background: #e5e5e5 url('../img/arrow.svg') center center no-repeat;
417 | width: 40px;
418 | height: 40px;
419 | border: none;
420 | border-radius: 4px 0 0 4px;
421 | }
422 |
423 | .anterior:hover, .proximo:hover, .anterior:focus, .proximo:focus {
424 | background: #6D6 url('../img/arrow.svg') center center no-repeat;
425 | cursor: pointer;
426 | outline: none;
427 | }
428 |
429 | .proximo {
430 | transform: rotate(180deg);
431 | }
432 |
433 | .etapa {
434 | background: #eeeeee;
435 | color: #222;
436 | padding: .7rem 1rem 0 1rem;
437 | font-weight: bold;
438 | }
439 |
440 | .link-exemplos {
441 | padding: 15px;
442 | }
443 |
444 | .link-exemplos h2 {
445 | font-size: .875rem;
446 | margin-top: 0px;
447 | margin-bottom: .5rem;
448 | }
449 |
450 | .link-exemplos ul {
451 | display: flex;
452 | list-style: none;
453 | padding: 0px;
454 | margin: 0px;
455 | }
456 |
457 | .link-exemplos a {
458 | display: block;
459 | background: #eeeeee;
460 | padding: .4rem .8rem;
461 | border-radius: 2px;
462 | color: black;
463 | text-decoration: none;
464 | margin-right: 15px;
465 | font-size: .875rem;
466 | }
467 |
468 | .link-exemplos a.active, .link-exemplos a:hover {
469 | background: #ffc75f;
470 | }
471 |
472 | .html-nav {
473 | grid-area: log;
474 | position: relative;
475 | height: 25px;
476 | }
477 |
478 | .html-nav ul {
479 | display: flex;
480 | list-style: none;
481 | padding: 0px;
482 | margin: 0px;
483 | position: absolute;
484 | top: 0px;
485 | left: 0px;
486 | }
487 |
488 | .html-nav a {
489 | background: #aaa;
490 | padding: .5rem;
491 | display: block;
492 | text-decoration: none;
493 | color: #222;
494 | font-weight: bold;
495 | }
496 |
497 | .html-nav a.active, .html-nav a:hover {
498 | background: #eee;
499 | }
500 |
501 | .js-tabcontent {
502 | display: none;
503 | }
504 |
505 | .js-tabcontent.active {
506 | display: block;
507 | }
508 |
509 | .microtask {
510 | border-top: dotted 1px;
511 | padding-top: 5px;
512 | margin-top: 10px;
513 | }
514 |
515 | .promises .js-engine {
516 | display: grid;
517 | grid-gap: 20px;
518 | box-sizing: border-box;
519 | grid-template-rows: 150px 34px 50px 150px;
520 | grid-template-columns: 45% 23% 1fr;
521 | grid-template-areas: "code call memory"
522 | "code event api"
523 | "code queue api"
524 | "code queue api"
525 | "log anotacao anotacao";
526 | }
--------------------------------------------------------------------------------
/css/tooltip.css:
--------------------------------------------------------------------------------
1 | .tooltip {
2 | position: absolute;
3 | z-index: 500;
4 | background: rgba(0,0,0,.8);
5 | padding: .2rem;
6 | color: white;
7 | font-family: 'IBM Plex Mono', monospace;
8 | font-size: .875rem;
9 | max-width: 170px;
10 | border-radius: 2px;
11 | top: 0px;
12 | left: 0px;
13 | }
--------------------------------------------------------------------------------
/exemplos/assincrono/1.html:
--------------------------------------------------------------------------------
1 |
2 | setTimeout(function() {
3 | console.log('Time 1');
4 | });
5 |
6 | setTimeout(function() {
7 | console.log('Time 2');
8 | }, 100);
9 |
10 | console.log('Log 1');
11 |
12 | setTimeout(function() {
13 | console.log('Time 3');
14 | }, 50);
15 |
16 | console.log('Log 2');
17 |
20 | script.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
39 |
40 |
41 |
42 |
43 |
44 |
Execução do script é iniciada.
45 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
21 | time
22 | anonymous()
23 |
24 |
27 |
28 | Log 1
29 | Log 2
30 | Time 1
31 |
32 |
35 |
36 |
37 |
38 |
Execução anonymous(): função anônima finalizada. Itens da Web API continuam esperando o tempo acabar.
39 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
21 | time
22 | anonymous()
23 |
24 |
27 |
28 | Log 1
29 | Log 2
30 | Time 1
31 |
32 |
35 |
36 |
37 |
38 |
Após 50ms: setTimeout resolvido, função anônima colocada na Queue.
39 |
2 |
3 |
4 | anonymous()
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
23 |
24 | Log 1
25 | Log 2
26 | Time 1
27 |
28 |
31 |
32 |
33 |
34 |
Execução anonymous(): Inicia a execução da função anônima.
35 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
24 |
25 | Log 1
26 | Log 2
27 | Time 1
28 | Time 3
29 |
30 |
33 |
34 |
35 |
36 |
Execução anonymous(): método log() executado. Argumento retornado no console.
37 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
24 |
25 | Log 1
26 | Log 2
27 | Time 1
28 | Time 3
29 |
30 |
33 |
34 |
35 |
36 |
Execução anonymous(): função anônima finalizada. Itens da Web API continuam esperando o tempo acabar.
37 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
23 |
24 | Log 1
25 | Log 2
26 | Time 1
27 | Time 3
28 |
29 |
32 |
33 |
34 |
35 |
Após 100ms: setTimeout resolvido, função anônima colocada na Queue.
36 |
2 |
3 |
4 | anonymous()
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Log 1
22 | Log 2
23 | Time 1
24 | Time 3
25 |
26 |
29 |
30 |
31 |
32 |
Execução anonymous(): Inicia a execução da função anônima.
33 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Log 1
20 | Log 2
21 | Time 1
22 | Time 3
23 | Time 2
24 |
25 |
28 |
29 |
30 |
31 |
Execução anonymous(): método log() executado. Argumento retornado no console.
32 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Log 1
20 | Log 2
21 | Time 1
22 | Time 3
23 | Time 2
24 |
25 |
28 |
29 |
30 |
31 |
Execução anonymous(): função anônima finalizada. Fim do script.
32 |
2 |
3 |
4 | setTimeout
5 | script.js
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
29 |
30 |
31 |
32 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 0.
33 |
2 |
3 |
4 | setTimeout
5 | setTimeout
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
34 |
35 |
36 |
37 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 100. setTimeout anterior resolvido, função anônima colocada na Queue.
38 |
2 |
3 |
4 | setTimeout
5 | log()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
25 |
26 | Log 1
27 |
28 |
31 |
32 |
33 |
34 |
Execução: método log() executado. Argumento retornado no console.
35 |
2 |
3 |
4 | log()
5 | setTimeout
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
29 |
30 | Log 1
31 |
32 |
35 |
36 |
37 |
38 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 50.
39 |
2 |
3 |
4 | setTimeout
5 | log()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
29 |
30 | Log 1
31 | Log 2
32 |
33 |
36 |
37 |
38 |
39 |
Execução: método log() executado. Argumento retornado no console.
40 |
2 |
3 |
4 | log()
5 | script.js
6 |
7 |
8 |
9 | anonymous()
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
28 |
29 | Log 1
30 | Log 2
31 |
32 |
35 |
36 |
37 |
38 |
Event Loop: Após a finalização do Script o event loop verifica se existem itens na Task Queue.
39 |
2 |
3 |
4 | anonymous()
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
21 | time
22 | anonymous()
23 |
24 |
27 |
28 | Log 1
29 | Log 2
30 |
31 |
34 |
35 |
36 |
37 |
Execução anonymous(): Inicia a execução da função anônima.
38 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | time
18 | anonymous()
19 |
20 |
21 | time
22 | anonymous()
23 |
24 |
27 |
28 | Log 1
29 | Log 2
30 | Time 1
31 |
32 |
35 |
36 |
37 |
38 |
Execução anonymous(): método log() executado. Argumento retornado no console.
39 |
2 | const btn = document.querySelector('button');
3 | const section = document.querySelector('section');
4 | const html = document.documentElement;
5 |
6 | function handleClick(event) {
7 | event.preventDefault();
8 | section.classList.add('active');
9 | html.addEventListener('click', handleOutside);
10 | }
11 |
12 | function handleOutside(event) {
13 | section.classList.remove('active');
14 | }
15 |
16 | btn.addEventListener('click', handleClick);
17 |
18 | btn.click();
19 |
22 | script.js
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
40 |
41 |
42 | <html>
43 | <body>
44 | <button>Clique</button>
45 | <section>Front End</section>
46 | </body>
47 | </html>
48 |
49 |
50 |
51 |
52 |
Execução do script é iniciada.
53 |
2 |
3 |
4 | documentElement
5 | addEventListener()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
34 | <html>
35 | <body>
36 | <button>Clique</button> (e)
37 | <section>Front End</section>
38 | </body>
39 | </html>
40 |
41 |
42 |
43 |
44 |
Execução: método addEventListener() executado. função handleClick colocada na Web Api linkada ao evento click do elemento btn.
45 |
2 |
3 |
4 | addEventListener()
5 | click()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
34 | <html>
35 | <body>
36 | <button>Clique</button> (e)
37 | <section>Front End</section>
38 | </body>
39 | </html>
40 |
41 |
42 |
43 |
44 |
Evento: evento click() de btn disparado.
45 |
2 |
3 |
4 | click()
5 | handleClick()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
34 | <html>
35 | <body>
36 | <button>Clique</button> (e)
37 | <section>Front End</section>
38 | </body>
39 | </html>
40 |
41 |
42 |
43 |
44 |
Evento de Clique: função handleClick() iniciada e colocada na Call Stack.
45 |
2 |
3 |
4 | preventDefault()
5 | handleClick()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
34 | <html>
35 | <body>
36 | <button>Clique</button> (e)
37 | <section>Front End</section>
38 | </body>
39 | </html>
40 |
41 |
42 |
43 |
44 |
Execução de handleClick: método preventDefault() executado, previnindo comrpotamento padrão do button.
45 |
2 |
3 |
4 | preventDefault()
5 | add('active')
6 | handleClick()
7 | script.js
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | btn
16 | section
17 | html
18 | handleClick
19 | handleOutside
20 |
21 |
22 |
23 |
24 | btn
25 | click
26 | handleClick
27 |
28 |
35 | <html>
36 | <body>
37 | <button>Clique</button> (e)
38 | <section class="active">Front End</section>
39 | </body>
40 | </html>
41 |
42 |
43 |
44 |
45 |
Execução de handleClick: método add() de classList executado, adiciona a classe active ao elemento section na memória.
46 |
2 |
3 |
4 | add('active')
5 | addEventListener()
6 | handleClick()
7 | script.js
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | btn
16 | section
17 | html
18 | handleClick
19 | handleOutside
20 |
21 |
22 |
23 |
24 | btn
25 | click
26 | handleClick
27 |
28 |
29 | html
30 | click
31 | handleOutside
32 |
33 |
40 | <html> (e)
41 | <body>
42 | <button>Clique</button> (e)
43 | <section class="active">Front End</section>
44 | </body>
45 | </html>
46 |
47 |
48 |
49 |
50 |
Execução de handleClick: método addEventListener() executado. função handleOutside colocada na Web Api linkada ao evento click do elemento html.
51 |
2 |
3 |
4 | addEventListener()
5 | handleClick()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
28 | html
29 | click
30 | handleOutside
31 |
32 |
39 | <html> (e)
40 | <body>
41 | <button>Clique</button> (e)
42 | <section class="active">Front End</section>
43 | </body>
44 | </html>
45 |
46 |
47 |
48 |
49 |
Execução de handleClick: handleClick finalizado. Inicia a fase de Bubble.
50 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 | handleOutside
17 |
18 |
19 |
20 |
21 | btn
22 | click
23 | handleClick
24 |
25 |
26 | html
27 | click
28 | handleOutside
29 |
30 |
37 | <html> (e)
38 | <body>
39 | <button>Clique</button> (e)
40 | <section class="active">Front End</section>
41 | </body>
42 | </html>
43 |
44 |
45 |
46 |
47 |
Bubble: verifica se o elemento parent (body) possui um evento de clique. Não possui, segue para o próximo.
48 |
2 |
3 |
4 | handleOutside()
5 | script.js
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | btn
14 | section
15 | html
16 | handleClick
17 | handleOutside
18 |
19 |
20 |
21 |
22 | btn
23 | click
24 | handleClick
25 |
26 |
27 | html
28 | click
29 | handleOutside
30 |
31 |
38 | <html> (e)
39 | <body>
40 | <button>Clique</button> (e)
41 | <section class="active">Front End</section>
42 | </body>
43 | </html>
44 |
45 |
46 |
47 |
48 |
Bubble: verifica se o elemento parent (html) possui um evento de clique. Possui, executa a função handleOutside.
49 |
2 |
3 |
4 | remove('active')
5 | handleOutside()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
28 | html
29 | click
30 | handleOutside
31 |
32 |
39 | <html> (e)
40 | <body>
41 | <button>Clique</button> (e)
42 | <section>Front End</section>
43 | </body>
44 | </html>
45 |
46 |
47 |
48 |
49 |
Execução de handleOutside: método remove() de classList executado, remove a classe active ao elemento section na memória.
50 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 | <html>
25 | <body>
26 | <button>Clique</button>
27 | <section>Front End</section>
28 | </body>
29 | </html>
30 |
31 |
32 |
33 |
34 |
Hoisting: constante btn é colocada na memória, nenhum valor é atribuído.
35 |
2 |
3 |
4 | remove('active')
5 | handleOutside()
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 | btn
24 | click
25 | handleClick
26 |
27 |
28 | html
29 | click
30 | handleOutside
31 |
32 |
39 | <html> (e)
40 | <body>
41 | <button>Clique</button> (e)
42 | <section>Front End</section>
43 | </body>
44 | </html>
45 |
46 |
47 |
48 |
49 |
Execução de handleOutside: execução finalizada. Continua a fase de bubble.
50 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 | handleOutside
17 |
18 |
19 |
20 |
21 | btn
22 | click
23 | handleClick
24 |
25 |
26 | html
27 | click
28 | handleOutside
29 |
30 |
37 | <html> (e)
38 | <body>
39 | <button>Clique</button> (e)
40 | <section>Front End</section>
41 | </body>
42 | </html>
43 |
44 |
45 |
46 |
47 |
Bubble: verifica se o elemento parent (document) possui um evento de clique. Não possui segue para o próximo.
48 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 | handleOutside
17 |
18 |
19 |
20 |
21 | btn
22 | click
23 | handleClick
24 |
25 |
26 | html
27 | click
28 | handleOutside
29 |
30 |
37 | <html> (e)
38 | <body>
39 | <button>Clique</button> (e)
40 | <section>Front End</section>
41 | </body>
42 | </html>
43 |
44 |
45 |
46 |
47 |
Bubble: verifica se o elemento parent (window) possui um evento de clique. Não possui, finaliza a fase de bubble.
48 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 | handleOutside
17 |
18 |
19 |
20 |
21 | btn
22 | click
23 | handleClick
24 |
25 |
26 | html
27 | click
28 | handleOutside
29 |
30 |
37 | <html> (e)
38 | <body>
39 | <button>Clique</button> (e)
40 | <section>Front End</section>
41 | </body>
42 | </html>
43 |
44 |
45 |
46 |
47 |
Script finalizado.
48 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 |
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 | <html>
26 | <body>
27 | <button>Clique</button>
28 | <section>Front End</section>
29 | </body>
30 | </html>
31 |
32 |
33 |
34 |
35 |
Hoisting: constante section é colocada na memória, nenhum valor é atribuído.
36 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 | <html>
27 | <body>
28 | <button>Clique</button>
29 | <section>Front End</section>
30 | </body>
31 | </html>
32 |
33 |
34 |
35 |
36 |
Hoisting: constante html é colocada na memória, nenhum valor é atribuído.
37 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
26 |
27 | <html>
28 | <body>
29 | <button>Clique</button>
30 | <section>Front End</section>
31 | </body>
32 | </html>
33 |
34 |
35 |
36 |
37 |
Hoisting: função handleClick é colocada na memória, o corpo da função é atribuído.
38 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | html
15 | handleClick
16 | handleOutside
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 | <html>
29 | <body>
30 | <button>Clique</button>
31 | <section>Front End</section>
32 | </body>
33 | </html>
34 |
35 |
36 |
37 |
38 |
Hoisting: função handleOutside é colocada na memória, o corpo da função é atribuído.
39 |
2 |
3 |
4 | querySelector('button')
5 | script.js
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | btn
14 | section
15 | html
16 | handleClick
17 | handleOutside
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 | <html>
30 | <body>
31 | <button>Clique</button>
32 | <section>Front End</section>
33 | </body>
34 | </html>
35 |
36 |
37 |
38 |
39 |
Execução: método querySelector() executado. Retorno atribuído à btn.
40 |
2 |
3 |
4 | querySelector('button')
5 | querySelector('section')
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 | <html>
31 | <body>
32 | <button>Clique</button>
33 | <section>Front End</section>
34 | </body>
35 | </html>
36 |
37 |
38 |
39 |
40 |
Execução: método querySelector() executado. Retorno atribuído à section.
41 |
2 |
3 |
4 | querySelector('section')
5 | documentElement
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | html
17 | handleClick
18 | handleOutside
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 | <html>
31 | <body>
32 | <button>Clique</button>
33 | <section>Front End</section>
34 | </body>
35 | </html>
36 |
37 |
38 |
39 |
40 |
Execução: valor da propriedade documentElement atribuída à html
41 |
2 | const btn = document.querySelector('button');
3 | const section = document.querySelector('section');
4 |
5 | function handleClick(event) {
6 | event.preventDefault();
7 | section.classList.add('active');
8 | }
9 |
10 | console.log('console 1');
11 |
12 | setTimeout(() => {
13 | console.log('timeout 2');
14 | });
15 |
16 | console.log('console 2');
17 |
18 | btn.addEventListener('click', handleClick);
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | btn
30 | section
31 | handleClick
32 |
33 |
34 |
35 |
36 | btn
37 | click
38 | handleClick
39 |
40 |
47 | <html>
48 | <body>
49 | <button>Clique</button> (e)
50 | <section>Front End</section>
51 | </body>
52 | </html>
53 |
54 |
55 |
56 |
57 |
Script executado: Script totalmente executado esperando por eventos na página.
58 |
2 |
3 |
4 | handleClick()
5 |
6 |
7 |
8 |
9 |
10 |
11 | btn
12 | section
13 | handleClick
14 |
15 |
16 |
17 |
18 | btn
19 | click
20 | handleClick
21 |
22 |
29 | <html>
30 | <body>
31 | <button>Clique</button> (e)
32 | <section>Front End</section>
33 | </body>
34 | </html>
35 |
36 |
37 |
38 |
39 |
Evento de Clique: função handleClick() iniciada e colocada na Call Stack.
40 |
2 |
3 |
4 | preventDefault()
5 | handleClick()
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 | btn
20 | click
21 | handleClick
22 |
23 |
30 | <html>
31 | <body>
32 | <button>Clique</button> (e)
33 | <section>Front End</section>
34 | </body>
35 | </html>
36 |
37 |
38 |
39 |
40 |
Execução de handleClick: método preventDefault() executado, previnindo comrpotamento padrão do button.
41 |
2 |
3 |
4 | add('active')
5 | preventDefault()
6 | handleClick()
7 |
8 |
9 |
10 |
11 |
12 |
13 | btn
14 | section
15 | handleClick
16 |
17 |
18 |
19 |
20 | btn
21 | click
22 | handleClick
23 |
24 |
31 | <html>
32 | <body>
33 | <button>Clique</button> (e)
34 | <section class="active">Front End</section>
35 | </body>
36 | </html>
37 |
38 |
39 |
40 |
41 |
Execução de handleClick: método add() de classList executado, adiciona a classe active ao elemento section na memória.
42 |
2 |
3 |
4 | add('active')
5 | handleClick()
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 | btn
20 | click
21 | handleClick
22 |
23 |
30 | <html>
31 | <body>
32 | <button>Clique</button> (e)
33 | <section class="active">Front End</section>
34 | </body>
35 | </html>
36 |
37 |
38 |
39 |
40 |
Execução de handleClick: handleClick finalizado. Inicia a fase de Bubble.
41 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | btn
11 | section
12 | handleClick
13 |
14 |
15 |
16 |
17 | btn
18 | click
19 | handleClick
20 |
21 |
28 | <html>
29 | <body>
30 | <button>Clique</button> (e)
31 | <section class="active">Front End</section>
32 | </body>
33 | </html>
34 |
35 |
36 |
37 |
38 |
Bubble: verifica se o elemento parent (body) possui um evento de clique. Não possui, segue para o próximo.
39 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | btn
11 | section
12 | handleClick
13 |
14 |
15 |
16 |
17 | btn
18 | click
19 | handleClick
20 |
21 |
28 | <html>
29 | <body>
30 | <button>Clique</button> (e)
31 | <section class="active">Front End</section>
32 | </body>
33 | </html>
34 |
35 |
36 |
37 |
38 |
Bubble: verifica se o elemento parent (html) possui um evento de clique. Não possui, segue para o próximo.
39 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | btn
11 | section
12 | handleClick
13 |
14 |
15 |
16 |
17 | btn
18 | click
19 | handleClick
20 |
21 |
28 | <html>
29 | <body>
30 | <button>Clique</button> (e)
31 | <section class="active">Front End</section>
32 | </body>
33 | </html>
34 |
35 |
36 |
37 |
38 |
Bubble: verifica se o elemento parent (document) possui um evento de clique. Não possui segue para o próximo.
39 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | btn
11 | section
12 | handleClick
13 |
14 |
15 |
16 |
17 | btn
18 | click
19 | handleClick
20 |
21 |
28 | <html>
29 | <body>
30 | <button>Clique</button> (e)
31 | <section class="active">Front End</section>
32 | </body>
33 | </html>
34 |
35 |
36 |
37 |
38 |
Bubble: verifica se o elemento parent (window) possui um evento de clique. Não possui, finaliza a fase de bubble.
39 |
2 | const promessa = new Promise(r => r());
3 |
4 | setTimeout(() => console.log('Timeout 1'), 1000);
5 |
6 | setTimeout(() => {
7 | promessa.then(r => console.log('Promise 1'));
8 | });
9 |
10 | promessa.then(r => console.log('Promise 2'));
11 |
12 | setTimeout(() => console.log('Timeout 2'));
13 |
14 | console.log('Log 1');
15 |
16 | promessa.then(r => console.log('Promise 3'));
17 |
18 | console.log('Log 2');
19 |
22 | script.js
23 |
24 |
25 |
26 |
Microtask Queue
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
41 |
42 |
43 |
44 |
45 |
46 |
Execução do script é iniciada.
47 |
2 |
3 |
4 | promessa.then()
5 | log()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 | anonymous()
12 |
Microtask Queue
13 | anonymous()
14 | anonymous()
15 |
16 |
17 |
18 | promessa
19 |
20 |
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
27 | promise
28 | anonymous()
29 |
30 |
33 |
34 | Log 1
35 | Log 2
36 |
37 |
40 |
41 |
42 |
43 |
Execução: método log() executado, argumento aparece no Log. Promessa anterior resolvida, função anônima colocada na Microtask Queue.
44 |
2 |
3 |
4 | log()
5 | script.js
6 |
7 |
8 |
9 | anonymous()
10 | anonymous()
11 |
Microtask Queue
12 | anonymous()
13 | anonymous()
14 |
15 |
16 |
17 | promessa
18 |
19 |
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
28 |
29 | Log 1
30 | Log 2
31 |
32 |
35 |
36 |
37 |
38 |
Event Loop: após a finalização de todos os eventos na Call Stack, o event Loop verifica se existem eventos na Microtask Queue. Ele executa toda a miscrotask antes de inicar a Task Queue
39 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 | anonymous()
10 | anonymous()
11 |
Microtask Queue
12 | anonymous()
13 | anonymous()
14 |
15 |
16 |
17 | promessa
18 |
19 |
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
28 |
29 | Log 1
30 | Log 2
31 | Promise 2
32 |
33 |
36 |
37 |
38 |
39 |
Microtask Queue: método log dentro da função anônima da promessa executado.
40 |
2 |
3 |
4 | log()
5 | anonymous()
6 | log()
7 | anonymous()
8 |
9 |
10 |
11 | anonymous()
12 | anonymous()
13 |
Microtask Queue
14 | anonymous()
15 |
16 |
17 |
18 | promessa
19 |
20 |
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
29 |
30 | Log 1
31 | Log 2
32 | Promise 2
33 | Promise 3
34 |
35 |
38 |
39 |
40 |
41 |
Microtask Queue: método log dentro da função anônima da promessa executado.
42 |
2 |
3 |
4 | log()
5 | anonymous()
6 | promessa.then()
7 | anonymous()
8 |
9 |
10 |
11 | anonymous()
12 | anonymous()
13 |
Microtask Queue
14 |
15 |
16 |
17 | promessa
18 |
19 |
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
26 | promise
27 | anonymous()
28 |
29 |
32 |
33 | Log 1
34 | Log 2
35 | Promise 2
36 | Promise 3
37 |
38 |
41 |
42 |
43 |
44 |
Task Queue: Agora que a miscrotask está limpa, é iniciada Task Queue. método then() de promessa executado. Callback colocado na Web Api como Microtask. Sua resolução é instantânea.
45 |
2 |
3 |
4 | promessa.then()
5 | anonymous()
6 |
7 |
8 |
9 | anonymous()
10 |
Microtask Queue
11 | anonymous()
12 |
13 |
14 |
15 | promessa
16 |
17 |
18 |
19 |
20 | time
21 | anonymous()
22 |
23 |
24 | promise
25 | anonymous()
26 |
27 |
30 |
31 | Log 1
32 | Log 2
33 | Promise 2
34 | Promise 3
35 |
36 |
39 |
40 |
41 |
42 |
Task Queue: Função anônima adicionada na Microtask Queue.
43 |
2 |
3 |
4 | log()
5 |
6 |
7 |
8 | anonymous()
9 |
Microtask Queue
10 | anonymous()
11 |
12 |
13 |
14 | promessa
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
25 |
26 | Log 1
27 | Log 2
28 | Promise 2
29 | Promise 3
30 | Promise 1
31 |
32 |
35 |
36 |
37 |
38 |
Microtask Queue: Event loop precisa limpar a microtask queue antes de continuar com a Macrotask. Método log() executado.
39 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 | anonymous()
10 |
Microtask Queue
11 |
12 |
13 |
14 | promessa
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
25 |
26 | Log 1
27 | Log 2
28 | Promise 2
29 | Promise 3
30 | Promise 1
31 | Timeout 2
32 |
33 |
36 |
37 |
38 |
39 |
Task Queue: Com a microtask limpa, a próxima Task é executada. Método log() executado.
40 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
Microtask Queue
10 |
11 |
12 |
13 | promessa
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
24 |
25 | Log 1
26 | Log 2
27 | Promise 2
28 | Promise 3
29 | Promise 1
30 | Timeout 2
31 |
32 |
35 |
36 |
37 |
38 |
Script finalizado. O tempo da função anônima continua correndo na Web Api.
39 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | anonymous()
9 |
Microtask Queue
10 |
11 |
12 |
13 | promessa
14 |
15 |
16 |
17 |
18 | time
19 | anonymous()
20 |
21 |
24 |
25 | Log 1
26 | Log 2
27 | Promise 2
28 | Promise 3
29 | Promise 1
30 | Timeout 2
31 |
32 |
35 |
36 |
37 |
38 |
Após 1s. Função anônima colocada na Task Queue.
39 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
Microtask Queue
9 |
10 |
11 |
12 | promessa
13 |
14 |
15 |
16 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
Hoisting: constante promessa é colocada na memória, nenhum valor é atribuído.
29 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 | anonymous()
10 |
Microtask Queue
11 |
12 |
13 |
14 | promessa
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Log 1
24 | Log 2
25 | Promise 2
26 | Promise 3
27 | Promise 1
28 | Timeout 2
29 | Timeout 1
30 |
31 |
34 |
35 |
36 |
37 |
Task Queue. Função anônima executada. Método log executado.
38 |
2 |
3 |
4 | log()
5 | anonymous()
6 |
7 |
8 |
9 |
Microtask Queue
10 |
11 |
12 |
13 | promessa
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | Log 1
23 | Log 2
24 | Promise 2
25 | Promise 3
26 | Promise 1
27 | Timeout 2
28 | Timeout 1
29 |
30 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/exemplos/promises/3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promise r()
5 | script.js
6 |
7 |
8 |
9 |
Microtask Queue
10 |
11 |
12 |
13 | promessa
14 |
15 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
Execução: nova Promise criada, resolvida instantaneamente com o r(). Conteúdo da promise atribuído à promessa.
30 |
2 |
3 |
4 | Promise r()
5 | setTimeout()
6 | script.js
7 |
8 |
9 |
10 |
Microtask Queue
11 |
12 |
13 |
14 | promessa
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
30 |
31 |
32 |
33 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 1000.
34 |
2 |
3 |
4 | setTimeout()
5 | setTimeout()
6 | script.js
7 |
8 |
9 |
10 |
Microtask Queue
11 |
12 |
13 |
14 | promessa
15 |
16 |
17 |
18 |
19 | time
20 | anonymous()
21 |
22 |
23 | time
24 | anonymous()
25 |
26 |
34 |
35 |
36 |
37 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 0.
38 |
2 |
3 |
4 | setTimeout()
5 | promessa.then()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
Microtask Queue
12 |
13 |
14 |
15 | promessa
16 |
17 |
18 |
19 |
20 | time
21 | anonymous()
22 |
23 |
24 | time
25 | anonymous()
26 |
27 |
28 | promise
29 | anonymous()
30 |
31 |
39 |
40 |
41 |
42 |
Execução: método then() da promessa executado. Callback colocado na Web Api como Microtask. Sua resolução é instantânea. setTimeout anterior resolvido, função anônima colocada na Task Queue.
43 |
2 |
3 |
4 | promessa.then()
5 | setTimeout()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
Microtask Queue
12 | anonymous()
13 |
14 |
15 |
16 | promessa
17 |
18 |
19 |
20 |
21 | time
22 | anonymous()
23 |
24 |
25 | promise
26 | anonymous()
27 |
28 |
29 | time
30 | anonymous()
31 |
32 |
40 |
41 |
42 |
43 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 0. Promessa anterior resolvida, função anônima colocada na Microtask Queue.
44 |
2 |
3 |
4 | setTimeout()
5 | log()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 | anonymous()
12 |
Microtask Queue
13 | anonymous()
14 |
15 |
16 |
17 | promessa
18 |
19 |
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
26 | time
27 | anonymous()
28 |
29 |
32 |
33 | Log 1
34 |
35 |
38 |
39 |
40 |
41 |
Execução: método log() executado, argumento aparece no Log. setTimeout anterior resolvido, função anônima colocada na Task Queue.
42 |
2 |
3 |
4 | log()
5 | promessa.then()
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 | anonymous()
12 |
Microtask Queue
13 | anonymous()
14 |
15 |
16 |
17 | promessa
18 |
19 |
20 |
21 |
22 | time
23 | anonymous()
24 |
25 |
26 | promise
27 | anonymous()
28 |
29 |
32 |
33 | Log 1
34 |
35 |
38 |
39 |
40 |
41 |
Execução: método then() da promessa executado. Callback colocado na Web Api como Microtask. Sua resolução é instantânea.
42 |
2 | const btn = document.querySelector('button');
3 | const section = document.querySelector('section');
4 |
5 | function handleClick(event) {
6 | event.preventDefault();
7 | section.classList.add('active');
8 | }
9 |
10 | console.log('console 1');
11 |
12 | setTimeout(() => {
13 | console.log('timeout 2');
14 | });
15 |
16 | console.log('console 2');
17 |
18 | btn.addEventListener('click', handleClick);
19 |
22 | script.js
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
41 |
42 |
43 |
44 |
45 |
46 |
Execução do script é iniciada.
47 |
2 |
3 |
4 | log('console 2')
5 | addEventListener(...)
6 | script.js
7 |
8 |
9 |
10 | anonymous()
11 |
12 |
13 |
14 | btn
15 | section
16 | handleClick
17 |
18 |
19 |
20 |
21 | btn
22 | click
23 | handleClick
24 |
25 |
28 |
29 | console 1
30 | console 2
31 |
32 |
35 |
36 |
37 |
38 |
Execução: método addEventListener() executado. função handleClick colocada na Web Api linkada ao evento click do elemento btn.
39 |
2 |
3 |
4 | addEventListener(...)
5 | script.js
6 |
7 |
8 |
9 | anonymous()
10 |
11 |
12 |
13 | btn
14 | section
15 | handleClick
16 |
17 |
18 |
19 |
20 | btn
21 | click
22 | handleClick
23 |
24 |
27 |
28 | console 1
29 | console 2
30 |
31 |
34 |
35 |
36 |
37 |
Event Loop: após a finalização de todos os eventos na Call Stack, o event Loop verifica se existem eventos na Callback Queue.
38 |
2 |
3 |
4 | anonymous()
5 |
6 |
7 |
8 | anonymous()
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 | btn
20 | click
21 | handleClick
22 |
23 |
26 |
27 | console 1
28 | console 2
29 |
30 |
33 |
34 |
35 |
36 |
Execução: início da execução da função anônima.
37 |
2 |
3 |
4 | log('timeout')
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 | btn
20 | click
21 | handleClick
22 |
23 |
26 |
27 | console 1
28 | console 2
29 | timeout
30 |
31 |
34 |
35 |
36 |
37 |
Execução: método log() executado. Argumento retornado no console.
38 |
2 |
3 |
4 | log('timeout')
5 | anonymous()
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 | btn
20 | click
21 | handleClick
22 |
23 |
26 |
27 | console 1
28 | console 2
29 | timeout
30 |
31 |
34 |
35 |
36 |
37 |
Execução: função anônima finaliza. Não existem mais eventos na Callback Queue. Fim.
38 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 |
14 |
15 |
16 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
Hoisting: constante btn é colocada na memória, nenhum valor é atribuído.
29 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 |
15 |
16 |
17 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
Hoisting: constante section é colocada na memória, nenhum valor atribuído.
29 |
2 |
3 |
4 | script.js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | btn
13 | section
14 | handleClick
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
Hoisting: função handleClick é colocada na memória, o corpo da função é atribuído.
30 |
2 |
3 |
4 | querySelector('.button')
5 | script.js
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | btn
14 | section
15 | handleClick
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
26 |
27 |
28 |
29 |
30 |
Execução: método querySelector() executado. Retorno atribuído à btn.
31 |
2 |
3 |
4 | querySelector('.button')
5 | querySelector('.section')
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | handleClick
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
Execução: método querySelector() executado. Retorno atribuído à section.
32 |
2 |
3 |
4 | querySelector('.section')
5 | log('console 1')
6 | script.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | btn
15 | section
16 | handleClick
17 |
18 |
19 |
20 |
21 | console 1
22 |
23 |
26 |
27 |
28 |
29 |
Execução: método log() executado. Argumento retornado no console.
30 |
2 |
3 |
4 | log('console 1')
5 | script.js
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | btn
14 | section
15 | handleClick
16 |
17 |
18 |
19 |
20 | time
21 | anonymous()
22 |
23 |
26 |
27 | console 1
28 |
29 |
32 |
33 |
34 |
35 |
Execução: método setTimeout() executado. Callback colocado na Web Api, com tempo 0.
36 |
2 |
3 |
4 | log('console 2')
5 | script.js
6 |
7 |
8 |
9 | anonymous()
10 |
11 |
12 |
13 | btn
14 | section
15 | handleClick
16 |
17 |
18 |
19 |
20 | time
21 | anonymous()
22 |
23 |
26 |
27 | console 1
28 | console 2
29 |
30 |
33 |
34 |
35 |
36 |
Execução: método log() executado. Argumento retornado no console.
37 |
JS Engine
8 |
12 | Exemplos:
13 |
20 |
21 |
22 |
26 |
27 | Call Stack
28 |
29 |
30 |
31 |
32 |
event loop
33 |
34 |
36 |
37 | Task Queue
38 |
39 |
40 |
44 |
48 |
52 |
56 |
62 |
63 | Anotações
64 |
65 |
66 |
67 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/js/prism-custom.js:
--------------------------------------------------------------------------------
1 | Prism.languages.insertBefore('js','keyword', {
2 | 'arrow': /(=>)/,
3 | 'condicional': /\b(if|else)\b/,
4 | 'special': /\b(?:document|window)\b/,
5 | 'function-2': /([\w][\w]*)(?=: function)/gi,
6 | 'object-property': /([A-z]*(\:))/gi,
7 | 'property': /(?:\.)[\w][\w]*(?=[\s.]|\)|\;)/g,
8 | });
9 |
10 | Prism.languages.insertBefore('css','selector', {
11 | 'number': /(\d)/g,
12 | });
13 |
14 | Prism.languages.insertBefore('markup','tag', {
15 | 'evt': /\(e\)/i,
16 | });
17 |
18 |
19 | !function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e="line-numbers",t=/\n(?!$)/g,n=function(e){var n=r(e),s=n["white-space"];if("pre-wrap"===s||"pre-line"===s){var l=e.querySelector("code"),i=e.querySelector(".line-numbers-rows"),a=e.querySelector(".line-numbers-sizer"),o=l.textContent.split(t);a||(a=document.createElement("span"),a.className="line-numbers-sizer",l.appendChild(a)),a.style.display="block",o.forEach(function(e,t){a.textContent=e||"\n";var n=a.getBoundingClientRect().height;i.children[t].style.height=n+"px"}),a.textContent="",a.style.display="none"}},r=function(e){return e?window.getComputedStyle?getComputedStyle(e):e.currentStyle||null:null};window.addEventListener("resize",function(){Array.prototype.forEach.call(document.querySelectorAll("pre."+e),n)}),Prism.hooks.add("complete",function(e){if(e.code){var r=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(r&&/pre/i.test(r.nodeName)&&(s.test(r.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s," ")),s.test(r.className)||(r.className+=" line-numbers");var l,i=e.code.match(t),a=i?i.length+1:1,o=new Array(a+1);o=o.join(")[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;
8 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | import initTooltip from './tooltip.js';
2 | Prism.highlightAll();
3 |
4 | const c = {
5 | contentArray: [],
6 | etapaInicial: 1,
7 | etapaAtual: 1,
8 | totalEtapas: 0,
9 | }
10 |
11 | if(window.self !== window.top) {
12 | document.querySelector('nav').classList.add('hide');
13 | }
14 |
15 | // Fetch inicial
16 | function init() {
17 | if(location.href.search('#') === -1)
18 | linkExemplos[0].click();
19 | else
20 | fetchAllContent(route(location), totalByLocation(location));
21 | }
22 |
23 | // Fetch dos itens do exemplo
24 | const linkExemplos = document.querySelectorAll('.link-exemplos a');
25 | linkExemplos.forEach(item => {
26 | item.addEventListener('click', handleLinkExemplo);
27 | });
28 | function handleLinkExemplo(event) {
29 | const currentLink = event.currentTarget;
30 | c.contentArray = [];
31 | c.etapaInicial = 1;
32 | c.etapaAtual = 1;
33 | c.totalEtapas = +currentLink.dataset.total;
34 | fetchAllContent(route(currentLink), c.totalEtapas);
35 | }
36 | function addClassToUrlLink(url) {
37 | linkExemplos.forEach(i => i.classList.remove('active'));
38 | const element = document.querySelector(`[href="#/${url}/"]`);
39 | element.classList.add('active');
40 | }
41 |
42 | // Limpa o url e retorna apenas a rota
43 | function route(url) {
44 | url = url.href.split('/');
45 | const total = url.length;
46 | return (url[total - 2] !== '#') ? url[total - 2] : url[total - 1];
47 | }
48 |
49 | // Puxa o total de slides, comparando o data atribute no link e o URL
50 | function totalByLocation(url) {
51 | const href = route(url);
52 | const link = document.querySelector(`[href="#/${href}/"]`);
53 | const total = +link.dataset.total;
54 | return total;
55 | }
56 |
57 | // Faz o fetch de todas as páginas e coloca na array c.contentArray
58 | function fetchAllContent(url, total) {
59 | fetch(`exemplos/${url}/${c.etapaInicial}.html`).then(r => r.text())
60 | .then(r => {
61 | c.etapaInicial++;
62 | c.contentArray.push(r);
63 | document.body.classList.add(url);
64 | if(c.etapaInicial <= total)
65 | fetchAllContent(url, total);
66 | else {
67 | c.totalEtapas = total;
68 | addClassToUrlLink(url);
69 | fetchEtapa(1);
70 | }
71 | });
72 | }
73 |
74 | // De acordo com a etapa seleciona o item na array c.contentArray e popula o DOM
75 | const dom = document.createElement('div');
76 | const etapaCounter = document.querySelector('.etapa');
77 |
78 | function fetchEtapa(etapa) {
79 | etapaCounter.innerText = etapa;
80 | dom.innerHTML = c.contentArray[etapa - 1];
81 | const elements = Array.from(dom.children);
82 | elements.forEach(element => {
83 | const actualElement = document.getElementById(element.id);
84 | if(element.id === 'code-line') {
85 | actualElement.nextElementSibling.dataset.line = element.dataset.line;
86 | Prism.highlightAll();
87 | if(element.dataset.line === '0') {
88 | setTimeout(() => {
89 | const code = document.querySelector('.code');
90 | code.querySelector('.line-highlight').remove();
91 | });
92 | }
93 | if(element.dataset.queue)
94 | document.querySelector('#event').classList.add('animate');
95 | else
96 | document.querySelector('#event').classList.remove('animate');
97 | }
98 |
99 | // Adiciona o line highlight no html
100 | if(element.id === 'html') {
101 | actualElement.dataset.line = element.dataset.line;
102 | if(element.dataset.line === '0')
103 | setTimeout(() => actualElement.querySelector('.line-highlight').remove());
104 | }
105 |
106 | actualElement.innerHTML = element.innerHTML;
107 | initTooltip(actualElement);
108 | if(element.id === 'code' || element.id === 'html')
109 | Prism.highlightAll();
110 | })
111 | // Remove os itens com data-remover
112 | const remover = document.querySelectorAll('[data-remove]');
113 | setTimeout(() => {remover.forEach(item => item.remove())}, 1000);
114 | activeTabWithClass();
115 | }
116 |
117 | function initNav() {
118 | const proximo = document.querySelector('.proximo');
119 | const anterior = document.querySelector('.anterior');
120 | proximo.addEventListener('click', handleProximo);
121 | anterior.addEventListener('click', handleAnterior);
122 | document.addEventListener('keydown', handleKey);
123 |
124 | function handleKey(event) {
125 | if(event.code === 'ArrowLeft') {
126 | handleAnterior()
127 | } else if(event.code === 'ArrowRight') {
128 | handleProximo()
129 | }
130 | }
131 |
132 | function handleProximo() {
133 | if(c.etapaAtual < c.totalEtapas) {
134 | fetchEtapa(++c.etapaAtual);
135 | }
136 | else if (c.etapaAtual >= c.totalEtapas) {
137 | c.etapaAtual = 1;
138 | fetchEtapa(c.etapaAtual);
139 | }
140 | }
141 |
142 | function handleAnterior() {
143 | if(c.etapaAtual > 1)
144 | fetchEtapa(--c.etapaAtual);
145 | else if (c.etapaAtual <= 1) {
146 | c.etapaAtual = c.totalEtapas;
147 | fetchEtapa(c.etapaAtual);
148 | }
149 | }
150 | }
151 | initNav();
152 |
153 | init();
154 |
155 | // Tab nav do Log e HTML
156 | function initTab() {
157 | const tabMenu = document.querySelectorAll('.js-tabmenu li a');
158 |
159 | if(tabMenu.length) {
160 | function activeTab(index, tabContent) {
161 | tabContent.forEach(item => item.classList.remove('active'));
162 | tabMenu.forEach(item => item.classList.remove('active'));
163 | tabContent[index].classList.add('active');
164 | tabMenu[index].classList.add('active');
165 | }
166 |
167 | function handleClick(event, index) {
168 | const tabContent = document.querySelectorAll('.js-tabcontent');
169 | event.preventDefault();
170 | activeTab(index, tabContent);
171 | };
172 |
173 | tabMenu.forEach((itemMenu, index) => {
174 | itemMenu.addEventListener('click', (event) => handleClick(event, index));
175 | });
176 |
177 | }
178 | }
179 |
180 | function activeTabWithClass() {
181 | const tabContent = document.querySelector('.js-tabcontent .active');
182 | if(tabContent) {
183 | const activeItens = document.querySelectorAll('.js-tabcontent.active, .js-tabmenu .active');
184 | activeItens.forEach(item => item.classList.remove('active'));
185 | const id = tabContent.parentElement.id;
186 | document.querySelector(`.${id}`).classList.add('active');
187 | document.querySelector(`[href="#${id}"]`).classList.add('active');
188 | }
189 | }
190 |
191 | initTab();
--------------------------------------------------------------------------------
/js/tooltip.js:
--------------------------------------------------------------------------------
1 | export default function initTooltip(box) {
2 | const tooltips = box.querySelectorAll('[aria-label]');
3 | const tooltipBoxs = document.querySelectorAll('.tooltip');
4 | tooltipBoxs.forEach(t => t.remove());
5 |
6 | tooltips.forEach((item) => {
7 | item.addEventListener('mouseover', onMouseOver);
8 | })
9 |
10 | function onMouseOver(event) {
11 | const tooltipBox = criarTooltipBox(this);
12 |
13 | onMouseMove.tooltipBox = tooltipBox;
14 | this.addEventListener('mousemove', onMouseMove);
15 |
16 | onMouseLeave.tooltipBox = tooltipBox;
17 | onMouseLeave.element = this;
18 | this.addEventListener('mouseleave', onMouseLeave);
19 | }
20 |
21 | const onMouseLeave = {
22 | handleEvent() {
23 | this.tooltipBox.remove();
24 | this.element.removeEventListener('mouseleave', onMouseLeave);
25 | this.element.removeEventListener('mousemove', onMouseMove);
26 | }
27 | }
28 |
29 | const onMouseMove = {
30 | handleEvent(event) {
31 | this.tooltipBox.style.top = event.pageY + 20 + 'px';
32 | this.tooltipBox.style.left = event.pageX + -40 + 'px';
33 | }
34 | }
35 |
36 | function criarTooltipBox(element) {
37 | const tooltipBox = document.createElement('div');
38 | const text = element.getAttribute('aria-label');
39 | tooltipBox.classList.add('tooltip');
40 | tooltipBox.innerText = text;
41 | document.body.appendChild(tooltipBox);
42 | return tooltipBox;
43 | }
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ## JS Engine
2 |
3 | Simulação de como o código JavaScript é executado.
4 |
5 | A mesma não representa a realidade, mas sim as principais etapas do processo de execução do código.
6 |
7 | Inspirado pelo projeto Loupe de Philip Roberts