Wprowadzenie. Czym jest JavaScript i dlaczego warto się go uczyć?


Wszystko, co może zostać napisane w JavaScript, ostatecznie zostanie napisane w JavaScript.

Douglas Crockford

Witaj w darmowym kursie Podstawy Javascript. Pierwsza aplikacja w konsoli - pierwszym kursie na stronie kodujemywbiurze.pl!

JavaScript jest obecnie najbardziej popularnym językiem programowania. Programowanie to nic innego, jak pisanie poleceń w języku programowania zrozumiałym dla komputera/ urządzenia/ programu/ przeglądarki, które określają, co urządzenie/ program ma wyświetlić, jak to wyświetlić, jak ma reagować na działania użytkownika, skąd ma pobrać dane lub gdzie je zapisać itd.

JavaScript w połączeniu z dwoma innymi językami - HTML i CSS - służy do tworzenia stron i aplikacji webowych (czyli takich, które działają w przeglądarce):

  • HTML pozwala stworzyć strukturę strony www (określa, gdzie w hierarchii jest nagłówek, lista, zdjęcie itd.),
  • CSS pozwala nadać stronom i aplikacjom ładnego wyglądu (np.: nagłówek jest wyśrodkowany, wyróżnione słowa mają inny kolor, a tło jest ciemnoszarego koloru), natomiast
  • JavaScript dodaje szczyptę magii, np.:
    • reaguje na działania użytkownika, tj.: kliknięcia w przycisk,
      • współdziała z bazą danych, pobierając i wysyłając dane,
      • dynamicznie zmienia istniejący kod HTML i CSS (np. zmienia kolor jakiegoś elementu, dodawaje nowe elementy).

Możliwości są nieograniczone!

To właśnie dzięki JavaScript strony i aplikacje są dynamiczne i interaktywne - jest on silnikiem napędzającym stronę.

Dlaczego proponuję zacząć naukę programowania webowego właśnie od JavaScript, a nie od HTML i CSS, co radzi większość programistów?

  • Po pierwsze, dlatego że sam zacząłem naukę programowania od JavaScript 3 lata temu i to się sprawdziło.
  • Po drugie, owszem, szybciej i łatwiej jest nauczyć się wstawiania na stronę nagłówka i paragrafów w HTML, a potem ostylować ich za pomocą CSS (spokojnie, nauczymy się tego w swoim czasie - po podstawach JavaScriptu będzie to łatwizna), ale... nie daje to poczucia... programowania właśnie. Dzięki JavaScript będziesz tworzyć realne polecenia, które będą przetwarzać różnego rodzaju dane i interakcje użytkownika, a dane i reakcje są życiodajną siłą Internetu (oraz ogólnie życia)!

Ponieważ wolę uczyć się nowych rzeczy w praktyce, widząc natychmiastowe rezultaty mojej nauki i pracy, dlatego w trakcie tego kursu:

  • od samego początku będziemy tworzyć coraz bardziej rozbudowaną aplikację do zarządzania listą zadań do zrobienia, która będzie działać w konsoli naszej przeglądarki bezpośrednio na tej stronie (za chwilę dowiesz się, czym jest konsola i jak z niej korzystać), a potem zostanie przekształcona w samodzielną aplikację webową,
  • przy okazji tworzenia aplikacji opanujemy podstawy języka JavaScript!

PS. de facto stworzymy co najmniej kilka samodzielnych, samowystarczalnych i coraz bardziej rozbudowanych i zaawansowanych wersji wspomnianej aplikacji, rozbudowując ją przy okazji poznawania kolejnych zagadnień z języka JavaScript (a później też HTML i CSS w odrębnych kursach).

Każda z wersji aplikacji będzie całością samą w sobie i można będzie ich używać osobno - te pierwsze wersje będą działać tylko w konsoli przeglądarki, kolejne natomiast będą możliwe do pobrania.

Aplikacja, którą stworzymy, umożliwi nam:

  • zapisywanie,
  • przechowywanie,
  • wyświetlanie,
  • dodawanie,
  • modyfikowanie oraz
  • usuwanie zadań do zrobienia.

Na początku (w Module 1. tego kursu) będzie to możliwe za pomocą poleceń napisanych przez nas kodem (poleceniami w czystym) JavaScript w konsoli.

Później (Moduł 2.) stworzymy i będziemy używać własnych funkcji, które zostaną zapisane w pliku bezpośrednio w przeglądarce, dzięki czemu nasz kod zostanie zachowany nawet po przeładowaniu strony oraz będziemy mogli go uruchomić w konsoli.

Natomiast później przejdziesz do kursu Local Storage, w którym rozbudujemy naszą aplikację w ten sposób, że przechowamy nie tylko kod aplikacji, ale także same zadania zostaną zapisane w przeglądarce za pośrednictwem wbudowanej funkcjonalności localStorage, która jest swego rodzaju magazynem danych.

Potem przerobimy niezbędne podstawy HTML oraz zintegrujemy HTML i JavaScript za pomocą DOM, dzięki czemu powstanie prawdziwa interaktywna aplikacja do zarządzania zadaniami z interfacem użytkownika w przeglądarce - z przyciskami, okienkiem dialogowym do wpisywania zadań itd.

Powodzenia!

Happy Coding!