Основы JavaScript


Содержание

JavaScript для начинающих | Введение

Это вводный курс по JavaScript для начинающих. В плане очередности это третий по счету предмет, который необходимо знать грамотному веб-разработчику. Первые два — это HTML и CSS, разумеется. Вэлкам!

Язык сценариев JavaScript был разработан Бренданом Эйхом (Brendan Eich) в 1995 году, как одно из расширений для браузера Netscape Navigator 2.0, о котором мало уже кто помнит. Но сам язык живет и процветает.

В отличие от HTML и CSS это уже настоящий язык программирования. Можно сказать, что HTML и CSS — это только цветочки, а вот JavaScript — такие себе ягодки ягодки. Различаются они принципиально. HTML — банально разметка (или иначе — структура сайта), а CSS — внешний вид этой разметки. А вот JavaScript позволяет создавать именно программы, которые предписывают компьютеру пользователя выполнять активные действия.

Поэтому, если вы еще не знаете даже таких простых вещей, как HTML и CSS, то за JavaScript вам браться явно рановато.

Но пугаться не стоит. В отличие от старших братьев, типа Java или C++, JavaScript довольно простой язык. Освоить его может любой начинающий веб-разработчик. Во всяком случае, научиться им пользоваться совсем не трудно.

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

Зачем нужен JavaScript?

Зачем вообще использовать какие-то скрипты на стороне пользователя? Ключевое слово здесь — обработка событий. Таким событием может стать, например, клик по кнопке в форме отправки данных. Для этого предусмотрены специальные атрибуты, начинающиеся с on.

Примеры таких атрибутов:

onclick — одиночный щелчок мышью;
onmouseover — размещение курсора мыши в области, которую занимает какой-либо элемент страницы;
onfocus — выделение (фокусировка) элемента. Например, поля формы, куда установлен курсор.

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

Все верно, JavaScript не обрабатывает данные, это делает php на удаленном сервере.

Но что если пользователь не все заполнил? Если, к примеру, пропустил обязательные поля, помеченные звездочкой * . Что тогда? Тогда с сервера к нему прилетит новая страница, на которой будет написано, какой он лох.

Принципиальная разница тут вот в чем: без использования JavaScript при отправке формы запрос будет в любом случае отправлен на удаленный сервер, даже если форма заполнена неправильно или не полностью. И от сервера будет получен ответ с ошибкой. Пользователю придется все вводить заново. И так каждый раз. А если применить JavaScript, то страница с формой не будет отправлена на сервер до тех пор, пока пользователь не введет правильные данные.

То есть, скрипт, как говорится, «не отходя от кассы», прямо в браузере пользователя проверит форму и выдаст сообщение в случае неправильного или недостаточного ее заполнения. Здесь он выступает как контролирующий орган.

Согласитесь, что это гораздо удобнее, занимает меньше времени и, безусловно, съедает меньше трафика. А в случае с мобильным подключением к сайту это тем более существенно.

Таким образом, сценарии JavaScript — это удобные помощники, которые не только проверяют введенные данные, но и выполняют еще массу полезных действий на стороне пользователя. Взять, к примеру, те же выпадающие списки меню или сворачиваемые окна, всевозможные слайдеры и эффектные галереи картинок, подсветка активных полей формы или всплывающие подсказки на страницах сайта и многое другое.

Продвинутый читатель скажет:

— Ха! Так это же все можно сделать и на чистом CSS3 без всяких скриптов!

Согласен, кроме слова «все». Все да не все. Всякие свистелки и перделки можно и на чистом CSS3 сотворить, но проверить правильность заполнения формы CSS никак не может. А кроме этого существует еще тысячи способов использовать скрипты JavaScript для более серьезных вещей. Иначе умные люди не стали бы впихивать JavaScript в тот же Bootstrap или создавать мегаполезную библиотеку скриптов jQuery.

Как включить JavaScript в страницу сайта

Существует несколько вариантов подключения JavaScript на страницах сайта.

1. Небольшой код JavaScript можно внедрить непосредственно в тегах HTML. Например, следующий код будет выводить в поле формы текст «Ведите ваш E-mail», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:

Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.

Однако JavaScript активно использует те же символы, что применяются в HTML. Например, угловые скобки или прямые кавычки. Чтобы браузер не ошибся в интерпретации этих знаков, обычно сценарии записываются между специальными тегами:

2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами .

Но это не всегда удобно, а в некоторых случаях и чревато.

К примеру, если пользователь отключил в своем браузере работу скриптов, то страница может «зависнуть» на этом месте и не загрузиться полностью. Поэтому обычно рекомендуется размещать скрипты в самом низу страницы перед закрывающим тегом

Самоучитель JavaScript

Что такое JavaScript

— это язык программирования. Он используется для вставки в html-код страниц и выполняется в браузере. То есть даже если пользователь отключится от интернета, то уже закруженный сценарий JavaScript будет выполняться.

При помощи JavaScript делают:

  • Динамические слайд-шоу на страницах.
  • Можно сделать любые динамические эффекты с картинками, текстом, блоком.
  • Проверку форм перед отправкой их на сервер.
  • Многое другое.

Начинаем учить JavaScript

Далее читаем как вставить комментарии в JavaScript. Это нужно знать перед продолжением обучения, так как комментарии часто будут встречаться в коде. Вообще, в начале обучения придётся много читать, перед тем как всё сложится в общую картину и вы начнёте применять знания на практике.

Далее читаем синтаксис JavaScript — это, можно сказать, основа основ, точнее — одна из основ.

Далее читаем переменные JavaScript — это один из типов кирпичиков языка.

Над переменными можно совершать действия при помощи операторов, читаем операторы JavaScript.

Подробнее про некоторые операторы:

Далее изучаем возможность управлять ходом сценария: читаем условные коситрукции JavaScript: if и else и JavaScript: switch.

Далее, в сценарии часто нужно выполнить какую-то операцию многократно. Для этого используют циклы. Читаем: цикл for в JavaScript.

Сложные темы JavaScript

Получаем доступ к тегам и менаяем их свойства при помощи метода getElementsByTagName.

Учебник Javascript для начинающих

JavaScript — это язык программирования, который активно используется в HTML и при разработке сайтов.

Программы на языке JavaScript обычно называют сценариями. Они вставляются напрямую в HTML код веб-страницы и выполняются браузером пользователя. Сценарии JavaScript позволяют придать веб-странице динамичность и сделать ее интерактивной.

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

JavaScript это один из 3 языков программирования, которые должен знать каждый, кто занимается веб-разработкой:

  1. HTML — определяет содержимое веб-страницы
  2. CSS — определяет стили отображения содержимого веб-страницы
  3. JavaScript — программирует поведение веб-страницы

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

Что такое JavaScript?

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

Зачем нужен JavaScript?

Благодаря скриптам JavaScript статичные HTML документы можно сделать динамичными и интерактивными.

  • Различные визуальные эффекты, вроде слайдеров, галерей картинок и динамического текста;
  • Проверка пользовательских данных формы до их отправки на сервер;
  • Вывод информации в новых окнах в автоматическом режиме;
  • Изменение содержимого окна браузера, в зависимости от действий пользователя;

Все это и многое другое реализуется при помощи JavaSсript.

Стоит сказать, что

JavaScript и Java совершенно разные, как по концепции, так и по реализации, языки программирования.

JavaScript был придуман Бренданом Эйхом (Brendan Eich) в 1995 году и стал стандартом ECMA в 1997 году. Официальное название стандарта — ECMA-262. А официальное названия языка — ECMAScript.

Язык программирования JavaScript: информация для начинающих

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

Языки программирования – это только лишь инструмент, с помощью которого человек строит правила в созданных системах.

Интернет представляет собой массу возможностей, за которые ухватываются светлые и предприимчивые умы. Конечно, веб-разработка тоже имеет свои инструменты для воплощения идей в жизнь. Один из них – язык программирования JavaScript , о котором и пойдёт речь в данной статье:

Общая информация

Многие люди, даже не имеющие никакого отношения к IT-сфере, слышали слово Java . Революционный независимый от платформ язык, на котором активно пишут приложения для мобильных систем. Он был разработан перспективной компанией Sun , которая затем перешла « под крыло » Oracle . Но ни та, ни другая компании не имеют никакого отношения к JavaScript :

От Sun потребовалось лишь разрешение на использование части названия. Удивительно, но JavaScript вообще не принадлежит ни одной фирме.

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

  • Объектно-ориентированность. Выполнение программы представляет собой взаимодействие объектов;
  • Приведение типов данных проводится автоматически;
  • Функции выступают объектами базового класса. Эта особенность делает JavaScript похожим на многие функциональные языки программирования, такие как Lisp и Haskell ;
  • Автоматическая очистка памяти. Так называемая, сборка мусора делает JavaScript похожим на C# или Java .

Если говорить о сути применения JavaScript , то этот язык позволяет « оживлять » неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение ( так называемые, скрипты ). То есть, можно провести аналогию с мультфильмами, где html и css – это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.

Если говорить о синтаксисе JavaScript , то ему присущи следующие особенности:

  • Регистр важен. Функции с названиями func() и Func() – совершенно разные;
  • После операторов необходимо ставить точку с запятой;
  • Встроенные объекты и операции;
  • Пробелы не учитываются. Можно использовать сколько угодно отступов, а также переводов строки, чтобы оформить свой код.

Простейший код на JavaScript выглядит следующим образом:

Сфера применения

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

  • Разработка веб-приложений. Хотите установить простой счетчик, организовать передачу данных между формами или поместить на своем сайте игру? Тогда JavaScript выступит верным помощником в этом деле;
  • «Активное участие» в AJAX . Эта технология позволила значительно ускорить работу приложений, осуществляя обмен данными с сервером в « фоновом » режиме:
  • Операционные системы. Возможно, кто-то не знал, но Windows , Linux и Mac имеют своих браузерных конкурентов, львиная доля кода которых написана на JavaScript ;
  • Мобильные приложения;
  • Сфера обучения. Любая программистская специальность в университете включает в себя изучение JavaScript в том или ином объеме. Это обусловлено тем, что язык изначально разрабатывался для не очень сильных программистов. Уроки JavaScript логически вплетаются в базовый курс HTML , поэтому освоение проходит достаточно просто.

Преимущества и недостатки

Не стоит думать, что JavaScript – это какая-то панацея от всех проблем, и каждый программист с улыбкой на лице пользуется этим языком. Всё на свете имеет свои положительные и отрицательные стороны. Для начала, отметим недостатки.

  • Необходимость обеспечивать кроссбраузерность. Раз уж JavaScript выступает как интернет-технология, то приходится мириться с правилами, которые устанавливает всемирная паутина. Код должен корректно выполняться во всех, или хотя бы самых популярных, браузерах;
  • Система наследования в языке вызывает трудности в понимании происходящего. В JavaScript реализовано наследование, основанное на прототипах. Люди, изучавшие другие объектно-ориентированные языки программирования, привыкли к привычному « класс потомок наследует родительский класс ». Но в JavaScript такими вещами занимаются непосредственно объекты, а это не укладывается в голове;
  • Отсутствует стандартная библиотека. JavaScript не предоставляет никаких возможностей для работы с файлами, потоками ввода-вывода и прочими полезными вещами;
  • Синтаксис в целом затрудняет понимание. Красота кода – явно не конёк JavaScript , но главное правило программистов соблюдено: « Работает? Не трожь! ».

Теперь стоит отметить некоторые преимущества

  • JavaScript предоставляет большое количество возможностей для решения самых разнообразных задач. Гибкость языка позволяет использовать множество шаблонов программирования применительно к конкретным условиям. Изобретательный ум получит настоящее удовольствие;
  • Популярность JavaScript открывает перед программистом немалое количество готовых библиотек, которые позволяют значительно упростить написание кода и нивелировать несовершенства синтаксиса;
  • Применение во многих областях. Широкие возможности JavaScript дают программистам шанс попробовать себя в качестве разработчика самых разнообразных приложений, а это, безусловно, подогревает интерес к профессиональной деятельности.

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

Для тех, кто хочет изучать

Сложный и длинный путь предстоит тем, кто решил основательно изучить JavaScript . Для начинающих существуют базовые рекомендации, следуя которым, можно значительно упростить свое обучение.

  • Прежде всего, HTML . Нельзя начинать делать что-либо для интернета без основы основ. Каскадные таблицы стилей ( CSS ) также очень сильно пригодятся;
  • Использовать новую литературу. Программирование – это не физика, законы которой нерушимы, а новые учебные пособия – это урезанные старые. IT-технологии постоянно развиваются, и не стоит пренебрегать полезными обновлениями;
  • Стараться самостоятельно писать все участки программы. Если что-то ну совсем не получается – можно позаимствовать чужой код, но лишь предварительно уяснив для себя каждую строчку;
  • Отладка – ваш верный друг. Быстро находить ошибки – один из важнейших моментов в программировании;
  • Не игнорируйте нормы форматирования. Конечно, код не станет лучше или хуже от разного количества отступов и пробелов, но легкость чтения и понимания программистом – тоже немаловажный момент. Код, приведенный ниже? очень трудно воспринимается, особенно если вы не его автор:
  • Имена переменных должны иметь лексическое значение. В процессе написания простых программ это кажется вовсе не важным, но когда количество строк кода переваливает за тысячу – все черти ломают ноги;
  • Комментируйте. Этот пункт вдогонку к предыдущему;
  • Наблюдайте за опытными людьми. Видеоуроки дают возможность увидеть создание программ. Это даже лучше, чем лекции в университете, ведь запись можно в любой момент остановить и повторить снова;
  • Будьте в курсе всех новостей. Отслеживание всего нового и свежего даст возможность ощущать себя «в гуще событий», а это подталкивает к покорению собственных вершин.

Таким образом, можно утверждать, что JavaScript получил широкое распространение в сфере веб-программирования, вобрав в себя возможности объектно-ориентированных и функциональных языков. Несмотря на несколько неудобный синтаксис, JavaScript активно применяется в учебных программах.

Для новичков важно помнить, что язык – это всего лишь инструмент, а главное в программировании – мысль.

Основы языка javascript: введение в программирование для создания функциональных сайтов

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

Хочу отметить, что курс писался для начинающих javascript-овых разработчиков, однако он будет полезен и продвинутым девелоперам.

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

Мир JavaScript-а

Сначала хочу поведать вам несколько интересных фактов, которые нужно знать, если вы хотите писать на конкретно этом языке и вообще работать в ИТ-шной области.

Итак, главным разработчиком JavaScript был Бредан Эйх. Он вместе с командой опытных экспертов начал создавать новый язык, который сможет внедряться в разметку на html. Это было в далеком 1995 году.

Некоторые из вас конечно могут сказать: «Как же далеком, если я застал тот год». В мире IT все развивается с бешенной скоростью (думаю вы обратили на это внимание), новые фреймворки и технологические решения появляются буквально каждый месяц.

Конечно языки выпускаются не с такой частотой, но большинство популярных и перспективных языков были созданы менее 15 лет назад (например, Swift презентовали только 2 года назад). Так что разработки быстро переходят из состояния «инновация» в состояние «старый (традиционный) инструмент для работы».

Очень часто новички путают JavaScript с Java, обращая внимание только на название и не понимая, в чем же собственно разница.

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

Java – это язык высокого уровня, код которого транслируется на виртуальной машине. В 1995 году он считался самым популярным и часто используемым языком для написания множества программ в разных сферах IT.

JavaScript же является встраиваемым языком в html-код и его главное предназначение – сделать страницу веб-ресурса интерактивной, т.е. более гибкой и «коммуникабельной». Он основан на ECMAScript, который в свою очередь является фундаментом еще для нескольких скриптовых языков.

JavaScript такое название получил не сразу. Изначально он был прозван Mocha, после переименован на LiveScript. Однако было принято решение воспользоваться хитрой маркетинговой фишкой и в название нового продукта включить слово «Java». Кстати, любое приложение, написанное на этом языке, называется скриптом.

Илон Маск рекомендует:  Псевдокласс hover

Возможности JavaScript

Современный JavaScript является интерпретируемым языком. Это означает, что код программ обрабатывается и выполняется «как есть». Именно так браузеры работают со скриптами.

Если отойти в сторону от веб-разработки, то JavaScript можно найти и в других областях. С его помощью пишут разные виды приложений, игры, прикладное ПО и многое другое. Скрипты можно запустить абсолютно везде и не только в браузерах. Главное условие – наличие интерпретатора кода.

Основными преимуществами и навыками JavaScript-а являются:

  • Умение создавать пользовательские теги в разметке html, а также удалять и видоизменять существующие;
  • Быстрое и простое подключение к html;
  • Возможность реагировать на различные пользовательские действия: кликанье, перемещение курсора по веб-странице, набор символов на клавиатуре и т.д.;
  • Способность срабатывать в указанные моменты;
  • Взаимодействие с jquery и ajax. При помощи первой технологии, которая является библиотекой JavaScript, упрощается работа с многими элементами веб-сервисов и в том числе с ajax. Ajax в свою очередь позволяет реализовывать очень классный финт ушами: отправлять информацию на сторону сервера, получать ответ и обновлять данные на веб-странице, не перегружая ее целиком.
  • Спецификация JavaScript является общим стандартом и поэтому поддерживается всеми существующими браузерами;
  • Высокая скорость работы.

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

Во-первых, ключевое слово в предыдущем предложении – «иногда». Да, некоторые свойства внешнего вида веб-сервисов можно прописать с помощью скриптов, однако далеко не все.

Все-таки css и css3 живут ради исполнения своей главной цели – обеспечение качественного и многофункционального дизайна страниц сайтов. И стоит им отдать должное, ведь справляются со своей задачей они безупречно.

Во-вторых, в случае необходимости изменить оформление внешнего вида веб-сервисов, реализованных на языке js, будет намного труднее и ресурсозатратнее.

Ограничения js

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

Для начала в JavaScript отсутствует строгая типизация. Это может порадовать только вначале, когда голову посещают мысли: «Наконец не надо заморачиваться по поводу типов переменных и их конвертации».

Однако по мере увеличения сложности и объемов кода отсутствие типизации открывает свою настоящую сущность. Хотя бы взять компилятор. Он не может сообщить об ошибках несоответствия типов данных, так как сам не знает их до тех пор, пока не отработает нужная строчка программы.

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

Что касается наследования, то эту тему нужно подробно разбирать, ведь наследование в js – это совершенно другой механизм, отличающийся от привычного наследования в популярных языках. Пока скажу только, что он основан на прототипах и наследование выполняется через объекты.

Как подключается скриптовый код к html?

Для этого существует несколько способов, а точнее три. Выбор одного из них зависит от количества кода и самого проекта.

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

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

Однако если вы вставите код в любом другом месте, результат работы от этого не изменится. Сейчас я покажу стандартный пример первой программы на js, который стал своего рода традицией посвящения новичков в изучение нового языка программирования. Давайте поприветствуем мир!

JavaScript Уроки и примеры

JavaScript — это язык программирования HTML и Web.

JavaScript прост в изучении.

Этот учебник научит вас JavaScript от Basic до Advanced.

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

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

Пример

Мой первый 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 является официальным названием языка.

Вы можете прочитать больше о различных версиях JavaScript в версии главы JS.

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

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

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

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

Основы языка JavaScript

1. Основы языка JavaScript *

1.1. Основные особенности JavaScript *

1.2. Возможности языка JavaScript *

1.3. Основные типы данных *

1.4. Переменные. Приведение типов *

1.5. SCRIPT-вставки в HTML-документе *

2. Операторы, выражения, функции *

2.1. Операторы: арифметических действий, присваивания, инкрементные, декрементные. Условные выражения *

2.2. Строковые операции *

2.3. Побитовые операции присваивания *

2.4. Операторы сравнения *

2.5. Старшинство операций *

2.7. Условный оператор if *

3. Объектная модель *

3.1. Классы, объекты, поля данных, методы *

3.2. Работа с полями данных и методами уже существующих объектов *

3.3. Задание нового класса объектов. Квалификатор this *

3.4. Операторы for и with для работы с объектами *

3.5. Правила работы с объектами *

3.6. Динамическое формирование документа *

4. Классы и объекты языка JavaScript *

4.1. Класс Global (задан неявно) *

4.3. Класс Window *

4.4. Коллекция фреймов (window.frames) *

4.5. Класс Document (window.document) *

4.6. Класс Location (window.location) *

4.7. Класс Link (document.link) *

4.8. Класс History *

4.9. Класс MimeType *

4.10. Класс Navigator *

5. Экранные формы *

5.1. Класс Form (document.forms[i]) *

5.2. Классы Button, Checkbox, Hidden, Password, Radio, Reset, Submit, Text, Textarea *

5.3. Класс Checkbox *

5.6. Классы Text и Password *

5.7. Класс Textarea *

5.8. Классы Select и Option *

6. Классы для программной обработки данных *

6.1. Класс Object *

6.1.1. Свойство constructor *

6.1.2. Свойство prototype *

6.2. Класс Number *

6.3. Класс Boolean *

6.4. Класс String *

6.6. Класс Function *

6.7. Класс JavaArray *

6.8. Класс JavaClass *

6.9. Класс JavaObject *

6.10. Класс JavaPasckage *

6.11. Класс Screen *

6.11.1. Свойства availHeight и availWidth для Netscape Navigator *

6.11.2. Свойство bufferDepth для Internet Explorer *

6.11.3. Свойство colorDepth *

6.11.4. Свойства height и width *

6.11.5. Свойство pixelDepth для Netscape Navigator *

6.11.6. Свойство updateInterval для Internet Explorer *

JavaScript — это относительно простой объектно-ориентированный язык, предназначенный для создания небольших клиентских и серверных приложений для Internet. Программы, написанные на языке JavaScript, включаются в состав HTML-документов и распространяются вместе с ними. Программы просмотра (браузеры – от англ. browser ) типа Netscape Navigator и Microsoft Internet Explorer распознают встроенные в текст документа программы-вставки ( script- коды) и выполняют их. Таким образом, JavaScript — интерпретируемый язык программирования. Примерами программ на JavaScript могут служить программы, проверяющие введенные пользователем данные или выполняющие какие-то действия при открытии или закрытии документа. Такие программы могут реагировать на действия пользователя — нажатие кнопок «мыши», ввод данных в экранной форме или перемещение «мыши» по странице. Более того, JavaScript-программы могут управлять самим браузером и атрибутами документа.

Язык JavaScript, будучи схожим по синтаксису с языком Java, за исключением объектной модели, в то же время не обладает такими свойствами, как статические типы данных и строгой типизацией. В JavaScript, в отличие от Java, понятие классов не является основой синтаксических конструкций языка. Такой основой является небольшой набор предопределенных типов данных, поддерживаемых исполняемой системой: числовые, булевские и строковые; функции, которые могут быть как самостоятельными, так и методами объектов (метод в терминологии JavaScript — не что иное, как функция/подпрограмма); объектная модель с большим набором предопределенных объектов со своими свойствами и методами, а также правилами задания в программе пользователя новых объектов.

Для создания программ на JavaScript не требуется никаких дополнительных средств— необходим лишь браузер, поддерживающий язык JavaScript соответствующей версии и текстовый редактор, позволяющий создавать HTML-документы. Так как программа на JavaScript встраивается непосредственно в текст HTML-документа, вы можете немедленно увидеть результаты своей работы во время просмотра документа браузером и при необходимости внести изменения.

С его помощью можно динамически управлять отображением и содержимым HTML-документов. Можно записывать в отображаемый на экран документ произвольный HTML-код в процессе синтаксического анализа загруженного браузером документа. С помощью объекта Document можно генерировать документы «с нуля» в зависимости от предыдущих действий пользователя или каких-либо иных факторов.

JavaScript позволяет контролировать работу браузера. Например, объект Window поддерживает методы, позволяющие выводить на экран всплывающие диалоговые окна, создавать, открывать и закрывать новые окна браузера, задавать режимы прокрутки и размеры окон и т.д.

JavaScri pt позволяет взаимодействовать с содержимым документов. Объект Document и содержащиеся в нем объекты позволяют программам читать части HTML- документа и иногда взаимодействовать с ними. Сам текст прочитать невозможно, но можно, например, получить список гипертекстовых ссылок, имеющихся в данном документе. На текущий момент широкие возможности взаимодействия с содержимым документов обеспечивает объект Form и объекты, которые он может содержать: Button, Checkbox, Hidden, Password, Radio, Reset, Select, Submit, Text и Textarea.

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

JavaScript дает возможность выполнять произвольные математические вычисления. Кроме того, этот язык имеет развитые средства работы со значениями даты и времени. JavaScript был создан в качестве альтернативы CGI -программам и языку сценариев Perl , а также в качестве дополнения м в ряде случаев альтернативы языку Java.

Ниже приведена таблица, в которой проводится сравнение Java и JavaScript:

JavaScript

Исходный код программ встраивается непосредственно в HTML-документ либо загружается из независимых файлов.

Исходный код программ не распространяется с приложением -апплетом. Апплеты загружаются с сервера из независимых файлов.

Программа выкладывается на сервер в виде исходного кода в текстовой форме и в дальнейшем интерпретируется (без предварительной компиляции) браузером после загрузки ее с сервера.

Программа компилируется в машинно-независимый байтовый код Java-код, после чего выкладыватся на сервер. Браузер (виртуальная Java-машина) исполняет Java-код.

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

Объектно-ориентированный . Программировать без использования объектного программирования нельзя. Апплеты состоят из классов с возможностью иерархического наследования по традиционной схеме наследования. Использование наследования и полиморфизма – основа программирования в Java.

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

Структура объектов полностью задается на этапе компиляции их классов.

Свободная типизация : элементарные типы данных переменных не описываются, при присваивании тип левой части всегда определяется по результату присваивания (т.е. по правой части)

Строгая типизация : типы данных любых переменных должны быть описаны перед использованием, тип левой части должен совпадать с типом правой (за редкими исключениями, когда работает автоматическое приведение типа результата к типу левой части)

Динамическое связывание кода с объектами : ссылки на объекты проверяются во время выполнения программы.

Статическое связывание кода с объектами : ссылки на объекты должны существовать на момент компиляции

Значения переменных, функций и выражений бывают следующих типов:

в десятичной системе единиц: 0, 29, 70, -147 и т.п.;

в 16-ричной: 0х70 или 0х70, 0 X FA7D0 и т.п.;

в 8-ричной: 070, 0710 ( Внимание. В едущий ноль воспринимается как символ 8-ричного числа ) и т.п.

0.0, -2.9, 0.7E1, 14.7e-2, 1e+308 (максимальное вещественное число), 1.001e-305 (минимальное по модулю вещественное число, отличное от нуля) и т.п.;

  • логические (булевские): true и false;

  • строковые: » Привет, все! «, » ОК «, ‘ Слово «Привет!» с кавычками внутри строки’, «Другой вариант ‘Привет’ с кавычками внутри строки» и т.п. (допускаются оба типа кавычек и многократное использование таких пар внутри друг друга). Специальные символы обозначаются комбинацией символа \ и буквы (или последовательности цифр), например: \b — «забой», \n — перевод на новую строку, \» — » кавычка «.
  • null — специальное значение для обозначения “пустого множества” значений.
  • Глобальные переменные можно вводить в любом месте текста программы путем простого присваивания значения . Но необходимо, чтобы переменная была определена до того момента, когда вызывается при исполнении:

    и т.п. При этом тип переменной приводится к типу присваиваемого значения, причем в последующем этой же переменной можно присвоить значение другого типа:

    myVariable=» Теперь это текстовая переменная «

    При задании переменной использование зарезервированного слова var не обязательно, но желательно, т.к. помогает при использовании отладчика фирмы Microsoft и делает текст программы более структурированным. На деле вместо переменной в текущем объекте window создается новое поле с таким именем. В функциях при задании локальных переменных использование var обязательно (иначе будет создана глобальная переменная).

    При наличии численных и строковых значений в одном выражении идет приведение к строковому типу. Значением переменной

    a=7+» раз отмерь,»+1+»раз присвой «

    будет строка «7 раз отмерь, 1 раз присвой «.

    Стоит отметить, что существуют также функции parseFloat и parseInt , которые осуществляют преобразование из строкового значения в численное.

    Идентификатором переменной может быть последовательность символов из набора букв от «A» до «Z», от «a» до «z», цифр от «0» до «9», а также символ подчеркивания «_». При этом первым символом имени не может быть цифра, а заглавные и строчные буквы отличаются (т. е. имена MyVariable и myvariable относятся к разным переменным).

    Кроме глобальных переменных в функции или другом блоке кода можно определить локальные, для них областью видимости будет только функция (без кода), в которой они определены:

    Для встраивания программы на JavaScript в HTML — файл используются теги . При этом результат работы можно увидеть сразу и при необходимости внести изменения.

    Часть 1. Основы

    Серия контента:

    Этот контент является частью # из серии # статей: Знакомство с языком JavaScript

    Этот контент является частью серии: Знакомство с языком JavaScript

    Следите за выходом новых статей этой серии.

    Популярность языка JavaScript постоянно растет, и, вероятно, он является самым известным языком программирования для Интернета. Его можно использовать на различных платформах и Web-браузерах, и он ни в чем не отстает от обычных языков программирования. Существует множество библиотек, которые помогают при программировании на JavaScript, ускоряют процесс разработки и т. д. Проблема заключается в том, что иногда эти библиотеки находятся так «далеко» от исходного языка, что начинающим программистам не хватает понимания основ языка. В этой статье рассматриваются основы языка, включая базовые принципы JavaScript, чтобы предоставить начинающим пользователем основополагающие знания о языке. В статье представлены примеры кода, показывающие, как работают различные аспекты языка.

    Наработка навыков использования JavaScript

    Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

    Знакомство с языком JavaScript

    Язык JavaScript – это бесплатный язык сценариев, исполняемых на стороне клиента, который позволяет создавать интерактивные HTML-страницы. «На стороне клиента» (client-side) означает, что JavaScript запускается в Web-браузере и не используется на стороне сервера. Сценарии на стороне клиента позволяют пользователю интерактивно взаимодействовать с Web-страницей после того, как она была обработана сервером и загружена Web-браузером. Например, в GoogleMaps применение языка JavaScript дает пользователям возможность взаимодействовать с картой, перемещать её, приближать и удалять и т.д. Без JavaScript Web-страницу приходилось бы обновлять при каждом взаимодействии с пользователем, если, конечно, не использовать такие плагины, как Adobe Flash или Microsoft® Silverlight. Язык JavaScript не требует плагинов.

    Так как JavaScript обеспечивает взаимодействие пользователя с Web-страницей после её загрузки, разработчики обычно используют его для решения следующих задач:

    • динамическое добавление, редактирование и удаление HTML-элементов и их значений;
    • проверка содержимого web-форм перед отправкой на сервер;
    • создание на компьютере клиента cookie-файлов для сохранения и получения данных при последующих визитах.

    Перед началом изучения языка следует познакомиться с его основными принципами:

    • чтобы добавить JavaScript-код в HTML-файл, его необходимо поместить внутрь тегов script и добавить в файл атрибут text/javascript (см. листинг 1);
    • все выражения в JavaScript оканчиваются точкой с запятой;
    • язык чувствителен к регистру символов;
    • имена всех переменных должны начинаться с буквы или символа подчеркивания;
    • можно использовать комментарии, чтобы выделить определенные строки в сценарии; комментарии должны начинаться с двойного прямого слеша (//), за которым следует текст комментария;
    • комментарии также можно использовать для отключения фрагментов сценария; для отключения нескольких строк можно использовать конструкцию /* фрагмент кода */ ; любой код внутри /**/ не будет запускаться во время выполнения.
    Листинг 1. Листинг 1. Теги script и атрибут type необходимы для добавления JavaScript на HTML-страницу

    Чтобы скрыть JavaScript-код от Web-браузеров, не поддерживающих этот язык, или пользователей, отключивших поддержку JavaScript, достаточно просто добавить комментирующий тег до и после выражения JavaScript, как показано в листинге 2.

    Листинг 2. Листинг 2. Использование комментариев для скрытия JavaScript-кода в Web-браузерах, не поддерживающих этот язык.

    Проще всего добавить JavaScript-код на Web-страницу, если загрузить его из внешнего JS-файла с помощью атрибута src в теге script (см. листинг 3).

    Листинг 3. Листинг 3. Подключение внешнего JS-файла к HTML-странице

    Подключение JavaScript-кода через внешние JS-файлы стало общепринятой практикой в силу нескольких причин:

    • поисковые машины могут быстрее обрабатывать и индексировать Web-сайты, если HTML-страницы последних содержат меньше кода;
    • JavaScript-код, отделенный от HTML-кода, «чище», и им гораздо легче управлять;
    • так как к HTML-странице можно подключать несколько JS-файлов, можно поместить JS-файлы на сервере в отдельную структуру каталогов, аналогично графическим файлам, что упростит управление кодом. «Чистый» и организованный код – это ключ к удобному управлению Web-сайтом.
    Илон Маск рекомендует:  Язык cc

    Переменные

    Переменные используются для хранения данных, которые позже могут быть считаны или заменены другими данными. Информация, хранящаяся в переменной, может быть значением или выражением. В языке JavaScript существуют три типа выражений, перечисленных в таблице 1.

    Таблица 1. Таблица 1. Выражения JavaScript
    Выражение Описание
    Арифметическое вычисляется в число
    Строковое вычисляется в строку
    Логическое вычисляется в Boolean-значение ( true или false )

    Существуют переменные двух типов: локальные и глобальные. Локальные переменные объявляются с помощью ключевого слова var , а глобальные – без него. При использовании var переменная считается локальной, так как она доступна только в той области, где была объявлена. Например, если объявить локальную переменную внутри функции (этот случай будет рассмотрен в следующих разделах), то к ней нельзя будет получить доступ за пределами функции, и она станет локальной переменной данной функции. Если же объявить эту же переменную без var , то она будет доступна по всему сценарию, а не только в этой функции.

    В листинге 4 приведен пример локальной переменной num , которой присвоено значение 10.

    Листинг 4. Листинг 4. Объявление локальной переменной

    Для доступа к значению переменной num в другой части сценария достаточно просто сослаться на переменную по имени, как показано в листинге 5.

    Листинг 5. Листинг 5. Получение доступа к значению переменной

    Результатом этого выражения будет «значение num равно: 10». Функция document.write выводит данные на Web-страницу. Эта функция будет использоваться на протяжении всей статьи для вывода результатов работы примеров на Web-страницу.

    Чтобы сохранить арифметическое выражение в переменной, достаточно присвоить переменной вычисленное значение, как показано в листинге 6. В переменной будет храниться вычисленный результат, а не само выражение. При этом на странице снова будет напечатано «значение num равно: 10».

    Листинг 6. Листинг 6. Хранение арифметических выражений

    Для изменения значения переменной следует сослаться на неё по имени и присвоить ей новое значение с помощью знака = (см. листинг 7). Разница заключается в том, что в этом случае не требуется использовать ключевое слово var , так как переменная уже объявлена.

    Листинг 7. Листинг 7. Изменить значение существующей переменной

    В результате запуска сценария на странице будет напечатано «значение num равно: 10», а затем «новое значение num равно: 15».

    Кроме переменных, этот раздел знакомит с операторами языка, которые подробно рассматриваются далее. Знак равенства «=«, используемый для присвоения значений переменным, — это оператор присваивания, а знак «+«, используемый для сложения «5+5«, — это арифметический оператор. В следующем разделе описаны все операторы, присутствующие в языке JavaScript, и правила их использования.

    Операторы

    В JavaScript операторы требуются для выполнения любого действия — сложения, вычитания, сравнения и т.д. В языке существует четыре типа операторов:

    • арифметические;
    • присваивания;
    • сравнения;
    • логические;

    Арифметические операторы

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

    Таблица 2. Таблица 2. Арифметические операторы
    Оператор Описание
    + Сложение
    Вычитание
    * Умножение
    / Деление
    % вычисление остатка от деления
    ++ Инкремент
    Декремент

    Операторы присваивания

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

    Таблица 3. Таблица 3. Операторы присваивания
    Оператор Описание
    = Равно
    += присвоить переменной результат сложения
    -= присвоить переменной результат вычитания
    *= присвоить переменной результат умножения
    /= присвоить переменной результат деления
    %= присвоить переменной результат вычисления остатка от деления

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

    Листинг 8. Листинг 8. Присвоить переменной результат сложения

    В результате запуска сценария на странице будет напечатано «значение num равно: 10», а после этого «новое значение num равно: 15». Как видно оператор присваивает переменной num результат сложения числа 5 и старого значения переменной num . Этот пример можно считать упрощенной записью аналогичного сценария, приведенного в листинге 9.

    Листинг 9. Листинг 9. Более сложный способ присвоить переменной результат сложения

    Операторы сравнения

    Операторы сравнения определяют отношения между переменными или их значениями. Эти операторы используются в условных выражениях для создания логических выражений, имеющих значения true или false , путем сравнения переменных или их значений. В таблице 4 перечислены операторы сравнения, доступные в JavaScript.

    Таблица 4. Таблица 4. Операторы сравнения

    Логические операторы

    Логические операторы в основном используются в условных выражениях для связывания операторов сравнения. В таблице 5 перечислены все логические операторы, имеющиеся в языке JavaScript.

    Таблица 5. Таблица 5. Логические операторы
    Оператор Описание
    == равенство
    === равенство по значению и типу объекта
    != неравенство
    > больше чем
    = больше или равно
    Оператор Описание
    && И
    || ИЛИ
    ! НЕ

    Теперь, после изучения переменных и операторов, можно перейти к более сложным конструкциям.

    Массивы

    Массивы похожи на переменные, но отличаются от них тем, что могут хранить несколько значений и выражений под одним именем. Возможность хранения нескольких значений в одной переменой – это главное преимущество массива. В JavaScript для массивов не существует ограничений на количество или тип данных, которые будут в нем храниться, пока эти данные находятся в области видимости массива. Доступ к значению любого элемента массива можно получить в любой момент времени после объявления массива в сценарии. Хотя в JS-массиве можно хранить данные любого типа, включая другие массивы, обычно в массиве хранятся однородные данные и его название также каким-то образом связано с хранящимися данными. В листинге 11 представлены примеры использования массивов для хранения однородных данных.

    Листинг 11. Листинг 11. Хранение однородных значений в массиве

    Как можно видеть, хотя все эти элементы можно было бы хранить в одном массиве, это было бы нелогично и могло бы вызвать проблемы в сценарии, например, при идентификации данных, извлеченных из массива.

    Хотя доступ к значениям в массиве осуществляется легко, но есть одна тонкость. Массив всегда начинается с 0-го, а не первого элемента, что поначалу может смущать. Нумерация элементов начинается с 0, 1, 2, 3 и т.д. Для доступа к элементу массива необходимо использовать его идентификатор, соответствующий позиции элемента в массиве (см. листинг 12).

    Листинг 12. Листинг 12. Хранение однородных элементов в массиве

    Тем же способом можно присвоить значение элементу, находящемуся на определенной позиции в массиве, или обновить значение элемента в массиве (см. листинг 13).

    Листинг 13. Листинг 13. Присваивание значений элементам, находящихся на определенных позициях в массиве.

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

    Условные выражения

    Во всех языках программирования основой для создания бизнес-логики являются условные выражения, и JavaScript — не исключение. Условные выражения определяют, какое действие должно быть выполнено в зависимости от условий, установленных в сценарии. В JavaScript существуют четыре способа создания условных выражений, описанные в таблице 6.

    Таблица 6. Таблица 6. Условные выражения
    Выражение Описание
    if используется для выполнения сценария, если определенное условие истинно (равно true )
    if. else используется для выполнения одного сценария, если условие истинно, или другого сценария, если данное условие ложно (равно false )
    if. else if. else используется для выполнения одного сценария, если одно из множества условий истинно, или другого сценария, когда все условия ложны
    switch используется для выполнения одного из нескольких сценариев

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

    Листинг 14. Листинг 14. Использование if

    Выражение if. else используется, когда в случае истинности условия следует выполнить один сценарий, а в случае ложности — другой.

    Листинг 15. Листинг 15. Использование if else

    Выражение if. else if. else используется, когда есть несколько сценариев, которые должны выполняться в зависимости от истинности различных условий, как показано в листинге 16.

    Листинг 16. Листинг 16. Использование if. else if. else

    switch -выражения отличаются от if -выражений тем, что они не могут сравнивать значение переменной с определенным значением. В листинге 17 приведен пример, когда для выбора выполняемого сценария удобно использовать switch -выражение.

    Листинг 17. Листинг 17. Использование switch

    В листинге 17 можно видеть использование case и default блоков и выражений break . Эти блоки и выражения – обязательная часть switch -конструкции. Блок case определяет, что значение, используемое в switch , равно значению, используемому в данном case -блоке. Выражение break прерывает или останавливает выполнение последующих выражений в конструкции switch . В блоке default определяется сценарий, который будет выполнен, если не будет выполнен ни один из блоков case или в выполненных case -блоках отсутствовали инструкции break . В листинге 18 показано, как одновременно могут выполниться несколько case -блоков и default -блок в случае, если в выполненных case -блоках отсутствовали инструкции break .

    Листинг 18. Листинг 18. Последовательное выполнение нескольких строк кода из-за отсутствия break

    В результате выполнения этого сценария будет выведено «num равно 10», а затем «num равно: 10.» Такая ситуация называется «сквозное падение сквозь switch».

    Как упоминалось в начале, условные выражения – это «скелет» для «наращивания» бизнес-логики в любом языке программирования, но без помощи функций получится «вырастить» только большое количество запутанного кода.

    Функции

    Функции обладают целым рядом преимуществ. Во-первых, они служат контейнерами для сценариев, которые будут выполняться только при наступлении события или вызове функции. Также функции не выполняются при первой загрузке Web-страницы, когда Web-браузер загружает и выполняет сценарии, находящиеся на этой странице. Предназначение функции – хранить код для выполнения определенной задачи, чтобы его можно было вызвать в любое время.

    Функция оформляется в коде очень просто: она начинается с ключевого слова function , за которым следует пробел и название функции. Название функции может быть любым, но желательно, чтобы оно имело отношение к задаче, которую выполняет функция. В листинге 19 приведен пример функции, изменяющей значение существующей переменной.

    Листинг 19. Листинг 19. Пример простой функции

    В листинге 19 демонстрируются не только структура функции, но и пример её вызова для изменения значения переменной. В представленном фрагменте можно изменить значение переменной, так как она объявлена в области видимости основного сценария, как и сама функция, поэтому функция знает о существовании переменной. Но если объявить переменную внутри функции, то к ней нельзя будет получить доступ за пределами функции.

    Функции также могут принимать данные через входные параметры. Функция может иметь один или несколько параметров, и в вызове функции будет передаваться столько параметров, сколько объявлено в сигнатуре функции. Важно не путать понятие «параметр» с «аргументом». Параметр – это часть определения (или сигнатуры) функции, а аргумент – это выражение, используемое при вызове функции. В листинге 20 приведен пример функции, имеющей параметры, и вызова функции с использованием аргументов.

    Листинг 20. Листинг 20. Использование параметров функций

    Функция в листинге 20 увеличивает значение переданного аргумента. В данном случае аргумент – это ранее объявленная переменная. При передаче этой переменной в функцию в качестве аргумента её значение увеличивается и становится равным 11.

    В функциях также используются выражения return . Эти выражения возвращают значение, полученное после выполнения сценария в функции. Например, можно присвоить переменной значение, возвращенное функцией. В листинге 21 показано, как вернуть значение из функции после выполнения сценария.

    Листинг 21. Листинг 21. Использование выражения return в функции

    После запуска на странице будет напечатано «num равно 20». Удобство этой функции в том, что можно передать в функцию два параметра, она выполнит их сложение и вернет результат, который и будет присвоен переменной, вместо прямого присваивания, которое использовалось в листинге 20.

    Циклы

    Как было продемонстрировано выше, массивы – это удобный способ хранить большое количество многократно используемых данных, но это ещё не всё. Циклы for и while предоставляют средства для итерирования по этим массивам, доступа к их значениям и использования их в сценариях.

    Чаще всего в JavaScript используется цикл for . Этот цикл обычно состоит из переменой, которой присваивается числовое значение, затем эта переменная используется с оператором сравнения для проверки условия, а в конце числовое значение переменной увеличивается или уменьшается. В ходе сравнения в цикле for обычно определяется, что числовое значение исходной переменной больше или меньше определенного числового значения. Если это условие выполняется (равно true ), то цикл выполняется и значение переменной увеличивается или уменьшается, пока условие не станет равным false . В листинге 22 приведен пример цикла for , работающего, пока числовое значение переменной меньше длины массива.

    Листинг 22. Листинг 22. Использование цикла for для итерирования по массиву

    Свойство length (длина) у массива содержит числовое значение, равное количеству элементов в массиве. Не забывайте, что индексация массива начинается с 0. Поэтому если в массиве 4 элемента, то значение length равно 4, а доступные индексы – 0, 1, 2, 3.

    Другой тип цикла — цикл while . Считается, что этот цикл работает «быстрее» цикла for , но он не очень подходит для итерирования по массивам, и его лучше применять в случаях, когда необходимо выполнять сценарий до тех пор, пока условие истинно. В листинге 23 приведен исходный код цикла while , в котором сценарий выполняется до тех пор, пока значение численной переменной меньше 10.

    Листинг 23. Листинг 23. Синтаксис цикла while

    Цикл while в данном сценарии содержит строку, в которой числовая переменная инкрементируется до тех пор, пока условие цикла не станет равным false . Без этой строки цикл оказался бы бесконечным.

    Заключение

    Язык JavaScript –один из самых популярных языков программирования, и эта статья пытается раскрыть секрет его популярности. Этот простой язык сценариев обладает огромными возможности. Достаточно сказать, что он позволяет посетителям Web-сайтов взаимодействовать с Web-страницей после того, как она была загружена Web-браузером. В этой статье представлены основные сведения, необходимые для изучения JavaScript. После её изучения читатель будет иметь представление о том, как работают библиотеки JavaScript и как использовать их для упрощения разработки бизнес-логики Web-страниц, работающей на стороне клиента. Следующая статья закрепит эти знания на практике и познакомит с объектами JavaScript.

    Введение в JavaScript

    JavaScript® (часто сокращают до JS) — это интерпретируемый язык программирования, разработанный для взаимодействия с веб-страницами. JavaScript запускается на стороне клиента Интернета и используется для программирования того, как веб-страницы будут вести себя при наступлении определенных событий.

    Что такое JavaScript?

    JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, который добавляет интерактивность и отзывчивость к вашим веб-страницам.

    JavaScript позволяет разработчику веб-сайта управлять тем, как ведет себя веб-страница. Это делает JavaScript принципиально отличным от HTML, языка, который отвечает за структуру веб-документа, и CSS, языка, который формирует внешний вид веб-страниц.

    Программы, написанные на языке JavaScript, называются скриптами. В браузере они подключаются непосредственно к HTML-документу и, как только загружается страница – тут же выполняются. Процесс выполнения скрипта называют «интерпретацией».

    Если PHP скрипт обрабатывается на стороне сервера с помощью PHP интерпретатора, то JavaScript выполняется в браузере пользователя JavaScript интерпретатором.

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

    В браузере JavaScript может делать всё, что относится к манипуляции с HTML-документом, взаимодействию с посетителем и, с некоторыми ограничениями, с сервером:

    • Проверять правильностm заполнения пользовательских HTML-форм.
    • Взаимодействовать с веб-камерой, микрофоном и другими устройствами.
    • Менять стили HTML-элементов, прятать, показывать элементы и т.п.
    • Отображать всплывающие и диалоговые окна.
    • Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора и т.п.
    • Посылать запросы на сервер и загружать данные без перезагрузки страницы.

    JavaScгipt – невероятно мощный и эффективный язык, который непременно нужно попробовать в деле!

    JavaScript в сравнении с ECMAScript

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

    Компания Netscape представила язык JavaScript в организацию Ecma International, деятельность которой посвящена стандартизации информационных и коммуникационных систем (изначально ECMA являлся акронимом European Computer Manufacturers Association), где он был утвержден в качестве стандарта ECMAScript в 1997 г.

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

    Формально, когда разработчики ссылаются на ECMAScript, они обычно имеют в виду «идеальный» язык, определенный стандартом Ecma. Чаще всего эти два понятия взаимозаменяемы. Поэтому, при упоминании об официальном стандарте в этом учебнике будет употребляться название ECMAScript, а в остальных случаях при ссылках на язык — JavaScript. Также в учебнике будет встречаться общепринятое сокращение ES5 при ссылке на пятый выпуск стандарта ECMAScript.

    JavaScript – не Java

    Прежде чем вы приступите к изучению JavaScript, вам следует понимать, что JavaScript – это не Java. Это два совершенно разных языка программирования. JavaScript не имеет ничего общего с языком Java, кроме похожего синтак­ сиса.

    Java – объектно-ориентированный язык программирования, разрабатываемый компанией Sun Microsystems с 1991 года и официально выпущенный 23 мая 1995 года. Java – это мощный и гораздо более сложный язык программирования, на нём можно писать самые разные программы. Для интернет-страниц есть особая возможность – написание апплетов.

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

    Java — это язык, который основан на классах и отличается быстротой, высоким уровнем защиты и надежностью. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в языке Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

    JavaScript — это легкий язык программирования, который обладает простым синтаксисом, специализированной встроенной функциональностью и минимальными требованиями для создания объектов. Вам не нужно объявлять переменные, классы и методы. Не нужно беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не нужно реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы JS-скриптов не являются явно типизированными.

    Что вам нужно для изучения JavaScript?

    Предварительное знание JavaScript не требуется, но поскольку JavaScript находится внутри веб-страниц и управляет их динамикой, предполагается, что вы знакомы с основами языка HTML, хотя не исключается возможность «параллельного» изучения HTML и JavaScript.

    Большенство сценариев JavaScript призваны «оживить» HTML, т. е. цель создания сценария заключается в том, чтобы продемонстрировать, как будет меняться вид страницы при изменении значений параметров HTML-тегов. Вместе собранные и должным образом оформленные такого рода сценарии являются примером разработанного веб-приложения.

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

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

    Чтобы писать и выполнять JavaScript-программы, достаточно установить любой современный интернет-браузер (например Yandex, Internet Explorer, Mozilla Firefox или Google Chrome).

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

    Часть 1. Основы

    Серия контента:

    Этот контент является частью # из серии # статей: Знакомство с языком JavaScript

    Этот контент является частью серии: Знакомство с языком JavaScript

    Следите за выходом новых статей этой серии.

    Популярность языка JavaScript постоянно растет, и, вероятно, он является самым известным языком программирования для Интернета. Его можно использовать на различных платформах и Web-браузерах, и он ни в чем не отстает от обычных языков программирования. Существует множество библиотек, которые помогают при программировании на JavaScript, ускоряют процесс разработки и т. д. Проблема заключается в том, что иногда эти библиотеки находятся так «далеко» от исходного языка, что начинающим программистам не хватает понимания основ языка. В этой статье рассматриваются основы языка, включая базовые принципы JavaScript, чтобы предоставить начинающим пользователем основополагающие знания о языке. В статье представлены примеры кода, показывающие, как работают различные аспекты языка.

    Наработка навыков использования JavaScript

    Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

    Знакомство с языком JavaScript

    Язык JavaScript – это бесплатный язык сценариев, исполняемых на стороне клиента, который позволяет создавать интерактивные HTML-страницы. «На стороне клиента» (client-side) означает, что JavaScript запускается в Web-браузере и не используется на стороне сервера. Сценарии на стороне клиента позволяют пользователю интерактивно взаимодействовать с Web-страницей после того, как она была обработана сервером и загружена Web-браузером. Например, в GoogleMaps применение языка JavaScript дает пользователям возможность взаимодействовать с картой, перемещать её, приближать и удалять и т.д. Без JavaScript Web-страницу приходилось бы обновлять при каждом взаимодействии с пользователем, если, конечно, не использовать такие плагины, как Adobe Flash или Microsoft® Silverlight. Язык JavaScript не требует плагинов.

    Так как JavaScript обеспечивает взаимодействие пользователя с Web-страницей после её загрузки, разработчики обычно используют его для решения следующих задач:

    • динамическое добавление, редактирование и удаление HTML-элементов и их значений;
    • проверка содержимого web-форм перед отправкой на сервер;
    • создание на компьютере клиента cookie-файлов для сохранения и получения данных при последующих визитах.

    Перед началом изучения языка следует познакомиться с его основными принципами:

    • чтобы добавить JavaScript-код в HTML-файл, его необходимо поместить внутрь тегов script и добавить в файл атрибут text/javascript (см. листинг 1);
    • все выражения в JavaScript оканчиваются точкой с запятой;
    • язык чувствителен к регистру символов;
    • имена всех переменных должны начинаться с буквы или символа подчеркивания;
    • можно использовать комментарии, чтобы выделить определенные строки в сценарии; комментарии должны начинаться с двойного прямого слеша (//), за которым следует текст комментария;
    • комментарии также можно использовать для отключения фрагментов сценария; для отключения нескольких строк можно использовать конструкцию /* фрагмент кода */ ; любой код внутри /**/ не будет запускаться во время выполнения.
    Листинг 1. Листинг 1. Теги script и атрибут type необходимы для добавления JavaScript на HTML-страницу

    Чтобы скрыть JavaScript-код от Web-браузеров, не поддерживающих этот язык, или пользователей, отключивших поддержку JavaScript, достаточно просто добавить комментирующий тег до и после выражения JavaScript, как показано в листинге 2.

    Листинг 2. Листинг 2. Использование комментариев для скрытия JavaScript-кода в Web-браузерах, не поддерживающих этот язык.

    Проще всего добавить JavaScript-код на Web-страницу, если загрузить его из внешнего JS-файла с помощью атрибута src в теге script (см. листинг 3).

    Листинг 3. Листинг 3. Подключение внешнего JS-файла к HTML-странице

    Подключение JavaScript-кода через внешние JS-файлы стало общепринятой практикой в силу нескольких причин:

    • поисковые машины могут быстрее обрабатывать и индексировать Web-сайты, если HTML-страницы последних содержат меньше кода;
    • JavaScript-код, отделенный от HTML-кода, «чище», и им гораздо легче управлять;
    • так как к HTML-странице можно подключать несколько JS-файлов, можно поместить JS-файлы на сервере в отдельную структуру каталогов, аналогично графическим файлам, что упростит управление кодом. «Чистый» и организованный код – это ключ к удобному управлению Web-сайтом.

    Переменные

    Переменные используются для хранения данных, которые позже могут быть считаны или заменены другими данными. Информация, хранящаяся в переменной, может быть значением или выражением. В языке JavaScript существуют три типа выражений, перечисленных в таблице 1.

    Таблица 1. Таблица 1. Выражения JavaScript
    Выражение Описание
    Арифметическое вычисляется в число
    Строковое вычисляется в строку
    Логическое вычисляется в Boolean-значение ( true или false )

    Существуют переменные двух типов: локальные и глобальные. Локальные переменные объявляются с помощью ключевого слова var , а глобальные – без него. При использовании var переменная считается локальной, так как она доступна только в той области, где была объявлена. Например, если объявить локальную переменную внутри функции (этот случай будет рассмотрен в следующих разделах), то к ней нельзя будет получить доступ за пределами функции, и она станет локальной переменной данной функции. Если же объявить эту же переменную без var , то она будет доступна по всему сценарию, а не только в этой функции.

    В листинге 4 приведен пример локальной переменной num , которой присвоено значение 10.

    Листинг 4. Листинг 4. Объявление локальной переменной

    Для доступа к значению переменной num в другой части сценария достаточно просто сослаться на переменную по имени, как показано в листинге 5.

    Листинг 5. Листинг 5. Получение доступа к значению переменной

    Результатом этого выражения будет «значение num равно: 10». Функция document.write выводит данные на Web-страницу. Эта функция будет использоваться на протяжении всей статьи для вывода результатов работы примеров на Web-страницу.

    Чтобы сохранить арифметическое выражение в переменной, достаточно присвоить переменной вычисленное значение, как показано в листинге 6. В переменной будет храниться вычисленный результат, а не само выражение. При этом на странице снова будет напечатано «значение num равно: 10».

    Листинг 6. Листинг 6. Хранение арифметических выражений

    Для изменения значения переменной следует сослаться на неё по имени и присвоить ей новое значение с помощью знака = (см. листинг 7). Разница заключается в том, что в этом случае не требуется использовать ключевое слово var , так как переменная уже объявлена.

    Листинг 7. Листинг 7. Изменить значение существующей переменной

    В результате запуска сценария на странице будет напечатано «значение num равно: 10», а затем «новое значение num равно: 15».

    Кроме переменных, этот раздел знакомит с операторами языка, которые подробно рассматриваются далее. Знак равенства «=«, используемый для присвоения значений переменным, — это оператор присваивания, а знак «+«, используемый для сложения «5+5«, — это арифметический оператор. В следующем разделе описаны все операторы, присутствующие в языке JavaScript, и правила их использования.

    Операторы

    В JavaScript операторы требуются для выполнения любого действия — сложения, вычитания, сравнения и т.д. В языке существует четыре типа операторов:

    • арифметические;
    • присваивания;
    • сравнения;
    • логические;

    Арифметические операторы

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

    Таблица 2. Таблица 2. Арифметические операторы
    Оператор Описание
    + Сложение
    Вычитание
    * Умножение
    / Деление
    % вычисление остатка от деления
    ++ Инкремент
    Декремент

    Операторы присваивания

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

    Таблица 3. Таблица 3. Операторы присваивания
    Оператор Описание
    = Равно
    += присвоить переменной результат сложения
    -= присвоить переменной результат вычитания
    *= присвоить переменной результат умножения
    /= присвоить переменной результат деления
    %= присвоить переменной результат вычисления остатка от деления

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

    Листинг 8. Листинг 8. Присвоить переменной результат сложения

    В результате запуска сценария на странице будет напечатано «значение num равно: 10», а после этого «новое значение num равно: 15». Как видно оператор присваивает переменной num результат сложения числа 5 и старого значения переменной num . Этот пример можно считать упрощенной записью аналогичного сценария, приведенного в листинге 9.

    Листинг 9. Листинг 9. Более сложный способ присвоить переменной результат сложения

    Операторы сравнения

    Операторы сравнения определяют отношения между переменными или их значениями. Эти операторы используются в условных выражениях для создания логических выражений, имеющих значения true или false , путем сравнения переменных или их значений. В таблице 4 перечислены операторы сравнения, доступные в JavaScript.

    Таблица 4. Таблица 4. Операторы сравнения

    Логические операторы

    Логические операторы в основном используются в условных выражениях для связывания операторов сравнения. В таблице 5 перечислены все логические операторы, имеющиеся в языке JavaScript.

    Таблица 5. Таблица 5. Логические операторы
    Оператор Описание
    == равенство
    === равенство по значению и типу объекта
    != неравенство
    > больше чем
    = больше или равно
    Оператор Описание
    && И
    || ИЛИ
    ! НЕ

    Теперь, после изучения переменных и операторов, можно перейти к более сложным конструкциям.

    Массивы

    Массивы похожи на переменные, но отличаются от них тем, что могут хранить несколько значений и выражений под одним именем. Возможность хранения нескольких значений в одной переменой – это главное преимущество массива. В JavaScript для массивов не существует ограничений на количество или тип данных, которые будут в нем храниться, пока эти данные находятся в области видимости массива. Доступ к значению любого элемента массива можно получить в любой момент времени после объявления массива в сценарии. Хотя в JS-массиве можно хранить данные любого типа, включая другие массивы, обычно в массиве хранятся однородные данные и его название также каким-то образом связано с хранящимися данными. В листинге 11 представлены примеры использования массивов для хранения однородных данных.

    Листинг 11. Листинг 11. Хранение однородных значений в массиве

    Как можно видеть, хотя все эти элементы можно было бы хранить в одном массиве, это было бы нелогично и могло бы вызвать проблемы в сценарии, например, при идентификации данных, извлеченных из массива.

    Хотя доступ к значениям в массиве осуществляется легко, но есть одна тонкость. Массив всегда начинается с 0-го, а не первого элемента, что поначалу может смущать. Нумерация элементов начинается с 0, 1, 2, 3 и т.д. Для доступа к элементу массива необходимо использовать его идентификатор, соответствующий позиции элемента в массиве (см. листинг 12).

    Листинг 12. Листинг 12. Хранение однородных элементов в массиве

    Тем же способом можно присвоить значение элементу, находящемуся на определенной позиции в массиве, или обновить значение элемента в массиве (см. листинг 13).

    Листинг 13. Листинг 13. Присваивание значений элементам, находящихся на определенных позициях в массиве.

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

    Условные выражения

    Во всех языках программирования основой для создания бизнес-логики являются условные выражения, и JavaScript — не исключение. Условные выражения определяют, какое действие должно быть выполнено в зависимости от условий, установленных в сценарии. В JavaScript существуют четыре способа создания условных выражений, описанные в таблице 6.

    Таблица 6. Таблица 6. Условные выражения
    Выражение Описание
    if используется для выполнения сценария, если определенное условие истинно (равно true )
    if. else используется для выполнения одного сценария, если условие истинно, или другого сценария, если данное условие ложно (равно false )
    if. else if. else используется для выполнения одного сценария, если одно из множества условий истинно, или другого сценария, когда все условия ложны
    switch используется для выполнения одного из нескольких сценариев

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

    Листинг 14. Листинг 14. Использование if

    Выражение if. else используется, когда в случае истинности условия следует выполнить один сценарий, а в случае ложности — другой.

    Листинг 15. Листинг 15. Использование if else

    Выражение if. else if. else используется, когда есть несколько сценариев, которые должны выполняться в зависимости от истинности различных условий, как показано в листинге 16.

    Листинг 16. Листинг 16. Использование if. else if. else

    switch -выражения отличаются от if -выражений тем, что они не могут сравнивать значение переменной с определенным значением. В листинге 17 приведен пример, когда для выбора выполняемого сценария удобно использовать switch -выражение.

    Листинг 17. Листинг 17. Использование switch

    В листинге 17 можно видеть использование case и default блоков и выражений break . Эти блоки и выражения – обязательная часть switch -конструкции. Блок case определяет, что значение, используемое в switch , равно значению, используемому в данном case -блоке. Выражение break прерывает или останавливает выполнение последующих выражений в конструкции switch . В блоке default определяется сценарий, который будет выполнен, если не будет выполнен ни один из блоков case или в выполненных case -блоках отсутствовали инструкции break . В листинге 18 показано, как одновременно могут выполниться несколько case -блоков и default -блок в случае, если в выполненных case -блоках отсутствовали инструкции break .

    Листинг 18. Листинг 18. Последовательное выполнение нескольких строк кода из-за отсутствия break

    В результате выполнения этого сценария будет выведено «num равно 10», а затем «num равно: 10.» Такая ситуация называется «сквозное падение сквозь switch».

    Как упоминалось в начале, условные выражения – это «скелет» для «наращивания» бизнес-логики в любом языке программирования, но без помощи функций получится «вырастить» только большое количество запутанного кода.

    Функции

    Функции обладают целым рядом преимуществ. Во-первых, они служат контейнерами для сценариев, которые будут выполняться только при наступлении события или вызове функции. Также функции не выполняются при первой загрузке Web-страницы, когда Web-браузер загружает и выполняет сценарии, находящиеся на этой странице. Предназначение функции – хранить код для выполнения определенной задачи, чтобы его можно было вызвать в любое время.

    Функция оформляется в коде очень просто: она начинается с ключевого слова function , за которым следует пробел и название функции. Название функции может быть любым, но желательно, чтобы оно имело отношение к задаче, которую выполняет функция. В листинге 19 приведен пример функции, изменяющей значение существующей переменной.

    Листинг 19. Листинг 19. Пример простой функции

    В листинге 19 демонстрируются не только структура функции, но и пример её вызова для изменения значения переменной. В представленном фрагменте можно изменить значение переменной, так как она объявлена в области видимости основного сценария, как и сама функция, поэтому функция знает о существовании переменной. Но если объявить переменную внутри функции, то к ней нельзя будет получить доступ за пределами функции.

    Функции также могут принимать данные через входные параметры. Функция может иметь один или несколько параметров, и в вызове функции будет передаваться столько параметров, сколько объявлено в сигнатуре функции. Важно не путать понятие «параметр» с «аргументом». Параметр – это часть определения (или сигнатуры) функции, а аргумент – это выражение, используемое при вызове функции. В листинге 20 приведен пример функции, имеющей параметры, и вызова функции с использованием аргументов.

    Листинг 20. Листинг 20. Использование параметров функций

    Функция в листинге 20 увеличивает значение переданного аргумента. В данном случае аргумент – это ранее объявленная переменная. При передаче этой переменной в функцию в качестве аргумента её значение увеличивается и становится равным 11.

    В функциях также используются выражения return . Эти выражения возвращают значение, полученное после выполнения сценария в функции. Например, можно присвоить переменной значение, возвращенное функцией. В листинге 21 показано, как вернуть значение из функции после выполнения сценария.

    Листинг 21. Листинг 21. Использование выражения return в функции

    После запуска на странице будет напечатано «num равно 20». Удобство этой функции в том, что можно передать в функцию два параметра, она выполнит их сложение и вернет результат, который и будет присвоен переменной, вместо прямого присваивания, которое использовалось в листинге 20.

    Циклы

    Как было продемонстрировано выше, массивы – это удобный способ хранить большое количество многократно используемых данных, но это ещё не всё. Циклы for и while предоставляют средства для итерирования по этим массивам, доступа к их значениям и использования их в сценариях.

    Чаще всего в JavaScript используется цикл for . Этот цикл обычно состоит из переменой, которой присваивается числовое значение, затем эта переменная используется с оператором сравнения для проверки условия, а в конце числовое значение переменной увеличивается или уменьшается. В ходе сравнения в цикле for обычно определяется, что числовое значение исходной переменной больше или меньше определенного числового значения. Если это условие выполняется (равно true ), то цикл выполняется и значение переменной увеличивается или уменьшается, пока условие не станет равным false . В листинге 22 приведен пример цикла for , работающего, пока числовое значение переменной меньше длины массива.

    Листинг 22. Листинг 22. Использование цикла for для итерирования по массиву

    Свойство length (длина) у массива содержит числовое значение, равное количеству элементов в массиве. Не забывайте, что индексация массива начинается с 0. Поэтому если в массиве 4 элемента, то значение length равно 4, а доступные индексы – 0, 1, 2, 3.

    Другой тип цикла — цикл while . Считается, что этот цикл работает «быстрее» цикла for , но он не очень подходит для итерирования по массивам, и его лучше применять в случаях, когда необходимо выполнять сценарий до тех пор, пока условие истинно. В листинге 23 приведен исходный код цикла while , в котором сценарий выполняется до тех пор, пока значение численной переменной меньше 10.

    Листинг 23. Листинг 23. Синтаксис цикла while

    Цикл while в данном сценарии содержит строку, в которой числовая переменная инкрементируется до тех пор, пока условие цикла не станет равным false . Без этой строки цикл оказался бы бесконечным.

    Заключение

    Язык JavaScript –один из самых популярных языков программирования, и эта статья пытается раскрыть секрет его популярности. Этот простой язык сценариев обладает огромными возможности. Достаточно сказать, что он позволяет посетителям Web-сайтов взаимодействовать с Web-страницей после того, как она была загружена Web-браузером. В этой статье представлены основные сведения, необходимые для изучения JavaScript. После её изучения читатель будет иметь представление о том, как работают библиотеки JavaScript и как использовать их для упрощения разработки бизнес-логики Web-страниц, работающей на стороне клиента. Следующая статья закрепит эти знания на практике и познакомит с объектами JavaScript.

    Илон Маск рекомендует:  die - псевдоним exit()
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL