Jak po najechaniu na link zmienić kolor tła komórki w JavaScript

0
134
Rate this post

W dziedzinie projektowania stron internetowych, interaktywność jest jednym z najważniejszych elementów, który przyciąga uwagę użytkownika. Jednym z takich elementów interaktywności jest zmiana koloru tła komórki tabeli po najechaniu na link. Możemy to zrobić na kilka sposobów, ale w tym artykule skupimy się na rozwiązaniach z wykorzystaniem języka JavaScript.

Wykorzystanie zdarzeń mouseover i mouseout

Jednym z najprostszych sposobów na osiągnięcie tego efektu jest wykorzystanie JavaScriptowych zdarzeń mouseover i mouseout. W tym przypadku, po najechaniu myszą na link, kolor tła komórki zostanie zmieniony, a po zjechaniu myszą z linku, kolor wróci do stanu początkowego. Poniżej znajduje się przykładowy kod:

javascript
// Znalezienie elementów linku i komórki
const link = document.getElementById('myLink');
const cell = document.getElementById('myCell');

// Zmiana koloru tła komórki przy najechaniu myszą na link
link.addEventListener('mouseover', function() {
cell.style.backgroundColor = 'yellow';
});

// Powrót do oryginalnego koloru tła po zjechaniu myszą z linku
link.addEventListener('mouseout', function() {
cell.style.backgroundColor = 'white';
});

Wykorzystanie CSS w połączeniu z JavaScript

Oprócz czystego JavaScriptu, można również skorzystać z połączenia CSS i JavaScript. W tym przypadku, definiujemy klasę CSS, która określa kolor tła komórki, a następnie dodajemy lub usuwamy tę klasę przy użyciu JavaScript.

Kod CSS mógłby wyglądać tak:

css
.cell-highlight {
background-color: yellow;
}

A kod JavaScript:

javascript
const link = document.getElementById('myLink');
const cell = document.getElementById('myCell');

link.addEventListener('mouseover', function() {
cell.classList.add('cell-highlight');
});

link.addEventListener('mouseout', function() {
cell.classList.remove('cell-highlight');
});

Użycie jQuery dla uproszczenia

Jeżeli korzystasz z biblioteki jQuery, cały proces można jeszcze bardziej uprościć. Poniżej znajduje się przykładowy kod, który osiąga ten sam efekt:

javascript
$('#myLink').hover(
function() {
$('#myCell').css('background-color', 'yellow');
}, function() {
$('#myCell').css('background-color', 'white');
}
);

Zastosowanie delegacji zdarzeń

Jeśli masz wiele linków i komórek, których to dotyczy, możesz skorzystać z tzw. delegacji zdarzeń. Jest to technika, w której zamiast dodawać słuchacze zdarzeń do każdego elementu osobno, dodajesz je do ich wspólnego rodzica. Następnie, wewnątrz funkcji obsługi zdarzenia, sprawdzasz, który z elementów-dzieci wywołał to zdarzenie.

Przykładowy kod dla tego rozwiązania:

javascript
const table = document.getElementById('myTable');

table.addEventListener('mouseover', function(event) {
let target = event.target.closest('a');
if (!target) return;
let cell = target.closest('td');
if (!cell) return;

cell.style.backgroundColor = 'yellow';
});

table.addEventListener('mouseout', function(event) {
let target = event.target.closest('a');
if (!target) return;
let cell = target.closest('td');
if (!cell) return;

cell.style.backgroundColor = 'white';
});

Każde z tych podejść ma swoje zalety i wady, ale wszystkie są efektywne w osiągnięciu zamierzonego efektu. Wybór metody zależy od konkretnych potrzeb i kontekstu, w którym ma być ona zastosowana.

Zastosowanie w Frameworkach Front-End

Jeśli pracujesz z frameworkami front-end, takimi jak React czy Angular, mechanizmy zmiany koloru tła komórki po najechaniu na link będą nieco różniły się od tych stosowanych w czystym JavaScript.

React

W React możesz użyć mechanizmu stanu komponentu do przechowywania informacji o tym, czy kursor myszy jest nad linkiem. Oto przykład:

jsx
import React, { useState } from 'react';

function App() {
const [isHovered, setIsHovered] = useState(false);

return (
<div>
<a
onMouseOver={() =>
setIsHovered(true)}
onMouseOut={() => setIsHovered(false)}
>
My Link
</a>
<div style={{ backgroundColor: isHovered ? 'yellow' : 'white' }}>
My Cell
</div>
</div>

);
}

