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

Обновлено: 21.11.2024

VBScript расшифровывается как Visual Basic Scripting, который образует подмножество Visual Basic для приложений (VBA). VBA — это продукт Microsoft, который включен НЕ только в другие продукты Microsoft, такие как MS Project и MS Office, но также и в сторонние инструменты, такие как AUTO CAD.

Возможности VBScript

VBScript – это легкий язык сценариев с молниеносным интерпретатором.

В большинстве случаев VBScript нечувствителен к регистру. У него очень простой синтаксис, его легко изучить и реализовать.

В отличие от C++ или Java, VBScript — это объектно-ориентированный язык сценариев, а НЕ объектно-ориентированный язык программирования.

Он использует объектную модель компонентов (COM) для доступа к элементам среды, в которой он выполняется.

Успешное выполнение VBScript возможно только в том случае, если он выполняется в хост-среде, такой как Internet Explorer (IE), Internet Information Services (IIS) и Windows Scripting Host (WSH)

VBscript — история версий и использование

VBScript был представлен Microsoft еще в 1996 году, и его первой версией была 1.0. Текущая стабильная версия VBScript — 5.8, доступная как часть IE8 или Windows 7. Области использования VBScript многочисленны и не ограничиваются приведенным ниже списком.

VBScript используется в качестве языка сценариев в одном из популярных инструментов автоматизированного тестирования — Quick Test Professional, сокращенно QTP

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

Active Server Pages (ASP), среда сценариев на стороне сервера для создания динамических веб-страниц, использующих VBScript или Java Script.

VBScript используется для сценариев на стороне клиента в Microsoft Internet Explorer.

Формы Microsoft Outlook обычно работают на языке VBScript; однако программирование на уровне приложений основано на VBA (Outlook 2000 и более поздние версии).

Недостатки

VBscript используется только браузерами IE. Другие браузеры, такие как Chrome, Firefox НЕ ПОДДЕРЖИВАЮТ VBScript. Следовательно, JavaScript предпочтительнее VBScript.

VBScript имеет ограниченную поддержку командной строки.

Поскольку среда разработки по умолчанию недоступна, отладка затруднена.

Где VBScript сегодня?

Ваш первый VBScript

Давайте напишем VBScript для вывода "Hello World".

В приведенном выше примере мы вызвали функцию document.write, которая записывает строку в HTML-документ. Эта функция может использоваться для написания текста, HTML или того и другого. Итак, приведенный выше код отобразит следующий результат —

Пробелы и разрывы строк

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

Форматирование

VBScript основан на Microsoft Visual Basic. В отличие от JavaScript, для завершения конкретного оператора не используются такие символы, как точка с запятой.

Однострочный синтаксис

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

Многострочный синтаксис

Если инструкция в VBScript длинная и пользователь хочет разбить ее на несколько строк, пользователь должен использовать символ подчеркивания "_". Это улучшает читаемость кода. В следующем примере показано, как работать с несколькими строками.

Зарезервированные слова

В следующем списке показаны зарезервированные слова в VBScript. Эти зарезервированные слова НЕ ДОЛЖНЫ использоваться в качестве констант или переменных или любых других идентификаторов.

< tr> < td>Сохранить
Цикл LSet Я
Мод Новый Следующий
Нет Ничего Нет
Вкл. Option Необязательно
Или ParamArray
Частный Общий RaiseEvent
ReDim< /td> Rem Возобновить
RSet Выбрать Установить
Общий Одиночный Статический
Стоп Подчиненный Затем
К Истина Тип
And As Boolean
ByRef Byte ByVal
Call Case Class
Const Currency Debug
Dim Do Double
Каждый Еще ЕщеЕсли
Пустой Конец EndIf
Enum< /td> Eqv Событие
Выход False Для
Функция Get GoTo
If Imp Реализует
В Целое число Есть
Let Нравится Долго
TypeOf Пока Вариант
Wend While With
Xor Eval Execute
Msgbox Erase ExecuteGlobal
Явный вариант Случайный выбор SendKeys

Чувствительность к регистру

VBScript — это язык, нечувствительный к регистру. Это означает, что ключевые слова языка, переменные, имена функций и любые другие идентификаторы НЕ должны быть набраны с постоянным использованием заглавных букв. Таким образом, идентификаторы int_counter, INT_Counter и INT_COUNTER имеют одинаковое значение в VBScript.

Комментарии на языке VBScript

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

<р>1. Любое выражение, начинающееся с одинарной кавычки (‘), рассматривается как комментарий.

Ниже приведен пример —

<р>2. Любое утверждение, начинающееся с ключевого слова «REM».

Ниже приведен пример —

Не все современные браузеры поддерживают VBScript. VBScript поддерживается только Microsoft Internet Explorer, в то время как другие браузеры (Firefox и Chrome) поддерживают только JavaScript. Поэтому разработчики обычно предпочитают JavaScript, а не VBScript.

Хотя Internet Explorer (IE) поддерживает VBScript, вам может потребоваться включить или отключить эту функцию вручную. Это руководство познакомит вас с процедурой включения и отключения поддержки VBScript в Internet Explorer.

VBScript в Internet Explorer

Вот простые шаги, чтобы включить или выключить VBScript в вашем Internet Explorer.

Выберите Инструменты → Свойства обозревателя в меню

