-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs4j-teaser.yaml
716 lines (677 loc) · 31.3 KB
/
js4j-teaser.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
---
title: JavaScript For Java Developers (teaser)
trainersSecret: 123asd3
slides:
- id: opening
name: Hello World
title: JavaScript 4 Java Devs - Quick Introduction
left:
text: |
<h3>
Hello <span class="user-name"></span>!
</h3>
<h2>
<a href="http://devmeetings.pl"><img src="http://blacksoft.eu/files/devmeetings_240.png"></a>
rocks!
</h2>
code:
small: true
hideOutput: true
content: |
var username = localStorage.getItem('name');
while (!username) {
username = prompt("Please provide your name");
}
localStorage.setItem('name', username);
document.querySelector('.user-name').innerText = username;
right:
text:
>
<div class="text-center">
<a href="http://pl.tinypic.com?ref=oa2mbk" target="_blank">
<img src="http://i39.tinypic.com/oa2mbk.png" alt="Image and video hosting by TinyPic" width="400">
</a>
</div>
notes: |
What will we learn today:
- Introduction to HTML and CSS
- JavaScript basics
- id: run
name: Run
title: Clone project & install dependencies
text: |
<br>
<br><br>
<h1 class="text-center">
<span class="glyphicon glyphicon-saved text-muted"></span>
<a href="http://todr.me/files/devmeetings-js4j-teaser.zip">Download ZIP file with project</a>
</h1>
<h2 class="text-muted text-center">
Unpack to your workspace directory
</h2>
code:
hideOutput: true
small: true
content: |
var ready = false;
microtasks:
- description: Change <code>ready</code> value to <code>true</code>
hint: Write <code>ready=true</code> inside code editor.
js_assert: |
ready === true
- id: basics1
name: JS Basics
title: JS Essentials in 5 minutes
monitor: todos
code:
content: |
var todos = [{
title: "Checkout project from github",
completed: true
}, {
title: "Learn JS essentials",
completed: false
}];
for (var k in todos) {
console.log(todos[k]);
}
microtasks:
- description: Change <code>completed</code> state of second todo
hint: Change false to true in second todos in array
js_assert: |
todos[1].completed
- description: Add another todo to "todos" variable
hint: Just copy the object and paste after a comma
js_assert: |
todos[2].title && todos[2].completed !== undefined
notes: |
0. JS is:
* interpreted
* dynamically typed
* awesome
1. Keyword `var`
2. Assignment
3. String literal, Array literal
- Say something about auto-execution
- Show how to use object inspector
4. Opening Chrome Dev Tools / Firebug
- F12 / Ctrl+Shift+I
- Go to "Console" tab.
- Show where to search for errors
- Mention about Debugging
- id: html
name: HTML
title: HTML - old style
notes: |
Point out problems with this approach
microtasks:
- description: Change page title to <code>HTML5 Rocks</code>
hint: Locate tag <code><title></code> and change it's value
html: "<TITLE>HTML5 Rocks</TITLE>"
- description: Add <code>deprecated</code> class to HTML element.
hint: Change tag <html> at top to <html class="deprecated">
html: <HTML class="deprecated">
fiddle:
pure: true
big: true
html: &oldwp |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<base href="https://web.archive.org/web/19990208011032/http://wp.pl/">
<META HTTP-EQUIV="KeyWords" CONTENT="Wirtualna Polska, Katalog stron WWW, Wyszukiwarka, Serwisy, Firmy, Encyklopedia, Pogoda,Wiadomości, Kalendarz, Wirtualny Sklep, Wirtualna Kawiarenka, Forum, Netscape">
<META name="description" content="Wirtualna Polska , Katalog Stron WWW, Wyszukiwarka, Serwisy, Encyklopedia">
<META Name="Language" CONTENT="Polski">
<TITLE>Wirtualna Polska</TITLE>
<STYLE TYPE="text/css">
TD { font-family: Arial ,Helvetica; font-size: 10pt; color: #013E87;}
.s { font-size: 10pt; color: #FFFFFF; }
.t { font-size: 10pt;}
.st { font-size: 10pt;}
.s2 { font-size: 10pt;}
.sm { font-size: 8pt;}
.ss { font-size: 5pt; }
.sn { font-size: 10pt; text-decoration: none;}
</STYLE>
</HEAD>
<BODY BGCOLOR="White" LINK="#013E87" VLINK="#013E87" TEXT="#013E87" ALINK="#C2010B">
<CENTER>
<TABLE ALIGN="Center" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="600" BGCOLOR="#FFFFFF">
<TR BGCOLOR="#D3E1ED">
<TD VALIGN="Middle" WIDTH="288" COLSPAN=2><NOBR><IMG SRC="/web/19990117091402im_/http://img.wp.pl/sl_wp.gif" BORDER=0><IMG SRC="/web/19990117091402im_/http://img.wp.pl/wp_wp.gif" ALT="Wirtualna Polska" BORDER="0"></NOBR></TD>
<TD VALIGN="Middle" WIDTH="140" ALIGN="Left">
<FONT FACE="Arial CE" COLOR="#1A3C73" SIZE=-2 class="st">
<A HREF="/web/19990117091402/http://www.ws.pl/" onMouseOver="window.status='Wirtualny Sklep'; return true" onMouseOut="window.status=''; return true"><FONT COLOR="#1A3C73">Wirtualny Sklep</Font></A><BR>
<A HREF="/web/19990117091402/http://kawiarenka.wp.pl/" onMouseOver="window.status='Wirtualna Kawiarenka'; return true" onMouseOut="window.status=''; return true"><FONT COLOR="#1A3C73">Wirtualna Kawiarenka</FONT></A><BR>
<A HREF="/web/19990117091402/http://encyklopedia.wp.pl/"><FONT COLOR="#1A3C73">Encyklopedia</FONT></A><BR>
<A HREF="/web/19990117091402/http://firmy.wp.pl/"><FONT COLOR="#1A3C73">Firmy</FONT></A></FONT></TD>
<TD VALIGN=Middle WIDTH="140" ALIGN="Right" HEIGHT=85>
<!--Reklama prawa start-->
<A HREF="/web/19990117091402/http://reklama.wp.pl/click_lx.ads/reklama.wp.pl/wp/Strona_Glowna/TopRight/973733938/TopRight/jtt/y2k-ver3-3.gif/63333735323633333336613161393030" target="_top"><IMG SRC="/web/19990117091402im_/http://reklama.wp.pl/adstream_lx.ads/reklama.wp.pl/wp/Strona_Glowna/TopRight/973733938/TopRight/jtt/y2k-ver3-3.gif/63333735323633333336613161393030" ALT="Powered by Adax" border=0 width=140 height=75 ALIGN=Left></A>
<!--Reklama stop-->
</TD>
</TR>
<TR>
<TD HEIGHT=2 COLSPAN=4><IMG SRC="/web/19990117091402im_/http://img.wp.pl/pixel.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR>
<TD ALIGN="Center" COLSPAN=4>
<NOBR>
<A HREF="/web/19990117091402/http://www.wp.pl/pomoc/"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/pomoc.gif" Alt="Pomoc" BORDER="0"></A>
<IMG SRC="/web/19990117091402im_/http://img.wp.pl/pixel.gif" WIDTH="40" HEIGHT="1" BORDER="0">
<A HREF="/web/19990117091402/http://www.wp.pl/nowa/index.html"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/nowa_wirtualna.gif" Alt="Nowa Wirtualna Polska" BORDER="0"></A>
<IMG SRC="/web/19990117091402im_/http://img.wp.pl/pixel.gif" WIDTH="40" HEIGHT="1" BORDER="0">
<A HREF="/web/19990117091402/http://poczta.wp.pl/"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/poczta1.gif" Alt="moja poczta" BORDER="0"></A>
<IMG SRC="/web/19990117091402im_/http://img.wp.pl/pixel.gif" WIDTH="40" HEIGHT="1" BORDER="0">
<A HREF="/web/19990117091402/http://kawiarenka.wp.pl/"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/wirt_kaw.gif" Alt="Wirtualna Kawiarenka" BORDER="0"></A></NOBR></TD>
</TR>
</TABLE>
<TABLE ALIGN="Center" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="600" BGCOLOR="#FFFFFF">
<!-- Srodek -->
<TR>
<TD COLSPAN="3" VALIGN=Top>
<!--1 kolumna -->
<!-- Servis-->
<TABLE BORDER="0" CELLSPACING="4" CELLPADDING="0" WIDTH="134" BGCOLOR="#FFFFFF">
<TR BGCOLOR="#49A6C5">
<TD ALIGN="center"><FONT FACE="Arial,Helvetica" COLOR="#49A6C5" SIZE=-2><B CLASS="s">Serwisy</B></FONT></TD>
</TR>
<TR BGCOLOR="#FFFFFF">
<TD HEIGHT=1><IMG SRC="/web/19990117091402im_/http://img.wp.pl/pixel.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR BGCOLOR="#FFFFFF">
<TD ALIGN="Center">
<MAP NAME="serwis">
<AREA SHAPE="rect" COORDS="2,0,120,29" HREF="/web/19990117091402/http://kapital.wp.pl/" onmouseover="window.status='Serwis kapitałowy';return true" alt="Serwis kapitałowy">
<AREA SHAPE="rect" COORDS="2,33,120,52" HREF="/web/19990117091402/http://firmy.wp.pl/" onmouseover="window.status='Firmy';return true" alt="Firmy">
<AREA SHAPE="rect" COORDS="2,57,120,74" HREF="/web/19990117091402/http://encyklopedia.wp.pl/" onmouseover="window.status='Encyklopedia';return true" alt="Encyklopedia">
<AREA SHAPE="rect" COORDS="2,79,120,98" HREF="/web/19990117091402/http://wiadomosci.wp.pl/" onmouseover="window.status='Wiadomości';return true" alt="Wiadomości">
<AREA SHAPE="rect" COORDS="2,102,120,120" HREF="/web/19990117091402/http://pogoda.wp.pl/" onmouseover="window.status='Pogoda';return true" alt="Pogoda">
<AREA SHAPE="rect" COORDS="2,125,120,143" HREF="/web/19990117091402/http://bg.wp.pl/" onmouseover="window.status='Ból Głowy';return true" alt="Ból Głowy">
<AREA SHAPE="rect" COORDS="2,148,120,167" HREF="/web/19990117091402/http://dzieci.wp.pl/" onmouseover="window.status='Dla Dzieci';return true" alt="Dla Dzieci">
</MAP>
<IMG ismap SRC="/web/19990117091402im_/http://img.wp.pl/serwis1_1.gif" BORDER="0" usemap="#serwis">
</TD>
</TR>
<TR BGCOLOR="#49A6C5">
<TD ALIGN=Center BGCOLOR="#49A6C5"><FONT FACE="Arial,Helvetica" COLOR="#FFFFFF" SIZE=-1><B CLASS="s">Polecamy</B></FONT></TD>
</TR >
<!--reklama 1-->
<TR>
<TD HEIGHT="36">
<!--Reklama lewa3 start-->
<A HREF="/web/19990117091402/http://reklama.wp.pl/click_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Left3/588246689/Left3/dlaczego/dlaczego_wp.gif/63333735323633333336613161393030" target="_top"><IMG SRC="/web/19990117091402im_/http://reklama.wp.pl/adstream_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Left3/588246689/Left3/dlaczego/dlaczego_wp.gif/63333735323633333336613161393030" ALT="" border=0 width=134 height=36></A>
<!--Reklama stop-->
</TD>
</TR>
<TR>
<TD ALIGN=Center HEIGHT="36">
<!--Reklama lewa2 start-->
<A HREF="/web/19990117091402/http://reklama.wp.pl/click_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Left2/1988136203/Left2/sun/sun3.jpg/63333735323633333336613161393030" target="_top"><IMG SRC="/web/19990117091402im_/http://reklama.wp.pl/adstream_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Left2/1988136203/Left2/sun/sun3.jpg/63333735323633333336613161393030" ALT="" border=0 width=134 height=36></A>
<!--Reklama stop-->
</TD>
</TR>
<!--1 menu 1.4 -->
<TR BGCOLOR="#F9FAD6">
<TD HEIGHT="36"><A HREF="/web/19990117091402/http://www.wp.pl/Konferencja/"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/konf1.gif"BORDER="0"></A></TD>
</TR>
<!--1 menu 1.2 -->
<TR BGCOLOR="#F4F3E8">
<TD HEIGHT="36"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/s5.gif" ALIGN="Left" WIDTH="12" HEIGHT="13" BORDER="0" VSPACE="3" HSPACE="3"><A HREF="/web/19990117091402/http://forum.wp.pl/">
<FONT COLOR="#004080" SIZE="2" FACE="Arial CE">Forum Wirtualnej Polski</FONT></A></TD>
</TR>
<!--1 menu 1.3 -->
<TR BGCOLOR="#FFF2DE">
<TD HEIGHT="36"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/s6.gif" ALIGN="Left" WIDTH="12" HEIGHT="13" BORDER="0" VSPACE="3" HSPACE="3"><A HREF="/web/19990117091402/http://kg.wp.pl/"><FONT COLOR="#004080" SIZE="2" FACE="Arial CE">Księga Gości</FONT></A></TD>
</TR>
<!--1 menu 1.5 -->
<TR BGCOLOR="#DCF4DB">
<TD HEIGHT="36"><IMG SRC="/web/19990117091402im_/http://img.wp.pl/s4.gif" ALIGN="Left" WIDTH="12" HEIGHT="13" BORDER="0" VSPACE="3" HSPACE="3"><A HREF="/web/19990117091402/http://www.wp.pl/Netscape/"><FONT COLOR="#004080" SIZE="2" FACE="Arial CE">Netscape</FONT></A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR BGCOLOR="#D3E1ED">
<TD VALIGN="Middle" ALIGN="Left" HEIGHT="30" COLSPAN=4>
<FONT COLOR="#1A3C73" SIZE="-1" FACE="Arial CE" CLASS="st"> Copyright © 1995-1998 <A HREF="/web/19990117091402/http://www.wp.pl/"><FONT COLOR="#1A3C73">Wirtualna Polska</FONT></A> Sp. z o.o.<!--Reklama Position1 start-->
<A HREF="/web/19990117091402/http://reklama.wp.pl/click_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Position1/744609359/Position1/stat_wp_glowna/pixel.gif/63333735323633333336613161393030" target="_top"><IMG SRC="/web/19990117091402im_/http://reklama.wp.pl/adstream_lx.ads/reklama.wp.pl/wp/Strona_Glowna/Position1/744609359/Position1/stat_wp_glowna/pixel.gif/63333735323633333336613161393030" ALT="" border=0 height=1 width=1></A>
<!--Reklama stop-->
</FONT></TD>
<TD VALIGN="Middle" ALIGN="Center" HEIGHT="30">
<FONT COLOR="#1A3C73" SIZE="-1" FACE="Arial CE" CLASS="st"><A HREF="/web/19990117091402/http://www.wp.pl/nowa/"><FONT COLOR="#1A3C73">O serwisie i firmie</FONT></A></FONT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
- id: htmlvs
name: HTML
title: HTML - old vs new
left:
fiddle:
hideOutput: true
big: true
active: html
html: &newhtml |
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav>Navigation</nav>
<section role="main" class="container-fluid">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h1>Slide content</h1>
</div>
</div>
</section>
<aside class="slide-controls">
<a target="slowmo" data-toggle="tooltip" title="Show code in Slowmo.js" class="btn btn-success slide-control ctrl-slowmo">
<span class="glyphicon glyphicon-dashboard"></span>
</a>
<button data-toggle="tooltip" title="Toggle projector mode" class="btn btn-danger slide-control ctrl-proj">
<span class="glyphicon glyphicon-bullhorn"></span>
</button>
<br>
<button data-toggle="tooltip" title="Previous" class="btn btn-info slide-control ctrl-prev">
<span class="glyphicon glyphicon-arrow-left"></span>
</button>
<button data-toggle="tooltip" title="Next" class="btn btn-info slide-control ctrl-next">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</aside>
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
css: &newcss |
.inspector-json, .output-ace, .editor {
font-size: 14px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}
#editor.trainers-notes {
font-size: 20px;
}
.slide-controls {
position: fixed;
right: 15px;
bottom: 50px;
opacity: 0.5;
transition: all 1s;
}
.slide-controls:hover {
opacity: 0.9;
}
.slide-controls .slide-control {
width: 48px;
height: 48px;
font-size: 24px;
line-height: 36px;
text-align: center;
display: inline-block;
margin: 3px;
transition: all .7s;
/*-webkit-filter: blur(1px) grayscale(.9);*/
-webkit-filter: grayscale(.95);
}
.slide-controls:hover .slide-control {
-webkit-filter: grayscale(.1);
}
.slide-controls .slide-control:hover {
-webkit-filter: none;
}
js: &newjs |
// Controls handling
var changeSlide = function(mod) {
console.log("Changing slide.", mod);
};
(function() {
var next = $('.ctrl-next'),
previous = $('.ctrl-prev');
var projector = $('.ctrl-proj');
var slowmo = $('.ctrl-slowmo');
projector.on('click', function() {
$('body').toggleClass('projector');
});
var changeSlide = function(mod) {
console.log("Changing slide.", mod);
};
var nextSlide = changeSlide.bind(null, 1);
var prevSlide = changeSlide.bind(null, -1);
next.on('click', nextSlide);
previous.on('click', prevSlide);
var $doc = $(document);
$doc.bind('keyup', 'right', nextSlide);
$doc.bind('keyup', 'space', nextSlide);
$doc.bind('keyup', 'down', nextSlide);
$doc.bind('keyup', 'pagedown', nextSlide);
$doc.bind('keyup', 'up', prevSlide);
$doc.bind('keyup', 'pageup', prevSlide);
$doc.bind('keyup', 'left', prevSlide);
}());
right:
text: <br><br>
code:
big: true
language: html
content: *oldwp
- id: dom1
name: HTML
title: HTML5 webpage
microtasks:
- description: Change color of header using <code>class="text-success"</code>
hint: Locate <h1> header in HTML code and add class to it.
html: <h1 \s*class="text-success">.*?</h1>
- description: Change <code>opacity</code> of <code>slide-controls</code> to <code>0.1</code>
hint: Go to CSS tab, locate .slide-controls and change opacity to 0.1
css: \.slide\-controls\s*{[^}]*?opacity:\s*0\.1;
fiddle:
big: true
active: html
html: *newhtml
css: *newcss
js: *newjs
notes: |
Talk sth about frameworks like TwitterBootstrap.
Other examples: Foundation,
Grid systems: Skeleton, HTML5 Boilerplate, LESS Framework
footer: |
<br>
<h2 class="checkbox">
<label>
<input type="checkbox" class="training-checkbox" data-training="html5" style="width:25px;height:25px">
I would be interested in <span class="text-primary">Semantic HTML5 and CSS3</span> training
</label>
</h2>
script: &trainingStats |
var $checkbox = $('.training-checkbox');
var training = $checkbox.data('training');
var username = localStorage.getItem('name');
var current = 'js4j-teaser';
$checkbox.bind('change', function(){
var state = this.checked;
localStorage.setItem(current+'-'+training, state);
$.ajax({
method: 'POST',
url: 'http://todr.me:3002/trainings',
data: {
user: username,
currentTraining: current,
training: training,
isGoing: state
}
});
});
$checkbox.prop('checked', !!localStorage.getItem(current+'-'+training));
- id: dom0
name: DOM
title: Document Object Model (DOM)
text: |
<div class="text-center">
<figure>
<a href="http://watershedcreative.com/naked/html-tree.html" target="dom">
<img src="http://watershedcreative.com/naked/img/dom-tree.png" />
</a>
<figcaption>
<address>
Source:
<a href="http://watershedcreative.com/naked/html-tree.html" target="dom">
http://watershedcreative.com/naked/html-tree.html
</a>
<span class="glyphicon glyphicon-new-window text-muted"></span>
</address>
</figcaption>
</figure>
</div>
notes: |
1. Ask about knowledge of DOM
2. Explain some basics and relation to XML
footer: |
<h2 class="checkbox">
<label>
<input type="checkbox" class="training-checkbox" data-training="dom" style="width:25px;height:25px">
I would be interested in <span class="text-primary">General DOM</span> training
</label>
</h2>
script: *trainingStats
- id: dom2
name: Accessing DOM
title: Hello DOM
microtasks:
- description: Change header text to <code>Accessing DOM - Vanilla.js</code> using Vanilla JS
hint: Try to assign text to <code>h1.innerText</code>
js: |
h1.inner(Text|HTML)\s*=\s*["']Accessing DOM \- Vanilla\.js["'];
- description: In <code>querySelector</code> find just <code>h1</code> instead of <code>h1 inside .main-content</code>
hint: Change querySelector to <code>h1</code> instead of <code>.main-content h1</code>
js: |
querySelector\(['"]h1['"]\);
left:
text: <h4> </h4>
monitor: content
code:
small: true
content: |
var h1 = document.querySelector(".main-content h1");
h1.innerText += ".Vanilla.";
var content = h1.innerHTML;
right:
text: |
<h4>
<span class="glyphicon glyphicon-new-window text-muted"></span>
<a class="jquery-link" href="http://jquery.com/" target="jquery">What is jQuery?</a>
</h4>
monitor: jqueryContent
code:
small: true
content: |
var $h1 = $('.main-content h1');
$h1.text($h1.text() + ".jQuery.");
var jqueryContent = $h1.html();
notes: |
Say about accessing DOM and JavaScript representation of DOM
Encourage ppl to play with content inside slide to see that more "..." is appended each time.
-------
Mention that this way might be more familiar to some developers.
Explain that jQuery is great library to manipulate DOM,
and it makes perfect sense to use it because it hides differences
between old web browsers.
However rest of slides will be using vanilla JS to simplify syntax.
Explain why we are using variables with such naming ($h1)
- id: dom4
name: Accessing DOM
title: Creating DOM elements
monitor: link
microtasks:
- description: Add class <code>btn</code> and <code>btn-default</code> to <code>$link</code>
hint: Use <code>className</code> property
js: |
\$link\.className\s*=\s*["']btn\s+btn\-default["'];
- description: Create <code><button></code> element instead of anchor <code><a></code>
hint: Change invocation of <code>d.createElement('a')</code>
js: |
d(ocument)?\.createElement\(["']button["']\)
fiddle:
js: |
var d = document;
var $link = d.createElement('a');
$link.id = 'link';
$link.href =
'https://developer.mozilla.org/en-US/docs/Web/API/Element';
$link.innerHTML = 'DOM: Element specification';
d.body.appendChild($link);
notes: |
1. Talk about difference between `querySelector` and `querySelectorAll`
2. Maybe someone will notice that strings are created via `'` not `"`.
- id: task-dom
name: Task 1
title: "Task: Displaying list of todos"
text:
>
<h4>
Drag and drop <code>public/index.html</code> to your browser.
</h4>
<h4>
Write some JavaScript in <code>public/javascripts/main.js</code> to display a list of todos.
</h4>
code:
small: true
hideOutput: true
content: |
var todos = [{
title: "Checkout project from github",
completed: true
}, {
title: "Learn JS essentials",
completed: false
}];
task:
duration: 30
objectives: Iterate over an array of todos and create DOM elements to display them as text.
extras:
- Display <code>completed</code> state of todo using disabled <code><input type="checkbox"></code>
- Use Bootstrap <code>.list-group</code> component.
solution:
name: Displaying list of todos - Solution
title: Displaying list of todos
fiddle:
big: true
active: html
js: |
var todos = [{
title: "Checkout project from github", completed: true
}, {
title: "Learn JS essentials", completed: false
}];
var $todosContainer = document.querySelector('.todos');
$todosContainer.className = 'list-group';
var k, todo, $todo, $checkbox;
for (k in todos) {
todo = todos[k];
$checkbox = document.createElement('input');
$checkbox.type = 'checkbox';
$checkbox.disabled = true;
$checkbox.checked = todo.completed;
$todo = document.createElement('a');
$todo.className = 'list-group-item';
$todo.appendChild($checkbox);
$todo.appendChild(document.createTextNode(todo.title));
$todosContainer.appendChild($todo);
}
html: |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todos</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!-- page content -->
<div class="todos"></div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
- id: whatsmore
name: What's more
title: What's more? Day 1
text: |
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
JS Objects - how do they work?
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
Functions, Contexts and Scopes
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
DOM Events - Reacting to User Actions
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
Functional JavaScript
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
LocalStorage - persistence for ClientSide applications
</h3>
- id: whatsmore2
name: What's more
title: What's more? Day 2
text: |
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
JSON - lightweight exchange format
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
REST - creating RESTful JSON API
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
AJAX - JS meets RESTful API
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
Play! Framework - The High Velocity Web Framework For Java and Scala
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
Object-oriented JS, JS MV* Frameworks
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
Node.js + MongoDB - JS meets Server Side
</h3>
<h3>
<span class="glyphicon glyphicon-ok text-success"></span>
JavaScripts caveats -
<span class="glyphicon glyphicon-new-window text-muted"></span>
<a target="ext" href="//wtfjs.com">WTF JS?</a>,
<span class="glyphicon glyphicon-new-window text-muted"></span>
<a target="ext" href="https://www.destroyallsoftware.com/talks/wat">WAT!?</a>
</h3>
- id: task-survey
name: Task 2
title: "Task: Complete the survey"
text: |
<h2>
<span class="glyphicon glyphicon-export text-muted"></span>
<a href="http://bit.ly/js4java-cohesiva">
Training Survey
</a>
</h2>
task:
duration: 5
objectives:
- Complete the survey under link above
extras:
- Provide very detailed answers to open-ended questions
- id: ending
name: Ending
title: How do you like JS?
text: |
<div class="text-center">
<a href="http://pl.tinypic.com?ref=oa2mbk" target="_blank">
<img src="http://i39.tinypic.com/oa2mbk.png" alt="Image and video hosting by TinyPic" width="400">
</a>
</div>
<h3 class="text-right">
<span class="icon-mail text-muted"></span>
<a href="mailto:[email protected]">[email protected]</a>
</h3>
<h3 class="text-right">
<span class="icon-github text-muted"></span> <a href="https://github.com/tomusdrw" target="profile">github/tomusdrw</a>
<span class="icon-google-plus text-muted"></span> <a href="https://plus.google.com/+TomaszDrwi%C4%99ga" target="profile">+Tomasz Drwięga</a>
<span class="icon-linkedin text-muted"></span> <a href="http://www.linkedin.com/in/tomaszdrwiega" target="profile">in/Tomasz Drwięga</a>
</h3>