Написание простой программы 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 для начинающих – простые примеры
Всем привет, вот и пришло время узнать нам с Вами основы JavaScript, так как JavaScript является той технологией, с помощью которой можно организовать динамические HTML страницы у себя на сайте.
Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML. Также, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.
Основы JavaScript — теория
И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.
Зачем нужен JavaScript?
А зачем Вы спросите организовывать динамические страницы?
Во-первых, это красиво, удобно и современно.
Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.
Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.
Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.
В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.
Узлы этого кода:
Корневой Узел – html
Дочерний Узел узла HTML — body
Дочерний Узел узла body – p
Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).
Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.
По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.
Пример кода JavaScript
Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать «Добавить в список» и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.
Код JavaScript:
//пишем функцию добавления нового пункта в списке function addLi() < var stroka = prompt("Введите название строки:", "");//для ввода названия новой строки if (stroka)< var ol = document.getElementById ("spisokst");//находим наш список var li = document.createElement("LI");//создаем новый элемент списка ol.appendChild(li);//присваиваем нашему списку новый элемент var text = document.createTextNode(stroka);//создаем новый узел текст li.appendChild(text);//присваиваем этот текст нашему новому пункту списка >> //пишем функцию удаления пунктов из списка function deleteLi() < var ol = document.getElementById ("spisokst");//находим наш список var lastLi = ol.lastChild;//заводим переменную и храним в ней последний элемент нашего списка //проверяем на наличие нашего элемента, исключая пробелы, табуляции и комментарии while (lastLi && lastLi.nodeType != 1)< lastLi = lastLi.previousSibling; >if (lastLi) < lastLi.parentNode.removeChild(lastLi);//удаляем пункт списка, //если конечно в списке еще что-то осталось >> В самом коде я написал комментарии, поэтому я думаю проблем возникнуть не должно, что для чего. Но я все равно поясню общую картину.
У нас есть некий список, помеченный для того чтобы нам было его легче найти, из JavaScript. Затем мы пишем две функции на javascript:
1. addLi() –для добавления новых строк.
В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var).
Затем с помощью метода getElementById объекта document, находим нужный нам id списка.
Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы).
Далее с помощью метода appendChild мы присваиваем нашему списку еще один новый пункт LI.
Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.
И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст) с помощью метода appendChild.
2. deleteLi() – для удаления этих строк.
Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.
Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).
Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка» и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)
3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список» запускается функция addLi(), а при клике на кнопку «Удалить из списка» запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.
Надеюсь, сегодняшний урок был Вам полезен и интересен, в следующих уроках будем рассматривать уже примеры посложней.