Знакомство с JavaSсript

Показывать лекцию целиком

Дополнительные файлы к лекции находятся в P09.zip.

Краткие итоги

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

Набор для практики

Вопросы:

Каким образом можно вывести на экран значение переменной?

Как вывести на экран массив?

Назовите условные операторы JavaScript.

Упражнения:

Разработайте программу, перемешивающую случайным образом элементы символьного массива, например, дни недели.

Продемонстрируйте умение использовать конъюнкцию. Для истинности некоторого выражения истинными должны быть три условия.

Составьте программу, находящую сумму квадратов отклонений числового массива.

В данном практическом занятии мы познакомимся с синтаксическими основами языка программирования JavaScript. В качестве среды разработки будет использоваться MS Visual Web Developer 2008 Express Edition, в качестве браузера - MS Internet Explorer 8.

Начнем занятие мы с переменных. Переменной называется именованная область памяти, в которой хранятся данные одного типа. В JavaScript понятие типа данных трактуется достаточно свободно. Там, где это необходимо, приходится указывать тип данных принудительно. В первом примере мы объявим две переменных, присвоим одной из них значение "Марат", затем объединим ее со второй переменной и выведем результат на экран.

Пример 1. Знакомство с переменными

Запустите MS Visual Web Developer 2008 Express Edition, создайте новый HTML-документ и введите следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 1. Знакомство с переменными</title>
    <script type="text/javascript">
        var str, myName;
        myName = "Марат";
        str = "Привет, меня зовут " + myName + ". А тебя?";
        alert(str);
</script>
</head>
<body>
</body>
</html>

Результат:

(рис 25.1)

Переменные можно объединять с тэгами HTML. В этом случае, тэги нужно заключать в кавычки. В предлагаемом ниже примере мы выведем на экран стихотворение Мифтахетдина Акмуллы, объединяя переменные с тэгами <li/>.

Пример 2. Объединение переменных и тэгов HTML

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 2. Объединение переменных с HTML-кодом</title>
    <script type="text/javascript">
    var a,b,c,d, str;
    a = "Не возгордись богатствами отца";
    b = "И лунным блеском юного лица.";
    c = "Отцовское богатство - легкий иней,";
    d = "А красота твоя, лишь пух птенца";
    str = "<li/>" + a + "<li/>" + b + "<li/>" + c + "<li/>" + d
    document.write(str);
</script>
</head>
<body>
</body>
</html>

Результат:

(рис 25.2)

Очень важную роль в любом языке программирования играют условные операторы. В следующем примере мы познакомимся с выражением If … Then… Else.

Пример 3. Условный оператор If … Then… Else

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Условный оператор If … Then… Else</title>
</head>
<script type="text/javascript">
    var a,b,c, str;
    a = 50;
    b = 3;
    if (a < b) { c = a; }
    else {c = b;}
    str = "Минимальное значение из двух чисел равно " + c;
    document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.3)

Логические выражения могут быть составными. Если требуется одновременное выполнение всех условий, то мы имеем дело с конъюнкцией, если достаточно выполнения хотя бы одного из условий - с дизъюнкцией [1].

Пример 4. Знакомство с конъюнкцией и дизъюнкцией

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 4. Знакомство с конъюнкцией и дизъюнкцией</title>
</head>
<script type="text/javascript">
    var biology, chemistry, physics, grade_1, grade_2, str;
    biology = 3;
    chemistry = 4;
    physics = 5;
//Конъюнкция
    if (biology == 5  chemistry == 5  physics == 5)
    { grade_1 = "Молодец!"; }
    else
    { grade_1 = "Лентяй!"; }
//Дизъюнкция
    if (biology == 5 || chemistry == 5 || physics == 5)
    { grade_2 = "Отличник!"; }
    else
    { grade_2 = "Двоечник!"; }
    str = "В случае конъюнкции выполняться должны все условия" + "<br/>" + 
    "Чтобы получить оценку Молодец, нужны пятерки по всем предметам" + "<br/>" +
    "В случае дизъюнкции достаточно выполнение хотя бы одного условия" + "<br/>" +
    "Чтобы получить оценку Отличник, достаточно одной пятерки" + "<br/>" +
    "Итак, первая оценка: " + "<b>" + grade_1 + "</b>" + "<br/>" +
    "Вторая оценка: " + "<b>" + grade_2 + "</b>"
    document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.4)

Сокращенной формой условного оператора является условная операция, или оператор (?). Продемонстрируем его использование на следующем примере.

Пример 5. Условная операция

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 5. Условная операция</title>
</head>
<script type="text/javascript">
    var a,b,c, str;
    a = 3;
    b = 5;
    //Оператор ? является сокращенной формой условного оператора if.. else
    a > b ? c = a : c = b;
    str = "Максимальное из двух чисел: " + c;
    document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.5)

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

Пример 6. Оператор switch

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 6. Оператор switch</title>
</head>
<script type="text/javascript">
    var DayNumber, str;
    DayNumber = 4;
    switch (DayNumber) {
        case 1:
            str = "Отдых от рабочего дня";
            break
        case 2:
            str = "Поготовка к рабочему дню";
            break
        case 3:
            str = "Рабочий день";
            break
        case 4:
            str = "Отдых от рабочего дня";
            break
        case 5:
            str = "Подготовка к выходному дню";
            break
        case 6:
            str = "Первый выходной день";
            break
        case 7:
            str = "Второй выходной день";
            break
    }
    document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.6)

Далее, мы познакомимся с математической библиотекой. В приводимом ниже примере мы найдем наибольшее из пяти чисел.

Пример 7. Знакомство с математической библиотекой. Нахождение наибольшего значения из пяти чисел

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 7. Знакомство с математической библиотекой. 
    Нахождение наибольшего значения из пяти чисел</title>
</head>
<script type="text/javascript">
    var a1, a2, a3, a4, a5, b1, b2, b3, b4, str;
    a1 = 3;
    a2 = 5;
    a3 = -8;
    a4 = 16;
    a5 = 32;
    b1 = Math.max(a1, a2);
    b2 = Math.max(a3, a4);
    b3 = Math.max(b1, b2);
    b4 = Math.max(b3, a5);
    str = "Наибольшее из пяти чисел: " + b4;
  document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.7)

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

Пример 8. Знакомство с математической библиотекой. Модуль числа. Округление чисел

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 8. Знакомство с математической библиотекой. 
     Модуль числа. Округление чисел</title>
</head>
<script type="text/javascript">
    var a1, a2, a3, b1, b2, b3, b4, str;
    a1 = 3.35;
    a2 = -3.35;
    a3 = 3.75;
    b1 = Math.abs(a2);    //Модуль числа
    b2 = Math.round(a1);  //Округление до целого
    b3 = Math.floor(a3);  //Округление до целого с недостатком
    b4 = Math.ceil(a1);   //Округление до целого  с избытком
    str = "Модуль числа: " + "Math.abs(" + a2 + ") = " + b1 + "<br/>" +
    "Округление до целого: " + "Math.round(" + a1 + ") = " + b2 + "<br/>" +
    "Округление до целого с недостатком: " + "Math.floor(" + a3 + ") = " + b3 + "<br/>" + 
    "Округление до целого с избытком: " + "Math.ceil(" + a1 + ") = " + b4;
    document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.8)

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

Пример 9. Решение квадратного уравнения

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 9. Решение квадратного уравнения</title>
</head>
<script type="text/javascript">
    var a, b, c, d, x1, x2, str;
    a = -3;
    b = 5;
    c = 14;
    d = Math.pow(b, 2) - 4 * a * c;
    if (d < 0) { str = "Действительных корней нет!"; }
    else {
        x1 = (-b - Math.sqrt(d)) / (2 * a);
        x2 = (-b + Math.sqrt(d)) / (2 * a);
        str = "x1 = " + x1 + "<br/>" + "x2 = " + x2;
     }
     document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.9)

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

Пример 10. Цикл For. Подсчет количества отрицательных элементов массива. Нахождение суммы положительных элементов массива

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 10. Цикл For. Подсчет количества отрицательных элементов массива. 
  Нахождение суммы положительных элементов массива</title>
</head>
<script type="text/javascript">
    var n, i, NegativeElementsNumber, SumOfPositiveElements, str;
    Alpha = new Array(-6, 11, 8, -4, 9, 15, 23, 61, -2);
    n = Alpha.length
    NegativeElementsNumber = 0;
    SumOfPositiveElements = 0;
    str = "Массив:" + "<br/>";
    for (i = 0; i <n; i++) {
        str += Alpha[i] + "<br/>";
        if (Alpha[i] < 0) { NegativeElementsNumber += 1; }
        else {SumOfPositiveElements += Alpha[i]; }
    }
    str += "<br/>" + "Количество отрицательных элементов массива = " + NegativeElementsNumber + "<br/>" +
   "Сумма положительных элементов массива = " + SumOfPositiveElements;
     document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.10)

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

Пример 11. Цикл For. Нахождение минимального и максимального элементов массива

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 11. Цикл For. Нахождение минимального и максимального элементов массива</title>
</head>
<script type="text/javascript">
    var n, i, min_value,max_value, str;
    Alpha = new Array(12,-6, 11, 8, -4, 9, 15, 23, 61, -2);
    n = Alpha.length
    max_value = Alpha[0];
    min_value = Alpha[0];
    str = Alpha[0] + "<br/>";
    for (i = 1; i <n; i++) {
        str += Alpha[i] + "<br/>";
        if (Alpha[i] < min_value) { min_value = Alpha[i]; }
        if (Alpha[i] > max_value) { max_value = Alpha[i]; }
    }
    str += "<br/>" + "Минимальный элемент массива = " + min_value + "<br/>" + 
  "Максимальный элементов массива = " + max_value;
     document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.11)

Задачу сортировки можно решить гораздо проще, воспользовавшись функцией Sort.

Пример 12. Использование функции сортировки

Добавьте новую HTML-страницу со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 12. Использование функции сортировки</title>
</head>
<script type="text/javascript">
    var n, i,  str;
    Alpha = new Array(12,-6, 11, 8, -4, 9, 15, 23, 61, -2);
    n = Alpha.length
    str = "Массив до сортировки: "+ "<br/>";
    for (i = 0; i <n; i++) {
        str += Alpha[i] + "<br/>";
    }
    str += "<br/>" + "Массив после сортировки: " + "<br/>";
    function compare(x, y) {
        return x - y;
    }
    Alpha.sort(compare);
    for (i = 0; i < n; i++) {
        str += Alpha[i] + "<br/>";
    }
     document.write(str);
</script>
<body>
</body>
</html>

Результат:

(рис 25.12)

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Краткие итоги

Набор для практики

Вопросы:

Упражнения:

Пример 1. Знакомство с переменными

Пример 2. Объединение переменных и тэгов HTML

Пример 3. Условный оператор If … Then… Else

Пример 4. Знакомство с конъюнкцией и дизъюнкцией

Пример 5. Условная операция

Пример 6. Оператор switch

Пример 7. Знакомство с математической библиотекой. Нахождение наибольшего значения из пяти чисел

Пример 8. Знакомство с математической библиотекой. Модуль числа. Округление чисел

Пример 9. Решение квадратного уравнения

Пример 10. Цикл For. Подсчет количества отрицательных элементов массива. Нахождение суммы положительных элементов массива

Пример 11. Цикл For. Нахождение минимального и максимального элементов массива

Пример 12. Использование функции сортировки

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!