{"id":252,"date":"2021-03-18T07:09:06","date_gmt":"2021-03-18T06:09:06","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=252"},"modified":"2021-06-29T06:49:30","modified_gmt":"2021-06-29T04:49:30","slug":"javascript-podstawy-cwiczenia-console-log-i-alert","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/javascript-podstawy-cwiczenia-console-log-i-alert\/","title":{"rendered":"JavaScript podstawy- \u0107wiczenia console.log() i alert()"},"content":{"rendered":"

Tym razem mamy do wykonania kilka \u0107wicze\u0144 w JavaScript dla pocz\u0105tkuj\u0105cych. Pocz\u0105wszy od console.log, czyli wy\u015bwietlania wynik\u00f3w naszych zada\u0144 w konsoli przegl\u0105darki poprzez kolejne, bardziej zaawansowane zadania.<\/p>\n

Dzi\u0119ki tym \u0107wiczeniom, b\u0119dziesz w stanie operowa\u0107 na zmiennych, sta\u0142ych, u\u017cywa\u0107 console.log(), alert() oraz prompt() jak i parseInt(), kt\u00f3ry wykorzystywa\u0107 b\u0119dziemy do przekszta\u0142cania stringu w liczby ca\u0142kowicie typu integer.<\/p>\n

By rozpocz\u0105\u0107 prac\u0119, b\u0119dziemy potrzebowa\u0107 dwa pliki, index.html oraz plik skrypt.js, w kt\u00f3rym b\u0119dziemy wykonywa\u0107 \u0107wiczenia.<\/p>\n

\u017beby\u015bmy mogli od razu przyst\u0105pi\u0107 do pracy, skopiujmy sobie zawarto\u015b\u0107 pliku index.html:<\/p>\n

<!DOCTYPE html><\/code>
\n<html lang=\"pl-PL\"><\/code>
\n<head><\/code>
\n<title>\u0106wiczenie JS<\/title><\/code>
\n<!-- zewn\u0119trzny plik JavaScript --><\/code>
\n<script src=\"skrypt.js\"><\/script><\/code>
\n<\/head><\/code>
\n<body><\/code>
\n<!-- miejsce na tre\u015b\u0107 naszej strony --><\/code>
\n<\/body><\/code>
\n<\/html><\/code><\/p>\n

A teraz nie pozostaje nam nic innego jak przej\u015b\u0107 do realizacji \u0107wicze\u0144, zwi\u0105zanych z obs\u0142ug\u0105 skrypt\u00f3w JavaScript za pomoc\u0105 konsoli, alert\u00f3w oraz prompt’\u00f3w.<\/p>\n

\u0106wiczenie 1<\/h2>\n

Wy\u015bwietl w konsoli komunikat „Witaj \u015awiecie”.<\/p>\n

W tym celu stw\u00f3rz plik javascript, np skrypt.js i do\u0142\u0105cz go do dokumentu html w dowolny spos\u00f3b, na przyk\u0142ad:<\/p>\n

umieszczaj\u0105c kod wprost mi\u0119dzy znacznikami script
\n<script<\/span>>
\n\/\/kod JS znajduje si\u0119 pomi\u0119dzy znacznikami script
\n<\/script<\/span>><\/code><\/p>\n

lub osadzaj\u0105c go w zewn\u0119trznym pliku<\/p>\n

<script<\/span> src<\/span>=\"skrypt.js\"<\/span>><\/span><\/script<\/span>><\/span> <\/code><\/pre>\n
Aby wy\u015bwietli\u0107 nasz komunikat, skrypt powinien wygl\u0105da\u0107 nast\u0119puj\u0105co<\/p>\n
console.log(\"Witaj \u015bwiecie\");<\/code><\/p>\n
W przegl\u0105darce Chrome, musimy teraz w\u0142\u0105czy\u0107 konsol\u0119, post\u0119pujemy wi\u0119c jak na screenie ni\u017cej.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
\u0106wiczenie 2<\/h2>\n
Utw\u00f3rz za pomoc\u0105 var lub let (let to nowa wersja deklaracji zmiennych w JavaScript) zmienn\u0105, kt\u00f3ra b\u0119dzie Twoim imieniem i wypisz w konsoli swoje imi\u0119.<\/p>\n
let imie = \"Piotr\";<\/code>
\nconsole.log(imie);<\/code><\/p>\n
\u0106wiczenie 3<\/h2>\n
Skorzystajmy teraz z okienka alertu. Utw\u00f3rz skrypt, kt\u00f3ry policzy sum\u0119 dw\u00f3ch liczb zadeklarowanych jako zmienne (let).\u00a0 Format zapisu alertu javascriptowego rozpoczynamy od alert, czyli przyk\u0142adowo:<\/p>\n
alert(zmienna);<\/code><\/p>\n
alert('ci\u0105g znakowy, inaczej string');<\/code><\/p>\n
alert('Cze\u015b\u0107 '+imie);\u00a0<\/code><\/p>\n
Wykonaj skrypt samodzielnie, lub przeanalizuj przyk\u0142ad ni\u017cej i spr\u00f3buj zrobi\u0107 go jeszcze raz samemu<\/p>\n
let pierwsza = 1;<\/code>
\nlet druga = 5<\/code>
\nlet suma = pierwsza + druga;<\/code>
\nalert(suma);<\/code><\/p>\n
Skrypt liczy i pokazuje wynik, w tym przypadku liczb\u0119 6, ale nie jest przyjazny dla odbiorcy, nie jest to napisane jak to si\u0119 m\u00f3wi „pe\u0142nym zdaniem”. Zr\u00f3bmy wi\u0119c modyfikacj\u0119 powy\u017cszego<\/p>\n
let pierwsza = 1;<\/code>
\nlet druga = 5<\/code>
\nlet suma = pierwsza + druga;<\/code>
\nalert('suma liczb '+pierwsza+' + '+druga+' wynosi '+suma);<\/code><\/p>\n
\u0106wiczenie 4<\/h2>\n
Podobnie jak wy\u017cej, skorzystaj deklaracji sta\u0142ej, w kt\u00f3rej okre\u015bl do 2 miejsc po przecinku liczb\u0119 \u03c0. Za deklaracj\u0119 sta\u0142ych odpowiada const (od s\u0142owa constans = sta\u0142a). Zapami\u0119taj, \u017ce liczby zmiennoprzecinkowe w Javascript nie oddzielamy przecinkiem a kropk\u0105.<\/p>\n
const pi=3.14;<\/code><\/p>\n
alert(pi);<\/code><\/p>\n
lub wersja konsolowa<\/p>\n
const pi=3;<\/code><\/p>\n
console.log(pi);<\/code><\/p>\n
i jeszcze raz prze\u0107wiczmy „mieszanie” stringu czyli ci\u0105gu znakowego oraz tym razem sta\u0142ej.<\/p>\n
const pi=3.14;<\/code><\/p>\n
alert('Liczba Pi wynosi '+pi);<\/code><\/p>\n
lub wersja konsolowa<\/p>\n
const pi=3;<\/code><\/p>\n
console.log('Liczba Pi wynosi '+pi);<\/code><\/p>\n
\u0106wiczenie 5<\/h2>\n
Wykorzystuj\u0105c operator typeof, sprawd\u017a jakiego typu jest zmienna a=54<\/em> oraz zmienna b=’Sprawdzam operator typeof”<\/em><\/p>\n
let a = 54;<\/code>
\nlet b = 'Sprawdzam operator typeof';<\/code><\/p>\n
console.log(typeof a);<\/code>
\nconsole.log(typeof b);<\/code><\/p>\n
wykonaj to samo \u0107wiczenie w formie alertu i z komunikatem napisanym pe\u0142nym zdaniem \ud83d\ude42<\/p>\n
let a = 54;<\/code>
\nlet b = 'Sprawdzam operator typeof';<\/code><\/p>\n
alert('Typ danych zmiennej a to '+typeof a);<\/code>
\nalert('Typ danych zmiennej b to '+typeof b);<\/code><\/p>\n
\u0106wiczenie 6<\/h2>\n
Napisz 5 zmiennych, kt\u00f3re b\u0119d\u0105 typu string (czyli w apostrofach). Po\u0142\u0105czenie tych zmiennych po kolei, ma utworzy\u0107 logiczne zdanie w konsoli (console.log()).<\/p>\n
Przyk\u0142adowe rozwi\u0105zanie:<\/p>\n
let a ='to ';<\/code>
\nlet b ='jest ';<\/code>
\nlet c ='moje ';<\/code>
\nlet d ='pierwsze ';<\/code>
\nlet e ='zdanie';<\/code>
\nlet zdanie = a+b+c+d+e;<\/code>
\nconsole.log(zdanie);<\/code><\/p>\n
\u0106wiczenie 7<\/h2>\n
Napisz swoje dwa kalkulatory. Wynik zaprezentuj w pe\u0142nym zdaniu. W przyk\u0142adowym rozwi\u0105zaniu ni\u017cej, kalkulator licz\u0105cy proporcje<\/p>\n
let stoprocent = 100;<\/code>
\nlet liczba_dla_stoprocent = 50;<\/code>
\nszukana = 5;<\/code>
\nconsole.log((szukana*stoprocent)\/liczba_dla_stoprocent);<\/code><\/p>\n
\u0106wiczenie 8<\/h2>\n
Skorzystaj z instrukcji prompt(), kt\u00f3ra wy\u015bwietla podany jako argument komunikat (rodzaj alertu). Podana przez u\u017cytkownika warto\u015b\u0107 zostaje przypisana do okre\u015blonej zmiennej. Dzi\u0119ki czemu stworzymy nasz w pe\u0142ni funkcjonalny kod.<\/p>\n
Zajmijmy si\u0119 w 1 kolejno\u015bci przyk\u0142adem<\/p>\n
let zmienna=prompt(\"Ile masz lat: \");<\/code><\/p>\n
console.log('Wspaniale, masz '+zmienna+' lat');<\/code><\/p>\n
Teraz, spr\u00f3bujmy wykona\u0107 kalkulator, dodaj\u0105cy dwie wpisane przez u\u017cytkownika liczby.<\/p>\n
let a=prompt('Podaj liczb\u0119 a');<\/code>
\nlet b=prompt('Teraz podaj b');<\/code>
\nconsole.log('Suma liczb wynosi'+(a+b));<\/code><\/p>\n
Sprawd\u017a wynik. Z pewno\u015bci\u0105 zauwa\u017cy\u0142e\u015b, \u017ce suma przyk\u0142adowo podanych liczb 2 i 5 w tym przypadku zostaje zaprezentowana nie jako 7 a jako 25. Dzieje si\u0119 tak, poniewa\u017c, instrukcja prompt() zwraca zawsze ci\u0105g znakowy, czyli string.<\/p>\n
W tym przypadku nale\u017cy zastosowa\u0107 parseInt kt\u00f3ry przetwarza string na liczb\u0119 ca\u0142kowit\u0105 typu integer. Poprawmy wi\u0119c powy\u017cszy kalkulator, dodaj\u0105c do niego parseint<\/p>\n
let a=parseInt(prompt('Podaj liczb\u0119 a'));<\/code>
\nlet b=parseInt(prompt('Teraz podaj b'));<\/code>
\nconsole.log('Suma liczb wynosi '+(a+b));<\/code><\/p>\n
Na podstawie powy\u017cszego, stw\u00f3rz 2 dowolne kalkulatory, mog\u0105 by\u0107 to kalkulatory, kt\u00f3re pos\u0142u\u017c\u0105 Ci w zadaniach matematycznych, wykorzystaj do tego co\u015b bardziej zaawansowanego ni\u017c tylko pole kwadratu czy wysoko\u015b\u0107 tr\u00f3jk\u0105ta \ud83d\ude42<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Tym razem mamy do wykonania kilka \u0107wicze\u0144 w JavaScript dla pocz\u0105tkuj\u0105cych. Pocz\u0105wszy od console.log, czyli wy\u015bwietlania wynik\u00f3w naszych zada\u0144 w konsoli przegl\u0105darki poprzez kolejne, bardziej zaawansowane zadania.<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[64],"class_list":["post-252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}