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>
     <body>
       <p>Привет</p>
     </body>
   </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. Как все это происходит, давайте разбираться.

Сам пример:

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

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

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

Код JavaScript:

   
   //пишем функцию добавления нового пункта в списке
   function addLi() {
        var stroka = prompt("Введите название строки:", "");//для ввода названия новой строки
        if (stroka){
                var ol = document.getElementById ("spisokst");//находим наш список
                var li = document.createElement("LI");//создаем новый элемент списка
                        ol.appendChild(li);//присваиваем нашему списку новый элемент
                var text = document.createTextNode(stroka);//создаем новый узел текст
                        li.appendChild(text);//присваиваем этот текст нашему новому пункту списка
        }
   }
   //пишем функцию удаления пунктов из списка
   function deleteLi() {
    var ol = document.getElementById ("spisokst");//находим наш список
    var lastLi = ol.lastChild;//заводим переменную и храним в ней последний элемент нашего списка
        //проверяем на наличие нашего элемента, исключая пробелы, табуляции и комментарии
        while (lastLi && lastLi.nodeType != 1){
           lastLi = lastLi.previousSibling;
        }
        if (lastLi){
            lastLi.parentNode.removeChild(lastLi);//удаляем пункт списка, 
                //если конечно в списке еще что-то осталось
          }
   }

Код HTML:

   
   <ol id="spisokst" style = "display:block;width:270px;background-color:#4EAEC1;color:black;">
                <li>Первоя строка</li>
                <li>Вторая строка</li>
                <li>Третья строка</li>
        </ol>
   <table>
     <tr>
      <td>
       <p onClick="javascript:addLi()" 
        style = "display:block;width:150px;background-color:#4EAEC1;color:black;"  
        align = "center" 
        onmouseover="this.style.color = '#ffffff';this.style.cursor = 'pointer';" 
        onmouseout="this.style.color = 'black';">
        Добавить в список
       </p>
     </td>
     <td>
      <p onClick="javascript:deleteLi()" 
       style = "display:block;width:150px;background-color:#4EAEC1;color:black;"  
       align = "center" 
       onmouseover="this.style.color = '#ffffff';this.style.cursor = 'pointer';" 
       onmouseout="this.style.color = 'black';" >
       Удалить из списка
      </p>
     </td>
    </tr>
   </table>

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

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

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

Понравилась статья? Поделиться с друзьями:
Заметки IT специалиста
Комментарии: 18
  1. Gek-Lamer

    Очень познавательно, мне понравилось, спасибо!

  2. Роман

    Действительно всё хорошо написано! Ждём продолжения!) Спасибо)

  3. Сергей

    Понятно, красиво, функционально. Спасибо.

  4. Олег

    Очень хороший, понятный, интересный урок. Спасибо! Жду продолжения!

  5. admin

    Продолжение темы JavaScript:
    JavaScript – Пример расширения формы регистрации
    Основы AJAX для начинающих

    Также могу предложить интересные материалы по CSS:
    Основы CSS для начинающих
    CSS — как сделать вертикальное меню

  6. Elizaveta

    а где размещать код JS? в каком файле?

    1. admin

      Можно в теге HEAD подключить js файл, в котором будет код JavaScript, например

      Или внутри самого HTML файла, например

      Код JavaScript

  7. Руслан

    если начинать с 0 изучать JS, то вообще не понятно… ибо функции как
    document.getElementById
    document.createElementBy Id
    итд не понятны…

    1. Жак

      Соглашусь. В начале вроде понятно, а потом все

  8. Natali

    the best

  9. Константин

    спасибо!

    1. admin

      Пожалуйста!

  10. Татьяна

    Самое лучшее объяснение связи js и html, которое я когда-либо встречала. Спасибо. Наконец-то докопалась до сути!))))

    1. admin

      Пожалуйста!

  11. Жак

    Довольно сложно для новичка, в начале понятно, а потом совсем непонятно

  12. Ольга

    Благодарю вас, за написание этой статьи.
    Абсолютно понятная информация. Если бы, все уроки по программировани ю были бы написаны, как ваша статья, профессионально . Об этом, только приходится мечтать.

    1. admin

      Спасибо за отзыв!

  13. Сергей

    Здравствуйте.
    Есть скрипт по увеличению изображений на сайте по клику. Вся проблема в том, что при использовании альтернативных форматов изображений по выбору браузера (функция picture) увеличенное изображение выходит в формате .jpg, независимо от того, что на странице отображается изображение в формате .webp.
    Подскажите, пожалуйста, как нужно изменить либо дополнить скрипт js, чтобы увеличенное изображение было того же формата, что и отображаемое на странице.
    Код размещаю ниже:

    Увеличение изображения

    .foto {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    width: 30%;
    margin: 15px;
    }
    .simple-img {
    position: fixed;
    z-index:2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-height: 90%;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    }
    .simple {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:none;
    text-align:center;
    }

    .simple-overlay { /* блок затемнения */
    background:rgba(0,0,0,0.9);
    position:fixed;
    z-index:1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    }

    $(document).ready(function() { // Ждём загрузки страницы
    $(«.foto»).click(function(){ // Событие клика на маленькое изображение
    var img = $(this); // Получаем изображение, на которое кликнули
    var src = img.attr(‘src’); // Достаем из этого изображения путь до картинки
    $(«body»).append(«»+ //Добавляем в тело документа разметку всплывающего окна
    «»+ // Блок, который будет служить фоном затемненным
    «»+ // Само увеличенное фото
    «»);
    $(«.simple»).fadeIn(50); // Медленно выводим изображение
    $(«.simple-img «).click(function(){ // Событие клика на затемненный фон
    $(«.simple»).fadeOut(50); // Медленно убираем всплывающее окн
    setTimeout(function() { // Выставляем таймер
    $(«.simple»).remove(); // Удаляем разметку всплывающего окна
    }, 50);
    });
    });
    });

    формат картинки на странице .jpg, увеличенной тоже .jpg

    формат картинки на странице .webp (если браузер поддреживает этот формат), а увеличенной уже .jpg

Добавить комментарий для Жак Отменить ответ

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку «Отправить комментарий», я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.