<MyRusakov.ru />

Создание нейросетей на Python

Создание нейросетей на Python

Этот курс научит Вас созданию нейросетей на Python. Курс рассчитан на начинающих. Вся информация идёт от простого к сложному очень маленькими шажками. При этом глубокое знание математики не требуется. Поскольку в курсе Вы будете получать эти знания по мере необходимости.

Из курса Вы узнаете всю необходимую теорию и терминологию. Научитесь создавать нейросети самых разных архитектур и обучать их. Также Вы создадите собственный фреймворк. Что очень важно проделать для грамотного использования того же PyTorch. Затем Вы изучите и сам PyTorch.

Помимо уроков к курсу идут упражнения для закрепления материала.

Ещё Вы получите Бонусы, дополняющие основной курс: "Распознавание изображений", "Анализ настроения по тексту отзыва", "Программирование на Python с Нуля до Гуру".

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создание простейшего калькулятора на JS

Создание простейшего калькулятора на JS

HTML код

HTML разметка простого калькулятора в целом представляет из себя форму. Форма состоит из текстового поля input и кнопок span. В поле будут выводиться все производимые действия и отображаться результат вычислений. У калькулятора одна кнопка - это один тег span c числовым типом данных. Пропишем внутри всех span событие клика с инструкцией, что должно произойти при клике по той или иной кнопке. При наступлении события клика по кнопке "C", очищается поле ввода. При клике по кнопкам с числами и математическими знаками, в поле выводятся их значения. И наконец, при клике по знаку "=", происходит вычисление математического действия и вывод результата.

<div class="container">
  <form class="calculator"name="calc">
    <input class="value" type="text" name="txt" readonly/>
    <span class="num clear" onclick="calc.txt.value = ''"/><i>C</i></span>
    <span class="num" onclick="document.calc.txt.value += '/' "/><i>/</i></span>
    <span class="num" onclick="document.calc.txt.value += '*' "/><i>*</i></span>
    <span class="num" onclick="document.calc.txt.value += '7' "/><i>7</i></span>
    <span class="num" onclick="document.calc.txt.value += '8' "/><i>8</i></span>
    <span class="num" onclick="document.calc.txt.value += '9' "/><i>9</i></span>
    <span class="num" onclick="document.calc.txt.value += '-' "/><i>-</i></span>
    <span class="num" onclick="document.calc.txt.value += '4' "/><i>4</i></span>
    <span class="num" onclick="document.calc.txt.value += '5' "/><i>5</i></span>
    <span class="num" onclick="document.calc.txt.value += '6' "/><i>6</i></span>
    <span class="num plus" onclick="document.calc.txt.value += '+' "/><i>+</i></span>
    <span class="num" onclick="document.calc.txt.value += '1' "/><i>1</i></span>
    <span class="num" onclick="document.calc.txt.value += '2' "/><i>2</i></span>
    <span class="num" onclick="document.calc.txt.value += '3' "/><i>3</i></span>
    <span class="num" onclick="document.calc.txt.value += '0' "/><i>0</i></span>
    <span class="num" onclick="document.calc.txt.value += '00' "/><i>00</i></span>
    <span class="num" onclick="document.calc.txt.value += '.' "/><i>.</i></span>
    <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)"/><i>=</i></span>
  </form>
</div>

Несмотря на отсутствие CSS стилей, калькулятор уже рабочий и способен делать простые математические вычисления.



Создание простейшего калькулятора на JavaScript.


CSS код

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    display: flex;/*подключение flexbox сетки*/
    justify-content: center;/*выравнивание по горизонтали*/
    align-items: center;/*выравнивание по вертикали*/
    min-height: 100vh;
    background: #333;
}
.container{
    position: relative;/*относительное позиционирование*/
    padding: 40px 30px 30px;/*поля*/
    background: #333;
    border-radius: 20px;/*закругление углов*/
  box-shadow: 25px 25px 75px rgba(0,0,0,0.25),/*тень*/
  10px 10px 70px rgba(0,0,0,0.25),
  inset -5px -5px 15px rgba(0,0,0,0.5),
  inset 5px 5px 15px rgba(0,0,0,0.5);
}
.calculator{
    position: relative;
    display: grid;/*подключение grid сетки*/
}
.calculator .value{
    position: relative;
    grid-column: span 4;/*количество колонок*/
    height: 100px;
    left: 10px;
    width: calc(100% - 20px);/*формула вычисления ширины колонки*/
    text-align: right;/*текст справа*/
    border: none;/*нет рамки*/
    outline: none;/*нет обводки*/
    padding: 10px;
    font-size: 2em;
    color: #3a3c2e;
    background: #a7af7c;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.75);
}
.calculator span{
    position: relative;
    display: grid;
    width: 80px;
    height: 80px;
    margin: 8px;
    color: #fff;
    font-weight: 400;
    place-items: center;
    cursor: pointer;
    font-size: 20px;
    user-select: none;/*пользователю запрещено выбирать текст*/
    border-radius: 10px;
    background: linear-gradient(180deg,#2f2f2f,#3f3f3f);
    box-shadow: inset -8px 0 8px rgba(0,0,0,0.15),
    inset 0 -8px 8px rgba(0,0,0,0.25),
    0 0 0 2px rgba(0,0,0,0.75),
    10px 20px 25px rgba(0,0,0,0.4);
}
span::before {
    content: '';
    position: absolute;/*абсолютное позиционирование*/
    top: 3px;
    left: 4px;
    bottom: 14px;
    right: 12px;
    background: linear-gradient(90deg,#2d2d2d,#4d4d4d);
    border-radius: 10px;
    box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
    10px 5px 10px rgba(0,0,0,0.15);
    border-left: 1px solid #0004;
    border-bottom: 1px solid #0004;
    border-top: 1px solid #0009;
}

.calculator span:active {
    filter: brightness(1.5);/*степень яркости*/
}
.calculator .plus{
    grid-row: span 2;/*количество рядов*/
    height: 170px;
}
.calculator .clear{
    grid-column: span 2;
    width: 170px;
    background: #f00;
}
.calculator .clear::before{
    background: linear-gradient(90deg,#d20000,#ffffff5c);
    border-left: 1px solid #fff4;
    border-bottom: 1px solid #fff4;
    border-top: 1px solid #fff4;
}
.calculator .equal{
    background: #2196f3;
}
.calculator .equal::before{
    background: linear-gradient(90deg,#1479c9,#ffffff5c);
    border-left: 1px solid #fff4;
    border-bottom: 1px solid #fff4;
    border-top: 1px solid #fff4;
}
span i {
    position: relative;
    color: #fff;
    font-style: normal;
    font-size: 1.5em;
    text-transform: uppercase;
}


Создание простейшего калькулятора на JavaScript.


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.