Выберите вкладку «Безопасность» в диалоговом окне

Нажмите кнопку "Пользовательский уровень"

Прокрутите вниз, пока не найдете параметр «Сценарии».

Выберите переключатель «Включить» в разделе «Активные сценарии».

Наконец нажмите OK и выйдите

Чтобы отключить поддержку VBScript в Internet Explorer, выберите переключатель Отключить в разделе Активные сценарии.

Размещение VBScript в файле HTML

Предусмотрена возможность включения кода VBScript в любое место HTML-документа. Но наиболее предпочтительный способ включения VBScript в ваш HTML-файл заключается в следующем:

С момента выпуска в декабре 1995 г. (после Java, выпущенного 23 мая 1995 г.) JavaScript претерпел множество изменений. JavaScript начинался как язык программирования на стороне клиента (который работает внутри веб-браузера) для добавления интерактивного содержимого на веб-страницы. Он стал более надежным с DHTML и AJAX. С Node.js (в 2009 г.) JavaScript можно использовать для программирования на стороне сервера и создания полнофункциональных веб-приложений. В 2015 году в ECMAScript 6 (ES6) представлено серьезное обновление языка.

В этой статье основное внимание уделяется JavaScript до Node.js и ECMAScript 6, т. е. JavaScript как клиентскому языку программирования для предоставления интерактивного содержимого веб-страницам. Я предоставлю обновления в других статьях.

Введение

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

JavaScript – это наиболее широко используемый клиентский язык программирования, который позволяет наполнить ваш HTML интерактивностью, анимацией и динамическими визуальными эффектами для улучшения пользовательского интерфейса и взаимодействия с пользователем (UI/UX). Это:

  • небольшой, легкий, объектно-ориентированный, кроссплатформенный язык сценариев специального назначения, предназначенный для запуска в хост-среде (обычно в веб-браузере).
  • язык сценариев на стороне клиента для обогащения пользовательских веб-интерфейсов и создания динамических веб-страниц (например, проверка ввода формы и немедленный ответ на действия пользователя).
  • движок, поддерживающий AJAX (асинхронный JavaScript и XML), который вызывает новый интерес к JavaScript.

JavaScript работает вместе с HTML/CSS. HTML предоставляет содержимое (или структуру); CSS определяет представление; а JavaScript программирует поведение. Вместе они обогащают пользовательский интерфейс/UX веб-пользователей.

JavaScript теперь везде с Node.js

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

С появлением Node.js (кроссплатформенной среды выполнения JavaScript с открытым исходным кодом) вы можете запускать JavaScript автономно или внутри сервера (вместо браузера). Это позволяет использовать один язык как для серверного, так и для клиентского программирования.

История и версии

JavaScript, первоначально называвшийся LiveScript, был создан Бренданом Эйхом из Netscape в 1995 году. Вскоре после этого Microsoft выпустила собственную версию JavaScript под названием JScript. Впоследствии Netscape представила его в ECMA (ранее "Европейская ассоциация производителей компьютеров", теперь "Ecma International — Европейская ассоциация стандартизации информационных и коммуникационных систем") для стандартизации вместе с JScript от Microsoft.

Спецификация ECMA называется "Спецификация языка ECMA-262 ECMAScript" @ http://www.ecma-international.org/publications/standards/Ecma-262.htm (также утверждена как "ISO/IEC 16262"):

  • ECMA-262, версия 1 (июнь 1997 г.)
  • ECMA-262, версия 2 (август 1998 г.)
  • ECMA-262, версия 3 (декабрь 1999 г.)
  • ECMA-262, версия 4 — отказ из-за политических разногласий. В 2007 году TC-39 (комитет, ответственный за ECMAScript) представил проект спецификации для ECMAScript 4, которая была масштабной и содержала много нового синтаксиса и функций. Но группа разработчиков из Yahoo, Google и Microsoft посчитала, что это уже слишком, и создала альтернативное предложение под названием ECMAScript 3.1. ECMAScript 4 так и не был доработан.
  • ECMA-262 версии 5 и 5.1 (июнь 2011 г.): ECMAScript 3.1 в конечном итоге был стандартизирован как ECMAScript 5.
  • ECMA-262 2015 – более известный как ECMAScript 6 или ES6.
  • ECMA-262 2016 (версия 7). Начиная с ES6, стандарты ECMAScript публикуются ежегодно.
  • ECMA-262 2017 (версия 8)
  • ECMA-262 2018 (версия 9)
  • 1.0 (1996 г.)
  • 1.3 (1998 г.): соответствие стандарту ECMA-262 версии 1
  • 1.5 (1999 г.): соответствие стандарту ECMA-262 версии 3
  • 1.6, 1.7:
  • 1.8 (2008 г.), последняя версия 1.8.5 (2010 г.): соответствие стандарту ECMA-262 версии 5
  • .
JavaScript и Java

Java — это полноценный универсальный язык программирования. Он был создан Джеймсом Гослингом из Sun Microsystems (теперь часть Oracle) и выпущен в августе 1995 года.

JavaScript был создан Бренданом Эйхом из Netscape в том же 1995 году. Первоначально называвшийся LiveScript, это был небольшой и легкий язык специального назначения для написания клиентской программы, работающей внутри браузера, для создания активных пользовательский интерфейс и создавать динамические веб-страницы. Он был переименован в JavaScript в результате злополучного маркетингового решения, призванного извлечь выгоду из популярности языка Java, когда Netscape выпустила свой Navigator 2 в 1996 году.

Java и JavaScript — совершенно разные языки для разных целей программирования. Однако в первые дни были предприняты некоторые усилия по внедрению синтаксиса и соглашений Java в JavaScript, так что JavaScript кажется подмножеством Java. На самом деле у них очень мало общего.

Что НЕ МОЖЕТ делать клиентский JavaScript?

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

  1. Он не может прочитать файл с клиентского компьютера.
  2. Он может подключаться только к тому серверу, с которого пришел. Он может читать файл с сервера, с которого он пришел. Он не может записать файл на сервер.
  3. Он не может подключиться к другому серверу.
  4. Он не может закрыть окно, которое не открыто.
JQuery

jQuery – это популярная кроссбраузерная библиотека JavaScript. jQuery — это JavaScript (но с собственным синтаксисом расширений), поэтому вам нужно понимать JavaScript.Я предлагаю вам прочитать синтаксис JavaScript (и обратить особое внимание на объекты), а затем переключиться на jQuery для своей работы. Прочтите "Основы jQuery".

JavaScript на примерах

Я предполагаю, что вы знаете HTML и CSS (в противном случае читайте мои статьи по HTML/CSS). Я также предполагаю, что вы понимаете некоторые основы программирования, такие как переменные, конструкции if-else и for-loop.

JavaScript запускается внутри браузера. Есть стандарты на JavaScript. Но большая пятерка (Chrome, Firefox, IE, Safari и Opera), в частности IE, не придерживается строго всех стандартов. Кроме того, они создают свои собственные расширения. Следовательно, поведение JavaScript может быть разным в разных браузерах. Возможно, вам придется протестировать свои сценарии JavaScript в нескольких браузерах. [Вот где jQuery пригодится, так как jQuery обеспечивает кросс-браузерную поддержку.]

Пример 1: Функции alert() и document.write()

Давайте напишем наш первый JavaScript для вывода сообщения "Hello, world".

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

  • JavaScript чувствителен к регистру. Роза НЕ является РОЗОЙ и НЕ является Розой .
  • "Лишние" пробелы (пробелы, символы табуляции и новые строки) игнорируются. То есть несколько пробелов рассматриваются как один пробел. Вы можете свободно использовать их, чтобы облегчить чтение вашей программы.

Сохраните файл как "JSExAlertWrite.html" (или любое другое имя файла, которое вы предпочитаете, с расширением ".html" или ".htm"). Запустите скрипт, загрузив HTML-файл в браузер с поддержкой JavaScript (например, один из БОЛЬШОЙ ПЯТЕРКИ — Chrome, Firefox, Internet Explorer, Safari или Opera).

Как это работает?
  1. JavaScript — это программный код, встроенный в HTML-документ. Коды содержатся между парой тегов следующим образом: ПРИМЕЧАНИЕ. В HTML4/XHTML вам необходимо включить в элемент атрибут type="text/javascript". Строки 7–9 и строки 13–17 представляют собой два фрагмента кода JavaScript, размещенные в разделах HEAD и BODY соответственно.
  2. Операции JavaScript заканчиваются точкой с запятой ';' .
  3. Функция alert(aString) (строка 8) открывает диалоговое окно, отображающее sString и кнопку OK. Строки заключаются в пару двойных кавычек или одинарных кавычек.
  4. Текущая веб-страница представлена ​​так называемым объектом документа в JavaScript. Свойство document.lastModified (строка 16) хранит дату последнего изменения текущего документа. Функция document.write(aString) (строки 14–16) может использоваться для записи указанной aString в текущий документ как часть текущего HTML-документа.< /li>
  5. Операция '+' (строка 16) объединяет фрагменты строк (аналогично языку Java).
  6. В результате использования document.write() раздел BODY этого документа содержит:
  7. Alert() и document.write() — это одни из часто используемых встроенных функций, предоставляемых в JavaScript.

ПОПРОБУЙТЕ: распечатайте название документа и URL-адрес. (Советы: используйте свойства document.title и document.location.)

Не зацикливайтесь на кеше — нажмите Control-Refresh (или Control-F5)

Если вы измените коды и перезагрузите веб-страницу, новые коды могут не выполниться, поскольку браузер кэширует ранее загруженную версию. Вы можете использовать Control-F5 (Control-Refresh), чтобы попросить браузер удалить кеш и загрузить новую страницу.

Пример 2: Переменные и функции prompt() , confirm()

Этот скрипт запрашивает у пользователя его/ее имя, подтверждает имя и печатает приветственное сообщение.

Существует три типа всплывающих диалоговых окон для взаимодействия с пользователями:

  1. Функция alert(aString) помещает aString во всплывающее окно с кнопкой OK. Чтобы продолжить, пользователю необходимо нажать кнопку "ОК".
  2. Функция prompt(promptingString, defaultInputString?) выводит всплывающее окно ввода с promptingString с кнопками OK и Cancel. . Он возвращает ввод, введенный пользователем, в виде строки; или специальное значение, называемое null, если пользователь нажимает кнопку «Отмена». Необязательный параметр defaultString указывает начальную отображаемую строку. В этой статье я буду указывать необязательные параметры функции с завершающим знаком '?' для компактности.
  3. Функция подтверждения(aString) помещает aString во всплывающее окно с кнопками OK и Cancel. Возвращает true, если пользователь нажимает кнопку OK; или false в противном случае.
