Znasz już HTML5 i CSS? Umiesz tworzyć podstawowe strony? Pora je ożywić. Bierzemy się za naukę JavaScript’u.
Jeśli to Twoje pierwsze zadanie w ramach wyzwania – zapoznaj się z jego opisem i zasadami.
Poziom: łatwy
Wymagania wstępne: podstawowa znajomość HTML5, CSS – jeśli nie spełniasz tego wymagania – radzę się najpierw zapoznać z zadaniem 2 tego wyzwania
Dzisiejsze zadanie:
Po pierwsze zapoznać się z przedstawionym kodem. Znajdziesz tam pewne podstawowe informacje w temacie JavaScript.
See the Pen JavaScript na start [PL] by Żaneta Jażdżyk (@nettecode) on CodePen.
Kiedy już zrozumiesz podstawy przejdziesz do „prawdziwego” zadania 🙂
Zadanie
Wybierz jedno bądź rozwiąż wszystkie 😉
- Stwórz konwerter jednostek. Pełna dowolność co będzie zamieniał. Może kg na gramy, metry na cm, USD na PLN.
- Maszyna losująca lotto. Po kliknięciu „Start” zwróć 6 liczb w zakresie 1-49.
Wbrew pozorom to banalne zadania. Jeśli jesteś bardziej zaawansowaną osobą możesz je mocniej rozbudować 😉
Pochwal się wynikiem w komentarzu, na grupie wsparcia bądź na Fanpage’u.
Powodzenia!
Uwagi:
JavaScript to nie Java!
Często mylone pojęcia, głównie przez osoby, które nie znają żadnego z nich albo dopiero zaczynają. W sumie nic dziwnego patrząc na nazwy. Tyle, że właśnie poza nazwą to za wiele je nie łączy 🙂
W pamięci mi utkwiło powiedzenie: „Java is to JavaScript as HAM is to HAMster.” (dla nieznających angielskiego „ham” oznacza szynkę, a „hamster” – chomika). Javę i JavaScript łączy tyle co dom z domeną, ser z sercem, itd. Mam nadzieję, że załapaliście 😉
To dwa całkiem odmienne języki programowania.
Ku pamięci: JavaScript to nie Java
Na starcie spotkacie się z dwoma sposobami wstawiania skryptów JavaScript’owych na stronie:
I: w dokumencie HTML
<script>
kod JavaScriptowy
</script>
II: w postaci linku do zewnętrznego pliku, w którym znajduje się Wasz kod JavaScript’owy
<script src=”myScript.js”></script>
Skrypty w przykładach umieszczane są zazwyczaj w sekcji <head>. Jednak w rzeczywistości często spotkacie się z umieszczaniem ich na końcu, przed domknięciem sekcji <body> (przed </body>).
Dlaczego? Jest to zalecane podejście. Ładowanie skryptu nie blokuje renderowania strony. Także docelowo będziecie tak działać.
Spotykam się czasem z komentarzami, że jakiś kurs jest słaby, bo autor umieścił skrypt na górze pliku HTML, a nie w oddzielnym pliku. Autor to robi, by Ci nie mieszać w głowie. Bo tak jest prościej. Nie świadczy to o jakości kursu. Skup się na jego zawartości, a nie szczegółach tego typu.
Skrypty JavaScript’owe potrafią być dość „duże”. Ale nie na starcie 😉 Dlatego spokojnie możecie się tym nie przejmować na tym etapie.
W programowaniu na zrobienie tego samego jest kilkadziesiąt sposobów. Wierz mi, że za 5 lat, gdy spojrzysz na swój kod zauważysz miliony błędów. To normalne. Za 10 lat będziesz się wstydzić kodu, który napisałeś 5 lat wcześniej. Poważnie. Uczysz się nowych rzeczy, rozwijasz. Nie ma kodu idealnego. Może być tylko albo aż „wystarczająco dobry”.
Pomocne materiały, informacje:
Darmowe kursy na początek nauki:
Learn JavaScript na CodeCademy (EN)
Basic JavaScript na FreeCodeCamp (EN)
Learn Web Development : JavaScript na Mozilla Developer Network (EN)
Wprowadzenie do JS: Rysowanie i animacja na Khan Academy (PL)
HTML/JS: Tworzenie interaktywnych stron internetowych na Khan Academy (PL)
Ostatnio jestem zafascynowana kanałem LearnCode.academy an Youtube. Mają także kurs JavaScript Fundamentals (EN)
Nie narzucam terminu, ale z doświadczenia powiem, że jeśli nie ustalisz kiedy zaczniesz – możesz tego nie zrobić w ogóle. Zdecyduj, że zaczniesz (najlepiej) dziś, (ewentualnie) jutro, (max) za tydzień. I zrób to.
Jeśli działa na Ciebie obligacja zewnętrzna możesz ją wykorzystać dzieląc się swoim planem na mojej grupie wsparcia. Raz na tydzień pytam o plan, a następnie o to jak poszło. Zachęcam do spróbowania takiego sposobu motywacji 🙂
Wynikiem podziel się w komentarzu bądź na grupie wsparcia – link do zadania na grupie.
Podyskutujmy o tym, co jest dobrze/źle, co mogłoby być zrobione lepiej. Na co warto zwrócić uwagę.
Powodzenia!
){kind=link}