Angular

W przypadku Angulara możesz użyć dyrektyw takich jak (mouseover) i (mouseout) do obsługi zdarzeń, a właściwość [style.backgroundColor] do dynamicznej zmiany koloru tła. Przykład:

html
<a (mouseover)="isHovered=true" (mouseout)="isHovered=false">My Link</a>
<div [style.backgroundColor]="isHovered ? 'yellow' : 'white'">My Cell</div>
typescript
export class AppComponent {
isHovered = false;
}

Optymalizacja wydajności

Jeżeli pracujesz z dużą ilością elementów, z którymi chcesz interaktywować w ten sposób, zastanów się nad optymalizacją. Manipulowanie DOM jest kosztowne pod względem wydajności, więc im mniej takich operacji wykonasz, tym lepiej. W kontekście Reacta możesz wykorzystać React.memo dla komponentów, które nie potrzebują częstych aktualizacji, a w Angularze możesz użyć mechanizmu ChangeDetectionStrategy.OnPush dla optymalizacji detekcji zmian.

Zastosowanie w technologiach mobilnych

Warto również pamiętać, że efekty mouseover i mouseout nie działają w taki sam sposób na urządzeniach mobilnych. Dlatego jeśli twoja strona ma być responsywna, warto rozważyć użycie innych mechanizmów interaktywności dla urządzeń dotykowych, takich jak touchstart i touchend.

Ostateczne rozwiązanie zależy od wielu czynników: od konkretnych wymagań projektu, po technologie, które masz zamiar użyć. Ale niezależnie od wyboru, JavaScript oferuje wiele potężnych narzędzi do osiągnięcia zamierzonego efektu.

Debugowanie i testowanie

Po implementacji jakiejkolwiek funkcjonalności, bardzo ważnym etapem jest jej testowanie. Obejmuje to zarówno testy manualne, jak i automatyczne. Sprawdzanie konsoli w narzędziach deweloperskich przeglądarki może pomóc w wykrywaniu błędów i ostrzeżeń. Możesz też użyć narzędzi do debugowania JavaScript, aby krok po kroku przejść przez kod i zobaczyć, jak zmienia się stan aplikacji.

Testy jednostkowe

Dobre praktyki sugerują, że dla każdej nowej funkcjonalności warto napisać testy jednostkowe. W kontekście Reacta, można użyć bibliotek takich jak Jest czy Testing Library do napisania testów, które symulują interakcję użytkownika z elementami DOM.

javascript
// Przykład testu jednostkowego w Jest i React Testing Library
import { render, fireEvent } from '@testing-library/react';
import App from './App';

test('changes cell background color on hover', () => {
const { getByText, getByTestId } = render(<App />);
const linkElement = getByText(/My Link/i);
const cellElement = getByTestId('my-cell');

fireEvent.mouseOver(linkElement);
expect(cellElement).toHaveStyle({ backgroundColor: 'yellow' });

fireEvent.mouseOut(linkElement);
expect(cellElement).toHaveStyle({ backgroundColor: 'white' });
});

Testy E2E (End-to-End)

Oprócz testów jednostkowych, można również wykonać testy E2E, które symulują rzeczywistą interakcję użytkownika z całym systemem. Narzędzia jak Selenium czy Cypress mogą być tu bardzo pomocne.

Dostępność (Accessibility)

Kiedy dodajesz interaktywne elementy do swojego interfejsu użytkownika, zawsze warto pomyśleć o dostępności. Zastanów się, jak funkcjonalność będzie działać dla osób korzystających z czytników ekranu lub innych technologii asystujących. W HTML i JavaScript możesz używać atrybutów ARIA do poprawy dostępności interaktywnych elementów.

Rozszerzanie funkcjonalności

Ostatnią rzeczą, którą warto rozważyć, jest to, jak łatwo można rozszerzyć dodaną funkcjonalność. Czy jest ona zaprojektowana w sposób modularny, który pozwala na łatwe dodawanie nowych efektów czy interakcji? Czy można ją łatwo zintegrować z innymi częściami aplikacji? W zależności od skomplikowania projektu, może być warto zastosować dodatkowe wzorce projektowe, takie jak Model-View-Controller (MVC) czy Model-View-ViewModel (MVVM), aby lepiej zarządzać kodem.