OBIEKTY Utworzenie obiektu var osoba = { „imię”:”Anna”,

Prezentacja na temat: "OBIEKTY Utworzenie obiektu var osoba = { „imię”:”Anna”,"— Zapis prezentacji:

1 OBIEKTY Utworzenie obiektu var osoba = { „imię”:”Anna”, „nazwisko”:”Kowalska”, „adres”:{ „ulica”:”Malinowa 85”, „miasto”:”Gliwice” } var str = "Dane odczytane z obiektu osoba:<br/>"; str += "Imię: " + osoba.imię + "<br/>"; str += "Nazwisko: " + osoba.nazwisko + "<br/>"; str += "Adres ulica: " + osoba.adres.ulica +"<br/>"; str += "Adres miasto: " + osoba.adres.miasto + "<br/>";

2 OBIEKTY Różne sposoby dostępu do właściwości obiektów var str = ""; var punkt ={}; var osoba = {}; punkt['x'] = 100; punkt['y'] = 200; var właściwość1 = "imię"; var właściwość2 = "nazwisko"; osoba[właściwość1] = "Anna"; osoba[właściwośc2] = "Jabłońska"; document.write("punkt.x= " + punkt.x + "<br/>"); document.write("punkt['y'] = " + punkt['y'] + "<br/>"); document.write("osoba[właściwość1] = " + osoba[właściwość1] + "<br/>"); document.write("osoba[właściwość2] = " + osoba['nazwisko']);

3 OBIEKTY Automatyczny zapis i odczyt właściwości var str = ""; var obiekt = {}; var j = 10; for(i=0; i<5; i++){ obiekt["dana" + i] = j; j += 10; } str += "dana" + i + " =; str += obiekt["dana" + i]; str += "<br/>"; document.write(str);

4 OBIEKTY Funkcja jako składowa obiektu var str = ""; var punkt={}; punkt.x = 3; punkt.y = 4; punkt.odległość = function(){ return Math.sqrt(this.x * this.x + this.y * this.y); } var d = punkt.odległość(); str += "Wynikiem wywołania metody odległosc obiektu punkt"; str += "jest wartośc ' + d + "."; document.write(str);

5 Użycie metody przyjmującej argumenty w standardzie JSON
OBIEKTY Użycie metody przyjmującej argumenty w standardzie JSON var str = ""; var punkt={ punkt:x = 3, punkt:y = 4, odległość : function() { return Math.sqrt(this.x * this.x + this.y * this.y); }, przesuń : function(px, py) this.x += px; this.y += py; } }; var d1 = punkt.odległość(); punkt.przesun(2,6); var d2 = punkt.odległość() str += "Początkowa odległośc punktu od poczatku "; str += "układu współrzędnych to " + d1 + ".<br/>"; str += "Po przesunieciu odległośc punktu od początku "; str += "układu współrzędnych to " d2 + ".<br/>"; document.write(str);

6 Użycie metody przyjmującej argumenty w standardzie JSON
OBIEKTY Użycie metody przyjmującej argumenty w standardzie JSON var str = ""; var punkt={ punkt:x = 3, punkt:y = 4, odległość : function() { return Math.sqrt(this.x * this.x + this.y * this.y); }, przesuń : function(px, py) this.x += px; this.y += py; } }; var d1 = punkt.odległość(); punkt.przesun(2,6); var d2 = punkt.odległość() str += "Początkowa odległośc punktu od poczatku "; str += "układu współrzędnych to " + d1 + ".<br/>"; str += "Po przesunieciu odległośc punktu od początku "; str += "układu współrzędnych to " d2 + ".<br/>"; document.write(str); Zadanie 1. Utwórz obiekt zawierający 10 właściwości o nazwach zgodnych ze schematem LN, gdzie N to indeks od 1 do 10, a L to litera A dla indeksów parzystych i B dla nieparzystych (czyli nazwy kolejnych właściwości to B1, A2, B3, A4 itd.). Właściwościom o indeksach parzystych przypisz wartość 0, a pozostałym – 1. Do utworzenia obiektu użyj pętli. Zadanie 2. Do funkcji przesuń z listingu obok dodaj instrukcje sprawdzające, czy argumenty mogą być interpretowane jako wartości liczbowe. Jeśli nie mogą, nie dokonuj modyfikacji właściwości x i y.

7 FUNKCJE Funkcja przypisywana zmiennym var str = ""; var razyDwa = function(arg){ return 2 * arg; } var pomnóż = razyDwa; var wynik1 = razyDwa(8); var wynik2 = pomnóż(8); str += "razyDwa(8) =" + wynik1; str += "<br/>; str += "pomnóż(8) = + wynik2; document.write(str);

