{"id":264,"date":"2021-03-25T05:24:15","date_gmt":"2021-03-25T04:24:15","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=264"},"modified":"2024-03-28T08:01:53","modified_gmt":"2024-03-28T07:01:53","slug":"javascript-podstawy-cz-2-cwiczenia-innerhtml-id-queryselector","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/javascript-podstawy-cz-2-cwiczenia-innerhtml-id-queryselector\/","title":{"rendered":"JavaScript podstawy cz.2 – \u0107wiczenia innerHTML, id, querySelector"},"content":{"rendered":"

Tym razem postawimy pierwsze kroki zwi\u0105zane z obs\u0142ug\u0105 JavaScript w naszym dokumencie HTML.<\/p>\n

Wykorzystanie JavaScript w dokumencie HTML mo\u017ce nam si\u0119 przyda\u0107 w wielu sytuacjach. Przede wszystkim doda\u0107 troszk\u0119 dynamiki do naszych dokument\u00f3w, prezentuj\u0105c generuj\u0105ce si\u0119 dane, wyliczenia, itp.<\/p>\n

Przejd\u017amy do kilku przyk\u0142ad\u00f3w.<\/p>\n

JavaScript \u0106wiczenie 1<\/h2>\n

Wypiszmy na stronie internetowej wynik jakiego\u015b prostego dzia\u0142ania matematycznego. Niech to b\u0119dzie suma liczby a i b.<\/p>\n

Krok 1.<\/strong> Pos\u0142u\u017cmy si\u0119 tutaj naszym uproszczonym kodem szkieletu dokumentu HTML z poprzednich \u0107wicze\u0144<\/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><\/p>\n

<script src=\"skrypt.js\" type=\"text\/javascript\" async defer><\/script><\/code><\/strong><\/code>
\n<\/head><\/code>
\n<body><\/code>
\n<!-- kod naszego \u0107wiczenia --><\/code>
\n<div id=\"suma\"><\/div><\/code><\/strong><\/p>\n

<\/body><\/code>
\n<\/html><\/code><\/p>\n

Zwr\u00f3\u0107my uwag\u0119, \u017ce w naszym dokumencie, dodany zosta\u0142 blok (div) zawieraj\u0105cy id=”suma”. Od tej pory nasz kod sko\u0144czymy w pliku skrypt.js, a dzi\u0119ki identyfikatorowi (id) w div’ie, efekt pojawi si\u0119 w tym miejscu w naszym HTML’u.<\/p>\n

Kolejn\u0105 rzecz\u0105 na kt\u00f3r\u0105 nale\u017cy zwr\u00f3ci\u0107 uwag\u0119 to zamieszczenie naszego JS’a. Skrypt musi najpierw „przeczyta\u0107 dokument html” z pami\u0119ci podr\u0119cznej znale\u017a\u0107 id=”suma” i wiedz\u0105c, gdzie on si\u0119 znajduje, wykorzysta\u0107 innerHTML do zamieszczenia w nim naszej ko\u0144cowej informacji.<\/p>\n

Krok 2.<\/strong> Aby\u015bmy mogli wykorzysta\u0107 HTML dla elementu, na kt\u00f3rym pracujemy, nale\u017cy najpierw przypisa\u0107 ten element do sta\u0142ej (pami\u0119tamy – const), za pomoc\u0105 metody querySelector(), sk\u0142adnia jest nast\u0119puj\u0105ca:<\/p>\n

element = document.querySelector(selectors);<\/code><\/p>\n

czyli deklarujemy sta\u0142\u0105, powiedzmy o nazwie suma, z wykorzystaniem powy\u017cszej metody, naszym selektorem b\u0119dzie #suma, czyli nasze id z diva z dokumentu HTML.<\/p>\n

const wynikDodawania= document.querySelector(\"#suma\");<\/code><\/p>\n

ok, mamy sta\u0142\u0105 const nazwan\u0105 suma, kt\u00f3ra ma si\u0119 wykona\u0107 w selektorze wynik-dodawania za pomoc\u0105 metody querySelector.<\/p>\n

Potrzebujemy teraz mie\u0107 co zaprezentowa\u0107, co policzy\u0107, dodajmy wi\u0119c dwie zmienne, wspomniane na pocz\u0105tku a i b i przypiszmy im jakie\u015b warto\u015bci.<\/p>\n

let a=7;<\/code><\/p>\n

let b=13;<\/code><\/p>\n

Aby wy\u015bwietli\u0107 wynik naszego dodawania, musimy skorzysta\u0107 tym razem z inner.HTML. Najpierw rozpiszmy jak to ma wygl\u0105da\u0107, p\u00f3\u017aniej om\u00f3wimy dlaczego tak si\u0119 dzieje:<\/p>\n

wynikDodawania.innerHTML='Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b);<\/code><\/p>\n

A wi\u0119c, zadeklarowana sta\u0142a (const) wynikDodawania wy\u015bwietli zawarto\u015b\u0107 'Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b)<\/code> za pomoc\u0105 naszego innerHTMLa w dokumencie HTML mi\u0119dzy <div id=\"suma\"><\/code>O TUTAJ DOK\u0141ADNIE<\/code><\/strong><\/div><\/code><\/p>\n

JavaScript \u0106wiczenie 2<\/h2>\n

Pami\u0119tasz poprzednie \u0107wiczenia (znajdziesz je tutaj<\/a> ) Przypomnijmy sobie dzia\u0142anie parseInt oraz prompt. Pami\u0119tamy, \u017ce prompt, ka\u017ce z klawiatury, w wyskakuj\u0105cym okienku, podobnie do alertu, wpisa\u0107 string (ci\u0105g znakowy) a parseInt pozwala nam zmieni\u0107 typ danych string’a na integer.<\/p>\n

Wprowad\u017amy wi\u0119c odrobin\u0119 dynamiki do naszego poprzedniego \u0107wiczenia. Niech tym razem strona nasz prosi o dane do wylicze\u0144, kt\u00f3re chcemy aby zrobi\u0142 za nas nasz skrypt.<\/p>\n

\"\"<\/p>\n

Na pocz\u0105tku nic nie zmieniamy, nasz plik HTML nie zmienia si\u0119, tworzymy w pliku js identyczn\u0105 sta\u0142\u0105<\/p>\n

const wynikDodawania= document.querySelector(\"#suma\");<\/code><\/p>\n

kolejno nasze dwie zmienne, musimy zmodyfikowa\u0107, najpierw dodaj\u0105c funkcjonalno\u015b\u0107 prompt (okna komunikatu do wpisania danych), kolejno pareseInt, dzi\u0119ki kt\u00f3remu wiemy co si\u0119 zmieni \ud83d\ude42<\/p>\n

let a=parseInt(prompt('Podaj liczb\u0119 a'));<\/code>
\nlet b=parseInt(prompt('Teraz podaj b'));<\/code><\/p>\n

i na ko\u0144cu, bez \u017cadnych zmian<\/p>\n

wynikDodawania.innerHTML='Wynik dodawania liczb: '+a+' oraz '+b+' wynosi '+(a+b);<\/code><\/p>\n

JavaScript \u0106wiczenie 3<\/h2>\n

Napiszmy teraz dowolny kalkulator, tutaj dla przyk\u0142adu b\u0119dzie kalkulator licz\u0105cy proporcie. Uwa\u017cam, \u017ce akurat to dzia\u0142anie matematyczne jest bardzo przydatna, cho\u0107by po to by policzy\u0107 zwrot jakiej\u015b inwestycji czy okres jej zwrotu a to s\u0105 przydatne rzeczy \ud83d\ude42<\/p>\n

Kod naszego skryptu wygl\u0105da nast\u0119puj\u0105co:<\/p>\n

const proporcje= document.querySelector(\"#proporcje\");<\/code><\/p>\n

let liczbaSzukana = parseInt(prompt('Podaj szukan\u0105 liczb\u0119'));<\/code>
\nlet stoProcent = parseInt(prompt('100% wynosi?'));<\/code>
\nlet procent = 100;<\/code>
\nlet wynik = ('Szukana liczba to '+((100*liczbaSzukana)\/stoProcent));<\/code>
\nproporcje.innerHTML=wynik;<\/code><\/p>\n

JavaScript \u0106wiczenie 4<\/h2>\n

Przekszta\u0142\u0107 teraz kalkulator z \u0107wiczenia 3 i dodaj kod HTML, formatuj\u0105cy Tw\u00f3j wynik, mo\u017ce zmieniaj\u0105c t\u0142o, dodaj\u0105c kolor i wielko\u015b\u0107 czcionki itp. M\u00f3j przyk\u0142ad ni\u017cej<\/p>\n

const proporcje= document.querySelector(\"#proporcje\");<\/code><\/p>\n

let liczbaSzukana = parseInt(prompt('Podaj szukan\u0105 liczb\u0119'));<\/code>
\nlet stoProcent = parseInt(prompt('100% wynosi?'));<\/code>
\nlet procent = 100;<\/code>
\nlet wynik = ('<div style=\"width:800px;margin-left:auto;margin-right:auto;\"><h1>Szukana liczba to '+((100*liczbaSzukana)\/stoProcent)+'<\/h1><br><br><br><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/vwrE3_JsuqM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><br><\/div>');<\/code>
\nproporcje.innerHTML=wynik;<\/code><\/p>\n

JavaScript \u0106wiczenie 5<\/h2>\n

Zmodyfikuj kod z \u0107wiczenia 4 tak, aby na pocz\u0105tku trzeba by\u0142o poda\u0107 minimum 3 zmienne a sam skrypt w tym samym czasie, powinien da\u0107 wynik do 3-4 dzia\u0142a\u0144 matematycznych. Przyk\u0142ad ni\u017cej, jednak Ty zr\u00f3b sw\u00f3j w\u0142asny „wielofunkcyjny kalkulator”.<\/p>\n

const liczymySobie= document.querySelector(\"#kalkulatorki\");<\/code><\/p>\n

let a = parseInt(prompt('Podaj szukan\u0105 liczb\u0119 (te\u017c pot\u0119ga)'));<\/code>
\nlet b = parseInt(prompt('100% wynosi?'));<\/code>
\nlet h = parseInt(prompt('wysoko\u015b\u0107 tr\u00f3jk\u0105ta'));<\/code><\/p>\n

let wynik = ('Proporcje<br>Szukana liczba to '+((100*a)\/b));<\/code>
\nlet wynik2 = ('<br><br>Pot\u0119ga '+b+'^'+a+' wynosi '+(b**a));<\/code>
\nlet wynik3 = ('<br><br>Odejmowanie '+b+'-'+a+' wynosi '+(b-a));<\/code>
\nlet wynik4 = ('<br><br>Pole tr\u00f3j\u0105ta 1\/2 *'+a+'^'+h+' wynosi '+(0.5*a*h));<\/code><\/p>\n

liczymySobie.innerHTML=wynik+wynik2+wynik3+wynik4;<\/code><\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Tym razem postawimy pierwsze kroki zwi\u0105zane z obs\u0142ug\u0105 JavaScript w naszym dokumencie HTML.<\/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-264","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\/264","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=264"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/264\/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=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}