'

ЯЗЫК JAVASCRIPT

Понравилась презентация – покажи это...





Слайд 0

Троицкий Д.И. Интернет-технологии 1 ЯЗЫК JAVASCRIPT Лекция 10 Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing Systems


Слайд 1

Троицкий Д.И. Интернет-технологии 2 Технология Java включает две составляющих: одноименный язык программирования и платформу Java, которая, в свою очередь, состоит из виртуальной машины Java (Java VM) и интерфейса прикладного программирования (Java API). Исполняемый модуль для виртуальной машины Java именуется байт-кодом (или иногда J-кодом). Язык JavaScript поддерживается всеми современными браузерами. Java-апплет представляет собой исполняемый код для так называемой виртуальной машины Java, встроенной в браузер. Недостаток программ для любой виртуальной машины – низкая производительность.


Слайд 2

Троицкий Д.И. Интернет-технологии 3 С помощью языка программирования Java можно создавать программы двух типов: приложения (applications) и апплеты (applets). Java-приложения представляют собой полнофункциональные программы, которые выполняются под управлением виртуальной Java-машины, которая, в свою очередь, работает под управлением операционной системы. Java-апплет есть байт-код для Java-машины, которая работает под управлением браузера. Для помещения апплета на Web-страницу разработчик сайта должен: подготовить его байт-код с помощью какого-либо средства разработки, разместить файл с байт-кодом в каталоге Web-сервера, указать его URL в тексте разрабатываемой страницы в специальном теге <applet>. Браузер клиента по завершению загрузки страницы с апплетом запускает свою виртуальную машину, которая начинает выполнение апплета. Апплет не имеет возможности доступа к локальным ресурсам клиентского компьютера.


Слайд 3

Троицкий Д.И. Интернет-технологии 4 Все операции, которые можно исполнять в программе на JavaScript, описывают действия над объектами, которыми являются элементы рабочей области браузера (окно, документ, статусная строка…) и контейнеры языка HTML. ИМЕЕТСЯ: объекты с набором свойств и методов, обычные функции, больше похожие на процедуры из традиционных языков программирования, события. НЕТ: создаваемых программистом классов объектов, наследования в JavaScript.


Слайд 4

Троицкий Д.И. Интернет-технологии 5 Cкрипт включается в HTML-документ с помощью тега <script>: <script> <script language = “JavaScript”> <! - - ТЕЛО СКРИПТА // - - > </script> JavaScript-код может вставляться в элемент <BODY>. Исполняется такой сценарий сразу после загрузки web-документа, например: <script type="text/javascript"> {document.write("Эту строку вывел сценарий")} </script>


Слайд 5

Троицкий Д.И. Интернет-технологии 6 JavaScript-код можно вставлять в элемент <HEAD>. Такой сценарий запускается в ответ на какое-либо событие, генерируемое системой или пользователем. Например: <HTML> <HEAD> <TITLE> Сценарий JavaScript </TITLE> <script type="text/javascript"> function wrt() {document.write("Эту строку вывел сценарий")} </script> </HEAD> <BODY> <INPUT type="button" value="Вывести строку" onClick="wrt()"/> </BODY> </HTML>


Слайд 6

Троицкий Д.И. Интернет-технологии 7 Внешний сценарий также может запускаться и сразу после загрузки web-документа, или по какому-либо событию. JavaScript-код можно поместить в отдельном файле с расширением .js. Далее в разделе <HEAD> следует указать адрес этого файла следующим образом: <script type='text/javascript' src='wrt_str.js'> </script> Сценарий можно разместить и непосредственно в обработчике события, например: <INPUT type="botton" value="Вывести строку" onClick="document.write("Эту строку вывел сценарий")"/>


Слайд 7

Троицкий Д.И. Интернет-технологии 8 Типы данных в JavaScript


Слайд 8

Троицкий Д.И. Интернет-технологии 9 Переменные в JavaScript, как и в Pascal, задаются с помощью ключевого слова var: var a = 27; JavaScript является языком со свободной типизацией. Одной и той же переменной можно присваивать различные типы данных: var a = 27; a = 15.5; a = "String 1"; В Java предусмотрены два способа включения комментариев: // Это однострочный комментарий /*а это много - строчный комментарий*/


Слайд 9

Троицкий Д.И. Интернет-технологии 10 Арифметические действия Часть операций (++, --) являются унарными. К ним относятся префиксное и постфиксное возрастание ++; префиксное и постфиксное уменьшение --, унарный плюс; унарный минус.


Слайд 10

Троицкий Д.И. Интернет-технологии 11 Оператор присваивания


Слайд 11

Троицкий Д.И. Интернет-технологии 12 Логические операции Для конкатенации (объединения) строк используется оператор +: var a = "a" + "b" + "c"; Переменная a будет содержать строку "abc".


Слайд 12

Троицкий Д.И. Интернет-технологии 13 Функция (function) - это группа операторов, предназначенных для определенной цели и объединенных под общим именем. Функция имеет следующий общий вид: function имяфункции([аргументы]) { операторы; } Функции и события Функции автоматически запускаться на выполнение не могут.


