PREDSTAVITEV IN ANALIZA ORODIJ ZA PREDMET JAVASCRIPT · JavaScript ni isto kot Java, čeprav si z Javo deli nekaj podobnosti, kot so lastnosti in strukture, oba pa imata nekaj skupnih

Diplomsko delo visokošolskega strokovnega študija Organizacija in management informacijskih sistemov

PREDSTAVITEV IN ANALIZA ORODIJ ZA PREDMET JAVASCRIPT

Mentor: pred. mag. Iztok Bitenc Kandidat: Žiga Čadež

Kranj, avgust 2017

ZAHVALA Zahvaljujem se mentorju pred. mag. Iztoku Bitencu za priložnost priprave diplomske naloge. Hvaležen sem za potrpežljivost in razumevanje, ki ga je izkazal čez celotno obdobje priprave in pisanje diplomske naloge. Zahvaljujem se tudi lektorici Elizabeti Rakovec, ki je lektorirala mojo diplomsko nalogo. Iskreno se želim zahvaliti tudi svoji družini in prijateljem, ki so mi pomagali pri dokončanju študija.

POVZETEK

Diplomska naloga je nastala v okviru prenove predmetov metode in tehnike razvoja programske opreme in razvoj poslovnih aplikacij na Fakulteti za organizacijske vede (FOV), Univerze v Mariboru. Namen naloge je bil najti najbolj primerno integrirano razvojno orodje (IDE) za učenje programiranja v jeziku Javascript. V uvodnem delu avtor predstavi cilje, zahteve in omejitve pri izvedbi naloge ter na kratko opiše pojme IDE in Javascript. V jedru naloge podrobno opiše namestitev dveh izbranih orodij in razvije demonstracijsko kodo, ki v obeh razvojnih orodjih prikaže uporabo jezika Javascript v spletem brskalniku in v operacijskem sistemu Android. V zaključku analizira postopek namestitve in uporabe obeh orodji in prikaže njune prednosti in slabosti.

KLJUČNE BESEDE:

- JavaScript - Integrirano razvojno orodje (IDE) - Hibridna mobilna aplikacija - Eclipse - NetBeans - Android

ABSTRACT This thesis was created within the renewal of the school subjects methods and techniques of software development and development of business applications at the Faculty of Organizational Sciences (FOV) University of Maribor. The aim was to find the most suitable Integrated Development Tool (IDE) for learning programming in Javascript. In the introductory part, the author presents the objectives, requirements and constraints in the execution of the task, and briefly describes the concepts of the IDE and Javascript. In the main part describes in detail the installation of two selected tools and develops a demonstration code that displays the use of Javascript in both development tools in the web browser and Android. In conclusion, he analyzes the installation process and use of both tools and shows their advantages and disadvantages.

KEYWORDS:

- JavaScript - Integrated development environment (IDE) - Hybrid mobile applications - Eclipse - NetBeans - Android

KAZALO 1. UVOD ............................................................................................................. 1

1.1. PREDSTAVITEV PROBLEMA .......................................................................... 1 1.2. PREDSTAVITEV OKOLJA .............................................................................. 1 1.3. PREDPOSTAVKE IN OMEJITVE ...................................................................... 2 1.4. METODE DELA ............................................................................................. 2

2. TEORETIČNE OSNOVE ...................................................................................... 3 2.1. JAVASCRIPT ................................................................................................ 3 2.2. RAZVOJNA OKOLJA (IDE) ............................................................................ 3 2.2.1. IDE IN JAVASCRIPT ............................................................................... 5 2.2.2. ECLIPSE IDE ......................................................................................... 6 2.2.3. NETBEANS IDE...................................................................................... 6

3. IZDELAVA REŠITVE ............................................................................................ 7 3.1. PRIPRAVA DELOVNEGA OKOLJA ................................................................... 7 3.2. NAMESTITEV NETBEANSA ............................................................................. 9 3.3. NAMESTITEV ECLIPSA ................................................................................. 11 3.4. JAVASCRIPT V NETBEANSU ........................................................................ 11 3.5. JAVASCRIPT V ECLIPSU .............................................................................. 17 3.6. HIBRIDNA MOBILNA APLIKACIJA V JAVASCRIPTU ........................................ 19 3.7. NAMESTITEV NETBEANSA ZA UPORABO HIBRIDNIH APLIKACIJ .................... 24 3.8. HIBRIDNE MOBILNE APLIKACIJE V NETBEANSU ........................................... 26 3.9. HIBRIDNE MOBILNE APLIKACIJE V ECLIPSU ................................................. 32

4. ZAKLJUČKI ...................................................................................................... 38 4.1. OCENA UČINKOV ....................................................................................... 38 4.2. POGOJI ZA UVEDBO .................................................................................. 40 4.3. MOŽNOSTI NADALJNjEGA RAZVOJA .......................................................... 40 LITERATURA IN VIRI ............................................................................................ 41 PRILOGE .............................................................................................................. 42 KAZALO SLIK ....................................................................................................... 42 POJMOVNIK ......................................................................................................... 43 KRATICE IN AKRONIMI ......................................................................................... 43 PRILOGA 1: DEMONSTRACIJSKA KODA ................................................................. 44

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Žiga Čadež: Predstavitev in analiza orodij za predmet JavaScript stran 1

1. UVOD 1.1. PREDSTAVITEV PROBLEMA Na Fakulteti za organizacijske vede Univerze v Mariboru sta se prenavljala predmeta metode in tehnike razvoja programske opreme in razvoj poslovnih aplikacij, zato smo iskali razvojno okolje za nov programski jezik JavaScript. Oba predmeta učita osnove programiranja, od začetnih definicij spremenljivk in osnovnih gradnikov kode do uporabe zunanjih podatkov in dvo-dimenzionalnih tabel.

Ker za razvoj z JavaScriptom obstaja veliko integriranih razvojnih okolij (IDE), sta profesorja potrebovala nekoga, ki bo raziskal obstoječa orodja in v vsakem izdelal več predlog za učenje posameznih funkcij programiranja. Za vsako orodje so predstavljena natančna navodila za namestitev, uporabo njenih osnovnih elementov (razvoj enostavne kode, dodajanje obrazcev, gradnikov in razhroščevanje) za tri ciljna okolja Windows, spletni brskalnik in Android. Za boljši prikaz pa smo izdelali preprosto spletno, kot tudi android aplikacijo, ki bo vsebovala osnovne gradnike JavaScripta. Cilj diplomske naloge je bil najti razvojno orodje, ki:

- je brezplačno ali pa cenovno zelo ugodno, - se nenehno posodablja, - je enostavno za namestitev in uporabo, - je podprto s strani večih operacijskih sistemov, - lajša pisanje, urejanje, poganjanje in razhroščevanje.

Na koncu je tudi poročilo o težavah pri namestitvi in uporabi orodja in analiza možnih optimalnih izbir.

1.2. PREDSTAVITEV OKOLJA Okolje, v katerem bo moralo naše orodje za programiranje v jeziku Javascript delovati, so učilnice na fakulteti, ki ponujajo operacijski sistem Windows 10 z Intelovim procesorjem Core 2 in 2Gb pomnilnika. Poleg učilnic, kjer bodo potekala predavanja bodo študenti svoje naloge izpopolnjevali tudi doma. Po analizi izdelani na spletni strani Unity3d (http://hwstats.unity3d.com/pc/) lahko predpostavljamo, da ima standardni uporabnik doma Windows 7, procesor Intel Core i5 in 8 Gb pomnilnika. Seveda domači uporabniki računalnike uporabljajo za različne namene, zato lahko rezultati variirajo in prav iz tega razloga smo upoštevali najbolj pogosto uporabljene komponente. Naše orodje mora po predpostavki biti kompatibilno z vsemi naštetimi specifikacijami, tako da zagotovimo delovanje na domačih računalnikih. Upoštevati moramo tudi potencialno nizko programersko znanje uporabnika, ki tudi nima podpore za težave z orodjem.



1.3. PREDPOSTAVKE IN OMEJITVE Predpostavljamo, da študent še ne pozna osnov programskega jezika JavaScript in ga ne zna uporabljati. V ta namen moramo najprej izbrati primerno programsko orodje in okolje za delo z jezikom JavaScript, ki bo podprto predvsem na windowsovih operacijskih sistemih. Seveda pri izbiri moramo upoštevati nekaj omejitev, kot so primernost jezika, cena, posodabljanje, preprostost uporabe in namestitve. Razvojno orodje mora biti primerno za uporabo manj veščih programerjev oziroma začetnikov, to pomeni da ne sme imeti zahtevnih procesov namestitve, mora biti enostavno za uporabo, posodabljanje pa mora biti avtomatizirano. Prav tako smo omejeni s številom ur, ki so namenjene danemu predmetu; 75 ur za predavanja in vaje. Te ure naj bi bile namenjene poučevanju programiranja v jeziku JavaScript in čim manj delu s programskim orodjem in okoljem.

1.4. METODE DELA S sistematičnim iskanjem obstoječih orodij, ki se uporabljajo za razvoj in programiranje programov JavaScript, bomo pregledali splet, v iskanje bomo vključili bloge, forume in znane spletne strani. Po metodi študija primera bomo analizirali funkcionalne lastnosti najdenih orodij. S pomočjo večparametrskega odločanja bomo na podlagi oblikovanih kriterijev in sodil, izbrali najprimernejšega kandidata. Oblikovali bomo terminski načrt za izvedbo naloge.



2. TEORETIČNE OSNOVE

2.1. JAVASCRIPT Leta 1995 so pri podjetju Sun razvili nov programski jezik, poimenovan Java. Namenjen je pisanju programov, ki jih lahko nespremenjene izvajamo na vsakem računalniku, ne glede na vrsto procesorja ali operacijskega sistema. Zaradi te lastnosti so ti programi idealni za vključitev na spletne strani, saj lahko delujejo na vseh vrstah računalnikov. (E-računalništvo, 2017) Da bi izboljšali podporo programom, napisanim v jeziku Java, so pri podjetju Netscape še istega leta razvili programski jezik, ki so ga sprva poimenovali LiveScript, iz tržnih razlogov pa so ga kmalu preimenovali v JavaScript (zaradi popularnosti Jave). Kljub začetnim pomanjkljivostim (slaba varnost, nestandardiziranost, pomanjkanje razvojnih orodij) je JavaScript sčasoma postal eno od najbolj priljubljenih orodij za izdelavo dinamičnih spletnih strani. Skupaj z drugimi velikimi računalniškimi podjetji, kot je Sun, je Netscape leta 1996 pričel s standardizacijo svojega jezika, pri čemer se je obrnil po pomoč k organizaciji ECMA - European Computer Manufacturers Association. Standardizirani jezik so zato poimenovali ECMAScript. Standardizirano pa je bilo le jedro, osnovni tipi in objekti, objekti vezani na brskalnik pa ne. JavaScript ni isto kot Java, čeprav si z Javo deli nekaj podobnosti, kot so lastnosti in strukture, oba pa imata nekaj skupnih lastnosti z jezikom C. Glavna razlika med njima je v tem, da je Java objektni programski jezik s prevedeno izvršilno kodo, JavaScript pa skriptni jezik, ki se prevede pred izvajanjem. Kot navaja Wikipedija, se »JavaScript veliko uporablja za ustvarjanje dinamičnih spletnih strani. Program se vgradi ali pa vključi v HTML, da opravlja naloge, ki niso mogoče samo s statično stranjo. Na primer odpiranje novih oken, preverjanje pravilnost vnesenih podatkov, enostavni izračuni ipd.«. Nabor uporabe je velik, ne samo pri obogatenju spletne strani, ampak tudi izven WWWja (World Wide Web). Podpirajo ga tudi nekateri produkti Adobe kot tudi operacijska sistema Microsoft Windows ter Mac OS X. (Wikipedija, 2017 )

2.2. RAZVOJNA OKOLJA (IDE) Integrirano razvojno okolje, tako imenovani IDE (Integrated Development Environment) je programsko orodje, ki programerjem pomaga pri razvoju. Običajno vsebuje urejevalnik izvorne kode, prevajalnik oziroma tolmač (interpreter), orodje za avtomatizacijo izgradnje programa in razhroščevalnik. Včasih so v orodje vgrajeni tudi sistem za nadzor verzij programov in predvsem orodja za tvorbo grafičnih uporabniških vmesnikov (GUI, Graphical User Interface). (Programiranje v integriranem razvojnem okolju (IDE), 2017) Mnoga sodobna razvojna okolja, ki predvidevajo objektno usmerjeno programiranje, vsebujejo tudi brkljalnik razredov (class browser), pregledovalnik objektov in diagram hierarhije razredov. Nekatera razvojna okolja tudi dopuščajo



programiranje v različnih programskih jezikih v istem okolju. Različna okolja IDE so namenjena različnim uporabnikom. Nekatera so namenjena začetnikom in so bolj preprosta, druga pa so namenjena profesionalni uporabi. Težje se jih naučimo, dolgoročno pa nudijo programerju boljšo podporo. Nekatera od njih so prosto dostopna, večinoma pa so plačljiva. Med prosto dostopnimi je morda najbolj priljubljeno okolje Eclipse, ki ga lahko uporabljamo za različne programske jezike. Večina sodobnih razvojnih okolij IDE predvideva »projektni« pristop k razvoju programov, ki se uporablja pri bolj kompleksnih in bolj obsežnih programih. Program je zaradi večje preglednosti in lažjega popravljanja in spreminjanja razdeljen na module. Orodje gleda na celoten skupek datotek kot na projekt in samo ugotavlja njihove medsebojne odvisnosti. Če spremenimo nek modul, od katerega so odvisni tudi nekateri drugi, program pri prevajanju samodejno ponovno prevede tudi te module. Programski projekt je organizacijsko na najvišji ravni in ga srečamo tudi pri mnogih drugih programerskih okoljih. Pri Javi lahko posamezne pogosto uporabne in sorodne module združujemo v pakete (packages).

Slika 1: Prikaz nekaj funkcij IDEja

Dobra razvojna orodja omogočajo programerju tudi sprotno pomoč. Tako lahko pri pisanju imen objektov program samodejno svetuje, katere metode in polja lahko programer uporabi. Zelo priročna pomoč je tudi sprotno ugotavljanje sintaktičnih programerskih napak. Programer je tako opozorjen na svojo napako, še preden zahteva prevajanje modula. Orodje mu lahko tudi svetuje, kako naj napako odpravi.



Slika 2: Prikaz nekaj opozoril v IDEju Zelo pomembno je še to, da taka orodja predvidevajo uporabo originalnih prevajalnikov in dokumentacije. Programski jeziki se namreč spreminjajo, prihajajo nove verzije. Če orodje oziroma okolje predvideva uporabo originalnih prevajalnikov in dokumentacije, ga lahko sproti posodabljamo. 2.2.1. IDE IN JAVASCRIPT Na voljo je veliko dobrih orodij za programiranje v JavaScriptu, med njimi so najbolj razširjena:

- Komodo IDE je celovit urejevalnik, ki ponuja široko paleto integracij, namenjenih lažjemu delu. Nudi podporo za več kot sto jezikov, na katerem koli operacijskem sistemu,

- Visual Studio ponuja urejanje in razhroščevanje aplikacij na vsakem operacijskem sistemu. Vgrajeno ima GIT podporo, ponuja več tisoč razširitev, je brezplačen in odprtokoden,

- Sublime Text je urejevalnik besedila, glavne prednosti so bližnjične tipke, možnost večih sprememb naenkrat, razdvojeno programiranje kode, preprosto menjanje projektov in je podprt na večih platformah,

- WebStorm ponuja zmogljiv razhroščevalnik, veliko izbiro orodij in odlično preverjanje napak,

- Alpha Anywhere omogoča uporabnikom, da hitro postanejo spretni pri ustvarjanju mobilnih poslovnih obrazcev in aplikacij, ki delujejo na vseh napravah,

- Komodo Edit je urejevalnik besedila, ki je veliko bolj preprost kot Komodo IDE, vendar kljub temu zelo učinkovit,

- Notepad++ je brezplačen urejevalnik izvorne kode, ki podpira več jezikov. Teče v okolju MS Windows, je preprost in učinkovit,

- Textmate prinaša pristop Applovih operacijskih sistemov v svet urejevalnikov besedil. S premostitvijo UNIX temeljev in GUI TextMate izbere najboljše iz obeh svetov v korist izkušenih in začetnih uporabnikov,

- Brackets se osredotoča na vizualna orodja. Je sodoben urejevalnik besedila, ki je enostaven za oblikovanje v brskalniku. Zgrajen je od spodaj navzgor za spletne oblikovalce in front-end razvijalce,

- Eclipse IDE zagotavlja IDE in platforme za skoraj vsak jezik in arhitekture. Znani so predvsem po Javi, C / C ++, JavaScript in PHP. Zgrajen je na platformah za ustvarjanje namiznih, spletnih aplikacij in aplikacij v



oblaku. To orodje dostavlja najbolj obsežno zbirko dodatkov, razširitev in orodij za razvijalce programske opreme,

- NetBeans pomaga hitro in enostavno razvijati namizne, mobilne in spletne aplikacije. Podpira Javo, JavaScript, HTML5, PHP, C / C ++ itd. NetBeans IDE je brezplačen odprtokoden program, ki ima svetovno skupnost uporabnikov in razvijalcev.

2.2.2. ECLIPSE IDE V letu 2001 je IBM začel z izgradnjo Eclipsa, ki se je do danes zelo razvil. Prvotno je bil namenjen za programiranje v jeziku Java, nato pa se je razširil in dobil podporo še za druge programske jezike. Prvotno je bil Eclipse v lasti IBM, ki pa je po nekaj letih prešel v odprtokodno aplikacijo. Eclipse ponuja širok spekter uporabe različnih programskih jezikov, ima vrsto dodatnih razširitev in vtičnikov. (Eclipse, 2017)

Največje prednosti Eclipsa so:

Nudi stalno pomoč, med kodiranjem.

Dokončanje kode, namesto prebijanja skozi dokumentacijo, imamo možnost, da se premikamo po kodi s pomočjo metod in si s tem prihranimo veliko pisanja.

Preimenovanje - pomaga s preimenovanjem funkcij, spremenljivk, razredov…

Sintaktično preverjanje, ki nam pomaga s pisanjem pravilne kode, medtem ko tipkamo.

2.2.3. NETBEANS IDE NetBeansov razvoj se je začel leta 1997 na Češkoslovaškem, oziroma v današnji Češki republiki, ko je skupina študentov iskala nove rešitve s programiranjem v jeziku Java. Prvotno je nosil ime Xelfi, leta 1999 pa so ga preimenovali v NetBeans. Z leti se je podpora večala in NetBeans je dobil dodatne razširitve. NetBeans ima možnost dodajanja in odstranjevanja modulov, primerljivo razširitvam vtičnikov, ki dajejo NetBeansu dodatne možnosti za širitev. Ima raznolik UI, ki ponuja širitev, vlečenje in spuščanje oken, ima tudi predstavljene predloge, ki so pripravljene za uporabo. Prednosti NetBeansa so:

Celovito orodje, vsebuje večino knjižnic, vtičnikov, predlog ob namestitvi programa.

Vzorci, vgrajenih ima veliko vzorcev, ki jih je mogoče urejati, spreminjati in izkoristiti za svojo uporabo.

Prijazen do začetnikov kot tudi bolj izkušenih programerjev, vsebuje veliko poglavij, ki so razdeljena na osnovna in napredna.

http://xelfi.cz/



3. IZDELAVA REŠITVE

3.1. PRIPRAVA DELOVNEGA OKOLJA Preden začnemo z namestitvijo naših programov, moramo namestiti JDK (Java Development Kit), ki ga bomo potrebovali kasneje pri hibridnih mobilnih aplikacijah in JRE (Java Runtime Environment), ki pa je potreben za delovanje uporabljenih orodij. Najlažje je v brskalnik vpisati »Download JDK«, nato kliknemo na spletno stran Oracla. Pokazati bi se nam moralo spodnje okno.

Slika 3: Spletna stran Oracla (Java) Kliknemo na »Download« pod JDK in JRE, odpre se nam nova spletna stran, kjer lahko določimo, kateri operacijski sistem uporabljamo, v našem primeru Windows x64. Nato najprej označimo, da se strinjamo s pogoji uporabe, in kliknemo na povezavo poleg izbrane opcije. Začeti bi se moral prenos. Po prenosu se samodejno zažene namestitev. Najbolje je shraniti datoteko v Programske datoteke(Program files), nato sledimo namestitivi. Ko smo namestili JDK in JRE, moramo v operacijskem sistemu določiti pot do jave; to storimo tako da v Nadzorni plošči izberemo Sistem in Dodatne nastavitve sistema. Ko se nam odpre novo okno, pod zavihkom Dodatno izberemo opcijo spremenljivke okolja



(Environmental variables). Pod oknom sistemske spremnljivke izberemo »Path« in kliknemo na gumb Uredi. Najprej moramo kopirati pot, ki vodi do JDKja in JREja, to storimo tako, da se v raziskovalcu pomaknemo v mapo, v katero smo prenesli ti dve datoteki in izberemo mapo »Bin« ter kopiramo pot. Preden prilepimo pot, moramo najprej dodati znak »;«, da ne zbrišemo prejšnjih vnosov. Obe poti prilepimo v okno spremenljivk okolja in kliknemo trikrat »V redu«. S tem smo nastavili pot do JDKja in JREja.

Slika 4: Urejanje sistemskih spremenljivk

Nato želimo preveriti, če naši poti delujeta. To storimo tako, da v windowsovem meniju Začetek kliknemo na okno Iskanje programov in datotek in vtipkamo ukaz »CMD«(Command prompt) in kliknemo nanj. Odprlo se bo okno, v katero lahko pišemo ukaze. Ukaza, ki ju bomo napisali, sta »java« in »javac«, najprej ukaz »java«. Če smo pravilno namestili JDK in JRE, bi se moral v oknu po vpisu ukaza »java« pokazati naslednji zapis:

Nato vpišemo še ukaz »javac«.

Če se nam v oknu ne prikažejo podobni zapisi, moramo preveriti, če smo pravilno vpisali pot v sistemskih spremenljivkah.

Slika 5: Tipkanje ukaza java

Slika 6: Tipkanje ukaza javac



Ker so orodja IDE razvita za različne vrste in verzije operacijskih sistemov, moramo najprej ugotoviti, katero različico imamo nameščeno na računalniku. To ugotovimo v nastavitvah sistema.

Slika 7: Prikaz nastavitev sistema Za obe orodji bomo zato namestili 64-bitno različico programa.

3.2. NAMESTITEV NETBEANSA Za prenos NetBeansa moramo obiskati njihovo spletno stran, v brskalnik vpišemo »netbeans dowload« . Odpreti bi se nam morala spodnja spletna stran.



Slika 8: Spletna stran NetBeansa in izbira prenosa Na spletni strani izberemo, kateri paket NetBeansa hočemo prenesti, za naše potrebe zadošča paket, ki vključuje JavaScript in HTML 5, in kliknemo Dowload 64x. Prenos bi se moral začeti samodejno, sicer imamo na voljo ročno namestitev NetBeansa, in sicer s klikom na »Dowload it here«. Po končanem prenosu odpremo datoteko in moralo bi se pokazati pozdravno okno. Kliknemo naprej in označimo kvadratek, s katerim potrdimo, da sprejemo pogoje uporabe. Pritisnemo na gumb naprej in izberemo lokacijo, na katero želimo prenesti NetBeans. Po kliku za naprej bi se moralo odpreti okno, kjer lahko preverimo, če so na voljo posodobitve. Ko smo označili kvadratek, pritisnemo na gumb namesti. Ko se namestitev zaključi, lahko označimo kvadratek, kjer lahko pomagamo NetBeansu z objavljanjem anonimnih podatkov, nato kliknemo na gumb končaj. Ko smo zaključili namestitev, bi se na namizju morala pokazati ikona, s katero zaženemo NetBeans.



3.3. NAMESTITEV ECLIPSA Za namestitev Eclipsa najprej v brskalnik vtipkamo »dowload Eclipse« in kliknemo na prvo povezavo. Ko se odpre stran Eclipse, kliknemo na »Download 64 bit« in počakamo, da se datoteka prenese.

Slika 9: Prikaz prenosa Eclipsa Ko je datoteka prenesena, kliknemo na preneseno datoteko in odpreti bi se moralo novo okno. V prvem oknu izberemo, za kateri namen želimo uporabljati Eclipse, izberemo opcijo JavaScript, HTML… V naslednjem oknu izberemo, kam želimo namestiti Eclipse, in kliknemo na gumb »Install«. Ko zaženemo Eclipse se nam najprej pokaže okno, kjer lahko izberemo, kam bomo shranjevali naše datoteke, in kliknemo »OK«.

3.4. JAVASCRIPT V NETBEANSU Prva stvar, ki jo moramo narediti, ko odpremo Netbeans je, da v orodni vrstici kliknemo gumb »File« in izberemo opcijo »New project«. Po odprtju novega okna v spustnem seznamu izberemo opcijo »HTML5/JavaScript« in kliknemo na opcijo »HTML5/JS Application«. Kliknemo na gumb »Next«.



Slika 10: Okno novega projekta v Eclipsu Ko se nam prikaže novo okno, lahko spremenimo ime; v našem primeru »HelloWorld«, nato pritisnemo gumb »Next«. V naslednjem oknu lahko izbiramo predloge (template) za našo aplikacijo, mi bomo izbrali brez predloge, »No site template«, nato pritisnemo na gumb naprej. V naslednjem oknu lahko izibiramo, kjer lahko obkljukamo, katere bližnjice nam NetBeans lahko sam naredi. Ko imamo obkljukane vse kvadratke, pritisnemo na gumb končaj. S tem smo ustvarili osnovno za izdelavo preprostih JavaScript in HTML. Prikaže se nam nov projekt s kodo. Najprej seveda hočemo spremeniti ime naše aplikacije. To storimo tako, da uredimo besedilo med besedama <title> in </title>, ime naše aplikacije bo Hello World. Če hočemo v naš HTML dokument vnašati elemente JavaScript moramo, najprej priklicati ukaz za izvajanje JavaScripta. To storimo tako, da pod kodo »body« dodamo novo vrstico <script>, ki jo moramo zaključiti s </script> (slika spodaj). Pod to kodo vpišemo vrstico »document.write("Pozdravljen svet!");«, da preizkusimo, če naša koda deluje.



Slika 11: Prikaz preproste JavaScript kode Najprej shranimo datoteko tako, da pod menijem »File« izberemo opcijo »Save as« in shranimo datoteko pod imenom HelloWorld. V meniju lahko tudi izberemo, s katerim brskalnikom želimo odpirati našo aplikacijo. To storimo tako, da v meniju pod zavihkom »Run« izberemo opcijo »Set Project Browser« in kliknemo na brskalnik. Ko kliknemo na gumb »Run project (HelloWorld)«, bi se v našem brskalniku moralo odpreti novo okno, v katerem vidimo naš napredek pri izdelavi aplikacije. Poženemo projekt s klikom na gumb »Run« in prikazati bi se moralo spodnje okno.

Slika 12: Prvi prikaz delujočega programa v brskalniku V naslednjem koraku bomo dodali nekaj bolj zapletenih elementov. Če denimo hočemo, da nam brskalnik pokaže besedilo s šumniki, moramo v glavo nad naslov napisati tole kodo:

<meta charset ="UTF-8"> Če hočemo, da bi bil naš naslov večji, moramo vpeljati spremenljivko, v katero dodamo naš naslov.

var text = "Pozdravljeni!"; document.write(text.big());

Za dodajanje presledkov med vrsticami lahko uporabimo kar HTMLjev »break« <br></br>



Naša koda bi sedaj morala izgledat, kot je prikazano spodaj.

Slika 13: Nadaljevanje pisanja kode Sedaj bomo naredili preprosto aplikacijo, ki bo spreminjala barvo ozadja glede na izbrano številko. Aplikacija deluje tako, da se po vnosu izbrane številke od 1 do 10 spremeni barva zaslona, saj ima vsaka številka določeno barvo (npr. številka 1 bo modra barva). Začeli bomo z vnosnim poljem, ki je preprosta koda:

<form name="form"> <input name="stevilka"> <input type="button" name="vrednost" value="Vredu" onclick="pozeni()"> </form> Najprej smo torej ustvarili obrazec z imenom form, ki nam dovoljuje dodajanje različnih elementov, kot so gumbi, vnosna polja itd. Najprej smo vnesli vnosno polje z imenom »stevilka«, nato pa še gumb z imenom »vrednost«, besedilo prikazano na gumbu bo »V redu«. Nato pa dodamo še funkcijo »onclick«, ki nam določa, kaj bo ta gumb izvedel. Funkcijo smo poimenovali »pozeni«. Sedaj bomo ponovno uporabili vrstico JavaScript in vnesli nekaj kode.



Slika 14: Dodajanje kode za menjavo barv Dodamo vrstico s funkcijo in ji dodelimo ime, ki smo ga prej uporabili pri gumbu, naša ima ime »pozeni«. Najprej torej želimo določiti, kaj bo naša funkcija naredila; najprej hočemo, da bo funkcija pobrala vrednost, ki bo napisana v vnosnem polju. To storimo z uporabo nove spremenljivke »stevilo«.

var stevilo = document.form.stevilka.value; Ko smo napisali kodo za pobiranje vrednosti, hočemo da funkcija primerja vrednost iz vnosnega polja z določeno vrednostjo, torej številko od 1 do 10. Za to bomo uporabili if stavke, kjer hočemo preveriti, če je spremenljivka »stevilo« enaka številu 1. Nato vpišemo še en if stavek skupaj s pojavnim oknom »confirm«. Če bomo torej vnos potrdili z »V redu«, se nam bo barva ozadja spremenila v modro.

document.bgColor="blue"; Nato dodamo še vrstico: else {}

Pomen te vrstice je, da če kliknemo »Prekliči«, se ne bo zgodilo nič in barva bo ostala nespremenjena. Na koncu dodamo še kodo, ki bo pobrisala vnosno polje.

document.form.stevilka.value = "";



Nadaljujemo s kodo »else if«. Ta koda bo izvršila drugo dejanje, če prvo ne ustreza pogojem(stevilo = 1), dodamo pa ji pogoj »stevilo == 2«. Če bomo torej vtipkali število 2, se bo ozadje spremenilo v rumeno barvno. Nadaljujemo z vnašanjem enake kode kot v prvem primeru, vse dokler nimamo postavljenih vseh 10 if(else if) stavkov. Na koncu dodamo še zadnji »else«, ki je povezan s prvim if stavkom.

Slika 15: Konec kode za menjavanje barv V ta else stavek bomo dodali okno, ki nas bo opozorilo, če slučajno nismo vtipkali prave vrednosti v vnosno polje. Nato zaključimo z uporabo JavaScripta in končamo s program. Shranimo datoteko in poženemo program.

Slika 16: Prikaz delovanja programa v Internet Explorerju



3.5. JAVASCRIPT V ECLIPSU Za začetek bomo ustvarili nov projekt. To naredimo tako, da v orodni vrstici kliknemo gumb »File« in v spustnem oknu »New« in »Project«. Ko se nam odpre novo okno, se pomaknemo na zavihek »Web«, v katerem izberemo »Static Web Project« in kliknemo na gumb naprej. V naslednjem koraku določimo ime, ki ga želimo imeti, in kliknemo »Finish«. S tem smo ustvarili nov projekt v Eclipsu.

Slika 17: Izdelava novega projekta v Eclipsu Nato se bomo lotili izdelave datoteke HTML. Najprej se pomaknemo v levo, kjer je prikazan naš projekt, in z desnim klikom pritisnemo nanj. Kliknemo na »New« in »HTML File«. Datoteki HTML dodelimo še ime, v našem primeru »HelloWorld.html«, in kliknemo na gumb »Finish«.



Slika 18: Poimenovanje našega projekta Ko imamo datoteko HTML, se lahko lotimo urejanja le-te. Najprej ji bomo spremenili naslov, in sicer v oznake za naslov vnesemo ime, ki se bo prikazovalo v brskalniku, to je »Hello World«. Da preizkusimo, če naša datoteka deluje, moramo najprej shraniti vse datoteke, to storimo s klikom na gumb »Save All« v orodni vrstici. Ko so datoteke shranjene, kliknemo na gumb »Run« v orodni vrstici in določimo strežnik. Ko se odpre okno za izbiro strežnika, že izbranega strežnika ne spreminjamo in kliknemo dokončaj. V Eclipsu se nam odpre brskalnik, ki nam prikaže našo aplikacijo, seveda je ta še prazna. Koda je v obeh orodjih enaka, zato jo lahko kopiramo in prilepimo v obe orodji.



Slika 19: Prikaz programa v IDEju Aplikacija je s tem zaključena, da pa jo lahko vidimo v privzetem brskalniku, lahko kopiramo URL na vrhu okna in ga prilepimo v naš privzeti brskalnik.

3.6. HIBRIDNA MOBILNA APLIKACIJA V JAVASCRIPTU Hibridne aplikacije za mobilne naprave so kot vse druge aplikacije, ki jih najdete v pametnem telefonu. Lahko jih najdete v trgovinah z aplikacijami, z njimi lahko igrate igre, sodelujete s prijatelji prek družabnih medijev, fotografirate, spremljate svoje zdravje itd. Hibridne mobilne aplikacije so podobno kot spletne strani na spletu zgrajene s kombinacijo spletnih tehnologij, kot so HTML, CSS in JavaScript. Ključna razlika je v tem, da se hibridne aplikacije gostijo znotraj “domače” aplikacije, ki uporablja spletno platformo mobilne platforme (WebView si lahko zamislite kot okno brskalnika, ki je navadno konfigurirano za zagon celotnega zaslona). To jim omogoča dostop do zmogljivosti naprave, kot so merilnik pospeška, kamera, stiki in drugo. To so zmogljivosti, ki so pogosto omejene na dostop iz notranjih mobilnih brskalnikov. Poleg tega lahko hibridne mobilne aplikacije vključujejo lokalne uporabniške elemente v situacijah, kjer je to potrebno, kar dokazuje Basecampov pristop k razvoju hibridnih aplikacij za mobilne naprave. (prevedeno iz: http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/) Za izdelavo in urejanje hibridnih mobilnih aplikacij moramo namestiti:

Node.js, ki je stržniška rešitev za JavaScript, ki kliče vmesnike za namensko programiranje (API),

Git, ki se ga uporablja za upravljanje z izvorno kodo, ter

Android SDK in Cordovo, katera s pomočjo “domačih” vtičnikov dostopa do JavaScripta.

Začnemo z namestitvijo Node.jsa; v brskalniku vpišemo »download Node.js«, kliknemo na prvi link in odpreti bi se nam morala naslednja stran:



Slika 20: Spletna stran Node.jsa Nato kliknemo na verzijo »Windows Installer(.msi)« in v polje »64-bit«, da sprožimo prenos datoteke. Ko je prenos zaključen, kliknemo na datoteko in sledimo nastavitvenemu postopku. V naslednjem koraku kliknemo okence, da se strinjamo z uporabo, in nadaljujemo. Določimo, kam hočemo shraniti node.js. Kliknemo naprej in dokončamo nameščanje. Da preverimo, ali smo pravilno namestili Node.js, zaženemo ukazno okno (CMD) in vtipkamo ukaz »node --version«. Če se nam pokaže verzija Node.js, smo nameščanje pravilno izvedli. Nadaljujemo z namestitivijo Gita. V brskalnik vtipkamo »Git download«, odpremo prvo stran in kliknemo na gumb »Dowload for Windows«. Odpre se nova spletna stran in prenos datoteke se začne.



Slika 21: Spletna stran Gita Po končanem prenosu odpremo datoteko in kliknemo naprej, v drugem oknu določimo, katere koponente želimo namestiti, in kliknemo naprej. V naslednjem oknu imamo na volj tri izbire, označimo polje, ki omogoča uporabo Gita iz Command Propmpta, in kliknemo naprej. Naslednje okno nam omogoča izbiro končanja tekstovnih vrstic. Izberemo prvo opcijo in kliknemo naprej. V naslednjem koraku bomo izbrali standardno windowsovo konzolno okno, kliknemo na drugo opcijo in nato naprej. V naslednjem oknu označimo obe polji in končamo s klikom na gumb namesti. Da preverimo, če smo pravilno namestili Git, v Command Promptu vtipkamo ukazno vrstico »git --version«, v kolikor nam pokaže verzijo Gita, smo namestitev pravilno izvedli. Nadaljujemo z namestitvijo Android SDK (Android Software Development Kit). V brskalnik vpišemo »dowload Android SDK«, kliknemo na prvo izbiro, ki nam ponuja namestitev Android Studia skupaj z Android SDKjem.

Slika 22: Prikaz prenosa Android SDKja



Najprej pomaknemo miško navzdol, kjer vidimo različne namestitvene opcije, izbiramo samo Android SDK in sicer opcijo Windowsa in opcijo .exe, ne .zip. Kliknemo na povezavo, potrdimo, da se strinjamo s pogoji uporabe, in prenesemo datoteko. Ko je datoteka prenešena, kliknemo nanjo in pritisnemo na gumb naprej. Izberemo, ali hočemo, da se program namesti samo za nas ali za ves računalnik, in kliknemo naprej. V naslednjem koraku izberemo, kam želimo namestiti Android SDK, in kliknemo naprej. Ko pridemo do zadnjega okna, kliknemo na gumb za namestitev. Ko je namestitev končana, Android SDK Managerja še ne odpremo, saj se tako lahko izognemo nekaj težavam. Sedaj moramo prenesti samo še Cordovo. To storimo tako, da v windowsovem začetnem meniju za iskanje programov vtipkamo »cmd«(Command Prompt) in ga poženemo. V Command Proptu vtipkamo vrstico »npm install –g cordova« in pritisnemo enter.

Slika 23: Namestitev Cordove Ko se koda izvrši bi se moralo pokazati podobno okno:

Da preverimo, če smo uspešno namestili Cordovo, vtipkamo v Command Prompt »cordova -version«, pokazati bi se moralo, katero verzijo programa imamo prenešeno. Sedaj je na vrsti korak, v katerem zaženemo Android SDK. Najprej gremo v naš računalnik in poiščemo prenešeni Android SDK. Ko najdemo mapo, moramo poiskati datoteko »SDK Manager« in ga z desnim klikom zaženemo kot skrbnik. S tem se izognemo težavam pri namestitvi nekaterih paketov. Ko se SDK Manager odpre, označimo polja »Tools«, »Tools(preview Channel)«, »Android 7.0(API24)«, »Android 6.0(API13)«; »Android 4.1.2(API16)« in »Extras« ter kliknemo »Install x packages«. Ko se paketi namestijo, zapremo SDK Managerja.

Slika 24: Preverjanje verzije Cordove



Slika 25: Android emulator Starejšo verzijo smo namestili zato, ker je hitrejša za prenos in tudi bolj odzivna. Če želimo prenesti novejšo verzijo, zgolj označimo, katero verzijo želimo prenesti, in kliknemo Namesti pakete. Preden nadaljujemo, moramo še nastaviti spremenljivke okolja. Na nadzorni plošči kliknemo na Sistem, Dodatne nastavitve sistema in Spremenljivke okolja. Najprej preverimo, če imamo nastavljene vse potrebne spremenljivke, najprej poiščemo »Path« pod sistemskimi spremenljivkami, kliknemo uredi in preverimo, če imamo določene poti do JREja, JDKja, Node.jsa in Gita. Če katere od teh poti še nimamo določene, moramo z raziskovalcem poiskati datoteko, kateri želimo določiti pot, prekopirati pot in jo dodati v »Path«. Preverimo še »Path« v uporabniških spremenljivkah s klikom na »Uredi« in preverimo če imamo navedeno spremenljivko:

C:\Users\Ziga\AppData\Roaming\npm Če imamo definirano to spremenljivko z razliko imena(Ziga) potem imamo pot urejeno.



Slika 26: Nastavitev poti za Git Ko imamo urejeno spremenljivko »Path«, moramo določiti še dve novi spremenljivki, ki sta »JAVA_HOME« in »ANDROID_HOME«. Najprej moramo ustvariti novo sistemsko spremenljivko tako, da kliknemo na gumb »Nova«, ji dodelimo ime »JAVA_HOME« in prekopiramo pot, ki vodi do javinega JDKja.

Slika 27: Nastavitev poti za JDK Enako izvedemo še za drugo spremnljivko, le da ji damo ime »ANDROID_HOME« in kopiramo pot do Android SDKja.

Slika 28: Nastavitev poti za Android SDK

3.7. NAMESTITEV NETBEANSA ZA UPORABO HIBRIDNIH APLIKACIJ Ko imamo spremnljivke okolja urejene, moramo urediti še NetBeans, da bo deloval na JDK in ne na prednastavljenem JRE. To naredimo tako, da se pomaknemo na mapo, v katero smo namestili NetBeans, in vstopimo v mapo. Naprej kliknemo mapo »etc« in uredimo datoteko »netbeans.conf«, najlažje kar z beležnico. Spremeniti moramo del kode, ki usmerja NetBeans na uporabo JREja. Kopiramo pot do JDKja in spremenimo kodo, kot kaže spodnja slika (koda za zamenjavo je v sredini zadnje vrstice), tako da bo na koncu NetBeans uporabljal JDK in ne JRE. Po končanem urejanju datoteko shranimo.



Slika 29: Urejanje tekstovne datoteke v NetBeansu Če prihaja do težav pri urejanju, moramo mapo narediti dostopno. To naredimo tako, da z desnim klikom izberemo Lastnosti, se pomaknemo na zavihek Varnost in dovolimo vsem skupinam in uporabnikom poln nadzor, s klikom na gumb Uredi označimo vse kvadratke in potrdimo vnose.

Slika 30: Urejanje nadzora v NetBeansu



3.8. HIBRIDNE MOBILNE APLIKACIJE V NETBEANSU Sedaj smo pripravljeni na uporabo NetBeansa. Če ga prej še nismo zaprli, ga moramo sedaj ponovno zagnati, tako se namestijo vsi moduli. Ustvarili bomo nov HTML5 oz. JavaScript projekt, kjer kliknemo na »Cordova Application« in na gumb »Next«. V naslednjem oknu določimo ime naše aplikacije, v našem primeru »PozdravljenSvet«. Nato lahko še spremenimo lokacijo, v katero bo projekt shranjen, in kliknemo na gumb »Finish«.

Slika 31: Ustvarjanje novega JavaScript projekta

Ko je nov projekt ustvarjen, se pomaknemo pod njega, v mapo »Site Root«, kjer bi se morala nahajati datoteka »index.html«.

Slika 32: Prikaz strukture projekta Sedaj lahko spreminjamo kodo v tej datoteki. Najprej izbrišemo vso kodo, ki je komentirana(med , obarvana sivo). Nato v glavi izbrišemo kodo: <link rel="stylesheet" type="text/css" href="css/index.css">. S tem smo izbrisali prednastavljene predloge. Izbrišemo tudi vso kodo v telesu datoteke, pustimo le ti dve vrstici.

Slika 33: Prikaz uporabljene kode



Sedaj lahko prekopiramo kodo iz prejšnjega projekta »HelloWorld«, ki smo jo že izdelali. Ko smo kodo prekopirali, bi naš zaslon moral izgledati, kot je prikazano spodaj.

Slika 34: Zagon našega programa Če smo kodo pravilno uredili, lahko preverimo na način, da v oknu za pogon aplikacije izberemo brskalnik in kliknemo »Run«. Če se koda ustrezno prikaže, je aplikacija pravilno urejena. Ko imamo vso kodo pripravljeno, moramo NetBeansu pokazati še, kje se nahaja naš Android SDK. To storimo tako, da v orodni vrstici poiščemo Orodja in v spustnem seznamu izberemo »Options«. Ko se nam odpre novo okno, se moramo pomakniti v zavihek »HTML/JS« in v tem zavihku na »Mobile Platforms«. Zraven polja »Android SDK Location« kliknemo na gumb »Browse« in poiščemo mesto, kjer smo namestili Android SDK. To okno nam tudi prikazuje verzijo nameščene Cordove.



Slika 35: Urejanje nastavitev Sedaj smo skoraj pripravljeni na zagon našega programa, prej moramo le še ustvariti simulacijo android naprave, v kateri bo program deloval. Premaknemo se v našo mapo, kjer smo shranili Android SDK, in kliknemo na datoteko »AVD Manager«. Lahko izberemo tudi drugo možnost, da kliknemo na Android SDK Manager in v orodni vrstici kliknemo na »Tools« in »Manage AVDs«.



Slika 36: Izbira Android emulatorja Odpre se novo okno (slika spodaj), kjer bomo oblikovali novo simulacijo androidne naprave. Kliknemo na gumb »Create«, kjer določimo ime naprave, v našem primeru bo ime »Telefon«, nato določimo napravo. Določili bomo Nexus 4, izberemo »Target« , ki bo Android 4.1.2(API16), »CPU« bo »ARM(armeabi-v7a)« in določimo »Skin« brez. Spremeniti moramo še RAM, in sicer na 768. Ko smo zapolnili vsa polja, kliknemo na gumb »OK«. V prejšnjem oknu pa kliknemo na gumb »Start«, da poženemo simulacijo androidne naprave.



Slika 37: Urejanje nastavitev emulatorja Nekaj časa moramo počakati, da se simulator naloži, med tem pa lahko v NetBeansu določimo še, da hočemo našo aplikacijo pognati na simulaciji. To storimo tako, da v zgornjem meniju spremenimo, s čim bo NetBeans pognal aplikacijo; prestavimo iz brskalnika na Corodovo(Android Simulator).



Slika 38: Izbira Cordove za emuliranje programa Ko se naš simulator zažene in je pripravljen v začetnem zaslonu, lahko našo aplikacijo poženemo s klikom na gumb »Run«.



Slika 39: Prikaz programa na Android emulatorju Čez nekaj časa se bo naša aplikacija naložila na simulator. S tem smo tudi zaključili našo izdelavo mobilne hibridne aplikacije.

3.9. HIBRIDNE MOBILNE APLIKACIJE V ECLIPSU Ko imamo urejene spremenljivke, lahko v Eclipsu naredimo nov projekt, le da tokrat v zavihku »Mobile« izberemo opcijo »Hybrid Mobile (Cordova) Application Project« in ji v naslednjem oknu dodelimo ime ter kliknemo na gumb Dokončaj.



Slika 40: Nov projekt v Eclipsu Ko smo naredili nov projekt, se pomaknemo na levi meni ter pod našim projektom izberemo podmapo »www« in v njej datoteko »index.html«. Ko odpremo datoteko »index.html«, jo lahko začnemo urejati. Sedaj lahko spreminjamo kodo v tej datoteki; najprej izbrišemo vso kodo, ki je komentirana (med , obarvana sivo). Nato v glavi izbrišemo kodo: <link rel="stylesheet" type="text/css" href="css/index.css">. S tem smo izbrisali prednastavljene predloge. Izbrišemo tudi vso kodo v telesu datoteke, pustimo le ti dve vrstici.

Slika 41: Prikaz kode za dostop do Cordove



Sedaj lahko prekopiramo kodo iz prejšnjega projekta »HelloWorld«, ki smo je že naredili. Ko smo kodo prekopirali, bi naš zaslon moral izgledati kot na spodnji sliki.

Slika 42: Zagon emulatorja Ko smo napisali in uredili kodo, lahko v orodni vrstici poženemo projekt s klikom na gumb »Run«. Eclipse bo zahteval, da prej še lociramo naš SDK, v oknu kliknemo na gumb »Browse« in poiščemo lokacijo našega SDKja, nato kliknemo Naprej. Določiti bo potrebno še naš android simulator. Eclipse podpira verzijo od 4.1.2(API16) naprej, zato bomo ustvarili simulacijo te verzije. V AVD Managerju kliknemo na gumb »Create«, naši napravi bomo dali ime »Telefon1«, naprava bo Nexus 4, tarča bo »Android 4.1.2 - API Level 16«, »CPU« bo »ARM(armeabi-v7a)« in določimo »Skin« brez . Spremeniti moramo še RAM, in sicer na 768. Ko smo zapolnili vsa polja, kliknemo na gumb »OK«.



Slika 43: Prikaz nastavitev emulatorja Ko smo še enkrat zagnali aplikacijo, bi nam Eclipse moral ponuditi izbor, kako želi pognati aplikacijo. Izberemo opcijo »Run on Android Emulator« in kliknemo na gumb »OK«.



Slika 44: Izbira nalaganja programa Eclipse bi nam po tem moral avtomatsko zagnati simulacijo androida in pognati našo aplikacijo.



Slika 45: Prikaz končnega programa



4. ZAKLJUČKI 4.1. OCENA UČINKOV Po programiranju v orodjih NetBeans in Eclipse lahko pri obeh orodjih najdemo nekaj slabih in dobrih lastnosti. Obe orodji pa sta se izkazali za solidno izbiro pri programiranju JavaScript aplikacij, kot tudi mobilnih hibridnih aplikacij:

Eclipse v računalniku ne zavzame veliko prostora, je preprost za namestitev in hiter za prenos, kar je velika prednost, saj smo omejeni s časom.

Ne potrebujemo nobenih posebnih prednastavitev in urejanja kot pri NetBeansu. Preprosto zaženemo program, naredimo nov ali pa odpremo star projekt in že lahko pričnemo z delom.

Prednost je tudi ta, da v stranskem oknu lahko vidimo vse ostale projekte, razrede itd.

Pri pisanju kode nam pomaga program, popravki so preprosti, saj nam jih ponudi že orodje, poleg tega pa je razhroščevanje hitro.

Preprosto je tudi zagnati projekte, v orodni vrstici imamo gumb, ki nam pokaže, kje hočemo zagnati projekt (brskalnik, v orodju, emulator…)

Dokaj preprosta uporaba pri mobilnih hibridnih aplikacijah, emulator nam sam naloži emulirani telefon po nastavitvah in specifikacijah.

V primerjavi z Eclipsom NetBeans potrebuje nekaj več časa za nastavitev in delovanje, saj vsebuje več knjižnic, predlog in primerov.

Slabost NetBeansa, verzije 8.1, se pokaže pri programiranju in zagonu hibridnih mobilnih aplikacij, saj je za delovanje v sistemskih datotekah potrebno prednastaviti, da NetBeans uporablja JDK in ne JRE.

Tako kot v Eclipsu lahko tudi v NetBeansu vidimo v stranskem oknu odprte projekte in razrede, kar nam olajša delo.

Pri pisanju nam program pomaga s popravki kode in avtomatskim dokončanjem kode.

Razhroščevanje je počasnejše kot pri Eclispu, napake pa lahko vidimo v posebnem oknu.

Pri emuliranju aplikacij za mobilne telefone je potrebna prednastavitev emulatorja, emuliranje naprave pa traja nekaj minut.

Čeprav sta oba dokaj preprosta za uporabo in imata velik obseg uporabe, je na voljo še veliko različnih orodij za programiranje v jeziku JavaScript, ki se lahko fokusirajo na spletno programiranje, kot so nadgrajeni urejevalniki besedil, lahko



pa se uporabljajo tudi za programiranje v drugih jezikih. Na koncu pa je odločitev naša, ali raje uporabljamo preprostejša ali pa bolj kompleksna in dovršena orodja za programiranje.

4.2. POGOJI ZA UVEDBO Posebnih pogojev za uvajanje navedenih rešitev pri predmetu Javascript ni. Glede tehničnih sredstev moramo biti le pazljivi, da so računalniki dovolj zmogljivi, da lahko poganjajo orodja, kot so Eclipse in ostala. Iz finančnega vidika posebnih stroškov ni. Ti bi nastali, če bi želeli kupiti profesionalne programe, kot je microsoftov Visual studio, vendar ta za začetke programiranja ni potreben. Pri namestitvi je potrebnega nekaj dela in previdnosti, kar oteži uporabo na domačih računalnikih študentov. Potrebno je tudi ustrezno znanje profesorjev, ki bodo poučevali predmete.

4.3. MOŽNOSTI NADALJNJEGA RAZVOJA Na fakulteti se kaže trend za poglobljeno poznavanje spletnega programiranja, kar vključuje tudi JavaScript. Zanimanje je tako s strani študentov kot tudi s strani profesorjev. S poglobljenim znanjem JavaScripta pa je možen razvoj bolj zapletenih hibridnih mobilnih aplikacij, spletnih strani itd. Z dovoljšnim znanjem pa lahko s pomočjo razredov in instanc, razvijamo shranjevanje in osveževanje na straneh, lovljenje napak ter posebnosti in dodajanje razširitev, kot so Canvas, Node.js, JS Apps, BackboneJS in AngularJS.



LITERATURA IN VIRI Borut Breščak.(b.l.). Zgodovina. Pridobljeno 22.4.2017 na http://www.s-sers.mb.edus.si/gradiva/rac/drugo/javascript/01_mapa/zgo.html Colos1. (b.l.). Programiranje v integriranem razvojnem okolju (IDE). Pridobljeno 3.5.2017 na http://colos1.fri.uni-lj.si/ERI/RACUNALNISTVO/PROG_JEZIKI_ORODJA/prog_ide.html John Bristowe. (2015). What is a Hybrid Mobile App?. Pridobljeno 15.3.2017 na http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ Martin Heller. (2014). Review: 10 JavaScript editors and IDEs put to the test. Pridobljeno 25.4.2017 na http://www.javaworld.com/article/2094847/enterprise-java/review-10-javascript-editors-and-ides-put-to-the-test.html Oracle Corporation. (2017). HTML5 - Getting Started with Cordova Development. Pridobljeno 13.3.2017 na https://netbeans.org/kb/docs/web/html5-cordova-screencast.html Taylor Hawkes. (2015). ANDROID STUDIO + PHONEGAP + MAC – “HELLO WORLD” ANDROID APP (FROM HTML/CSS/JAVASCRIPT). Pridobljeno 15.3.2017 na https://www.ringroost.com/blog/android-studio-phonegap-mac-hello-world-android-app-html-css-javascript/ Unitiy Technologies. (2016). STANDALONE HARDWARE STATS 2017-03. Pridobljeno 5.5.2017 na http://hwstats.unity3d.com/pc/ Univerza v Ljubljani. (b.l.). Razvoj programov v okolju Eclipse. Pridobljeno 5.5.2017 na http://hpc.fs.uni-lj.si/eclipse Wikipedija. (2017). JavaScript. Pridobljeno 18.3.2017 na https://sl.wikipedia.org/wiki/javascript Zavrsnik. (b.l.). Programski jezik JavaScript. Pridobljeno 3.5.2017 na http://zaversnik.fmf.uni-lj.si/gradiva/javascript



PRILOGE Priloga 1 – koda uporabljena za delovanje programa.

KAZALO SLIK Slika 1: Prikaz nekaj funkcij IDEja...........................................................4 Slika 2: Prikaz nekaj opozoril v IDEju.......................................................5 Slika 3: Spletna stran Oracla (Java).........................................................7 Slika 4: Urejanje sistemskih spremenljivk.................................................8 Slika 5: Tipkanje ukaza java.................................................................8 Slika 6: Tipkanje ukaza javac................................................................8 Slika 7: Prikaz nastavitev sistema...........................................................9 Slika 8: Spletna stran NetBeansa in izbira prenosa......................................10 Slika 9: Prikaz prenosa Eclipsa..............................................................11 Slika 10: Okno novega projekta v Eclipsu.................................................12 Slika 11: Prikaz preproste JavaScript kode............................................... 13 Slika 12: Prvi prikaz delujočega programa v brskalniku................................13 Slika 13: Nadaljevanje pisanja kode.......................................................14 Slika 14: Dodajanje kode za menjavo barv...............................................15 Slika 15: Konec kode za menjavanje barv................................................16 Slika 16: Prikaz delovanja programa v Internet Explorerju............................16 Slika 17: Izdelava novega projekta v Eclipsu.............................................17 Slika 18: Poimenovanje našega projekta..................................................18 Slika 19: Prikaz programa v IDEju..........................................................19 Slika 20: Spletna stran Node.jsa...........................................................20 Slika 21: Spletna stran Gita.................................................................21 Slika 22: Prikaz prenosa Android SDKja...................................................21 Slika 23: Namestitev Cordove............................................................... 22 Slika 24: Preverjanje verzije Cordove..................................................... 22 Slika 25: Android emulator.................................................................. 23 Slika 26: Nastavitev poti za Git.............................................................24 Slika 27: Nastavitev poti za JDK............................................................ 24 Slika 28: Nastavitev poti za Android SDK..................................................24 Slika 29: Urejanje tekstovne datoteke v NetBeansu....................................25 Slika 30: Urejanje nadzora v NetBeansu..................................................25 Slika 31: Ustvarjanje novega JavaScript projekta.......................................26 Slika 32: Prikaz strukture projekta........................................................26 Slika 33: Prikaz uporabljene kode.........................................................26 Slika 34: Zagon našega programa..........................................................27 Slika 35: Urejanje nastavitev...............................................................28 Slika 36: Izbira Android emulatorja........................................................29 Slika 37: Urejanje nastavitev emulatorja.................................................30 Slika 38: Izbira Cordove za emuliranje programa........................................31 Slika 39: Prikaz programa na Android emulatorju....................................... 32 Slika 40: Nov projekt v Eclipsu.............................................................33 Slika 41: Prikaz kode za dostop do Cordove..............................................33 Slika 42: Zagon emulatorja..................................................................34 Slika 43: Prikaz nastavitev emulatorja....................................................35 Slika 44: Izbira nalaganja programa....................................................... 36 Slika 45: Prikaz končnega programa....................................................... 37



POJMOVNIK Razhroščevalnik: orodje za preverjanje in odpravljanje napak.

KRATICE IN AKRONIMI CSS: Cascading Style Sheet: kaskadne datoteke s slogi HTML: Hyper Text Markup Language: jezik za označevanje nadbesedila PHP: PHP: Hypertext Preprocessor: Skriptni programski jezik PHP API: Application Programming Interface: aplikacijski programski vmesnik AVD: Android Virtual Device: Android virtualna naprava CMD: Command Prompt: ukazni poziv CPU: Central Processing Unit: centralna procesna enota GIT: VCS-Version Control System: sistem za nadzor različic IDE: Integrated Development Environment: integrirano razvojno okolje JDK: Java Development Kit: orodja za razvijanje javanskih aplikacij JRE: Java Runtime Environment: okolje v katerem delujejo Java programi SDK: Software Development Kit: orodja za razvijanje aplikacij UI: User Interface: uporabniški vmesnik UNIX: Prenosljiv večopravilni večuporabniški računalniški operacijski sistem URL: Uniform Resource Locator: enotni iskalec virov WWW: World Wide Web: svetovni splet, internet


Priloga diplome: Žiga Čadež, Predstavitev in analiza orodij za predmet JavaScript

PRILOGA: DEMONSTRACIJSKA KODA <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <script> var text = "Pozdravljeni!"; document.write(text.big()); </script> <br> </br> <script> document.write("Prosim vtipakajte številk od 1 do 10 če želiti spremeniti barvo, vsaka številka predstavlja določeno barvo."); </script> <br></br> <form name="form"> <input name="stevilka"> <input type="button" name="vrednost" value="V redu" onclick="pozeni()"> </form> <script> function pozeni() { var stevilo = document.form.stevilka.value; if (stevilo == 1) { if(confirm("Izbrali ste barvo: modro\n\ Ali želite zamnjati ozadje v modro?")){ document.bgColor="blue";} else {} document.form.stevilka.value = ""; } else if (stevilo == 2) { if(confirm("Izbrali ste barvo: rumeno\n\ Ali želite zamnjati ozadje v rumeno?")) document.bgColor="yellow"; else {} document.form.stevilka.value = ""; } else if (stevilo == 3) {



if(confirm("Izbrali ste barvo: zeleno\n\ Ali želite zamnjati ozadje v zeleno?")) document.bgColor="green"; else {} document.form.stevilka.value = ""; } else if (stevilo == 4) { if(confirm("Izbrali ste barvo: oranžno\n\ Ali želite zamnjati ozadje v oranžno?")) document.bgColor="orange"; else {} document.form.stevilka.value = ""; } else if (stevilo == 5) { if(confirm("Izbrali ste barvo: rdečo\n\ Ali želite zamnjati ozadje v rdečo?")) document.bgColor="red"; else {} document.form.stevilka.value = ""; } else if (stevilo == 6) { if(confirm("Izbrali ste barvo: sivo\n\ Ali želite zamnjati ozadje v sivo?")) document.bgColor="gray"; else {} document.form.stevilka.value = ""; } else if (stevilo == 7) { if(confirm("Izbrali ste barvo: svetlo modro\n\ Ali želite zamnjati ozadje v svetlo modro?")) document.bgColor="skyBlue"; else {} document.form.stevilka.value = ""; } else if (stevilo == 8) { if(confirm("Izbrali ste barvo: vijolčno\n\ Ali želite zamnjati ozadje v vijolčno?")) document.bgColor="violet"; else {} document.form.stevilka.value = ""; } else if (stevilo == 9) { if(confirm("Izbrali ste barvo: svetlo zeleno\n\ Ali želite zamnjati ozadje v svetlo zeleno?")) document.bgColor="lightGreen"; else {} document.form.stevilka.value = ""; } else if (stevilo == 10) {



if(confirm("Izbrali ste barvo: roza\n\ Ali želite zamnjati ozadje v roza?")) document.bgColor="pink"; else {} document.form.stevilka.value = ""; } else { alert("Prosim vtipkajte številk od 1 do 10!"); } } </script> </body> </html>

Documents

PREDSTAVITEV IN ANALIZA ORODIJ ZA PREDMET JAVASCRIPT · JavaScript ni isto kot Java, čeprav si z Javo deli nekaj podobnosti, kot so lastnosti in strukture, oba pa imata nekaj skupnih