Nastavniky.ru

Обучение онлайн
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Web программирование лекции

Конспект лекций по Web-программированию по теме «Динамический HTML»

При пользовании «Инфоуроком» вам не нужно платить за интернет!

Минкомсвязь РФ: «Инфоурок» включен в перечень социально значимых ресурсов .

Динамический HTML. DOM и клиентские скрипты

По мере развития индустрии создания веб-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента дизайнера для создания интерактивных страниц. Эта возможность появилась с внедрением технологии, получившей название Dynamic HTML (DHTML).

Dynamic HTML (DHTML) — это обобщающий термин для набора технологий, используемых совместно для создания интерактивных и анимированных веб-сайтов. Обычно под DHTML подразумевается комбинация из статического языка разметки, клиентского языка сценариев, языка описания представлений и объектной модели документа. Т.е., DHTML — не особый язык, а c овокупность клиентских технологий веб-разработки, которую можно представить в виде такой условной «формулы»:

DHTML = HTML + CSS + DOM + JavaScript.

DHTML представляет клиентским скриптам доступ к переменным в определении языка разметки, изменение которых влияет на внешний вид и поведение изначально статического содержимого веб-страницы. Программное управление контентом становится возможным лишь после того, как веб-страница была полностью загружена в клиентское приложение. В случае DHTML «динамичность» проявляется при просмотре страницы клиентом, а не на этапе генерации уникального содержимого веб-сервером.

Document Object Model (DOM)

В браузере дерево элементов разметки преобразуется в структуру данных. Это представление основывается на спецификации Объектной Модели Документа (DOM), разработанной и поддерживаемой W3C. DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

nodeName — имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);

localName — локальное имя узла (если не переопределено, то соответствует nodeName);

prefix — имя (не адрес) пространства имен, описывающего узел (см. лекциюРасширяемый язык разметки XML);

namespaceURI — адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);

nodeType — целочисленный идентификатор типа узла (1 — элемент; 3,8 — содержимое, 9 — документ, 10 — тип документа и т.п.);

nodeValue — содержимое элемента (непосредственно данные);

id — уникальный в пределах документа идентификатор узла;

class — имя класса CSS.

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс (API), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

В этом определении DHTML, данном Консорциумом W3C не указывается, какой именно скриптовый язык должен быть использован в качестве инструмента доступа к DOM при разработке динамических страниц. В общем смысле, для управления поведением веб-страницы может быть использован любой код, который позволяет изменять содержание и внешний вид документа, или иным образом взаимодействовать с пользователем через веб-браузер. Тем не менее, исторически сложилось так, что основным языком разработки динамических страниц стал JavaScript и многое из того, что относится к DHTML вращается вокруг этого скриптового языка. В результате, браузерные плагины для веб-разработки (например, DOM Inspector для FireFox) представляют узлы DOM не иначе, как в виде объектов JavaScript.

Каждому узлу DOM сопоставлен набор правил CSS, куда входят стили по умолчанию, пользовательские и авторские стили. Исходя из этого набора и с учетом приоритетов для узла формируется вычисленная таблица стилей, которая и используется при его отображении. Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.

Как самостоятельно изучить веб-программирование

Автор: Сергей Никонов

Если вы очень хотите самостоятельно изучить веб-программирование и не знаете с чего начать и в какой последовательности изучать создание веб-сайтов, в данной статье вы найдете 6 простых шагов для освоения этой не простой, но очень интересной и высокооплачиваемой профессии веб-программист.

Почему так важен план обучения

Многие люди, желающие изучать веб-программирование, совершают одну и ту же ошибку. Рассмотрим типичный пример.

Человек для себя твердо решил, что хочет сменить свою текущую профессию и окунуться в увлекательный мир программирования, тем более, что обладателям данной профессии платят достаточно высокую заработную плату.

Читать еще:  Язык программирования r скачать

И вот новичок делает запрос в гугл “Курсы программирования” и перед ним открывается несколько десятков тысяч результатов с курсами.

Курсов программирования по созданию сайтов существует огромное количество: Курсы PHP, курсы HTML и CSS, курсы по Javascript, курсы по Yii2, курсы по MySQL и многие другие.

И новичок, желая постигнуть все курсы, бросается делать новые запросы в гугл:

Скачать бесплатно курсы программирования на торрентах, бесплатно курс по PHP и другие запросы. И в итоге собирает у себя на жестком диске, несколько терабайт курсов по программированию и несколько десятков мегабайт книг по созданию веб-сайтов.

