Praktyka programowania

Obiekty

Programowanie obiektowe jest nieco podobne do układania programów z bloczków. Nic więc dziwnego, że powstała układanka na bazie oprogramowania Blockly, o którym wcześniej była mowa, ukazująca istotę takiego budowania obiektów. Układanka ta została udostępniona na stronie: http://otwartaedukacja.pl/programowanie/bl/puzzle.html?lang=pl (nieco inną wersję można znaleźć na stronie LO w Toruniu: http://www.vlo.torun.pl/page/blockly/apps/puzzle/index.html?lang=pl).

Obiektami operuje się właśnie tak, jak pokazano w tej układance: wypełniając ich właściwości (jak na przykład ilość nóg). W programowaniu poza właściwościami obiektów występują metody ich zmian – czyli funkcje wewnątrz obiektu, operującą na zawartych w nim właściwościach.

Na przykład obiekt opisujący samochód będzie miał własności takie jak drzwi, koła, szyby etc… Metodą zmiany może być komenda uruchomienia wydawana przez przekręcenie kluczyka w stacyjce.

Więcej szczegółów na temat programowania obiektowego znajdziesz w rozdziale „Świat obiektów” podręcznika „Uczymy się programować w Pythonie”. Poniżej zajmiemy się obiektami, które są obecnie najczęściej spotykane w świecie informatyki – czyli stronami internetowymi.

Aplikacje webowe

Dokument HTML – czyli strona internetowa ma swoją obiektową strukturę, nazywaną modelem DOM :https://pl.wikipedia.org/wiki/Obiektowy_model_dokumentu

Do operowania na tych obiektach służy język JavaScript używany w przeglądarkach internetowych. Istnieje kilka stron na których można testować takie programy (http://codepen.io/pen/lubhttps://jsfiddle.net/lubhttp://jsbin.com/).

Przykład 1:

http://jsbin.com/folowenasa/edit?html,css,js,console,output

Wpiszmy w treść strony jakiś tekst – na przykład „Kliknij tutaj”.

Do znacznika <body> dodajmy własność „onclick” i nadajmy jej wartość „test();”. Będzie to znaczyć, że po kliknięciu na stronie wykona się procedura „test”.

<body onclick="test();">kliknij tutaj</body>

Procedura musi zostać napisana – żeby się wykonała:

function test() {
  alert('!');
}

Poniższa tabelka zawiera opis wszystkich symboli użytych w tym programiku:

symbol Znaczenie oznaczanie
body Część języka HTML w którym opisujemy strony internetowe. W tym wypadku znacznik używany do ograniczenia całej strony. Oznacza wnętrze (treść) strony.
<> Dwa symbole określające początek i koniec znacznika. Miejsce w tekście gdzie zaczyna się i kończy znacznik.
/ Zmienia znaczenie znacznika (koniec oznaczanego obszaru) – o ile występuje natychmiast po znaku <
onclick Własność dodawana do znacznika. Po znaku = nadaje się tej własności wartość. Co się stanie, gdy klikniemy na wskazywane przez znacznik miejsce.
function Symbol używany do zdefiniowania fragmentu kodu (programu) nazywanego funkcją. Definicję jakiejś funkcji.
test Symbol zdefiniowany przez nas – konkretnej funkcji. Definicję konkretnej funkcji test.
alert Wyświetlenie komunikatu Funkcję zdefiniowaną (wbudowaną) w przeglądarce.
{ Znaki używane dla interpretera (przeglądarki internetowej) – aby mógł zrozumieć znaczenie tekstu Początek procedury
} Koniec procedury
; Koniec fragmentu procedury zawierającą instrukcję (zob niżej).
" Cudzysłów oznaczający początek i koniec napisu.
= Znak równości (własność ma określoną wartość)
( Początek miejsca na parametry funkcji
) Koniec miejsca na parametry funkcji

Więcej informacji: http://www.w3schools.com/html/html_intro.asp (można wybrać polskie tłumaczenie – jest dość porządne).http://pdf.helion.pl/e14te3/e14te3.pdf (rozdział 3.8 i dalej).

W przygotowaniu jest podręcznik, który będzie uzupełnieniem tego rozdziału.

results matching ""

    No results matching ""