Методичка: Разработка Web-приложений

Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам

<html>

<HEAD>

<TITLE>Часы, отображающие текущее время</TITLE>

<script type="text/javascript">

function fulltime() {

var time=new Date();

document.clock.full.value=time.toLocaleString(); // 1-ый вариант

document.getElementById("jsclock").innerHTML=time.toLocaleString(); // 2-ой вариант

setTimeout('fulltime()',500) }

</script></head><body>

<form name=clock>

<input type=text size=20 name=full><!-- 1-ый вариант -->

<span id="jsclock"></span><!-- 2-ой вариант -->

</form>

<script type="text/javascript"> fulltime(); </script>

</BODY>

</HTML>

Листинг 6. Определение браузера (использован объект navigator)

<HTML>

<HEAD>

<TITLE>Сведения о браузере</TITLE>

</HEAD>

<BODY>

<h1>Для навигации в Web вы используете:</h1>

<ul>

<SCRIPT type="text/javascript">

document.write("<li>Имя программы:<b>"+navigator.appName+"</b>");

document.write("<li>Версия:<b>"+navigator.appVersion+"</b>");

document.write("<li>Пользовательский агент:<b>"+navigator.userAgent+"</b>");

document.write("<li>Платформа: <b>"+navigator.platform+"</b>");

</SCRIPT>

</ul>

</BODY>

</HTML>

Задания к работе

1. Напишите функцию создания генератора sequence(start, step).

2. Напишите функцию map(fn, array), которая принимает на вход функцию и массив, и обрабатывает каждый элемент массива этой функцией, возвращая новый массив.

3. Напишите функцию создания генератора take(gen, x).

4. Напишите функцию fmap(a, gen), которая принимает на вход 2 функции.

5. Напишите функцию создания генератора (partial application)

6. Напишите функцию pluck, которая берет массив объектов и возвращает массив значений определенного поля

7. Напишите функцию filter, которая принимает функцию-предикат и массив. Возвращает она массив значений, для которых предикат вернет true

8. Напишите функцию, считающую число свойств в объекте

9. дан список вида «страна, город, население»: Можете взять оттуда первые 5-10 городов и перенести в код. Города в списке могут идти в произвольном порядке. Напишите программу, которая отберет и выведет N самых населенных городов по убыванию числа жителей.

10. Напишите функцию, считающую число свойств в объекте.

11. Напиши функцию fmap(a, gen), которая принимает на вход 2 функции.

12. Напишите функцию pluck, которая берет массив объектов и возвращает массив значений определенного поля.

Практическое занятие №5

Тема: Первые основные понятия PHP

Цель работы: изучить основы языка PHP. Разработать простое серверное приложение на языке PHP.

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

Серверные приложения

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

Рис. 1. Препроцессинг HTML на сервере

Основы PHP

PHP (рекурсивный акроним для "PHP: Hypertext Preprocessor") это широко распространённый язык сценариев, который создан специально для Веб и который можно внедрять в HTML.

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

PHP предельно прост для новичка в программировании, но предлагает много продвинутых возможностей для программиста-профессионала. Возможности PHP весьма широки, но освоить основные из них несложно за пару часов (конечно же, имея понятие о программировании в целом). Листинг 1 иллюстрирует применение PHP для формирования веб-страницы с текстом «Hello, World!» (курсивом выделен исходный код PHP).

Листинг 1 Простая программа на PHP

<?php

$site_title = "A first PHP program";

$hello = "Hello, World!";

?>

<html>

<head>

<title><?PHP echo $site_title; ?></title>

</head>

<body>

<?PHP

//Вывести текст с меткой времени

echo "<p style='font-size: 2em;'>I say $hello at ". date("H.i.s")."</p>";

?>

</body></html>

На рис. 2 показано, как выглядит приведенный сценарий при выполнении в браузере.

Рис. 2. Результаты выполнения сценария в браузере

Примеры скриптов

<?php

// получение информации о настройках веб-сервера и PHP

phpinfo();

//основы синтаксиса и программные единицы

//переменные и вывод

$str = "Hello, world";

echo "<h1>$str</h1>"; // это правильная конструкция. PHP способен разбирать строки и выделять переменные в них

// условный оператор

$min = -100;

$max = 100;

$i = rand($min, $max);

if ($i > 0) {echo "<p>Число положительное</p>";}

else if ($i < 0) {echo "<p>Число отрицательное</p>";}

