Теоретические основы разработки и создания web сайта

жүктеу/скачать 2,62 Mb.

бет	1/2
Дата	07.01.2022
өлшемі	2,62 Mb.
	#19762
түрі	Реферат

1 2

Привет, мир!
. В данном случае говорят, что тег - открывающий, а тег

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

javascript — код на языке JavaScript;

vbscript — код на языке VBScript.

Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:

type=»text/javascript»

Одной из самых прикольных особенностей сценариев является возможность изменения содержимого страницы в результате выполнения программы. Но это только особеность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сказать» браузеру, что таких изменений внесено, не будет. В некоторые случаях это позволяет ускорить загрузку страницы.

Из стандартных атрибутов можно использовать атрибут charset.

Тег SCRIPT (или ряд таких элементов) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:

—

Все современные браузеры распознают этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют иное обозначение: в начале строки вводят два слеша //.

Программный код сценария выполняется в момент загрузки страницы, т.е. когда на экране еще видно ее содержание. Ниже представлен пример простейшего сценария (вывод сообщения в окне).

—

— Просто сценарий

—

Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.

Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы!» Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.

Таблицы

Являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).

Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега

Таблицу можно выровнять по горизонтали при помощи атрибута align:

align=»left» — влево;

align=»center» — по центру;

align=» right» — вправо.

Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%

Для просмотра веб-страниц в Интернете пользователи используют специальные программы, называемые браузерами. К наиболее распространенным относятся Mozilla FireFox, Opera, Internet Explorer (не рекомендуется использовать), Google Chrome.

Пользователь набирает в своем браузере адрес веб- страницы интернета. Если он набирает его в цифровом виде (IP-адрес вида 74.125.232.248), то браузер непосредственно связывается с сайтом Интернета, который находится по этому адресу. Если же адрес задан в текстовом виде, например «google.ru», то браузер связывается с DNS- сервером (прописанным в настройках сети компьютера), который заменяет текстовое имя на соответствующий ему IP-адрес.

Имя сайта в текстовом виде еще называют доменным именем. Так «google.ru» является доменом второго уровня в домене первого уровня «.ru». К наиболее распространенным доменным именам первого уровня относятся «.com», «.org»,

«.net», «.ru».

Каждый DNS сервер хранит данные (таблицу соответствия всех известных текстовых доменных имен цифровым IP-адресам). Это большой массив информации. Поэтому DNS сервера разбиты на несколько уровней, каждый из которых регулярно (примерно 2 раза в сутки) получает обновление от DNS-сервера старшего уровня. DNS сервера самого старшего уровня получают данные от Registars (компаний, отвечающих за регистрацию доменных имен). Registars за плату хранят информацию о том, какое доменное имя принадлежит какому человеку (или компании), а также регистрируют новые (незанятые) доменные имена.

Стоимость регистрации доменных имен второго уровня может составлять от 2 долларов за год для домена .info до 7- 10 долларов за год для доменов .com, .org, .net. Доменные имена третьего уровня (например, ponom.pusku.com) не требуют регистрации в компаниях Registars и иногда раздаются бесплатно. Каждый год требуется продлевать регистрацию доменного имени. Такая процедура называется renew и обычно стоит дороже, чем регистрация (плата за первый год).

HTML (HyperText Markup Language) переводится как “язык разметки гипертекста”. Под разметкой здесь понимается структурирование, форматирование и оформление документов.

HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе (например, в редакторе notepad++) и, который имеет расширение *.html или *.htm.

HTML-страница состоит из элементов, которые начинаются и заканчиваются специальными пометками - тегами. Теги - это ключевые слова, взятые в угловые скобки (символы меньше “<” и “больше” “>”). Например, тег

означает, что в этом месте веб-страницы нужно вставить горизонтальную линию. Большинство тегов в отличие от тега

применяются парами (обрамляют фрагмент текста). Например “Привет, мир! означает, что текст “Привет мир” должен быть выделен жирным шрифтом. Здесь тег означает включение жирного шрифта, а тег - окончание действия тега . В данном случае говорят, что тег - открывающий, а тег - закрывающий.

