-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1095 lines (1072 loc) · 225 KB
/
index.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
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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>:where(section){container-type:size}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{color:#FFF;padding:1.2em!important}div#\:\$p>svg>foreignObject>section code{border-radius:20px}div#\:\$p>svg>foreignObject>section .small{font-size:0.5em}div#\:\$p>svg>foreignObject>section section.small{--marpit-root-font-size:0.5em}div#\:\$p>svg>foreignObject>section .l{text-align:left}div#\:\$p>svg>foreignObject>section[data-marpit-pagination="2"]{}div#\:\$p>svg>foreignObject>section .em{background:#00000088;width:100%;height:100%;position:absolute;top:50%;left:50%;display:flex;justify-content:center;flex-direction:column;transform:translate(-50%,-50%)}div#\:\$p>svg>foreignObject>section .em :is(h5,marp-h5){margin-bottom:0}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=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="1" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="python-%E7%88%AC%E8%9F%B2"><strong>Python 爬蟲</strong></h1>
<p>112中電會聯合迎新</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="2" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E8%A8%98%E5%88%86%E6%9D%BF">記分板</h2>
<table>
<thead>
<tr>
<th>組別</th>
<th>分數</th>
</tr>
</thead>
<tbody>
<tr>
<td>分數1</td>
</tr>
<tr><td>14.8</td>
</tr>
<tr>
<td>組別2</td>
<td>20</td>
</tr>
<tr>
<td>組別3</td>
<td>31.5</td>
</tr>
<tr>
<td>組別4</td>
<td>25</td>
</tr>
<tr>
<td>組別5</td>
<td>22</td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="3" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E8%B3%87%E6%BA%90">資源</h1>
<ul>
<li data-marpit-fragment="1"><a href="http://10.16.24.141/">內網</a></li>
<li data-marpit-fragment="2"><a href="https://g.scaict.org/112-OP">g.scaict.org/112-OP</a></li>
<li data-marpit-fragment="3"><a href="https://github.com/SCAICT/112-OP">GitHub</a></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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="4" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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/SCAICT/112-OP/main/img/EMr.png");background-size:100%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="4" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" data-marpit-advanced-background="content">
<div class="em">
<h5 id="%E9%97%9C%E6%96%BC%E6%88%91">關於我</h5>
<h1 id="%E6%AF%9B%E5%93%A5em">毛哥EM</h1>
<div class="small">
<p>喜歡用科技進行各種創作</p>
<p>如網頁設計、平面設計、音樂、電腦繪圖等</p>
<p>不獸控制</p>
<p><a href="https://elvismao.com/">elvismao.com</a></p>
</div></div>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="4" style="color:#fff;" data-marpit-pagination-total="108" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="5" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E4%BB%8A%E5%A4%A9%E8%A6%81%E5%B9%B9%E5%98%9B">今天要幹嘛</h1>
<ul>
<li>python 基本語法</li>
<li>基本 HTML</li>
<li>爬蟲原理</li>
<li>實作</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="6" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="108" 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/SCAICT/112-OP/main/img/dc.webp");background-size:80%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="6" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="6" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:50%;" data-marpit-pagination-total="108" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1 id="discord">Discord</h1>
<p><a href="https://discord.gg/3wMeef9QP5">點我</a>加入<br />
Delicious 的 DC</p>
<div class="small">
Let's Dance
</div>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="6" style="color:#fff;" data-marpit-pagination-total="108" 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="7" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="7" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E7%94%9A%E9%BA%BC%E6%98%AF-python">甚麼是 python?</h1>
<p>python 是一種直譯式、互動式、<br />
物件導向、腳本語言</p>
<div class="small">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Guido-portrait-2014-drc.jpg/375px-Guido-portrait-2014-drc.jpg style="filter: grayscale(100%) brightness(80%);" />
<p>Guido van Rossum 可能因為常常找不到鍵盤上的分號<br />
或著是常常忘記宣告變數<br />
於是在1989花三個禮拜做出來這個語言</p>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="13" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="8" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%8F%AF%E4%BB%A5%E5%B9%B9%E5%98%9B">可以幹嘛</h1>
<div style="display:flex; justify-content: center;">
<div style="margin-right:3em">
<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>
<li data-marpit-fragment="6">網頁應用</li>
</ul>
</div>
<div>
<ul>
<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>
<li data-marpit-fragment="13">......</li>
</ul>
</div>
</div>
</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="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="9" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">num1 = <span class="hljs-number">1</span>
num2 = <span class="hljs-number">2</span>
<span class="hljs-built_in">sum</span> = num1 + num2
<span class="hljs-built_in">print</span>(<span class="hljs-string">"1+2等於"</span>, <span class="hljs-number">3</span>)
<span class="hljs-comment"># 使用 for 迴圈列印數字 1 到 5</span>
<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">6</span>):
<span class="hljs-built_in">print</span>(i)
</code></pre>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="10" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%AE%89%E8%A3%9Dvs-code">安裝VS Code</h1>
<p><a href="https://code.visualstudio.com/">官網</a> | <a href="dl/VSCodeUserSetup-x64-1.84.2.exe">內網</a></p>
</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" lang="zh-TW" data-marpit-pagination="11" 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-pagination-total="108">
<p>下載並安裝</p>
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="12" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="12" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%AE%89%E8%A3%9Dpython">安裝python</h1>
<p><a href="https://www.python.org/">官網</a> | <a href="dl/python-3.12.0-amd64.exe">內網</a></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" lang="zh-TW" data-marpit-pagination="13" 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-pagination-total="108">
<p>下載完後執行</p>
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="14" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="14" 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-pagination-total="108">
<p>Add python.exe to PATH 記得打勾<br />
忘記就重裝，不然很麻煩</p>
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="15" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="15" 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-pagination-total="108">
<p>安裝 VSCode 插件</p>
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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" lang="zh-TW" data-marpit-pagination="16" 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-pagination-total="108" 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="16" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="16" 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-pagination-total="108" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
<h1 id="pythonbr%E5%9F%BA%E7%A4%8E%E8%AA%9E%E6%B3%95">python<br />基礎語法</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" lang="zh-TW" data-marpit-pagination="16" style="color:#fff;" data-marpit-pagination-total="108" 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="17" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="17" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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">"給IG嗎"</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="6" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="18" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E8%AE%8A%E6%95%B8">變數</h2>
<div class=l>
<ul>
<li data-marpit-fragment="1">儲存資料</li>
<li data-marpit-fragment="2">數字不可用於開頭字元。</li>
<li data-marpit-fragment="3">可以使用英文字元、數字或下底線(<code>_</code>)命名</li>
<li data-marpit-fragment="4">英文大小寫是有差異的</li>
<li data-marpit-fragment="5">名稱不可使用python語言保留字詞。ex : for</li>
<li data-marpit-fragment="6">python會自己判斷資料型態</li>
</ul>
</div>
<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="19" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="19" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E5%AF%A6%E4%BD%9C%E6%99%82%E9%96%93">實作時間</h2>
<h4 id="%E9%A1%8C%E7%9B%AE%E8%A9%A2%E5%95%8Fig%E5%B8%B3%E8%99%9F%E4%B8%A6%E8%BC%B8%E5%87%BA">題目:詢問IG帳號，並輸出</h4>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>給IG嗎? elvisdragonmao
IG是 elvisdragonmao
</code></pre>
<blockquote>
<p>溫馨提醒: 字串前後要加上<code>''</code> or <code>""</code></p>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="20" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E8%A7%A3%E7%AD%94">解答</h2>
<p><a href="code/ig.py">下載</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">ig = <span class="hljs-built_in">input</span>(<span class="hljs-string">"給IG嗎?"</span>)
<span class="hljs-built_in">print</span>(<span class="hljs-string">"我會追蹤"</span>)
<span class="hljs-built_in">print</span>(ig)
</code></pre>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">ig = <span class="hljs-built_in">input</span>(<span class="hljs-string">"給IG嗎? "</span>)
<span class="hljs-built_in">print</span>(<span class="hljs-string">"我會追蹤"</span>, ig)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="21" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E4%BF%9D%E7%95%99%E5%AD%97">保留字</h2>
<table>
<thead>
<tr>
<th>and</th>
<th>as</th>
<th>assert</th>
<th>break</th>
<th>class</th>
<th>continue</th>
</tr>
</thead>
<tbody>
<tr>
<td>def</td>
<td>del</td>
<td>elif</td>
<td>else</td>
<td>except</td>
<td>finally</td>
</tr>
<tr>
<td>for</td>
<td>from</td>
<td>False</td>
<td>global</td>
<td>if</td>
<td>import</td>
</tr>
<tr>
<td>in</td>
<td>is</td>
<td>lambda</td>
<td>nonlocal</td>
<td>not</td>
<td>None</td>
</tr>
<tr>
<td>or</td>
<td>pass</td>
<td>raise</td>
<td>return</td>
<td>try</td>
<td>True</td>
</tr>
<tr>
<td>while</td>
<td>with</td>
<td>yield</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="22" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E8%B3%87%E6%96%99%E5%9E%8B%E6%85%8B">資料型態</h2>
<div class=l>
<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>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-marpit-fragments="3" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="23" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E6%95%B8%E5%80%BC%E5%9E%8B%E6%85%8B">數值型態</h2>
<ul>
<li data-marpit-fragment="1">int - 整數</li>
<li data-marpit-fragment="2">float - 浮點數(有小數點)</li>
<li data-marpit-fragment="3">bool - true false</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="5" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="24" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E5%AD%97%E4%B8%B2%E5%9E%8B%E6%85%8B">字串型態</h2>
<ul>
<li data-marpit-fragment="1">str(string)
<ul>
<li data-marpit-fragment="2">字串</li>
<li data-marpit-fragment="3">用<code>''</code>或<code>""</code>包住</li>
<li data-marpit-fragment="4">可用<code>+</code>連接</li>
<li data-marpit-fragment="5"><code>len()</code>查看長度</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="25" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E9%99%A3%E5%88%97-list">陣列 list</h2>
<p>(AKA 清單)</p>
<ul>
<li data-marpit-fragment="1">放多個資料的地方</li>
<li data-marpit-fragment="2">用中括號<code>[]</code>包住</li>
<li data-marpit-fragment="3">由中括號組成並以逗號隔開不同資料(型態可不同)</li>
<li data-marpit-fragment="4">索引值從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="26" data-marpit-fragments="5" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="26" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90">算術運算子</h2>
<ul>
<li data-marpit-fragment="1"><code>+</code>加</li>
<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>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="27" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E9%97%9C%E4%BF%82%E9%81%8B%E7%AE%97%E5%AD%90">關係運算子</h2>
<p><code><</code> 小於<br />
<code>></code> 大於 <br />
<code><=</code> 小於等於 <br />
<code>>=</code> 大於等於<br />
<code>==</code> 相等 <br />
<code>!=</code> 不相等</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="28" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E7%B7%B4%E7%BF%92%E6%99%82%E9%96%93">練習時間</h2>
<div class=l>
<p><strong>題目:</strong> 鉛筆一支5元，一打50元。小明需要幫班上每位同學買一枝鉛筆，請問要多少錢？</p>
<p>由於小明<s>是客家人</s>很注重環保，他絕不會為了省錢而多買任何不需要的東西。也就是說，小明買的鉛筆數量一定等於班上的人數。</p>
<p><em><strong>測資:</strong> 3人15元, 50人210元</em></p>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="29" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="code">code</h2>
<p><a href="code/pencil.py">下載</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">a = <span class="hljs-built_in">int</span>(<span class="hljs-built_in">input</span>())
<span class="hljs-built_in">print</span>(a // <span class="hljs-number">12</span> * <span class="hljs-number">50</span> + a % <span class="hljs-number">12</span> * <span class="hljs-number">5</span>)
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-marpit-fragments="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="30" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="31" 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-pagination-total="108" 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="31" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="31" 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-pagination-total="108" 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
<ul>
<li data-marpit-fragment="4">都錯→執行 else</li>
</ul>
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="31" style="color:#fff;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="32" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="33" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:60%;" data-marpit-pagination-total="108" 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="33" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="33" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:60%;" data-marpit-pagination-total="108" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="%E8%BF%B4%E5%9C%88">迴圈</h2>
<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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="33" style="color:#fff;" data-marpit-pagination-total="108" 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="34" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="34" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="for">for</h2>
<p>可以透過python迴圈來讀取串列中的每一個元素<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="35" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="35" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="while">while</h2>
<p>較適用於「無法預知迴圈數」的問題</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="36" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="36" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="break">break</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">break</span>
<span class="hljs-built_in">print</span>(i) <span class="hljs-comment"># 會列出1 2</span>
</code></pre>
<p><a href="code/break.py">範例下載</a></p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="37" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="continue">continue</h2>
<p>強制跳出這過迴圈 <a href="code/continue.py">範例下載</a></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)
</code></pre>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>1
2
4
</code></pre>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="38" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E7%B6%B2%E9%A0%81%E5%8E%9F%E7%90%86">網頁原理</h1>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="39" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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="39" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="39" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="39" style="color:#fff;" data-marpit-pagination-total="108" data-marpit-advanced-background="pseudo"></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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="40" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="html">HTML</h1>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="41" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="html-1">HTML</h2>
<p>超文本標記語言(HyperText Markup Language)<br />
網站的骨架</p>
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="42" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="42" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%85%83%E7%B4%A0">元素</h1>
<p>網站所有東西都是由元素組成<br />
<img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="43" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="43" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="44" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="44" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="45" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="45" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="46" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="46" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="47" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E4%BB%80%E9%BA%BC%E6%98%AF%E7%B6%B2%E8%B7%AF%E7%88%AC%E8%9F%B2">什麼是網路爬蟲</h1>
<ul>
<li>從網際網路上擷取資料
<ul>
<li>可以爬偶爾重要的資訊:校網</li>
<li>下載網站沒有提供允許下載的內容</li>
<li>如: 線上漫畫、曾博恩《破蛋者》</li>
</ul>
</li>
<li>可以模擬人類在網頁上的瀏覽行為
<ul>
<li>進入網站、點擊按鈕、輸入文字、下載檔案等</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="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="48" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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/SCAICT/112-OP/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/SCAICT/112-OP/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="48" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="48" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="48" style="color:#fff;" data-marpit-pagination-total="108" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="49" data-marpit-fragments="4" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="49" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E8%B3%87%E5%AE%89%E5%AE%A3%E5%B0%8E"><strong>資安宣導</strong></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>
</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" lang="zh-TW" data-marpit-pagination="50" 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-pagination-total="108" 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:80%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="50" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="50" 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-pagination-total="108" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="robottxt">robot.txt</h2>
<ul>
<li>告知網路爬蟲哪些網頁可以被訪問或爬取</li>
<li>遵守網站的使用規則</li>
<li>減少伺服器負載以及保護網站免受不必要的訪問<br />
</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" lang="zh-TW" data-marpit-pagination="50" style="color:#fff;" data-marpit-pagination-total="108" 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="51" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="51" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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: *
Allow: /
</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="52" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="52" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E9%9D%9C%E6%85%8B%E7%88%AC%E8%9F%B2"><strong>靜態爬蟲</strong></h1>
<ul>
<li>顧名思義就是只能專門爬靜態網站的爬蟲
<ul>
<li>靜態網站：預先產生好 HTML 直接給你爬</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="53" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="53" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E4%BE%86%E9%BB%9E%E9%85%B7%E9%85%B7%E7%9A%84%E5%BA%AB">來點酷酷的庫</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-bash">pip3 install <庫名稱>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="54" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="requests">Requests</h1>
<div class=l>
<ul>
<li>讓你可以用簡單的 python 去對網站做請求</li>
<li>請求時可以帶點伴手禮<br />
自訂 Header、帶參數、cookie,、User-Agent...</li>
<li>一直請求人家或著是按門鈴又躲起來就叫做 DDOS 攻擊</li>
<li>一直煩有可能會被網站 ban 掉</li>
</ul>
</div>
<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="55" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="55" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="beautifulsoup">BeautifulSoup</h1>
<ul>
<li>aka美麗湯，用來處理HTML中的資料</li>
<li>會需要有<strong>語法分析器</strong>去分析HTML
<ul>
<li>如: 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="56" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="56" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6">安裝套件</h1>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>pip3 install requests beautifulsoup4 html5lib
</code></pre>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="57" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E9%9D%9C%E6%85%8B%E7%88%AC%E8%9F%B2%E5%AF%A6%E4%BD%9C">靜態爬蟲實作</h1>
<div class=l style=margin-left:80px>
<h3 id="%E6%B5%81%E7%A8%8B">流程</h3>
<ol>
<li>利用python程式進行HTTP請求</li>
<li>利用HTML解析器(美麗湯4)處理資料</li>
<li>分析及利用網頁資源</li>
</ol>
</div>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="58" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="59" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="59" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h3 id="%E8%A9%A6%E8%A9%A6%E7%9C%8B">試試看</h3>
<p><a href="code/requests.py">範例下載</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">from</span> bs4 <span class="hljs-keyword">import</span> BeautifulSoup
url = <span class="hljs-string">'https://zh.wikipedia.org/zh-tw/臺中高工'</span>
response = requests.get(url).text
<span class="hljs-built_in">print</span>(response)
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="60" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p>把response丟給美麗湯4解析</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python">soup = BeautifulSoup(response, <span class="hljs-string">'html5lib'</span>)
</code></pre>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="61" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p>我們來抓抓看維基百科條目的第一段介紹8</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">from</span> bs4 <span class="hljs-keyword">import</span> BeautifulSoup
url = <span class="hljs-string">'https://zh.m.wikipedia.org/zh-tw/台中高工'</span>
response = requests.get(url).text
soup = BeautifulSoup(response, <span class="hljs-string">'html5lib'</span>)
wiki = soup.find_all(<span class="hljs-string">'p'</span>)[<span class="hljs-number">0</span>].get_text()
<span class="hljs-keyword">if</span> wiki.replace(<span class="hljs-string">"\n"</span>, <span class="hljs-string">""</span>).strip() == <span class="hljs-string">''</span>:
wiki = soup.find_all(<span class="hljs-string">'p'</span>)[<span class="hljs-number">1</span>].get_text()
<span class="hljs-built_in">print</span>(wiki)
</code></pre>
</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="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="62" 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-pagination-total="108">
<blockquote>
<p>臺中市立臺中工業高級中等學校，簡稱臺中高工、中工，是一所位於臺灣臺中市南區的技術型高級中等學校，創立於1938年，最初校名為臺中州立臺中工業學校，首任校長為村田<br />
務；1955年中華民國教育部接受美援購買先進儀器將其模式導入包括該校及全國另外七所高工，為臺灣八大省工之一，現為教育部電機電子群科中心學校。該校對外交通較為便利<br />
，鄰近的交通設施有高鐵臺中站、大慶車站、捷運大慶站等。</p>
</blockquote>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="63" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E6%8C%91%E6%88%B0">挑戰</h1>
<p>先問使用者要爬哪個維基百科條目<br />
然後把他的第一段介紹爬下來顯示出來</p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code>想要查甚麼: 媽媽
母親簡稱母，或稱媽媽、娘，是一種親屬關係的稱謂，
是子女對雙親中的女性的稱呼。母親和子女是重要的直
系親屬關係之一，通常具有親密關係。
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="64" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E8%A7%A3%E7%AD%94-1">解答</h1>
<p><a href="code/wiki.py">下載</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">from</span> bs4 <span class="hljs-keyword">import</span> BeautifulSoup
x = <span class="hljs-built_in">input</span>(<span class="hljs-string">"想要查甚麼: "</span>)
url = <span class="hljs-string">'https://zh.m.wikipedia.org/zh-tw/'</span> + x
response = requests.get(url).text
soup = BeautifulSoup(response, <span class="hljs-string">'html5lib'</span>)
wiki = soup.find_all(<span class="hljs-string">'p'</span>)[<span class="hljs-number">0</span>].get_text()
<span class="hljs-keyword">if</span> wiki.replace(<span class="hljs-string">"\n"</span>, <span class="hljs-string">""</span>).strip() == <span class="hljs-string">''</span>:
wiki = soup.find_all(<span class="hljs-string">'p'</span>)[<span class="hljs-number">1</span>].get_text()
<span class="hljs-built_in">print</span>(wiki)
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="65" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E7%88%AC%E7%88%AC%E6%A0%A1%E5%9C%92%E5%85%AC%E5%91%8A">爬爬校園公告</h1>
<p>你可以選擇你自已的學校<br />
這裡以<a href="https://ljjhs.tc.edu.tw/p/403-1080-1244-1.php?Lang=zh-tw">龍津高中</a>為例<br />
<s>因為我喜歡龍</s></p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="66" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h3 id="%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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="67" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/main/img/bulletinBoard.png" alt="Bulletin Board" /><br />
不難發現，整個我們想要的資料都在這個tbody標籤中</p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="68" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/main/img/devTool.png" alt="Dev Tool" /></p>
<p>而在tbody中有一個一個<strong>td</strong>標籤</p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="69" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<ol>
<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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="70" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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/SCAICT/112-OP/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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="70" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="70" style="color:#fff;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="71" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<ul>
<li>可以發現他是個由<code><tr></code>底下的<code><a></code>組成的列表</li>
<li>再來用for迴圈去跑這些<code><a></code>
<ul>
<li>取裡面href跟title屬性的值存到list裡</li>
</ul>
</li>
</ul>
<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="72" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="72" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p>除了連結跟標題外我們再蒐集日期。<br />
日期是存在特定td的div裡的，取出後一樣存在list裡</p>
<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>
<blockquote>
<p>strip()是用來刪去字串中某些特定字元的<br />
預設是空白</p>
</blockquote>
</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="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="73" 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-pagination-total="108">
<h2 id="full-code">Full Code</h2>
<p><a href="code/%E9%BE%8D%E6%B4%A5%E9%AB%98%E4%B8%AD%E5%85%AC%E5%91%8A.py">下載</a></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>
</code></pre>
</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="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="74" 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-pagination-total="108"><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">#丟進美麗湯解析</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())
<span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-built_in">len</span>(titles_list)):
<span class="hljs-built_in">print</span>(dates_list[i],titles_list[i], links_list[i])
</code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="75" data-marpit-fragments="2" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="75" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E4%B9%96%E4%B9%96%E8%AE%80%E5%85%AC%E5%91%8A%E7%9A%84%E6%96%B9%E5%BC%8F">乖乖讀公告的方式</h2>
<ul>
<li data-marpit-fragment="1">RSS - 一種讓你輕鬆地追蹤網站的更新，類似於一個個性化新聞訂閱服務。(如:部落格文章，Podcast都會提供API讓你不需要使用爬蟲就可以取得資料)</li>
<li data-marpit-fragment="2">API - 有些網站會提供一個網址讓你去請求資料，並且會以JSON格式回傳資料。</li>
</ul>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="76" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h3 id="%E4%BD%BF%E7%94%A8-api-%E4%BE%86%E8%AE%80%E5%8F%96%E5%8F%B0%E4%B8%AD%E9%AB%98%E5%B7%A5%E7%9A%84%E5%85%AC%E5%91%8A">使用 API 來讀取台中高工的公告</h3>
<p>首先我們要先來看看<a href="https://w3.tcivs.tc.edu.tw/ischool/widget/site_news/main2.php?uid=WID_0_2_a18324d5b18f53971c1d32b13dcfe427c6c77ed4&maximize=1&allbtn=0">台中高工網頁</a>是如何讀取公告的。<br />
可以在開發者工具看出他是去找<a href="https://w3.tcivs.tc.edu.tw/ischool/widget/site_news/news_query_json.php">這個網址</a>並提供一些參數(伴手禮)來取得公告。我們只需要把這個網址複製下來，並且帶著伴手禮就可以偷到公告了，不需要去整理 HTML。</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" lang="zh-TW" data-marpit-pagination="77" 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-pagination-total="108" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/post-data.png");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="77" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="77" 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-pagination-total="108" 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" lang="zh-TW" data-marpit-pagination="77" style="color:#fff;" data-marpit-pagination-total="108" 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="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="78" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("img/response.png");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="78" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="78" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="78" style="color:#fff;" data-marpit-pagination-total="108" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="79" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="79" 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-pagination-total="108">
<h2 id="%E7%AF%84%E4%BE%8B%E7%A8%8B%E5%BC%8F%E7%A2%BC">範例程式碼</h2>
<p><a href="code/%E5%8F%B0%E4%B8%AD%E9%AB%98%E5%B7%A5%E5%85%AC%E5%91%8A.py">下載</a></p>
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-python"><span class="hljs-keyword">import</span> requests
url = <span class="hljs-string">"https://w3.tcivs.tc.edu.tw/ischool/widget/site_news/news_query_json.php"</span>
data = {<span class="hljs-string">"field"</span>: <span class="hljs-string">"time"</span>, <span class="hljs-string">"order"</span>: <span class="hljs-string">"DESC"</span>, <span class="hljs-string">"pageNum"</span>: <span class="hljs-string">"0"</span>, <span class="hljs-string">"maxRows"</span>: <span class="hljs-string">"25"</span>, <span class="hljs-string">"keyword"</span>: <span class="hljs-string">""</span>,
<span class="hljs-string">"uid"</span>: <span class="hljs-string">"WID_0_2_a18324d5b18f53971c1d32b13dcfe427c6c77ed4"</span>, <span class="hljs-string">"tf"</span>: <span class="hljs-string">"1"</span>, <span class="hljs-string">"auth_type"</span>: <span class="hljs-string">"user"</span>}
response = requests.post(url, data=data)
<span class="hljs-keyword">if</span> response.status_code == <span class="hljs-number">200</span>:
news_data = response.json()
latest_news = news_data[<span class="hljs-number">1</span>:<span class="hljs-number">6</span>]
<span class="hljs-keyword">for</span> news <span class="hljs-keyword">in</span> latest_news:
date = news[<span class="hljs-string">'time'</span>]
title = news[<span class="hljs-string">'title'</span>]
news_id = news[<span class="hljs-string">'newsId'</span>]
<span class="hljs-built_in">print</span>(<span class="hljs-string">f"日期: <span class="hljs-subst">{date}</span>\n<span class="hljs-subst">{title}</span>,\nhttps://w3.tcivs.tc.edu.tw/ischool/public/news_view/show.php?nid=<span class="hljs-subst">{news_id}</span>\n\n"</span>)
<span class="hljs-keyword">else</span>:
<span class="hljs-built_in">print</span>(<span class="hljs-string">f"失敗代碼: <span class="hljs-subst">{response.status_code}</span>"</span>)
</code></pre>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="80" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E5%8B%95%E6%85%8B%E7%88%AC%E8%9F%B2%E5%AF%A6%E4%BD%9Cbrselenium">動態爬蟲實作<br /><strong>Selenium</strong></h1>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="81" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="selenium">Selenium</h1>
<ul>
<li>可以用程式語言(python、C#等等)操作網頁</li>
<li>可以模擬使用者操作(點擊、填寫文字、滑動)</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="82" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E4%B8%8B%E8%BC%89-chrome-driver">下載 Chrome Driver</h1>
<p><a href="https://chromedriver.chromium.org/downloads">官網</a> | <a href="dl/chromedriver.exe">內網</a></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="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="83" 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-pagination-total="108">
<h1 id="2048">2048</h1>
<p>在<a href="https://play2048.co/">2048網站</a>上右下左一直重複</p>
<p>很爛但很刺激</p>
<p><a href="dl/2048.py">範例程式</a></p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="84" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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.keys <span class="hljs-keyword">import</span> Keys
<span class="hljs-keyword">import</span> time
<span class="hljs-keyword">from</span> selenium.webdriver.common.by <span class="hljs-keyword">import</span> By
<span class="hljs-comment"># Open the 2048 game website using Selenium</span>
driver = webdriver.Chrome()
driver.get(<span class="hljs-string">"https://play2048.co/"</span>)
time.sleep(<span class="hljs-number">3</span>)
<span class="hljs-keyword">while</span> <span class="hljs-literal">True</span>:
driver.find_element(By.TAG_NAME, <span class="hljs-string">'body'</span>).send_keys(Keys.ARROW_UP)
time.sleep(<span class="hljs-number">0.1</span>)
driver.find_element(By.TAG_NAME, <span class="hljs-string">'body'</span>).send_keys(Keys.ARROW_RIGHT)
time.sleep(<span class="hljs-number">0.1</span>)
driver.find_element(By.TAG_NAME, <span class="hljs-string">'body'</span>).send_keys(Keys.ARROW_DOWN)
time.sleep(<span class="hljs-number">0.1</span>)
driver.find_element(By.TAG_NAME, <span class="hljs-string">'body'</span>).send_keys(Keys.ARROW_LEFT)
time.sleep(<span class="hljs-number">0.1</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="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="85" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E7%88%AC%E4%B8%80%E4%BA%9B%E9%87%8D%E8%A6%81%E5%9C%96%E7%89%87">爬一些重要圖片</h1>
<h2 id="x-image">X Image</h2>
<p><a href="dl/dlImg.py">範例程式</a></p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="86" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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">import</span> urllib.request
<span class="hljs-keyword">import</span> time
<span class="hljs-keyword">from</span> selenium.webdriver.common.by <span class="hljs-keyword">import</span> By
<span class="hljs-keyword">import</span> requests
driver = webdriver.Chrome()
driver.get(<span class="hljs-string">"https://twitter.com/cat_auras"</span>)
time.sleep(<span class="hljs-number">5</span>)
images = driver.find_elements(By.TAG_NAME, <span class="hljs-string">'img'</span>)
<span class="hljs-keyword">for</span> i, image <span class="hljs-keyword">in</span> <span class="hljs-built_in">enumerate</span>(images):
<span class="hljs-built_in">print</span>(<span class="hljs-string">"正在下載第"</span> + <span class="hljs-built_in">str</span>(i) + <span class="hljs-string">"張圖片"</span>)
src = image.get_attribute(<span class="hljs-string">'src'</span>)
response = requests.get(src, stream=<span class="hljs-literal">True</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">f'image<span class="hljs-subst">{i}</span>.png'</span>, <span class="hljs-string">'wb'</span>) <span class="hljs-keyword">as</span> out_file:
out_file.write(response.content)
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="87" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p>看的不夠</p>
<h1 id="%E5%BE%80%E4%B8%8B%E6%BB%BE">往下滾</h1>
<p><a href="dl/twitter.py">範例程式</a></p>
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="88" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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">import</span> urllib.request
<span class="hljs-keyword">import</span> time
<span class="hljs-keyword">from</span> selenium.webdriver.common.by <span class="hljs-keyword">import</span> By
<span class="hljs-keyword">import</span> requests
<span class="hljs-keyword">from</span> selenium.webdriver.common.keys <span class="hljs-keyword">import</span> Keys
<span class="hljs-keyword">from</span> selenium.webdriver.common.action_chains <span class="hljs-keyword">import</span> ActionChains
driver = webdriver.Chrome()
driver.get(<span class="hljs-string">"https://twitter.com/cat_auras"</span>)
time.sleep(<span class="hljs-number">3</span>)
<span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">3</span>):
actions = ActionChains(driver)
actions.send_keys(Keys.PAGE_DOWN).perform()
time.sleep(<span class="hljs-number">1</span>)
time.sleep(<span class="hljs-number">3</span>)
images = driver.find_elements(By.TAG_NAME, <span class="hljs-string">'img'</span>)
<span class="hljs-keyword">for</span> i, image <span class="hljs-keyword">in</span> <span class="hljs-built_in">enumerate</span>(images):
<span class="hljs-built_in">print</span>(<span class="hljs-string">"正在下載第"</span> + <span class="hljs-built_in">str</span>(i) + <span class="hljs-string">"張圖片"</span>)
src = image.get_attribute(<span class="hljs-string">'src'</span>)
response = requests.get(src, stream=<span class="hljs-literal">True</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">f'image<span class="hljs-subst">{i}</span>.png'</span>, <span class="hljs-string">'wb'</span>) <span class="hljs-keyword">as</span> out_file:
out_file.write(response.content)
</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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="89" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h1 id="%E4%BE%86%E9%BB%9E%E6%9C%89%E8%B6%A3%E7%9A%84"><s>來點有趣的</s></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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="90" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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/SCAICT/112-OP/main/img/dcard_intro.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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="90" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108" 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("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="90" style="color:#fff;" data-marpit-pagination-total="108" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="91" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="91" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<h2 id="%E5%87%BD%E5%BC%8F%E7%B0%A1%E4%BB%8B">函式簡介</h2>
<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="92" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="92" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="93" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="93" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="94" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="94" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="95" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="95" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="96" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="#000" data-theme="uncover" lang="zh-TW" data-marpit-pagination="96" 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-pagination-total="108">
<p><img src="https://raw.githubusercontent.com/SCAICT/112-OP/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="97" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="97" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">
<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="98" data-paginate="true" data-background-color="#000" data-color="#fff" data-background-image="url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg")" data-theme="uncover" lang="zh-TW" data-marpit-pagination="98" style="--paginate:true;--background-color:#000;--color:#fff;--background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");--theme:uncover;color:#fff;background-color:#000;background-image:url("https://raw.githubusercontent.com/SCAICT/112-OP/main/img/spider%20poster-light.svg");background-position:center;background-repeat:no-repeat;background-size:cover;" data-marpit-pagination-total="108">