JAVAScript obiekty modyfikacja drzewa obiektów
|
|
- Lech Wojciechowski
- 8 lat temu
- Przeglądów:
Transkrypt
1 Programowanie obiektowe ćw.4 JAVAScript obiekty modyfikacja drzewa obiektów Zarządzanie elementami strony Dla potrzeb skryptu JavaScript tworzymy zmienne referencji do elementu (znacznika HTML) zmienna ta ułatwia do niego dostęp. Dostęp do istniejącego elementu o znanym identyfikatorze: zmienna_ref=document.getelementbyid("identyfikator"); Dostęp do kolekcji elementów tego samego typu znacznika: zmienna_ref =document.getelementsbytagname("typ_znacznika") Tworzenie nowego elementu: zmienna_ref=document.createelement("typ_znacznika"); zmienna_ref=document.createtextnode("tekst"); Tak utworzone zmienne reprezentują element w skrypcie. Są one zmiennymi globalnymi, to znaczy są dostępne w całym skrypcie. Dla utworzenia zmiennych lokalnych używamy przed zmienną słowa kluczowego var (ang. variable): var zmienna=wyrażenie; Zasięg "widoczności" zmiennych wyjaśnia poniższy skrypt: <HTML> <HEAD> </HEAD> <BODY style="font-size:28px"> <PRE> // tworzymy dwie zmienne w części głównej skryptu globalną i lokalną z_g="globalna_zew";//globalna document.writeln("zmienna z_g jest typu ",typeof z_g); var z_l="lokalna_zew";//lokalna //wyświetlenie typu zmiennej document.writeln("zmienna z_l jest typu ",typeof z_l); //definicja funkcji function fun( ) { //tworzymy dwie zmienne w "ciele" funkcji lokalną i globalną f_g="globalna_fun";//globalna var f_l="lokalna_fun";//lokalna document.writeln("<b>wewnątrz funkcji</b>"); document.writeln("z_g=",z_g); document.writeln("f_g=", f_g); document.writeln("f_l=",f_l); //zmieniamy tekst zmiennej z_l z_l="nowa wartość zmiennej z_l - 'przesłonięta' " //koniec definicji funkcji document.writeln("<b>przed wykonaniem funkcji</b>"); document.writeln("z_g=",z_g); fun( );//wykonanie funkcji document.writeln("<b>po wykonaniu funkcji</b>");
2 document.writeln("z_g=",z_g); document.writeln("f_g=", f_g); //sprawdzenie czy istnieje zdefiniowany element document.writeln("zmienna f_l jest ", typeof f_l); if (typeof f_l == "undefined") document.writeln("po wykonaniu funkcji zmienna lokalna f_l definiowana w funkcji nie istnieje"); <PRE></BODY></HTML> Jak widzimy zmienne globalne i lokalne skryptu są dostępne wewnątrz funkcji, zaś zmienne lokalne utworzone wewnątrz funkcji nie są dostępne poza funkcją. Zwrócić uwagę na wykorzystanie słowa kluczowego typeof do ustalenia typu elementu (number, string, object, undefined itp.) Ważniejsze właściwości wykorzystywane do zarządzania strukturą strony element.childnodes kolekcja węzłów dla elementu - indeks od 0 element.style element.nextsibling element.parentnode dostęp do atrybutu style elementu następny węzeł sąsiadujący (też element) węzeł rodzica elementu (element) Ważniejsze metody document.getelementbyid("id") document.createelement("typ") document.createtextnode("tekst"); element.appendchild(element_dołączany) element.clonenode(true) element.removechild(element_potomny); element.replacechild(el_nowy, el_stary); element.insertbefore(el_nowy, element_pod) element.setattribute(nazwa, wartość) element.getattribute(nazwa) element.removeattribute(nazwa, wartość) pobranie elementu o danym identyfikatorze id utworzenie elementu o typie znacznika utworzenie węzła tekstowego dołączanie elementu do innego elementu (jako podrzędny, na końcu jeśli istnieją już inne podrzędne) powielenie elementu usunięcie elementu podrzędnego podmiana elementu podrzędnego wstawianie elementu przed innym podrzędnym ustawienie atrybutu elementu pobranie atrybutu elementu usunięcie atrybutu elementu Poniżej przykłady zastosowań powyższych właściwości i metod. Tworzenie nowych elementów Aby prawidłowo zarządzać strukturą elementów HTML, należy zwracać uwagę na wzajemną ich hierarchię według drzewa DOM. Tworzenie nowego elementu na końcu strony <HTML> <HEAD> </HEAD> <BODY style="font-size:28px"> <!-- Istniejący DIV komentarz HTML --> <DIV id="div1">mechatronika </DIV> <SCRIPT language="javascript"> //dostęp do elementu - przypomnienie d1 = document.getelementbyid("div1"); //ustawianie parametrów stylu istniejącego DIV d1.style.color="red"; d1.style.fontsize="28px"; d1.style.border="4px solid blue"; d1.style.color="yellow";
3 d1.style.width="600px"; d1.style.marginleft="200px"; d1.style.background="green"; d1.style.textalign="center"; //tworzenie elementu - tworzymy drugi DIV d2=document.createelement("div"); //ustalamy style dla nowego DIV'a d2.style.border="4px solid red"; d2.style.margin="0px 100px 0px 100px"; d2.style.textalign="center"; d2.style.fontsize="32px"; d2.setattribute("id", "nowy"); document.writeln("atrybut id=",d2.getattribute("id")); d2.setattribute("id", "nowy"); //tworzymy węzeł tekstowy var t2=document.createtextnode("drugi DIV"); //dołączamy węzeł tekstowy do DIV'a d2.appendchild(t2); //dołączamy DIV na końcu strony dołączenie do BODY document.body.appendchild(d2); </BODY></HTML> 1. Zmodyfikować poniższy przykład, by utworzenie drugiego DIV odbyło się na kliknięcie przycisku. Należy operacje tworzenia elementu i jego dołączania umieścić wewnątrz własnej funkcji np. o nazwie f1( ) następnie uruchamiać funkcję umieszczonym na stronie przyciskiem INPUT typu button. Zaobserwować, że wielokrotne kliknięcia tworzą nowe elementy. 2. Sprawdzić, że utworzenie węzła tekstowego możliwe jest także sposobem: document.getelementbyid(identyfikator).innerhtml="jakiś tekst" Tworzenie elementu potomnego do istniejącego elementu Do poprzedniego skryptu dodać funkcję: function f2( ) { //tworzymy akapit P p1=document.createelement("p"); p1.style.background="pink"; p1.style.marginleft="40px"; p1.style.marginright="40px"; // i tworzymy jego węzeł tekstowy var tp1=document.createtextnode("akapit potomny DIV1 - dziedziczy parametry czcionki po DIV"); //trzeba dołączyć węzeł tekstowy do akapitu p1.appendchild(tp1); // i dołączyć akapit do div1 d1.appendchild(p1); Uruchamiać funkcję f2( ) umieszczonym na stronie przyciskiem typu button zaobserwować dziedziczenie parametrów czcionki od elementu DIV. Klonowanie elementu 1. Do poprzedniego skryptu dodać funkcję:
4 function f3( ){ //klonujemy p1 jako p2 p2=p1.clonenode(true); //pobieramy jego pierwszy węzeł (tekstowy) y=p2.childnodes[0]; // i usuwamy go... p2.removechild(y); // tworzymy nowy jego węzeł tekstowy var tp2=document.createtextnode("sklonowany akapit - dziedziczy parametry czcionki po BODY"); // dołączamy węzeł tekstowy do akapitu p2.appendchild(tp2); //dołączamy akapit do strony na końcu body document.body.appendchild(p2); Uruchamiać funkcję przyciskiem INPUT. Zauważyć dziedziczenie parametrów czcionki po BODY, które jest nadrzędnym elementem dla drugiego DIV. 2. Umieścić na początku skryptu zapis ustalający czcionkę dla BODY. document.body.style.fontsize="60px"; Teraz nowy akapit dziedziczyć będzie nowy rozmiar czcionki. Zmiana tekstu dla węzła tekstowego Zmianę tekstu (węzła tekstowego) akapitu (lub innego elementu: DIV, TD itp.) można jak widać z powyższych przykładów wykonać metodą //pobieramy pierwszy potomny węzeł (tekstowy) akapitu (ustalona wcześniej zmienna p1). y=p1.childnodes[0]; //ustalamy jego nową treść y.nodevalue="tekst sklonowanego akapitu - jeszcze jeden"; lub prostszym sposobem: p1.innerhtml="nowy tekst" Sprawdzić działanie powyższych kodów. Wstawienie nowego elementu w dowolnym miejscu Dla powyższego zadania może być wykorzystana metoda: elementrodzic.insertbefore(nowyelement, danyelement) gdzie: nowyelement - element do wstawienia, danyelement element, przed którym nowyelement ma zostać wstawiony, elementrodzic - rodzic nowo wstawianego elementu. Wyjaśnia to poniższy przykład: <HTML> <HEAD> </HEAD> <BODY style="font-size:18px"> <P id="a">pierwszy akapit</p> <P id="b"> Drugi akapit </P> <INPUT type="button" id="przycisk" value="wstaw w środek" /> function wstawprzed() { p2 = document.getelementbyid('b'); //pobieramy element -drugi akapit nowya = document.createelement("p"); nowya.innerhtml="tekst środkowego akapitu"; document.body.insertbefore(nowya,p2); //wstawiamy go przed p2 // koniec funkcji //pobieramy przycisk i przypisujemy mu zdarzenie onclick document.getelementbyid('przycisk').onclick = wstawprzed;
5 </BODY></HTML> Zwrócić uwagę na nową dla nas formę przypisania zdarzenia onclick do przycisku. Zadania 1. Sprawdzić powyższy kod wstawiania elementu przed element. 2. Dodać dodatkowy przycisk usuwający wybrany element - metoda removechild wykorzystywana w postaci: document.body.removechild(a1); gdzie a1 jest wyznaczoną uprzednio zmienną referencji do danego elementu (węzła). Sprawdzić, że odbywa się usunięcie węzła razem z węzłami potomnymi. 3. Utworzyć stronę, na której wstępnie utworzona jest tabela z jedną komórką (pamiętać o nadaniu znacznikowi tabeli i znacznikowi wiersza odpowiednich identyfikatorów). Kliknięcia umieszczonego na stronie przycisku mają powodować rozmnażanie komórek w wierszu. 4. Wypróbować samodzielnie metodę replacechild według własnego pomysłu. Omawiany na laboratoriach przykład tworzenia tabeli <HTML><HEAD> </HEAD> <BODY style="font-size:18px"> <TABLE name="xxx" id="t1" style="margin-left:30px;border:1px solid black"> <TR id="w"></tr> </TABLE> function dodaj() { var wiersz = document.getelementbyid("w");//referencja do obiektu id=w var kom=document.createelement("td") //styl komórki kom.style.border="2px solid red"; kom.style.textalign="center"; kom.style.fontsize="22px"; //tworzymy węzeł tekstowy var t3=document.createtextnode(wiersz.childnodes.length+1); //dołaczamy do tr'a kom.appendchild(t3); wiersz.appendchild(kom);// //========================================= function usun() { var wiersz = document.getelementbyid("w");//referencja obiektu o identyfikatorze w wiersz.removechild(wiersz.childnodes[wiersz.childnodes.length-1]);//usuwamy ostatni //========================================= <DIV style="text-align:center;padding-top:30px"> <INPUT type="submit" value="dodaj" onclick="dodaj( )" /> <INPUT type="submit" value="usuń" onclick="usun( )" /> </DIV> </BODY></HTML>
2.JAVAScript - obiekty HTML
2.JAVAScript - obiekty HTML DOM model dokumentu HTML Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document, posiada strukturę drzewiastą składowych
Bardziej szczegółowoRys.2.1. Drzewo modelu DOM [1]
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model
Bardziej szczegółowoJAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.
IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript
Bardziej szczegółowoStyle CSS definicja i wykorzystanie klasy
ICT Wykład 2 Style CSS definicja i wykorzystanie klasy Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html Indeks: elementy
Bardziej szczegółowoJAVAScript animacja obiektów, tworzenie własnych obiektów
Programowanie obiektowe ćw.5 JAVAScript animacja obiektów, tworzenie własnych obiektów Tworzenie i usuwanie obiektów (Uzupełnienie) Przykład zawiera kod dodawania i usuwania komórek tabeli:
Bardziej szczegółowoJAVAScript - obiekty HTML
Programowanie obiektowe ćw.3 JAVAScript - obiekty HTML DOM model dokumentu HTML Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document, posiada
Bardziej szczegółowoProgramowanie obiektowe. Wykład 4
Programowanie obiektowe Wykład 4 Tworzenie własnych obiektów Słowo kluczowe this W JavaScriptmożna tworzyć własne obiekty. Wykorzystuje się tu zapis utworzonej funkcji o nazwie takiej samej jak klasa,
Bardziej szczegółowoProgramowanie obiektowe. Wykład 3
Programowanie obiektowe Wykład 3 DOM model dokumentu HTML Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document, posiada strukturę drzewiastą
Bardziej szczegółowoCSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
Bardziej szczegółowoXML extensible Markup Language. część 5
XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle
Bardziej szczegółowoRys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA JavaScript tak
Bardziej szczegółowoTest przykładowy 2 PAI WSB Wrocław /06/2018
Imię i Nazwisko: Student ID: Part 1: (Prawda lub Fałsz (T lub F)) 15. Która z poniższych deklaracji funkcji jest nieprawidłowa: A. function Sum(a, b, c){; B. function Sum(var a, var b); C. function Sum(a){;
Bardziej szczegółowoJAVAScript w dokumentach HTML (2)
Informatyka ćw.6 JAVAScript w dokumentach HTML (2) Interakcyjne wprowadzanie danych Jednym ze sposobów jest stosowanie metody prompt dla wbudowanego obiektu window: zmienna= prompt("tekst zachęty, np.
Bardziej szczegółowoDOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
Bardziej szczegółowoFunkcje i instrukcje języka JavaScript
Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje
Bardziej szczegółowoMultimedia. Główne składowe DHTML a DHTML HTML. CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript
Multimedia DHTML mgr inż. Piotr Odya piotrod@sound.eti.pg.gda.pl Główne składowe DHTML a HTML CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript 1 DOM Obiektowy Model Dokumentu drzewiasta
Bardziej szczegółowoTest z przedmiotu. Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoWprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
Bardziej szczegółowoFormat HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Bardziej szczegółowoZaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika
Bardziej szczegółowoJAVAScript w dokumentach HTML - przypomnienie
Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w
Bardziej szczegółowoDziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
Bardziej szczegółowoDefilada - przykład wykorzystujący animowane modele Copperlicht. Andrzej P.Urbański Politechnika Poznańska
Defilada - przykład wykorzystujący animowane modele Copperlicht Andrzej P.Urbański Politechnika Poznańska Czego potrzebujemy? Animowane postacie potrafiące wykonywać różne ruchy cząstkowe np.: chodzić,
Bardziej szczegółowoZajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją
Bardziej szczegółowoXML extensible Markup Language. część 5
XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx
Bardziej szczegółowoĆwiczenie 5. Python 3: Programowanie obiektowe i dziedziczenie
Wizualizacja danych Ćwiczenie 5 Python 3: Programowanie obiektowe i dziedziczenie Dziedziczenie Mając klasę bazową możemy utworzyć klasę pochodną, która będzie dziedziczyć po klasie bazowej czyli będzie
Bardziej szczegółowoObiektowy PHP. Czym jest obiekt? Definicja klasy. Składowe klasy pola i metody
Obiektowy PHP Czym jest obiekt? W programowaniu obiektem można nazwać każdy abstrakcyjny byt, który programista utworzy w pamięci komputera. Jeszcze bardziej upraszczając to zagadnienie, można powiedzieć,
Bardziej szczegółowo1.Formatowanie tekstu z użyciem stylów
1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje
Bardziej szczegółowoDOKUMENTÓW W EDYTORACH
2015-10-12 TWORZENIE DOKUMENTÓW W EDYTORACH Microsoft Word Jan Kowalski UAM Tworzenie dokumentów w edytorach Spis treści Struktura a formatowanie... 1 Formatowanie za pomocą stylów... 1 Nagłówki... 2 Rysunki...
Bardziej szczegółowoPHP 5 język obiektowy
PHP 5 język obiektowy Wprowadzenie Klasa w PHP jest traktowana jak zbiór, rodzaj różnych typów danych. Stanowi przepis jak stworzyć konkretne obiekty (instancje klasy), jest definicją obiektów. Klasa reprezentuje
Bardziej szczegółowo5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i
Bardziej szczegółowoLaboratorium 7 Blog: dodawanie i edycja wpisów
Laboratorium 7 Blog: dodawanie i edycja wpisów Dodawanie nowych wpisów Tworzenie formularza Za obsługę formularzy odpowiada klasa Zend_Form. Dla każdego formularza w projekcie tworzymy klasę dziedziczącą
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoJAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window
Programowanie obiektowe ćw.2 JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Tablice w JavaScript Przykład zastosowania tablicy dla przekazania rezultatów funkcji do miejsca wywołania
Bardziej szczegółowoLISTA KONTROLI DOSTĘPU
UPRAWNIENIA NTFS LISTA KONTROLI DOSTĘPU Lista kontroli dostępu (ang. Access ControlList ACL). Lista przechowuje konfigurację zabezpieczeń dostępu do plików. Każdy plik i folder zapisany na woluminach NTFS
Bardziej szczegółowoMasz pomysł na lepszy wygląd?
Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :) No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się
Bardziej szczegółowoZakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
Bardziej szczegółowoPolitechnika Poznańska Wydział Budowy Maszyn i Zarządzania
1) Cel ćwiczenia Celem ćwiczenia jest zapoznanie się z podstawowymi elementami obiektowymi systemu Windows wykorzystując Visual Studio 2008 takimi jak: przyciski, pola tekstowe, okna pobierania danych
Bardziej szczegółowoAplikacje internetowe
Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki W jaki sposób umieszczany
Bardziej szczegółowoCw.12 JAVAScript w dokumentach HTML
Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.skrypty Java- Script mogą być zagnieżdżane
Bardziej szczegółowoPrzykład integracji kalkulatora mbank RATY na platformie IAI
Przykład integracji kalkulatora mbank RATY na platformie IAI 1. Moderacja - > Dodatki HTML i JavaScript 1.1 Klikamy na przycisk nowy dodatek Wpisujemy w pole Tytuł dodatku nazwę CSS_mRaty. Następnie ustawiamy
Bardziej szczegółowoI. Menu oparte o listę
I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy
Bardziej szczegółowoWykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Bardziej szczegółowoFormatowanie tekstu za pomocą zdefiniowanych stylów. Włączanie okna stylów. 1. zaznaczyć tekst, który chcemy formatować
Style Bardzo często w edytorze podczas pisania tekstu zachodzi potrzeba wielokrotnego powtórzenia czynności związanych z formatowaniem. Aby zapobiec stałemu otwieraniu okien dialogowych i wybierania stale
Bardziej szczegółowoKaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Bardziej szczegółowoWstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy
HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoSUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 2. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 2 1 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przekierowania 2 Przekierowanie za pomocą skryptu Przykład
Bardziej szczegółowoPROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ
PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ Systemy baz danych 1. 2 Wstęp do baz danych 2. 2 Relacyjny model baz danych. 3. 2 Normalizacja baz danych. 4. 2 Cechy
Bardziej szczegółowoJAVAScript w dokumentach HTML (1)
JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript mogą być zagnieżdżane w dokumentach HTML. Instrukcje JavaScript
Bardziej szczegółowoAplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem
Bardziej szczegółowoProgramowanie w Sieci Internet Blok 2 - PHP. Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki
Programowanie w Sieci Internet Blok 2 - PHP Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki Co dziś będziemy robić Podstawy podstaw, czyli małe wprowadzenie do PHP, Podstawy
Bardziej szczegółowoPodstawy Programowania Obiektowego
Podstawy Programowania Obiektowego Wprowadzenie do programowania obiektowego. Pojęcie struktury i klasy. Spotkanie 03 Dr inż. Dariusz JĘDRZEJCZYK Tematyka wykładu Idea programowania obiektowego Definicja
Bardziej szczegółowoNastępnie zdefiniujemy utworzony szkic jako blok, wybieramy zatem jak poniżej
Zadanie 1 Wykorzystanie opcji Blok, Podziel oraz Zmierz Funkcja Blok umożliwia zdefiniowanie dowolnego złożonego elementu rysunkowego jako nowy blok a następnie wykorzystanie go wielokrotnie w tworzonym
Bardziej szczegółowoScenariusz Web Design DHTML na 10 sesji. - Strony statyczne I dynamiczne. - Dodawanie kodu VBScript do strony HTML. Rysunek nie jest potrzebny
Scenariusz Web Design DHTML na 10 sesji L.p. Specyficzne detale 2.1 - Strony statyczne I dynamiczne - Dodawanie kodu VBScript do strony HTML doc w Rysunek nie jest potrzebny 2.1.1 Opcje w pisaniu skryptów
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoSmarty PHP. Leksykon kieszonkowy
IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG Smarty PHP. Leksykon kieszonkowy Autor: Daniel Bargie³ ISBN: 83-246-0676-9 Format: B6, stron: 112 TWÓJ KOSZYK
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 10
Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,
Bardziej szczegółowoAplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed
Bardziej szczegółowoHTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.
Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie
Bardziej szczegółowoNAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA
NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: Ściągnij plik z tekstem ze strony www. Zaznacz tekst i ustaw go w stylu Bez odstępów. Sformatuj tekst: wyjustowany czcionka Times New Roman
Bardziej szczegółowoBlockly Kodowanie pomoc.
1 Blockly Kodowanie pomoc. Słowniczek: Zmienna posiada nazwę wywoływaną w programie oraz miejsce na przechowywanie wartości. Instrukcja warunkowa pozwala na wykonanie instrukcji w zależności od warunku
Bardziej szczegółowoI.Wojnicki, PHP. Smarty. Igor Wojnicki. Katedra Informatyki Stosowanej Akademia Górniczo-Hutnicza w Krakowie. 28 marca 2014
Igor Wojnicki (AGH, KIS) Smarty 28 marca 2014 1 / 33 Smarty Igor Wojnicki Katedra Informatyki Stosowanej Akademia Górniczo-Hutnicza w Krakowie 28 marca 2014 $Id: smarty.tex,v 1.2 2013/06/22 22:09:45 wojnicki
Bardziej szczegółowoBudowa aplikacji wielowarstwowych zastosowanie szablonów. Laboratorium 2 Programowanie komponentowe Zofia Kruczkiewicz
Budowa aplikacji wielowarstwowych zastosowanie szablonów Laboratorium 2 Programowanie komponentowe Zofia Kruczkiewicz Przykład 1 Zastosowanie szablonów Tworzenie kopii projektu typu Web Application o nazwie
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia
Bardziej szczegółowoSpis treści. Wprowadzenie 11 Rozdział 1. Pierwsze spotkanie z JavaScriptem 15. Spis treści
Spis treści Spis treści Wprowadzenie 11 Rozdział 1. Pierwsze spotkanie z JavaScriptem 15 Czym jest JavaScript?... 16 JavaScript to nie Java... 17 Skąd się wziął język JavaScript... 19 Co potrafi JavaScript...
Bardziej szczegółowoProgramowanie obiektowe
Laboratorium z przedmiotu - zestaw 02 Cel zajęć. Celem zajęć jest zapoznanie z praktycznymi aspektami projektowania oraz implementacji klas i obiektów z wykorzystaniem dziedziczenia. Wprowadzenie teoretyczne.
Bardziej szczegółowoTEMAT : KLASY DZIEDZICZENIE
TEMAT : KLASY DZIEDZICZENIE Wprowadzenie do dziedziczenia w języku C++ Język C++ możliwa tworzenie nowej klasy (nazywanej klasą pochodną) w oparciu o pewną wcześniej zdefiniowaną klasę (nazywaną klasą
Bardziej szczegółowoWYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1
WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1 XML DOM (ang. XML Document Object Model Obiektowy Model Dokumentu XML) Inaczej drzewo DOM to hierarchiczny, obiektowy model dokumentu XML. DOM to platforma
Bardziej szczegółowoRozwiązanie ćwiczenia 7a
Rozwiązanie ćwiczenia 7a Podpisy pod rysunkami, zdjęciami możesz wprowadzić w następujący sposób: 1. Kliknij obiekt (rysunek, zdjęcie) i wybierz przycisk Wstaw podpis z grupy narzędzi Podpisy na karcie
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoWYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1
WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1 CZYM JEST JQUERY? Biblioteka napisana w języku JavaScript, oparta na zasadzie write less, do more. Celem jej powstania było uproszczenie stosowania JavaScript na stronach.
Bardziej szczegółowoProgramowanie obiektowe
Laboratorium z przedmiotu Programowanie obiektowe - zestaw 02 Cel zajęć. Celem zajęć jest zapoznanie z praktycznymi aspektami projektowania oraz implementacji klas i obiektów z wykorzystaniem dziedziczenia.
Bardziej szczegółowoXML i nowoczesne technologie zarządzania treścią 2007/08
Zadanie 3 Poprawkowe XML i nowoczesne technologie zarządzania treścią 2007/08 Wprowadzenie Należy napisać program w Javie, który czytając w trybie SAX plik z listą operacji, wykonuje zadane operacje na
Bardziej szczegółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoASP.NET MVC. Podstawy. Zaawansowane programowanie internetowe Instrukcja nr 3
3 ASP.NET MVC Podstawy 1 1. Cel zajęć Celem zajęć jest zapoznanie się z podstawami ASP.NET MVC 2.0 Framework. 2. Zadanie Proszę zbudować prostą aplikację WWW przy zastosowaniu framework a ASP.NET MVC 2.0
Bardziej szczegółowo7. Formularze master-detail
7. Formularze master-detail 1. Utworzymy teraz jeden z bardziej złożonych formularzy dostępnych z kreatora formularz master-detail. Będzie on swoją strukturą przypominał utworzony wcześniej formularz dotyczący
Bardziej szczegółowoWykład 5: Klasy cz. 3
Programowanie obiektowe Wykład 5: cz. 3 1 dr Artur Bartoszewski - Programowanie obiektowe, sem. 1I- WYKŁAD - podstawy Konstruktor i destruktor (część I) 2 Konstruktor i destruktor KONSTRUKTOR Dla przykładu
Bardziej szczegółowoRobert Barański, AGH, KMIW MathScript and Formula Nodes v1.0
MathScript i Formula Nodes (MathScript and Formula Nodes) Formula Node w oprogramowaniu LabVIEW jest wygodnym, tekstowym węzłem, który można użyć do wykonywania skomplikowanych operacji matematycznych
Bardziej szczegółowoInformatyzacja Przedsiębiorstw
Informatyzacja Przedsiębiorstw Microsoft Dynamics NAV 2016 Development Environment C/AL Izabela Szczęch Informatyzacja Przedsiębiorstw Strona 1 Plan zajęć 1 Informacje ogólne dotyczące środowiska deweloperskiego
Bardziej szczegółowoOracle PL/SQL. Paweł Rajba.
Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu 8 Wprowadzenie Definiowanie typu obiektowego Porównywanie obiektów Tabele z obiektami Operacje DML na obiektach Dziedziczenie -
Bardziej szczegółowoWYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1
WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a.
Bardziej szczegółowoDostosowywanie wyglądu aplikacji czytelnika w oparciu o oprogramowanie dlibra 5.0
Dostosowywanie wyglądu aplikacji czytelnika w oparciu o oprogramowanie dlibra 5.0 Mariusz Stanisławczyk VII Warsztaty Biblioteki Cyfrowe Plan prezentacji Przykłady istniejących bibliotek cyfrowych Pojęcia
Bardziej szczegółowoSieciowe Technologie Mobilne. Laboratorium 2
Sieciowe Technologie Mobilne Laboratorium 2 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 2 Na dzisiejszym laboratorium skupimy się na implementacji
Bardziej szczegółowoUmieszczanie grafiki w dokumencie
Umieszczanie grafiki w dokumencie Najczęstszym sposobem wstawiania grafiki do dokumentu jest wybranie z górnego menu polecenia Wstaw-->Obraz--Z pliku W tym oknie podajemy lokalizacje pliku, który zostanie
Bardziej szczegółowoProgramowanie komponentowe. Przykład 1 Bezpieczeństwo wg The Java EE 5 Tutorial Autor: Zofia Kruczkiewicz
Programowanie komponentowe Przykład 1 Bezpieczeństwo wg The Java EE 5 Tutorial Autor: Zofia Kruczkiewicz Struktura wykładu 1. Utworzenie użytkowników i ról na serwerze aplikacji Sun Java System Application
Bardziej szczegółowoĆwiczenie 4 Konspekt numerowany
Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe
Bardziej szczegółowoWyszukiwanie największej spośród czterech liczb. Przykładowe rozwiązanie
Wyszukiwanie największej spośród czterech liczb Użytkownik podaje cztery liczby rzeczywiste. Podaj algorytm znajdowania największej spośród nich. (Np.: po wprowadzeniu liczb: 12 7 18.5 9 program powinien
Bardziej szczegółowoTECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty
1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,
Bardziej szczegółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Bardziej szczegółowoTypy klasowe (klasy) 1. Programowanie obiektowe. 2. Założenia paradygmatu obiektowego:
Typy klasowe (klasy) 1. Programowanie obiektowe Programowanie obiektowe (ang. object-oriented programming) to metodologia tworzenia programów komputerowych, która definiuje programy za pomocą obiektów
Bardziej szczegółowoPrzetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia 08 25.04.2016 r.) 1) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych
Bardziej szczegółowoPozycjonowanie i poruszanie warstw
Pozycja warstwy na ekranie może być zmieniana poprzez modyfikację właściwości top i left obiektu style. Odpowiadają one za położenie lewego górnego rogu; pierwsza za współrzędną x, druga y. Umiejscowienie
Bardziej szczegółowoKlasy Obiekty Dziedziczenie i zaawansowane cechy Objective-C
#import "Fraction.h" #import @implementation Fraction -(Fraction*) initwithnumerator: (int) n denominator: (int) d { self = [super init]; } if ( self ) { [self setnumerator: n anddenominator:
Bardziej szczegółowoMS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30
MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.
Bardziej szczegółowoKurs WWW. Paweł Rajba. pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/
Paweł Rajba pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/ Spis treści Wprowadzenie Automatyczne ładowanie klas Składowe klasy, widoczność składowych Konstruktory i tworzenie obiektów Destruktory i
Bardziej szczegółowoSpecyfikacja reklamy tekstowej i bannerowej na portalu GoldenLine.pl
Specyfikacja reklamy tekstowej i bannerowej na portalu GoldenLine.pl Spis treści Ogólne informacje... 3 Kreacje HTML5... 4 1. Formy reklamowe... 5 1.1. Link tekstowy... 5 1.2. Link tekstowy plus... 5 1.3.
Bardziej szczegółowoProgramowanie obiektowe, wykład nr 6. Klasy i obiekty
Dr hab. inż. Lucyna Leniowska, prof. UR, Zakład Mechatroniki, Automatyki i Optoelektroniki, IT Programowanie obiektowe, wykład nr 6 Klasy i obiekty W programowaniu strukturalnym rozwój oprogramowania oparto
Bardziej szczegółowo