Języki obok siebie · lekcja 01

PHP, Python i JavaScript obok siebie

Gdzie wykonuje się kod: serwer, przeglądarka, komputer
Jeden pomysł, trzy zapisy: zmienna, warunek, pętla, funkcja
Ściąga na jednej kartce, do przepisania
Ćwiczenie: przetłumacz program na język, który znasz

Rozgrzewka · 3 minuty

Który język już znacie?

Kto z Was pisał już coś w PHP, kto w Pythonie, a kto w JavaScripcie?
Na której lekcji albo przy jakiej okazji spotkaliście ten język?
Co robi program, który zapamiętuje imię i potem je wypisuje?

Część 1 · Gdzie wykonuje się kod

Trzy języki, trzy miejsca pracy

php.net: Manual › Getting Started › What can PHP do? · MDN: Learn_web_development/Core/Scripting/What_is_JavaScript (sekcja „Server-side versus client-side code”) · docs.python.org: General Python FAQ, „What is Python good for?”

Część 1 · Pierwszy program

To samo „Cześć” w trzech zapisach

PHP

<?php
echo "Cześć, Ala";

Plik index.php w katalogu serwera, potem localhost w przeglądarce.

Python

print("Cześć, Ala")

Plik hello.py, potem w wierszu poleceń python hello.py.

JavaScript

console.log("Cześć, Ala");

Klawisz F12 w przeglądarce, zakładka Konsola, wpisujecie i Enter.

Każdy z tych języków ma własne polecenie wypisywania, bo każdy pisze w innym miejscu: PHP do strony, Python do okna wiersza poleceń, JavaScript do konsoli przeglądarki.

php.net: Getting Started › Your first PHP-enabled page · docs.python.org: tutorial 2.1 „Invoking the Interpreter” · MDN: Learn_web_development/Core/Scripting/What_is_JavaScript (sekcja „A hello world! example”)

Część 2 · Zmienne

Zmienna: pudełko z nazwą

Do czego	PHP	Python	JavaScript
zapamiętanie wartości	`$name = "Ala";`	`name = "Ala"`	`let name = "Ala";`
sklejenie dwóch napisów	`$a . $b`	`a + b`	`a + b`
komentarz do końca linii	`// uwaga`	`# uwaga`	`// uwaga`
koniec instrukcji	średnik	nowa linia	średnik

We wszystkich trzech językach typ bierze się z wartości, nie z deklaracji: wpisujecie "Ala" i to jest napis, wpisujecie 16 i to jest liczba. Nazwa $name w PHP zaczyna się od znaku dolara, w dwóch pozostałych językach nie.

php.net: Language Reference › Variables › Basics · docs.python.org: tutorial 3.1.1 i 3.1.2 · MDN: Learn_web_development/Core/Scripting/Variables

Część 2 · Warunek

if: ta sama decyzja, inny zapis

PHP

if ($price > 100) {
  echo "Rabat";
} else {
  echo "Bez rabatu";
}

Python

if price > 100:
    print("Rabat")
else:
    print("Bez rabatu")

JavaScript

if (price > 100) {
  console.log("Rabat");
} else {
  console.log("Bez rabatu");
}

Równa się czy równa się co do typu: zapis == w PHP i JavaScripcie sprawdza samą wartość, więc napis "1" uznaje za równy liczbie 1. Zapis === sprawdza dodatkowo typ i wtedy równości nie ma. Python ma tylko == i typów nie zamienia.

php.net: Language Reference › Control Structures › if · Operators › Comparison Operators · docs.python.org: tutorial 4.1 „if Statements” · Language Reference › Expressions › Comparisons · MDN: Learn_web_development/Core/Scripting/Conditionals · Web/JavaScript/Equality_comparisons_and_sameness

Część 2 · Pętla

Policz od 1 do 5

PHP

for ($i = 1; $i <= 5; $i++) {
  echo $i;
}

Python

for i in range(1, 6):
    print(i)

JavaScript

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

php.net: Language Reference › Control Structures › for · docs.python.org: tutorial 4.2 „for Statements” i 4.3 „The range() Function” · MDN: Learn_web_development/Core/Scripting/Loops

Część 2 · Funkcja

Funkcja: wkładasz dane, wyjmujesz wynik

PHP

function greet($name) {
  return "Cześć, " . $name;
}
echo greet("Ala");

Python

def greet(name):
    return "Cześć, " + name

print(greet("Ala"))

JavaScript

function greet(name) {
  return "Cześć, " + name;
}
console.log(greet("Ala"));

php.net: Language Reference › Functions › User-defined functions · docs.python.org: tutorial 4.7 „Defining Functions” · MDN: Learn_web_development/Core/Scripting/Functions

Ściąga · do zeszytu

Jedna tabela na trzy języki

Co	PHP	Python	JavaScript
zmienna	`$name = "Ala";`	`name = "Ala"`	`let name = "Ala";`
sklejenie napisów	`$a . $b`	`a + b`	`a + b`
komentarz	`// uwaga`	`# uwaga`	`// uwaga`
koniec instrukcji	średnik	nowa linia	średnik
warunek	`if (…) { … }`	`if …:` i wcięcie	`if (…) { … }`
pętla po liczbach	`for ($i = 1; …)`	`for i in range(1, 6):`	`for (let i = 1; …)`
funkcja	`function greet(…)`	`def greet(…):`	`function greet(…)`
wypisanie	`echo`	`print()`	`console.log()`
lista wartości	`[1, 2, 3]`	`[1, 2, 3]`	`[1, 2, 3]`
gdzie działa	serwer	komputer, serwer	przeglądarka, serwer z Node.js

php.net: Language Reference · docs.python.org: tutorial 3–4 · MDN: Learn_web_development/Core/Scripting

Ćwiczenie · na kartce · 12 minut

Przetłumacz program na swój język

Po prawej masz program w PHP: liczy kwotę do zapłaty i przy cenie powyżej 100 odejmuje 10 % rabatu. Przepisz go linijka po linijce, nazw zmiennych nie zmieniaj.

Przepisz ten program na Python.
Przepisz ten program na JavaScript.
Dla chętnych: dopisz drugi próg, powyżej 200 rabat 20 %.

Program w PHP

<?php
$price = 120;
$total = $price;

if ($price > 100) {
  $total = $price * 0.9;
}

echo "Do zapłaty: " . $total;

Sprawdzenie

Trzy pytania na koniec

Gdzie wykonuje się echo, a gdzie console.log?
Czym różni się == od === w JavaScripcie?
Jak w Pythonie zaznaczamy, że linijka należy do warunku if?

Podsumowanie

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
PHP i `echo`	WordPress i większość zwykłych stron: blogi, sklepy, strony firmowe	codziennie
Python i `print`	Przetwarzanie danych, uczenie maszynowe, skrypty administratorów serwerów	codziennie
JavaScript i `console.log`	Każda strona w przeglądarce, a z Node.js ten sam język także na serwerze	codziennie
if, pętla, funkcja	Te same trzy konstrukcje znajdziecie w Javie, C#, Go i w każdym kolejnym języku	standard

Ciekawostka: wszystkie trzy języki to mniej więcej rówieśnicy: Python powstał na początku lat 90., PHP i JavaScript w 1995 roku. Żaden nie wyparł pozostałych, bo każdy zajął inne miejsce w internecie.

ciekawostka: php.net: Manual › History of PHP · docs.python.org: History of the software · MDN: Web/JavaScript/Language_overview