Гайд для начинающих: как написать 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/
HTML, CSS и JavaScript в вебе (поймут даже чайники)
Вы время от времени задумываетесь, как работает программирование, но не делали ничего сложнее в Интернете, чем загрузка фотографии в Facebook? Тогда вы в нужном месте.
Для тех, кто никогда «кодил» раньше, концепция создания веб-сайта с нуля, макет, дизайн и иже с ними — могут показаться действительно пугающими. Вы представляете студентов Гарварда из фильма «Социальная сеть», сидя за своими компьютерами с гигантскими наушниками и набирающими код, и думаете: «Я никогда не смогу этого сделать».
Любой может научиться программировать, точно так же, как любой может изучить новый язык. На самом деле, программирование вроде как говорит на иностранном языке — именно поэтому они называются языками программирования. Каждый из них имеет свои собственные правила и синтаксис, которые необходимо изучать шаг за шагом. Эти правила — способы сообщить компьютеру, что делать, точнее, они — способ сообщать вашим браузерам, что делать.
Цель этого поста – познакомить Вас с основами HTML, CSS и одного из самых распространенных языков программирования — JavaScript. Но прежде чем мы начнем, давайте дадим представление о том, какие языки программирования действительно существуют.
Что такое язык программирования?
Программировать или «кодить» — это как решать головоломку. Как изучать иностранный язык, например английский или французский. Мы используем эти языки, чтобы превращать мысли и идеи в действия и поведение. В программировании цель точно такая же — вы просто управляете разными видами поведения, а источник этого поведения не человек, а компьютер.
Язык программирования — это наш способ общения с программным обеспечением.
Программирование в веб-разработке
Сотруднику ставится задача «создать веб-страницу с таким-то заголовком, таким-то шрифтом, такими-то цветами, изображениями и анимированными единорогами, бегущими по экрану, когда пользователи нажимают на эту кнопку», главная цель — принять эту большую идею и разбить ее на маленькие части.
Каждая страница в Интернете, которую вы посещаете, строится на выполнении отдельных инструкций шаг за шагом. Ваш браузер (Chrome, Firefox, Safari и т.д…. если используете Internet Exploler, не читайте дальше, выключите компьютер и идите гулять) играет колоссальную роль в отображении кода и тем, что мы можем видеть на наших экранах и даже взаимодействовать. Помните, что код без браузера — это просто текстовый файл — это когда вы помещаете этот текстовый файл в браузер, что происходит волшебство. Когда вы открываете веб-страницу, браузер отображает HTML и другие языки программирования в максимально понятном для вас формате.
HTML и CSS на самом деле всего лишь структура страницы и информация о стиле. Прежде чем перейти к JavaScript и другим языкам программирования, необходимо знать основы HTML и CSS, поскольку они находятся на передней части каждой веб-страницы и приложения.
В самом начале 1990-х годов HTML был единственным языком, доступным в Интернете. С тех пор многое изменилось и теперь одним из самых распространенных языков программирования является JavaScript.
В первую очередь, необходимо понять, что HTML — основа каждой веб-страницы, независимо от сложности сайта или количества задействованных технологий. Это важный навык для любого веб-профессионала и отправная точка для всех, кто имеет отношение к созданию или редактированию контента в Интернете. И, к счастью для нас, ему удивительно легко учиться.
HTML отображает язык разметки гипертекста. «Язык разметки» означает, что HTML использует теги для идентификации различных типов контента и целей, которые каждый преследует на веб-странице.
Взгляните на статью ниже. Если бы мы попросили вас структурировать текст, вы, вероятно, легко бы справились: наверху находится заголовок, затем подзаголовок, основной текст и изображения внизу.
Для разметки разметки используются HTML-теги, также известные как «элементы». Они имеют довольно интуитивные типы: заголовки, теги абзацев, теги изображений и т. д.
Каждая веб-страница состоит из нескольких тегов HTML, обозначающих определенный тип контента на странице. Каждый тип содержимого на странице «обернут», т. е. окружен тегами.
Например, слова, которые вы сейчас читаете, являются частью абзаца. Если кодировать эту страницу с нуля, этот абзац начался бы с тега абзаца открытия:
. Часть «тега» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо какого-либо другого типа содержимого.
После того, как тег был открыт, все следующее содержимое считается частью этого тега, пока вы не закроете его. Когда абзац заканчивается, нужно ставить тег заключительного абзаца: . Обратите внимание, что закрывающие теги выглядят точно так же, как открывающие теги, за исключением того, что после левой угловой скобки есть косая черта. Вот пример:
Используя HTML, вы можете добавлять заголовки, форматировать абзацы, разрывы строк, создавать списки, выделять текст, создавать специальные символы, вставлять изображения, создавать ссылки, создавать таблицы, управлять некоторым стилем и многое другое.
Чтобы узнать больше о HTML, можно ознакомиться с руководством по базовому HTML или использовать бесплатные классы и ресурсы на codecademy, но пока перейдем к CSS.
CSS — это каскадные таблицы стилей. Этот язык разметки определяет, как HTML-элементы веб-сайта должны отображаться на интерфейсе страницы.
Если HTML — это гипсокартон, CSS — это краска.
В то время как HTML является основной структурой вашего сайта, CSS — это то, что дает всему вашему сайту стиль. Цвета, интересные шрифты и фоновые изображения – все это заслуга CSS. Этот язык влияет на все настроение веб-страницы, что делает его невероятно мощным инструментом и важным навыком для веб-разработчиков. Он также позволяет веб-сайтам адаптироваться к различным размерам экрана и типам устройств.
Чтобы показать вам, что CSS делает для веб-сайта, просмотрите следующие два снимка экрана. Первый снимок экрана — это сообщение моего коллеги, но показано в основном HTML, а второй снимок экрана — это тот же пост в блоге с HTML и CSS.
Пример HTML без CSS, приводящий к неформатированному сообщению блога HubSpot
Обратите внимание, что все содержимое не изменилось, но визуально все выглядит иначе. Это то, что вы увидите, если таблица стилей по какой-либо причине не прогрузится на сайт. Теперь, вот как выглядит одна и та же веб-страница с добавлением CSS.
Пример HTML + CSS, используемый для форматирования сообщения блога HubSpot
Видите ли, HTML, разработанный еще в 1990 году, на самом деле не предназначен для отображения информации о физическом форматировании. Первоначально он создан для определения структурного содержания документа, например заголовков и абзацев. HTML вывел эти новые конструктивные особенности, а CSS был изобретен и выпущен в 1996 году: все форматирование может быть удалено из документов HTML и сохранено в отдельных файлах CSS (.css).
Итак, что же такое CSS? Он обозначает каскадные таблицы стилей — и «таблицу стилей» самого документа. Любой браузер имеет таблицу стилей по умолчанию, поэтому на каждой веб-странице отражается хотя бы одна таблица стилей, в зависимости от того, какой браузер посетитель использует, независимо от дизайна страницы. К примеру, допустим стиль шрифта нашего браузера по умолчанию — Times New Roman, размер 12, если разработчик не применил собственную таблицу стилей, то посетитель увидит веб-страницу в Times New Roman размером 12.
Разумеется, в большинстве случаев используется пользовательский CSS. Именно здесь вступает в игру слово «каскадирование» — подобно водопаду, вода падает вниз и поражает все на пути, однако скалы внизу влияют на то, где она будет течь. Точно так же последняя определенная таблица стилей сообщает моему браузеру, какие инструкции имеют приоритет.
JavaScript является более сложным языком, чем HTML или CSS, и он не был выпущен в бета-версии до 1995 года. В настоящее время JavaScript поддерживается всеми современными веб-браузерами и используется практически на каждом сайте в Интернете для более мощных и сложных функций.
Для чего используется JavaScript?
JavaScript — это логический язык программирования, который можно использовать для изменения содержимого веб-сайта и заставить его вести себя по-разному в ответ на действия пользователя. Общее использование JavaScript включает в себя окна подтверждения, призывы к действию и добавление новых идентификаторов к существующей информации.
Короче говоря, JavaScript — это язык программирования, который позволяет веб-разработчикам создавать интерактивные сайты с динамичными элементами.
Одним из примеров JavaScript в действии являются окна, которые появляются на вашем экране. Подумайте, как в последний раз, когда вы ввели свою информацию в онлайн-форму, и появилось окно с подтверждением, попросив вас нажать «ОК» или «Отменить», чтобы продолжить. Это стало возможным благодаря JavaScript — в коде вы найдете инструкцию if else, которая говорит компьютеру делать что-то одно, если пользователь нажимает «ОК», и другое дело, если пользователь нажимает «Отмена».
Другим примером JavaScript является призыв к действию (CTA), подобно тем, которые помещаются в сообщения в блоге, которые появляются в нижней правой части экрана. Вот как это выглядит:
Источник статьи: http://vc.ru/flood/50683-html-css-i-javascript-v-vebe-poymut-dazhe-chayniki