-
Notifications
You must be signed in to change notification settings - Fork 0
/
完整簡報.html
936 lines (909 loc) · 189 KB
/
完整簡報.html
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
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
<!DOCTYPE html><html lang="zh-TW"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTAgMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJtMzIgOTAgNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNNDAgNzBIMjBWNTBtMjAgMEwyMCA3MG00MC00MGgyMHYyMG0tMjAgMCAyMC0yMCIgY2xhc3M9ImEiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgeD0iMTAiIHk9IjIwIiBjbGFzcz0iYSIgcng9IjUuNjciLz48cGF0aCBkPSJNMjAgNTBoMjB2MjBtLTIwIDAgMjAtMjBtNDAgMEg2MFYzMG0yMCAwTDYwIDUwIiBjbGFzcz0iYSIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNODcuOCA0Ny41Qzg5IDUwIDg3LjcgNTIgODUgNTJIMzVhOC43IDguNyAwIDAgMS03LjItNC41bC0xNS42LTMxQzExIDE0IDEyLjIgMTIgMTUgMTJoNTBhOC44IDguOCAwIDAgMSA3LjIgNC41ek02MCA1MnYzNm0tMTAgMGgyME00NSA0MmgyMCIvPjwvc3ZnPg==") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-bigger{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODBNNTIgOTBWMTAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button.bespoke-marp-presenter-note-smaller{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMTIgNTBoODAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}}@keyframes __bespoke_marp_transition_reduced_outgoing__{0%{opacity:1}to{opacity:0}}@keyframes __bespoke_marp_transition_reduced_incoming__{0%{mix-blend-mode:plus-lighter;opacity:0}to{mix-blend-mode:plus-lighter;opacity:1}}.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{::view-transition-group(*){animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-timing-function:ease}::view-transition-new(*),::view-transition-old(*){animation-delay:0s;animation-direction:var(--marp-bespoke-transition-animation-direction,normal);animation-duration:var(--marp-bespoke-transition-animation-duration,.5s);animation-fill-mode:both;animation-name:var(--marp-bespoke-transition-animation-name,var(--marp-bespoke-transition-animation-name-fallback,__bespoke_marp_transition_no_animation__));mix-blend-mode:normal}::view-transition-old(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_outgoing__;animation-timing-function:ease}::view-transition-new(*){--marp-bespoke-transition-animation-name-fallback:__bespoke_marp_transition_reduced_incoming__;animation-timing-function:ease}::view-transition-new(root),::view-transition-old(root){animation-timing-function:linear}::view-transition-new(__bespoke_marp_transition_osc__),::view-transition-old(__bespoke_marp_transition_osc__){animation-duration:0s!important;animation-name:__bespoke_marp_transition_osc__!important}::view-transition-new(__bespoke_marp_transition_osc__){opacity:0!important}.bespoke-marp-transition-warming-up::view-transition-group(*),.bespoke-marp-transition-warming-up::view-transition-new(*),.bespoke-marp-transition-warming-up::view-transition-old(*){animation-play-state:paused!important}body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{content-visibility:hidden;opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide:not(.bespoke-marp-active) *{view-transition-name:none!important}svg.bespoke-marp-slide.bespoke-marp-active{content-visibility:visible;opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide.bespoke-marp-active.bespoke-marp-active-ready *{animation-name:__bespoke_marp__!important}@supports not (content-visibility:hidden){svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}}}@media screen and (prefers-reduced-motion:reduce){svg.bespoke-marp-slide *{view-transition-name:none!important}}@media screen{[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{inset:0;position:absolute}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{view-transition-name:__bespoke_marp_transition_osc__;background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;contain:paint;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;user-select:none;white-space:nowrap;will-change:transform;z-index:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{background:#0288d1;flex:0 0 0;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{display:grid;font-family:Helvetica,Arial,sans-serif;grid-template:"current dragbar next" minmax(140px,1fr) "current dragbar note" 2fr "info dragbar note" 3em;grid-template-columns:minmax(3px,var(--bespoke-marp-presenter-split-ratio,66%)) 0 minmax(3px,1fr);height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container{background:#0288d1;cursor:col-resize;grid-area:dragbar;margin-left:-3px;opacity:0;position:relative;transition:opacity .4s linear .1s;width:6px;z-index:10}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container:hover{opacity:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-dragbar-container.active{opacity:1;transition-delay:0s}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;pointer-events:none;position:absolute;top:20px;-webkit-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#eee;grid-area:note;position:relative;z-index:1}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper{display:block;inset:0;position:absolute}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons{background:rgba(0,0,0,.65);border-radius:4px;bottom:0;display:flex;gap:4px;margin:12px;opacity:0;padding:6px;pointer-events:none;position:absolute;right:0;transition:opacity .2s linear}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-buttons:focus-within,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-presenter-note-wrapper:focus-within+.bespoke-marp-presenter-note-buttons,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container:hover .bespoke-marp-presenter-note-buttons{opacity:1;pointer-events:auto}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{word-wrap:break-word;box-sizing:border-box;font-size:calc(1.1em*var(--bespoke-marp-note-font-scale, 1));height:calc(100% - 40px);margin:20px;overflow:auto;padding-right:3px;scrollbar-color:hsla(0,0%,93%,.5) transparent;scrollbar-width:thin;white-space:pre-wrap;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,93%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#eee;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;overflow:hidden;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{box-sizing:border-box;display:block;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer:hover{cursor:pointer}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>div#\:\$p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#\:\$p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#\:\$p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:2em;margin:0.67em 0}div#\:\$p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#\:\$p>svg>foreignObject>section{page-break-before:always;break-before:page}div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;animation-delay:0s!important;animation-duration:0s!important;color-adjust:exact!important;transition:none!important}div#\:\$p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}div#\:\$p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp / Marpit Uncover theme
*
* @theme uncover
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#\:\$p>svg>foreignObject>section{word-wrap:break-word;--color-background:#fdfcff;--color-background-code:#f2f1f4;--color-background-paginate:rgba(32,34,40,.05);--color-foreground:#202228;--color-highlight:#009dd5;--color-highlight-hover:#087eaa;--color-highlight-heading:#33b1dd;--color-header:rgba(32,34,40,.4);--color-header-shadow:rgba(253,252,255,.8);background:var(--color-background);flex-flow:column nowrap;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:40px;height:720px;justify-content:center;letter-spacing:3px;line-height:1.4;padding:30px 70px;position:relative;text-align:center;width:1280px;z-index:0}div#\:\$p>svg>foreignObject>section{--marpit-root-font-size:40px}div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section:after{color:var(--color-foreground);display:flex}div#\:\$p>svg>foreignObject>section:after{align-items:flex-end;background:linear-gradient(-45deg,var(--color-background-paginate) 50%,transparent 50%);background-size:cover;font-size:.6em;height:80px;justify-content:flex-end;padding:30px;text-align:right;text-shadow:0 0 5px var(--color-background);width:80px}div#\:\$p>svg>foreignObject>section:after{--marpit-root-font-size:.6em}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs{background:#fff;color:#000}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-addition,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-meta,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-string,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-symbol,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-template-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-template-variable{color:#756bb1}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-comment,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-quote{color:#636363}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-bullet,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-link,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-literal,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-number,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-regexp{color:#31a354}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-deletion,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-variable{color:#88f}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-built_in,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-doctag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-keyword,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-name,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-section,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-class,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-id,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-selector-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-strong,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-tag,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-title,div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-type{color:#3182bd}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section:where(:not(.invert)) .hljs-attribute{color:#e6550d}div#\:\$p>svg>foreignObject>section:where(.invert){--color-background:#202228;--color-background-code:#2b2d33;--color-background-paginate:hsla(0,0%,100%,.05);--color-foreground:#fff;--color-highlight:#60d0f0;--color-highlight-hover:#88dcf4;--color-highlight-heading:#80d9f3;--color-header:hsla(0,0%,100%,.4);--color-header-shadow:rgba(32,34,40,.8)}div#\:\$p>svg>foreignObject>section:where(.invert) :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}div#\:\$p>svg>foreignObject>section:where(.invert) code.hljs{padding:3px 5px}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs{background:#222;color:#fff}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-comment,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-quote{color:#777}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-built_in,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-bullet,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-deletion,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-link,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-literal,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-meta,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-number,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-params,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-regexp,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-symbol,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-tag,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-template-variable,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-variable{color:#ab875d}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-attribute,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-name,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-section,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-class,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-id,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-title,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-type{color:#9b869b}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-addition,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-keyword,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-selector-tag,div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-string{color:#8f9c6c}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-emphasis{font-style:italic}div#\:\$p>svg>foreignObject>section:where(.invert) .hljs-strong{font-weight:700}div#\:\$p>svg>foreignObject>section>:first-child,div#\:\$p>svg>foreignObject>section[data-header]>:nth-child(2){margin-top:0}div#\:\$p>svg>foreignObject>section>:last-child,div#\:\$p>svg>foreignObject>section[data-footer]>:nth-last-child(2){margin-bottom:0}div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section p{margin:0 0 15px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){margin:15px 0 30px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) strong,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) strong,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) strong,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) strong,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) strong,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) strong{color:var(--color-highlight-heading);font-weight:inherit}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h2,marp-h2)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h3,marp-h3)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h4,marp-h4)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h5,marp-h5)::part(auto-scaling),div#\:\$p>svg>foreignObject>section :is(h6,marp-h6)::part(auto-scaling){max-height:660px}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1){font-size:2em}div#\:\$p>svg>foreignObject>section :is(h2,marp-h2){font-size:1.7em}div#\:\$p>svg>foreignObject>section :is(h3,marp-h3){font-size:1.4em;letter-spacing:2px}div#\:\$p>svg>foreignObject>section :is(h4,marp-h4){font-size:1.2em;letter-spacing:2px}div#\:\$p>svg>foreignObject>section :is(h5,marp-h5){font-size:1em;letter-spacing:1px}div#\:\$p>svg>foreignObject>section :is(h6,marp-h6){font-size:.8em;letter-spacing:1px}div#\:\$p>svg>foreignObject>section footer,div#\:\$p>svg>foreignObject>section header{color:var(--color-header);font-size:.45em;left:70px;letter-spacing:1px;position:absolute;right:70px;text-shadow:0 1px 0 var(--color-header-shadow);z-index:1}div#\:\$p>svg>foreignObject>section header{top:30px}div#\:\$p>svg>foreignObject>section footer{bottom:30px}div#\:\$p>svg>foreignObject>section a{color:var(--color-highlight);text-decoration:none}div#\:\$p>svg>foreignObject>section a:hover{color:var(--color-highlight-hover);text-decoration:underline}div#\:\$p>svg>foreignObject>section ol,div#\:\$p>svg>foreignObject>section ul{margin:0 auto;text-align:left}div#\:\$p>svg>foreignObject>section>ol,div#\:\$p>svg>foreignObject>section>ul{margin-bottom:15px}div#\:\$p>svg>foreignObject>section code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;letter-spacing:0}div#\:\$p>svg>foreignObject>section :not(:is(pre,marp-pre))>code,div#\:\$p>svg>foreignObject>section>code{background:var(--color-background-code);color:var(--color-foreground);margin:-.2em .2em .2em;padding:.2em}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre){--preserve-aspect-ratio:xMidYMid meet;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));font-size:70%;line-height:1.15;margin:15px 0 30px;text-align:left}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)::part(auto-scaling){max-height:570px}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre)>code{background:var(--color-background-code);box-sizing:content-box;color:var(--color-foreground);display:block;margin:0 auto;min-width:456px;padding:.4em .6em}div#\:\$p>svg>foreignObject>section[data-size="4:3"] :is(pre,marp-pre)>code{min-width:328px}div#\:\$p>svg>foreignObject>section table{border-collapse:collapse;margin:0 auto 15px}div#\:\$p>svg>foreignObject>section table>tbody>tr>td,div#\:\$p>svg>foreignObject>section table>tbody>tr>th,div#\:\$p>svg>foreignObject>section table>thead>tr>td,div#\:\$p>svg>foreignObject>section table>thead>tr>th{padding:.15em .5em}div#\:\$p>svg>foreignObject>section table>thead>tr>td,div#\:\$p>svg>foreignObject>section table>thead>tr>th{border-bottom:3px solid}div#\:\$p>svg>foreignObject>section table>tbody>tr:not(:last-child)>td,div#\:\$p>svg>foreignObject>section table>tbody>tr:not(:last-child)>th{border-bottom:1px solid}div#\:\$p>svg>foreignObject>section blockquote{font-size:90%;line-height:1.3;padding:0 2em;position:relative;z-index:0}div#\:\$p>svg>foreignObject>section blockquote:after,div#\:\$p>svg>foreignObject>section blockquote:before{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNDQgMTkuMyAzOC45NCAwQzguMTQgOS41OSAwIDQwLjA1IDAgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3ptNTYgMEw5NC45NCAwQzY0LjE0IDkuNTkgNTYgNDAuMDUgNTYgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3oiIHN0eWxlPSJmaWxsOiM4ODg7b3BhY2l0eTouMzMiLz48L3N2Zz4=");height:auto;pointer-events:none;position:absolute;width:1em;z-index:-1}div#\:\$p>svg>foreignObject>section blockquote:before{left:0;top:0}div#\:\$p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#\:\$p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#\:\$p>svg>foreignObject>section mark{background:transparent;color:var(--color-highlight)}div#\:\$p>svg>foreignObject>:where(section):not([root]){--color-background-code:#222222;--color-foreground:#FFF}div#\:\$p>svg>foreignObject>section .language-python,div#\:\$p>svg>foreignObject>section marp-pre{border-radius:.5em;color:#FFF;padding:1.2em!important}div#\:\$p>svg>foreignObject>section code{border-radius:7px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="1" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="python%E7%88%AC%E8%9F%B2%E7%87%9F%E9%9A%8A"><strong>PYTHON爬蟲營隊</strong></h1>
<p>西苑高中資訊志工隊 x 龍津高中</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="2" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/Web-Design-Camp/main/group.jpg");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="2" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="%E9%97%9C%E6%96%BC%E6%88%91%E5%80%91">關於我們</h1>
<p>西苑高中資訊志工隊是<br />
西苑高中的資訊志工隊</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="2" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="3" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E6%97%A5%E7%A8%8B%E8%A1%A8">日程表</h1>
<ul>
<li>開場: 9.00~9.30</li>
<li>凱歌地牢: 9.30~11.00</li>
<li>Py基本語法: 11.00~12.00</li>
<li>吃飯&午休: 12.00~13.00</li>
<li>爬蟲: 13.00~15.00
<ul>
<li>基本HTML: 13.00~13.20</li>
<li>爬蟲原理: 13.20~13.30</li>
<li>實作: 13.30~15.00</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="4" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E7%94%9A%E9%BA%BC%E6%98%AF-python">甚麼是 Python?</h1>
<p>Python 是一種直譯式、互動式、物件導向、腳本語言。<br />
Guido van Rossum在1989花三個禮拜做的。</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="12" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="5" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<div style="display:flex; align-item: center;"><div style="margin-right:3em">
<h1 id="%E5%8F%AF%E4%BB%A5%E5%B9%B9%E5%98%9B">可以幹嘛</h1>
<ul>
<li data-marpit-fragment="1">程式邏輯教學</li>
<li data-marpit-fragment="2">影像處理</li>
<li data-marpit-fragment="3">演算法練習</li>
<li data-marpit-fragment="4">軟體開發</li>
<li data-marpit-fragment="5">大數據分析</li>
</ul>
</div>
<div text-align=right>
<ul>
<li data-marpit-fragment="6">網頁應用</li>
<li data-marpit-fragment="7">圖表繪製</li>
<li data-marpit-fragment="8">後端資料庫</li>
<li data-marpit-fragment="9">AI 深度學習</li>
<li data-marpit-fragment="10">作業系統應用</li>
<li data-marpit-fragment="11">遊戲引擎</li>
<li data-marpit-fragment="12">韌體開發</li>
</ul>
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="6" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/qrcode.png");background-size:60%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="6" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="6" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
<h2 id="%E5%8A%A0%E6%B2%B9">加油! </h2>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="6" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="7" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><img src="https://codecombat.cn/images/pages/base/logo.webp" alt="" style="width:600px;" /></p>
<p>CodeCombat 認識Python</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="8" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AE%89%E8%A3%9Dvs-code">安裝VS Code</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="9" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%B8%8B%E8%BC%89%E4%B8%A6%E5%AE%89%E8%A3%9D">下載並安裝</h1>
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/VSCode.png" alt="" style="width:1000px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="10" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AE%89%E8%A3%9Dpython">安裝python</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="11" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%B8%8B%E8%BC%89%E5%AE%8C%E5%BE%8C%E9%96%8B%E5%95%9F">下載完後開啟</h1>
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/py.png" alt="" style="width:1000px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="12" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>Add python.exe to PATH<br />
記得打勾</p>
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/py2.png" alt="" style="width:800px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="13" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AE%89%E8%A3%9Dvscode%E6%8F%92%E4%BB%B6">安裝vscode插件</h1>
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/py3.png" alt="" style="width:800px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="14" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg");background-size:40%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="14" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="14" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
<h1 id="python%E5%9F%BA%E7%A4%8E%E8%AA%9E%E6%B3%95">Python基礎語法</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="14" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="15" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="python-%E7%B0%A1%E4%BB%8B">Python 簡介</h1>
<ul>
<li data-marpit-fragment="1">直譯式程式語言</li>
<li data-marpit-fragment="2">易於學習、閱讀和維護</li>
<li data-marpit-fragment="3">廣泛應用於AI領域</li>
<li data-marpit-fragment="4">網路爬蟲</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-fragments="6" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="16" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E8%AE%8A%E6%95%B8">變數</h1>
<ul>
<li data-marpit-fragment="1">儲存資料</li>
<li data-marpit-fragment="2">數字不可用於開頭字元。</li>
<li data-marpit-fragment="3">可以使用英文字元、數字或下底線(_)命名。ex : number_id</li>
<li data-marpit-fragment="4">英文大小寫是有差異的。</li>
<li data-marpit-fragment="5">名稱不可使用python語言保留字詞。ex : int</li>
<li data-marpit-fragment="6">python會自己判斷資料型態</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">x = <span class="hljs-string">"我是變數"</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="17" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><strong>輸出</strong></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-built_in">print</span>(<span class="hljs-string">"Hello world"</span>)
</code></pre>
<p><strong>輸入</strong></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">x = <span class="hljs-built_in">input</span>(<span class="hljs-string">"Hello world"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-marpit-fragments="1" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="18" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AF%A6%E4%BD%9C%E6%99%82%E9%96%93">實作時間</h1>
<h3 id="%E9%A1%8C%E7%9B%AE%E8%BC%B8%E5%87%BA%E4%B8%80%E5%80%8B%E5%8F%AB%E5%81%9Ax%E7%9A%84%E8%AE%8A%E6%95%B8">題目:"輸出"一個叫做"x"的"變數"</h3>
<h3 id="%E8%BC%B8%E5%87%BA%E7%B5%90%E6%9E%9C%E6%9C%83%E6%98%AFhello-world">輸出結果會是"Hello World"</h3>
<ul>
<li data-marpit-fragment="1">在Hello World前後要加上'' or ""</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="19" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E8%A7%A3%E7%AD%94">解答</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">x = <span class="hljs-built_in">input</span>(<span class="hljs-string">"Hello World"</span>)
<span class="hljs-built_in">print</span>(x)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="20" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://2.bp.blogspot.com/-_3mSYmviumc/WqZDKygsbkI/AAAAAAAAC_c/yuBBl5oxiAsyOaODImUXgTkGF5KRqAokACLcBGAs/s1600/python%2B.jpg");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="20" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="20" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="21" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E8%B3%87%E6%96%99%E5%9E%8B%E6%85%8B">資料型態</h1>
<ul>
<li data-marpit-fragment="1">數值型態(Numeric type) - int, float, bool</li>
<li data-marpit-fragment="2">字串型態(String type) - str</li>
<li data-marpit-fragment="3">容器型態(Container type) - list, set, dict, tuple</li>
<li data-marpit-fragment="4">用type()查看資料型態</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-marpit-fragments="7" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="22" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E6%95%B8%E5%80%BC%E5%9E%8B%E6%85%8B">數值型態</h1>
<ul>
<li data-marpit-fragment="1">int
<ul>
<li data-marpit-fragment="2">整數</li>
</ul>
</li>
<li data-marpit-fragment="3">float
<ul>
<li data-marpit-fragment="4">浮點數(有小數點)</li>
</ul>
</li>
<li data-marpit-fragment="5">bool
<ul>
<li data-marpit-fragment="6">ture</li>
<li data-marpit-fragment="7">faulse</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-marpit-fragments="5" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="23" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AD%97%E4%B8%B2%E5%9E%8B%E6%85%8B">字串型態</h1>
<ul>
<li data-marpit-fragment="1">str(string)
<ul>
<li data-marpit-fragment="2">字串</li>
<li data-marpit-fragment="3">用''或""包住</li>
<li data-marpit-fragment="4">可用+連接</li>
<li data-marpit-fragment="5">len()查看長度</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="24" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%AE%B9%E5%99%A8%E5%9E%8B%E6%85%8B%E4%B9%8B%E4%B8%80list">容器型態之一:list</h1>
<ul>
<li data-marpit-fragment="1">放多個資料的地方</li>
<li data-marpit-fragment="2">由中括號組成並以逗號隔開不同資料(型態可不同)</li>
<li data-marpit-fragment="3">索引值從0開始</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">i_am_list = []<span class="hljs-comment"># 宣告一個變數叫i_am_list</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-marpit-fragments="6" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="25" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E9%81%8B%E7%AE%97%E5%AD%90">運算子</h1>
<ul>
<li data-marpit-fragment="1">算術運算子
<ul>
<li data-marpit-fragment="2"><code>+</code>加</li>
<li data-marpit-fragment="3"><code>-</code>減</li>
<li data-marpit-fragment="4"><code>*</code>乘</li>
<li data-marpit-fragment="5"><code>/</code>除</li>
<li data-marpit-fragment="6"><code>%</code>取餘數</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="26" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h2 id="%E9%97%9C%E4%BF%82%E9%81%8B%E7%AE%97%E5%AD%90">關係運算子</h2>
<p>< 小於<br />
> 大於 <br />
<= 小於等於 <br />
>= 大於等於<br />
== 相等 <br />
!= 不相等</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="27" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h2 id="%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90">邏輯運算子</h2>
<ul>
<li data-marpit-fragment="1"><code>「and:且」</code><br />
全都正確才正確</li>
<li data-marpit-fragment="2"><code>「or:或」</code><br />
一個正確才正確</li>
<li data-marpit-fragment="3"><code>「not:非」</code><br />
對-->錯;錯-->對</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-marpit-fragments="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="28" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h2 id="if">if</h2>
<p>判斷條件</p>
<ul>
<li data-marpit-fragment="1">對-->執行if中的程式</li>
<li data-marpit-fragment="2">錯-->跳出if往下執行，執行else</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="29" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://www.theinsaneapp.com/wp-content/uploads/2022/04/programming-concepts-if-else-statement-explained.webp");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="29" data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="29" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="else-if">else-if</h2>
<ul>
<li data-marpit-fragment="1">用於多的條件時</li>
<li data-marpit-fragment="2">if執行時會跳過elif和else</li>
<li data-marpit-fragment="3">if是錯的-->判斷else-if，都錯-->執行else</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="29" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="30" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">x = <span class="hljs-literal">True</span>
y = <span class="hljs-literal">False</span>
<span class="hljs-keyword">if</span> y: <span class="hljs-comment"># False</span>
<span class="hljs-built_in">print</span>(<span class="hljs-string">"No way"</span>)
<span class="hljs-keyword">elif</span> x <span class="hljs-keyword">and</span> y: <span class="hljs-comment"># True and False</span>
<span class="hljs-built_in">print</span>(<span class="hljs-string">"come on!"</span>)
<span class="hljs-keyword">elif</span> <span class="hljs-keyword">not</span> x: <span class="hljs-comment"># not True</span>
<span class="hljs-built_in">print</span>(<span class="hljs-string">"please"</span>)
<span class="hljs-keyword">else</span> <span class="hljs-comment"># do this</span>
<span class="hljs-built_in">print</span>(<span class="hljs-string">"嗨壓"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="31" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:60%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://media.tenor.com/R5IECfIf34YAAAAd/fish-spinning.gif");"></figure></div></section></foreignObject><foreignObject width="40%" height="720"><section id="31" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="31" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:60%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="%E8%BF%B4%E5%9C%88">迴圈</h1>
<p>重複執行類似的事</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="31" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="32" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="for">for</h1>
<p>可以透過Python迴圈來讀取串列中的每一個元素<br />
較適用於「已知迴圈數」的問題<br />
格式：</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>, <span class="hljs-number">2</span>):
<span class="hljs-comment"># 放要執行的東西</span>
</code></pre>
<p>range(起始值,結束值,間距值)</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="33" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="while">while</h1>
<p>較適用於「無法預知迴圈數」的問題<br />
格式：</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">while</span> 條件: <span class="hljs-comment"># 條件成立</span>
<span class="hljs-comment"># 放要執行的東西</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="34" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="break">break</h1>
<p>強制跳出整個迴圈</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1</span>,<span class="hljs-number">5</span>):
<span class="hljs-keyword">if</span>(i == <span class="hljs-number">3</span>):
<span class="hljs-keyword">break</span>
<span class="hljs-built_in">print</span>(i) <span class="hljs-comment"># 所以結果會列出3</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="35" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h2 id="continue">continue</h2>
<p>強制跳出這過迴圈</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1</span>,<span class="hljs-number">5</span>):
<span class="hljs-keyword">if</span>(i == <span class="hljs-number">3</span>):
<span class="hljs-keyword">continue</span>
<span class="hljs-built_in">print</span>(i) <span class="hljs-comment"># 會列出5</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="36" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="html">HTML</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="37" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="html-1">HTML</h1>
<p>超文本標記語言(HyperText Markup Language)<br />
網站的骨架<br />
<img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/%E9%AA%A8%E6%9E%B6%E3%80%81%E5%A4%96%E8%A7%80%E3%80%81%E8%A1%8C%E7%82%BA.png" alt="HTML,css,js" style="width:400px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="38" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%85%83%E7%B4%A0">元素</h1>
<p>網站所有東西都是由元素組成<br />
<img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/element.svg" alt="" style="width:1000px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="39" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E6%96%87%E5%AD%97">文字</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>段落
<span class="hljs-tag"><<span class="hljs-name">b</span>></span>粗體<span class="hljs-tag"></<span class="hljs-name">b</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span>></span>斜體<span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"><<span class="hljs-name">s</span>></span>刪除線<span class="hljs-tag"></<span class="hljs-name">s</span>></span>
<span class="hljs-tag"><<span class="hljs-name">u</span>></span>底線<span class="hljs-tag"></<span class="hljs-name">u</span>></span>
H<span class="hljs-tag"><<span class="hljs-name">sup</span>></span>+<span class="hljs-tag"></<span class="hljs-name">sup</span>></span>
CO<span class="hljs-tag"><<span class="hljs-name">sub</span>></span>2<span class="hljs-tag"></<span class="hljs-name">sub</span>></span>
<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="40" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="40" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><strong>粗體</strong><br />
<em>斜體</em><br />
<s>刪除線</s><br />
<u>底線</u><br />
H<sup>+</sup> CO<sub>2</sub></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="41" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="41" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%9C%96%E7%89%87">圖片</h1>
<p>格式</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"來源"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"文字敘述"</span>></span>
</code></pre>
<p>範例</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Google"</span>></span>
</code></pre>
<p><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="42" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="42" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E7%B6%B2%E9%A0%81%E5%8E%9F%E7%90%86"><strong>網頁原理</strong></h1>
<p>講師：蕭翊均、林欣儒</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="43" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://media.discordapp.net/attachments/848564001059241984/1119427305987645470/http_communication_4.png?width=1439&height=607");background-size:80%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="43" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="43" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="43" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-marpit-fragments="5" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="44" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ol>
<li>瀏覽器去 DNS (電話簿)查 IP 地址</li>
<li>瀏覽器向伺服器傳送 HTTP 請求網站資料
<ul>
<li data-marpit-fragment="1">交通規則 - HTTPS、FTP</li>
<li data-marpit-fragment="2">交通工具 - GET</li>
</ul>
</li>
<li>伺服器回傳回應
<ul>
<li data-marpit-fragment="3">狀態(如200 OK, 404 Not Found)
<ul>
<li data-marpit-fragment="4"><a href="https://http.cat/">各種 HTTP 狀態碼介紹</a></li>
</ul>
</li>
<li data-marpit-fragment="5">檔案(如HTML, CSS, JS, JPG, PNG)</li>
</ul>
</li>
<li>瀏覽器把一小塊一小塊的東西(封包)，組合成完整的網站，並把它呈現起來</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="45" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="45" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="ip-adress--dns">IP Adress & DNS</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="46" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="46" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ol>
<li><strong>IP Address</strong><br />
當連上網路後，每台電腦在網路中的位置
<ul>
<li data-marpit-fragment="1">IPv4、IPv6</li>
<li data-marpit-fragment="2">Google: 172.217.160.110 / 2404:6800:4012:1::200e</li>
</ul>
</li>
<li><strong>DNS(Domain Name System)</strong><br />
一個可以把IP跟域名(Domain)轉換的系統
<ul>
<li data-marpit-fragment="3">172.217.160.110 www.google.com</li>
<li data-marpit-fragment="4">可以申請自己的網域</li>
</ul>
</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="47" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E7%B6%B2%E8%B7%AF%E7%88%AC%E8%9F%B2%E5%92%8C%E5%AE%83%E7%9A%84%E6%87%89%E7%94%A8">網路爬蟲和它的應用</h1>
<p>講師：陳邱嵩、賴諺毅</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="48" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="48" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%BB%80%E9%BA%BC%E6%98%AF%E7%B6%B2%E8%B7%AF%E7%88%AC%E8%9F%B2">什麼是網路爬蟲</h1>
<h3 id="%E7%95%B6%E6%88%90%E6%98%AF%E8%9C%98%E8%9B%9B%E7%B6%B2">當成是蜘蛛網</h3>
<ul>
<li>用於從網際網路上擷取資料
<ul>
<li>可以爬重要的資訊:校網</li>
<li><s>最大功用是收集梗圖</s></li>
</ul>
</li>
<li>可以模擬人類在網頁上的瀏覽行為</li>
<li>自動下載網頁並提取其中的資訊</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="49" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://4.bp.blogspot.com/-xZR9-dxRN4c/WHWDqjLLj7I/AAAAAAAFPiM/nn_ErIHYmxcvGh_RupSSYoU5e6e1SpPxwCEw/s1600/Bus%252B%2B%25E7%25AD%2589%25E5%2585%25AC%25E8%25BB%258A%2BApp-04.png");background-size:95%;"></figure><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/%E6%AF%9B%E5%93%A5%E9%9B%BB%E5%8F%B01.jpg");background-size:76%;"></figure><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/%E6%AF%9B%E5%93%A5%E9%9B%BB%E5%8F%B02.jpg");background-size:76%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="49" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="49" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="49" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="50" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="50" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E7%B6%B2%E8%B7%AF%E7%88%AC%E8%9F%B2%E7%9A%84%E7%A8%AE%E9%A1%9E">網路爬蟲的種類</h1>
<ul>
<li>通用網路爬蟲
<ul>
<li>可以爬取全網際網路中的資料搜尋</li>
<li>e.g: Google、Bing等搜尋引擎</li>
</ul>
</li>
<li>聚焦網路爬蟲-->這次ㄉ
<ul>
<li>aka主題爬蟲，這種爬蟲只會選擇性爬取資料</li>
<li>使用較少時間、資源</li>
</ul>
</li>
<li>增量式網路爬蟲
<ul>
<li>只爬取新資料，盡量減少空間和時間的消耗</li>
<li>開發較複雜、不太普及</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="51" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="51" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E7%88%AC%E8%9F%B2%E7%9A%84%E9%81%93%E5%BE%B7%E5%92%8C%E6%B3%95%E5%BE%8B%E8%80%83%E9%87%8F">爬蟲的道德和法律考量</h1>
<ul>
<li>遵守網站的使用條款和服務條款
<ul>
<li>在使用爬蟲之前<br />
應該仔細閱讀並理解網站的使用條款和服務條款</li>
</ul>
</li>
<li>尊重網站所有者的權益
<ul>
<li>不應該對網站造成過大的負擔或破壞</li>
<li>遵守網站的機器人協議（robots.txt）並尊重網站的限制</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="52" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://seosherpa.com/wp-content/uploads/2021/07/robots-txt-header.pg_.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="52" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="52" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="robottxt">robot.txt</h2>
<ul>
<li>告知網路爬蟲哪些網頁可以被訪問或爬取
<ul>
<li>遵守網站的使用規則</li>
<li>減少伺服器負載以及保護網站免受不必要的訪問<br />
</li>
</ul>
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="52" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="53" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="53" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h2 id="%E5%B8%B8%E8%A6%8B%E7%9A%84robotstxt%E8%A6%8F%E5%89%87">常見的robots.txt規則</h2>
<ol>
<li>允許所有爬蟲訪問整個網站</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>User-agent: *
Disallow:
</code></pre>
<ol start="2">
<li>禁止所有爬蟲訪問整個網站</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>User-agent: *
Disallow: /
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="54" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="54" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E9%9D%9C%E6%85%8B%E7%88%AC%E8%9F%B2"><strong>靜態爬蟲</strong></h1>
<ul>
<li>顧名思義就是只能專門爬靜態網站的爬蟲
<ul>
<li>靜態網站：預先產生好並且內容不會改變的網站(每次都是回應傳相同的檔案)</li>
</ul>
</li>
<li>優點：省資源、簡單</li>
<li>缺點：有的東西爬不到</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="55" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="55" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%8B%95%E6%85%8B%E7%88%AC%E8%9F%B2"><strong>動態爬蟲</strong></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="56" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="56" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="python-requests"><strong>Python Requests</strong></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="57" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="57" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="requests"><strong>Requests</strong></h1>
<ul>
<li>讓你可以用簡單的Python去對網站做請(<s>騷</s>)求(<s>擾</s>)</li>
<li>當然也可以自訂Header、帶參數
<ul>
<li>cookie, User-Agent, etc.</li>
</ul>
</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">pip3 install requests
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="58" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="58" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="beautifulsoup"><strong>BeautifulSoup</strong></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="59" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="59" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="beautifulsoup-1"><strong>BeautifulSoup</strong></h1>
<ul>
<li>aka美麗湯，用來處理HTML中的資料</li>
<li>會需要有<strong>語法分析器</strong>去分析HTML
<ul>
<li>e.g: lxml, html5lib(這邊使用html5lib)</li>
<li>不同語法分析器會有速度、結果的不同，有容錯率之別</li>
</ul>
</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">pip3 install beautifulsoup4
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="60" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-class="lead" data-theme="uncover" class="lead" data-marpit-pagination="60" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--class:lead;--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E9%9D%9C%E6%85%8B%E7%88%AC%E8%9F%B2%E5%AF%A6%E4%BD%9C"><strong>靜態爬蟲實作</strong></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="61" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="61" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E6%B5%81%E7%A8%8B"><strong>流程</strong></h1>
<ol>
<li>利用Python程式進行HTTP請求</li>
<li>利用HTML解析器(美麗湯4)處理資料</li>
<li>分析及利用網頁資源</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="62" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="62" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E9%80%99%E9%82%8A%E4%BB%A5%E6%A0%A1%E5%9C%92%E5%85%AC%E5%91%8A%E7%82%BA%E4%BE%8B"><strong>這邊以校園公告為例</strong></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="63" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="63" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%B8%8B%E8%BC%89">下載</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>pip3 install requests
</code></pre>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>pip3 install beautifulsoup4
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="64" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="64" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>引入需要用到的模組</li>
<li>進入到<a href="https://ljjhs.tc.edu.tw/p/403-1080-1244-1.php?Lang=zh-tw">神祕的地方</a>複製他的網址</li>
<li>用名叫url的變數儲存這條網址(字串)</li>
<li>以GET方式向網站請求資料，並儲存</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">from</span> bs4 <span class="hljs-keyword">import</span> BeautifulSoup
<span class="hljs-keyword">import</span> requests
url = <span class="hljs-string">"網址"</span>
response = requests.get(url).text
<span class="hljs-built_in">print</span>(response) <span class="hljs-comment">#看看他的HTML</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="65" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="65" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>把response丟給美麗湯4解析</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">soup = BeautifulSoup(response, <span class="hljs-string">'html5lib'</span>) <span class="hljs-comment">#5</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="66" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="66" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h3 id="%E6%8E%A5%E4%B8%8B%E4%BE%86%E6%88%91%E5%80%91%E4%BE%86%E5%88%86%E6%9E%90%E4%B8%80%E4%B8%8B%E5%85%AC%E5%91%8A%E7%9A%84html"><strong>接下來我們來分析一下公告的HTML</strong></h3>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="67" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="67" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/bulletinBoard.png" alt="Bulletin Board" /></p>
<ul>
<li>不難發現，整個我們想要的資料都在這個tbody標籤中</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="68" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="68" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/devTool.png" alt="Dev Tool" /></p>
<ul>
<li>而在tbody中有一個一個<strong>tr</strong>標籤
<ul>
<li>在tr標籤內還有不同標籤，我們會focus在<code><a></code>和<code><div></code></li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="69" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="69" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ol start="6">
<li>找到tbody(資料的外框)</li>
<li>從tbody中找出所有的<code><a></code></li>
<li>把它print出來看看</li>
</ol>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">tbody = soup.find(<span class="hljs-string">'tbody'</span>) <span class="hljs-comment">#6</span>
a_tag_list = tbody.find_all(<span class="hljs-string">'a'</span>) <span class="hljs-comment">#7</span>
<span class="hljs-built_in">print</span>(a_tag_list) <span class="hljs-comment">#8</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="70" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/aTagResult.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="70" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="70" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="70" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="71" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="71" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>可以發現他是個由<code><tr></code>底下的<code><a></code>組成的列表</li>
<li>再來用for迴圈去跑這些<code><a></code>
<ul>
<li>取裡面href跟title屬性的值存到list裡</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="72" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="72" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">
<span class="hljs-keyword">for</span> a_tag <span class="hljs-keyword">in</span> a_tag_list:
links_list.append(a_tag.get(<span class="hljs-string">'href'</span>))
titles_list.append(a_tag.get(<span class="hljs-string">'title'</span>))
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="73" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="73" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>除了連結跟標題外我們再蒐集日期
<ul>
<li>從P.22的圖片可以看出，日期是存在特定<br />
td的div裡的，取出後一樣存在list裡</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="74" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="74" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">
td_tag_list = tbody.find_all(<span class="hljs-string">'td'</span>, attrs={<span class="hljs-string">"data-th"</span> : <span class="hljs-string">"日期"</span>})
<span class="hljs-keyword">for</span> td_tag <span class="hljs-keyword">in</span> td_tag_list:
div = td_tag.find(<span class="hljs-string">"div"</span>)
dates_list.append(div.text.strip())
</code></pre>
<ul>
<li>strip()是用來刪去字串中某些特定字元的<br />
預設是空白</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="75" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="75" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>Full Code</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">from</span> bs4 <span class="hljs-keyword">import</span> BeautifulSoup
<span class="hljs-keyword">import</span> requests
url = <span class="hljs-string">"https://ljjhs.tc.edu.tw/p/403-1080-1244-1.php?Lang=zh-tw"</span>
titles_list = []
links_list = []
dates_list = []
response = requests.get(url).text<span class="hljs-comment">#得到HTML</span>
soup = BeautifulSoup(response, <span class="hljs-string">'html5lib'</span>)<span class="hljs-comment">#丟進美麗湯解析</span>
<span class="hljs-comment">#print(response)</span>
tbody = soup.find(<span class="hljs-string">'tbody'</span>)
a_tag_list = tbody.find_all(<span class="hljs-string">'a'</span>)
<span class="hljs-keyword">for</span> a_tag <span class="hljs-keyword">in</span> a_tag_list:
links_list.append(a_tag.get(<span class="hljs-string">'href'</span>))
titles_list.append(a_tag.get(<span class="hljs-string">'title'</span>))
td_tag_list = tbody.find_all(<span class="hljs-string">'td'</span>, attrs={<span class="hljs-string">"data-th"</span> : <span class="hljs-string">"日期"</span>})
<span class="hljs-keyword">for</span> td_tag <span class="hljs-keyword">in</span> td_tag_list:
div = td_tag.find(<span class="hljs-string">"div"</span>)
dates_list.append(div.text.strip())
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="76" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="76" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E5%8B%95%E6%85%8B%E7%88%AC%E8%9F%B2%E5%AF%A6%E4%BD%9C">動態爬蟲實作</h1>
<h2 id="selenium"><strong>Selenium</strong></h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="77" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="77" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="selenium-1">Selenium</h1>
<ul>
<li>一種可以用程式語言(Python、C#、etc.)操作網頁</li>
<li>可以模擬使用者操作(點擊、填寫文字、滑動)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="78" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="78" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%BE%86%E9%BB%9E%E6%9C%89%E8%B6%A3%E7%9A%84">來點有趣的</h1>
<h2 id="%E5%8E%BB%E4%BD%8E%E8%83%BD%E5%8D%A1%E7%88%AC%E6%A2%97%E5%9C%96"><strong>去低(<s>能</s>)卡爬梗圖</strong></h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="79" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/dcard_intro.png");background-size:50%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="79" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="79" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="79" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="80" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="80" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>先講解一下等等會用到的一些函式</p>
<ul>
<li>driver.find_elements(By.id, By.XPATH ......)
<ul>
<li>等等會用XPATH，因為賊好用</li>
<li>
<h5 id="xpath%E4%BB%8B%E7%B4%B9%E5%9C%A8%E4%B8%8B%E4%B8%80%E9%A0%81"><strong>XPATH介紹在下一頁</strong></h5>
</li>
</ul>
</li>
<li>element.get_attribute("attr")
<ul>
<li>取得Tag中特定屬性的值</li>
</ul>
</li>
<li>string.startswith("123")
<ul>
<li>如果字串的開頭是123的話回傳True，反之為False。</li>
</ul>
</li>
<li>driver.execute_script('JavaScript')
<ul>
<li>能用Selenium執行JavaScript</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="81" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="81" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>time.sleep(1)
<ul>
<li>直接讓程式<strong>睡</strong>1秒</li>
</ul>
</li>
<li>list.append('2')
<ul>
<li>可以直接在list的後面多加入一個東西</li>
<li>e.g:</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"> number_list = [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>]
<span class="hljs-built_in">list</span>.append(<span class="hljs-string">'2'</span>)
>>> [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>]
</code></pre>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="82" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="82" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/xpath.png" alt="xpath" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="83" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="83" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>引入需要的模組</li>
<li>去複製<a href="https://www.dcard.tw/f/meme">Dcard梗圖板</a>的網址</li>
<li>先開2個list一個存src內的網址
<ul>
<li>一個存請求後的圖片位置(這才是我們要的)</li>
</ul>
</li>
<li>用driver請求Dcard</li>
<li>在請求後等一下讓他載入
<ul>
<li>用time.sleep(second) #等待second秒</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="84" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="84" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">from</span> selenium <span class="hljs-keyword">import</span> webdriver
<span class="hljs-keyword">from</span> selenium.webdriver.common.by <span class="hljs-keyword">import</span> By
<span class="hljs-keyword">import</span> time
<span class="hljs-keyword">import</span> requests
url = <span class="hljs-string">"https://www.dcard.tw/f/meme"</span>
driver = webdriver.Chrome() <span class="hljs-comment">#也可以是Edge(), Firefox(), etc.</span>
page_link_list = [] <span class="hljs-comment">#空list</span>
img_link_list = [] <span class="hljs-comment">#空list</span>
driver.get(url)
time.sleep(<span class="hljs-number">5</span>) <span class="hljs-comment">#等待網頁載入可以久一點點沒關係</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="85" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="85" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<p><img src="https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/dcardmeme.png" alt="Dcard meme" /></p>
<ul>
<li>可以發現圖片是用<code><img></code>表示
<ul>
<li>更方便的是，他的連結就直接在src中，<br />
所以我們要做的就是請求那個連結後下載回傳的結果！</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="86" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="86" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<ul>
<li>因為可以發現，所有圖片有一個alt屬性且名稱都是megapx。
<ul>
<li>我們可以用By.XPATH快樂的找Tag</li>
</ul>
</li>
<li>找到了元素後，取他src的值，存進page_elements_list</li>
<li>把頁面往下滑</li>
</ul>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"> page_elements = driver.find_elements(By.XPATH, <span class="hljs-string">"//img[@alt='megapx']"</span>)
page_elements_list.append(page_elements.get_attribute(<span class="hljs-string">"src"</span>))
driver.execute_script(<span class="hljs-string">"window.scrollTo(0,document.body.scrollHeight);"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="87" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="87" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h4 id="%E9%80%99%E5%80%8B%E5%8B%95%E4%BD%9C%E8%A6%81%E9%87%8D%E8%A4%87%E5%A5%BD%E5%A4%9A%E9%81%8D%E6%89%80%E4%BB%A5%E7%94%A8%E8%BF%B4%E5%9C%88%E5%81%9A%E3%84%85"><strong>這個動作要重複好多遍，所以用迴圈做ㄅ</strong></h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="88" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="88" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>): <span class="hljs-comment">#可以把後面的值設定大一點，代表一次抓多一點圖片</span>
page_elements = driver.find_elements(By.XPATH, <span class="hljs-string">"//img[@alt='megapx']"</span>)
<span class="hljs-keyword">for</span> page_element <span class="hljs-keyword">in</span> page_elements:
<span class="hljs-keyword">if</span> page_element.get_attribute(<span class="hljs-string">"src"</span>).startswith(<span class="hljs-string">"https"</span>): <span class="hljs-comment">#確保存的是網址</span>
page_link_list.append(page_element.get_attribute(<span class="hljs-string">"src"</span>))
driver.execute_script(<span class="hljs-string">"window.scrollTo(0,document.body.scrollHeight);"</span>)
time.sleep(<span class="hljs-number">0.5</span>) <span class="hljs-comment">#每次划完後等待載入</span>
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="89" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="89" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h4 id="%E9%80%99%E9%82%8A%E8%AC%9B%E8%A7%A3%E4%B8%80%E4%B8%8B%E7%82%BA%E4%BD%95%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E8%BC%89%E9%80%99%E5%80%8B%E5%9C%96%E7%89%87"><strong>這邊講解一下為何不能直接載這個圖片：</strong></h4>
<p>因為我們這時候存到的link觀察一下可以發現<br />
它的結尾並不是正常的圖片格式，那我們直接<br />
請求後下載是沒有用的，我們必須請求後找到<br />
圖片真正的位置，請求後下載才會有用。</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="90" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/link1.png");background-size:50%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="90" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="90" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="90" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="91" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/SYSH-Tech-Volunteer/LJSH-Spider/main/img/link2.png");background-size:90%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="91" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="91" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="91" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="92" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="92" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h3 id="%E6%8E%A5%E4%B8%8B%E4%BE%86%E5%B0%B1%E6%98%AF%E4%B8%8B%E8%BC%89%E7%9A%84%E9%83%A8%E5%88%86">接下來就是下載的部分</h3>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="93" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="93" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E6%88%90%E6%9E%9C"><strong>成果</strong></h1>
<p>PYTHON爬蟲營隊<br />
講師:毛宥鈞</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="94" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="94" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%B8%8B%E8%BC%89%E5%9C%96%E7%89%87">下載圖片</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-py"><span class="hljs-keyword">import</span> requests
url = <span class="hljs-string">"圖片的連結"</span> <span class="hljs-comment"># 替換為要下載的圖片連結</span>
response = requests.get(url)
<span class="hljs-comment"># 檢查圖片是否下載成功</span>
<span class="hljs-keyword">if</span> response.status_code == <span class="hljs-number">200</span>:
<span class="hljs-keyword">with</span> <span class="hljs-built_in">open</span>(<span class="hljs-string">"圖片檔名.jpg"</span>, <span class="hljs-string">"wb"</span>) <span class="hljs-keyword">as</span> file:
file.write(response.content)
<span class="hljs-built_in">print</span>(<span class="hljs-string">"圖片下載成功"</span>)
<span class="hljs-keyword">else</span>:
<span class="hljs-built_in">print</span>(<span class="hljs-string">"無法下載圖片"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="95" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="95" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>打開圖片</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-py"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">from</span> PIL <span class="hljs-keyword">import</span> Image
url = <span class="hljs-string">"圖片的連結"</span> <span class="hljs-comment"># 替換為要下載的圖片連結</span>
response = requests.get(url)
<span class="hljs-comment"># 檢查圖片是否下載成功</span>
<span class="hljs-keyword">if</span> response.status_code == <span class="hljs-number">200</span>:
<span class="hljs-keyword">with</span> <span class="hljs-built_in">open</span>(<span class="hljs-string">"圖片檔名.jpg"</span>, <span class="hljs-string">"wb"</span>) <span class="hljs-keyword">as</span> file:
file.write(response.content)
<span class="hljs-built_in">print</span>(<span class="hljs-string">"圖片下載成功"</span>)
<span class="hljs-comment"># 打開圖片</span>
img = Image.<span class="hljs-built_in">open</span>(<span class="hljs-string">"圖片檔名.jpg"</span>)
img.show()
<span class="hljs-keyword">else</span>:
<span class="hljs-built_in">print</span>(<span class="hljs-string">"無法下載圖片"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="96" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="96" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>使用subprocess</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-py"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">import</span> subprocess
url = <span class="hljs-string">"圖片的連結"</span> <span class="hljs-comment"># 替換為要下載的圖片連結</span>
response = requests.get(url)
<span class="hljs-comment"># 檢查圖片是否下載成功</span>
<span class="hljs-keyword">if</span> response.status_code == <span class="hljs-number">200</span>:
<span class="hljs-keyword">with</span> <span class="hljs-built_in">open</span>(<span class="hljs-string">"圖片檔名.jpg"</span>, <span class="hljs-string">"wb"</span>) <span class="hljs-keyword">as</span> file:
file.write(response.content)
<span class="hljs-built_in">print</span>(<span class="hljs-string">"圖片下載成功"</span>)
<span class="hljs-comment"># 用系統的預設圖片檢視程式打開圖片</span>
subprocess.run([<span class="hljs-string">"open"</span>, <span class="hljs-string">"圖片檔名.jpg"</span>])
<span class="hljs-keyword">else</span>:
<span class="hljs-built_in">print</span>(<span class="hljs-string">"無法下載圖片"</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="97" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" data-marpit-pagination="97" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:#000;--theme:uncover;color:#fff;background-color:#000;background-image:#000;background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E8%BF%B4%E5%9C%88-1">迴圈</h1>
<p>一次下載多張圖片</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-py"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">def</span> <span class="hljs-title function_">download_images</span>(<span class="hljs-params">image_links</span>):
<span class="hljs-keyword">for</span> index, link <span class="hljs-keyword">in</span> <span class="hljs-built_in">enumerate</span>(image_links):
<span class="hljs-keyword">try</span>:
response = requests.get(link)
response.raise_for_status()
<span class="hljs-keyword">with</span> <span class="hljs-built_in">open</span>(<span class="hljs-string">f"image_<span class="hljs-subst">{index+<span class="hljs-number">1</span>}</span>.jpg"</span>, <span class="hljs-string">"wb"</span>) <span class="hljs-keyword">as</span> file:
file.write(response.content)
<span class="hljs-built_in">print</span>(<span class="hljs-string">f"Image <span class="hljs-subst">{index+<span class="hljs-number">1</span>}</span> downloaded successfully."</span>)
<span class="hljs-keyword">except</span> requests.exceptions.RequestException <span class="hljs-keyword">as</span> e:
<span class="hljs-built_in">print</span>(<span class="hljs-string">f"Error downloading image <span class="hljs-subst">{index+<span class="hljs-number">1</span>}</span>: <span class="hljs-subst">{e}</span>"</span>)
<span class="hljs-comment"># Example usage</span>
image_links = [
<span class="hljs-string">"https://picsum.photos/200/300"</span>,
<span class="hljs-string">"https://picsum.photos/200/300"</span>,<span class="hljs-string">"https://picsum.photos/200/300"</span>,<span class="hljs-string">"https://picsum.photos/200/300"</span>,<span class="hljs-string">"https://picsum.photos/200/300"</span>,
]
download_images(image_links)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="98" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("download.png");background-size:80%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="98" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="98" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="98" data-marpit-pagination-total="101" style="color:#fff;" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="99" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="99" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h1 id="%E4%BD%BF%E7%94%A8pyinstaller%E5%8C%85%E8%A3%9D%E6%88%90exe">使用pyinstaller包裝成exe</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="100" data-marpit-fragments="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="100" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<p>安裝pyinstaller</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-bat">pip3 install pyinstaller
</code></pre>
<p>打包成exe</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-bat">pyinstaller -F code.py
pyinstaller -F code.py -i "a.ico"
</code></pre>
<ul>
<li data-marpit-fragment="1"><code>-F</code> 打包成單一檔案</li>
<li data-marpit-fragment="2"><code>-i</code> 設定圖示</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="101" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("spider poster-light.svg")" data-theme="uncover" data-marpit-pagination="101" data-marpit-pagination-total="101" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("spider poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("spider poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;">
<h3 id="%E8%AC%9D%E8%AC%9D%E5%A4%A7%E5%AE%B6">謝謝大家</h3>
<p>感謝大家的參與</p>
</section>
<script>!function(){"use strict";const t={h1:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"1"},style:"display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h2:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"2"},style:"display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h3:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"3"},style:"display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h4:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"4"},style:"display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h5:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"5"},style:"display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},h6:{proto:()=>HTMLHeadingElement,attrs:{role:"heading","aria-level":"6"},style:"display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;"},span:{proto:()=>HTMLSpanElement},pre:{proto:()=>HTMLElement,style:"display: block; font-family: monospace; white-space: pre; margin: 1em 0; --marp-auto-scaling-white-space: pre;"}},e="data-marp-auto-scaling-wrapper",i="data-marp-auto-scaling-svg",n="data-marp-auto-scaling-container";class s extends HTMLElement{constructor(){super(),this.svgPreserveAspectRatio="xMinYMid meet";const t=t=>([e])=>{const{width:i,height:n}=e.contentRect;this[t]={width:i,height:n},this.updateSVGRect()};this.attachShadow({mode:"open"}),this.containerObserver=new ResizeObserver(t("containerSize")),this.wrapperObserver=new ResizeObserver(((...e)=>{t("wrapperSize")(...e),this.flushSvgDisplay()}))}static get observedAttributes(){return["data-downscale-only"]}connectedCallback(){var t,s,o,r,a;this.shadowRoot.innerHTML=`\n<style>\n svg[${i}] { display: block; width: 100%; height: auto; vertical-align: top; }\n span[${n}] { display: table; white-space: var(--marp-auto-scaling-white-space, nowrap); width: max-content; }\n</style>\n<div ${e}>\n <svg part="svg" ${i}>\n <foreignObject><span ${n}><slot></slot></span></foreignObject>\n </svg>\n</div>\n `.split(/\n\s*/).join(""),this.wrapper=null!==(t=this.shadowRoot.querySelector(`div[${e}]`))&&void 0!==t?t:void 0;const l=this.svg;this.svg=null!==(o=null===(s=this.wrapper)||void 0===s?void 0:s.querySelector(`svg[${i}]`))&&void 0!==o?o:void 0,this.svg!==l&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=null!==(a=null===(r=this.svg)||void 0===r?void 0:r.querySelector(`span[${n}]`))&&void 0!==a?a:void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){var t,e,i,n,s,o,r;let a=Math.ceil(null!==(e=null===(t=this.containerSize)||void 0===t?void 0:t.width)&&void 0!==e?e:0);const l=Math.ceil(null!==(n=null===(i=this.containerSize)||void 0===i?void 0:i.height)&&void 0!==n?n:0);void 0!==this.dataset.downscaleOnly&&(a=Math.max(a,null!==(o=null===(s=this.wrapperSize)||void 0===s?void 0:s.width)&&void 0!==o?o:0));const c=null===(r=this.svg)||void 0===r?void 0:r.querySelector(":scope > foreignObject");if(null==c||c.setAttribute("width",`${a}`),null==c||c.setAttribute("height",`${l}`),this.svg&&(this.svg.setAttribute("viewBox",`0 0 ${a} ${l}`),this.svg.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.svg.style.height=a<=0||l<=0?"0":""),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const o=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this.attachShadow({mode:"open"})}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_update(){const t=i?`<style>:host { ${i} }</style>`:"";let e="<slot></slot>";const{autoScaling:n}=this.dataset;if(void 0!==n){e=`<marp-auto-scaling exportparts="svg:auto-scaling" ${"downscale-only"===n?"data-downscale-only":""}>${e}</marp-auto-scaling>`}this.shadowRoot.innerHTML=t+e}};let r;const a=Symbol();let l;const c="marpitSVGPolyfill:setZoomFactor,",d=Symbol(),g=Symbol();const h=()=>{const t="Apple Computer, Inc."===navigator.vendor,e=t?[u]:[],i={then:e=>(t?(async()=>{if(void 0===l){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d"),i=new Image(10,10),n=new Promise((t=>{i.addEventListener("load",(()=>t()))}));i.crossOrigin="anonymous",i.src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%201%201%22%3E%3CforeignObject%20width%3D%221%22%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22width%3A%201px%3B%20height%3A%201px%3B%20background%3A%20red%3B%20position%3A%20relative%22%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E",await n,e.drawImage(i,0,0),l=e.getImageData(5,5,1,1).data[3]<128}return l})().then((t=>{null==e||e(t?[u]:[])})):null==e||e([]),i)};return Object.assign(e,i)};let p,m;function u(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[g]||(Object.defineProperty(window,g,{configurable:!0,value:!0}),document.body.style.zoom=1.0001,document.body.offsetHeight,document.body.style.zoom=1,window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(c)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(m=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,s,o,r;t.style.transform||(t.style.transform="translateZ(0)");const a=i||m||t.currentScale||1;p!==a&&(p=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i<c;i+=1){const n=t.children[i];if(n.getScreenCTM){const t=n.getScreenCTM();if(t){const i=null!==(s=null===(e=n.x)||void 0===e?void 0:e.baseVal.value)&&void 0!==s?s:0,c=null!==(r=null===(o=n.y)||void 0===o?void 0:o.baseVal.value)&&void 0!==r?r:0,d=n.children.length;for(let e=0;e<d;e+=1){const s=n.children[e];if("SECTION"===s.tagName){const{style:e}=s;e.transformOrigin||(e.transformOrigin=`${-i}px ${-c}px`),e.transform=`scale(${a}) matrix(${t.a}, ${t.b}, ${t.c}, ${t.d}, ${t.e-l.left}, ${t.f-l.top}) translateZ(0.0001px)`;break}}}}}})),!1!==n&&Array.from(e.querySelectorAll("iframe"),(({contentWindow:t})=>{null==t||t.postMessage(`${c}${n}`,"null"===window.origin?"*":window.origin)}))}function v({once:t=!1,target:e=document}={}){const i=function(t=document){if(t[d])return t[d];let e=!0;const i=()=>{e=!1,delete t[d]};Object.defineProperty(t,d,{configurable:!0,value:i});let n=[],s=!1;(async()=>{try{n=await h()}finally{s=!0}})();const o=()=>{for(const e of n)e({target:t});s&&0===n.length||e&&window.requestAnimationFrame(o)};return o(),i}(e);return t?(i(),()=>{}):i}p=1,m=void 0;const b=Symbol(),w=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",s);for(const n of Object.keys(t)){const s=`marp-${n}`,a=t[n].proto();null!=r||(r=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("<div is")),r&&a!==HTMLElement?i||customElements.define(s,o(a,{style:t[n].style}),{extends:n}):(i||customElements.define(s,o(HTMLElement,t[n])),e.querySelectorAll(`${n}[is="${s}"]`).forEach((t=>{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${s}`).replace(new RegExp(`</${n}>$`,"i"),`</${s}>`)})))}window[a]=!0})(e),e[b])return e[b];const i=v({target:e}),n=()=>{i(),delete e[b]},l=Object.assign(n,{cleanup:n,update:()=>w(e)});return Object.defineProperty(e,b,{configurable:!0,value:l}),l},y=document.currentScript;w(y?y.getRootNode():document)}();
</script></foreignObject></svg></div><div class="bespoke-marp-note" data-index="43" tabindex="0"><p>訪問網站猶如寄送包裹
包裹就是檔案
透過哪條路：網路
地址=ip位置，ip太醜改成有意義的名字=>Domain
交通規則：tcp底下的http(網頁常用)
交通工具：GET、POST</p></div><script>/*!! License: https://unpkg.com/@marp-team/marp-cli@2.5.0/lib/bespoke.js.LICENSE.txt */
!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){o[e]&&(n&&l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))&&c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)&&void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t<r||t===r&&n<=o;e.setAttribute(`${c}fragment`,(i?"":"in")+"active");const a=`${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),e.fragmentIndex=o;const i={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:i=!0})=>{if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]&&o(i,0)}else{const r=e.fragments[t].length;if(n+1<r)return o(t,r-1),!1;const i=e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})=>{if(r(-1)&&i)return o(t,n-1),!1;const a=t-1;e.fragments[a]&&o(a,e.fragments[a].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},x=document,k=()=>!(!x.fullscreenEnabled&&!x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement&&!x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()&&(async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key&&"F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{const r=t.classList,o=e=>n(`marp-${e?"":"in"}active`);let i;const a=()=>{i&&clearTimeout(i),i=setTimeout((()=>{r.add(L),o()}),e),r.contains(L)&&(r.remove(L),o(!0))};for(const e of["mousedown","mousemove","touchend"])document.addEventListener(e,a);setTimeout(a,0)},P=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"],_=e=>{e.parent.addEventListener("keydown",(e=>{if(!e.target)return;const t=e.target;(P.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()}))},T=e=>{window.addEventListener("load",(()=>{for(const t of e.slides){const e=t.querySelector("marp-auto-scaling, [data-auto-scaling], [data-marp-fitting]");t.setAttribute(`${c}load`,e?"":"hideable")}}))},I=({interval:e=250}={})=>t=>{document.addEventListener("keydown",(e=>{if(" "===e.key&&e.shiftKey)t.prev();else if("ArrowLeft"===e.key||"ArrowUp"===e.key||"PageUp"===e.key)t.prev({fragment:!e.shiftKey});else if(" "!==e.key||e.shiftKey)if("ArrowRight"===e.key||"ArrowDown"===e.key||"PageDown"===e.key)t.next({fragment:!e.shiftKey});else if("End"===e.key)t.slide(t.slides.length-1,{fragment:-1});else{if("Home"!==e.key)return;t.slide(0)}else t.next();e.preventDefault()}));let n,r,o=0;t.parent.addEventListener("wheel",(i=>{let a=!1;const s=(e,t)=>{e&&(a=a||((e,t)=>((e,t)=>{const n="X"===t?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]})(e,t)&&((e,t)=>{const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r})(getComputedStyle(e),t))(e,t)),(null==e?void 0:e.parentElement)&&s(e.parentElement,t)};if(0!==i.deltaX&&s(i.target,"X"),0!==i.deltaY&&s(i.target,"Y"),a)return;i.preventDefault();const l=Math.sqrt(i.deltaX**2+i.deltaY**2);if(void 0!==i.wheelDelta){if(void 0===i.webkitForce&&Math.abs(i.wheelDelta)<40)return;if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<4)return}else if(i.deltaMode===i.DOM_DELTA_PIXEL&&l<12)return;r&&clearTimeout(r),r=setTimeout((()=>{n=0}),e);const c=Date.now()-o<e,d=l<=n;if(n=l,c||d)return;let u;(i.deltaX>0||i.deltaY>0)&&(u="next"),(i.deltaX<0||i.deltaY<0)&&(u="prev"),u&&(t[u](),o=Date.now())}))},M=(e=`.${l}osc`)=>{const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[${c}osc=${JSON.stringify(e)}]`).forEach(n)};return k()||n("fullscreen",(e=>e.style.display="none")),g||n("presenter",(e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."})),e=>{t.addEventListener("click",(t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;n&&t.target.blur();const r={fragment:!t.shiftKey};"next"===n?e.next(r):"prev"===n?e.prev(r):"fullscreen"===n?null==e||e.fullscreen():"presenter"===n&&e.openPresenterView()}})),e.parent.appendChild(t),e.on("activate",(({index:t})=>{n("page",(n=>n.textContent=`Page ${t+1} of ${e.slides.length}`))})),e.on("fragment",(({index:t,fragments:r,fragmentIndex:o})=>{n("prev",(e=>e.disabled=0===t&&0===o)),n("next",(n=>n.disabled=t===e.slides.length-1&&o===r.length-1))})),e.on("marp-active",(()=>y(t,!1))),e.on("marp-inactive",(()=>y(t,!0))),k()&&(e=>{for(const t of["","webkit"])x.addEventListener(t+"fullscreenchange",e)})((()=>n("fullscreen",(e=>e.classList.toggle("exit",k()&&$())))))}},O=e=>{window.addEventListener("message",(t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");let o=Number.parseInt(t,10),i=Number.parseInt(n,10)+1;i>=e.fragments[o].length&&(o+=1,i=0),e.slide(o,{fragment:i})}}))};var A=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let C=e=>String(e).replace(/[&<>"']/g,(e=>`&${D[e]};`)),D={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},N="dangerouslySetInnerHTML",B={className:"class",htmlFor:"for"},q={};function K(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==N&&(r+=` ${B[e]?B[e]:C(e)}="${C(t[e])}"`);r+=">"}if(-1===A.indexOf(e)){if(t[N])r+=t[N].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===q[e]?e:C(e)}r+=e?`</${e}>`:""}return q[r]=!0,r}const j=({children:e})=>K(null,null,...e),F=`${l}presenter-`,V={container:`${F}container`,dragbar:`${F}dragbar-container`,next:`${F}next`,nextContainer:`${F}next-container`,noteContainer:`${F}note-container`,noteWrapper:`${F}note-wrapper`,noteButtons:`${F}note-buttons`,infoContainer:`${F}info-container`,infoPage:`${F}info-page`,infoPageText:`${F}info-page-text`,infoPagePrev:`${F}info-page-prev`,infoPageNext:`${F}info-page-next`,noteButtonsBigger:`${F}note-bigger`,noteButtonsSmaller:`${F}note-smaller`,infoTime:`${F}info-time`,infoTimer:`${F}info-timer`},U=e=>{const{title:t}=document;document.title="[Presenter view]"+(t?` - ${t}`:"");const n={},r=e=>(n[e]=n[e]||document.querySelector(`.${e}`),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=V.container,t.appendChild(e),t.insertAdjacentHTML("beforeend",K(j,null,K("div",{class:V.nextContainer},K("iframe",{class:V.next,src:"?view=next"})),K("div",{class:V.dragbar}),K("div",{class:V.noteContainer},K("div",{class:V.noteWrapper}),K("div",{class:V.noteButtons},K("button",{class:V.noteButtonsSmaller,tabindex:"-1",title:"Smaller notes font size"},"Smaller notes font size"),K("button",{class:V.noteButtonsBigger,tabindex:"-1",title:"Bigger notes font size"},"Bigger notes font size"))),K("div",{class:V.infoContainer},K("div",{class:V.infoPage},K("button",{class:V.infoPagePrev,tabindex:"-1",title:"Previous"},"Previous"),K("span",{class:V.infoPageText}),K("button",{class:V.infoPageNext,tabindex:"-1",title:"Next"},"Next")),K("time",{class:V.infoTime,title:"Current time"}),K("time",{class:V.infoTimer,title:"Timer"})))),t})(e.parent)),(e=>{let t=!1;r(V.dragbar).addEventListener("mousedown",(()=>{t=!0,r(V.dragbar).classList.add("active")})),window.addEventListener("mouseup",(()=>{t=!1,r(V.dragbar).classList.remove("active")})),window.addEventListener("mousemove",(e=>{if(!t)return;const n=e.clientX/document.documentElement.clientWidth*100;r(V.container).style.setProperty("--bespoke-marp-presenter-split-ratio",`${Math.max(0,Math.min(100,n))}%`)})),r(V.nextContainer).addEventListener("click",(()=>e.next()));const n=r(V.next),o=(i=n,(e,t)=>{var n;return null===(n=i.contentWindow)||void 0===n?void 0:n.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin)});var i;n.addEventListener("load",(()=>{r(V.nextContainer).classList.add("active"),o(e.slide(),e.fragmentIndex),e.on("fragment",(({index:e,fragmentIndex:t})=>o(e,t)))}));const a=document.querySelectorAll(".bespoke-marp-note");a.forEach((e=>{e.addEventListener("keydown",(e=>e.stopPropagation())),r(V.noteWrapper).appendChild(e)})),e.on("activate",(()=>a.forEach((t=>t.classList.toggle("active",t.dataset.index==e.slide())))));let s=0;const l=e=>{s=Math.max(-5,s+e),r(V.noteContainer).style.setProperty("--bespoke-marp-note-font-scale",(1.2**s).toFixed(4))},c=()=>l(1),d=()=>l(-1),u=r(V.noteButtonsBigger),f=r(V.noteButtonsSmaller);u.addEventListener("click",(()=>{u.blur(),c()})),f.addEventListener("click",(()=>{f.blur(),d()})),document.addEventListener("keydown",(e=>{"+"===e.key&&c(),"-"===e.key&&d()}),!0),e.on("activate",(({index:t})=>{r(V.infoPageText).textContent=`${t+1} / ${e.slides.length}`}));const m=r(V.infoPagePrev),g=r(V.infoPageNext);m.addEventListener("click",(t=>{m.blur(),e.prev({fragment:!t.shiftKey})})),g.addEventListener("click",(t=>{g.blur(),e.next({fragment:!t.shiftKey})})),e.on("fragment",(({index:t,fragments:n,fragmentIndex:r})=>{m.disabled=0===t&&0===r,g.disabled=t===e.slides.length-1&&r===n.length-1}));let p=new Date;const v=()=>{const e=new Date,t=e=>`${Math.floor(e)}`.padStart(2,"0"),n=e.getTime()-p.getTime(),o=t(n/1e3%60),i=t(n/1e3/60%60),a=t(n/36e5%24);r(V.infoTime).textContent=e.toLocaleTimeString(),r(V.infoTimer).textContent=`${a}:${i}:${o}`};v(),setInterval(v,250),r(V.infoTimer).addEventListener("click",(()=>{p=new Date}))})(e)},X=e=>{if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:H},presenterUrl:{enumerable:!0,get:R}}),g&&document.addEventListener("keydown",(t=>{"p"!==t.key||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())}))};function H(){const{max:e,floor:t}=Math,n=e(t(.85*window.innerWidth),640),r=e(t(.85*window.innerHeight),360);return window.open(this.presenterUrl,F+this.syncKey,`width=${n},height=${r},menubar=no,toolbar=no`)}function R(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),d(e)}const W=e=>{const t=u();return t===a&&e.appendChild(document.createElement("span")),{"":X,[i]:U,[a]:O}[t]},J=e=>{e.on("activate",(t=>{document.querySelectorAll(".bespoke-progress-parent > .bespoke-progress-bar").forEach((n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"}))}))},Y=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t},z=(e={})=>{const t={history:!0,...e};return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},o=(t={fragment:!0})=>{let n=t.fragment?Y(f("f")||""):null;((t,n)=>{const{min:r,max:o}=Math,{fragments:i,slides:a}=e,s=o(0,r(t,a.length-1)),l=o(0,r(n||0,i[s].length-1));s===e.slide()&&l===e.fragmentIndex||e.slide(s,{fragment:l})})((()=>{var t,r;if(location.hash){const[o]=location.hash.slice(1).split(":~:");if(/^\d+$/.test(o))return(null!==(t=Y(o))&&void 0!==t?t:1)-1;const i=document.getElementById(o)||document.querySelector(`a[name="${CSS.escape(o)}"]`);if(i){const{length:t}=e.slides;for(let o=0;o<t;o+=1)if(e.slides[o].contains(i)){const t=null===(r=e.fragments)||void 0===r?void 0:r[o],a=i.closest("[data-marpit-fragment]");if(t&&a){const e=t.indexOf(a);e>=0&&(n=e)}return o}}}return 0})(),n)};e.on("fragment",(({index:e,fragmentIndex:r})=>{n||m({f:0===r||r.toString()},{location:{...location,hash:`#${e+1}`},setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})})),setTimeout((()=>{o(),window.addEventListener("hashchange",(()=>r((()=>{o({fragment:!1}),m({f:void 0})})))),window.addEventListener("popstate",(()=>{n||r((()=>o()))})),n=!1}),0)}},G=(e={})=>{var t;const n=e.key||(null===(t=window.history.state)||void 0===t?void 0:t.marpBespokeSyncKey)||Math.random().toString(36).slice(2),r=`bespoke-marp-sync-${n}`;var i;i={marpBespokeSyncKey:n},m({},{setter:(e,...t)=>o({...e,...i},...t)});const a=()=>{const e=p(r);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=a(),n={...t,...e(t)};return v(r,JSON.stringify(n)),n},l=()=>{window.removeEventListener("pageshow",l),s((e=>({reference:(e.reference||0)+1})))};return e=>{l(),Object.defineProperty(e,"syncKey",{value:n,enumerable:!0});let t=!0;setTimeout((()=>{e.on("fragment",(e=>{t&&s((()=>({index:e.index,fragmentIndex:e.fragmentIndex})))}))}),0),window.addEventListener("storage",(n=>{if(n.key===r&&n.oldValue&&n.newValue){const r=JSON.parse(n.oldValue),o=JSON.parse(n.newValue);if(r.index!==o.index||r.fragmentIndex!==o.fragmentIndex)try{t=!1,e.slide(o.index,{fragment:o.fragmentIndex,forSync:!0})}finally{t=!0}}}));const o=()=>{const{reference:e}=a();void 0===e||e<=1?h(r):s((()=>({reference:e-1})))};window.addEventListener("pagehide",(e=>{e.persisted&&window.addEventListener("pageshow",l),o()})),e.on("destroy",o)}},{PI:Q,abs:Z,sqrt:ee,atan2:te}=Math,ne={passive:!0},re=({slope:e=-.7,swipeThreshold:t=30}={})=>n=>{let r;const o=n.parent,i=e=>{const t=o.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};o.addEventListener("touchstart",(({touches:e})=>{r=1===e.length?i(e[0]):void 0}),ne),o.addEventListener("touchmove",(e=>{if(r)if(1===e.touches.length){e.preventDefault();const t=i(e.touches[0]),n=t.x-r.x,o=t.y-r.y;r.delta=ee(Z(n)**2+Z(o)**2),r.radian=te(n,o)}else r=void 0})),o.addEventListener("touchend",(o=>{if(r){if(r.delta&&r.delta>=t&&r.radian){const t=(r.radian-e+Q)%(2*Q)-Q;n[t<0?"next":"prev"](),o.stopPropagation()}r=void 0}}),ne)},oe=new Map;oe.clear(),oe.set("none",{backward:{both:void 0,incoming:void 0,outgoing:void 0},forward:{both:void 0,incoming:void 0,outgoing:void 0}});const ie={both:"",outgoing:"outgoing-",incoming:"incoming-"},ae={forward:"",backward:"-backward"},se=e=>`--marp-bespoke-transition-animation-${e}`,le=e=>`--marp-transition-${e}`,ce=se("name"),de=se("duration"),ue=e=>new Promise((t=>{const n={},r=document.createElement("div"),o=e=>{r.remove(),t(e)};r.addEventListener("animationstart",(()=>o(n))),Object.assign(r.style,{animationName:e,animationDuration:"1s",animationFillMode:"both",animationPlayState:"paused",position:"absolute",pointerEvents:"none"}),document.body.appendChild(r);const i=getComputedStyle(r).getPropertyValue(le("duration"));i&&(n.defaultDuration=i),((e,t)=>{requestAnimationFrame((()=>{e.style.animationPlayState="running",requestAnimationFrame((()=>t(void 0)))}))})(r,o)})),fe=async e=>oe.has(e)?oe.get(e):(e=>{const t={},n=[];for(const[r,o]of Object.entries(ie))for(const[i,a]of Object.entries(ae)){const s=`marp-${o}transition${a}-${e}`;n.push(ue(s).then((e=>{t[i]=t[i]||{},t[i][r]=e?{...e,name:s}:void 0})))}return Promise.all(n).then((()=>t))})(e).then((t=>(oe.set(e,t),t))),me=e=>Object.values(e).flatMap(Object.values).every((e=>!e)),ge=(e,{type:t,backward:n})=>{const r=e[n?"backward":"forward"],o=(()=>{const e=r[t],n=e=>({[ce]:e.name});if(e)return n(e);if(r.both){const e=n(r.both);return"incoming"===t&&(e[se("direction")]="reverse"),e}})();return!o&&n?ge(e,{type:t,backward:!1}):o||{[ce]:"__bespoke_marp_transition_no_animation__"}},pe=e=>{if(e)try{const t=JSON.parse(e);if((e=>{if("object"!=typeof e)return!1;const t=e;return"string"==typeof t.name&&(void 0===t.duration||"string"==typeof t.duration)})(t))return t}catch(e){}},ve="_tSId",he="_tA",ye="bespoke-marp-transition-warming-up",be=window.matchMedia("(prefers-reduced-motion: reduce)"),we="__bespoke_marp_transition_reduced_outgoing__",xe="__bespoke_marp_transition_reduced_incoming__",ke={forward:{both:void 0,incoming:{name:xe},outgoing:{name:we}},backward:{both:void 0,incoming:{name:xe},outgoing:{name:we}}},$e=e=>{if(!document.startViewTransition)return;const t=t=>(void 0!==t&&(e._tD=t),e._tD);let n;t(!1),((...e)=>{const t=[...new Set(e).values()];return Promise.all(t.map((e=>fe(e)))).then()})(...Array.from(document.querySelectorAll("section[data-transition], section[data-transition-back]")).flatMap((e=>[e.dataset.transition,e.dataset.transitionBack].flatMap((e=>{const t=pe(e);return[null==t?void 0:t.name,(null==t?void 0:t.builtinFallback)?`__builtin__${t.name}`:void 0]})).filter((e=>!!e))))).then((()=>{document.querySelectorAll("style").forEach((e=>{e.innerHTML=e.innerHTML.replace(/--marp-transition-duration:[^;}]*[;}]/g,(e=>e.slice(0,-1)+"!important"+e.slice(-1)))}))}));const r=(n,{back:r,cond:o})=>i=>{var a;const s=t();if(s)return!!i[he]||!("object"!=typeof s||(s.skipTransition(),!i.forSync));if(!o(i))return!0;const l=e.slides[e.slide()],c=()=>{var e;return null!==(e=i.back)&&void 0!==e?e:r},d="data-transition"+(c()?"-back":""),u=l.querySelector(`section[${d}]`);if(!u)return!0;const f=pe(null!==(a=u.getAttribute(d))&&void 0!==a?a:void 0);return!f||((async(e,{builtinFallback:t=!0}={})=>{let n=await fe(e);if(me(n)){if(!t)return;return n=await fe(`__builtin__${e}`),me(n)?void 0:n}return n})(f.name,{builtinFallback:f.builtinFallback}).then((e=>{if(!e){t(!0);try{n(i)}finally{t(!1)}return}let r=e;be.matches&&(console.warn("Use a constant animation to transition because preferring reduced motion by viewer has detected."),r=ke);const o=document.getElementById(ve);o&&o.remove();const a=document.createElement("style");a.id=ve,document.head.appendChild(a),((e,t)=>{const n=[`:root{${le("direction")}:${t.backward?-1:1};}`,":root:has(.bespoke-marp-inactive){cursor:none;}"],r=t=>{var n,o,i;const a=(null===(n=e[t].both)||void 0===n?void 0:n.defaultDuration)||(null===(o=e[t].outgoing)||void 0===o?void 0:o.defaultDuration)||(null===(i=e[t].incoming)||void 0===i?void 0:i.defaultDuration);return"forward"===t?a:a||r("forward")},o=t.duration||r(t.backward?"backward":"forward");void 0!==o&&n.push(`::view-transition-group(*){${de}:${o};}`);const i=e=>Object.entries(e).map((([e,t])=>`${e}:${t};`)).join("");return n.push(`::view-transition-old(root){${i(ge(e,{...t,type:"outgoing"}))}}`,`::view-transition-new(root){${i(ge(e,{...t,type:"incoming"}))}}`),n})(r,{backward:c(),duration:f.duration}).forEach((e=>{var t;return null===(t=a.sheet)||void 0===t?void 0:t.insertRule(e)}));const s=document.documentElement.classList;s.add(ye);let l=!1;const d=()=>{l||(n(i),l=!0,s.remove(ye))},u=()=>{t(!1),a.remove(),s.remove(ye)};try{t(!0);const e=document.startViewTransition(d);t(e),e.finished.finally(u)}catch(e){console.error(e),d(),u()}})),!1)};e.on("prev",r((t=>e.prev({...t,[he]:!0})),{back:!0,cond:e=>{var t;return e.index>0&&!((null===(t=e.fragment)||void 0===t||t)&&n.fragmentIndex>0)}})),e.on("next",r((t=>e.next({...t,[he]:!0})),{cond:t=>t.index+1<e.slides.length&&!(n.fragmentIndex+1<n.fragments.length)})),setTimeout((()=>{e.on("slide",r((t=>e.slide(t.index,{...t,[he]:!0})),{cond:t=>{const n=e.slide();return t.index!==n&&(t.back=t.index<n,!0)}}))}),0),e.on("fragment",(e=>{n=e}))};let Ee;const Le=()=>(void 0===Ee&&(Ee="wakeLock"in navigator&&navigator.wakeLock),Ee),Se=async()=>{const e=Le();if(e)try{return await e.request("screen")}catch(e){console.warn(e)}return null},Pe=async()=>{if(!Le())return;let e;const t=()=>{e&&"visible"===document.visibilityState&&Se()};for(const e of["visibilitychange","fullscreenchange"])document.addEventListener(e,t);return e=await Se(),e};((e=document.getElementById(":$p"))=>{(()=>{const e=f("view");r.dataset.bespokeView=e===a||e===i?e:""})();const t=(e=>{const t=f(e);return m({[e]:void 0}),t})("sync")||void 0;n.from(e,((...e)=>{const t=s.findIndex((e=>u()===e));return e.map((([e,n])=>e[t]&&n)).filter((e=>e))})([[1,1,0],G({key:t})],[[1,1,1],W(e)],[[1,1,0],_],[[1,1,1],b],[[1,0,0],S()],[[1,1,1],T],[[1,1,1],z({history:!1})],[[1,1,0],I()],[[1,1,0],E],[[1,0,0],J],[[1,1,0],re()],[[1,0,0],M()],[[1,0,0],$e],[[1,1,1],w],[[1,1,0],Pe]))})()}();</script></body></html>