Lekcja 3: Klocki Javascriptu

Składnia, zmienne, funkcje

  1. Naciśnij F12, żeby odpalić narzędzia developerskie i przejdź na zakładkę „Konsola”
  2. wpisz: console.log(„cześć Maciek”) i naciśnij enter
  3. Co się stało:
    1. console to obiekt, czyli taki pojemnik na rzeczy,
    2. log to funkcja dostępna w tym obiekcie
    3. cześć to argument przekazany do funkcji log
    4. nawiasy, kropki i ciapki to elementy składni języka
  4. Podobnie: Math.sqrt(16): jest sobie obiekt Math, który ma funkcję sqrt, której podajesz 16, a funkcja sqrt zwraca wynik, który zobaczysz w konsoli po naciśnięciu enter

Świat byłby prostszy gdyby każdy nazywał się Maciek, ale niestety…

  • Jak napisać „cześć Lucyna” albo „cześć Ewka” jeśli mamy do czynienia z Lucyną lub Ewką?

Ano. Gdzieś trzeba przechować imię – od tego są zmienne, czyli:
var imię;
imię = „Ewka”

I juz można będzie napisać:

console.log(„cześć” + imię)

  • A jak zapytać o imię i wstawić podaną wartość do zmiennej?

Jest funkcja prompt(„Podaj imię”, „np. Alojz”) – wpisz ją w konsolę, daj enter i zobacz co zwróci…

Tę zwrotkę z funkcji można przypisać do zmiennej imię:

imię = prompt(„Podaj imię”, „np. Alojz”)

wpisz to do konsoli, a potem podaj imię.

teraz jak napiszesz w konsoli imię i dasz enter zobaczysz wartość wpisaną do zmiennej imię

Teraz możesz napisać:

console.log(„cześć” + imię)

  • na koniec najważniejsza rzecz: czy nie fajniej byłoby po prostu napisać: cześć(imię) ?
  • Zakładamy, że fajniej, więc piszemy:

function cześć (kto){
console.log(„cześć” + kto)
}

Teraz jak napiszesz: cześć(„Luiza”) uruchomisz funkcję cześć, która wypisze tekst w konsoli

[Kurs programowania internetów] Lekcja 2: Dokumentacje, książki, inne zasoby

Celem tego kursu jest wyłącznie ogarnięcie najpodstawowszych podstaw, dlatego poniżej masz listę linków do zgłębiania tematu:

  1. http://eloquentjavascript.net/contents.html – dobra książka o programowaniu w JavaScript
  2. https://tympanus.net/ – fajne przykłady, głównie CSS
  3. http://codepen.io/ – fajne przykłady
  4. Dokumentacje – Ważne: Dokumentacja Twoim przyjacielem jest
    1. HTML
    2. CSS
    3. JavaScript
    4. Web APIs & DOM

Zadanie: przejrzeć linki, poklikać, oswoić się

Następna lekcja

Powrót: Kurs programowania internetów

[Kurs programowania internetów] Lekcja 1: HTML, Javascript, CSS po łebkach

  1. Idź na stronę google
  2. Kliknij prawym na dowolny element strony
  3. Wybierz Zbadaj
  4. Wu-ala – możesz psuć stronę na której jesteś 🙂
  5. Ten dziwny tekst to HTML – język opisujący strukturę strony, którą oglądasz
    1. Przykładowo: <b>pogrubiony tekst</b> oznacza, że zobaczysz pogrubiony tekst
    2. Każda strona internetowa zawiera HTML. Pobaw się, popatrz, poklikaj.
    1. A to są style, czyli CSS.
    2. Zobacz, że wpisując color: red w element.style zmienisz kolor tekstu przycisku.
  6. Na górze narzędzi deweloperskich przełącz się na Console
    1. wpisz tam alert(„Jest Super!”) i naciśnij enter.
    2. Tym oto sposobem możesz wykonywać polecenia w języku Javascript
  7. HTML + CSS + Javascript to wszystko czego potrzebujesz do robienia stron i aplikacji internetowych
  8. Od tej pory będziemy montować nasze strony w JSBin – to taki serwis, gdzie wprowadzasz HTML, CSS i Javascript i masz podgląd na żywo.
    1. Sprawdź i oswój się.
    2. Większość kodu w sekcji HTML <head> powinna tam być.
    3. Treść strony znajduje się w tagu <body>
    4. Zobacz, że nowa linia w kodzie html, nie oznacza, że na stronie dostaniesz nową linię. Aby wymusić nową linię używasz tagu <br>
    5. Style CSS grupujemy w klasy (class), które możemy przypisać do różnych elementów w HTMLu

Część kursu programowanie dla znajomych