В общем случае открывающий тег заключается в угловые скобки вот так: <тег>, а закрывающий тег заключается в такие же скобки, но перед ключевым словом ставится еще наклонная черта “/” вот так: .

Веб-страница просматривается в браузере, который интерпретирует встречающиеся теги и выполняет нужные действия по разметке текста. Если какой-то тег неизвестен данному браузеру, то он просто игнорирует его. Язык HTML является стандартизированным и в теории действия всех браузеров должны соответствовать стандарту, однако на практике одна и та же веб-страница в разных браузерах может выглядеть по-разному. Причем отличия могут быть очень сильными и, иногда, даже противоречить стандарту (особенно это касается браузера Internet Explorer). Поэтому разработчик веб-страницы должен тестировать ее (предварительно просматривать) по возможности на всех основных браузерах.

Компоновка документа в HTML

Выше были рассмотрены основные теги HTML. Используя их, уже можно создавать свои страницы. Но создание страницы это не только верстка материалов, но и компоновка всех элементов (меню, заголовок страницы, основное информационное наполнение, баннеры и др.) на странице HTML документа. Если все элементы должны располагаться один за другим, тогда понятно как поступить - размещаем все блоки последовательно друг за другом и получаем результат. А как быть, если два элемента должны размещаться на одном уровне по горизонтали? Например, меню должно находиться слева или справа от текста? Ответ очевиден, использовать свойство HTML тегов, позволяющее вкладывать один тег в другой.

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

Компоновка HTML - использование таблиц

Как известно тег используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.
Наберите следующий пример.

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

Этот текст выводится в левом
столбце.
А этот текст выводится в

правом столбце.

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

.

Этот текст выводится в левом
столбце. Ширина этого столбца 20%

valign="top">А этот текст выводится в правом столбце. Ширина столбца

80%

Часть этой страницы отформатирована с помощью двух столбцов, как газетная страница, и общего заголовка. Все что находится ниже этого текста располагается в трех ячейках таблицы, причем для верхней ячейки указан атрибут colspan="2". Как можно видеть, есть левый столбец и правый столбец, а также общий заголовок. Для каждой ячейки указан свой цвет фона
.

Этот текст выводится в верхней ячейке таблицы.

Этот текст выводится в левом столбце.

Ширина этого столбца 20%
А

этот текст выводится в правом столбце. Ширина столбца 80%

Часть этой страницы отформатирована с помощью двух столбцов, как

газетная страница, и общего заголовка. Все что находится ниже этого текста

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

Этот текст выводится в верхней ячейке таблицы.

Этот текст выводится в левом столбце.

Ширина этого столбца 20%

А этот текст выводится в правом столбце. Ширина столбца 80%

, но и любому тегу или фрагменту текста, чтобы выделить нужную область на странице.

Классы и группировка

Два других интересных аспекта таблиц стилей - это классы и группировка.

Классы (class) определяют способ разбиения стилей на очень точные части. Всякий раз, когда вы хотите, чтобы определенный фрагмент текста как-то отличался от остальных, вы можете создать собственный тег HTML. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).

За стилевым классом в таблице стилей закрепляется имя. Это имя задается как обычное имя, но с точкой в качестве первого символа.

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

Для выбора между двумя стилями класса в теге (аналогичные правила действуют и для других тегов, имеющих описание а таблице стилей) используется атрибут class=имя_стиля.

1.6 Язык программирования JavaScript

Общие сведения о JavaScript
JavaScript — это один из самых популярных языков программирования в мире. Он, созданный более 20 лет назад, прошёл в своём развитии огромный путь. JavaScript задумывался как скриптовый язык для браузеров. В самом начале он обладал куда более скромными возможностями, чем сейчас. Его, в основном, использовали для создания несложных анимаций, вроде выпадающих меню, о нём знали как о части технологии Dynamic HTML (DHTML, динамический HTML).

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

В наши дни JS используется не только в традиционных браузерах, но и за их пределами. В частности, речь идёт о серверной платформе Node.js, о возможностях по использованию JavaScript в разработке встраиваемых и мобильных приложений, о решении широкого спектра задач, для решения которых раньше JavaScript не использовался.

Основные характеристики JavaScript

JavaScript — это язык, который отличается следующими особенностями:

Высокоуровневый. Он даёт программисту абстракции, которые позволяют не обращать внимание на особенности аппаратного обеспечения, на котором выполняются JavaScript-программы. Язык автоматически управляет памятью, используя сборщик мусора. Разработчик, в результате, может сосредоточиться на решении стоящих перед ним задач, не отвлекаясь на низкоуровневые механизмы (хотя, надо отметить, это не отменяет необходимости в рациональном использовании памяти). Язык предлагает мощные и удобные средства для работы с данными различных типов.

Динамический. В отличие от статических языков программирования, динамические языки способны, во время выполнения программы, выполнять действия, которые статические языки выполняют во время компиляции программ. У такого подхода есть свои плюсы и минусы, но он даёт в распоряжение разработчика такие мощные возможности, как динамическая типизация, позднее связывание, рефлексия, функциональное программирование, изменение объектов во время выполнения программы, замыкания и многое другое.

Динамически типизированный. Типы переменных при JS-разработке задавать необязательно. В одну и ту же переменную можно, например, сначала записать строку, а потом — целое число.

Слабо типизированный. В отличие от языков с сильной типизацией, языки со слабой типизацией не принуждают программиста, например, использовать в неких ситуациях объекты определённых типов, выполняя, при необходимости, неявные преобразования типов. Это даёт больше гибкости, но JS-программы не являются типобезопасными, из-за этого усложняются задачи проверки типов (на решение этой проблемы направлены TypeScript и Flow).

Интерпретируемый. Широко распространено мнение, в соответствии с которым JavaScript является интерпретируемым языком программирования, что означает, что программы, написанные на нём, не нуждаются в компиляции перед выполнением. JS в этом плане противопоставляют таким языкам, как C, Java, Go. На практике же браузеры, для повышения производительности программ, выполняют компиляцию JS-кода перед его выполнением. Этот шаг, однако, прозрачен для программиста, он не требует от него дополнительных усилий.

Мультипарадигменный. JavaScript не навязывает разработчику использование какой-то конкретной парадигмы программирования, в отличие, например, от Java (объектно-ориентированное программирование) или C (императивное программирование). Писать JS-программы можно, используя объектно-ориентированную парадигму, в частности — применяя прототипы и появившиеся в стандарте ES6 классы. Программы на JS можно писать и в функциональном стиле, благодаря тому, что функции здесь являются объектами первого класса. JavaScript допускает и работу в императивном стиле, используемом в C.

Да, кстати, надо отметить, что у JavaScript и Java нет ничего общего. Это — совершенно разные языки.

JavaScript и стандарты

ECMAScript, или ES, это название стандарта, которым руководствуются разработчики JavaScript-движков, то есть — тех сред, где выполняются JS-программы. Различные стандарты вводят в язык новые возможности, говоря о которых нередко упоминают наименование стандартов в сокращённой форме, например — ES6. ES6 — это то же самое, что и ES2015, только в первом случае число означает номер версии стандарта (6), а во втором — год принятия стандарта (2015).

Сложилось так, что в мире веб-программирования очень долго был актуален стандарт ES3, принятый в 1999 году. Четвёртой версии стандарта не существует (в неё попытались добавить слишком много новых возможностей и так и не приняли). В 2009 году был принят стандарт ES5, который представлял собой прямо-таки огромное обновление языка, первое за 10 лет. После него, в 2011 году, был принят стандарт ES5.1, в нём тоже было немало нового. Весьма значительным, в плане новшеств, стал и стандарт ES6, принятый в 2015 году. Начиная с 2015 года, новые версии стандарта принимают каждый год.

жүктеу/скачать 2,62 Mb.

Достарыңызбен бөлісу: