Тема уроков программирования поднималась уже не один раз, но многие из таких материалов либо слишком сложны для начинающих, либо требуют дополнительной подготовки и установки различных (зачастую дорогостоящих и занимающих много места) программных пакетов. Можно ли обойтись без всего этого? Можно!
Taiga, Shutterstock.com
Постараемся обойтись минимумом дополнительной информации, чтобы уже через 5 минут заработала наша первая программа. Итак, приступим.
Введение
Согласно энциклопедии, компьютерная программа — это последовательность инструкций для вычислительной машины. Язык программирования — это формализованный способ записи компьютерных программ. Важно заметить, что самому компьютеру «человеческий» язык не нужен, он прекрасно справляется и с машинными кодами в двоичном формате. Эти коды представляют собой простые инструкции типа: «Взять число по адресу 100, сложить с числом по адресу 101, поместить результат в ячейку 102».
КАК СДЕЛАТЬ СВОЮ ПРОГРАММУ ЗА 5 МИНУТ НА ВИНДОВС\DEVEL NEXT FOR WINDOWS
Первые компьютеры так и программировались, однако для человека такой способ оказался крайне неудобным, и уже в 50-х годах прошлого века появились языки программирования, позволяющие записывать команды в понятном человеку формате.
Любая программа состоит из, как минимум, двух компонент:
Для создания и отладки программ существуют большие и сложные среды программирования, занимающие до нескольких гигабайт на жестком диске, но нам не понадобится ни одна из них. Более того, нам вообще ничего не понадобится — для написания простейшей программы достаточно того инструментария, что имеется в операционной системе Windows. Имеющийся в составе системы браузер имеет возможность выполнения программ на языке Javascript, который мы и используем. Плюсом Javascript является и то, что он имеет современный синтаксис, практически совпадающий с языком С, современными языками C++ и C#.
Первая программа
Поскольку мы используем браузер, программа должна храниться в виде HTML-файла. Откроем блокнот и создадим файл, как показано на первом скриншоте.
Как можно видеть, текст представляет собой HTML-файл, интересующий нас код программы находится внутри угловых скобок с названием «script». Сохраним файл под названием 01.html. Первая программа готова! Достаточно открыть «Проводник», найти созданный файл и запустить его двойным кликом. Откроется браузер, в котором будут выведены результаты работы программы, а именно текст Hello world (см. второй скриншот).
Объявления переменных
Очевидно, что программа должна что-то делать, например, обрабатывать и выводить различные данные. Для их хранения мы можем объявлять переменные внутри нашей программы. Рассмотрим пример на скриншоте № 3.
Вряд ли этот код нуждается в комментариях. Мы создали переменную R, присвоив ей значение 10, и вычислили длину окружности по известной формуле. Обратим внимание на использование оператора «+» при выводе, который позволяет объединять строки в одну.
Циклы
Программа, вроде написанной выше, выполняется линейно, от оператора к оператору. Однако часто бывает необходимо повторить фрагмент кода определенное количество раз, для этого существует цикл for.
Для примера выведем таблицу квадратов и кубов чисел от 1 до 10. Код и результаты его выполнения показаны на скриншотах №№ 4 и 5. Внутренняя часть кода, отделенная фигурными скобками, будет выполнена нужное количество раз, определяемое условием цикла. Результат работы показан на скриншоте № 6. Тег BR используется в HTML для перевода строки, что позволяет разбивать таблицу на строки.
Условия
Часто бывает необходимо, чтобы код выполнялся при определенных условиях. Для примера рассмотрим простейший «магический квадрат» — это квадрат размерностью 3×3, сумма чисел в котором по всем строкам и диагоналям одинакова. Выведем такие квадраты с помощью компьютера, для этого нам понадобятся циклы и условие сравнения равенства. Как и в предыдущем случае, код и результаты выполнения можно видеть на скриншотах.
В Javascript, как и в С или С++, для вычисления равенства используется оператор ==, также проверяется дополнительное условие того, что сумма больше 12 (т.к. в диагонали квадрата есть цифра 9 и еще минимум 2 числа, сумма не может быть меньше этой величины). Для выполнения этой программы компьютеру придется «задуматься» на несколько минут, ведь для поиска всех вариантов необходимо перебрать 999999999 значений, что обеспечивается девятью вложенными циклами. Впрочем, именно на таких задачах и проявляется основное преимущества компьютера перед человеческим мозгом — возможность быстрой обработки информации. Хотя надо заметить, что найденный «квадрат» (на скриншоте № 7 обведен красным) был известен в Китае под названием «Ло Шу» еще до нашей эры, так что и древние люди были не лыком шиты… Также можно отметить использование переменной count для подсчета найденных квадратов, как только квадрат найден, мы увеличиваем значение переменной на единицу.
Как можно видеть, не все квадраты в списке являются «правильными», ведь проверка чисел на равенство между собой не выполняется. Читатели могут добавить проверку самостоятельно, в виде домашней работы. Поиск квадрата 4×4 также может быть сделан дополнительно, он по сути ничем не отличается, хотя объем вычислений будет еще больше. Так можно получить квадрат Альбрехта Дюрера, изображенный в 1514 году.
На этом мы закончим изучение основ программирования. Если будет интерес, «уроки» можно будет продолжить, ведь тема эта практически безгранична. Впрочем, для выполнения первых шагов и вышеприведенных примеров вполне достаточно.
Желаем читателям интересного знакомства с миром программирования и математики.
Источник: www.shkolazhizni.ru
Игра на чистом JavaScript за 20 минут
На JS можно создавать сложные и простые игры любых жанров. Мы расскажем как создать 2D игру на JavaScript и HTML5 всего за 20 минут.
Для создания веб игр на языке JavaScript используется технология Canvas , которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:
На html странице прописывается лишь тег канвас, а также подключение JS файла, в котором будет происходить обработка всей функциональности. К примеру, HTML файл может выглядеть следующим образом:
Flappy Bird!
В JS файле необходимо найти нужный канвас по id и указать способ работы с ним.
var cvs = document.getElementById(«canvas»); var ctx = cvs.getContext(«2d»);
Добавление изображений и аудио
Далее необходимо загрузить все изображения, а также аудио файлы, которые будут использоваться в игре. Для этого используйте класс Image и Audio соответсвенно. Ниже вы можете скачать все необходимые картинки, а также аудиофайлы к игре.
- Скачать аудио файлы можно по этой ссылке ;
Код добавления изображений и аудио в игру:
var bird = new Image(); var bg = new Image(); // Создание объекта var fg = new Image(); // Создание объекта var pipeUp = new Image(); // Создание объекта var pipeBottom = new Image(); // Создание объекта bird.src = «img/bird.png»; // Указание нужного изображения bg.src = «img/bg.png»; // Аналогично fg.src = «img/fg.png»; // Аналогично pipeUp.src = «img/pipeUp.png»; // Аналогично pipeBottom.src = «img/pipeBottom.png»; // Аналогично // Звуковые файлы var fly = new Audio(); // Создание аудио объекта var score_audio = new Audio(); // Создание аудио объекта fly.src = «audio/fly.mp3»; // Указание нужной записи score_audio.src = «audio/score.mp3»; // Аналогично
Рисование объектов
Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Главное, вам нужно вызвать эту функцию из вне её хотя бы один раз, а внутри неё прописать метод requestAnimationFrame , который будет вызывать функцию постоянно.
function draw() < // Какой-либо код requestAnimationFrame(draw); // Вызов функции постоянно >draw(); // Вызов функции из вне
Весь код игры стоит помещать в этот метод, ведь в нем он будет постоянно обрабатываться и игра будет выглядеть живой и анимированной.
Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий — addEventListener . К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:
// При нажатии на какую-либо кнопку document.addEventListener(«keydown», someMethod); // Вызывается метод someMethod function someMethod() < // Изменяем что-то в коде >
Видео урок
Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с небольшим видео уроком, в ходе которого вы создадите небольшую 2D игру на чистом JavaScript’е.
Весь JS код игры
Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:
var cvs = document.getElementById(«canvas»); var ctx = cvs.getContext(«2d»); var bird = new Image(); var bg = new Image(); var fg = new Image(); var pipeUp = new Image(); var pipeBottom = new Image(); bird.src = «img/bird.png»; bg.src = «img/bg.png»; fg.src = «img/fg.png»; pipeUp.src = «img/pipeUp.png»; pipeBottom.src = «img/pipeBottom.png»; // Звуковые файлы var fly = new Audio(); var score_audio = new Audio(); fly.src = «audio/fly.mp3»; score_audio.src = «audio/score.mp3»; var gap = 90; // При нажатии на какую-либо кнопку document.addEventListener(«keydown», moveUp); function moveUp() < yPos -= 25; fly.play(); >// Создание блоков var pipe = []; pipe[0] = < x : cvs.width, y : 0 >var score = 0; // Позиция птички var xPos = 10; var yPos = 150; var grav = 1.5; function draw() < ctx.drawImage(bg, 0, 0); for(var i = 0; i < pipe.length; i++) < ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y); ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap); pipe[i].x—; if(pipe[i].x == 125) < pipe.push(< x : cvs.width, y : Math.floor(Math.random() * pipeUp.height) — pipeUp.height >); > // Отслеживание прикосновений if(xPos + bird.width >= pipe[i].x xPos = pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height — fg.height) < location.reload(); // Перезагрузка страницы >if(pipe[i].x == 5) < score++; score_audio.play(); >> ctx.drawImage(fg, 0, cvs.height — fg.height); ctx.drawImage(bird, xPos, yPos); yPos += grav; ctx.fillStyle = «#000»; ctx.font = «24px Verdana»; ctx.fillText(«Счет: » + score, 10, cvs.height — 20); requestAnimationFrame(draw); > pipeBottom.onload = draw;
Больше интересных новостей
7 девушек айтишниц из фильмов и сериалов
4 худших ошибки в карьере программиста
Игры, которые научат вас программированию
Пропорциональное уменьшение YouTube видео
Комментарии (2)
RInat 05 мая 2023 в 17:32
Источник: itproger.com
Создаем PWA-приложение за 1 минуту под любую вертикаль
Примерно с июня Facebook начал нещадно метить приложения, а Google и вовсе мог выносить по несколько прилок в день, не говоря уже о жесткой модерации сторов. Ответная реакция рынка — PWA. Хотя тема и не новая, но в текущих реалиях данное решение получило вторую жизнь. Если ваша партнерка не предлагает свои PWA или просто есть желание завернуть оффер в приложение — сейчас мы расскажем, как это сделать в 5 кликов — просто, быстро и без костылей!
4RABET PARTNER – ТВОЙ ЛУЧШИЙ РЕКЛАМОДАТЕЛЬ НА ИНДИЮ
ЛИТЬ ИНДИЮ!
Содержание скрыть
В чем соль PWA-приложений
Давайте быстренько пробежимся по основным моментам данного решения. PWA — технология, с помощью которой можно завернуть абсолютно любую веб-страницу в приложение. То есть, другими словами, — это активная ссылка, в виде иконки на рабочем столе смартфона. При этом такое приложение будет работать офлайн, будет пушить пользователя и, естественно, будет присутствовать на рабочем столе смартфона. Важный момент:PWA-приложения не находятся в AppStore и Google Play. По клику пользователь попадает на сайт, который мимикрирует под Store и качает приложение уже оттуда. Выглядит все достаточно органично: Почему многие переходят на PWA:
- Нет банов от AppStore и Google Play. Не только FB метит приложения, но и сторы блочат прилы на своих площадках. И как обычно, это случается именно тогда, когда трафик только разогнался. Максимум, что может забанить, — это домен, который без проблем можно поменять за $10;
- Сложность редактирования. Если в приложении нужно апдейтнуть иконку, описание или заменить что-то в технической части, придется снова иметь дело с модерацией, что увеличивает шанс бана и занимает какое-то время;
- Наличие встроенной клоаки. В обычном WebView приложении крутятся много аккаунтов, многие получают баны. Тут же у вас уникальная заклоаченная ссылка. Вы можете хоть каждому аккаунту выдавать новую, без угрозы быть забаненным по этой приле.
Тем не менее не в каждой партнерке есть своя разработка и не каждая разработка предлагает PWA-приложения. Так что если вам нужна такая прилка, придется либо делать ее самостоятельно, либо использовать сервисы. Ниже покажем, как сделать свою PWA-прилку в PWA.MARKET — конструкторе, который позволяет собрать приложение всего за 5 кликов, без знания кода.
PWA.MARKET: создаем приложение под любую вертикаль в 5 кликов
Как уже обозначили выше, PWA.MARKET — это конструктор, где на выходе вы получаете полностью готовую функционирующую PWA-прилку. Кратко о том, что предлагает сервис:
- Индивидуальный домен в одни руки (можно использовать свой);
- Клоака на стороне сервиса;
- Можно загрузить свой дизайн и кастомизировать прилку под свой оффер (также есть готовые шаблоны);
- Встроенный трекер — можно получать полную аналитику поведения юзеров внутри приложения;
- Встроенная возможность пушить пользователей;
- В любой момент можно вносить изменения буквально в 1 клик.
Как создать PWA-приложение:
- Регистрируемся в PWA.MARKET. Нужно указать почту, Telegram и придумать пароль. Доступ к кабинету получаем сразу. Сразу нажимаем на вкладку сбоку «Мои PWA» и жмем на кнопку «Создать новое».
- Подключаем домен. Площадка выдает собственные домены, поэтому ничего регистрировать не придется, просто жмем «Далее». Если нужно подключить свой, то жмем “У меня есть свой домен” и паркуем его в CloudFlare.com.
- Выбираем дизайн. Можно выбрать из предложенных шаблонов, их тут несколько десятков. Если нет подходящего, можно нажать на кнопки «Загрузить свой», либо «Копировать из Google Play».
- Настраиваем основные параметры. Указываем названия приложения, автора, категорию (есть также финансы, дейтинг), размер, версию, дату обновления и количество установок. Ставим ограничение по возрасту и выбираем рейтинг. Описание можно написать самостоятельно или выбрать шаблонное из списка. Тоже самое касается комментариев. Если не хотите писать — просто укажите количество и вид. Кстати, сервис поддерживает автоперевод комментариев.
- Технические настройки. Здесь сервис дает кучу возможностей по оптимизации. В базе хранятся пиксели FB, Google, TikTok, все обучаются коллективно, что напрямую влияет на повышения конверта. Вы можете перенаправлять трафик на разные офферы в зависимости от ГЕО. Также вы можете добавить макросы, выбрать встроенную клоаку и настроить постбек. Доступна и оптимизация по white-листам: загружайте свой список или используйте с чужого приложения.
После того, как нажали «Сохранить», во вкладке «Мои PWA» можно забрать уже заклоаченную ссылку, посмотреть, как будет выглядеть приложение и в случае чего перейти в редактор и подправить нужные моменты.
Помимо создания и редактирования самой прилы, в PWA.MARKET можно посмотреть статистику, полную аналитику поведения юзеров и создать пуш-уведомления. И все это вместе с низким ценником — всего $15 — делает площадку доступной и удобной как для опытных вебмастеров, так и для новичков.
Начинающие арбитражники могут пропустить все настройки, вставить ссылку на оффер и сразу же приступить к сливу трафика. А профи увеличить свой профит за счет расширенных кастомных настроек, двойной оптимизации, фильтрации по ГЕО и возможности скопировать дизайн любой прилы из Play Market.
Источник: protraffic.com