Задания
Данные удобно представлять с помощью элемента управления «переключатель» (или «радиокнопка») в том случае, когда из нескольких вариантов может быть выбран лишь один.
Пример 1. Вычисление площади фигуры.
Необходимо выбрать форму фигуры и определить ее площадь. Пусть для выбора фигуры задана следующая форма:
В этой форме шесть элементов. Первый элемент служит для ввода строки текста. Следующие три элемента образуют группу и являются переключателями. Пятый элемент создает кнопку сброса, нажатие которой отменяет все сделанные изменения. Шестой элемент является элементом для ввода строки.
Так как объект forms имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге , то получить доступ к первому элементу формы можно либо с помощью значения параметра name этого элемента (document.form1.data), либо используя объектную модель JavaScript (document.forms[0].elements[0]). Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией document.forms[0].elements[1]. Это элемент-переключатель, определенный в составе группы элементов. В рассматриваемом примере группа элементов состоит из трех переключателей. В одну группу входят элементы с одинаковым значением параметра name. Доступ к следующим элементам группы может быть осуществлен так: document.forms[0].elements[2], document.forms[0].elements [3]. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы. Пользователь может выбрать только один вариант.
Напишем сценарий, в котором в зависимости от длины стороны или радиуса и формы выбранной фигуры вычисляется ее площадь. Для простоты будем считать, что фигура может иметь либо форму квадрата (задается его сторона), либо форму круга (задается радиус), либо форму равностороннего треугольника (задается его сторона). Площадь рассматриваемых фигур считается по формуле kа^2, где k — коэффициент, зависящий от формы выбранной фигуры; а — задаваемое пользователем значение. Вычисления будут проще, если коэффициент k указать в качестве значения параметра value соответствующего переключателя. Щелчок на элементе «переключатель» соответствует событию click, обработка которого заключается в вызове функции test. Функция имеет единственный параметр, значение параметра — value переключателя, которое служит для вычисления площади фигуры. HTML-код приведен в листинге 1.
Листинг 1. Вычисление площади выбранной с помощью переключателя фигуры
function test (k)
else alert («Введите значение»)
Написать сценарий выбора из трех изображений одного которое вставляется ниже этих трех
Лабораторная работа №4
Методы в JavaScript
Во время интерпретации HTML-документа браузером создаются объекты JavaScript. Свойства объектов определяются параметрами тегов языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-тегам. Родителем всех объектов является объект windows, расположенный на самом верхнем уровне иерархии, он представляет окно браузера и создается при запуске браузера. Для того чтобы открыть новое окно в сценарии JavaScript и отобразить в нем новый документ, применяется метод open, для закрытия окна можно воспользоваться методом close. Метод alert объекта windows отображает диалоговое окно с текстом, переданным методу в качестве параметра. Данный метод используется в случаях проверки правильности вводимых данных с помощью формы. Свойства объекта windows относятся ко всему окну, в котором отображается документ.
Подчиненными объектами (или объектами нижнего уровня) являются объекты document, history, location, frame. Свойства объекта history представляют адреса ранее загружаемых HTML-страниц. Свойства объекта location связаны с URL-адресом отображаемого документа, объекта frame — со специальным способом представления данных.
Свойства объекта document определяются содержимым самого документа: шрифт, цвет фона, формы, изображения и т. д. Объект document в зависимости от своего содержимого может иметь объекты, являющиеся для него подчиненными или дочерними. В частности подчиненными для объекта document являются объекты form, image, link, area и др. Иерархическая структура объектов представлена на рис.1
Для каждой страницы создается один объект document, некоторые его свойства соответствуют параметрам тега : bgColor, fgcolor, linkcolor, alinkcolor, vlinkColor. Методы write и writeln записывают в документ текст, задаваемый параметром.
Если документ содержит изображения, то доступ к объекту, определяющему изображение, можно получить с помощью переменной, указанной в параметре name тега . Объект image имеет свойство images, которое содержит ссылки на все изображения, расположенные в документе. Ссылки перенумерованы, начиная с нуля. Доступ к первому изображению можно получить с помощью составной конструкции document.images[0], ко второму — document.images[1]. Если на странице пять изображений, то доступ к последнему изображению можно получить, воспользовавшись ссылкой document.images[4].
Рассмотрим примеры, в которых используются различные свойства объектов.
Для встраивания изображений в HTML-документ служит тег , имеющий обязательный параметр src, определяющий URL-адрес файла с изображением. Можно задавать размеры выводимого изображения. Значение параметра width определяет ширину изображения, значение параметра height — высоту изображения. Значения параметров ширины и высоты могут не совпадать с истинными размерами изображений, тогда при загрузке изображения автоматически выполняется перемасштабирование.
Изображение можно поместить в рамку. Для этого используется параметр border. Значением параметра должно быть число, определяющее толщину рамки в пикселях. По умолчанию рамка вокруг изображения отсутствует, если только изображение не является ссылкой.
Параметр alt определяет альтернативный текст. При наведении курсора мыши на изображение появляется комментарий.
Пример 1. Перестановка изображений
Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено три изображения, пронумерованных от 1 до 3. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Обменять изображения переместились на нужные места.
Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции document.images[r1-1]. Для того чтобы на место изображения с номером r1 поместить изображение с номером r2, требуется выполнить оператор присваивания:
document.images[r1-1].src=document.images[r2-1].src
И, наконец, на место изображения с номером r2 помещается изображение, которое ранее было на месте с номером r1, и адрес которого запомнили в переменной z:
document.images[r2-1].src=z
Приведем полностью документ со сценарием (листинг 1).
Листинг 1. Перестановка изображений с помощью сценария
Пример 2. Простое вертикальное меню
Напишем сценарий, реализующий вертикальное графическое меню. При наведении курсора мыши на пункт меню меняется цветовая палитра, соответствующая выделенному пункту меню.
Каждому пункту меню соответствует два изображения: первое изображение, когда пункт меню не выбран, второе — при выбранном пункте меню, цветовая палитра рисунка изменена. Графические изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pch1.gif, pch2.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpch1.gif, wpch2.gif.
Функция img имеет два параметра. Первый параметр задает выбор пункта меню, второй параметр — n — определяет номер пункта меню. От этого параметра зависит, какое изображение в документе требуется изменить document.images[n-1].src (вставить на этом месте рисунок «wpch»+n+».gif» или pch»+n+».gif). Имя файла формируется динамически и представляет собой конкатенацию (слияние) строк, одна из составляющих которой — значение второго параметра. Если имена файлов не подчинены общему правилу, то в функции потребуется дополнительный анализ, какой файл подгрузить. Это сделать нетрудно, зная место в документе, из которого произошел вызов функции. Документ со сценарием, реализующий вертикальное графическое меню, представлен в листинге 2.
Листинг 2. Простое вертикальное меню
При попадании курсора мыши в область изображения возникает событие Mouseover, параметр обработки события onMouseOver получает значение img(p1,true).
1. Проверить примеры лабораторной работы.
2. Написать сценарий выбора из трех изображений одного, которое вставляется ниже этих трех.
3. Написать сценарий картинки с «эффектом приближения», т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height).
4. Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор.
Динамическое формирование HTML-документа
1. Написать сценарий выбора из трех изображений одного, которое вставляется ниже этих трех.
2. Написать сценарий картинки с «эффектом приближения», т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height).
3. Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор.
Сделал выбор изображения, но не знаю как сделать эффект приближения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
HTML> HEAD> TITLE>Перестановка изображенийTITLE> meta charset="windows-1251"> script> function chan() { alert(Math.random()); var arr =[]; var result = document.getElementById('result'); //каждому изображению присвоил переменную,А потом передал в массив for (var i = 0; i document.getElementsByTagName('img').length - 1; i++) { var img = document.getElementsByTagName('img')[i]; arr.push(img.src); } result.src = arr[Math.floor(Math.random()*arr.length)]; } script> script src="http://code.jquery.com/jquery-latest.js"> script> script> $('img').width(90).hover(function(){ $(this).stop().animate({width: 150}); }, function(){ $(this).stop().animate({width: 90}); }); script> HEAD> BODY> CENTER> H4>Галерея рисунковH4>br> IMG src="1.jpg" width="90" name="pic1" title="1"> IMG src="2.png" width="90" name="pic2" title="2"> IMG src="3.jpg" width="90" name="pic3" title="3"> br> input type="button" value="Выбрать изображние" onClick="chan(this)"> br> IMG id="result" src="--> /--> CENTER> BODY> HTML>
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Динамическое формирование html страницы
Здравствуйте! Сразу хочу сказать — я начинающий web-программист. А теперь к вопросу 🙂 Есть.
Динамическое создание нового html документа (javascript)
нужно создать документ index.html, где по нажатию на кнопку создаётся новый HTML-документ, в.
Динамическое формирование картинок.
Можно ли сформированную динамически на JavaScript картинку отобразить в браузере?
Динамическое формирование select содержимого
Всем привет ! Если кто встречал киньте ссылочку . Есть два select в одном к примеру страны а в.
84 / 84 / 41
Регистрация: 14.02.2015
Сообщений: 320
Сообщение от ITALIANO 
2. Написать сценарий картинки с «эффектом приближения», т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height).
Это в универе такое задание? Скажите им, что они отстали от жизни и сейчас на js этого никто не делает.
Теперь по поводу вопроса.
Скажу сразу — этот скрипт в целом рабочий, как код.
1 2 3 4 5 6
$('img').width(90).hover(function(){ $(this).stop().animate({width: 150}); }, function(){ $(this).stop().animate({width: 90}); });
А теперь подумайте, почему же он не работает. В частности, что вернет ф-я $(‘img’) на 29-ой строке.
Регистрация: 24.10.2014
Сообщений: 200
Немного что-то изменил, но не совсем то, что хотел.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
HTML> HEAD> TITLE>Перестановка изображенийTITLE> meta charset="windows-1251"> script> function chan() { alert(Math.random()); var arr =[]; var result = document.getElementById('result'); //каждому изображению присвоил переменную,А потом передал в массив for (var i = 0; i document.getElementsByTagName('img').length - 1; i++) { var img = document.getElementsByTagName('img')[i]; arr.push(img.src); } result.src = arr[Math.floor(Math.random()*arr.length)]; } script> script src="http://code.jquery.com/jquery-latest.js"> script> script> $('img').width(90).hover(function(){ $(this).stop().animate({width: 150}); }, function(){ $(this).stop().animate({width: 90}); }); script> HEAD> BODY> script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> script> style type="text/css"> .st1 {width:150px;height:150px;} .st1 img{width:150px;height:150px;position:absolute;z-index:150;} .st1:hover {width:150px;height:150px;overflow:visible;} .st1:hover img{visibility:visible;position:absolute;z-index:150;} .st2 {width:150px;height:150px;} .st2 img{width:150px;height:150px;position:absolute;z-index:150;} .st2:hover {width:150px;height:150px;overflow:visible;} .st2:hover img{visibility:visible;position:absolute;z-index:150;} .st3 {width:150px;height:150px;} .st3 img{width:150px;height:150px;position:absolute;z-index:150;} .st3:hover {width:150px;height:150px;overflow:visible;} .st3:hover img{visibility:visible;position:absolute;z-index:150;} style> script type="text/javascript"> $(function(){ $('.img1').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); $(function(){ $('.img2').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); $(function(){ $('.img3').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); script> CENTER> H4>Галерея рисунковH4>br> div class="st1">div class="img1">IMG src="1.jpg" width="150" height="150" name="pic1" title="1">div> div class="st2">div class="img2">IMG src="2.png" width="150" height="150" name="pic2" title="2">div> div class="st3">div class="img3">IMG src="3.jpg" width="150" height="150" name="pic3" title="3">div> br> input type="button" value="Выбрать изображние" onClick="chan(this)"> br> IMG id="result" src="--> /--> CENTER> BODY> HTML>
Добавлено через 2 минуты
Спасибо, сейчас попробую.
Добавлено через 5 минут
Три картинки одна в одной по середине стоят, как мне их вдоль по горизонту поставить?
Тематическое планирование учебного материала
2. Введение в язык программирования JavaScript. Ввод и вывод данных. Переменные в языке JavaScript.
3. Использование операторов в языке JavaScript.
4. Использование функций в языке JavaScript.
5. Классы объектов языка JavaScript.
а. Встроенные классы объектов.
b. Пользовательские классы объектов.
c. Внешние классы объектов.
6. Использование массивов в языке JavaScript.
7. Работа с формами.
8. Работа с изображениями.
9. Разработка итогового проекта.
Контроль знаний, умений, навыков.
После изучения факультативного курса «Программирование на языке JavaScript» необходимо осуществить контроль полученных теоретических знаний и практических навыков работы.
Для проверки знаний по теоретической части курса можно использовать тест, который будет представлен в виде интерактивной формы (Приложение I), созданной с применением языка программирования JavaScript. Такой тест был разработан автором дипломной работы. Тест состоит из 40 заданий тестовой формы (Приложение II) с выбором одного правильного ответа. На ответы отводится 40 минут. Использование такой формы проверки позволит учителю: во-первых, проверить уровень знаний по теоретической части курса, во-вторых, продемонстрировать учащимся как полученные знания применяются на практике, в-третьих, сократит время, отводимое на проверку заданий тестовой формы.
Контроль знаний по практической части курса можно осуществить, анализируя выполненные учащимися проекты.
Содержание факультативного курса «Программирование на языке JavaScript»
Занятие 1. Основы объектно-ориентированного программирования.
Основополагающим понятием объектно-ориентированного программирования является понятие объекта. «Объект представляет собой конкретный опознаваемый предмет, единицу или сущность (реальную или абстрактную), имеющую четко определенное функциональное назначение в данной предметной области» [1].
С понятием объекта связаны три отличительных признака: состояние (state), поведение (behavior) и идентичность (identify).
Состояние объекта характеризуется перечнем всех свойств данного объекта и текущими значениями каждого из этих свойств. К свойствам относятся, например такие, как время, красота, цвет, эмоции (любовь или гнев). Для торгового автомата состояние определяется суммой денег, опущенных до нажатия кнопки выбора. Одним из свойств торгового автомата является способность принимать монеты.
Объект обладает целостностью, которая не должна, а, в действительности, не может быть нарушена. Объект может только менять состояние, вести себя, управляться и становиться в определенное отношение к другим объектам, но свойства, которые характеризуют объект и его поведение, остаются неизменными. Например, лифт характеризуется теми неизменными свойствами, что он может двигаться вверх и вниз, оставаясь в пределах шахты.
Поведение — это то, как объект действует и реагирует. Поведение объекта реализуется через совокупность операций, которые он может выполнить. Операцией называется определенное воздействие одного объекта на другой с целью вызвать соответствующую реакцию.
В объектно-ориентированных языках программирования операции, выполняемые над объектами, называются методами.
Рассмотрим торговый автомат. Мы можем сделать выбор, но поведение автомата будет зависеть от его состояния. Если мы не опустили в него достаточную сумму, скорее всего ничего не произойдет. Если же денег достаточно, автомат выдаст нам желаемое (и тем самым изменит свое состояние). Итак, поведение определяется выполняемыми над ним операциями и его состоянием.
Идентичность (индивидуальность) — это природа объекта. То, что отличает его от других объектов в конкретной области.
Итак, в каждый момент времени объект характеризуется присущим именно ему набором свойств (properties) и методов (methods) — операций, совершаемых над данным объектом, а также объект реагирует на события (events). Событие — это действие, распознаваемое объектом, после чего следует реакция со стороны объекта.
Возьмем, например, объект «Собака». Какими свойствами он может обладать? (порода, имя, цвет шерсти, цвет глаз, внешний вид, вес, наличие ошейника и т.д.). Свойства объекта в определенный момент времени приобретают из множества значений конкретное: порода — пудель, имя — Джек, цвет шерсти — белый, цвет глаз — коричневый, внешний вид — грязный, вес — 15 кг, наличие ошейника — да. Слева от знака тире указаны наименования свойств, справа — значения свойств. Если значение свойства нельзя изменить, то такое свойство называется постоянным, иначе оно называется переменным. Среди всех свойств особое место занимают логические свойства, т.е. такие свойства, которые принимают только два значения: True (истина) и False (ложь). Какие свойства в нашем примере являются постоянными, а какие переменными? (Постоянными свойствами являются свойства «порода» и «цвет глаз», остальные свойства являются переменными; имя для собаки можно придумать другое, шерсть перекрасить, собаку можно помыть, накормить, снять ошейник). Свойство «наличие ошейника» является логическим.
Какие методы (действия) могут быть у собаки? (Лаять, кусаться, грызть кость, сторожить, вилять хвостом). Как и всякий объект, собака может реагировать, а может и не реагировать на события.
Если положить перед собакой аппетитную косточку, то для нее возникнет событие «Кость». Поскольку у всех собак имеется «встроенный метод» — «грызть кость», то возникает соответствующая реакция: собака начинает ее грызть. Если же попытаться организовать событие «Ко мне!», то реакции может не последовать, поскольку собаки от рождения не обладают этим методом. Для того, чтобы собака могла распознавать данное событие, придется писать специальный «программный код», попросту говоря, дрессировать собаку.
По определению Г. Буча: «Объектно-ориентированное программирование — это методология программирования, которая основана на представлении программы в виде совокупности объектов, каждый из которых является реализацией определенного класса, а классы образуют иерархию наследования» [1].
Такой подход объективно обусловлен тем, что окружающий нас мир состоит их целостных объектов, которые обладают определенными свойствами и поведением. Ранее при использовании технологии структурного программирования предусматривалось «расчленение» объекта, описание его свойств отдельно от поведения.
В технологии ООП объекты сохраняют свою целостность, все свойства объекта и его поведение описывается внутри самого объекта.
С понятием объекта связано понятие класс. Объект обозначает конкретную сущность, определенную во времени и в пространстве, класс определяет лишь абстракцию существенного в объекте.
Абстракция — совокупность существенных характеристик некоторого объекта, которые отличают его от всех других видов объектов, таким образом, четко определяют особенности данного объекта с точки зрения дальнейшего рассмотрения и анализа.
В соответствии с определением применяемая абстракция реального предмета существенно зависит от решаемой задачи: в одном случае нас будет интересовать форма предмета, в другом — вес, в третьем — материалы, из которых он сделан и т.д.
Итак, класс — это некоторое множество объектов, имеющих одну структуру и поведение. Объект, принадлежащий классу, получив конкретные значения свойств, называется экземпляром.
К традиционным преимуществам ООП относятся инкапсуляция или скрытие (encapsulation), полиформизм (polymorphism) и наследование или повторное использование (reuse).
Объединения всех свойств предмета (составляющих его состояние и поведение) и ограничения доступа к реализации этих свойств получило название инкапсуляция.
Инкапсуляция позволяет в максимальной степени изолировать объект от внешнего окружения. Обращение к свойствам объекта не через его действия недопустимо. Тем самым принцип инкапсуляции существенно повышает надежность разрабатываемых программ.
Необходимость ограничения доступа предполагает разграничения двух частей в описании абстракции:
интерфейс — совокупность доступных извне элементов реализации абстракции (основные характеристики состояния и поведения);
реализация — совокупность недоступных извне элементов реализации абстракции (внутренняя организация абстракции и механизмы реализации ее поведения).
Для примера рассмотрим коробку передач в автомобиле. Она инкапсулирует данные о режиме работы двигателя, учитывая ускорение, уклон шоссе, положение ручки переключателя передач и т.п. У вас, как пользователя, есть только один способ воздействия на эту сложную инкапсуляцию: путем перемещения рукоятки переключения передач. Вы не можете воздействовать на коробку передач, например, с помощью сигнала поворота или дворников стекла. Следовательно, рукоятка переключения передач является четко определенным интерфейсом коробки передач. Но это еще не все: то, что происходит внутри коробки передач не влияет на объекты, расположенные вне ее. Например, с помощью коробки передач нельзя включить фары. Поскольку механизм коробки передач использует инкапсуляцию, десятки производителей могут изменять ее конструкцию по своему усмотрению. Однако с точки зрения водителя все они работают одинаково.
Объектно-ориентированная методология, так же как и структурная, преследует целью построение иерархического дерева взаимосвязей между объектами. Иерархия — упорядоченная система абстракций.
В структурном программировании целое разделяется на составные части, которые связываются между собой с помощью иерархической схемы, а в ООП иерархическая схема используется при наследовании.
Наследование — это такое отношение между объектами, когда один объект повторяет структуру и поведение другого.
Принцип наследования действует в жизни повсеместно и повседневно. Например, класс «Животное» имеет свойства «наличие головы», «наличие конечностей», методы «идти», «размножаться». Созданный на его основе класс «Птицы» наследует все свойства и методы, характерные животным, к которым добавляется свойство «наличие крыльев» и метод «умение летать».
В программировании принцип наследования позволяет создавать новые классы, повторно используя уже готовый исходный код и не тратя времени на его переписывание.
Еще один принцип, который используется в ООП, называется принципом полиформизма.
Полиформизм — это свойство различных объектов выполнять одно и тоже действие разными способами, т.е. некоторые свойства объектов, сохраняя название, изменяются по сути.
Полиформизм обеспечивает возможность задания различных реализаций некоторого единого по названию метода для классов различных уровней иерархии.
Например, действие «бежать» свойственно большинству животных. Однако каждое из них (лев, слон, черепаха, крокодил) выполняет его по-своему. В рамках ООП поведенческие свойства объекта определяются набором входящих в него методов. Изменяя алгоритм того или иного метода в потомках объекта, мы можем придавать этим потомкам отсутствующие у родителя специфические свойства. Полиформизм означает, что для различных родственных объектов можно задать множество способов в реализации одного и того же действия. Затем для каждого конкретного объекта составляется свой метод, который выполняет это действие непосредственно для данного объекта. Причем все эти методы могут иметь одно и тоже имя. При традиционном подходе к программированию, животных будет перемещать программист, вызывая для каждого животного и каждого действия свою подпрограмму. При объектно-ориентированном подходе, программист только указывает какому объекту, какое их присущих ему действий требуется выполнить и (для рассматриваемого примера) однажды описанные объекты-животные сами будут себя передвигать характерным для них способом, используя входящие в него методы. Действие «бежать» будет называться полиформическим, а многообразие форм проявления этого действия — полиформизмом.
Занятие 2. Введение в язык программирования JavaScript. Ввод и вывод данных. Переменные в языке JavaScript.
Понятие программы на языке JavaScript.
Язык программирования JavaScript — это язык написания сценариев, встраиваемых в Web-страницы. Язык JavaScript поддерживается такими браузерами, как Netscape Navigator и Microsoft Internet Explorer.
Программой на языке JavaScript называется сценарий (script).
Сценарий — это последовательность операторов, которая обрабатывается встроенным в браузер интерпретатором. Сценарии на языке JavaScript включаются в Web-страницу в виде исходного текста. Программа-интерпретатор работает совместно с исходным текстом, она разбирает каждую инструкцию исходного текста (интерпретирует ее) и немедленно исполняет.
Инструменты написания сценариев.
Для написания исходного текста сценария используется:
1. Текстовый редактор Windows Notepad.
2. Средства визуального проектирования. В качестве средств визуального проектирования используются HTML-редакторы, позволяющие вставлять в Web-страницы сценарии. К таким средствам относятся Microsoft FrontPage и Macromedia Dreamweaver.
Использование сценариев языка JavaScript может быть осуществлено:
1) за счет включения блока SCRIPT в HTML-код. Для включения сценариев, написанных на языке JavaScript, в HTML-код используется блок SCRIPT. Назначение данного блока — указать браузеру, что содержимое блока, заключенное между открывающим и закрывающим тегами, является сценарием.
Этот блок вставляется внутри блока HEAD, также может вставляться внутри блока BODY, в параметре language тега необходимо указать используемый язык сценариев.
Операторы языка JavaScript;
2) за счет подключения к Web-странице внешнего файла с расширением .js.
Сценарий, написанный на языке JavaScript, может содержаться в отдельном файле. Это удобно, например, когда один и тот же сценарий используется на нескольких страницах. Для этого в текстовом файле с расширением .js записывается сценарий без блока SCRIPT и в месте вызывающем этот сценарий HTML-страницы записывается блок SCRIPT с указанием внешнего файла:
3) за счет встроенного сценария.
Встроенный сценарий — это сценарий, помещенный в HTML-теги web-страницы. Встроенный сценарий содержится в теле страницы, его не нужно помещать в блок SCRIPT — достаточно записать событие onclick в соответствующем теге.
Данные, которые хранятся в компьютере и подвергаются обработке, можно отнести к различным типам.
Строковый или символьный тип данных (string). Строка — связанный набор символов, включающий в себя буквы, знаки препинания и цифры. Строки, вставляемые в сценарий, написанные на языке JavaScript, заключаются в двойные или одинарные кавычки, например:
Строка «», не содержащая ни одного символа (даже пробела), называется пустой. При этом строка, содержащая хотя бы один пробел (например, » «), не пуста.
Числовой тип данных (number). Данные числового типа — это число, последовательность цифр, перед которой может быть указан знак числа (+ или -). Целая и дробная части числа разделяются точкой. Числа записываются без кавычек.
В языке JavaScript используются два типа чисел. Это целые числа (integer) и числа с плавающей точкой (floating-point number). Целые числа находятся в диапазоне от -10-308 до 10308. Числа с плавающей точкой представляют собой числа с дробной десятичной частью (например, 3.141596), либо числа в экспоненциальной форме (например, 3.76е2).
Логический (булевский) тип данных (boolean). Данные логического типа могут принимать одно из двух значений: true или false. Эти значения записываются без кавычек. Значение true означает истину, значение false — ложь.
Особые типы данных: числа, неопределенные и неопределяемые выражения. К ним относятся числовые значения:
— положительный или отрицательный нуль,
— несуществующее число (not a number — NaN).
Бесконечностью считается значение, превышающее 10308. под несуществующим числом понимается результат бессмысленной математической операции (например, деления на нуль).
Имеются еще два специальных типа данных:
Неопределенный тип данных свидетельствует об отсутствии какого бы то ни было значения. Неопределяемый тип данных чаще всего является тем же, что и неопределенный тип данных, или свидетельствует о недочетах сценария.
Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Сообщение представляет собой строковый или числовой тип данных, переменную или выражение.
Синтаксис применения метода alert имеет вид:
Пример сценария с использованием метода alert имеет вид:
Открыв файл в браузере получим соответствующее окно (рис.1).
Рис.1. Окно предупредительных сообщений, cозданное методом alert в браузере Microsoft Internet Explorer
Метод alert можно использовать для вывода промежуточных и окончательных результатов программ при их отладке. При этом вы можете вывести результат вычисления какого-либо выражения и приостановить дальнейшее выполнение работы программы до тех пор, пока не щелкните на кнопку ОК. При формировании строковых данных для их последующего отображение используются служебные символы: — новая строка, — табуляция, f — новая страница, — возврат каретки.
Данный метод позволяет вывести диалоговое окно с сообщением и двумя кнопками — ОК и Отмена (Cancel).
Синтаксис применения метода confirm имеет вид:
Пример сценария с использованием метода confirm имеет вид:
confirm («Что вы выбираете?»);
Открыв файл в браузере получим соответствующее окно (рис.2).
Рис.2. Окно подтверждения, созданное методом confirm в браузере Microsoft Internet Explorer
Данный метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true; если же он щелкнул на кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обработать в программе и создать эффект интерактивности.
Данный метод позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. В этом окне предусмотрены две кнопки: ОК и Отмена.
Синтаксис применения метода prompt имеет вид:
prompt (сообщение, значение_поля_ввода_данных);
Параметры метода prompt не являются обязательными. Если их не указывать, то будет выведено окно без сообщения, а в поле ввода данных будет выведено значение по умолчанию — undefined. Для того, чтобы не выводилось значение по умолчанию, необходимо поставить в качестве значения второго параметра пустую строку «».
Пример сценария с использованием метода confirm имеет вид:
prompt («Введите Ваше имя», «»);
Открыв файл в браузере получим соответствующее окно (рис.3).
Рис.3. Окно запроса, созданное методом prompt в браузере Microsoft Internet Explorer
Данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных. Если пользователь щелкнет на кнопке ОК, то метод то возвращается значение true; если же он щелкнет на кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обработать в программе и создать эффект интерактивности.
Переменная — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария, написанного на языке JavaScript. Данные, сохраняемые в переменной, называют значениями этой переменной. Переменная имеет имя — последовательность букв, цифр и символа подчеркивания без пробелов и знаков препинания, начинающаяся обязательно с буквы или символа подчеркивания.
Примеры правильных имен переменных: myFamily, my_adress, _x, tel412.
Примеры неправильных имен переменных: 512group, my adress, tel:412.
Язык JavaScript является регистрозависимым. Это означает, что изменение регистра символов (с прописных на строчные и наоборот) в имени переменной приводит к другой переменной. Например: variable, Variable и variable — различные переменные.
Создать переменную в сценарии можно следующими способами:
1. С помощью оператора присвоения значений в формате:
2. С помощью ключевого слова var в формате:
В этом случае созданная переменная не имеет никакого значения, но может его получить в дальнейшем с помощью оператора присвоения.
3. С помощью ключевого слова var и оператора присвоения в формате:
var имя_переменной = значение
var myName = «Иван»
Строка кода программы с ключевым словом var задает инициализацию переменной и для каждой переменной используется один раз. Тип переменной определяется типом значения, которое она имеет. В отличие от многих других языков программирования, при инициализации переменной не нужно описывать ее тип. Переменная может иметь значения различных типов и неоднократно их изменять.
Одно ключевое слово var можно использовать для инициализации сразу нескольких переменных, как с оператором присвоения, так и без него. При этом переменные и выражения с операторами присвоения разделяются запятыми.
var name = «Вася», adress, x = 3.14
Глобальные и локальные переменные
Глобальные переменные — это переменные, объявленные в коде программы на внешнем уровне, т.е. вне определений функции. К глобальным переменным можно обратиться из любого участка кода программы, в том числе и из определений функции.
Локальные переменные — это переменные, определенные внутри тела функции, и они видимы только внутри тела функции. Можно назвать локальную и глобальную переменные одним именем, но они никакого отношения друг к другу иметь не будут.
var bonus; /* Это глобальная переменная. Она видна во всем файле, а не только в этом блоке.*/
var sum; // Это локальная переменная, видна только в функции ShowBonus().
bonus = . // Присвоение значения глобальной переменной.
var sum; // Это локальная переменная, видна только в функции CalcBonus().
bonus = . /* Это присвоение значения глобальной переменной. Переменная
видна в этом скриптовом блоке, хотя описана в другом.*/
Практическая работа № 1. «Создание сценариев. Ввод и вывод информации в языке JavaScript. Управление данными с помощью переменных»
1*. Создать шаблон HTML-страницы — текстовый файл, который содержит блок HTML, блок TITLE, блок HEAD, блок SCRIPT, блок BODY.
2*. Напишите сценарий, который позволяет вывести на экран два окна предупредительных сообщений с созданными вами сообщениями.
3*. Напишите сценарий, который позволяет вывести на экран результат следующих вычислений:
4*. Используя готовый сценарий задания № 2, создайте внешний файл .js и подключите его к web-странице.
5*. Напишите сценарий, который позволяет вывести окно подтверждения с созданным вами сообщением. Добавьте к web-странице метод confirm несколько раз и посмотрите, каким будет результат.
6*. Напишите встроенный сценарий, который позволяет вывести на экран окно запросов с созданным вами сообщением. Встроенный сценарий разместить в теге абзаца.
7**. Напишите сценарий, в котором объявляются две переменных, имеющие разный тип данных и на экран выводятся значения переменных.
8*. Найдите ошибки в следующих примерах, ответы сохранить в текстовом файле:
var msg1 = «Привет!», num1 = 32;