Javascript-komponenttien testaus ja havainnointi

Abstract

Javascript on Internetin käytetyin ohjelmointikieli, ja sen päälle on rakennettu useita eri kirjastoja, joilla laajentaa Javascriptin käyttöliittymää. Tämä opinnäytetyö käsittelee Javascriptia ja React-kirjastoa, ja niiden hyödyntämistä verkkosivupalvelun käyttöliittymän suunnittelussa. Tämän opinnäytetyön teoriaosuus käsittelee Javascriptin toimintatapaa ja sen roolia verkkosivun ohjelmoinnissa, sekä React-kirjastoa ja sen perusteita. Lisäksi teoriaosuudessa käsitellään dokumentin oliomallia ja sen ominaisuuksia, Reactin tilallisia ja tilattomia komponentteja sekä Front End-verkkokehitystä.

Työn käytännönosuudessa käsitellään Reactin ominaisuuksia, ja yksinkertaista käyttöliittymäesimerkkiä hyödyntämällä kehitetään asianmukainen verkkokauppasovellus. Tämän työn tarkoituksena on luoda helppokäyttöinen verkkosivusto, josta löytyy kolme eri Reactilla kehitettyä toimintoa, sekä näyttää esimerkki yksinkertaisesta, mutta silti monipuolisestä käyttöliittymästä. Käytännönosuus on kehitetty Notepad++-ohjelmalla, ja sillä on kehitetty HTML, CSS ja JS-tiedostoja.

Javascriptis the most used programming language in Internet, and several libraries have been built on top of it, that help to extendJavascript’s User Interface. This workprocesses Javascript and React-library, and how they can be utilized in the user interface of a web service. This work contains a theory section, that talks about Javascript’s mode of operation and it’s role in web development, as well as React-library and it’s basic operations. The theory section also handles Document Object Model andit’s features, React’s stateless and statefulcomponents as well as Front End development.

This work also contains a practice section, wherea proper online store program is developedby taking advantage of React’s features and a simple user interface examples. This work’s purpose is to create an user-friendly website, where three different React-developed functions can be found, as well as show example of a simple yet diverse user interface.Practice section has been developed by using Notepad++ software, and it has been used to program HTML, CSS and JS-files.