Изучаем Javascript. Урок первый

JavaScript является преимущественно клиентским языком, обычно использующимся для работы на стороне клиента. С его помощью можно разрабатывать приложения с самым разнообразным функционалом. Это может быть: аналог механических часов, различная анимация, графические эффекты и другое. Ничего не мешает создать практически всё веб-приложение на JS.

Сегодня сложно переоценить роль JavaScript в вебе. Согласно статистике w3techs , сегодня свыше 95% сайтов применяют JS. Оставшиеся 5% - это преимущественно сайты визитки и одностраничники. Невероятная популярность языка делает его одним из самых желанных для изучения и выгодных в плане дальнейшего трудоустройства.

Основан в 1995 году компанией Netscape. Изначально предназначался в роли языка сценариев для их браузера Navigator 2. В начале пути носил название LiveScript. Разработчики воспользовались волной популярность Java и сменили название на JavaScript. Тем не менее по сей день их часто путают начинающие разработчики. Многие заявляют, что это одинаковые языки или имеют малозначимые отличия. Это совсем не так, JS и Java - совсем разные языки. Единственная схожесть в них - названия.

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

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

Сейчас JavaScript может использоваться и в качестве серверного языка. Прежде JS всегда рассматривался исключительно в качестве клиентского языка, работающего исключительно в браузере пользователя. Для работы с сервером приходилось пользоваться чем-то вроде , . За счёт появилась возможность оперировать запросами на сервере посредством JS.

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

В современном мире бум разработки под мобильные устройства, где нашёл себе место и JavaScript . Это способствует повышение производительности мобильных гаджетов и повсеместное использование HTML5. JS позволяет реализовать самые разнообразные возможности даже в мобильных приложениях.

За счёт выхода новых версий Windows от 8 и новее, JavaScript стал использоваться для разработки десктопных приложений под перечисленные операционные системы. Иными словами, JS давно вышел за рамки веб-языка, который используется исключительно браузером.

Многое из того, что раньше называли фантастикой, сегодня успешно реализуется в JavaScript. Это особенно наглядно видно в популярном направлении программирования под IoT. Таким образом JS можно успешно применять для разработки программ вод все существующие умные устройства, поддерживающие работу с интернетом. Сегодня JS встречается практически везде, куда только добралась IT. Это в действительности популярный и невероятно функциональный язык, который планирует развиваться и дальше.

Ещё во время появления языка, браузеры Netscape и IE создали несколько отличающихся реализаций языка. Для унификации всех реализаций и восстановления общего знаменателя, разработали стандарт ECMAScript (управление стандартизацией взяла на себя ECMA). Если где-то увидите термин ECMAScript - это взаимозаменяемый синоним с JavaScript.

Уже сегодня ECMA разработала пару стандартов для JS, они удачно отражают прогресс в разработке самого языка. На сегодня актуальным считается ECMAScript 6 версии от 2015 года. Тем не менее многие браузеры ещё далеки от полной реализации данного стандарта. На завершение его внедрения может уйти ещё несколько лет. В силу этой причины довольно часто рассматривается стандарт ES5, как тот, который полностью поддерживается современными браузерами.

JavaScript - это интерпретируемый язык, то есть он выполняется посредством интерпретатора. Он получает все необходимые инструкции из JS и следует им, выполняя или интерпретируя код.

Инструменты разработки

Для создания кода на JS нужно всего лишь текстовый редактор и браузер, в котором можно тестировать результат. Один из простых и функциональных редакторов текста, который бы я советовал к использованию - Notepad++ . Вообще можно использовать любой удобный.

JavaScript поддерживает и ряд сред разработки, вроде Visual Studio, WebStorm, Netbeans. Они помогают создавать код значительно быстрее и проще.

Дополнительные курсы

На нашем сайте вы можете найти дополнительные курсы по языку JavaScript. Все курсы представлены на .

Учебник по синтаксису JavaScript

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

Будет большим плюсом в изучении синтаксиса JavaScript, если вы уже знакомы с каким-нибудь языком программирования, например PHP , C или Pascal , а также понимаете что такое переменная, тип данных, функция или массив.

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

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

Как происходит изучение JavaScript

Изучение языка JavaScript , обычно делится на четыре этапа:
1. Освоение синтаксиса JavaScript (данный учебник) ,
2. Изучение DOM и BOM ,
3. Управление DOM и BOM c помощью JavaScript,
4. Изучение различных библиотек JavaScript. jQuery — самая популярная на данный момент библиотека (учебник по jQuery должен появиться на этом сайте, в конце 2015 года) .

DOM — это объектная модель документа. Благодаря технологии DOM, теги HTML-страницы начинают представлять из себя дерево объектов и у каждого объекта в этом дереве, есть свой уникальный адрес. Язык JavaScript обращаясь по этому адресу, может получить доступ к тому или иному HTML-тегу и управлять им (изменять цвет, размер, положение и мн. др.).

BOM — это браузерная модель документа. Структура та же самая что и у DOM, только вместо объектов HTML-страницы, выступают объекты браузера: окно браузера, размеры экрана браузера, история посещений, статусная строка и т.д.

После изучени DOM и BOM, приступают к созданию более-менее сложных скриптов на JavaScript, взаимодействующих со страницей и браузером.

Затем, немного освоившись, изучают какую-нибудь библиотеку JavaScript, например jQuery, благодаря ей можно создавать такие же программы как на JavaScript, только намного быстрее и эффективнее.

Некоторые вебмастера сразу приступают к изучению jQuery, пропустив предыдущие три этапа, но я не рекомендую этого делать, поскольку в любом случае нужно понимать синтаксис JavaScript и знать объекты DOM/BOM их свойства, методы и предназначения.

Какие программы можно написать с помощью JavaScript

С помощью можно создавать множество интересных программ (скриптов):
— можно создавать скрипты которые будут изменять элементы страницы сайта или их расположение, путём нажатия на ту или иную кнопку,
— можно создавать анимацию,
— манипулировать формами, например проверять введённые пользователем данные на корректность,
— создавать различные тесты, например типа ЕГЭ (школьных экзаменов) и сразу получать результат,
— благодаря BOM можно узнавать характеристики браузера и компьютера пользователя посетившего ваш сайт, что позволяет создавать различные счетчики посещений,
— с помощью JavaScript, можно создавать даже игры, мультфильмы и множество других интересных и полезных программ.

Какова цель данного самоучителя по JavaScript?

Цель данной книги по JavaScript заключается в том, чтобы обучить вас основам синтаксиса JavaScript , познакомить с программированием и такими понятиями как переменные, типы данных, операции, операторы ветвления, функции, циклы, массивы, объекты и т.д. Всё это встречается и в других языках программирования, поэтому освоив JavaScript, вам уже намного легче будет изучать другие языки, например PHP , C++ или Python .

Структура учебника по JavaScript

В учебнике по JavaScript , будут рассмотрены следующие темы и уроки.

Примеры в каждой главе

С помощью редактора "Попробуйте сами" вы можете изменить все примеры и просмотреть результаты.

Пример Мой первый JavaScript Щелкните на меня, чтобы отобразить дату и время Узнать по примерам

Примеры лучше, чем 1000 слов. Примеры часто легче понять, чем текстовые пояснения.

Этот учебник дополняет все объяснения с уточнением "Попробуйте сами" примеры.

Если вы попробуете все примеры, вы узнаете много о JavaScript, в очень короткое время!

Зачем изучать JavaScript?

JavaScript является одним из 3 языков все веб-разработчики должны узнать:

1. HTML Определение содержимого веб-страниц

2. CSS Указание макета веб-страниц

3. JavaScript Программирование поведения веб-страниц

Веб-страницы не являются единственным местом, где используется JavaScript. Многие настольные и серверные программы используют JavaScript. Node. js является наиболее известным. Некоторые базы данных, такие как MongoDB и CouchDB, также используют JavaScript в качестве языка программирования.

Ты знала?

JavaScript и Java-это совершенно разные языки, как в концепции, так и в дизайне.

JavaScript был изобретен Брендан Айх в 1995, и стал стандартом ECMA в 1997.
ECMA-262 является официальным названием стандарта. ECMAScript является официальным названием языка.

Скорость обучения

В этом учебнике, скорость обучения является вашим выбором.

Все до вас.

Если вы боретесь, сделать перерыв, или перечитать материал.

Всегда убедитесь, что вы понимаете все "попробовать сами" примеры.

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

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

Для того чтобы её написать, если вы пользуетесь Google Chrome, откройте меню браузера и выберите в нём команду Дополнительные инструменты > Инструменты разработчика. Окно браузера окажется разделённым на две части. В одной из них будет видна страница, в другой откроется панель с инструментами разработчика, содержащая несколько закладок. Нас интересует закладка Console (Консоль). Щёлкните по ней. Не обращайте внимания на то, что уже может в консоли присутствовать (для её очистки можете воспользоваться комбинацией клавиш Ctrl + L). Нас сейчас интересует приглашение консоли. Именно сюда можно вводить JavaScript-код, который выполняется по нажатию клавиши Enter . Введём в консоль следующее:

Console.log("Hello, world!")
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.

После того, как текст программы оказался в консоли, нажмём клавишу Enter .

Если всё сделано правильно - под этой строчкой появится текст Hello, world! . На всё остальное пока не обращайте внимания.

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

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