Как это работает?
  1. В строке 8 объявляется переменная с именем username с помощью ключевого слова var . Переменная – это именованное место хранения, в котором хранится значение.После объявления переменной вы можете присвоить (и переназначить) значение этой переменной с помощью оператора присваивания '=' (строка 9).
  2. Строка 9 вызывает функцию prompt(promptingString, defaultString?) для вывода диалогового окна и чтения строки, введенной пользователем. Прочитанная строка присваивается переменной username. Функция prompt() похожа на alert() , но принимает ввод пользователя.
  3. В строке 10 функция подтверждения(aString) выводит сообщение и возвращает значение true или false в зависимости от того, нажимает ли пользователь кнопку "ОК" или "Отмена".
  4. Если результат истинен, в строке 11 выводится "Здравствуйте, имя пользователя!" . В противном случае строка 13 печатает «Привет, мир!» .

ПОПРОБУЙТЕ: вместо того, чтобы печатать приветственное сообщение с помощью document.write() , сделайте это с помощью alert() .

Пример 3: Объект даты

Следующий скрипт создает объект Date, представляющий текущую дату и время, и печатает текущее время.

Как это работает?
  • В строке 8 объявляется переменная, вызываемая now . Он также создает объект Date (с помощью оператора new), который содержит текущую отметку даты и времени, и назначает его для now .
  • " // " начинает комментарий в конце строки (строки 8 и 9). Комментарии игнорируются движком JavaScript, но они важны для объяснения вашего кода другим (и самому себе через три дня).
  • В строке 9 объявляется переменная с именем hrs. Он также вызывает функцию getHours() для объекта now в форме now.getHours(), чтобы получить часовую часть объекта now и присвоить ее переменной hrs. Строки 9 и 10 аналогичным образом обрабатывают минуты и секунды.
  • Строки с 12 по 14 используют document.writeln() для записи в текущий документ. writeln() (запись-строка) записывает новую строку ( \n ) после данной строки. Обратите внимание, что браузер игнорирует лишние пробелы (переводы строк, пробелы, табуляции) в HTML-документе; вам нужно написать
  1. Измените приведенный выше сценарий, чтобы он печатал текущую дату, месяц, год и день недели. (Советы: используйте функции getDate() , getMonth() , getFullYear() и getDay() объекта Date. getDate() возвращает 1–31. getMonth() возвращает от 0 до 11 для января до Декабрь. getFullYear() возвращает 4-значный год. getDay() возвращает от 0 до 6 с воскресенья по субботу).
  2. Используйте условный оператор, чтобы напечатать день недели в слове (например, 0 для воскресенья, 1 для понедельника и т. д.). (Советы: используйте конструкцию if-elseif-elseif. else, как показано ниже.)

Пример 4: Циклы

Следующий скрипт запрашивает у пользователя множитель и выводит число, кратное от 1 до 100, с помощью цикла for.

Как это работает?

  • В строке 11 у пользователя запрашивается число, которое присваивается переменной multiplier .
  • Строки 12–14 содержат цикл for. цикл for имеет следующий синтаксис:

Цикл for состоит из четырех частей. Три из них, инициализация, тест и постобработка, заключены в квадратные скобки () и разделены двумя точками с запятой. тело содержит повторяющуюся задачу, которую необходимо выполнить. Сначала выполняется оператор initialization. Затем оценивается тест. Если test возвращает true, выполняется body; за которым следует оператор постобработки. test снова оценивается, и процесс повторяется до тех пор, пока test не вернет false. Когда test оказывается ложным, цикл for завершается, и выполнение программы продолжается до следующего оператора после цикла for. Следующая блок-схема иллюстрирует процесс цикла for:

В этом примере переменная number инициализируется значением 1. Если число меньше или равно 100, выполняется тело цикла, за которым следует оператор постобработки, увеличивающий значение числа на 1. цикл повторяется до тех пор, пока значение числа НЕ будет меньше или равно 100 (т. е. больше 100).

  1. Измените приведенный выше сценарий, чтобы запрашивать у пользователя множитель, а также количество множителей, которые необходимо напечатать (в двух операторах prompt()).
  2. Измените приведенный выше сценарий, чтобы печатать только нечетные кратные числа. (Совет: оператор по модулю "%" можно использовать для вычисления остатка, например, x % 2 вычисляет остаток от деления x на 2, что дает либо 0, либо 1.)

Пример 5. Пользовательские функции и обработчик событий onclick

Помимо встроенных функций JavaScript, таких как alert() , prompt() , write() и writeln() , вы можете определить свои собственные функции. У функции есть имя и тело, состоящее из набора операторов JavaScript, которые в совокупности выполняют определенную задачу. Он может принимать от вызывающего объекта ноль или более аргументов и возвращать вызывающему объекту ноль или одно значение.

Как это работает?

ПОПРОБУЙТЕ: добавьте еще одну кнопку, которая откроет " JSExVar.html ".

Пример 6. Дополнительные обработчики событий: onload , onmouseover и onmouseout

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

  • onload : срабатывает после того, как браузер загрузил страницу.
  • onmouseover и onmouseout : срабатывает, когда пользователь наводит указатель мыши на элемент HTML или от него.
