Javascript для начинающих с примерами

Что такое JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

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

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript —>
    Работа с
    AJAX + PHP —>

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript —>
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В этом уроке мы разберем работу с данными на языке JavaScript.

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

Строки и числа

Самыми простыми типами данных в JavaScript являются строки и числа.

Числа обозначают сами себя: 1, 12, 145, а вот строки требуется брать в кавычки (одинарные или двойные — без разницы):

Переменные

Одним из самых главных и распространенных объектов в программировании является переменная.

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

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

В JavaScript при объявлении переменной обязательно должно быть написано ключевое слово var:

Операция присваивания

Очень важным элементом программирования является операция присваивания. Пример присваивания:

Комментарии

В коде JavaScript, так же, как и в HTML и CSS, можно оставлять комментарии. Они могут быть многострочными и однострочными:

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

Функция alert

В JavaScript существует специальная функция alert, которая позволяет вывести какой-либо текст в окно браузера в виде диалогового окошка.

Читайте также:  Установка и удаление программ cmd

Следующий код выводит на экран заданный текст:

Нажмите на эту ссылку, чтобы увидеть такое окошко.

А в следующим коде переменной text присваивается фраза, а затем содержимое этой переменной выводится на экран:

Математические операции

В JavaScript между числами можно совершать различные математические операции:

Получение определенного символа строки

В JavaScript можно получить доступ к определенному символу строки по его номеру таким образом: a[n] – n-ный символ строки (учтите, что нумерация идет с нуля):

Сложности с операцией присваивания

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

С точки зрения математики запись a = a + 2 абсурдна, но не с точки зрения программирования.

В данном случае переменная a имела значение 1, а затем мы переменной a присвоили новое значение — старое значение переменной a плюс 2.

Операции инкремента и декремента

Операция a++ или ++a – увеличивает переменную a на единицу. Эта операция называется инкремент.

Операция a— или —a – уменьшает переменную a на единицу. Эта операция называется декремент.

Давайте посмотрим, в каких случаях проявляется разница между ++a и a++.

Пусть у нас есть код alert(++a) и код alert(a++).

В первом случае переменная сначала увеличится на единицу, а потом выведется, а во втором случае — сначала выведется, а потом увеличится.

Операции +=, -=, *=, /=

Мы уже рассматривали код, который демонстрирует сложности с операцией присваивания:

В данном случае мы присваиваем переменной a ее текущее значение, увеличенное на 2. Однако JavaScript позволяет записать этот код еще короче с помощью оператора +=:

Кроме того, существуют операторы -=, *=, /=, которые эквивалентны следующему коду:

Специальные значения

В JavaScript, как и в других языках программирования, существуют ключевые слова для некоторых специальных значений. Вот они: undefined, null, true, false, NaN, Infinity, -Infinity.

Значения undefined и null

Значение undefined обозначает неопределенность. К примеру, если мы попробуем обратиться к переменной, которой мы еще не задали значение — то ее значение и будет undefined.

Значение null обозначает ‘ничего’. К примеру, мы можем присвоить переменной значение null в знак того, что там ничего не лежит.

Это значение очень похоже на undefined, отличие в том, что undefined — это не определенное значение, а null — определенное — ничего.

Значения true и false

Значения true и false обозначают истину и ложь соответственно. Они используются для таких вещей, которые предполагают два варианта ответа — да или нет.

К примеру, на вопрос ‘вам уже есть 18 лет?’ в можете ответить да, то есть true, или нет, то есть false.

Значение NaN

Значение NaN (Not-A-Number) обозначает не число. Оно может получится, к примеру, в таком случае — когда вы умножаете строку с буквами на число:

Значения Infinity и -Infinity

Значения Infinity и -Infinity обозначают соответственно бесконечность и минус бесконечность. Они получаются если какое-то число поделить на ноль — в этом случает JavaScript не выдает ошибку, как в других языках программирования, а возвращает эти значения.

Если мы делим на ноль положительное число, то получаем Infinity, а если отрицательное — то -Infinity.

Функция prompt

Кроме функции alert, которая выдает диалоговое окошко, существует функция prompt, которая не только выдает окошко с текстом, но и позволяет получить от пользователя какой-либо текст.

Этот текст можно записать в переменную и затем выполнить над ним какие-либо операции.

В следующем примере мы спросим имя пользователя, запишем его в переменную name и с помощью функции alert выведем на экран:

Нажмите на эту ссылку, чтобы запустить код примера.

Функция confirm

Если вам нужно просто спросить у пользователя ‘Да’ или ‘Нет’, не давая ему возможность ввести иной текст — используйте функцию confirm.

Эта функция вызывает окошко с вопросом, на который нужно ответить пользователю, и двумя кнопками для ответа: с кнопкой ‘ОК’ и с кнопкой ‘Отмена’.

Если пользователь нажмет ‘ОК’ — то функция вернет true, а если ‘Отмена’ — то вернет false.

В следующем примере функция confirm выведет диалоговое окно с вопросом ‘Вам уже есть 18 лет?‘.

Если вы нажмете ‘Ок’, то в переменную ok запишется true и выведется на экран функцией alert, а если нажмете ‘Отмена’ — то false:

Нажмите на эту ссылку, чтобы запустить код примера.

Типизация переменных

Что будет, если попробовать перемножить, к примеру, число и строку, вот так: 3 * ‘3’? В результате вы получите число 9. Это значит, что JavaScript автоматически осуществляет преобразование типов при необходимости, вам не нужно за это переживать.

Читайте также:  Andy как установить приложения

Однако, есть нюанс: если мы попытаемся сложить строку и число, то JavaScript сложит их как строки, а не как числа, вот так: ‘3’ + 3 получится строка ’33’, а не число 6.

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

Бороться с этим можно следующем способом: нужно сделать недопустимую для строк операцию, например, так: +’3′ + 3 — поставим плюс перед строкой и она преобразуется к числу.

Второй вариант такой: можно сказать яваскрипту, что мы хотим явно преобразовать строку к числу. Это делается с помощью функции Number, вот так: Number(‘3’) + 3. В результате получится 6, а не ’33’.

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

Можно преобразовывать и к другим типам с помощью функций Boolean, String и других подобных.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Всем привет, вот и пришло время узнать нам с Вами основы 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 — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).

Читайте также:  Блок питания для компьютера fsp

Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на 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. Как все это происходит, давайте разбираться.

Сам пример:

  1. Первоя строка
  2. Вторая строка
  3. Третья строка

Добавить в список

Удалить из списка

Код JavaScript:

Код HTML:

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

У нас есть некий список, помеченный >

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 означает, что при наведении курсора мыши будет что-то выполняться.

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