простая программа на javascript код

Содержание

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.

jfeo1s pygp9g5pazca5kjwvwoa

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.

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

image loader

Первая программа в консоли браузера — вывод сообщения в консоль

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

Вот результат выполнения этой программы.

image loader

Вывод сообщения в окне

Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.

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

Источник

Десктопные приложения на JavaScript. Часть 1

Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.

Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js.

По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.

Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.

WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)

Быстрый старт

Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.

После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения. Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder. Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm, с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:

Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию —save-dev, для глобальной -g. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:

Читайте также:  коды ошибок toyota auris

Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):

В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64.

Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.

Hello, world!

Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.

Для данного приложения, нам даже не понадобится JavaScript, только HTML. Создадим папку с названием HelloWorld. Поместим внутрь файл index.html со следующей разметкой:

Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:

Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).

Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):

image loader

Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true. Проделав это при запуске приложения мы получим следующее окно:

image loader

После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:

image loader

Работа с нативными контролами

NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:

Общий шаблон для использования контролов:

Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:

Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:

Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:

Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).

Для доступа к созданным элементам можно использовать свойство items:

Обратите внимание, что нельзя напрямую создавать элементы:

Самое главное при работе с нативными контролами, это помнить, что любая ошибка при работе с ними может привести к краху всего приложения, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола, можно выполнить следующее:

Для более удобной работы с контролами, они унаследованы от EventEmitter, поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:

Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.

Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world:

После запуска приложения, мы можем увидеть созданное контекстное меню для body. Таким образом, мы можем определить контекстное меню для любого элемента.

image loader

Итак, теперь кроссплатформенные приложения может создавать каждый, но за все нужно платить. В данном случае мы жертвуем как скоростью, так и занимаемым объемом памяти (собранное приложение получается достаточно большим, более 50 Мб). Список приложений, созданных, используя данную технологию можно найти на github.

Во второй части статьи мы рассмотрим технологию более подробно.

Источник

Написание простой программы JavaScript

«Hello, World!» – классический пример простой программы. Эта простейшая программа помогает новичкам понять, как работает язык программирования, а опытным разработчикам – убедиться, что окружение функционирует должным образом.

Данный мануал научит создавать эту программу в JavaScript. Кроме того, вы узнаете, как немного усложнить программу: научить ее запрашивать имя пользователя и затем применять его в приветствии.

Требования

Выполнить мануал можно с помощью консоли разработчика JavaScript в браузере. Прежде рекомендуем ознакомиться с руководством Использование консоли разработчика JavaScript.

1: Написание программы «Hello, World!»

Для начала откройте в браузере консоль JavaScript.

Написать программу «Hello, World!» можно двумя способами: с помощью метода alert() и с помощью метода console.log().

Метод alert()

Метод alert() выведет окно предупреждения с заданным текстом поверх текущей страницы. В данном случае это будет фраза «Hello, World!». Чтобы закрыть предупреждение, нужно будет нажать Ок.

В качестве параметра методу нужно передать строку. Этой строкой будет последовательность символов Hello, World!.

Поместите строку в круглые скобки метода alert() и поставьте в конце точку с запятой:

Читайте также:  краевая гимназия интернат г читы новобульварная

Нажмите Enter, и на экране появится всплывающее окно с фразой «Hello, World!».

Консоль также выведет результат вычисления выражения: вы увидите undefined, если выражение не возвращает явный результат.

Всплывающие предупреждения позволяют проверить работу, но их нужно постоянно закрывать. Давайте попробуем создать ту же самую программу с помощью метода console.log().

Метод console.log()

Метод console.log() имитирует работу с языком программирования в терминале.

Как и в случае с методом alert(), строка «Hello, World!» будет передана методу console.log() в качестве параметра.

Нажав ENTER, вы увидите в консоли строку:

Теперь попробуйте добавить в программу немного интерактива.

2: Запрос пользовательского ввода

На данный момент программа «Hello, World!» выдает один и тот же результат. Ее можно немного усложнить. К примеру, она может запрашивать имя пользователя, а затем использовать полученные данные в приветствии.

Для этого нужно добавить к любому из перечисленных выше методов одну строку. Для запроса входных данных используется метод prompt(). Передайте ему параметр “What is your name?”, чтобы предложить пользователю ввести свое имя. Не забудьте про точку с запятой в конце.

let name = prompt(«What is your name?»);

Нажмите Enter, и на экране появится окно запроса.

Диалоговое окно содержит текстовое поле для ввода. Введя значение в текстовое поле, пользователь должен нажать кнопку ОК, чтобы сохранить значение. Пользователь также может отменить запрос значения, нажав кнопку Cancel.

