Гайд для начинающих: как написать JavaScript
Современный интернет немыслим без скриптов. Учимся писать на JavaScript.
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.
Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Нас пока интересуют только браузеры и HTML-странички.
Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.
Как написать JavaScript
Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
WScript. echo (» Привет, Skillbox!«)
Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.
Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами . Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.
alert()
Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
confirm()
Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
prompt()
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
prompt ( сообщение, значение_поля_ввода_данных)
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы ( Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты
Консоль разработчика
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Редакторы кода
В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Заключение
Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.
Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.
Источник статьи: http://skillbox.ru/media/code/gayd_dlya_nachinayushchikh_kak_napisat_javascript/
Основы JavaScript
JavaScript является очень мощным скриптовым языком программирования на стороне клиента. JavaScript используется в основном для улучшения взаимодействия пользователя с веб-страницей. Другими словами, вы можете сделать свою веб-страницу более живой и интерактивной с помощью JavaScript. JavaScript также широко используется в разработке игр и мобильных приложений.
В последние годы, JavaScript активно используется для разработки на стороне сервера благодаря появлению Node.js. Однако в этой статье мы будем рассматривать только клиентский JavaScript, который работает в браузере.
Как запустить JavaScript
Будучи языком сценариев, JavaScript не может работать сам по себе. За выполнение кода JavaScript отвечает браузер. Когда пользователь запрашивает HTML-страницу с JavaScript, скрипт отправляется в браузер, и браузер должен его обработать и выполнить. Основным преимуществом JavaScript является то, что все современные веб-браузеры поддерживают JavaScript. Таким образом, вам не нужно беспокоиться о том, использует ли посетитель вашего сайта Internet Explorer, Google Chrome, Firefox или любой другой браузер. Кроме того, JavaScript работает в любой операционной системе, включая Windows, Linux или Mac.
Как писать код на JavaScript
Для начала вам понадобится редактор кода, для написания скриптов на JavaScript, и браузер — для обработки этого кода и отображения веб-страниц. Вы можете использовать любой популярный редактор код, например Visual Studio Code, Sublime Text, Atom или любой другой текстовый редактор, который вам понравится.
Вы можете использовать любой из установленных на вашем компьютере веб-браузеров, включая Google Chrome, Firefox, Microsoft Edge и т.д.
Простая программа на JavaScript
Для того чтобы написать программу на JavaScript, вы должны поместить весь свой код в теги ). Это помогает вашему браузеру отличать код JavaScript от остального кода.
Однако, чаще используется другой способ. Вы пишете ваш код в отдельном файле и сохраняете его на жесткий диск. Далее, в HTML документе вы подключаете файл JavaScript с помощью тега
Источник статьи: http://zen.yandex.ru/media/id/5b943ec75960b700aa6852b7/osnovy-javascript-5cd9f2ef5b95f800b0f25bcf
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Для того чтобы её написать, если вы пользуетесь Google Chrome, откройте меню браузера и выберите в нём команду Дополнительные инструменты > Инструменты разработчика . Окно браузера окажется разделённым на две части. В одной из них будет видна страница, в другой откроется панель с инструментами разработчика, содержащая несколько закладок. Нас интересует закладка Console (Консоль). Щёлкните по ней. Не обращайте внимания на то, что уже может в консоли присутствовать (для её очистки можете воспользоваться комбинацией клавиш Ctrl + L ). Нас сейчас интересует приглашение консоли. Именно сюда можно вводить JavaScript-код, который выполняется по нажатию клавиши Enter . Введём в консоль следующее:
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
После того, как текст программы оказался в консоли, нажмём клавишу Enter .
Если всё сделано правильно — под этой строчкой появится текст Hello, world! . На всё остальное пока не обращайте внимания.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.
Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js , которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега
Источник статьи: http://habr.com/ru/company/ruvds/blog/429552/
Как писать приложения на Javascript
После долгих раздумий вы решили, что хотите связать свою работу с творчеством, а работаете программистом(или хотите стать). В этой ситуации лучше всего подойдет такой язык как Javascript. Во первых потому, что это самый распространенный язык в веб-программировании и поддерживаете всеми браузерами. Во вторых потому, что frontend — это чистой воды творчество с использованием этого языка!
Выбор языка программирования — это больная тема и с этом никто не станет спорить. Однако выбирать приходится и если ваш выбор пал на Javascript, то мы с вам похожи и я надеюсь помочь вам в этой статье. Для начала было бы полезно прочитать общеобразовательную статью про Javascript, чтобы, так сказать, ответить на возможные вопросы.
Как начать писать приложения на javascript
Вам нужны все два инструмента:
- Редактор(блокнот или специальный редактор кода)
- Браузер
Это одно из тех преимуществ, за которые мне нравится веб-программирование. Писать в блокноте не советую, не удобно и не приносит удовольствия(вариант с блокнотом можно рассматривать в тот момент, когда совсем нечего использовать и нет доступа в интернет, чтобы скачать нормальный редактор).
Существует огромное количество редакторов, но я выделю несколько:
Это лучшие из существующих на рынке редакторов в которых вы можете писать на огромном количестве языков. Это основной инструмент для веб-разработчика(лично я использую ST, потому что он доступен на все ОС, в отличии от Notepad++).
С браузерами такая же ситуация, лучшими являются:
Еще Opera ничего. Тут скорее кому что больше нравится, но любимый браузер всех веб-разработчиков — это GH. Потому что в него включено огромное количество полезных инструментов, которые облегчают работу веб-разработчика.
Чтобы начать писать приложения на JS, нужно(логично), скачать один из редакторов кода(думаю вы знаете как это сделать), но на всякий случай оставлю эти ссылки:
Браузер, как я понял, у вас уже есть.
Я буду использовать Sublime Text и браузер Google Chrome, но принцип везде один и тот же. Чтобы начать писать на javascript, вам нужно создать Html разметку страницы(не буду объяснять как это лучше сделать, не об этом статья):
Достаточно криво выглядит, но мы говорим о javascript, поэтому на красоту HTML, пока что, не будем обращать внимание. 🙂 . Теперь нам нужно подключить наш javascript файл, для чего мы введем в области команду:
Только помните, что файл должен находится в той же директории, что и файл с разметкой HTML:
Теперь открываем наша файл с расширением .js и начинаем писать. Для примера выведем в консоль «Hello world», для чего введем команду:
Теперь сохраняем наш javascript файл и файл с HTML разметкой. После этого откроем HTML документ в браузере:
Откроется просто белая страница, но все не так просто как может показаться. Нам нужно открыть панель инструментов браузера(в случае с google chrome это можно сделать нажав правой кнопкой мыши в любое место и кликнуть по «проверить элемент»). Открыв панель инструментов вы увидите вкладку Console, нажав на которую вы сможете насладится работай вашего javascript.
Вот и все. Теперь вы знаете, что вам нужно для программирования на javascript и можете начать писать на нем. Успехов вам. Думаю теперь вам пригодится техническая литература для веб-программиста 🙂
Источник статьи: http://yhoome.ru/programming/kak-pisat-prilozheniya-na-javascript.html