else {echo "<p>Ноль</p>";}

// цикл for

echo "<h2>Таблица умножения</h2>";

echo "<table>";

for ($i=1; $i<=10; $i++) {

echo "<tr>";

for ($j=1; $j<=10; $j++) {

echo "<td style = 'background-color: silver;width:25px; height:25px; text-align:center; vertical-align: middle;'>".($i*$j)."</td>";

}

echo "</tr>";

}

echo "</table>";

// оператор выбора (скрипт должен быть вызван с параметром uname (e.g.: samples.php?uname=vasya))

echo "<h2>Использование оператора выбора </h2>";

$who = $_GET["uname"];

$reply = "<b>Liza say:</b> ";

switch ($who) {

case "kolya" : $reply.="fiii..."; break;

case "petya" : $reply.="khm..."; break;

case "vasya" : $reply.="ohhh..yyyyes!"; break;

default : $reply.= " Who's next?";

}

echo "<p><b>".$who." say:</b> What do U think about Me? <p>".$reply;

// массивы

$fruits = array("banana", "plum", "apple", "peach");

sort($fruits); // сортировка - см. документацию PHP "Функции массивов"

$out = "";

foreach ($fruits as $f)

$out .= "<li>$f</li>"; // конкатенация строк

echo "<ul>$out</ul>"

echo "<p>В массиве fruits ".count($fruits)." элем.</p>";

$fruits[5] = "pinapple";

print_r($fruits); // обратите внимание - элемент с индексом 4 в этом примере будет не определен

echo $fruits[4]; // ошибка! этот элемент не определен

$fruits[4] = "";

echo $fruits[4]; // элемент определен, но содержит пустую строку

// многомерные массивы

$vertex[1][0][0] = 1;

$vertex[0][1][0] = 1;

$vertex[0][0][1] = 1;

print_r($vertex);

// ассоциативные массивы

$coords[0]["X"] = 55;

$coords[0]["Y"] = 32;

$coords[1]["X"] = 27;

$coords[1]["Y"] = 0.56;

print_r($coords);

$page["head"] = "<head><title>PHP - it's easy</title></head>";

$page["body"] = "<body><p>A simple sample using associative arrays</p></body>";

print_r($page);

$p = $page["head"].$page["body"];

// файловые операции

$f = "read.me"; // файл в текущей директории

if (file_exists($f)) // проверка существования файла

$text = file_get_contents($f); // чтение из файла

file_put_contents($f, $p); // запись в файл, директория должна быть доступна для записи (access rights - 777)

// еще о файлах

$fd = fopen($f, "a"); // открытие для дозаписи (здесь "a" - append)

$str = "some text";

fwrite($fd, $str); // запись в конец файла

fclose($fd);

// переменные окружения

echo "<h1>Переменные окружения</h1>";

foreach ($_SERVER as $var=>$val) {

echo "<p>$"."_SERVER['$var'] = $val</p>";

};

// перенаправление запроса

$url = "index.html";

header("Location:$url"); // функция header заголовки http, поэтому должна вызываться раньше любого вывода

// Обработка параметров

echo "<p>Пусть на сервер передан запрос вида

http://myserv.dom/test.php?id=2344&uname=vasya&nick=vasiliok&age=19 (использован метод GET)

<p>Требуется вывести все переменные из строки запроса.";

echo "<ol><li>Использование функции печати массива: <br>";

print_r($_GET);

foreach ($_GET as $key => $val){

echo "<li>parameter: <b>".$key."</b> value: <b>".$val."</b>";

}

echo "</ul>\n<li>Поэлементный вывод (выводим только значения)<ul>";

echo "<li>ID: <b>".$_GET["id"]."</b>";

echo "<li>Firstname: <b>".$_GET["uname"]."</b>";

echo "<li>Nickname: <b>".$_GET["nick"]."</b>";

echo "<li>Age: <b>".$_GET["age"]."</b>";

echo "</ul></ol>";

echo "<p>Проверка, что переданы нужные параметры:";

if (isset($_GET["id"])) {

echo "<p><b>do something...</b>";} else {

echo "<p><b>nothing to do ...</b>";

};echo "<h2>Проверка, что передан нужный параметр и требуемое значение</h2>";

if ((isset($_GET["id"]))&&($_GET["id"] == 2344)){

echo "<p><b>do something...</b>";} else {

echo "<p><b>nothing to do ...</b>";}?>

Задания к работе

1. Типы переменных. Присвоение значений переменным.

2. Переменные. Вывод и удаление.

3. Создание Константы.

4. Конструкция Switch - Case.

5. Решить пример с применением массивов.

6. Приминение двумерных массивов.

7. Приминение одномерных массивов.

8. Приминение ассоциативных массивов.

9. Решить пример с применением цикла For.

10. Задача на использование циклов.

11. Задача на использование Foreach.

12. Приминение и изучение файловых операций.

Практическое занятие №6

Тема: Работа с условным оператором if-else

Цель работы: приобретение практических навыков в составлении алгоритмов и программ разветвленной структуры.

Указание к работе: 1. Введите первую программу примера 2 и выполните ее.

Измените программу так, как это было сделано во втором случае, т. е. с учетом равенства вводимых чисел.

2. Составьте программу определения большего из двух чисел.

Основные сведения

Условные операторы: if, '?'

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

Для этого используется оператор if.

Например:

var year = prompt ('В каком году появилась спецификация ECMA-262 5.1?', '');

if (year != 2011) alert( 'А вот и неправильно!' );

Оператор if

Оператор if («если») получает условие, в примере выше это year != 2011.

Он вычисляет его, и если результат - true, то выполняет команду.

Если нужно выполнить более одной команды - они оформляются блоком кода в фигурных скобках:

if (year != 2011) {

alert( 'А вот..' );

alert( '..и неправильно!' );

}

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

Это улучшает читаемость кода.

Преобразование к логическому типу

Оператор if (...) вычисляет и преобразует выражение в скобках к логическому типу.

В логическом контексте:

· Число 0, пустая строка "", null и undefined, а также NaN являются false,

· Остальные значения - true.

Например, такое условие никогда не выполнится:

if (0) { // 0 преобразуется к false

...

}

…А такое - выполнится всегда:

if (1) { // 1 преобразуется к true

...

}

Можно и просто передать уже готовое логическое значение, к примеру, заранее вычисленное в переменной:

var cond = (year != 2011); // true/false

if (cond) {

...

}

Неверное условие, else

Необязательный блок else («иначе») выполняется, если условие неверно:

var year = prompt ('Введите год появления стандарта ECMA-262 5.1', '');

if (year == 2011) {

alert( 'Да вы знаток!' );

} else {

alert( 'А вот и неправильно!' ); // любое значение, кроме 2011

}

Несколько условий, else if

Бывает нужно проверить несколько вариантов условия. Для этого используется блок else if ....

Например:

var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');

if (year < 2011) {

alert( 'Это слишком рано..' );

} else if (year > 2011) {

alert( 'Это поздновато..' );

} else {

alert( 'Да, точно в этом году!' );

}

В примере выше JavaScript сначала проверит первое условие, если оно ложно - перейдет ко второму - и так далее, до последнего else.

Оператор вопросительный знак „?“

Иногда нужно в зависимости от условия присвоить переменную. Например:

var access;

var age = prompt('Сколько вам лет?', '');

if (age > 14) {

access = true;

} else {

access = false;

}

alert(access);

Оператор вопросительный знак '?' позволяет делать это короче и проще.

Он состоит из трех частей:

условие ? значение1 : значение2

Проверяется условие, затем если оно верно - возвращается значение1, если неверно - значение2, например:

access = (age > 14) ? true : false;

Оператор '?' выполняется позже большинства других, в частности - позже сравнений, поэтому скобки можно не ставить:

access = age > 14 ? true : false;

…Но когда скобки есть - код лучше читается. Так что рекомендуется их писать.

На заметку: В данном случае можно было бы обойтись и без оператора '?', т.к. сравнение само по себе уже возвращает true/false:

access = age > 14;

«Тернарный оператор»

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

Несколько операторов „?“

Последовательность операторов '?' позволяет вернуть значение в зависимости не от одного условия, а от нескольких.

Например:

var age = prompt('возраст?', 18);

var message = (age < 3) ? 'Здравствуй, малыш!' :

(age < 18) ? 'Привет!' :

(age < 100) ? 'Здравствуйте!' :

'Какой необычный возраст!';

alert( message );

Поначалу может быть сложно понять, что происходит.

Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!

Вопросительный знак проверяет сначала age < 3, если верно - возвращает 'Здравствуй, малыш!', если нет - идет за двоеточие и проверяет age < 18.

Если это верно - возвращает 'Привет!', иначе проверка age < 100 и 'Здравствуйте!'…