> For the complete documentation index, see [llms.txt](https://academy.bothub.chat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.bothub.chat/modul-5-stan-programmistom-s-claude/urok-4-generaciya-koda-s-pomoshyu-claude.-chast-3.md).

# Урок №4: Генерация кода с помощью Claude. Часть 3

В этом уроке мы исследуем возможность программирования с помощью GPT, например, написания кода для игры "Камень, Ножницы, Бумага" в JavaScript и его интеграции в приложение на React.

**Генерация кода на JavaScript**

Для начала попросим ChatGPT создать код игры "Камень, Ножницы, Бумага" на JavaScript.

Пример запроса: "Напиши код игры 'Камень, Ножницы, Бумага' на JavaScript."

ChatGPT сгенерирует код, который может выглядеть примерно так:

![](/files/hJX9ttTrprXu6OOY6K1F)

![](/files/NLS6m20XFYuIGlrK4YJp)

![](/files/7D59TGjFCBa4si9tg6f1)

Что интересно, мы можем скопировать и выполнить сгенерированный код прямо в консоли браузера, который является собственной средой выполнения.

Копируем функцию из сгенерированного кода, открываем консоль нажатием F12 и вставляем её в туда:

![](/files/pqJvlMf7GnxYHtkQqGHd)

Теперь вызываем функцию и получаем диалоговое окно выбора варианта: камень, ножницы или бумага.

![](/files/RNvAYnp7ljQ0AVZLUttb)

Как только мы убедились, что функция работает. Теперь рассмотрим, можем ли мы получить ничью или проигрыш.

![](/files/nCNkvtpdF363SZvXQjPH)

Ножницы победили:)

**Понимание сгенерированного кода**

Если есть некоторые части кода или термины, которые вы не понимаете, можете спросить у ChatGPT, и он объяснит их.

Пример вопроса: "ChatGPT, как работает функция сравнения в сгенерированном коде игры?"

Ответ может быть таким:&#x20;

<figure><img src="/files/sjnJbCgem9tXyyXLpmTZ" alt=""><figcaption></figcaption></figure>

![](/files/YdzNVLNjYBoRb15AgInR)

![](/files/RsQz8W8ydBHo8r0znLBo)

**Практическое задание**

**Задача:** Попробуйте с помощью ChatGPT написать игру “Крестики-нолики” на JavaScript.

**Инструкция:**

1. Попросите ChatGPT написать код для игры “Крестики-нолики” на JavaScript.
2. Скопируйте полученный код в html файл.
3. Откройте его в браузере и попробуйте поиграть!

**Пример:**

1. Запрос: “Напиши код для игры “Крестики-нолики” на JavaScript.”
2. Ответ:&#x20;

   <figure><img src="/files/iZwshl76AYVPicCulraK" alt=""><figcaption></figcaption></figure>
3. Вставьте этот код в html файл:&#x20;

   <figure><img src="/files/lpFwoQn6JdPwzAzJi5Et" alt=""><figcaption></figcaption></figure>
4. Откройте его в браузере:

![](/files/qccBlvXgZ1MYHdlx1CLT)

**Заключение**

В завершение урока, можно сказать, что с помощью ChatGPT можно воплощать свои идеи в жизнь, создавать новые проекты и улучшать уже существующие. Это может быть полезным инструментом для всех, кто изучает программирование, вне зависимости от уровня знаний.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://academy.bothub.chat/modul-5-stan-programmistom-s-claude/urok-4-generaciya-koda-s-pomoshyu-claude.-chast-3.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
