ChatGPT w nauce programowania

Uczę się front endu. Jestem początkujący. Dlaczego HTML nie jest uznawany za język programowania?

HTML, czyli HyperText Markup Language, nie jest uznawany za język programowania, ponieważ jego głównym celem jest strukturalne oznaczanie treści na stronach internetowych, a nie programowanie dynamicznych funkcji. HTML jest językiem znaczników, który opisuje strukturę i semantykę dokumentu, definiuje elementy i ich relacje. Natomiast języki programowania, takie jak JavaScript, służą do tworzenia interaktywnych i dynamicznych aplikacji, manipulowania danymi, logiki i sterowania przebiegiem programu. HTML jest kluczowym elementem w budowie stron internetowych, ale nie spełnia wszystkich kryteriów, aby zostać uznany za pełnoprawny język programowania.

Jak mam rozumieć "strukturalne oznaczanie treści"? Czy możesz wyjaśnić to krótko na jakimś przykładzie?

Oczywiście! "Strukturalne oznaczanie treści" w przypadku HTML oznacza nadawanie znaczenia i struktury różnym elementom na stronie internetowej. HTML używa specjalnych znaczników, które określają rodzaj zawartości, na przykład czy jest to nagłówek, paragraf, lista, obraz itp.

Na przykład, jeśli chciałbyś utworzyć nagłówek pierwszego poziomu na stronie, użyłbyś znacznika <h1>:

<h1>To jest nagłówek pierwszego poziomu</h1>

Jeśli chciałbyś utworzyć paragraf, użyłbyś znacznika <p>:

<p>To jest paragraf z pewnym tekstem.</p>

W ten sposób HTML pozwala na ustalenie struktury i znaczenia poszczególnych elementów na stronie, co jest przydatne dla przeglądarek internetowych i innych narzędzi, aby właściwie interpretować i wyświetlać te elementy.

Ten selektor CSS oznacza, że wybrane zostaną wszystkie elementy <a> będące bezpośrednimi potomkami elementów o klasie "panel" (np. <div class="panel">) i zawierające atrybut href z wartością, która zawiera fragment "login".Na przykład, dla HTML:

<div class="panel">
  <a href="/login">Login</a>
  <a href="/signup">Sign up</a>
</div>

Selektor .panel>a[href*="login"] odniesie się tylko do pierwszego elementu <a> o wartości href="/login".

Czy stosowanie takiego selektora jest dobrą praktyką?

Stosowanie selektorów CSS, takich jak .panel>a[href*="login"], może być korzystne w niektórych przypadkach, ale warto rozważyć pewne czynniki przed zastosowaniem ich w projekcie.

Oto kilka punktów do rozważenia:

1. Czytelność kodu: Skomplikowane selektory mogą być trudne do zrozumienia dla innych programistów. Ważne jest, aby utrzymywać czytelność kodu, szczególnie w większych projektach, aby inni członkowie zespołu mogli łatwo zrozumieć i utrzymywać kod.
2. Elastyczność i skalowalność: Skomplikowane selektory mogą utrudniać zmiany w kodzie lub dodawanie nowych elementów. Jeśli struktura HTML ulega zmianie lub dodawane są nowe elementy, selektory mogą przestać działać poprawnie.
3. Wydajność: Złożone selektory mogą mieć wpływ na wydajność renderowania strony, szczególnie w przypadku dużych dokumentów HTML. Zbyt wiele zagnieżdżonych i złożonych selektorów może spowolnić przeglądarkę.

Dlatego zalecam stosowanie selektorów, które są czytelne, elastyczne i mają minimalny wpływ na wydajność. Jeśli możliwe, należy dążyć do prostszych selektorów, które są łatwe do zrozumienia i utrzymania. Jeśli selektor jest zbyt specyficzny i zbyt zależny od struktury HTML, może być bardziej podatny na łamanie się w wyniku zmian w kodzie lub strukturze strony.

Ulepsz poniższy kod:

function isProductCorrect(color, product) {
    if (color === 'red' && (product === 'cranberry' || product === 'cherry')) {
        alert('Hurray!');
    } else if (
        color === 'yellow' &&
        (product === 'banana' || product === 'melon')
    ) {
        alert('Hurray!');
    } else if (
        color === 'green' &&
        (product === 'cucumber' || product === 'avocado')
    ) {
        alert('Hurray!');
    } else {
        alert('Wrong answer');
    }
}

Poniżej przedstawiam ulepszony kod:

function isProductCorrect(color, product) {
    const colorProductMap = {
        red: ['cranberry', 'cherry'],
        yellow: ['banana', 'melon'],
        green: ['cucumber', 'avocado']
    };

    if (colorProductMap[color] && colorProductMap[color].includes(product)) {
        alert('Hurray!');
    } else {
        alert('Wrong answer');
    }
}

W ulepszonym kodzie zastosowano mapę colorProductMap, która przechowuje poprawne kombinacje kolorów i produktów. Dzięki temu eliminuje się potrzebę powtarzania warunków dla różnych kombinacji kolorów i produktów.

W pierwszym warunku sprawdzane jest, czy colorProductMap zawiera klucz color, a następnie sprawdzane jest, czy product znajduje się w tablicy wartości dla tego klucza. Jeśli tak, wywoływane jest powiadomienie 'Hurray!'. W przeciwnym razie wywoływane jest powiadomienie 'Wrong answer'.

Ten ulepszony kod jest bardziej czytelny, bardziej modularny i łatwiejszy do utrzymania, ponieważ pozwala na łatwe dodawanie lub usuwanie kombinacji kolorów i produktów.

To mój kod HTML:

<button id="myButton" style="color: green">Click me</button>

A to kod JS:

const button = document.querySelector('myButton');
button.addEventListener('click', () => console.log('Hello world'));

Dlaczego otrzymuję błąd: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"

Otrzymujesz błąd "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" dlatego, że w kodzie JS używasz metody querySelector do znalezienia elementu o id "myButton", ale nie podajesz odpowiedniego selektora CSS.

Poprawny kod JS powinien wyglądać następująco:

const button = document.querySelector('#myButton');
button.addEventListener('click', () => console.log('Hello world'));

W powyższym kodzie dodajemy znak "#" przed "myButton" w selektorze CSS (#myButton), aby wskazać, że chcemy znaleźć element o id "myButton". Bez tego znaku "#" metoda querySelector próbowałaby znaleźć element o nazwie "myButton", a nie o id "myButton". Poprawiając ten błąd, kod JS powinien działać poprawnie i zarejestrować zdarzenie click dla przycisku.

Uczę się programowania. Wykonaj code review mojego rozwiązania i zostaw komentarze bezpośrednio w kodzie (poniżej zobaczysz, że tej prośby ChatGPT „nie zrozumiał”, ale czasem daje radę). Czy mogę coś ulepszyć? Czy stosuję dobre praktyki programowania?

const fruits = ["APPLE", "BANANA", "LEMON", "ORANGE", "PEAR"];

for (var fruit of fruits) {
 const lowercasedFruit = fruit.toLowerCase(); 
console.log(lowercasedFruit);
}

Oto recenzja Twojego kodu:

Kod wygląda ogólnie dobrze i realizuje zamierzone zadanie. Jednakże, mam kilka uwag dotyczących praktyk programowania:

1. Zalecam używanie let lub const zamiast var do deklarowania zmiennych. W tym przypadku, zamiast var fruit of fruits, lepiej byłoby użyć let fruit of fruits, ponieważ w większości przypadków preferuje się blokowy zakres zmiennych.
2. Dobre praktyki programowania obejmują nazewnictwo zmiennych w sposób, który jest czytelny i opisowy. W przypadku lowercasedFruit, jest to akceptowalne, ale sugeruję bardziej opisowe nazwy, które jasno wskazują, co zawiera ta zmienna, np. lowercasedFruitName.
3. Ważne jest, aby stosować jednolite wcięcia i formatowanie kodu dla lepszej czytelności. W przypadku Twojego kodu, druga linia powinna być wcięta o jedną jednostkę wewnątrz pętli for.