Разработать сайт фирмы, организующей праздники

I Теоретическая часть.

Выражения в JavaScript.

Выражения в JavaScript представляют собой комбинации операндов и операторов.

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

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

Операторы — это символы языка, выполняющие различные операции с данными. Операторы могут записываться с помощью символов пунктуации или ключевых слов. В зависимости от количества операндов различают следующие типы операторов: унарный — в операции участвует один операнд; бинарный — в операции участвуют два операнда; тернарный — комбинирует три операнда. Простейшая форма выражения — литерал — нечто, вычисляемое само в себя, например, число 100, строка "Hello world". Переменная тоже может быть выражением, так как она вычисляется в присвоенное ей значение.

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

 

Оператор/Операция Описание Приоритет
+ Сложение Складывает числовые операнды. Если один из операндов — строка, то результатом выражения будет строка.
- Вычитание Выполняет вычитание второго операнда из первого.
- Унарный минус Выполняет вычитание второго операнда из первого.
* Умножение Умножает два операнда.
/ Деление Делит первый операнд на второй. Результатом деления может являться как целое, так и число с плавающей точкой.
% Деление по модулю (остаток от деления) Вычисляет остаток, получаемый при целочисленном делении первого операнда на второй. Применяется как к целым числам, так и числам с плавающей точкой.

Операторы присваиванияиспользуются для присваивания значений переменным. Комбинированные операторы позволяют сохранить первоначальное и последующее значение в одной переменной.

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

Операторы сравнения используются для сопоставления операндов, результатом выражения может быть одно из двух значений — true или false. Операндами могут быть не только числа, но и строки, логические значения и объекты. Однако сравнение может выполняться только для чисел и строк, поэтому операнды, не являющиеся числами или строками, преобразуются. Если оба операнда не могут быть успешно преобразованы в числа или строки, операторы всегда возвращают false. Если оба операнда являются строками/числами или могут быть преобразованы в строки/числа, они будут сравниваться как строки/числа. Если один операнд является строкой/преобразуется в строку, а другой является числом/преобразуется в число, то оператор попытается преобразовать строку в число и выполнить сравнение чисел. Если строка не является числом, она преобразуется в значение NaN и результатом сравнения будет false. Чаще всего операции сравнения используются при организации ветвлений в программах.

Логические операторы позволяют комбинировать условия, возвращающие логические величины. Чаще всего используются в условном выражении if.

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

Вопросы для самопроверки.

25. Как представляется цвет в Web?

  1. В виде #123ABC. Представление в

виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет: две первые цифры — красный две в середине — зелёный две последние цифры — синий. Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.

  1. Представление ключевыми словами, например green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
  2. В виде rgb(*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.
  3. В настоящий момент возможен и rgba(*,*,*,*), где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255, а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.

 

Практическая часть.

Разработать сайт фирмы, организующей праздники.

1) Данный сайт содержит индивидуальный дизайн не перегруженный лишними стилями, имеет навигациионное меню. Внешний вид сайта представлен, на следующем рисунке (рис.1).

Рис. 1. Дизайн сайта.

2) На данном сайте используется JavaScript с помощью которого была разработана функция, уведомляющая пользователя о закрытии страницы или о переходе по другой ссылки. Данная функция использует оператор вывода данных Alert (). Далее на рисунке представлена работа скрипта (рис. 2).

Рис. 2. Уведомление о переходе на другую страниу.

Листинг А.

Листинг файла index.html.

<!DOCTUPE html>

<html>

<head>

<meta charset="utf-8">

<link href="style/style.css" rel="stylesheet" media="all">

<script type="text/javascript" src="js/close.js"></script>

<title>Happy!</title>

</head>

<body>

<h1><span>Happy!</span></h1>

<div class="wr">

<img src="img/one.jpg" height="100%" width="100%">

<h2><span>Праздники, корпоративы и утренники <br>по доступным ценам.</span></h2>

<ul id="navbar">

<li><a href="#">Главная</a></li>

<li><a href="#">Новости</a></li>

<li><a href="#">Контакты</a></li>

<li><a href="about.html">О нас</a></li>

</ul>

</div>

<div class="leftText">

<div style="text-align: center;"><b>Корпоративы<br>

<img style="width: 398px; height: 226px;" alt="korp" src="img/korp.jpg"></b></div>

</div>

<div class="centerText">

<div style="text-align: center;"><b>Дни рождения<br>

<img style="width: 398px; height: 226px;" alt="bird" src="img/bird.jpg"></b></div>

</div>

<div class="rightText">

<div style="text-align: center;"><b>Детские утренники<br>

<img style="width: 398px; height: 226px;" alt="utr1" src="img/s6.jpg"></b></div>

</div>

<div class="clearfx">

</div>

<div class="teloText">

<p><b>Мы всегда стараемся сделаь ваш праздник незабываемым.

Для вас работают лучшие фотографы города и облости.

Наши ведущие сделают ваш праздник индивидуальным и ярким.

Для детей конкурсы, призы, весёлый клоун Гюви и море незабываемых ярких

впечатлений.</b>

</p>

</div>

<div class="phone">

T. 8-800-000-00-00

</div>

</body>

</html>

Листинг Б.

Листинг файла style.css.

body

{

display:block;

background-color: #ffffff;

margin: 5px;

padding:0;

width:99%;

}

.wr

{

display:block;

margin: 0;

padding: 0;

width:100%;

height:40%;

}

h2 {

position : absolute;

top : 60px;

left : 10px;

width : 100%;

}

h2 span {

color : white;

font : bold 24px/50px Helvetica, Sans-Serif;

letter-spacing : -1px;

background : rgb(0, 0, 0);

background : rgba(0, 0, 0, 0.7);

padding : 10px;

}

h1 {

position : absolute;

top : 10px;

left : 10px;

width : 100%;

}

h1 span {

color : white;

font : bold 24px/50px Helvetica, Sans-Serif;

letter-spacing : -1px;

background : rgb(0, 0, 0);

background : rgba(0, 0, 0, 0.7);

padding : 10px;

}

.leftText

{

display:block;

float: left; /* Обтекание по правому краю */

background: #fffafa;

border-style:outset;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin: 5px; /* Отступ справа */

width: 30%; /* Ширина блока */

}

.rightText

{

display:block;

float: right; /* Обтекание по правому краю */

background: #fffafa;

border-style:outset;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin: 5px; /* Отступ справа */

width: 30%; /* Ширина блока */

}

.centerText{

display:block;

float: left; /* Обтекание по правому краю */

background: #fffafa;

border-style:outset;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin: 5px; /* Отступ справа */

margin-left: 2%;

width: 30%; /* Ширина блока */

}

.clearfx

{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.teloText

{ display:block;

margin: 10px;

padding: 5px;

font-size: 20px;

background: #fffafa;

border-style:outset;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.phone

{

position:absolute;

margin: 5px;

padding: 5px;

right: 5px;

top: 10px;

font-size: 30px;

color: rgb(106, 56, 255);

z-index:1;

}

.teloTextAbout

{

display:block;

margin: 10px;

margin-left: 20%;

padding: 5px;

font-size: 20px;

background: #fffafa;

border-style:outset;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

width:60%;

}

/*//////////////////////////////////////*/

#navbar {

margin: 0;

padding: 0;

list-style-type: none;

 

}

#navbar li { display: inline; }

#navbar {

margin: 0;

padding: 0;

list-style-type: none;

border: 2px solid #0066FF;

 

width: 100%;

text-align: center;

background-color:rgba(0, 0, 0, 0.7);

position:absolute;

top:230px;

}

#navbar a {

color: #fff;

padding: 5px 10px;

text-decoration: none;

font-weight: bold;

display: inline-block;

width: 100px;

}

#navbar a:hover {

border-radius: 20px 5px;

background-color: #0066FF;

}


 

Листинг В.

Листинг файла close.js.

onbeforeunload = function(e){

if(confirm('Are you nuts? Do you really want to leave me?')){

return 'OK, Good Bye then';

}

else {

e = e || event;

if(e.preventDefault){e.preventDefault();}

e.returnValue = false;

return 'Are you sure?';

}

}