Alert("Hello, world!")
Вот результат выполнения этой программы.

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

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

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

Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением.js , которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега . Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например - в VS Code или в Notepad++) новый файл, который назовём hello.html , и добавим в него следующий код:

document.getElementById("hello").innerHTML = "Hello, world!";
Здесь нас больше всего интересует строчка document.getElementById("hello").innerHTML = "Hello, world!"; , представляющая собой JS-код. Этот код заключён в открывающий и закрывающий теги . Он находит в документе HTML-элемент с идентификатором hello и меняет его свойство innerHTML (то есть - тот HTML код, который содержится внутри этого элемента) на Hello, world! . Если открыть файл hello.html в браузере, на ней будет выведен заданный текст.

Сообщение, выведенное средствами JavaScript в HTML-элемент

Как уже говорилось, примеры, приводимые на сайте w3school.com, можно тут же и попробовать. Существуют и специализированные онлайн-среды для веб-разработки, и, в частности, для выполнения JS-кода. Среди них, например codepen.io , jsfiddle.net , jsbin.com .

Вот, например, как выглядит наш пример, воссозданный средствами CodePen.

В поле HTML попадает код, описывающий HTML-элемент, в поле JS - JavaScript-код, а в нижней части страницы выводится результат.

Выше мы говорили о том, что JavaScript-программы можно выполнять на различных платформах, одной из которых является серверная среда Node.js. Если вы собираетесь изучать JavaScript, ориентируясь именно на серверную разработку, вероятно, вам стоит запускать примеры именно средствами Node.js. Учтите, что, говоря упрощённо, и не учитывая особенности поддержки конкретных возможностей языка используемыми версиями Node.js и браузера, в Node.js и в браузере будет работать один и тот же код, в котором используются базовые механизмы языка. То есть, например, команда console.log("Hello, world!") будет работать и там и там. Программы, использующие механизмы, специфичные для браузеров, в Node.js работать не будут (то же самое касается и попыток запуска программ, рассчитанных на Node.js, в браузере).

Для того чтобы запустить наш «Hello, world!» в среде Node.js, установим Node.js, скачав отсюда подходящий дистрибутив. Теперь создадим файл hello.js и поместим в него следующий код:

Console.log("Hello, World!");
Средствами командной строки перейдём в папку, в которой хранится этот файл, и выполним такую команду:

Node hello.js
Вот каким будет результат её выполнения:

Сообщение, выведенное средствами Node.js

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

Теперь, после того, как состоялось ваше первое знакомство с JavaScript, предлагаем подробнее поговорить об этом языке.

Общие сведения о JavaScript JavaScript - это один из самых популярных языков программирования в мире. Он, созданный более 20 лет назад, прошёл в своём развитии огромный путь. JavaScript задумывался как скриптовый язык для браузеров. В самом начале он обладал куда более скромными возможностями, чем сейчас. Его, в основном, использовали для создания несложных анимаций, вроде выпадающих меню, о нём знали как о части технологии Dynamic HTML (DHTML, динамический HTML).

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

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

Основные характеристики JavaScript JavaScript - это язык, который отличается следующими особенностями:

• Высокоуровневый. Он даёт программисту абстракции, которые позволяют не обращать внимание на особенности аппаратного обеспечения, на котором выполняются JavaScript-программы. Язык автоматически управляет памятью, используя сборщик мусора. Разработчик, в результате, может сосредоточиться на решении стоящих перед ним задач, не отвлекаясь на низкоуровневые механизмы (хотя, надо отметить, это не отменяет необходимости в рациональном использовании памяти). Язык предлагает мощные и удобные средства для работы с данными различных типов.
• Динамический. В отличие от статических языков программирования, динамические языки способны, во время выполнения программы, выполнять действия, которые статические языки выполняют во время компиляции программ. У такого подхода есть свои плюсы и минусы, но он даёт в распоряжение разработчика такие мощные возможности, как динамическая типизация, позднее связывание, рефлексия, функциональное программирование, изменение объектов во время выполнения программы, замыкания и многое другое.
• Динамически типизированный. Типы переменных при JS-разработке задавать необязательно. В одну и ту же переменную можно, например, сначала записать строку, а потом - целое число.
• Слабо типизированный. В отличие от языков с сильной типизацией, языки со слабой типизацией не принуждают программиста, например, использовать в неких ситуациях объекты определённых типов, выполняя, при необходимости, неявные преобразования типов. Это даёт больше гибкости, но JS-программы не являются типобезопасными, из-за этого усложняются задачи проверки типов (на решение этой проблемы направлены TypeScript и Flow).
• Интерпретируемый. Широко распространено мнение, в соответствии с которым JavaScript является интерпретируемым языком программирования, что означает, что программы, написанные на нём, не нуждаются в компиляции перед выполнением. JS в этом плане противопоставляют таким языкам, как C, Java, Go. На практике же браузеры, для повышения производительности программ, выполняют компиляцию JS-кода перед его выполнением. Этот шаг, однако, прозрачен для программиста, он не требует от него дополнительных усилий.
• Мультипарадигменный. JavaScript не навязывает разработчику использование какой-то конкретной парадигмы программирования, в отличие, например, от Java (объектно-ориентированное программирование) или C (императивное программирование). Писать JS-программы можно, используя объектно-ориентированную парадигму, в частности - применяя прототипы и появившиеся в стандарте ES6 классы. Программы на JS можно писать и в функциональном стиле, благодаря тому, что функции здесь являются объектами первого класса. JavaScript допускает и работу в императивном стиле, используемом в C.

