Назад Вперед

Часть 8. Три кита WEBa. Кит третий — JavaScript.

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

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

Пример JavaScript

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

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

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

Файл test.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>              
        </head>
        <body>
            ...
            <main>
                <script>
                    let logoImage = document.createElement('img');
                    logoImage.src = '../assets/img/logo.png';
                </script>
            </main>
            ...
        </body>  
    </html>
 

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

Подключается скрипт просто и следующим образом:

Файл test.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>              
        </head>
        <body>
                ...            
                <script src='script.js'></script>
        </body>  
    </html>
 

Для атрибута src прописывается путь, где находится файл с кодом. Разрешение файла .js. Вставляю эту запись в любое место и скрипт подключен. Важно помнить о порядке выполнения скриптов, если у них не будет явно указан атрибут async или defer для асинхронной загрузки, то скрипты будут выполнятся в порядке, в котором они вставлены (в материалах про создание сайта еще коснусь этой темы).

Новый файл script.js

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

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

Переменные в JavaScript можно объявить с помощью нескольких ключевых слов: var (переменную можно менять внутри других блоков), let (переменная видна только в блоке, в котором была объявлена), const (переменную нельзя изменять).

Файл script.js:


    let name = 'John';
    var year = 1992;
    const email = 'zhukrogdon@gmail.com';
 

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

Итак, после создания переменной ей можно сразу же присвоить значение, или сделать это позже. Язык поддерживает такие основные типы данных, как целое число, дробное, строка, булевые (true, false), массивы, объекты и другие.


    let name = 'John';
    var year = 1992;
    const email = 'zhukrogdon@gmail.com';
    
    let objectTest = {};
    let arrayTest = [1,2,3];
    let canMove = true;
 

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


    let x = 10;
    let y = 5;
    let a = x + y;
    let b = a / y;
 

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


    let personal = {
        name: 'John',
        lastName: 'Zhukov'
    };
 

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


    let z = myFunctionSum(5, 10);

    function myFunctionSum (a, b) {
        let x = a;
        let y = b;
        return x + y;
    }
 

Еще хочу отметить условные операторы if…else, которые помогают написать определенной условие, при выполнении которого может быть выполнен тот или иной код.


    let a = 10;
    let b = 9;

    if (a > b) {
        console.log(a);
    } else {
        console.log(b);
    }
 

Для повторного использования одного и того же участка кода используются циклы. Один из часто используемых циклов — for.


    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
 

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

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

В примере ниже я закомментировал все строки, чтобы можно было понять, что они делают. Комменты в JavaScript однострочные отмечаются символами //, а многострочные — /* текст */. В файле index.html добавил id к тегу header и в конце документа вставил script.

Файл script.js:


    //создаю элемент img и записываю в переменную logo
    let logo = document.createElement('img');
    //привязываю изображение к тегу header
    header.appendChild(logo);
    //прописываю путь к изображению
    logo.src = "logo.png";
    //объявляю массив для элементов меню
    let itemMenu = [];
    //создаю меню и привязываю к header 
    let menu = document.createElement('nav');
    header.appendChild(menu);
    //цикл для добавления элементом в меню
    for (var i = 0; i < 3; i++) {
        itemMenu[i] = document.createElement('a');
        menu.appendChild(itemMenu[i]);
        //форматирование элементов
        itemMenu[i].style.padding = '10px';
        itemMenu[i].style.color = 'white';
    }
    //добавляю к элементам текст
    itemMenu[0].innerHTML = 'HOME';
    itemMenu[1].innerHTML = 'PROJECT';
    itemMenu[2].innerHTML = 'BLOG';
    //добавляю к элементом путь
    itemMenu[0].href = 'index.html';
    itemMenu[1].href = 'index.html';
    itemMenu[2].href = 'test.html';    
 

Файл index.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>
            <link rel='stylesheet' href='style.css'>                
        </head>
        <body>
            <header id='header'>
                <nav>
                    <h1>
                        Главная страница
                    </h1>
                </nav>    
            </header>
            <main>
                <h2>
                    Жуков Иван Васильевич
                </h2>
                <p>
                    Руководитель проекта <span class='name'>LOVEtoPLAY</span>. 
                </p>
                <p>
                    Мое увлечение: <i>программирование, геймдизайн, создание игр</i>.
                </p>
                <img src='http://www.zhutiko.com/assets/img/image_one.jpg' alt='Изображение'>
            </main>
            <footer>
                <a href='https://vk.com/zhutiko' target='_blank'>
                    <span class='small-text'>Группа ВКонтакте</span> 
                </a>
            </footer>
            <script src='script.js'></script>   
        </body>  
    </html>
 

Файл style.css:


    /*Применяется ко всему документу*/
    * {
        margin: 0; /*внешний отступ*/
        padding: 10px 0; /*внутренний отступ*/
    }
    /*Применяется к телу документа*/
    body {
        background-color: grey; /*цвет фона*/
        text-align: center; /*расположение по центру содержимого*/
        color: white; /*цвет текста*/
        padding-top: 0; /*верхний внутренний отступ*/
    }
    /*Применяется к шапке документа*/
    header {
        background-color: black;
    
    }
    /*Применяется к подвалу документа*/
    footer {
        background-color: black;
    }
    /*Применяется ко всем абзацам*/
    p {
        font-size: 20px; /*размер шрифта*/
       
    }
    /*Применяется к элементу с классом name*/
    .name {
        color: green;
    }
    /*Применяется к элементу с классом small-text*/
    .small-text {
        font-size: 14px;
        color: white;
    }
 

Просмотрев страницы в браузере, можно заметить на странице появились элементы, которые не были описаны в HTML-документе (можно посмотреть код страницы в браузере).

Итоговый вариант страницы

На этом знакомство с основными тремя китами WEBа заканчивается. В следующем материале разберу самый основной для меня инструмент — фреймворк Phaser3 и запущу первую тестовую страницу с его помощью.

Спасибо за внимание!

Назад Вперед