+++
Note:
- Powitanie
- Przedstawiamy załogę
+++
Note:
- imię
- ulubiony kolor
+++
- Podstawy programowania (40 min)
- Demo 1 (5 min)
- Piracka siesta (5 min)
- Dalsza przygoda z programowaniem (40 min)
- Quiz (10 min)
- Demo 2 (5 min)
- Pożegnanie
Note:
- wszystkie skojarzenia, pomysły, itd.
+++ @title[Magia]
Note:
- Tyle lat - wciąż nie wiem, jak coś zrobić
- Dużo praktyki i cierpliwości
- To zaowocuje - niesamowite efekty
- Pokażemy Wam prawdziwe programowanie
- Takie, jakiego używamy w pracy na co dzień
---?image=presentation/set_sails.jpg&size=50% auto @title[Zaczynamy]
---?image=presentation/set_sails.jpg&size=50% auto
@transition[fade]
+++
Edytor - https://code.pyret.org
Note:
- otwórzmy przeglądarkę!!
- opis edytora
- Google Drive - integracja
- język angielski!
- komunikaty błędów
- załoga pomoże
Note:
- komputery rozróżniają różne typy danych
- zeszyt - piszecie tekst i liczby tak samo
+++
"Tekst na dobry początek"
"Drugi string"
+++
1
2
3
Note:
- komputer to też zaawansowany kalkulator
- kto wie co to jest kalkulator?
+++
2 + 3
8 * 9
10 - 7
4 / 2
+++
-
Napisz swoje imię jako string.
-
Ile masz lat? Napisz liczbę.
-
Jaki będzie wynik działania:
1234 * 3456? -
* Oblicz, ile sekund mieści się w godzinie?
+++
-
istnieją różne typy danych
-
poznaliśmy 2 typy danych:
- string, czyli napis
- liczby
-
komputer potrafi liczyć
-
zna działania takiej jak: +, -, *, /
Note:
- w programowaniu występują różne typy danych
Note:
- otwórz edytor, pokaż przykład od razu
+++
- wiadomość dla programisty
- zapisana w kodzie
- ukryta dla komputera
- komputer ją ignoruje
+++
# To jest komentarz
"A to nie"
7
324 # Tutaj też może być komentarz
+++
Note:
- co to jest biblioteka?
- kto tam chodzi, co robi?
- student musi napisać wypracowanie
- bierze kilka innych książek
- czyta i składa swoją pracę z różnych cytatów i fragmentów
+++ @title[image]
Biblioteka do rysowania obrazków: @cssorange
Trzeba rzucić zaklęcie: @cssorange
Wtedy możemy korzystać z wszystkich funkcji w bibliotece:
include image
star
+++
- magiczne pudełko
- trzeba do niego coś włożyć (argumenty)
- wtedy coś robi, daje rezultat (np. obrazek)
Note:
- prezentacja pudełka
+++
include image
star(50, "solid", "red")
# ^ funkcja zwraca obrazek gwiazdy
+++ @title[Przykładowe funkcje]
Wymyślmy kilka
przykładowych funkcji!
Note:
- id
- const
- +1
- String.reverse
+++
- komputer ignoruje komentarze
- komentarz jest dla programisty
- biblioteki to zbiory funkcji
- funkcja potrafi coś "zrobić", obliczyć
- funkcja przyjmuje argumenty i zwraca wyniki
Note:
- Co to jest bug?
- Kornik!!
- Otwórz L3.arr w przeglądarce!
+++
- brak nawiasu
- brak przecinka
- brak cudzysłowu
- zły typ danych
- zła liczba argumentów dla funkcji
Note:
- widzę ląd!
- na horyzoncie wyłaniają się nowe kształty
+++
+++ @title[Koło]
Koło
@ul[shapes]
- Circle
@ulend
+++ @title[Trójkąt]
Trójkąt
@ul[shapes]
- Triangle
@ulend
+++ @title[Prostokąt]
Prostokąt
@ul[shapes]
- Rectangle
@ulend
+++ @title[Kwadrat]
Kwadrat
@ul[shapes]
- Square
@ulend
+++
W bibliotece @cssorange znajduje się wiele przydatnych funkcji do rysowania:
circletrianglesquarerectangletext- ...
Note:
- klocki lego - przykład
- Co zwracają funkcje circle, square, triangle, itp. ?
- Poznamy funkcję, która łączy dwa obrazki w jeden, nowy obrazek
+++
include image
overlay(obrazek1, obrazek2)
+++
- funkcja @cssorange przyjmuje dwa argumenty - obrazki
- następnie nakłada te dwa obrazki na siebie
- zwraca nowy obraz, który składa się z danych dwóch obrazków
+++ @title[image-url]
Funkcja @cssorange zwraca obrazek z internetu.
Trzeba jej podać adres obrazka,
czyli argument typu string.
include image
image-url("https://www.obrazki.com/obrazek.png")
+++ @title[scale]
Funkcja @cssorange zmienia (skaluje) rozmiar obrazka.
Przekazujemy jej dwa argumenty:
- ułamek (czyli liczbę)
- obrazek, którego rozmiar zmieniamy
+++
include image
scale(0.5, circle(100, "solid", "green"))
+++ @title[Ninja Cat]
Link do obrazka:
+++
+++ @title[beside]
Funkcja @cssorange układa 2 obrazki obok siebie.
Zwraca ułożone obrazki, jako nowy obrazek.
include image
beside(obrazek1, obrazek2)
+++
- są jak pudełko, do którego coś wkładamy
- nadajemy pudełku nazwę
- możemy potem wyciągnąć wartość z pudełka i użyć jej w innym miejscu
+++
mojaZmienna = 7
3 + mojaZmienna # Wynik to 10
Note:
- zmienne przechowują nie tylko liczby
- przechowują dowolne dane
- nawet obrazki!
+++
-
funkcja @cssorange przyjmuje 2 obrazki
- zwraca nowy obrazek, na którym 2 obrazki są ułożone obok siebie
-
zmienne przechowują dowolne dane, żeby użyć ich w innych miejscach w programie
+++ @title[above]
Funkcja @cssorange układa 2 obrazki nad sobą.
Zwraca ułożone obrazki, jako nowy obrazek.
include image
above(obrazek1, obrazek2)
+++
Funkcja @cssorange rysuje prostokątną ramkę wokół dowolnego obrazka.
include image
frame(mojObrazek)
+++
-
funkcja @cssorange przyjmuje 2 obrazki
- zwraca nowy obrazek, na którym 2 obrazki są ułożone jeden nad drugim.
-
funkcja @cssorange rysuje prostokątną ramkę wokół obrazka.
+++ @title[Flagi]
Note:
- animacja
- mapa skarbów
- space invaders
@transition[none]
<ul class="bio">
<li>Żyła w XIX w.</li>
<li>Interesowała się poezją i matematyką</li>
<li>Była pierwszą programistką</li>
</ul>
- kahoot.it
- Wprowadź kod PIN
- Wpisz swoje imię (nick)
@title[Pożegnanie]
Note:
- Zdjęcie!!!