НОУ ИНТУИТ | Разработка клиентских приложений Web-сайтов. Лекция 9: Знакомство с JavaSсript

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 05.08.2010 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 39 студентам

| Поделиться |

Поддержать программу

Аннотация: Рассматриваются такие синтаксические конструкции JavaScript, как переменные, массивы, циклы, условные операторы, математические функции. Иллюстрируются такие распространенные алгоритмы, как конкатенация строк, сортировка массивов, нахождение минимального и максимального значений.

Ключевые слова: переменная, массив, HTML, математическая функция, условный оператор, сортировка массивов, visual, Web, developer, edition, Internet, именованная область, тип данных, значение, логические выражения, переключатель, функция, цикл, сортировка

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

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

В процессе выполнения практического занятия мы познакомились с объявление, инициализацией и выводом на экран переменных и массивов, освоили методы объединения переменных с тэгами 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.

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

Дальше >>

Разработка клиентских приложений Web-сайтов

Разработка клиентских приложений Web-сайтов

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

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

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

Вопросы:

Упражнения:

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

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

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

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

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

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

Вопросы и ответы

Студенты

Авторизоваться

Разработка клиентских приложений Web-сайтов

Разработка клиентских приложений Web-сайтов

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

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

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

Вопросы:

Упражнения:

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

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

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

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

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

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

Вопросы и ответы

Студенты