Начинает смотреть сначала один курс по программированию, не досмотрев первый, когда перестает получаться, переключается на другой курс программирования или на другую технологию. И так, прыгая от курса к курсу, в голове у новичка в программировании образуется “каша” в голове.

Кто-то не зная основ объектно-ориентированного программирования, сразу скачивает курсы по Паттернам проектирования или не зная основы Javascript, пытается изучать курсы по Angular JS.

А иногда, не понимая что, Javascript и Java — это совсем разные языки и имеют разные предназначения, начинает смотреть курсы онлайн по Java. И на этом этапе у них совсем руки опускаются и они оставляют идею стать программистом или откладывают ее в “долгий” ящик, думая что научиться создавать веб-сайты для них слишком сложно.

Именно по этой причине так важен план обучения. Не совершайте похожие ошибки и вы пойдете кратчайшим путем к новой востребованной профессии веб-программист.

Шесть шагов как стать веб-программистом

Итак, если вы всерьез решили самостоятельно научиться программировать, выполните всего шесть шагов.

Шаг первый. Научитесь верстать.

Начните с верстки сайтов. За верстку сайтов отвечает технология HTML и для придания красивого внешнего вида каскадная таблица стилей или по другому ее называют CSS.

С помощью этой технологии, вы научитесь из обычной картинки формата JPEG или PSD макета Photoshop программировать внешний вид сайта, чтобы верстка сайта корректно открывалась в браузере.

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

Обязательно нужно тренироваться. С помощью HTML и CSS попробуйте создать 10 — 20 страниц вашего будущего веб-сайта.

Найдите сайт в интернете, но не слишком сложный, который вам понравится и попробуйте создать похожий. Сначала у вас не будет получаться, но этот этап пройдет, если вы будете пробовать снова и снова.

Вы можете скачать курс по технологиям HTML и CSS в интернете или вы можете посмотреть наш курс бесплатно онлайн в личном кабинете

Шаг второй. Фреймворк Bootstrap.

Пускай вас не пугает страшное слово фреймворк. Вскоре вы поймете, что это ваш самый близкий друг, который будет выручать вас при создании многих сайтов.

Изучайте Bootstrap только после того, как в полной мере освоили предыдущий шаг HTML и CSS.

С помощью фреймворка Bootstrap вы сможете создавать ту же самую верстку сайта, но намного быстрее. И одно из самых важных преимуществ Bootstrap, в том, что верстка ваших сайтов, будет адаптивной.

То есть ваш сайт будет хорошо выглядеть как на больших мониторах, так и на смартфонах и планшетах. Верстка сайта будет автоматически подстраиваться под устройство и вам для этого практически ничего не нужно будет делать, за вас позаботится Bootstrap.

Официальную документацию для самостоятельного изучения Bootstrap вы можете найти по адресу http://getbootstrap.com/ или можете смотреть наш курс по данному фреймворку в FructCode.

На фреймворке Bootstrap пробуйте также создавать верстку сайтов, чтобы немного освоиться.

Шаг третий. Программирование.

После того, как вы поймете основы верстки и создадите несколько своих сайтов-прототипов, переходите к программированию. Можете начать с языка PHP. Он невероятно простой и понятный.

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

Изучение PHP начните с процедурного процедурного подхода в программировании. Изучите основные понятия любого высокоуровневого языка программирования: Переменные, Типы переменных, Массивы, Циклы, Функции и другое. Именно в такой последовательности.

Читать еще:  1с школа программирования

Напишите с помощью процедурного подхода несколько простых программ, например, калькулятор или светофор.

Когда разберетесь более-менее с процедурным программированием на PHP, изучайте Объектно-ориентированное программирование (ООП).

ООП очень популярная парадигма программирования. Ее используют как минимум 90% всех софтверных компаний по всему миру, начиная от разработки простых сайтов, заканчивая разработкой огромных социальных сетей, например Facebook или VK и даже игр.

Системы написанные с помощью объектно-ориентированного программирования можно масштабировать и расширять до гигантских систем.

Когда изучите основы ООП на языке PHP, перепишите созданные ваши скрипты на процедурном подходе к программированию, в объектно-ориентированном стиле.

Шаг четвертый. База данных MySQL и CRUD.

Когда изучите предыдущие шаги, переходите к изучению взаимодействия языка программирования PHP с базой данных, с помощью языка запросов SQL.

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

С помощью языка запросов SQL, вы сможете “создавать”, “получать”, “обновлять”, “удалять” информацию из базы данных. Так вы перейдете к CRUD. Эти четыре буквы с английского языка расшифровываются как CREATE(создавать) — READ(читать) — UPDATE(обновлять) — DELETE(удалять).

Основы по языку запросов и администрированию MYSQL вы можете прочитать здесь

На этом шаге вам нужно будет попробовать создать CRUD приложение, которое сможет, к примеру, создавать на сайте новости, удалять на сайте новости, обновлять на сайте новости и просматривать новости.

Когда вы напишите несколько CRUD приложений, можно двигаться дальше к пятому и самому интересному шагу.

Полный и интерактивный курс по PHP и MySQL вы можете пройти здесь

Шаг пятый. MVC фреймворк.

Изучите простой php фреймворк, например Codeigniter. На этом шаге вам нужно будет перенести верстку вашего сайта, созданную на предыдущих этапах, в фреймворк. Основная задача — это понять паттерн MVC. Расшифровывается MVC как MODEL(модель) — VIEW(вид) — CONTROLLER(контроллер).

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

Создайте на простом PHP фреймворке и на паттерне MVC, сначала CRUD приложение, а затем и ваш первый веб-сайт.

Курс по фреймворку CodeIgniter доступен на сайте FructCode

После этого, создайте еще 3 — 5 веб-сайтов для себя, друзей, коллег, родственников. Это прибавит вам опыта и эти сайты пригодятся вам в качестве портфолио, когда вы решите, что готовы попробовать создавать сайты за деньги.

Шаг шестой. Изучение других технологий.

После того, как вы получили начальный опыт в программировании и возможно стали уже получать первые деньги за создание веб-сайтов, изучайте Composer, GIT, основы Linux, Javascript.

Затем переходите к более сложные фреймворки, такие как Yii2 или Laravel.

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

И не пытайтесь пройти все шаги за месяц. Это невозможно. Информация должна усваиваться естественным образом.

Рассчитывайте прохождение данных шагов минимум на 6 — 12 месяцев.

По всем технологиям вы можете гуглить, например: Что такое MVC php.

Заключение

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

И еще один очень важный совет: Если вы чувствуйте, на одном из шагов, что перестало получаться или что вам никогда это не освоить — не сдавайтесь.

Наоборот, в такие моменты вам нужно взять себя в руки и преодолеть эти трудности! Но одному постоянно мотивировать себя учиться достаточно тяжело.

И здесь вам поможет наставник.

Записывайтесь на наш пятимесячный курс Профессия веб-программист и вы сможете пройти все вышеперечисленные шаги вместе с опытным преподавателем.

Вы разберетесь в терминологиях ООП, такие как объекты, классы, инкапсуляция, полиморфизм, создадите профессиональный веб-сайт КИНОМОНСТЕР и в момент, когда вы захотите все бросить, получите “волшебный мотивационный пинок” 🙂

И если вы будете выполнять все домашние задания и проходить тестирования, результат вас точно не разочарует!

Для того, чтобы посмотреть видео, зарегистрируйтесь в личном кабинете

Web программирование лекции

Учебное пособие знакомит читателя с основами разработки приложения для работы в среде Web. В пособии рассматриваются основные технологии, лежащие в основе функционирования данного типа приложений, дан обзор языков представ-ления данных и программирования, являющихся основным инструментом для раз-работчиков и верстальщиков. Первая часть пособия посвящена обзору базовых принципов работы приложений в глобальной сети, описываются протокол HTTP как базовый транспорт данных между составляющими Web-приложений, языки описания и представления данных HTML и CSS, технология DHTML динамиче-ского изменения состояния документов в браузере.

Читать еще:  Язык программирования для андроид игр

Содержатся сведения, необходимые для изучения студентами принципов работы прикладного протокола HTTP стека протоколов TCP/IP. Рассмотрена структура, основные методы и поля заголовков запросов и ответов протокола HTTP. Рассмотрены принципы разработки прикладных приложений, работающих под управлением операционных систем семейства Windows и взаимодействующих по протоколу HTTP.

В методических указаниях приведено описание языка разметки HTML и технологии CSS с примерами их использования для вёрстки web-страниц.

В методических указаниях рассмотрены основы программирования на языке JavaScript, принципы иерархического формирования контента на основе DOM-модели, основы framework-библиотеки jQuery для динамического изменения страниц в рамках технологии DHTML

В методических указаниях приведено описание процесса динамического формирования представления Web-ресурса на стороне сервера с использлованием языка PHP

В методических указаниях приведено описание процесса взаимодействия клиентской и серверной стороны Web-приложения с использованием интерфейса html-форм c контролем полноты и корректности передаваемых на сервер данных. Дается разбор демонстрационного web-приложения.

В методических указаниях рассматриваются инструментарий языка PHP для работы с базами. Дается разбор демонстрационного web-приложения.

В методических указаниях рассматриваются организация взаимодействия клиентской и серверной стороны Web-приложения с использованием технологии AJAX. Дается разбор демонстрационного web-приложения

В методических указаниях рассматриваются методические и нструентральные средства продвижения Web-ресурса в популярных поисковых сервисах

Содержит набор презентаций в формате MS PowerPoint, содержащих матерал лекций, читаемых студентам ВПИ по курсу ‘Основы проектирования Web-приложений’

Люк Веллинг, Лаура Томсон / Разработка веб-приложений с помощью PHP и MySQL

Исчерпывающее учебное пособие по разработке веб-приложений, управляемых базами данных, с использованием PHP и MySQL! Эта книга предназначена для тех, кто знаком с основами HTML и ранее разрабатывал программы на современных языках программирования, но, возможно, не занимался программированием для Веб или не использовал реляционные базы данных.

Адам Фримен / ASP.NET 4.5 с примерами на C# 5.0 для профессионаловL

Настоящая книга представляет собой самый полный справочник по ASP.NET, который только можно найти. Полностью переписанное 5-е издание предлагает все, что необходимо знать для создания качественно спроектированных веб-сайтов ASP.NET. Книга начинается с основных концепций и постепенно формирует все нужные профессиональные навыки. В книге будет показано, как работать с базами данных, рассмотрены многочисленные применения XML и описаны соображения относительно защиты сайта от злоумышленников. Кроме того, будут представлены сложные темы, такие как использование проверки достоверности на стороне клиента, jQuery и Ajax.

Николас Закас, Джереми Мак-Пик, Джо Фосетт / Ajax для профессионалов

Ajax объединяет такие проверенные временем технологии, как CSS, XML и JavaScript, и позволяет разработчикам реализовывать более сложные и динамичные пользовательские интерфейсы. Рассмотрены различные способы выполнения запросов, основанные на скрытых и плавающих фреймах и на классе XMLHttp, даны рекомендации по применению этих способов. Описаны методики и шаблоны проектирования Ajax, позволяющие организовать взаимодействие клиент-сервер в веб-приложениях. Обсуждаются: методики создания агрегатора, получающего рассылки в форматах RSS и Atom, альтернативный формат передачи данных JSON, создание виджетов.Материал богато иллюстрирован примерами. В частности, описывается создание на базе технологии Ajax полноценного веб-приложения AjaxMail, объединяющего приемы программирования, обсуждаемые в книге. Рассказано о работе с библиотеками, написанными специально для того, чтобы упростить разработчикам реализацию приложений на базе технологии Ajax.

Андрей Гарнаев, Сергей Гарнаев / WEB-программирование на Java и JavaScript

Книга является руководством по Java и JavaScript для создания Web-проектов. Подробно описывается синтаксис языков программирования Java и JavaSript, детально обсуждается разработка Java-апплетов, приложений, графического интерфейса пользователя, сервлетов, серверных страниц JSP, Java Beans, рассматривается работа с базами данных и конструирование на JavaScript динамических и интерактивных Web-страниц. Особое внимание уделено принципам создания клиент-серверных компьютерных игр, электронных магазинов и информационно-поисковых систем. Книга содержит уникальную коллекцию, состоящую из более чем 350 примеров, часть из которых носит учебный характер, а другая является прототипом коммерческих проектов.

Официальный сайт популярной библиотеки на языке javaScript. Библиотека позволяет легко манипулировать элементами DOM документа, предлагает широкий выбор объектов и функций для анимации объектов, создания функциоальных элементов, ajax-обмена с сервером.

Ресурс, содержащий учебники по HTML, CSS, JavaScript, статьи по веб-дизайну, графике и созданию сайтов с примерам.

Цель этого сайта — предоставить как можно более грамотную и структурированную информацию по языку javascript и смежным технологиям.

Популяный интернет-ресурс по PHP, MySQL и другим web-технологиям

Denwer — джентельменский набор Web-разработчика

Ссылка на основную публикацию
Adblock
detector