Метод prompt() нужно использовать только тогда, когда это имеет смысл в контексте программы, поскольку чрезмерное количество всплывающих окон может стать утомительным для пользователей.

Введите свое имя в поле. Например, 8host.

Программа сохранит это значение в переменной name и сможет использовать его в дальнейшем.

Вывод приветствия с помощью alert()

Метод alert() выведет всплывающее окно с приветствием поверх текущей страницы браузера.

Теперь нужно использовать конкатенацию строк и объединить строку “Hello, ” с именем пользователя.

Эта строка объединяет две строки («Hello, » и «!») и вставляет между ними значение переменной name. Используйте вышеприведенную строку кода в качестве параметра метода alert(). Введите в консоль:

На экране появится всплывающее окно с фразой «Hello, 8host!».

Вывод приветствия с помощью console.log()

Метод console.log() выведет приветствие в консоль. Этот метод работает аналогично методу print() в Python.

Используйте конкатенацию, как было показано ранее:

Поместите этот код в круглые скобки метода console.log() и введите полученную строку в консоль:

Нажмите Enter, и в консоли появится вывод:

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

Заключение

Вы знаете, как написать классическую программу «Hello, World!», запросить пользовательские данные и отобразить их в выводе. Теперь вы можете продолжить работу над своей программой и усложнить ее. Например, запросите любимый цвет пользователя и попросите программу сказать, что ее любимый цвет красный. Можно даже попробовать использовать эту технику для создания программы Mad Lib.

Источник

Полное руководство по созданию классических приложений на JavaScript

image loader

Еще недавно разработка классических приложений считалась сложной задачей — для этого приходилось учить специальный язык программирования, например Java или C++. К счастью, сейчас веб-разработчики могут создавать прекрасные классические приложения, конвертируя код JavaScript в полноценные программы. Давайте разберемся, что для этого нужно.

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

Сегодня мы рассмотрим следующие вопросы.

Инструменты для создания классических приложений.

Создание классического приложения для чтения блога Medium.

1. Инструменты для создания классических приложений

Веб-разработчикам, которые намерены создавать классические приложения, сначала стоит ознакомиться с основными инструментами в их арсенале и сосредоточиться на самых полезных решениях с учетом поставленных задач. Рассмотрим три лучших фреймворка JavaScript для создания классических приложений, которые дадут вам общее представление о доступных инструментах.

Electron

Это самый популярный и эффективный инструмент — возьмем его на вооружение. Он служит нам верой и правдой уже не один год и завоевал уважение многих компаний, например Slack, Atom, Discord, Intuit и др.

Он был создан на GitHub и благодаря качественному коду заслужил отличную репутацию. Очевидно, что этот фреймворк будет развиваться и активно использоваться в будущем.

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

Это прекрасное решение для веб-разработчиков, которые хотят заняться созданием классических приложений, поскольку в нем используются JavaScript, HTML и CSS.

Это еще один отличный инструмент, правда, менее популярный. С его помощью классические приложения можно разрабатывать на Node.js. Раньше этот движок назывался node-webkit, так как в нем используется та же технология, что и в браузерах Chrome и Safari.

Proton Native

Proton Native прекрасно подойдет тем, кто знаком с React и React Native. В нем используется фреймворк React, а значит, вы можете пользоваться любыми библиотеками React.js.

При решении некоторых задач он демонстрирует даже большую эффективность, чем Electron, поскольку в нем используется собственный движок, который обеспечивает производительность на уровне нативных приложений.

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

Теперь вы знакомы с основными инструментами разработки классических приложений, которые пригодятся веб-разработчику. Давайте начнем с Electron — это оптимальное решение для новичков, подходящее для выполнения большинства задач.

2. Настройка проекта с Electron.js

У этого фреймворка есть огромное преимущество: написав код один раз, вы можете сразу же развертывать его на устройствах Windows, Mac и Linux.

Читайте также:  куар коды в транспорте в москве

Для начала загрузите Node.js — он позволит исполнять код JavaScript вне браузера. Скачать можно отсюда: https://nodejs.org/en/

Откройте его в текстовом редакторе. Я использую Atom.io. Измените объект scripts так, как показано ниже. Больше ничего менять не нужно.

image loader

Примечание. Не удаляйте другие данные, просто обновите объект scripts. Он нам понадобится позже для запуска классического приложения. Вот как должен выглядеть ваш файл package.json.

image loaderpackage.json

Теперь нужно установить electron — это утилита командной строки, которую мы используем для управления проектом в качестве dev-зависимости.

