JavaScript podstawy- ćwiczenia console.log() i alert()

Tym razem mamy do wykonania kilka ćwiczeń w JavaScript dla początkujących. Począwszy od console.log, czyli wyświetlania wyników naszych zadań w konsoli przeglądarki poprzez kolejne, bardziej zaawansowane zadania.

Dzięki tym ćwiczeniom, będziesz w stanie operować na zmiennych, stałych, używać console.log(), alert() oraz prompt() jak i parseInt(), który wykorzystywać będziemy do przekształcania stringu w liczby całkowicie typu integer.

By rozpocząć pracę, będziemy potrzebować dwa pliki, index.html oraz plik skrypt.js, w którym będziemy wykonywać ćwiczenia.

Żebyśmy mogli od razu przystąpić do pracy, skopiujmy sobie zawartość pliku index.html:

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Ćwiczenie JS</title>
<!-- zewnętrzny plik JavaScript -->
<script src="skrypt.js"></script>
</head>
<body>
<!-- miejsce na treść naszej strony -->
</body>
</html>

A teraz nie pozostaje nam nic innego jak przejść do realizacji ćwiczeń, związanych z obsługą skryptów JavaScript za pomocą konsoli, alertów oraz prompt’ów.

Ćwiczenie 1

Wyświetl w konsoli komunikat „Witaj Świecie”.

W tym celu stwórz plik javascript, np skrypt.js i dołącz go do dokumentu html w dowolny sposób, na przykład:

umieszczając kod wprost między znacznikami script
<script>
//kod JS znajduje się pomiędzy znacznikami script
</script>

lub osadzając go w zewnętrznym pliku

<script src="skrypt.js"></script> 

Aby wyświetlić nasz komunikat, skrypt powinien wyglądać następująco

console.log("Witaj świecie");

W przeglądarce Chrome, musimy teraz włączyć konsolę, postępujemy więc jak na screenie niżej.

 

Ćwiczenie 2

Utwórz za pomocą var lub let (let to nowa wersja deklaracji zmiennych w JavaScript) zmienną, która będzie Twoim imieniem i wypisz w konsoli swoje imię.

let imie = "Piotr";
console.log(imie);

Ćwiczenie 3

Skorzystajmy teraz z okienka alertu. Utwórz skrypt, który policzy sumę dwóch liczb zadeklarowanych jako zmienne (let).  Format zapisu alertu javascriptowego rozpoczynamy od alert, czyli przykładowo:

alert(zmienna);

alert('ciąg znakowy, inaczej string');

alert('Cześć '+imie); 

Wykonaj skrypt samodzielnie, lub przeanalizuj przykład niżej i spróbuj zrobić go jeszcze raz samemu

let pierwsza = 1;
let druga = 5
let suma = pierwsza + druga;
alert(suma);

Skrypt liczy i pokazuje wynik, w tym przypadku liczbę 6, ale nie jest przyjazny dla odbiorcy, nie jest to napisane jak to się mówi „pełnym zdaniem”. Zróbmy więc modyfikację powyższego

let pierwsza = 1;
let druga = 5
let suma = pierwsza + druga;
alert('suma liczb '+pierwsza+' + '+druga+' wynosi '+suma);

Ćwiczenie 4

Podobnie jak wyżej, skorzystaj deklaracji stałej, w której określ do 2 miejsc po przecinku liczbę π. Za deklarację stałych odpowiada const (od słowa constans = stała). Zapamiętaj, że liczby zmiennoprzecinkowe w Javascript nie oddzielamy przecinkiem a kropką.

const pi=3.14;

alert(pi);

lub wersja konsolowa

const pi=3;

console.log(pi);

i jeszcze raz przećwiczmy „mieszanie” stringu czyli ciągu znakowego oraz tym razem stałej.

const pi=3.14;

alert('Liczba Pi wynosi '+pi);

lub wersja konsolowa

const pi=3;

console.log('Liczba Pi wynosi '+pi);

Ćwiczenie 5

Wykorzystując operator typeof, sprawdź jakiego typu jest zmienna a=54 oraz zmienna b=’Sprawdzam operator typeof”

let a = 54;
let b = 'Sprawdzam operator typeof';

console.log(typeof a);
console.log(typeof b);

wykonaj to samo ćwiczenie w formie alertu i z komunikatem napisanym pełnym zdaniem 🙂

let a = 54;
let b = 'Sprawdzam operator typeof';

alert('Typ danych zmiennej a to '+typeof a);
alert('Typ danych zmiennej b to '+typeof b);

Ćwiczenie 6

Napisz 5 zmiennych, które będą typu string (czyli w apostrofach). Połączenie tych zmiennych po kolei, ma utworzyć logiczne zdanie w konsoli (console.log()).

Przykładowe rozwiązanie:

let a ='to ';
let b ='jest ';
let c ='moje ';
let d ='pierwsze ';
let e ='zdanie';
let zdanie = a+b+c+d+e;
console.log(zdanie);

Ćwiczenie 7

Napisz swoje dwa kalkulatory. Wynik zaprezentuj w pełnym zdaniu. W przykładowym rozwiązaniu niżej, kalkulator liczący proporcje

let stoprocent = 100;
let liczba_dla_stoprocent = 50;
szukana = 5;
console.log((szukana*stoprocent)/liczba_dla_stoprocent);

Ćwiczenie 8

Skorzystaj z instrukcji prompt(), która wyświetla podany jako argument komunikat (rodzaj alertu). Podana przez użytkownika wartość zostaje przypisana do określonej zmiennej. Dzięki czemu stworzymy nasz w pełni funkcjonalny kod.

Zajmijmy się w 1 kolejności przykładem

let zmienna=prompt("Ile masz lat: ");

console.log('Wspaniale, masz '+zmienna+' lat');

Teraz, spróbujmy wykonać kalkulator, dodający dwie wpisane przez użytkownika liczby.

let a=prompt('Podaj liczbę a');
let b=prompt('Teraz podaj b');
console.log('Suma liczb wynosi'+(a+b));

Sprawdź wynik. Z pewnością zauważyłeś, że suma przykładowo podanych liczb 2 i 5 w tym przypadku zostaje zaprezentowana nie jako 7 a jako 25. Dzieje się tak, ponieważ, instrukcja prompt() zwraca zawsze ciąg znakowy, czyli string.

W tym przypadku należy zastosować parseInt który przetwarza string na liczbę całkowitą typu integer. Poprawmy więc powyższy kalkulator, dodając do niego parseint

let a=parseInt(prompt('Podaj liczbę a'));
let b=parseInt(prompt('Teraz podaj b'));
console.log('Suma liczb wynosi '+(a+b));

Na podstawie powyższego, stwórz 2 dowolne kalkulatory, mogą być to kalkulatory, które posłużą Ci w zadaniach matematycznych, wykorzystaj do tego coś bardziej zaawansowanego niż tylko pole kwadratu czy wysokość trójkąta 🙂

 

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.