Нажмите "Enter" для перехода к содержанию

Улучшение структуры html-файла

Задание 2.
  1. Создать файл date2.htm — копию html-файла date1.htm из Задания 1.
  2. Код, использовавшийся для формирования даты, поместить в функцию showDate(), которая должна возвращать код разметки.
  3. Определение функции поместить в заголовочную часть документа.
  4. Добавить в тело документа код  для вывода даты с помощью функции showDate().
  5. Убедиться, что страница формируется правильно.
  6. Создать файл date3.htm — копию html-файла date2.htm.
  7. Создать в той же папке новый файл showDate.js, в который скопировать определение функции showDate().
  8. В заголовочной части date3.htm заменить определение функции на подключение файла showDate().
  9. Убедиться, что страница формируется правильно.

В результате у Вас в файле date2.html получится код:

<html>
 <head>
  <title>Вывод даты.</title>
  <style> 
    #s1 { 
         background: #ffff00; /* Цвет фона желтый */
         color: red; /* Цвет текста */
         max-width: 150px; /* Максимальная ширина элемента*/
         margin-left: auto; /* Отступ слева. Размер будет автоматически
                             рассчитан браузером */
         margin-right: auto; /* Отступ справа */
         font-weight: bold; /* Для выделения текста жирным шрифтом */
    }
  </style>
  <sсript type="text/javascript">
    function ShowDate(){
       var date, day, month, year,currentDate;
       date=new Date(); // получение полной информации о текущей дате
       day=date.getDate(); // номер дня месяца
       month=date.getMonth()+1; // номер месяца, отсчитывается от нуля
       year=date.getFullYear(); // год четырьмя цифрами
       //формирование строки для вывода, плюс — конкатенация
       currentDate = '<p id="s1">' + '<b>'  + 'Сегодня: '  + '<span
style="color: teal;">' + '<u>'  + day + '</u>' + "-"  + month + "-"  +
year + '</span>'  + '</b>' + '</p>';
       return currentDate;
  </sсript>
 </head>
 <body>
  <div>
   <sсript type="text/javascript">
     document.write(ShowDate());
   </sсript>
  </div>
 </body>
</html>

В результате у Вас в файле date3.html получится код:

<html>
 <head>
  <title>Вывод даты.</title>
  <style> 
    #s1 { 
         background: #ffff00; /* Цвет фона желтый */
         color: red; /* Цвет текста */
         max-width: 150px; /* Максимальная ширина элемента*/
         margin-left: auto; /* Отступ слева. Размер будет автоматически
                             рассчитан браузером */
         margin-right: auto; /* Отступ справа */
         font-weight: bold; /* Для выделения текста жирным шрифтом */
    } 
  </style>
  <sсript src="ShowDate.js"> 
  </sсript>
 </head>
 <body>
  <div>
   <sсript type="text/javascript">
     document.write(ShowDate());
   </sсript>
  </div>
 </body>
</html>

А в файле showDate.js будет следующий код:

var date, day, month, year,currentDate;  
function ShowDate(){
    date=new Date();
    day=date.getDate(); 
    month=date.getMonth()+1; 
    year=date.getFullYear();   
    currentDate = '<p id="s1">' + '<b>'  + 'Сегодня: '  + '<span
 style="color: teal;">'  + '<u>'  + day  + '</u>'  + "-"  + month  + "-"
 + year  + '</span>'  + '</b>'  + '</p>';
return currentDate; 
}

 

  19 урок. Пишем программу Калькулятор
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить