Меню сайта
Категории раздела
Мои лекции [2]
C# [2]
as3 [3]
теория и практика
java [1]
первые шаги в java. Теория и практика
Web [2]
CSS, HTML, JS и т.д.
MyProgramms [2]
Образование [1]
лекции разного уровня
Мои ссылки
  • Новый проект Ufo&MIR
  • Дизайн-магазин
  • Поиск
    Статистика


    Воскресенье, 22.10.2017, 04:02ГлавнаяМой профильРегистрацияВыходВход
    Добро пожаловать в мой MIR!
    Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
    Главная » Статьи » Программирование » Web

    Создаем простую таблицу при помощи JavaScript и HTML
    Первая статья о JS или первые шаги в JavaScript.

    Ресурсы: Eclipse Mars for PHP Developers

    Цель: Написать на JavaScript программу, которая бы создавала таблицу в HTML с наименьшими затратами по времени.

    Итак, создаем новый проект File - New - Project... - JavaScript
    После того как проект создан, слева у Вас в PHP Explorer будет папка. На ней откроем контекстное меню и там New - Other - JavaScript.

    eclipse mars for php выбираем javascript

    Рисунок 1 - Выбираем из списка JavaScript Source File

    Именно через это меню мы будем создавать файл для HTML, CSS и т.д.

    1) Создаем фаил.js
    2) создаем файл.html. Можете его создать по шаблону, а можете сами прописать.

    // здесь обозначим, что используем HTML 5. Запись короткая в отличии от прошлых версий

    <!DOCTYPE html>

    // стандартные теги HTML для создания страницы
    <html>
        <head>
            <title> Заголовок страницы </title>


    // подключаем внешний фаил javascript к странице
            <script src ="table_creator.js"> </script>

        </head>

    // в теге тела добавим атрибут onload для работы с javascript, который позволяет запустить нашу функцию после загрузки
        <body onload=drawTable()>

        </body>
    </html>


    Всё, html фаил создан, теперь перейдем к созданию java script файла.

    3) Работаем с JavaScript
     а) создаем фаил с тем же именем как указано в подключаемом файле html.
    б) создаем функцию и указываем такое же имя, как указано в теге body.
    В результате  будет:

    Function JavaScript
    Рисунок 2 - Фрагмент кода JavaScript файла

    Итак, в первой строчке видно знакомое уже всем имя функции.
    Во второй строчке создаем тег table при помощи выражения document.createElement(элемент).

    Чтобы таблицу можно было различить, задаю ей атрибут бордюр.

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

    Затем я вешаю слушатель события к тегу. Но пока этот момент пропустим и вернемся к нему чуть позже.


    А теперь запускаем цикл. Там мы будем отрисовывать таблицу, а точнее ее строки и столбцы. Строку мы создадим при помощи метода insertRow(i), а столбцы - insertCell(j).

    Обращаю внимание, что ячейкам я задаю атрибуты, которые мне потребовались. Это еще один способ  указать атрибут тега. В данном случае здесь в качестве тега будет <td>.

    И здесь так же мне потребовалось указать id. И вот эта запись:

    cell["id"] = "".concat(i,j);


    показывает, что переменная cell как массив с ключом id будет иметь значение (с помощью метода склеивания я присоединила к текстовой строке числовые значения).

    Последняя строчка за циклом говорит, что б мы вставили в документ(document) внутри тега body только что созданный элемент и отобразили - метод appendChild(элемент).

    А теперь вернемся к слушателю событий
    Цель: Хочу щелкнуть по ячейки и узнать её id.

    В методе addEventListener указываю событие, которое хочу отловить, в данном случае это "click". Затем придумываю имя функции, где будет код, который будет что-то делать, если событие пришло.  А в конце я указала, что тип отлова мне нужен простой, без наворотов, поэтому false. Итак, как вы поняли или не поняли, но суть в том, что теперь создаем еще одну функцию с именем onClickCell.

    function onClickCell(event){
        alert(event.target.id);
    }


     Так как эта функция-Событие, то указываю, что входящим значением является event. В качестве проверки, что я получила результат того, чего хотела, я, использую диалоговое окно alert и оно мне показывает id выбранной (target) мною ячейки.
    Отлов события JavaScript
    Рисунок 3 - Пример отлова события с выбранной ячейки.



    БОНУС!
    Функция проверки при создании таблицы.

    function checkCell(){
    // Обращаемся к заданному id таблицы и берем элементы ячейки
        var idTab= document.getElementById("tab").cells;
    // Считаем количество ячеек
        var numCells = idTab.length;
    // Выводим их по порядку.
        for(var td=0; td <= numCells; td++)
         alert(td);

    }
    В дальнейшем этот код может пригодиться для работы с ячейками.

    На этом всё.
    Удачи!
    Категория: Web | Добавил: halenka (01.09.2015)
    Просмотров: 3054 | Теги: web, программирование, js, table, javascript, html 5 | Рейтинг: 5.0/2
    Всего комментариев: 0

    Copyright MyCorp © 2017