Да, кстати, надо отметить, что у JavaScript и Java нет ничего общего. Это - совершенно разные языки.JavaScript и стандарты ECMAScript, или ES, это название стандарта, которым руководствуются разработчики JavaScript-движков, то есть - тех сред, где выполняются JS-программы. Различные стандарты вводят в язык новые возможности, говоря о которых нередко упоминают наименование стандартов в сокращённой форме, например - ES6. ES6 - это то же самое, что и ES2015, только в первом случае число означает номер версии стандарта (6), а во втором - год принятия стандарта (2015).

Сложилось так, что в мире веб-программирования очень долго был актуален стандарт ES3, принятый в 1999 году. Четвёртой версии стандарта не существует (в неё попытались добавить слишком много новых возможностей и так и не приняли). В 2009 году был принят стандарт ES5, который представлял собой прямо-таки огромное обновление языка, первое за 10 лет. После него, в 2011 году, был принят стандарт ES5.1, в нём тоже было немало нового. Весьма значительным, в плане новшеств, стал и стандарт ES6, принятый в 2015 году. Начиная с 2015 года, новые версии стандарта принимают каждый год.

Самой свежей версией стандарта на момент публикации этого материала является ES9 , принятая в июне 2018 года.

Итоги Сегодня мы написали «Hello, World!» на JavaScript, рассмотрели основные особенности языка и поговорили о его стандартизации. В следующий раз поговорим о стиле JavaScript-текстов и о лексической структуре программ.

Уважаемые читатели! Если вы, до чтения этого материала, не были знакомы с JavaScript, просим рассказать о том, получилось ли у вас запустить «Hello, world!».

JavaScript is a programming language that adds interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, and animation). This article helps you get started with this exciting language and gives you an idea of what is possible.

What is JavaScript, really?

Important : If you haven"t been following along with the rest of our course, download this example code and use it as a starting point.

Variables Variable Explanation Example String Number Boolean Array Object

A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks.	let myVariable = "Bob";
A number. Numbers don"t have quotes around them.	let myVariable = 10;
A True/False value. The words true and false are special keywords in JS, and don"t need quotes.	let myVariable = true;
A structure that allows you to store multiple values in one single reference.	let myVariable = ; Refer to each member of the array like this: myVariable , myVariable , etc.
Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.	let myVariable = document.querySelector("h1"); All of the above examples too.

So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn"t change, then you couldn"t do anything dynamic, like personalize a greeting message or change the image displayed in an image gallery.

Comments

You can put comments into JavaScript code, just as you can in CSS:

/* Everything in between is a comment. */

If your comment contains no line breaks, it"s often easier to put it behind two slashes like this:

// This is a comment

Operators Events

Real interactivity on a website needs events. These are code structures which listen for things happening in the browser and runs code in response. The most obvious example is the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:

Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }

There are many ways to attach an event to an element. Here we select the element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run.

Document.querySelector("html").onclick = function() {};

is equivalent to

Let myHTML = document.querySelector("html"); myHTML.onclick = function() {};

It"s just shorter.

Supercharging our example website

Now we"ve gone over a few JavaScript basics, let"s add a few cool features to our example site to see what is possible.

Adding an image changer

In this section, we"ll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.

First of all, find another image you"d like to feature on your site. Be sure it is the same size as the first image, or as close as possible.

Save this image in your images folder.

Rename this image "firefox2.png" (without quotes).

Go to your main.js file, and enter the following JavaScript. (If your "Hello world!" JavaScript is still there, delete it.) let myImage = document.querySelector("img"); myImage.onclick = function() { let mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") { myImage.setAttribute ("src","images/firefox2.png"); } else { myImage.setAttribute ("src","images/firefox-icon.png"); } }

Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

If you get stuck, you can compare your work with our finished example code on GitHub .

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic .