Arhiv: 'FERI R-iT'
PROG1: N16: Generiranje števil v polje
Navodilo
Napišite program, ki s pomočjo generatorja naključnih števil v polje vstavi N realnih števil iz intervala med -10.0 in 10. Maksimalna vrednost števila N je 1000.
Program ima naslednje funkcije:
urejanje elementov z izbiranjem po naraščajočem vrstnem redu,
urejanje elementov z mehurčki po padajočem vrstnem redu,
izračun povprečne vrednosti,
izpis elementov polja.
Funkcije kličemo iz glavnega programa, kjer predlagamo, da izdelate menu z izbirami. Ne uporabljamo globalnih spremenljivk.
PROG1: N15: Računanje s 7 števili
Navodilo
Napišite program, ki prebere 7 celih števil, jih izpiše v obratnem vrstnem redu, izpiše najmanjše in največje število ter izračuna povprečje in standardni odklon. Za branje, izpis in izračune uporabite funkcije. Ne uporabljajte globalnih spremenljivk. Znotraj funkcij za najmanjše in največje število ter povprečje in standardni odklon ne beremo ali izpisujemo.
PROG1: N14: Računanje z ulomki
Navodilo
Napišite funkcijo za krajšanje ulomka.
Napišite funkcije za seštevanje, odštevanje, množenje in deljenje dveh ulomkov.
V glavnem programu prikažite primer uporabe.
Pozor: pri ulomku imenovalec ne more biti 0.
PROG1: N13: Izračun vsote intervala s funkcijo
Navodilo
Napišite funkcijo, ki izračuna naslednjo vsoto:
(2*i+1)/(i*(i+7)),
kjer je i na intervalu 1 do pozitivnega celega števila N, katerega funkcija prejme kot argument. Funkcija vrne vsoto kot realno vrednost.
Uporabnik v glavnem programu vpiše N.
PROG1: N12: Število praštevil do 1000000
Navodilo
Napišite funkcijo, ki vrne logično vrednost, ki pove, ali je dano pozitivno celo število praštevilo.
V glavnem programu preštejte, koliko praštevil je med 2 in 2011.
Preštejte tudi, koliko praštevil je med 2 in 1000000.
PROG1: N11: Funkcija min3
Navodilo
Napišite funkcijo min3, ki prejme 3 realna števila tipa double kot argumente in vrne najmanjše število.
V glavnem programu preberite 3 števila, in izpišite najmanjše izmed teh števil.
Opomba: V funkciji min3 ne beremo števil in tudi ničesar ne izpisujemo.
OSS: Vaja 8
Vse novo nastale datoteke shranite v mapo “vaja8″. Vse skripte JS pišite v zunanji datoteki (.js) v obliki funkcij, v HTML datotekah se lahko nahajajo samo klici funkcij. Vse naloge, ki zahtevajo PHP, zaganjajte na vašem spletnem mestu na ferisrv5 (ali drugem poljubnem strežniku, ki omogoča PHP).
- Naloga 1
-
Izdelajte spletno stran, ki vsebuje gumb ter vnosno polje, ki mu določite identifikator (ID). Uporabnik lahko v vnosno polje vpiše seznam enomestnih števil (od 0 do 9) ločenih z vejico (npr 3,4,5). Izdelajte datoteko skripta.js v kateri napišete funkcijo, ki od uporabnika zahteva vpis poljubnega števila in z uporabo metode alert izpiše, ali se vneseno število nahaja v seznamu števil (vnosnem polju) ali ne. Funkcija se naj pokliče ob kliku na gumb. Za iskanje števila v polju obvezno uporabite metodo razreda string indexOf.
Primer lahko vidite na sliki, oblika pojavnih oken je med brskalniki različna:
Po kliku se izpiše:
Koristne povezave: getElementById, indexOf, metode HTML DOM
- Naloga 2
- Nalogo 1 dopolnite tako, da na spletno stran dodate element span, ki mu določite ime (atribut name). Ko uporabnik konča z vpisom števil (zapusti vnosno polje) v element span izpišite vsa števila iz vnosnega polja in njihovo skupno vsoto. Pri implementaciji funkcije obvezno uporabite metodo razreda string split, ki podan niz razbije na polje nizov glede na ločilni znak, v našem primeru vejico.
Če vsote ni mogoče izračunati (vnos ni primeren), potem v omenjeni element span izpišite opozorilo.
Primer lahko vidite tukaj:
Koristne povezave: uporaba DOM-a, getElementsByName, split, dogodek onblur. - Naloga 3
- Napišite JS razred Racunalnik, ki ima lastnosti:
- hitrost procesorja v GHz,
- število jeder,
- velikost glavnega pomnilnika v MB,
- ali je prenosni ali ne.
Lastnostim določite privzete vrednosti. Razred naj ima metodo za izpis, ki podatke izpiše v obliki HTML tabele, kot je prikazano tukaj:
Pri izpisu se izpiše še ocena računalnika v obliki točk, ki jo izračunate kot polovico zmnožka vseh številskih vrednosti. Če je računalnik prenosni, potem izračunano vrednost povečate za 20%.
Napišite testno funkcijo, v kateri izdelate objekt tipa “Racunalnik” in pokličete metodo za izpis. Funkcija se naj izvede takoj po zagonu spletne strani. - Naloga 4
-
Izdelajte novo PHP datoteko (lahko uporabite predlogo) in v njej s pomočjo zanke “izrišite” tabelo dimenzije NxN, ki vsebujejo zaporedna števila. Za N uporabite spremenljivko, ki ji nastavite vrednost v PHP datoteki. V PHP-ju med izdelavo celic tabele nekaterim celicam (značkam td) nastavite CSS razred “Izbrana”. Ob izdelavi vsake celice zanjo obstaja 20% možnost, da bo celica izbrana. Za izračun verjetnosti pri vsaki celici uporabite generator naključnih števil tako, da npr. generirajte število med 1 in 100 in primerjate dobljeno vrednost. Na strani definirajte omenjeni CSS razred tako, da bodo izbrane celice zelene barve. Primer izpisa za N = 3:
Primer izpisa za N=8 je tukaj. Koristne povezave: spremenljivke, if..else, zanke, rand
- Naloga 5
- Funkcijo za izpis iz naloge 3 nadgradite tako, da v primeru, da so vrednosti CPU, št. jeder ali količina pomnilnika enaka 0, da vržete izjemo (throw). Vso kodo funkcije obdajte z blokom try .. catch, kjer v bloku catch v primeru napake izpišete “Ta računalnik je pokvarjen: ” in dopišete razlog (niz izjeme). Primer: če nastavimo število jeder na 0, potem se izpiše:
- Ta računalnik je pokvarjen: procesor nima jeder!
- Naloga 6
-
Nalogo 4 dopolnite tako, da pod tabelo dodate vnosno polje in gumb, ki omogočata uporabniku vpis nove dimenzije tabele. Primer:
Če bi uporabnik stisnil na gumb, bi se naložila ista stran, ki bi imela tabelo velikosti 8×8 in prej omenjeno vnosno polje, kot je prikazano na sliki.
Pozor: ob nalaganju je potrebno preveriti ali je uporabnik kaj posredoval (glej povezave). V primeru, da je, uporabite posredovan podatek za izris tabele. JS v tej nalogi ni potreben.Koristne povezave: $_GET
- Naloga 7
-
Implementirajte spletno igro, v kateri igralec ugiba, katero celico tabele je izbral spletni strežnik. Če igralec celice ne ugotovi, se uporabniku poda namig (oddaljenost od prave celice). Primer končne igre je prikazan na sliki. Implementacija igre je razdeljena v dve nalogi.
Prenesite naslednjo predlogo, ki predstavlja uporabniški vmesnik igre. Oglejte si kodo, predvsem del, ki dela s sejo.
Izdelajte novo PHP datoteko, ki po metodi GET prejme X in Y celice in preveri, ali gre za isto celico, ki je bila naključno izbrana na strani prejšnje naloge (izbrana celica je zapisana v seji). Če ne gre za isto celico, potem izračunajte oddaljenost med celicama po X in Y osi in izpišite večjo vrednost. Poleg tega si v sejo shranite, da je bil izveden korak (povečajte vrednost v seji). Če gre za isto celico, potem izpišite “Zmaga v x. korakih!”, kjer x nadomestite s številom korakov. Pazite: izpis te strani naj ne bo XHTML, ampak samo številka oz. določen niz.
Koristne povezave: seja.
- Naloga 8
-
V predlogi iz naloge 7 implementirajte JS funkcijo, ki s pomočjo asinhronega klica (AJAX) pokliče stran iz prejšnje naloge in v vnosno polje pod tabelo izpiše namig ali sporočilo o zmagi. Vsako sporočilo naj bo v svoji vrstici, nova sporočila na vrhu. Za izvedbo AJAX klica uporabite kodo s predavanj ali uporabite eno izmed JavaScript ogrodij, npr. jQuery.
OSS: Vaja 7
Vse novo nastale datoteke shranite v mapo “vaje07″. Naloge so na temo skriptnega jezika JavaScript (v nadaljevanju JS). JS kodo pišite kar v HTML strani (v primerne značke ali atribute). Za vsako nalogo izdelajte novo HTML datoteko, razen če naloga pravi, da gre za nadgradnjo prejšnje naloge. Pomagajte si z primeri, ki jih najdete na W3Schools.
- Naloga 1
- Napišite JS kodo, ki od uporabnika zahteva vpis dveh števil, ki jih nato sešteje, odšteje, zmnoži, deli in izračuna ostanek pri deljenju ter rezultat izpiše na stran. Na prvi sliki lahko vidite vnos prvega števila, na drugi sliki pa izpis.
Namig: window.prompt, document.writeln. - Naloga 2
- Nadgradite prejšnjo nalogo tako, da izpis števil A in B opremite z značko span. Če je število pozitivno, na značko dodajte CSS razred Pozitivno oz. razred Negativno, če je število negativno. Oba razreda definirajte kar v glavi spletne strani (interni CSS) tako, da je pozitivno število izpisano v zeleni, negativno pa v rdeči barvi, oboje krepko. Dodatno naj izpiše še, ali je A večji, manjši ali enak B, kjer besedo “večji”, “manjši” oz. “enak” izpišite krepko. Primer lahko vidite na sliki.
- Naloga 3
- Nadgradite prejšnjo nalogo tako, da pred računanjem preveri, če sta vpisani vrednosti sploh števili in če je drugo število 0, saj v tem primeru deljenja in ostanek pri deljenju ni mogoče izvesti. Na sliki lahko vidite dve okni. V prvem oknu je izpis primera, ko kot število A navedemo vrednost, ki ni število (npr. vpišemo črke), v drugem oknu pa primer, ko je vrednost števila B enaka nič (0). Opozorila izpišite rdečo in krepko, uporabite kar CSS razred Negativno iz prejšnje naloge.
Namig: parseInt, isNaN. - Naloga 4
- Napišite JS, ki od uporabnika zahteva vpis višine in širine tabele (enota je celica tabele), ki jo nato izrišite na spletno stran podobno, kot je prikazano na sliki (višina 6 in širina 10 celic). Obliko tabele zapišite kot CSS, ki je definiran v glavi spletne strani, (interni stil). Celice na sliki so višine in širine 40px.
- Naloga 5
- Napišite JS, ki od uporabnika zahteva polmer kroga (v px). Na podlagi vpisane vrednosti izračunajte obseg in površino kroga, ter krog izrišite s pomočjo slike, ki jo dobite tukaj in je dimenzije 200×200. Izračunane vrednosti zaokrožite na dve decimalki. Dva primera lahko vidite na sliki.
Namig: za vrednost Π (pi = 3,14…) uporabite konstanto, ki je definirana v objektu Math. Isti objekt vsebuje tudi metode za zaokroževanje. Žal te metode ne omogočajo zaokroževanje na dve decimalki, zato uporabite naslednji trik: število pomnožite s 100 in zaokrožite na celo število, nato pa ga delite s 100 in dobite zaokroženo na dve decimalki. - Naloga 6
- Napišite JS, ki izriše barvno tabelo, kot je prikazano na sliki. Pred izrisom od uporabnika zahteva štiri podatke: začetno vrednost za rdečo, zeleno in modro komponento barve in število stolpcev tabele. Prvi stolpec izrišite v barvi, kot je bila vpisana, zadnji stolpec črne barve (rgb(0,0,0)), vmesne barve pa izračunajte sami. Tabela naj bo 100% širine in višine, da dosežete 100% višino, morate to poleg tabeli nastaviti še elementu BODY in HTML. Barvo celic določajte preko atributa “style”. Na vsako celico dodajte še atribut “title”, kjer zapišete vrednost trenutne barve, da se v primeru prehoda z miško izpiše vrednost barve v obliki zaslonskega namiga (vidno tudi na sliki).
- Naloga 7
- Nadgradite nalogo 4 tako, da ob kliku na poljubno celico tabele le-ta spremeni barvo ozadja v rdečo. Na sliki lahko vidite primer, kjer so bile kliknjene tri celice.
Namig: pri izrisu tabele vsaki celici dodajte JS dogodek onclick, kjer implementirate zamenjavo CSS razreda celice (CSS razred definirajte kar v glavi strani). Razred celice nastavljate preko lastnosti className. Pomagajte si z objektom this. - Naloga 8
- Nadgradite prejšnjo nalogo tako, da v primeru ponovnega klika na isto celico povrne prejšnji stil (da se celica iz rdeče pobarva v barvo, ki je bila pred klikom). Funkcionalnost implementirajte s pomočjo JS funkcije z imenom zamenjaj.
Namig: v dogodku onclick pokličite funkcijo zamenjaj, ki na vhodu prejme objekt kliknjene celice. V funkciji preverite, kateri CSS razred je trenutno nastavljen in ga glede na to primerno zamenjajte s prejšnjim.
OSS: Vaja 6
Večino vaj je na tematiko CSS, pri teh spreminjajte samo CSS datoteke, datotek HTML ne spreminjajte, razen če je to posebej navedeno. Nekatere slike poleg primera vsebujejo še levi in/ali desni rob brskalnika, kar nakazuje, ali je vsebina vidna čez celotno vrstico v brskalniku ali ne. Pomagajte si z W3Schools.
- Naloga 1
- Prenesite ZIP paket in ga razširite v novo mapo “vaja06″. V paketu so datoteke “bloki.html”, štiri slike za ozadje in “bloki.css”. Poglejte HTML in se prepričajte, da se slike pravilno naložijo.
Pri nalogah 2,3,4, 5, 7 in 8 spreminjajte samo CSS datoteko, HTML-ja ne spreminjajte!
- Naloga 2
- S CSS dosežite, da so vsi elementi div znotraj razreda “.naloga1″ dimenzij 200px x 100px. Dopolnite stil teh elementov z atributom
overflowtako, da bo “odrezalo” besedilo tako, da ga prikaže le toliko, koliko ima prostora. Izdelajte rdeč in moder okvir, kot je prikazano na sliki (na sliki je prikaz v dveh brskalnikih). Primerjajte izgled v brskalniku Internet Explorer in Mozilla Firefox. Bodite pozorni na okvir in ozadje. - Naloga 3
- Dopolnite CSS (razred “naloga1″) tako, da bo pisava v vseh odstavkih (neglede na razred) bele barve na modrem ozadju.
- Naloga 4
- Samo s pomočjo selektorjev dosežite, da se v tretjem elementu div (razred d3) pojavi drsnik in da ozadje odstavka tega elementa ne bo več modro ampak prozorno (da se vidi slika, ki je v ozadju). Primer lahko vidite na sliki.
- Naloge 5
- S pomočjo zamikov padding in margin izdelajte stran, kot je prikazano na sliki. Pomagajte si z razlago t.i. Box modela.
- Naloga 6
- Na seznamu poiščite CSS lastnost (ki ni border-style), ki kjerkoli v nazivu vsebuje črko, ki je enaka začetnici vašega imena ali priimka (brez šumnikov).
Primeri izbire:- Bojana Car:
- border ali color
- Ervin Schaff
- z-index ali border-style
Izbrano lastnost preučite in znanje zapišite v okliki XML dokumenta. Za zapis uporabite prazno šablono, ki se nahaja tukaj. V prazni šabloni je z “..” označeno mesto kamor vpisujete podatke. Pomagajte si s že izpolnjenim študentskim primerom
border_style.xml.izbira border-style je podana kot primer in je zato seveda ne smete uporabiti kot rešitev te naloge.Zagotovite, da bo dopolnjena XML datoteka veljavna (dokument naj bo: “well-formed”), kar lahko preverite kar z brskalnikom (datoteko odprite v brskalniku), ki pri branju datoteke ne sme izpisovati napak. Lahko si pomagate tudi z W3Schools - Naloga 7
- Za razred “naloga2″ dosežite izpis strani, kot je prikazano na sliki (dejansko so ti pasovi do konca vrstice). Namig: potrebno je skriti drugi element div v celoti, medtem ko pri četrtem elementu skrijemo le besedilo. Skrivanje je mogoče z lastnostmi display in visibility, ugotovite razliko!
- Naloga 8
- Za razred “naloga3″ dosežite izpis strani, kot je prikazano na sliki. Namig: elemente div vertikalno zamikajte po 20px in horizantalno po 70px. Drugi element div je viden pred vsemi ostalimi. Dimenzije elementov naj bodo 200px x 200px. Elementi so zamaknjeni absolutno glede na starševski element div.
- Naloga 9
- Za razred “naloga4″ dosežite izpis strani, kot je prikazano na sliki. Uporabite CSS lastnost “float”. Okrog elementa
divnaj bo 1px rob oranžne barve. - Naloga 10
- Izdelajte novo stran pozdrav.html in jo napolnite z osnovnimi XHTML elementi. V glavi dokumenta dodajte značke, med katere lahko pišemo skripte s skriptnim jezikom JavaScript. Izdelajte skripto, ki uporabnika vpraša ločeno po imenu in priimku, nato pa na stran izpiše “Doborodošli, <vpisano ime> <vpisan priimek>!”. Skripta naj v primeru, če uporabnik namesto priimka vnese prazen niz, izpiše “Dobrodošli, anonimni uporabnik!”. Medtem ko v primeru, da uporabnik pri vnosu namesto “OK” kliknete na gumb “Cancel” izpiše “Vnos podatkov preklican!” (v takem primeru je podatek enak null).
Namig: skripto pišite v glavo HTML strani med pravimi značkami, skripta se bo izvedla takoj po zagonu strani. Za pridobivanje imena in priimka uporabite funkcijo prompt, rezultat pa izpišite kot vsebino strani s funkcijo document.write.
OSS: Vaja 5
Večina tukaj navedenih nalog je na temo oblikovanja s pomočjo CSS. Vso CSS kodo obvezno pišite v zunanjo datoteko, razen če je to drugače navedeno.
- Naloga 1
- V mapo “vaja05” prenesite naslednjo ZIP datoteko in jo razpakirajte. V meniju dodajte povezavo na to datoteko. Oblikujte prvi odstavek tako, da dodate stil neposredno v značko prvega odstavka s pomočjo atributa style. Ne uporabljajte značke “font”! Besedilo odstavka naj ima font Tahoma z alternativo “sans-serif” in naj bo velikosti 12 točk. Primer lahko vidite na sliki, kjer lahko vidite rešitve za naloge 1, 2, 3 in 4. Vrstice besedila zasedajo celotno širino brskalnika, zato ne vstavljajte značk br!
Takšen stil je angl. imenovan “inline style”, ker je stil definiran kar v znački, za katero stil velja.
- Naloga 2
- Oblikujte drugi odstavek tako, da znački za odstavek navedete razred, razred pa definirate v glavi iste strani. Besedilo odstavka naj ima font Verdana velikosti 14 točk in rdeče barve, celoten odstavek pa naj bo obojestransko poravnan.
Takšen stil je angl. imenovan “internal style”, ker je stil definiran v isti datoteki, kot vsebina.
- Naloga 3
- Oblikujte tretji odstavek tako, da znački za odstavek navedete nov razred, nato pa razred definirajte v zunanji datoteki “oblika.css“, ki jo izdelajte v isti mapi kot HTML. V datoteki HTML naredite sklic na datoteko CSS. Pazite, da razred tega odstavka nima isto ime kot razred drugega odstavka. Besedilo odstavka naj ima font Arial velikosti 12 točk, bele barve, barvo #A3AEB6 v ozadju in pisano krepko. Celoten odstavek naj bo poravnan na sredino.
Takšen stil je angl. imenovan “external style”, ker je stil definiran v ločeni datoteki. To je v večini primerov najboljši način določanja oblike spletnih strani.Pozor: pazite, da boste tudi datoteko .css imeli v pravilnem kodnem formatu znakov (UTF-8 oz. enak kot preostale strani), da bo ustrezno delovalo v vseh brskalnikih.
- Naloga 4
- Oblikujte četrti odstavek tako, da znački za odstavek določite identifikator (ID), nato pa za ta identifikator definirate stil v zunanji datoteki “oblika.css”, ki ste jo že izdelali pri nalogi 3. Besedilo odstavka naj ima font Verdana z barvo #E1FFAA, s črnim ozadjem in desno poravnano. Višina posamezne vrstice naj bo za polovico večja kot običajno (uporabite pravo CSS enoto).
- Naloga 5
- Skopirajte vsebino prejšnjih vaj “vaja04″ v mapo “vaja05″. V mapi “vaja05″ izdelajate novo datoteko “style.css”. V vse datoteke HTML (razen index.html) dodajte sklic na datoteko CSS. V CSS datoteki določite stil za značko BODY tako, da nastavite pisavo Tahoma z alternativno pisavo sans-serif in velikosti 12px.
- Naloga 6
- Stranem “glava.html”, “menu.html” in “noga.html” ste pri prejšnjih vajah nastavili barvo ozadja v znački “body”. Odstranite nastavitev barve ozadja, nato pa tej znački nastavite ID z vrednostjo “glava”, “meni” oz. “noga”, odvisno od strani. V zunanji datoteki “style.css” za te ID-je nastavite barvo ozadja, uporabite lahko enake barve kot so bile prej.
- Naloga 7
- S CSS dosežite, da se naslov (h1) v glavi izpiše v pisavi velikosti 50px poljubne barve. Vsi naslovi (tudi v glavi) se naj izpišejo s pisavo Verdana, velikosti 24px in s pomanjšanimi velikimi črkami, neglede na to, kaj v HTML dejansko piše (lastnost font-variant). Stil za naslove zapišite v skrajšani obliki, npr. nastavitev polnega roba debeline 1px v rdeči barvi se skrajšano zapiše
border: solid 1px red;. Pomagajte si z CSS lastnostjo font, pri zapisu pa pazite na vrstni red. Ne spreminjajte HTML datotek! Primer lahko vidite na sliki. - Naloga 8
- Prenesite predlogo, predloge ne spreminjati. V ustrezni podmapi ustvarite novo CSS datoteko, lokacija in ime je že določena v predlogi. V CSS datoteki nastavite, da je besedilo na vsej strani zapisano v pisavi Verdana rjave barve (angl. “brown”), besedilo v elementih span pa naj bo zapisano v rdeči barvi in ležeče. Nato dosežite, da se elementi razreda izjema izpišejo podčrtano, element span v razredu izjema pa naj bo modre barve in velikosti 26px. Predloge ne spreminjajte! Končni izgled lahko vidite na sliki.
- Naloga 9
- Z uporabo CSS dosežite izpis menija, kot je prikazano na sliki. Elementu ul v meniju dodajte razred “menu“, nato pa v datoteki CSS določite obliko tega elementa. Dosežite, da pred povezavami v meniju ni pik. Povezave naj bodo nepodčrtane in črne barve, če pa se z miško nahajamo nad povezavo, pa naj bo povezava podčrtana in sive barve. V vsakem primeru naj bo velikost znakov 16px. Pazite, da stil ne bo vplival na povezave, ki niso v meniju, kar lahko opazite tudi na sliki, saj povezave v vsebini niso spremenjene.