8 FUNKCJE Funkcja jako argument innej funkcji var f1 = function(arg){ arg(); } var f2 = function(){ alert("Jestem funkcją f2."); f1(f2);

9 Funkcja jako argument innej funkcji
FUNKCJE Funkcja jako argument innej funkcji var suma = function(arg1, arg2){ return arg1 + arg2; } var różnica = function(arg1, arg2){ return arg1 - arg2; function oblicz(arg1, arg2, działanie){ var wynik = działanie(arg1, arg2); return Math.sqrt(wynik); var wynik1 = oblicz(10, 5, suma); var wynik2 = oblicz(10, 5, różnica); alert('Pierwszy wynik to ' + wynik1); alert('Drugi wynik to ' + wynik2); Zadanie 1. Zmień kod z listingu obok tak, aby funkcje suma i różnica nie były przypisywane zmiennym, ale definiowane w sposób klasyczny. Zadanie 2. Dopisz do kodu z listingu obok instrukcje umożliwiające obliczenie iloczynu i ilorazu(upewnij się że nie będzie pobrany argument = 0.

10 FUNKCJE Dostęp do argumentów funkcji function f(arg1, arg2){ var str = ""; str += "Wartość arg1 = " + arg1; str += "\nwartość arg2 = " + arg2; str += "\nwartość arguments[0] = " + arguments[0]; str += "\nwartość arguments[1] = " + arguments[1]; str += "\nwartość arguments[2] = " + arguments[2]; alert(str); } f(10, "abc", 12.3);

11 Badanie liczby argumentów
FUNKCJE Badanie liczby argumentów function suma(arg1, arg2){ if(argument.length !=2){ var str = "Błędna liczba argumentów.\n"; str += "Oczekiwano 2 a otrzymano "; str += "arguments.length + "."; alert(str); return NaN; } return arg1 + arg2; suma(10, 20); suma(1, 2, 3); Zadanie 1. Napisz funkcję, która przyjmuje dowolną liczbę argumentów liczbowych i zwraca wartość największego z nich

12 FUNKCJE okienko dialogowe typu alert z tekstem "Czemu to zrobiłeś!" <input type="button" id="guzik" value="Nie klikaj mnie" /> <script type="text/javascript"> function pokaz() { alert("Czemu to zrobiłeś!"); } document.getElementById('guzik').onclick = function() { pokaz() } </script> <input type="button" id="guzik" value="Nie klikaj mnie" onClick=„pokaz”/> <script type="text/javascript"> function pokaz() { alert("Czemu to zrobiłeś!"); } </script>

13 FUNKCJE 3 przyciski <form name="formularz"> <fieldset> <input type="button" id="guzik_1" value="Guzik 1" /> <input type="button" id="guzik_2" value="Guzik 2" />; <input type="button" id="guzik_3" value="Guzik 3" /> </fieldset> </form> <script type="text/javascript"> function wypisz(tekst) { alert(tekst) } document.getElementById('guzik_1').onclick = function() { wypisz('Ja jestem pierwszym guzikiem') } document.getElementById('guzik_2').onclick = function() { wypisz('Ja jestem drugim guzikiem') } document.getElementById('guzik_3').onclick = function() { napisz('A ja nie chce być ostatnim guzikiem :(') } </script>

14 Przekazanie i wyświetlenie argumentów funkcji
FUNKCJE Przekazanie i wyświetlenie argumentów funkcji function alo(x, y, z) { if (arguments.length >= 3) { alert(arguments.length +'Przekazane argumenty to: ' +x+ '; ' +y+ '; ' +arguments[2]); } else { alert('Nie podałeś wystarczającej ilości argumentów '); alo(1,2,5,8,5,43,98); Zadanie 1. Zmodyfikuj powyższy kod tak, by funkcja wyświetlała dodatkowo wszystkie przekazane argumenty oraz ich sumę

15 Przykladowe rozwiązanie zadania 1
FUNKCJE Przykladowe rozwiązanie zadania 1 var tekst=""; var suma=0; function alo(x, y, z) { for(var i = 0;i<arguments.length;i++){ tekst+=arguments[i]+" "; suma+=arguments[i]; } //alert(arguments.length); //alert(arguments[1]+arguments[2]); alo(1,2,23,8,5,43,98); document.write("podałeś liczby: " + tekst+"<br/>"); document.write("suma wynosi: " + suma);

16 TABLICE Tworzenie tablicy var NazwaTablicy = new Array() var NazwaTablicy = [] var Tablica = new Array(10) var NazwaTablicy = ['Marcin','Ania','Agnieszka'] var NazwaTablicy = new Array('Marcin','Ania','Agnieszka') Dostęp do elementu tablicy document.write(NazwaTablicy[1]) Co się wyświetli? Ania

17 TABLICE Dodawanie nowych wartości do tablicy var Tablica = new Array('Marcin','Ania','Agnieszka') Tablica[3] = "Piotrek"; Tablica[4] = "Grzegorz"; document.write(Tablica[3] + ' i ' + Tablica[4]) Co się wyświetli? Piotrek i Grzegorz

18 TABLICE Właściwość length var Tablica = new Array('Marcin','Ania','Agnieszka','Piotrek','Grześ','Magda') for (x=0; x<Tablica.length; x++) { document.write(Tablica[x] + "<br />"); } Co się wyświetli? Marcin Ania Agnieszka Piotrek Grześ Magda Właściwość length document.write( Tablica[Tablica.length-1] ); Co się wyświetli? Magda

19 TABLICE Tablice asocjacyjne var Tablica = new Array() Tablica['chomik'] = "radioaktywny"; Tablica['kot'] = "zmutowany"; Tablica['pies'] = "Super Samson"; for (i in Tablica) { document.write('Wartosc tablicy ' + i + ' wynosi ' + Tablica[i]); } Co się wyświetli? Wartosc tablicy chomik wynosi radioaktywnyWartosc tablicy kot wynosi zmutowanyWartosc tablicy pies wynosi Super Samson

20 TABLICE Tablice asocjacyjne var Tablica = []; Tablica[0] = ['Marcin' , '183']; Tablica[1] = ['Ania' , '173']; Tablica[2] = ['Agnieszka' , '170']; document.write('imie: ' + Tablica[0][0] + ', wzrost: ' + Tablica[0][1]); document.write('imie: ' + Tablica[1][0] + ', wzrost: ' + Tablica[1][1]); document.write('imie: ' + Tablica[2][0] + ', wzrost: ' + Tablica[2][1]); Co się wyświetli? imie: Marcin, wzrost: 182 imie: Ania, wzrost: 173 imie: Agnieszka, wzrost: 170