Предыдущий ролик Следующий ролик  

Видео урок: Добавляем в проект jQuery и JavaScript

Создание отзывчивого веб-дизайна

Теперь мы добавим в наш проект немного JavaScript. Перейдем к файлам с упражнениями. Открываем вторую папку с файлами, которые нужно добавить. Давайте скопируем папку js и вставим копию в проект myWebsite. Внутри этой папки у нас есть design.js. Это пустой файл. У нас есть плагин предварительной загрузки изображений Far in Space, копия jQuery и копия respond.js. Теперь мы присоединим jQuery, плагин Far in Space и файл design.js к HTML файлу. Когда эти файлы скопированы, давайте вернемся в текстовом редакторе к файлу index.html.

После ссылки на файл css medium нажимаем Return. Начнем мы с написания тега script. Мы говорим, что type равен text/javascript. Также мы говорим, что source равен js/jquery-1.8.3.min.js, и все это внутри тега script. Далее мы пишем script, type равен text/javascript. source равен js/farinspace/jquery.imgpreload.min.js, затем закрываем тег script. А потом у нас идет еще один скрипт.

type равен text/javascript. А source равен js/design.js. Затем тег script закрывается. Теперь эти три файла JavaScript присоединены к index.html. Нажимаем Save. Давайте вернемся в папку myWebsite. Идем в папку JS, берем design.js и открываем его в нашем текстовом редакторе. Файл design.js является пустым JavaScript файлом, и здесь мы начнем с создания jQuery функции.

Начинается она со знака доллара, круглые скобки. Внутри скобок мы пишем document. За document мы пишем .ready, еще одни скобки и точка с запятой. Затем внутри ready мы пишем function, круглые скобки и фигурные скобки. И теперь, как только весь HTML будет загружен в браузер, все инструкции, которые мы вставили в эту функцию document.ready, будут выполняться. Давайте протестируем это. Заходим вот сюда и пишем алерт. Открывающая и закрывающая круглая скобка, точка с запятой, внутри круглых скобок две одинарные кавычки со строковым литералом внутри, и мы просто пишем - "this is working".

Нажимаем Save. Давайте вернемся к папке myWebsite. Открываем в браузере index.html. И если JavaScript был хорошо привязан, и если наша функция document.ready работает должным образом, мы получим это сообщение, которое всплывет, прежде чем загрузится страница, В нем написано - "this is working". Нажимаем OK и страница загрузится. Теперь все наши JavaScript файлы присоединены к HTML, пользовательская функция document.ready выдает нам алерт, и мы знаем, что весь JavaScript на месте, и теперь мы можем начать работать над динамической загрузкой контента, основываясь на размере экрана.