Języki obok siebie · lekcja 04

Napisy i dane od użytkownika

Skąd program bierze dane: formularz, klawiatura, pole na stronie
Wszystko przychodzi jako napis, więc trzeba to zamienić na liczbę
Zmienna w środku tekstu, długość, wielkie litery, spacje
Ćwiczenie: program pyta o imię i wiek, liczy rok urodzenia

Rozgrzewka · 3 minuty

Co pamiętacie z klas i obiektów?

Czym różni się klasa od obiektu?
Jak nazywa się metoda, która uruchamia się przy tworzeniu obiektu?
Co oznacza zapis $this, self i this w metodzie?

Część 1 · Skąd dane

Kto pyta o dane i w którym miejscu

PHP

// adres: strona.php?name=Ala
$name = $_GET["name"];

Python

name = input("Jak masz na imię? ")

JavaScript

let name = prompt("Jak masz na imię?");
// pole: document.getElementById("name").value

php.net: Language Reference › Predefined Variables › $_GET · docs.python.org: Library Reference › Built-in Functions › input · MDN: Web/API/Window/prompt · Web/API/HTMLInputElement/value

Część 1 · Napis czy liczba

Wpisane zawsze jest napisem

PHP

$ageText = $_GET["age"];
// napis "17"
$age = (int) $ageText;
// liczba 17, to samo:
// intval($ageText)

Python

age_text = input("Ile lat? ")
# napis "17"
age = int(age_text)
# liczba 17

JavaScript

let ageText = prompt("Ile lat?");
// napis "17"
let age = Number(ageText);
// liczba 17

Tak samo we wszystkich trzech: dane od człowieka wchodzą jako napis i zamieniacie je jedną funkcją. Inaczej jest przy liczeniu: PHP sam potraktuje napis "17" jak liczbę, Python i JavaScript tego nie zrobią, więc zamiana jest u nich obowiązkowa.

php.net: Language Reference › Types › Type Casting · Function Reference › intval · docs.python.org: Library Reference › Built-in Functions › int · MDN: Web/JavaScript/Reference/Global_Objects/Number

Część 1 · Pułapka

Ile daje „2” plus „3”?

PHP

echo "2" + "3";  // 5
echo "2" . "3";  // 23

Python

print("2" + "3")  # 23
print("2" + 3)    # TypeError

JavaScript

console.log("2" + "3");  // 23
console.log("2" + 3);    // 23

php.net: Language Reference › Types › Numeric strings · Operators › String Operators · docs.python.org: Library Reference › Built-in Types › str · MDN: Web/JavaScript/Reference/Operators/Addition

Część 2 · Zmienna w tekście

Wstaw zmienną w środek zdania

PHP

$price = 19.99;
echo "Cena: $price";
// Cena: 19.99
echo 'Cena: $price';
// Cena: $price

Python

price = 19.99
print(f"Cena: {price}")
# Cena: 19.99

JavaScript

let price = 19.99;
console.log(`Cena: ${price}`);
// Cena: 19.99

Pomysł jest jeden: w tekście zostaje puste miejsce, a język wstawia tam wartość zmiennej. Różni się tylko znak, który to miejsce otwiera: sam dolar w PHP, litera f i klamry w Pythonie, odwrotne apostrofy i ${…} w JavaScripcie.

php.net: Language Reference › Types › Strings (sekcja „String interpolation”) · docs.python.org: tutorial 7.1.1 „Formatted String Literals” · MDN: Web/JavaScript/Reference/Template_literals

Część 2 · Długość i wielkość liter

Ile znaków i WIELKIE litery

Do czego	PHP	Python	JavaScript
ile znaków ma napis	`mb_strlen($text)`	`len(text)`	`text.length`
wielkie litery	`mb_strtoupper($text)`	`text.upper()`	`text.toUpperCase()`

Dlaczego w PHP dwie nazwy: zapis strlen("Zażółć") daje 10, bo liczy bajty, a każda polska litera zajmuje ich dwa. Zapis mb_strlen("Zażółć") daje 6, bo liczy znaki. Python i JavaScript liczą znaki od razu i też pokazują 6.

php.net: Function Reference › strlen · mbstring › mb_strlen · mb_strtoupper · docs.python.org: Library Reference › Built-in Types › str.upper · MDN: Web/JavaScript/Reference/Global_Objects/String/length · String/toUpperCase

Część 2 · Spacje na brzegach

Utnij spacje z początku i końca

PHP

$name = trim($_GET["name"]);

Python

name = input("Imię: ").strip()

JavaScript

let name = prompt("Imię:").trim();

php.net: Function Reference › trim · docs.python.org: Library Reference › Built-in Types › str.strip · MDN: Web/JavaScript/Reference/Global_Objects/String/trim

Ściąga · do zeszytu

Dane od użytkownika na trzy języki

Co	PHP	Python	JavaScript
dane od użytkownika	`$_GET["name"]`	`input("Imię: ")`	`prompt("Imię:")`
pole na stronie	–	–	`getElementById("age").value`
napis na liczbę	`(int) $ageText`	`int(age_text)`	`Number(ageText)`
sklejenie napisów	`$a . $b`	`a + b`	`a + b`
zmienna w tekście	`"Cena: $price"`	`f"Cena: {price}"`	`Cena: ${price}`
ile znaków	`mb_strlen($text)`	`len(text)`	`text.length`
wielkie litery	`mb_strtoupper($text)`	`text.upper()`	`text.toUpperCase()`
spacje z brzegów	`trim($text)`	`text.strip()`	`text.trim()`
bezpieczne wypisanie	`htmlspecialchars($text)`	–	`node.textContent`

php.net: Language Reference · Function Reference › Strings · docs.python.org: Library Reference › Built-in Functions · Built-in Types › str · MDN: Web/JavaScript/Reference/Global_Objects/String

Ćwiczenie · na kartce · 12 minut

Imię, wiek i rok urodzenia

Po prawej masz program w Pythonie: pyta o imię i wiek, a potem wypisuje zdanie z rokiem urodzenia. Przepisz go linijka po linijce, nazw zmiennych nie zmieniaj. Bieżący rok podaje date.today().year w Pythonie, new Date().getFullYear() w JavaScripcie i date("Y") w PHP.

Przepisz ten program na JavaScript.
Co się stanie, jeśli pominiesz zamianę na liczbę?
Dla chętnych: wersja w PHP, dane z adresu strony.

Program w Pythonie

from datetime import date

name = input("Jak masz na imię? ")
age_text = input("Ile masz lat? ")
age = int(age_text)
year = date.today().year - age

print(f"Cześć, {name}! Masz {age} lat, "
      f"rok urodzenia: {year}.")

Sprawdzenie

Trzy pytania na koniec

Dlaczego wiek wpisany przez użytkownika trzeba zamienić na liczbę?
Co pokaże "2" + "3" w PHP, a co w dwóch pozostałych językach?
Jak wstawić zmienną price w środek napisu w każdym z języków?

Podsumowanie

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
dane z formularza	Każda wyszukiwarka, filtr w sklepie i logowanie czyta w ten sposób to, co wpisał człowiek	codziennie
zamiana na liczbę	Cena, ilość sztuk i wiek przychodzą jako napis, więc serwis przelicza je przed liczeniem	codziennie
przycinanie spacji	Adresy pocztowe i loginy czyści się ze spacji przed zapisem do bazy	codziennie
wypisanie tego, co wpisał człowiek	W PHP przez `htmlspecialchars`, w JavaScripcie przez `textContent`, nigdy przez `innerHTML`	obowiązkowo

Ciekawostka: w Pythonie 2 polecenie input() traktowało wpisany tekst jak kod i od razu go wykonywało. Python 3 oddaje zwykły napis, a stare zachowanie trzeba dziś wywołać samemu.

php.net: Function Reference › htmlspecialchars · MDN: Web/API/Element/innerHTML (sekcja „Security considerations”) · ciekawostka: docs.python.org: What's New In Python 3.0 (Builtins, PEP 3111)