Native JS для чайников. Создание HTML-шаблона с помощью JS.
Всем хорошего настроения.
Попытаюсь описать максимально доходчиво без злоупотребления сложных терминов. Чтобы было легче усвоить данный контент, вам нужны: минимальные знания HTML, CSS, базовые знания Javascript.
И так, поехали.
Сразу хочу пояснить, что при виртуализации вашей веб-странички по средствам javascript, сам процесс создания web-странички (разметка будет инициироваться в .js файле, а все стили будут храниться в .css файле), так что "возьни" с разметкой будет минимум.
Для начала создания нашей виртуальной странички, создадим в корневой директории сайта стандартный index.html файл. В дальнейшем все пути (для простоты) будут подключаться относительно данного файла.
Далее открываем данный файл для редактирования и заполняем стандартным скелетом гипер-разметки.
Так как мы будем заполнять видимую область отображаемого контента страницы (содержание тега <body></body>) с помощью javascript файла, то нам и нужно подключить данный файл.
1. Вопрос у многих новичков: А куда его подключить?
ответ: .js файлы можно подключать как внутри тега <head> , так и внутри тега <body>. Зависит это от логики взаимодействия элементов вашего web-приложения. В данном случае web-странички.
В нашем примере, шаблон страницы должен генерироваться сразу, при загрузке страницы в окне браузера. Если по Русски, то наш видимый контент страницы, должен отображаться сразу при событии загрузки окна браузера - событие (window.onload). По-этому: рационально подключить наш с вами .js файл внутри тега <head>. Делается это следующим образом.
создадим в корневой директории сайта директорию(папку) "js" и внутри папки создадим сам файл-скрипт с расширением "js", назовем его script.js. далее подключим данный файл в скелете.
Но в данном .js файле будет исполняемые функции, которые и создадут наш видимый шаблон, но все стили элементов хранятся в .css файле. Создадим в корневой папке директорию css и внутри этой папки создадим css файл style (style.css). Данный файл так же следует подключить внутри <head> следующим образом.
и теперь самое интересное! Так как мы будем создавать наш сайт на нативном javascript работа с нашим файлом index.html закончена. Не привычно? но в этом и вся суть виртуализации по средствам js.
Сохраняем и закрываем наш файл index.html и начинаем "ваять" наш шаблон внутри .js файла.
Для этого приходим из корневой директории в папку "js" и открываем для редактирования файл script.js
Чтобы наш js файл начал строить шаблон для нашей web-странички, нужно описать логику заполнения тега <body>. В данному случае мы уже определили событие, при котором начнется заполнения видимой области. Это событие - window.onload.
Но, для того, чтобы при возникновении данного события, что-то произошло, нужно описать поведение и исполнение кода внутри функции связанной с этим событием. Делаем это следующим образом.
и теперь, при событие window.onload будет исполнятся безымянная функция.
Создадим внутри этой функции именную функцию, которая будет создавать новый блочный элемент <div> c атрибутами (id="main" и class="mainclass") и поместим его как дочерний элемент к элементу <body>. Назовем эту функцию 'template';
сохраняем script.js и закрываем его, теперь переходим в файл style.css и создаем в нем стиль класса "mainclass".
сохраняем файл style.css и закрываем.
Теперь открываем в браузере наш файл index.html - и видим результат.
p.s.: в планах каждый свободный выходной добавлять новые полезные уроки по native javascript с детальным описанием и более интересными примерами.
p.s.s.: комментарий для минусов ниже.