Слайд 13

Троицкий Д.И. Интернет-технологии 14 Указание имени функции непосредственно в блоке SCRIPT: <script language="JavaScript"> // вызов функции yourMessage(); // описание функции function yourMessage() { alert("Наша первая функция"); } </script> Функции в языке JavaScript могут вызываться несколькими способами. Одну функцию можно вызывать из другой, но для "запуска" вcего процесса обычно применяются события.


Слайд 14

Троицкий Д.И. Интернет-технологии 15 Самые нужные события: Событие onLoad. Это событие происходит после загрузки страницы в окне браузера. Оно считается состоявшимся только после полного завершения загрузки всей страницы, включая изображения. Событие, происходящее при выгрузке страницы (переходе на другую страницу или закрытии окна браузера), называется onUnload. Событие onClick. Это событие происходит после щелчка мышью в определенном месте страницы. Множество элементов страницы (гиперссылки, изображения, кнопки и пр.) могут реагировать на событие onClick. Событие onMouseover. Это событие происходит после наведения курсора мыши на определенный элемент страницы. Событие onMouseover можно связать практически с любым объектом Web-страницы (текстом, изображением, кнопками, гиперссылками и т.д.). Событие onMouseout. Это событие происходит в тех случаях, когда курсор мыши отводится от объекта.


Слайд 15

Троицкий Д.И. Интернет-технологии 16 Пример функции, выводящей текущее время: function announceTime() { //get the date, the hour, minutes, and seconds var the_date = new Date(); var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds(); var the_time = the_hour + ":" + the_minute + ":" + the_second; alert("Время: " +the_time); } Свяжем вызов данной функции с событием onMouseOver абзаца (тег <p>): <p onMouseover="announceTime();">Который час?</p> Теперь достаточно подвести курсор к фразе "Который час?" – и выскочит окошко с текущим временем.


Слайд 16

Троицкий Д.И. Интернет-технологии 17 Объекты и массивы (всегда динамические) создаются с помощью оператора new. Нумерация элементов массива начинается с нуля. В JavaScript допускается возможность хранить различные типы данных в одном массиве: var a = new Array(); a[0] = 8; a[1] = 4.9; a[2] = "String 1"; Массивы в JavaScript С помощью JavaScript можно так же имитировать и многомерные массивы: var a = new Array(); a[0] = new Array(); a[0][0] = "1,1"; a[0][1] = "1,2"; a[1] = new Array(); a[1][0] = "2,1"; a[1][1] = "2,2";


Слайд 17

Троицкий Д.И. Интернет-технологии 18 Для работы с массивами в JavaScript применяются методы: Метод join(). Метод join() позволяет объединить элементы массива в одну строку. Он является обратным методу split(), который применяется к объектам типа "текстовая строка". Например: b = "http://intuit.ru/help/index.html"; b = split('/'); Получили массив b: b[0]=http: b[1]= b[2]=intuit.ru b[3]=help b[4]=index.html Объединили элементы массива b обратно в строку: l=b.join("/"); Получили в результате: http://intuit.ru/help/index.html


Слайд 18

Троицкий Д.И. Интернет-технологии 19 Метод reverse(). Метод reverse() применяется для изменения на противоположный порядка элементов массива внутри массива. Метод sort(). Метод sort() позволяет отсортировать элементы массива в соответствии с некоторой функцией сортировки, чье имя используется в качестве аргумента метода. Пример: Предположим, массив натуральных чисел упорядочен по возрастанию: a = new Array(1,2,3,4,5); Упорядочим его по убыванию: a.reverse(); Результат: a[0]=5 a[1]=4 a[2]=3 a[3]=2 a[4]=1 Например: a = new Array(1,6,9,9,3,5); function g(a,b) { if(a > b) return 1; if(a < b) return -1; if(a==b) return 0; } b = a.sort(g); В результате выполнения этого кода получим массив следующего вида: b[0]=1 b[1]=3 b[2]=5 b[3]=6 b[4]=9 b[5]=9


Слайд 19

Троицкий Д.И. Интернет-технологии 20 Ввод данных можно осуществить с помощью функции prompt, а вывод - с помощью функции alert. Первый аргумент функции prompt является строкой, которая будет использована в качестве приглашения пользователю, а второй – значением по умолчанию. Если не предполагается использовать значение по умолчанию, то необходимо задать пустую строку "". Так как функция prompt возвращает строку, для того, чтобы преобразовать ее в число, используются функции parseFloat и parseInt, преобразующие текст в переменную вещественного и целого типа соответственно. Например: <html> <head> <title>Script</title> </head> <body> <h1>Script</h1> <script language = "JavaScript"> <!-- var a = prompt("Input A: ", 10); var b = prompt("Input B: ", ""); a = parseFloat(a); b = parseFloat(b); var c = a + b; alert(c); //--> </script> </body> </html>


×

HTML:





Ссылка: