Welcome to the Frontpage
Projekt Hobby w html
Zmieniony: poniedziałek, 21 maja 2018 07:33 Wpisany przez Administrator poniedziałek, 22 stycznia 2018 08:12
Utworzenie własnego serwisu internetowego z zastosowaniem html5 nt Hobby nie jest trudne.
Potrzeba jedynie dokładności w zastosowaniu do własnych pomysłów nowych do ściągnięcia z onedrive - opracowanych przykładów.
Po skopiowaniu archiwum przykładów należy je rozpakować.
Gotowy i kompletny serwis wg ww wskazówek dostępny jest po adresem: www.annadanowska.pl
Zrealizowane projekty uczniów:
Kartka z pozdrowieniami w html
** Zadanie dla zaawansowanych - formularze kontaktowe wysyłane na e-mail przykład 1 przykład 2
Portfolio - autoprezentacja ćwiczenia prezentacji
Wpisany przez Administrator poniedziałek, 13 maja 2019 08:40
https://photos.app.goo.gl/Yv1eNCEbnpvJkwHU6
https://1drv.ms/v/s!Auv899sgc3qGg1cefo8EBQKVc1hC
https://drive.google.com/file/d/1cRUMU5ellATIIIY2m8YunsXuV1TtNAsX/view?usp=sharing
https://onedrive.live.com/?cid=59164D97818080EB&id=59164D97818080EB%21270&parId=root&o=OneUp
https://photos.app.goo.gl/Bjiq36Q1ptTSU6Za6
https://drive.google.com/open?id=19bl8fsz9FKgNibEC2WXd9rP2-o7a24JU
Mapa odsyłaczy obrazkowych - ZOOM
Zmieniony: czwartek, 07 marca 2019 21:27 Wpisany przez Administrator czwartek, 07 marca 2019 21:24
Przykłady i realizacje projektu ZOOM
Materiały do cwiczeń js
Zmieniony: poniedziałek, 03 czerwca 2019 09:10 Wpisany przez Administrator poniedziałek, 25 marca 2019 09:18
Materiały do ćwiczań z java script
1 .zegar
3. generator liczb z podanego zakresu
6. gra ciepło zimno (zastosowanie jquery)
8. Przykład księgi gości z wykorzystaniem java script i php
-----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Znajdź ukryty skarb!</title>
</head>
<body>
<h1 id="nagłówek">Znajdź ukryty skarb!</h1>
<img id="mapa" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">
<p id="odległość"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// Wylosuj liczbę z przedziału od 0 do wartość zmiennej rozmiar minus 1
var uzyskajLosowąLiczbę = function (rozmiar) {
return Math.floor(Math.random() * rozmiar);
};
// Oblicz odległość między kliknięciem a celem
var obliczOdległość = function (zdarzenie, cel) {
var diffX = zdarzenie.offsetX - cel.x;
var diffY = zdarzenie.offsetY - cel.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
// Uzyskaj łańcuch reprezentujący odległość
var skonstruujPodpowiedź = function (odległość) {
if (odległość < 10) {
return "Parzy!";
} else if (odległość < 20) {
return "Gorąco";
} else if (odległość < 40) {
return "Ciepło";
} else if (odległość < 80) {
return "Letnio";
} else if (odległość < 160) {
return "Zimno";
} else if (odległość < 320) {
return "Mróz";
} else {
return "Syberia!";
}
};
// Ustawiamy nasze zmienne
var szerokość = 400;
var wysokość = 400;
var kliknięcia = 0;
// Wylosuj miejsce ukrycia skarbu
var cel = {
x: uzyskajLosowąLiczbę(szerokość),
y: uzyskajLosowąLiczbę(wysokość)
};
// Skojarz funkcję obsługi kliknięcia z elementem img
$("#mapa").click(function (zdarzenie) {
kliknięcia++;
// Oblicz odległość między kliknięciem (zdarzeniem) a celem (skarbem)
var odległość = obliczOdległość(zdarzenie, cel);
// Na podstawie odległości wybierz podpowiedź
var podpowiedź = skonstruujPodpowiedź(odległość);
// Zaktualizuj element #odległość nowym tekstem podpowiedzi
$("#odległość").text(podpowiedź);
// Jeśli kliknięcie było dostatecznie blisko, poinformuj o wygranej
if (odległość < 8) {
alert("Skarb został znaleziony po " + kliknięcia + " klinięciach!");
}
});
</script>
</body>
</html>
