JavaScript для начинающих – простые примеры
Всем привет, вот и пришло время узнать нам с Вами основы JavaScript, так как JavaScript является той технологией, с помощью которой можно организовать динамические HTML страницы у себя на сайте.
Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML. Также, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.
Основы JavaScript — теория
И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.
Зачем нужен JavaScript?
А зачем Вы спросите организовывать динамические страницы?
Во-первых, это красиво, удобно и современно.
Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.
Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.
Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.
В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.
Код HTML:
Узлы этого кода:
Корневой Узел – html
Дочерний Узел узла HTML — body
Дочерний Узел узла body – p
Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).
Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.
По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.
Пример кода JavaScript
Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать «Добавить в список» и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.
Сам пример:
Код JavaScript:
Код HTML:
В самом коде я написал комментарии, поэтому я думаю проблем возникнуть не должно, что для чего. Но я все равно поясню общую картину.
У нас есть некий список, помеченный для того чтобы нам было его легче найти, из JavaScript. Затем мы пишем две функции на javascript:
1. addLi() –для добавления новых строк.
В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var).
Затем с помощью метода getElementById объекта document, находим нужный нам id списка.
Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы).
Далее с помощью метода appendChild мы присваиваем нашему списку еще один новый пункт LI.
Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.
И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст) с помощью метода appendChild.
2. deleteLi() – для удаления этих строк.
Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.
Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).
Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка» и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)
3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список» запускается функция addLi(), а при клике на кнопку «Удалить из списка» запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.
Надеюсь, сегодняшний урок был Вам полезен и интересен, в следующих уроках будем рассматривать уже примеры посложней.
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Вывод сообщения в окне
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.
Основы JavaScript для начинающих разработчиков
Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.
Примитивные типы данных
▍Числа
Арифметические операции JS работают вполне привычным образом, но надо обратить внимание на то, что оператор + может выполнять и сложение чисел, и конкатенацию строк.
▍Строки
Строки, как и другие примитивные значения, иммутабельны. Например, метод concat() не модифицирует существующую строку, а создаёт новую.
▍Логические значения
Объекты
Объекты — это динамические структуры, состоящие из пар ключ-значение. Значения могут иметь примитивные типы данных, могут быть объектами или функциями.
Объекты проще всего создавать, используя синтаксис объектных литералов:
Свойства объекта можно, в любое время, читать, добавлять, редактировать и удалять. Вот как это делается:
Объекты в языке реализованы в виде хэш-таблиц. Простую хэш-таблицу можно создать, используя команду Object.create(null) :
Для перебора всех свойств объекта можно воспользоваться командой Object.keys() :
▍Сравнение значений примитивных типов и объектов
При практической работе с примитивными значениями можно, как уже было сказано, воспринимать их как объекты, у которых есть свойства и методы, хотя объектами они не являются. Примитивные значения иммутабельны, внутренняя структура объектов может меняться.
Переменные
Если переменная объявлена за пределами какой-либо функции, её область видимости является глобальной.
Массивы
Методы массивов позволяют легко реализовывать такие структуры данных, как стеки и очереди:
Функции
Функции в JavaScript являются объектами. Функции можно назначать переменным, хранить в объектах или массивах, передавать в виде аргументов другим функциям и возвращать из других функций.
Существует три способа объявления функций:
▍Классическое объявление функции
При таком подходе к объявлению функций действуют следующие правила:
▍Функциональные выражения
При использовании функциональных выражений нужно учитывать следующее:
▍Стрелочные функции
▍Способы вызова функций
Функции можно вызывать различными способами.
Основы JavaScript
JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.
Что такое JavaScript на самом деле?
JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.
JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!
JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:
Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.
Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!
Пример «hello world»
Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.
Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).
Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.
Простой код на javascript примеры
Создание сайтов на Django
Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.
В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.
Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Программирование на C++ для начинающих
Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
