 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Тема: Примеры формирования сценариев на языке программирования
План:
1. Примеры формирования сценариев на JavaScript для выполнения арифметических, логических и других операций.
2. Сценарии с использованием операторов.
1. Примеры формирования сценариев на JavaScript для выполнения арифметических, логических и других операций.
Рассмотрим примеры использования арифметических операций. Здесь приводится только содержимое блока SCRIPT. Все примеры созданы на основе шаблона.
Пример 1. Операция сложения (+)
<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 4;
alert(a + b);
// Снимаем маскировку. -->
</script>
Аналогичным образом создаются коды для других арифметических операций.
Пример 2. Префиксное возрастание
<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 2;
alert(++a + b);
// Снимаем маскировку. -->
</script>
Пример 3. Префиксное уменьшение
<script language= "JavaScript">
<!-- Маскируемся!
var a = 6, b = 2;
alert(--a + b);
// Снимаем маскировку. -->
</script>
Пример 4. Комбинированная операция +--
<script language="JavaScript">
<!-- Маскируемся!
var x = б;
alert(х += 2);
// Снимаем маскировку. -->
</script>
Пример 5. Комбинированная операция -=
<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x -= 2);
// Снимаем маскировку. -->
</script>
Пример 6. Комбинированная операция *=
<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x *= 2);
// Снимаем маскировку. -->
</script>
Пример 7. Комбинированная операция /=
<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x /= 2);
// Снимаем маскировку. -->
</script>
Пример 8. Операция условия?:
<script language="JavaScript">
<!-- Маскируемся!
var w = 1, x=2, y=3, z = 4, ans;
ans = (w > x)? у: z
alert(ans);
// Снимаем маскировку. -->
</script>
Пример 9. Конкатенация строк +
<script language="JavaScript">
<!-- Маскируемся!
var A = "JavaScript ", B = "в примерах";
C = A + B;
alert(C);
// Снимаем маскировку. -->
</script>
Пример 10. конкатенация строки с числом
<script language="JavaScript">
<!-- Маскируемся!
var A = "10", B = 5;
C = A + B;
alert(C);
// Снимаем маскировку. -->
</script>
Пример 11. Операция typeof
<script language="JavaScript">
<!-- Маскируемся!
var x = "Привет", у;
alert("Значение переменной x относится к типу " + typeof(x));
alert("Значение переменной у относится к типу " + typeof(у));
alert("Значение переменной z относится к типу " + typeof(z));
// Снимаем маскировку. -->
</script>
Пример 12. Калькулятор JavaScript
Шаг 1. Начинайте с обычного HTML-шаблона:
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<! - - Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 2. Объявите переменные, которые будете использовать. Вам понадобятся две переменные для чисел, вводимых пользователем, одна - для операции, которую выберет пользователь и еще одна для ответа:
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
// Снимаем'маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 3. Далее используйте метод prompt (), чтобы дать возможность пользователю ввести первое число, и присвойте его значение переменной num1:
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 4. Создайте еще один запрос чтобы пользователь мог указать желаемую операцию. Присвойте это значение переменной ор.
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция"};
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 5. Затем организуйте еще один запрос для второго числа. Присвойте его значение переменной num2.
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 6. А теперь решите задачу. Арифметические действия производятся с помощью метода eval (), выполняющего все вычисления. Но сначала нужно преобразовать значения numl и num2 из строк в числа. Это можно сделать, указав, что значения этих переменных являются числами. Результат вычислений присваивается переменной ans.
Примечание Метод eval () будет рассмотрен более подробно в последующих главах.
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
ans = eval(Number(numl) + op + Number(num2});
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Шаг 7. И наконец воспользуйтесь методом alert () для вывода на экран значения ans. В окне предупредительных сообщений вы увидите математическое выражение, состоящее из значений переменных в сочетании с пробелами и символом равенства (=):
<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
ans = eval(Number(numl) + op + Number(num2));
alert(numl + " " + op + " " + num2 + " = " + ans);
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>
Затем необходимо сохранить файл и открыть его в браузере. В окне запросов вводятся числа и название вида операции и затем просматривается, как будут выполняться вычисления.
2. Сценарии с использованием операторов.
Пример 1. Выводимое на экран окно предупредительных сообщений является результатом выполнения оператора:
<script language="JavaScript">
<!-- Маскируемся!
alert("Это тоже оператор!");
// Снимаем маскировку. -->
</script>
Пример2.
<script language="JavaScript">
<!-- Маскируемся!
var ournames = "Кэти и Эдриан";
// Снимаем маскировку. -->
</script>
Пример 3.
<script language="JavaScript">
<!-- Маскируемся!
var ournames = "Кэти и Эдриан", ans;
alert("Вас приветствуют " + ournames);
ans = prompt("Вам нравится изучать JavaScript?","Да или нет");
alert(ans);
// Снимаем маскировку. -->
</script>
Пример 4. Оператор if
<script language="JavaScript">
<!-- Маскируемся!
var response = confirm("Вы будете и дальше читать эту книгу? Нажмите ОК. Если нет, то нажмите Cancel.");
if (response == true)
{
alert("Отличный выбор!");
}
// Снимаем маскировку. -->
</script>
Пример 5. Сценарий выполняет определенные действия после щелчка по кнопке ОК. При щелчке по кнопке Cancel в дело вступает вторая часть оператора if - else. Она позволяет отреагировать на невыполнение условия (в данном случае на нажатие кнопки Cancel, что равноценно присвоению переменной response значения false):
<script language="JavaScript">
<!-- Маскируемся!
var response = confirm("Bы будете и дальше читать эту книгу? Нажмите ОК. Если нет, то нажмите Cancel.");
if (response == true)
{
alert("Отличный выбор!");
}
else
{
alert("Вы уверены? Изучать JavaScript очень интересно!");
}
// Снимаем маскировку. -->
</script>
Пример 5. Оператор организации цикла do... while запускает на выполнение оператор или группу операторов и повторяет эту процедуру до тех пор, пока условие не перестанет выполняться.
<script language="JavaScript">
<!-- Маскируемся!
var x = 1
do
{
++x;
alert(x);
}
while (x < 10);
// Снимаем маскировку. -->
</script>
Пример 6. Оператор while подобен оператору do... while и действует похожим образом:
<script language="JavaScript">
<!-- Маскируемся!
var x = 1
while (x < 10)
{
+ +x;
alert(x);
}
// Снимаем маскировку. -->
</script>
Примечание Новички легче усваивают оператор do... while. Это связано с функционированием этих операторов. Оператор do... while исполняется в сценарии хотя бы один раз, тогда как while может вовсе не запускаться на выполнение (в зависимости от обстоятельств). Это часто сбивает с толку начинающих.
Пример 7. Оператор for подобен ранее рассмотренным операторам, но он несколько сложнее. Разница заключается в способе подсчета, в результате которого весь процесс может повторяться вечно:
<script language="JavaScript">
<!-- Маскируемся!
for (x = 1; x < 10; ++x)
{
alert(x);
}
// Снимаем маскировку. -->
</script>
Предупреждение При неправильном задании условий процесс действительно может продолжаться до бесконечности. Например: for (х = 1 x > 0; х++)
Рассмотрим самую важную строчку:
for (x = 1; x < 10; ++x)
Смысл этой строки заключается в том, что значение х возрастает от единицы с шагом 1 до тех пор, пока оно меньше десяти. Если это условие удовлетворяется, будет выполняться следующий оператор.
Пример 8. Здесь оператор for используется для инициализации десяти элементов массива, причем каждому элементу массива присваивается значение, равное его номеру. Затем содержимое массива выводится на экран в окне предупредительных сообщений.
<script language="JavaScript">
<!-- Маскируемся!
var myarray = new Array();
for (i = 0; i < 10; i++)
{
myarray[i] = i;
}
alert(myarray);
// Снимаем маскировку. -->
</script>
Пример 9. В данном примере оператор for... in используется для увеличения на единицу каждого из пяти элементов массива myarray.
<script language="JavaScript">
<!-- Маскируемся!
var myarray = new Array(5);
myarray[0] =5
myarray[1] = 8
myarray[2] = 10
myarray[3] = 18
myarray[4] = 180
for (x in myarray)
{
myarray[x] = ++myarray[x];
}
alert(myarray);
// Снимаем маскировку. -->
</script>
Пример 10. Оператор switch
<script language="JavaScript">
<!-- Маскируемся!
var yourchoice;
yourchoice = prompt("Загадайте число от 1 до 4", "1, 2, 3 или 4");
switch (yourchoice)
{
case "1":
alert("Вы ввели число 1");
break;
case "2":
alert("Вы ввели число 2");
break;
case "3":
alert("Вы ввели число 3");
break;
case "4":
alert("Вы ввели число 4");
break;
}
// Снимаем маскировку. -->
</script>
Пример 11. Оператор switch
<script language="JavaScript">
<!-- Маскируемся!
var yourchoice;
yourchoice = confirm("Bы сейчас сидите за компьютером?");
switch (yourchoice)
{
case true:
alert("Видите, я угадал!");
break;
case false:
alert("Да? А как же вы тогда это делаете?");
break;
}
// Снимаем маскировку. -->
</script>
Контрольные вопросы:
1. Какую роль выполняет alert?
2. Какие операторы можно использовать для написания сценариев?
3. С помощью каких операторов на экран можно вывести предупредительные сообщения?
Домашнее задание:
Подготовить рефераты по темам «Сравнительная характеристика JavaScript и Java», «Примеры скриптов»
[7], с. 67-99
Поиск по сайту: