7

Native JS для чайников. Создание HTML-шаблона с помощью JS.

Всем хорошего настроения.

Попытаюсь описать максимально доходчиво без злоупотребления сложных терминов. Чтобы было легче усвоить данный контент, вам нужны: минимальные знания HTML, CSS, базовые знания Javascript.


И так, поехали.

Сразу хочу пояснить, что при виртуализации вашей веб-странички по средствам javascript, сам процесс создания web-странички (разметка будет инициироваться в .js файле, а все стили будут храниться в .css файле), так что "возьни" с разметкой будет минимум. 

Для начала создания нашей виртуальной странички, создадим в корневой директории сайта стандартный index.html файл. В дальнейшем все пути (для простоты) будут подключаться относительно данного файла.

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

Далее открываем данный файл для редактирования и заполняем стандартным скелетом гипер-разметки.

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

Так как мы будем заполнять видимую область отображаемого контента страницы (содержание тега <body></body>) с помощью javascript файла, то нам и нужно подключить данный файл.


1. Вопрос у многих новичков: А куда его подключить?

ответ: .js файлы можно подключать как внутри тега <head> , так и внутри тега <body>. Зависит это от логики взаимодействия элементов вашего web-приложения. В данном случае web-странички.  


В нашем примере,  шаблон страницы должен генерироваться сразу, при загрузке страницы в окне браузера. Если по Русски, то наш видимый контент страницы, должен отображаться сразу при событии загрузки окна браузера - событие (window.onload). По-этому: рационально подключить наш с вами .js файл внутри тега <head>. Делается это следующим образом.


создадим в корневой директории сайта директорию(папку) "js" и внутри папки создадим сам файл-скрипт с расширением "js", назовем его script.js. далее подключим данный файл в скелете.

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

Но в данном .js файле будет исполняемые функции, которые и создадут наш видимый шаблон, но все стили элементов хранятся в .css файле. Создадим в корневой папке директорию css и внутри этой папки создадим css файл style (style.css). Данный файл так же следует подключить внутри <head> следующим образом.

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

и теперь самое интересное! Так как мы будем создавать наш сайт на нативном javascript работа с нашим файлом index.html закончена. Не привычно? но в этом и вся суть виртуализации по средствам js.


Сохраняем и закрываем наш файл index.html и начинаем "ваять" наш шаблон внутри .js файла.


Для этого приходим из корневой директории в папку "js" и открываем для редактирования файл script.js


Чтобы наш js файл начал строить шаблон для нашей web-странички, нужно описать логику заполнения тега <body>. В данному случае мы уже определили событие, при котором начнется заполнения видимой области. Это событие - window.onload.


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

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

и теперь, при событие window.onload будет исполнятся безымянная функция.

Создадим внутри этой функции именную функцию, которая будет создавать новый блочный элемент <div> c атрибутами  (id="main" и class="mainclass") и  поместим его как дочерний элемент к элементу <body>. Назовем эту функцию 'template';

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

сохраняем script.js и закрываем его, теперь переходим в файл style.css и создаем в нем стиль класса "mainclass".

Native JS для чайников. Создание  HTML-шаблона с помощью JS. Javascript, Native, Web, Frontend, HTML, Длиннопост

сохраняем файл style.css и закрываем.


Теперь открываем в браузере наш файл index.html - и видим результат.


p.s.: в планах каждый свободный выходной добавлять новые полезные уроки по native javascript с детальным описанием и более интересными примерами.


p.s.s.: комментарий для минусов ниже.

Дубликаты не найдены

0

Можно поинтересоваться - а зачем это всё?:) Может, я что-то не понимаю, но это изобретение какого-то велосипеда..

раскрыть ветку 1
+1

Js в нативном(родном) виде - это базисная основа. И причем тут велосипед?

0

коммент для минусов.

раскрыть ветку 5
-1
Нет такого понятия как Native JS, вообще идиотское определение. На крайняк, Vanilla JS.
Да и вредных советов дохера. Иди назад в свой 2004.
раскрыть ветку 4
0

2004 (!) xD - ты бы хоть в датах не путался.

раскрыть ветку 1
-1
Бегло просмотрел, нифига не понял. Автор обьясняет 'как сделать' но не обьясняет что он собственно делает, что хочет получить и зачем.

Можно вкратце - че это там за фигня?
раскрыть ветку 1
-4

такое вроде уже в 4м классе должны уметь делать. Ну, сразу после азбуки и 2+2.

Похожие посты
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: