Practical application of JavaScript

Once, I faced the situation to make a choice in my life, picking the direction in programming. I have chosen web development. I was a bit familiar with HTML and CSS, but I wasn’t familiar with JavaScript at all. Thus, I started writing a simple test site, limited to static pages, after a couple of days of working on my project I needed an image gallery and pagination.

I began to google, search for any information on how to implement a new task, a lot of information, examples of someone else’s code, even managed to blind something from other people’s examples, but understanding didn’t come …

I stopped working on the site and started reading the documentation and code examples on js, later I returned to the project for a week, and began to write on the basis of the knowledge gained, then, during the manipulation of page elements on a real project, a clear understanding of what was happening appeared. Immediately I will warn this is the most common bike because before taking on the same jQuery, I wanted to get acquainted with the origins.

Below I will show my gallery and paginator respectively. Under the code I will talk about (implementation logic) what is happening, in the hope that this simple example for me at the moment will help many who want to get acquainted with JS. But I strongly recommend that to read about the influence of JS on the page elements and basic auxiliary constructions before moving to the following examples.

Here is what I received in the end:

Now I will tell you what happened in the above example:

– I create two counters, the first-idx monitors the image in the array with images, to know which one we stopped at and from which image to start generating the next gallery page. The second-count is needed to generate the required number of paginator buttons numbered, equal to all gallery pages depending on the total number of image file names in the pictures array.

– In window.onload I add everything that happens when the HTML page is fully loaded. I hang on the buttons for switching pages, functions that will be triggered by an event – pressing a button.

– I initialize two image generation functions-addImagesToPaginator () on the first page of the gallery and the buttons-getNumericButtons () equal to the total number of gallery pages.

Now, let’s discuss the following logic chain functionality:

-handler() is a function that is responsible for flipping pages with arrows forward and backward.



-addImagesToPaginator()  is a function that adds images to the page



-removeImagesFromPaginator() - removes all images from the page. This will be needed when the user accesses the previous page to generate elements from the previous page on the current page, controls the elements of the idx variable, as I already wrote.



-getNextPage() and getPreviousPage() - runs on the next and previous page access event.



-getQuantityPagesOfPaginator() returns the total number of gallery pages, this is necessary to generate page navigation buttons.



-getNumericButtons() generates those paginator navigation buttons.



-getActionForNumericButtons() controls the actions of the numbered buttons.

Thank you for your attention, wish you all a good time.