Введение в JavaScript - простой вывод

Изучение Node.js, JQuery, и Angular.js может быть очень веселым, но я думаю, что иметь некие базовые знания очень важно, и знать, как использовать простой JavaScript. Эта серия статей посвятит вас в JavaScript.

Прежде, чем мы перейдем к синтаксису, давайте узнаем, где мы можем запустить JavaScript.

Традиционно JavaScript использовался внутри браузеров, таких как Mozilla Firefox, Internet Explorer, Chrome, Opera, или Safari. Авторы добавляют JavaScript код в HTML страницы, которые получают пользователи, посещая веб-сайт. JavaScript код выполняется в браузере (то, что мы называем "на стороне клиента", в отличие от запуска "на стороне сервера").

В последнее время люди начали использовать JavaScript также и на сервере. Возможно, самая известная среда для работы JavaScript на сервере это Node.js, но есть и другие. К примеру, io.js (форк от Node.js).

Мы можем выделить три основные части того, что мы обычно называем "JavaScript".

1. Сам язык. Он достаточно стандартный среди различных сред, как на стороне браузера, так и сервера.
2. DOM API - как язык может взаимодействовать с различными частями веб страницы в браузере. И, хотя с этой стороны браузеры достаточно близки друг к другу, все же они отличаются. Некоторые библиотеки, особенно заметна Query, пытаются предоставлять унифицированный API.
3. API на сервере (или просто API), предоставляемый Node.js или одной из других систем на стороне сервера.

В этой серии статей мы посмотрим все три основных компонента.

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

Редактор или IDE

Можно использовать любой текстовый редактор.

На MS Windows вы можете использовать даже встроенный Notepad, но я бы рекомендовал что-нибудь более функциональное. Вы можете скачать Notepad++, который очень похож на Notepad, но с кучей разных фич, или Aptana Studio. Научиться работать в последней будет сложнее, так что возможно, вы заходите начать с чего-то попроще.

Вставка или подключение

Вы можете как вставить JavaScript код прямо внутрь HTML файла, так и подключить внешний файл, содержащий весь JavaScript код. В большинстве случаев последнее предпочтительнее, но для нашего первого примера мы вставим JavaScript внутрь некоего HTML (просто для того, чтобы делать всю работу в одном файле).

Чтобы это сделать, мы просто добавляем открывающий тег <script> и закрывающий тег </script>. Между ними мы пишем наш JavaScript код.

Ввод и вывод

Самое первое, что нам нужно узнать, это как взаимодействовать с кодом JavaScript, работающим в браузере. Есть несколько способов, которыми JavaScript может показать текст для пользователя (вывод). Самый простой - функция alert:

alert

Это покажет в браузере всплывающее окно (попап) с текстом. (Вы можете нажать Try! и страница откроется в отдельном окне). Функция alert() сейчас используется редко, но это простой способ продемонстрировать работу JavaScript.

examples/js/alert.html

<script language="javascript">

alert("Hello World");

</script>

view

Если хотите попробовать сделать это самостоятельно, откройте ваш редактор и создайте файл с расширением .html (например, hello.html) и вставьте код ниже в ваш файл. Затем вернитесь в браузер и откройте файл в браузере (большиство браузеров позволяет это сделать с помощью меню File/Open File).

document.write

examples/js/document_write.html

First line
<script>

document.write("<h1>Hello World</h1>");

</script>
Last line

view

В этом примере у нас есть некоторый текст (First line), затем JavaScript код, а затем еще немного текста (Last line). Этот код на JavaScript использует функцию document.write для изменения содержимого страницы. Он просто вставит <h1>Hello World</h1> после "First line", но до "Last line".

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

console.log

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

examples/js/console.html

<script>

console.log("Hello World");

</script>

view

Большинство веб-браузеров предоставляют то, что называется "JavaScript console". Это дополнительное окно (которое не видно в нормально режиме), где браузер выводит предупреждения и ошибки, сгенерированные кодом JavaScript. Разработчики также могут выводить информацию в эту консоль с помощью вызова console.log().

Для того, чтобы увидеть консоль, вам нужно будет ее открыть. Если вы используете Chrome на OSX вы можете открыть консоль с помощью Command-Option-J.