image loader

Затем создайте файл index.js в корневой папке проекта. Этот файл будет использоваться для запуска нашего приложения. Добавьте в файл index.js этот код, чтобы вывести на экран стартовое окно.

image loaderindex.js

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

Теперь в корневой папке проекта нужно создать файл index.html с таким кодом (размещать его в подпапках нельзя):

image loaderindex.html

Это простой файл на HTML5, назначение которого, вероятно, вам не совсем понятно. Обратите внимание на теги title и body — в них будет размещаться содержимое. Заголовок страницы — My Electron App, и в теге body есть точно такой же заголовок.

image loader

В верхней части страницы вы видите содержимое тега title, а на самой странице — заголовок.

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

3. Создание классического приложения для чтения блога Medium

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

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

Вот как оно будет выглядеть:

image loader

Хотите создать такое же? Тогда читайте дальше!

Разработка приложения не займет много времени. Мы сделаем это в три этапа.

Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице.

Получение данных с сайта Medium через RSS-канал и их обработка.

Разработка дизайна и функционала приложения.

1. Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице

Создайте новый файл style.css в корневой папке. Именно в нем мы будем писать весь CSS-код. Не забывайте, что мы пишем классическое приложение на языках, предназначенных для веб-разработки.

Импортируйте таблицу стилей в файл index.html следующим образом:

image loader

В HTML-файле измените содержимое тега body :

image loaderindex.html

2. Получение данных с сайта Medium через RSS-канал и их обработка

HTML-файл настроен, и теперь мы можем получать данные с сайта Medium и отображать недавно добавленные статьи в нашем приложении. Для этого будем использовать RSS-каналы — это тот же самый блог, только конвертированный в формат JSON или XML, удобный для обработки в таких приложениях, как наше.

Теперь нужно объявить функцию getMediumArticles в файле inside.js со следующим содержимым:

image loaderinside.js

Теперь напишем HTML для отображения полученных данных в виде структурированного блока:

image loaderinside.js

image loader

image loader

Я пробовал разные решения, вариант с iframe оказался самым эффективным — его можно быстро открывать и закрывать.

image loader

Каждый блок представляет собой элемент div с заголовком и содержимым. Содержимое включает имя автора и описание статьи — вступление и изображение.

Закрываем последний div и html :

image loader

Теперь вставляем сгенерированный HTML-код на нашу страницу:

image loader

Вот как это сделать:

image loader

Функция findElement выбирает все интерактивные элементы в каждом блоке со статьей, ищет активную ссылку и загружает в iframe нужные данные.

Например, когда вы нажмете на изображение, в iframe откроется соответствующая статья целиком.

Возможно, вот эта часть в самом начале выглядит не очень понятно:

image loader

Но она всего лишь означает: «Проверь, отрендерился ли основной заголовок (main-title), если нет, попробуй снова выполнить эту функцию». Рендеринг полученных данных займет всего несколько секунд, и мы сможем получить доступ к статьям.

Обратите внимание на эту часть:

image loader

image loaderОкончательный сценарий inside.js

3. Разработка дизайна и функционала приложения

Наше приложение должно быть приятным в использовании, поэтому займемся дизайном. Вы можете оформить приложение по-своему или воспользоваться моим файлом style.css :

image loader

4. Развертывание приложения

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

Для этого установим пакет:

image loader

Это позволит осуществлять доступ к нужному нам инструменту electron-packager откуда угодно.

Теперь перейдите в папку проекта и запустите команду:

image loader

После выполнения этой команды приложение будет готово к использованию. Я работаю на Mac, поэтому создал папку medium-reader-darwin-x64 с несколькими файлами:

— LICENSE- LICENSES.chromium.html- medium-reader.app- version

Вот и все! Теперь вы знаете, как использовать веб-технологии для создания классических приложений с помощью Electron в рекордные сроки. Если вы хотите узнать больше, прочитайте полное руководство и рассмотрите пять дополнительных проектов, которые помогут вам создать портфолио, освоить новые навыки и выполнять более сложные заказы по разработке классических и веб-приложений: https://merunas.io/desktop-app-mastery.html

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

Всех желающих приглашаем на открытый урок «Создание интерактивных страниц, работа с анимациями». Урок посвящен анимациям в вебе. Рассмотрим способы создания интерактивных страниц, научимся анимировать переходы состояний HTML элементов, а также создавать анимации как на CSS, так и на JavaScript.

Источник

Поделиться с друзьями
admin
Здоровый образ жизни: советы и рекомендации
Adblock
detector