Разбор программы
  • В строке 8 определяется переменная msgLoad, которая содержит строки, отображаемые в обработчиках событий onload.
  • В открывающем теге (строка 12) мы определяем обработчик события загрузки для события загрузки. Он вызывает alert() с сообщением, определенным ранее.
  • В строках 13 и 14 определяются обработчики событий onmouseover и onmouseout для элемента HTML.

Пример 7. Разделение HTML, CSS и JavaScript

Предыдущий пример работает нормально. Вы найдете много таких примеров в учебниках, особенно в старых учебниках. Однако у него есть большая проблема. Все содержимое HTML, стили представления CSS и коды программирования JavaScript размещены в одном файле. Для маленькой игрушечной программы проблема не серьезная. Но когда ваша программа разрастется и если HTML, CSS и JavaScript будут написаны разными людьми, у вас возникнут серьезные проблемы с поддержкой программы. Помните, что HTML используется для содержимого, CSS — для представления, а JavaScript — для поведения.

Давайте перепишем пример, чтобы поместить HTML, CSS и JavaScript в три разных файла.

Как это работает?
  1. Размещение кода скрипта внутри HTML-страницы не является хорошей практикой разработки программного обеспечения. Вместо этого в настоящее время предпочтительным подходом является размещение скриптов, а также стилей CSS во внешних файлах, которые затем можно единообразно применить ко всем страницам вашего веб-сайта.
  2. Начнем с файла HTML. Теперь файл HTML содержит только содержимое, без стиля представления и логики программирования.

    2. Таблица стилей CSS хранится во внешнем файле, ссылка на который приведена выше.
    3. тег.
      Примечание. В HTML4/XHTML1.0 необходимо включить атрибут type="text/css" в
    4. открывающий тег.

    5. Кроме того, программный код JavaScript хранится во внешнем файле, ссылка на него необходима, хотя содержания нет.
      Примечание. В HTML4/XHTML1.0 необходимо включать атрибут type="text/javascript" в запуски во время загрузки страницы.
    6. Некоторые сценарии JavaScript, называемые обработчиками событий, запускаются в результате действия пользователя или браузера (или события). Например, нажатие кнопки ( onclick ) или загрузка страницы ( onload ).

    Поэтому есть два места для размещения вашего JavaScript:

    1. между тегами контейнера; и
    2. внутри тегов HTML в качестве обработчиков событий (таких как onclick , onmouseover , onload ), например, onclick .

    Элемент содержит операторы программирования JavaScript. Например,

    В HTML4/XHTML1.0 необходимо включить атрибут type="text/javascript" в

    Получите полный доступ к Learning Web Design, 4th Edition и более чем 60 000 других изданий с бесплатной 10-дневной пробной версией O'Reilly.

    Есть также прямые онлайн-мероприятия, интерактивный контент, материалы для подготовки к сертификации и многое другое.

    Глава 4. Создание простой страницы: (Обзор HTML)

    Введение в элементы и атрибуты

    Устранение неполадок с неработающими веб-страницами

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

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

    Вот что я хочу, чтобы вы вынесли из этой главы:

    Получите представление о том, как работает разметка, включая понимание элементов и атрибутов.

    Узнайте, как браузеры интерпретируют HTML-документы.

    Изучите базовую структуру документа HTML.

    Получите первое представление о таблице стилей в действии.

    На этом этапе не беспокойтесь об изучении конкретных текстовых элементов или правил таблицы стилей; мы вернемся к ним в следующих главах. А пока просто обратите внимание на процесс, общую структуру документа и новую терминологию.

    Веб-страница, шаг за шагом

    Вы познакомились с HTML-документом в главе 2, но теперь вам предстоит создать его самостоятельно и поэкспериментировать с ним в браузере. Демонстрация в этой главе состоит из пяти шагов, которые охватывают основы создания страницы.

    Шаг 1. Начните с содержания.В качестве отправной точки мы напишем необработанный текстовый контент и посмотрим, что с ним сделают браузеры.

    Шаг 2: Задайте структуру документа. Вы узнаете о синтаксисе HTML-элементов и элементах, определяющих структуру документа.

    Шаг 3. Определите текстовые элементы. Вы опишете контент, используя соответствующие текстовые элементы, и узнаете, как правильно использовать HTML.

    Шаг 4: Добавьте изображение. Добавив изображение на страницу, вы узнаете об атрибутах и ​​пустых элементах.

    Шаг 5. Измените внешний вид страницы с помощью таблицы стилей. В этом упражнении вы познакомитесь с форматированием контента с помощью каскадных таблиц стилей.

    К моменту, когда мы закончим, вы напишете исходный документ для страницы, показанной на рис. 4-1. Это не очень красиво, но с чего-то нужно начинать.

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

    Прежде чем мы начнем, запустите текстовый редактор

    В этой главе и на протяжении всей книги мы будем писать HTML-документы вручную, поэтому первое, что нам нужно сделать, это запустить текстовый редактор. Для этих целей подойдет текстовый редактор, поставляемый с вашей операционной системой, например Блокнот (Windows) или TextEdit (Macintosh). Другие текстовые редакторы подходят, если вы можете сохранять текстовые файлы с расширением .html. Если у вас есть WYSIWYG-инструмент для веб-разработки, такой как Dreamweaver, пока отложите его. Я хочу, чтобы вы познакомились с разметкой документа вручную (см. врезку HTML «Трудный способ»).

    Я остаюсь при своем методе обучения HTML старомодным способом — вручную . Нет лучшего способа по-настоящему понять, как работает разметка, чем вводить ее по одному тегу за раз, а затем открывать страницу в браузере. Чтобы научиться правильно размечать документы, не требуется много времени.

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

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

    В этом разделе показано, как открывать новые документы в Блокноте и TextEdit. Даже если вы использовали эти программы раньше, просмотрите некоторые специальные настройки, которые сделают упражнения более плавными. Мы начнем с Блокнота; Пользователи Mac могут идти вперед.

    Создание нового документа в Блокноте (Windows)

    Вот шаги по созданию нового документа в Блокноте в Windows 7 (рис. 4-2):

    Откройте меню "Пуск" и перейдите к блокноту (в разделе "Стандартные"). 1

    Нажмите Блокнот, чтобы открыть новое окно документа, и вы готовы начать печатать. 2

    Далее мы сделаем расширения видимыми. Этот шаг не требуется для создания HTML-документов, но он поможет сделать типы файлов более понятными с первого взгляда. Выберите «Параметры папки». » в меню «Инструменты» 3 и выберите вкладку «Вид» 4 . Найдите «Скрыть расширения для известных типов файлов» и снимите этот флажок. 5 Нажмите OK, чтобы сохранить настройку, и теперь расширения файлов будут видны.

    В Windows 7 нажмите клавишу ALT, чтобы открыть меню для доступа к инструментам и параметрам папки. В Windows Vista он называется «Параметры папок и поиска».

    Создание нового документа в TextEdit (Mac OS X)

    По умолчанию TextEdit создает документы с расширенным форматированием, то есть документы со скрытыми инструкциями по форматированию стилей для выделения текста жирным шрифтом, установки размера шрифта и т. д. Вы можете сказать, что TextEdit находится в режиме форматированного текста, когда у него есть панель инструментов форматирования в верхней части окна (в режиме обычного текста ее нет). HTML-документы должны быть текстовыми документами, поэтому нам нужно изменить формат, как показано в этом примере (рис. 4-3).

    Используйте Finder, чтобы найти TextEdit в папке Applications. Найдя его, дважды щелкните имя или значок, чтобы запустить приложение.

    TextEdit открывает новый документ. Меню форматирования текста вверху показывает, что вы находитесь в режиме форматированного текста.Вот как это изменить.

    Откройте диалоговое окно "Настройки" в меню TextEdit.

    Есть три параметра, которые необходимо настроить:

    На вкладке "Новый документ" выберите "Обычный текст".

    На вкладке "Открыть и сохранить" выберите "Игнорировать команды форматированного текста в файлах HTML" и отключите параметр "Добавлять расширения .txt к обычным текстовым файлам".

    Когда закончите, нажмите красную кнопку в верхнем левом углу.

    Когда вы создаете новый документ, меню форматирования больше не будет, и вы сможете сохранить свой текст как HTML-документ. Вы всегда можете преобразовать документ обратно в форматированный текст, выбрав «Формат» → «Создать форматированный текст», если вы не используете TextEdit для HTML.

    Шаг 1. Начните с содержания

    Теперь, когда у нас есть новый документ, пора печатать. Веб-страница всегда начинается с контента, поэтому мы начнем нашу демонстрацию именно с этого. Упражнение 4-1 | Ввод содержимого позволяет ввести необработанный текст и сохранить документ в новой папке.

    При присвоении имен файлам важно соблюдать следующие правила и соглашения:

    Используйте правильные суффиксы для ваших файлов. Файлы HTML и XHTML должны заканчиваться на .html . Веб-графика должна быть помечена в соответствии с форматом файла: .jpg , .jpg или .jpg ( .jpg также допустимо).

    Никогда не используйте пробелы в именах файлов. Обычно для визуального разделения слов в именах файлов используется символ подчеркивания или дефис, например robbins_bio.html или robbins-bio.html .

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

    Имена файлов должны быть короткими. Короткие имена контролируют количество символов и размер файла вашего HTML-файла. Если вам действительно необходимо дать файлу длинное имя, состоящее из нескольких слов, вы можете разделить слова дефисами, например a-long-document-title.html , чтобы улучшить читаемость.

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

    Выберите «Сохранить» или «Сохранить как» в меню «Файл», чтобы открыть диалоговое окно «Сохранить как» (Рисунок 4-4). Первое, что вам нужно сделать, это создать новую папку, которая будет содержать все файлы сайта (другими словами, это локальная корневая папка).

    Windows: щелкните значок папки вверху, чтобы создать новую папку.

    Mac: нажмите кнопку "Новая папка".

    Назовите новую папку bistro и сохраните в ней текстовый файл как index.html. Пользователи Windows, вам также нужно будет выбрать «Все файлы» после «Сохранить как тип», чтобы Блокнот не добавил расширение «.txt» к вашему имени файла. Имя файла должно заканчиваться на .html, чтобы браузер распознал его как веб-документ. Дополнительные советы по именованию файлов см. на боковой панели «Соглашения об именах».

    Давайте ради интереса посмотрим на index.html в браузере. Запустите свой любимый браузер (я использую Google Chrome) и выберите «Открыть» или «Открыть файл» в меню «Файл». Перейдите к index.html и выберите документ, чтобы открыть его в браузере. Вы должны увидеть что-то вроде страницы, показанной на рис. 4-5. Мы поговорим о результатах в следующем разделе.

    Некоторая информация в исходном документе будет игнорироваться при просмотре в браузере, в том числе:

    Несколько (белых) пробелов. Когда браузер встречает более одного последовательного пробела, он отображает один пробел. Итак, если документ содержит:

    браузер отображает:

    Разрывы строк (возврат каретки). Браузеры преобразуют возврат каретки в пробелы, поэтому, следуя предыдущему правилу «игнорировать несколько пробелов», разрывы строк не влияют на форматирование страницы. Текст и элементы непрерывно переносятся до тех пор, пока в потоке текста документа не встретится новый элемент блока, например заголовок ( h1 ) или абзац ( p ), или элемент разрыва строки ( br ).

    Вкладки.Табуляции также преобразуются в пробелы, так что угадайте, что? Бесполезно.

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

    Текст в комментариях. Браузеры не будут отображать текст между специальными тегами и -->, используемыми для обозначения комментария. См. боковую панель «Добавление скрытых комментариев» далее в этой главе.

    Извлечения из шага 1

    Наш контент выглядит не очень хорошо (рис. 4-5). Весь текст слился воедино — в исходном документе он выглядел иначе. Здесь есть пара вещей, которым нужно научиться. Первое, что бросается в глаза, это то, что браузер игнорирует разрывы строк в исходном документе. На боковой панели «Что браузеры игнорируют» указана другая информация в источнике, которая не отображается в окне браузера.

    Шаг 2. Создайте структуру документа

    Наш контент сохранен в документе .html — теперь мы готовы приступить к его разметке.

    Представляем. HTML-элементы

    В главе 2 вы видели примеры HTML-элементов с открывающим тегом (

    <р>). Прежде чем мы начнем добавлять теги в наш документ, давайте рассмотрим анатомию HTML-элемента (его синтаксис) и закрепим некоторые важные термины. Общий элемент контейнера помечен на рис. 4-6.

    Элемент состоит как из содержимого, так и из его разметки.

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

    Имя элемента отображается в открывающем теге (также называемом начальным тегом) и снова в закрывающем (или конечном) теге, которому предшествует косая черта (/). Закрывающий тег работает как выключатель для элемента. Будьте осторожны, чтобы не использовать подобный символ обратной косой черты в закрывающих тегах (см. совет Знакомство с HTML-элементами).

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

    И последнее. капитализация. В HTML использование заглавных букв в именах элементов не имеет значения. Таким образом, , и все одинаковы для браузера. Однако в XHTML (более строгая версия HTML) все имена элементов должны быть строчными, чтобы они были действительными. Многим веб-разработчикам понравилась упорядоченность более строгих правил разметки XHTML, и они придерживаются строчных букв, как я сделаю в этой книге.

    Косая черта и обратная косая черта

    В HTML-тегах и URL-адресах используется косая черта (/). Символ косой черты находится под вопросительным знаком (?) на стандартной клавиатуре QWERTY.

    Слэш легко перепутать с символом обратной косой черты (\), который находится под символом черты (|). Клавиша обратной косой черты не работает в тегах или URL-адресах, поэтому будьте осторожны и не используйте ее.

    Основная структура документа

    На рис. 4-7 показан рекомендуемый минимальный скелет документа HTML5. Я говорю «рекомендуется», потому что единственным обязательным элементом в HTML является заголовок . Но я считаю, что лучше, особенно для начинающих, явно организовывать документы с соответствующей структурной разметкой. И если вы пишете в более строгом XHTML, все следующие элементы, кроме meta, должны быть включены, чтобы быть действительными. Давайте посмотрим, что происходит на рис. 4-7.

    Не хочу путать, но первая строка в примере вообще не элемент; это объявление типа документа (также называемое объявлением DOCTYPE), которое идентифицирует этот документ как документ HTML5. Я могу многое сказать об объявлениях DOCTYPE в главе 10, но для этого обсуждения достаточно сказать, что его включение позволяет современным браузерам понять, что они должны интерпретировать документ так, как он написан в соответствии со спецификацией HTML5.

    Весь документ содержится в элементе html.Элемент html называется корневым, поскольку он содержит все элементы документа и не может содержаться ни в каком другом элементе. Он используется как для документов HTML, так и для документов XHTML.

    В элементе html документ делится на заголовок и тело . Элемент head содержит описательную информацию о самом документе, такую ​​как его заголовок, таблицы стилей, которые он использует, скрипты и другие типы «мета» информации.

    Метаэлементы внутри элемента head предоставляют информацию о самом документе. Мета-элемент может использоваться для предоставления всех видов информации, но в данном случае он указывает кодировку символов (стандартизированный набор букв, цифр и символов), используемую в документе. Я не хочу вдаваться в подробности прямо сейчас, но знаю, что есть много веских причин для указания кодировки в каждом документе, поэтому я включил ее как часть минимальной структуры документа.

    До появления HTML5 синтаксис для указания набора символов с помощью метаэлемента был немного сложнее. Если вы пишете свои документы в HTML 4.01 или XHTML 1.0, ваш метаэлемент должен выглядеть следующим образом:

    Также в заголовке есть обязательный элемент заголовка. Согласно спецификации HTML каждый документ должен содержать описательный заголовок.

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

    Готовы ли вы добавить некоторую структуру на главную страницу бистро Black Goose? Откройте документ index.html и перейдите к Упражнению 4-2 | Добавление базовой структуры.

    Откройте вновь созданный документ index.html , если он еще не открыт.

    Начните с добавления объявления HTML5 DOCTYPE:

    Поместите весь документ в корневой элемент HTML, добавив начальный тег в самом начале и закрывающий тег в конце текста.

    Далее создайте заголовок документа, содержащий заголовок страницы. Вставка и теги перед содержимым. В элементе head добавьте информацию о кодировке символов и название «Бистро Black Goose», окруженное открывающим и закрывающим тегами.

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

    Подробнее о большинстве этих приемов программирования вы найдете далее в этой статье.

    1. Вы добавляете код на страницу с помощью символа @

    Символ @ начинает встроенные выражения, блоки с одним оператором и блоки с несколькими операторами:

    Вот как эти операторы выглядят, когда страница запускается в браузере:

    HTML-кодирование

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

    для абзаца или выделения текста) см. раздел "Объединение текста, разметки и кода в блоках кода" далее в этой статье.

    Подробнее о кодировании HTML можно прочитать в разделе Работа с формами.

    2. Вы заключаете блоки кода в фигурные скобки

    Блок кода включает один или несколько операторов кода и заключен в фигурные скобки.

    Результат, отображаемый в браузере:

    3. Внутри блока вы заканчиваете каждый оператор кода точкой с запятой

    Внутри блока кода каждый полный оператор кода должен заканчиваться точкой с запятой. Встроенные выражения не заканчиваются точкой с запятой.

    4. Вы используете переменные для хранения значений

    Вы можете хранить значения в переменной, включая строки, числа, даты и т. д. Вы создаете новую переменную, используя ключевое слово var. Вы можете вставлять значения переменных непосредственно на страницу, используя @ .

    Результат, отображаемый в браузере:

    5. Вы заключаете буквальные строковые значения в двойные кавычки

    строка – это последовательность символов, которая обрабатывается как текст. Чтобы указать строку, вы заключаете ее в двойные кавычки:

    Чтобы вставить двойные кавычки, используйте дословный строковый литерал и повторите кавычки:

    Вот результат использования обоих этих примеров на странице:

    6. Код чувствителен к регистру

    Если вы объявите переменную как var lastName = "Smith"; и попробуйте сослаться на эту переменную на своей странице как @LastName , вы получите значение «Джонс» вместо «Смит».

    В Visual Basic ключевые слова и переменные не чувствительны к регистру.

    7. Большая часть вашего кода связана с объектами

    Объект представляет собой то, что вы можете запрограммировать — страницу, текстовое поле, файл, изображение, веб-запрос, сообщение электронной почты, запись клиента (строка базы данных), и т. д. Объекты имеют свойства, описывающие их характеристики, которые вы можете прочитать или изменить — объект текстового поля имеет свойство Text (среди прочего), объект запроса имеет свойство Url, сообщение электронной почты имеет свойство From, а объект клиента имеет свойство FirstName. Объекты также имеют методы, которые являются «глаголами», которые они могут выполнять. Примеры включают метод Save файлового объекта, метод Rotate объекта изображения и метод Send объекта электронной почты.

    Вы часто будете работать с объектом Request, который предоставляет вам такую ​​информацию, как значения текстовых полей (полей формы) на странице, тип браузера, выполнившего запрос, URL-адрес страницы, идентификатор пользователя и т. д. В следующем примере показано, как получить доступ к свойствам объекта Request и как вызвать метод MapPath объекта Request, который дает вам абсолютный путь к странице на сервере:

    Результат, отображаемый в браузере:

    8. Вы можете написать код, который принимает решения

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

    Утверждение if(IsPost) является сокращенным вариантом записи if(IsPost == true) . Наряду с операторами if существует множество способов проверки условий, повторения блоков кода и т. д., которые описаны далее в этой статье.

    Результат, отображаемый в браузере (после нажатия кнопки "Отправить"):

    Простой пример кода

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

    В редакторе создайте новый файл и назовите его AddNumbers.cshtml.

    Скопируйте следующий код и разметку на страницу, заменив все, что уже есть на странице.

    Вот некоторые вещи, на которые следует обратить внимание:

    • Символ @ начинает первый блок кода на странице и предшествует переменной totalMessage, встроенной в нижнюю часть страницы.
    • Блок в верхней части страницы заключен в фигурные скобки.
    • В верхнем блоке все строки заканчиваются точкой с запятой.
    • Переменные total , num1 , num2 и totalMessage хранят несколько чисел и строку.
    • Литеральное строковое значение, присвоенное переменной totalMessage, заключено в двойные кавычки.
    • Поскольку код чувствителен к регистру, когда переменная totalMessage используется внизу страницы, ее имя должно точно совпадать с именем переменной вверху.
    • Выражение num1.AsInt() + num2.AsInt() показывает, как работать с объектами и методами. Метод AsInt для каждой переменной преобразует строку, введенную пользователем, в число (целое число), чтобы с ней можно было выполнять арифметические действия.

    Читайте также: