Zabawa z scrollem w czystym JS

Question

Witam

Ostatnio przeglądając kanał Samuraj Programowania natrafiłem na film pt "Skrolowanie strony a efekty i animacje - Kurs FEZ - bonus 14" - postanowiłem stworzyć coś na wzór tego co jest pokazane na filmie jednak z wykorzystaniem tylko i wyłącznie JS efekt mojej pracy - czy jest to logiczny i poprawny tok myślenia? Czy może jednak istnieją lepsze, bardziej wydajne sposoby na osiągnięcie takiego efektu tylko i wyłącznie w JS?

- Dlaczego tylko JS bez JQuery?

- Ponieważ dopiero zaczynam uczyć się JS i nie chce od razu zaczynać JQuery bez zrozumienia JS'a

Pozdrawiam

 

 

Answer 1

1. Każde wyrażenie powinno kończyć się średnikiem. Przy czym JS posiada mechanizm automatycznego wstawiania średnika, więc w wielu sytuacjach można uniknąć ręcznego wstawiana tego znaku, ale wtedy trzeba przestrzegać paru reguł, aby interpreter/kompilator JS przetworzył wszystko poprawnie.
2. Pamiętaj o słowie kluczowym `const` lub odpowiednio `let` przy deklaracji zmiennej.
3. Nie musisz pobierać elementów wewnątrz funkcji, przy każdym jej wywołaniu, może umieścić odpowiednie zmienne w zakresie całego pliku
4. Funkcja `change()` jest odpowiedzialna za stworzenie animacji, więc warto użyć Window.requestAnimationFrame() przy jej wywoływaniu
5. Komentarze są ważne i przydatne, ale nie musisz komentować każdej linii kodu, oczywistych rzeczy, takich jak np. "//Tworzę funkcje change"
6. Zwróć uwagę na właściwe nazewnictwo zmiennych, np. "zmienna" nie jest dobrą nazwą zmiennej, bo nie mówi nic o jej przeznaczeniu

IMHO to, że ucząc się JS, piszesz w czystym JS zamiast JQuery jest godne pochwały, bo pozwala lepiej zrozumieć jak to wszystko działa od środka, a także daje solidne podstawy do dalszej nauki.

Przydatne artykuły:

Semicolons in JavaScript

ASI czyli automatyczne wstawianie średników

var, let, or const?

ES6 bez tajemnic. Słowa kluczowe let i const

request Animation Frame

 

Comments

Witam

Dziękuje za twój komentarz

Każde wyrażenie powinno kończyć się średnikiem (nie przecinkiem).

Czyli to co zrobiłem jest złe? Nie chciałem pisać cały czas const = nazwa_zmiennej, więc zrobiłem tak jak zrobiłem czyli napisałem jedno const potem nazwy zmiennych + to co do nich przypisuję i po ostatniej takiej zmiennej postawiłem ; - coś takiego jest dobre?

const scrollX = document.documentElement.scrollTop;
const nav = document.querySelector('.nav');
const heightImg = document.querySelector('.nav').offsetHeight;
const zmienne = scrollX/heightImg*1.5;

A takie już nie?

const scrollX = document.documentElement.scrollTop, 
   nav = document.querySelector('.nav'),
   heightImg = document.querySelector('.nav').offsetHeight,
   zmienne = scrollX/heightImg*1.5;

(tutaj piszę tylko raz const dzięki czemu jest mniej kodu)

Komentarze są ważne i przydatne, ale nie musisz komentować każdej linii kodu, oczywistych rzeczy, takich jak np. "//Tworzę funkcje change"

Tak dokładne komentowanie fakt faktem było niepotrzebne, ale chciałem aby kod był zrozumiały

Zwróć uwagę na właściwe nazewnictwo zmiennych, np. "zmienna" nie jest dobrą nazwą zmiennej, bo nie mówi nic o jej przeznaczeniu

Tak wiem że zmienne powinny być anglojęzyczne i opisywać ich zawartość - jednak nie miałem pomysłu na nazwę ani sił aby jakąś wymyślić - jednak przyznaję jest to błąd.

Jeszcze raz dziękuje i pozdrawiam

---

@Michał Bysiewicz

napisałem jedno const potem nazwy zmiennych + to co do nich przypisuję i po ostatniej takiej zmiennej postawiłem ;

Gdzieś mi umknął kontekst całości. Nie jest to złe podejście. Ma swoich zwolenników i przeciwników. Tak, jak sam słusznie zauważyłeś wykorzystując je piszemy mniej kodu. Natomiast stosując drugie podejście jest nam łatwiej wprowadzić zmiany (np. w kolejności zmiennych), bo każda deklaracja jest niezależna od pozostałych.

Declaring Multiple Variables in JavaScript (stackoverflow)