Информатика
.pdf
131
мую конструкцию, определяемую аналогичными скобками. Таким образом, содержимым ячейки таблицы может быть произвольный текст, рисунок, ссылка на другой документ, другая таблица и т. д.
Внутри пары <TR> …</TR> можно поместить заголовок ряда: <TH> текст заголовка </TH>. Как и в Word конструирование таблицы помогает аккуратнее расположить и оформить текст, особенно если он включает нетекстовые элементы (например, рисунки, графику).
Пример. Web-страничку (рис. 44), содержащую заголовки, различные шрифты, таблицу и рисунок,
Рис. 44
можно создать следующим HTML-кодом (рисунок и текст вопроса вставлены в отдельную таблицу):
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1252">
<title>ОПРЕДЕЛЕН 1048;Я</title>
<style type=text/css>
body {text-color:blue;background:#FFFF99} h1 {color:red}
dt {color:blue;text-decoration:underline} caption {color:brown}
th {color:brown} </style>
</head> <body> <h1
align=left><u>ОПРЕДЕЛЕ& #1053;ИЯ</u></h1>
132
<dl compact>
<dt>ТАКСОНОМИ 71;</dt>
<dd>принцип систематиз& #1072;ции</dd>
<dt>ПРИМИТИВ</dt> <dd>система
взглядов без должной детализаци& #1080;</dd>
</dl>
<table width=75% align=center bgcolor=#CCFF99 border=4 rules=all> <caption
align=center><b>ДРЕВНЯЯ ТАКСОНОМИЯ< /b></caption>
<tr> <th>Звери</th>
<td>Плотоядны 77;</td> <td>Травоядны 77;</td>
<td>Морские</td> </tr>
<tr> <th>Птицы</th>
<td>Летающие</td> <td>Бегающие</td>
<td>Плавающие</td
>
</tr> <tr>
<th>Рыбы</th><td>Наст 1086;ящие</td><td>Кост& #1080;стые</td><td>Двоя кодышашие</td>
</tr> <tr>
<th>Гады</th> <td>Крокодилы</td
>
<td>Черепахи</td> <td>Змеи</td>
</tr> </table>
<table width=80% height=30%> <tr height=30%>
<td width=40%><img src=BIGBIRD.BMP align=right></td> <td width=40%><font size="18" color=#FF0066>А
это кто по- вашему?</font></td>
</tr> </table> </body> </html>
Здесь вся кириллица заменена кодами.
133
5.3. ФРЕЙМЫ
Язык HTML позволяет создать еще одну отличительную конструкцию: объединить в одном документе несколько документов, сохранив при этом возможность их совместного и раздельного просмотра, включая взаимные и перекрестные ссылки. Фрейм (frame – рамка) – это способ разбиения просматриваемой страницы на прямоугольные части. Способ задается парным тэгом <FrameSet>, который имеет атрибут Cols="m, n" (где m и n - ширина каждой из двух вертикальных частей экрана) или Rows="m, n" (если экран разбивается на две горизонтальные части). Полезно иметь в виду, что сумма m + n должна быть равна соответствующему размеру экрана, поэтому эти размеры лучше указывать в процентах. Можно указать атрибут, например, Cols="25%,*,2*", который означает, что экран разбивается на три части: первая занимает 25% экрана, вторая и третья – остальные 75%, причем третья занимает в два раза больше места, чем вторая. Атрибуты Border=n и BorderColor=цвет (или шестнадцатеричный код цвета) определяют толщину (в пунктах) и цвет границы между областями. Непарный тэг <frame> "открывает" информацию части экрана (по порядку: слева направо и сверху вниз): можно вводить произвольные тексты, таблицы, картинки и т. д., таким образом, каждая часть экрана оформляется как отдельный документ. Каждый из построенных документов может быть связан с остальными. Для построения этой связи полезно использовать атрибут name="…" тэга <frame> и тогда необходимую засылку в нужную часть можно выполнить тэгом <A> с атрибутом target="имя части". Если есть необходимость заполнить фрейм некоторым готовым HTML-документом, то следует использовать тэг <frame> с атрибутами src="адрес вводимого документа" и target="имя фрейма". Рассмотрим следующий пример.
Пример. Построим Htm – документ с использованием фреймов. Тема документа – моя семья. Разобьем экран сначала на две равные вертикальные части. Вторую обозначим "frC", первую разобьем на две равные горизонтальные части, обозначив верхнюю "frA", нижнюю – "frB". Заготовим документ "Part_С.htm", который будет загружен во фрейм "frС", содержащий полезные общие сведения о семье. Общую схему кода этого документа можно представить следующим образом:
<html>
<!- - необходимая часть, заполняемая редактором --> <head> <title> Part_С </title> </head>
<body>
<h2 align=center>
<!- - красный заголовок -->
<font color=red> Как мы живем </font> </h2>
<!- - далее произвольная информационная часть - ->
134
. . .
</body>
</html>
(в угловых скобках <! - - комментарий - -> не воспроизводится браузером).
Далее, заготовим файлы фотографий членов семьи, например, в формате .jpg (или .gif, .tiff, .xbm) и на каждого члена семьи небольшой документ для загрузки фотографии. Возьмем для примера отца и назовем документ father.htm:
<html>
… <! - - заголовки - -> <body>
<h2 align=center> Портрет отца </h2>
<image align=bottom src="(адрес файла)....jpg"> </body>
</html> .
Пусть наша семья состоит из родителей и троих детей (два брата и сестра). Подготовим документ, загружаемый во фрейм "frA":
<html>
<head > <title> Part_A </title> </head> <body>
<!- - подчеркнутый заголовок - ->
<h2> <u> <center> Моя семья </center> </u> </h2> <UL> <!- - список - ->
<Li> <b> <i> Родители </i> <b> <!- - жирный курсив - -> <UL> <!- - подсписок - ->
<Li> <a href="father.htm" target="frB">
Отец </a>
<!- - загрузка фотографии при щелчке мышкой по слову "Отец" - -> <Li> <a href="mother.htm" terget="frB">
Мать </a>
<!- - загрузка фотографии при щелчке мышкой по слову "Мать" - -> </UL>
<Li> <b> <i> Дети </i> <b> <UL>
<Li> <!- - подсписок детей - > </UL>
</UL>
</body> </html> .
Наконец, соберем все в едином документе "Main.htm" с кодом:
<html>
<head> <title> Main </title> </head>
<!- - разбиение экрана на две вертикальные рамки - -> <frameset cols="50%,50%">
<!- - разбиение первой части на две горизонтальные половины - ->
<frameset rows="50%,50%">
<frame src="Part_A.htm" name="frA">
135
<frame src="Part_B.htm" name="frB"> <!- - документы в окна загружены - ->
</frameset>
<frame src="Part_C.htm" name="frC"> </frameset>
</html>
(здесь документ Part_B.htm содержит один заголовак "Фото"; эту строчку можно опустить). Созданный таким образом документ состоит из трех связанных частей (фреймов): в левой верхней части – список членов семейства, в правой – все, что хотелось сообщить о семье. При щелчке мышкой по какому-нибудь элементу списка в левом нижнем фрейме появляется соответствующая фотография с подходящей надписью.
HTML-документы позволяют использовать так называемые "плавающие" фреймы. Они остаются на той же странице просмотра, занимая место наподобие поля вставленного рисунка в Word. Плавающий фрейм определяется парным тэгом <IFrame> с атрибутами align= выравнивание (left, center, right), height= высота в пунктах или процентах от общего экрана, width= ширина фрейма, src="адрес загружаемого документа". Содержимое плавающего фрейма можно менять в зависимости от состояния основного документа (документ в документе). Если загружаемый документ не помещается в поле фрейма, то последний снабжается полосой прокрутки.
Безусловно, некоторые текстовые редакторы имеют, как уже отмечалось выше, достаточно подробное меню, набор шаблонов для автоматизации создания Web-документов. Базовые знания HTML существенно упрощают и облегчают эту работу. Кроме того, HTML допускает использование Visual Basic (в слегка урезанном варианте – так называемый VBScript, а также JavaScript), а вместе с ним уже известные элементы управления, подпрограммы и макросы. Все это позволяет превратить Web-документ в очень "живое" Internet-приложение.
136
6. Элементы вычислений в Mсd
В целом мы уже знакомы с некоторыми основными приемами работы в Mcd. Соберем теперь разрозненную информацию воедино.
6.1. КРАТКИЙ ОБЗОР
Переменные – типа Double, String, Complex.
Окончания "b", "o", "h" обозначают число в двоичном, восьмеричном или шестнадцатеричном виде (например, A2Ch обозначает
16-чное число 12+2∙16+10∙256, т.е. 2604).
Константы: ∞ = 10307, tol = 10-3 (точность числ. методов), ORIGIN = 0 (начало индексации, можно менять!), % = 0.01, i (или j) = 
-1.
Операторы: 1) присваивание ":=" (на рабочем листе, клавиша Shift "ж"), "←" (в блоках, клавиша "{"),
2)вычисление (вывод значения) "=" (на рабочем листе, "="), "→" (в символьных вычислениях, клавиша Ctr "."),
3) обработка условия (клавиша "}") |
|
, альтернатива |
|
опера- |
усло- |
|
вие |
|
|
тор |
|
|
|
вводится оператором "Otherwise" (клавиша Ctr "}"), не путать с функцией if (■, ■, ■), возвращающей результат действия, где на первом месте стоит условие, на втором – оператор, выполняемый при этом условии, на третьем – альтернативный оператор.
4)логическое "=" (толстое) вводится клавишей Ctr "=",
5)многоточие (знак ранжированных значений, кл. ";" ) "..",
6)верхний индекс (степень) – Shift "6",
7)нижний индекс – клавиша "[" (не путать с "подписью" – кл. ".": например, после ввода "a[10" и "a.10" на рабочем листе в обоих
случаях появится выражение a10, но в первом случае это элемент массива, во втором – отдельная переменная),
8)верхний индекс в угловых скобках (кл. Ctr "6") M‹■› определяет номер столбца матрицы (в данном случае матрицы М),
9)знак транспонирования (это не степень!) вводится клавишей Ctr + "1",
10)цикл пересчета "for ■ ■..■" (клавиша Ctr+Shift "Э") допускает прямой и обратный ход (отсутствует форма "Step"), а также вариант "for ■ ", где а – произвольный вектор-строка.
11)цикл с предусловием "While ■ (условие)" – других циклов нет,
|
|
137 |
|
■ |
|
|
|
|
12) блок операторов |
■ |
вводится из меню "Add Line" или клавишей |
|
|
|
|
|
|
"]" (правая квадратная скобка), для добавления блока в оператор (или увеличения блока) достаточно выбрать мышкой место (или определить законченную область) и щелкнуть "Add Line" (или нажать "]" на клавиатуре), например, условный оператор ■ if ■ после выделения левого "места" и нажатия "]" превраща-
if |
■ |
|||
ется в |
|
|
■ |
, |
|
||||
|
|
|
■ |
|
|
|
|
|
|
13)"Break" (кл. Ctr "{") выполняет "принудительный" выход из циклов,
14)греческие буквы вводятся как соответствующие латинские
споследующим нажатием Ctr "g" (либо из меню).
Функции: 1) встроенные (калькулятор или Меню |
вставка f(x)), |
2) пользовательские, определяются следующим образом: |
|
ариф. выр. |
|
_ |
|
имя (аргументы – не обязательно) :− функция |
, перемен- |
|
|
блок прогр.
ные справа от знака присваивания должны входить в число аргументов (слева) или быть определенными ранее (т.е. левее и (или) выше). Например, функция f(x) x+sin(ω∙x+c) не определена, если переменные ω и с не были определены ранее (вычислены или приняли значения), х – фиктивная (свободная) переменная (ее определять не обязательно). Переменные, определенные внутри функции, не доступны вне ее.
Mсd допускает рекурсивное определение функции (через ранее вычисленные значения).
1 при |x| < 0.0001,
Примеры. 1) Вычислим функцию f(x) = x x с помощью
f( /2) cos( /2) иначе
_
кода f(x) :− if (|x| < 0.0001, 1, f(0.5∙x)∙cos(0.5∙x)).
2) Функцию, вычисляющую n-ое число Фибоначчи fn = fn-1 + fn-2,
_
f0 = f1 = 1, легко определить кодом f(n) :− if(n < 2, 1, f(n-1) + f(n-2)).
Индексированные объекты (векторы, матрицы, тензо-
ры) определяются двояко:
1)меню "матрицы" (клавиша Ctr "m") позволяет ввести требуемый шаблон для заполнения,
2)при известных функциональных свойствах объекта можно
определить границы массива (например, m ..., n ...) и задать ранжированные индексные переменные, полагая в этом случае (при ORIGIN = 0) i 0..m-1, j 0..n-1, после чего мо-
138
жно задавать значения объекта присваиванием: Obi, j ...
Например, пусть необходимо определить матрицу А, имеющую 100 строк и столбцов, диагональные элементы которой равны 4, соседние 1, осталь-
ные нули. Положим m 100 n 100 i 0..m-1 j 0..n-1
A i, j if(i = j, 4, if(|i – j| = 1, 1, 0)). Результат можно проверить, вставив знак "=" после имени матрицы А.
Графики (см. рис. 45).
I. 2-мерный график:
а) декартов (X-Y график), б) полярный график.
II.3-мерный график.
а) график поверхности, б) график линий уровня,
в) |
3-мерная гистограмма, |
|
|
г) |
3-мерное множество точек, |
Рис. 45 |
|
д) |
векторное поле. |
||
|
Начиная с 12-й версии, Mсd допускает плоские графики с двумя осями ординат с независимой шкалой. На осях указываются соответствующие пары аргумент-функция (от указанного аргумента) или пары множеств {x}-{y}. На одном графике можно изобразить несколько функциональных зависимостей.
Пример 1. Плоский график функции
параметрически, вместе с асимптотами 0.5 (t+2)2-2 и t+1 представлен одним изображением парами
{x(t), y(t)}, {t, 0.5(t+2)2-2} и
{t, t+1} (по оси ординат ввод следующего графического объекта выполняется после запятой, как и по оси абсцисс, см. рис. 46).
Пример2. Полярный гра-
фик функции |
|
|
1 |
|
|
exp |
|
|
|
||
sin(πt)-1 |
||
r(t) = |
1+0.2t |
|
(трилистник) изображен на рис. 47.
x(t) = |
(t-1)2 |
, y(t) = |
t3-2t+2 |
, заданной |
|
t |
2t |
||||
|
|
|
Рис. 46
139
Форматирование графика (щелчок правой мышью по графику выбор "Формат")
позволяет менять тип, толщину, цвет линий графика, количество и масштаб элементов сетки, фон, и т.д.
Пример 3. Быстрое построение графика поверхности: определя-
ется функция двух переменных (см. рис. 48), вставляется панель графика поверхности, в место (черный квадратик) внизу рамки вставляется имя функции (в данном случае f).
Можно определить значения функции на прямоугольной равномерной сетке значений аргументов (с постоянным шагом) в виде матрицы (прямоугольной таблицы), тогда в нижней части рамки графика следует поставить имя этой матрицы. Можно, наконец, использовать встроенную функцию CreateMesh, которая сама формирует необходимые матрицы для изображения графика в нужном диапазоне данных (с заданной подробностью). Так, если было бы желательно посмотреть на графике поведение данной f(x,y) в области x [-2,2], y [0,3],
можно определить комплект матриц M
CreateMesh(f,-2, 2, 0, 3, 20, 30) с 20
значениями по х и 30 значениями по у. В результате получили бы следующий рисунок (см. рис. 49).
Пример 4. Если поверхность задана параметрически, то ее следует оформить в виде вектора с тремя координатами (x, y, z). Построим график тора с большим радиусом R=10 и маленьким r = 4, лежащего в горизонтальной
плоскости. Введем параметры: u [0, 2π] –
угол поворота в плоскости тора, v [0, 2π] – угол поворота в вертикальной плоскости. То-
Рис. 47
Рис. 48
Рис. 49
140
гда абсцисса точки поверхности будет предста-
влена функцией x = (R+r cos(v)) cos(u), ордината - функцией y = (R+r cos(v)) sin(u), аппликата z = r sin(v). В функции CreateMesh возьмем по 50 точек в области изменения каждого параметра. В результате получим следующий рисунок
(см. рис. 50).
Аналогично получаются линии уровня функции f (см. рис. 51) и 3-D распределение точек тора (рис. 52).
Рис. 51 |
|
Рис. 52 |
Рис. 50 |
||
Пример 5. Для построения графика (распре- |
|
||||
деления) плоского векторного поля полезно оп- |
|
||||
ределить две матрицы: одна – матрица абсцисс |
|
||||
векторов, другая – ординат. Пару этих матриц |
|
||||
(в скобках) следует поместить внизу рамки по- |
|
||||
ля графика. Так, например, для векторного по- |
|
||||
x2-y2 |
T |
|
|||
ля F(x, y) = |
|
|
|
, y cos(x-y) в области [-2, 2] |
|
2 |
|
2 |
|
||
x |
+y |
|
|
||
×[-3, 2] положим: n := 10, hx := 0.4, hy := 0.5, i := |
|
|
0..n, j := 0..n, Zi,j := F(i∙hx-2, j∙hy-3), Mi,j := (Zi,j)0, |
|
|
Ni,j := (Zi,j)1. Выбрав в меню (см. рис. 45) гра- |
|
|
фик векторного поля и указав внизу пару мат- |
Рис. 53 |
|
риц (M, N), получим рис. 53. |
||
|
Символьная математика: а) символьные преобразования, б) символьные вычисления.
Меню символьных преобразований вызывается выбором "шапочки" в меню "Математика" (рис. 54). Рассмотрим использование некоторых ключевых слов из этого меню (результат получается после ввода правой стрелки "→" – Ctr ".").
■ float, n позволяет вывести результат с n десятичными знаками (с плавающей запятой), например, 
π float, 12 → 1.77245385091.