1 / 62

ВЕБ-ПРОГРАММИРОВАНИЕ

ВЕБ-ПРОГРАММИРОВАНИЕ. JAVASCRIPT. Каскадная модель ЖЦ ИС. ЭТАПЫ СОЗДАНИЯ САЙТА. РЕАЛИЗАЦИЯ. РАЗРАБОТКА ПРОТОТИПА ДИЗАЙНА ДИЗАЙН ЭЛЕМЕНТОВ КОДИРОВАНИЕ ПРОГРАММИРОВАНИЕ. Некоторые технологии, использующие Web. HTML, XML, XHTML. Форматы представления данных. CSS.

laasya
Download Presentation

ВЕБ-ПРОГРАММИРОВАНИЕ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ВЕБ-ПРОГРАММИРОВАНИЕ JAVASCRIPT

  2. Каскадная модель ЖЦ ИС ЭТАПЫ СОЗДАНИЯ САЙТА

  3. РЕАЛИЗАЦИЯ • РАЗРАБОТКА ПРОТОТИПА ДИЗАЙНА • ДИЗАЙН ЭЛЕМЕНТОВ • КОДИРОВАНИЕ • ПРОГРАММИРОВАНИЕ

  4. Некоторые технологии, использующие Web HTML, XML, XHTML Форматы представления данных CSS Описание расположения и формы элементов страницы Javascript Программирование на странице клиента Java-сервлеты Программирование на сервере ASP Динамическое создание страниц на сервере AJAX Asynchronous Javascript and XML – Асинхронное динамическое изменениесодержания страницы SQL Язык запросов к базам данных

  5. ТЕХНОЛОГИИ, РАБОТАЮЩИЕ НА СТОРОНЕ КЛИЕНТА Особенности: Загружаются вместе с веб-страницей и работают на пользовательском компьютере => Быстрая реакция на действие пользователя Назначение: • Создание визуальных эффектов: ролловеров, эффектов появления, слайд-шоу, свертываемых структур • Проверка правильности ввода данных, подсчет итогов Технологии: Языки написания скриптов JavaScript, VBScript

  6. ТЕХНОЛОГИИ, РАБОТАЮЩИЕ НА СТОРОНЕ СЕРВЕРА Особенности: Работают на стороне сервера. • Принимают и обрабатывают запросы пользователя. • Динамически формируют код веб-страницы, отправляемой на клиентский компьютер. • Автоматически изменяют код содержимого сайта на сервере. Назначение: Обработка анкет, запросов; Гостевые книги, чаты, форумы, электронные магазины; Технологии:PHP, ASP, ASP.NET, CGI, Java

  7. События DHTML onclick - щелчок мыши ondblclick – дв. щелчок мыши onmouseover – наведение мыши onmouseout – отведение мыши onkeypress – нажатие клавиши onkeydown – удерживание клавиши onkeyup – отпускание клавиши

  8. JAVASCRIPT ВВЕДЕНИЕ

  9. Краткое введение в Javascript Javascriptэто: • Интерпретируемый язык. Его интерпретатор обычно встроен в браузер. • Основное назначение – определять «динамическое» поведениестраниц при загрузке (формирование страницы перед ее открытием)и при работе пользователя со страницей (UI элементы). • Текст на Javascriptможет быть вложен в HTML-страницу непосредственно или находиться в отдельном файле (как CSS). • Похож на языки Javaи C#синтаксически, но сильно отличается от нихпо внутреннему содержанию.

  10. Характеристика Javascript Некоторые важнейшие характеристики Javascript: • Язык объектно-ориентированного программирования. Объекты в языкеимеют «тип», «атрибуты» и «методы» "John,Jane,Paul,Michael".split(",").length • Переменные не имеют заранее заданного типа, то есть в разныемоменты времени могут содержать значения разных типов var number = 25; number = (number < 0); number = "25"; • Типы объектов могут быть: number, string, function, object, undefined. Оператор typeofпозволяет «вычислить» тип объекта. typeof 25 == "number" typeof null == "object"

  11. Основные встроенные типы Есть набор встроенных «классов», порождающих «объекты», различающиеся набором атрибутов и методов. Программисты могутдинамически изменять поведение этих «классов» и создавать своисобственные. Каждый «класс» является объектом, у которого есть«прототип», определяющий набор атрибутов и методов у всех вновьсоздаваемых объектов этого класса. Типы, встроенные в язык, это: - Number : 64-х-разрядные числа с плавающей точкой. - String : строки с символами в формате Unicode. - Array : массивы с переменными границами. - Function : Функции. Каждая функция, кроме того, может служить конструктором объекта. - Boolean, Date, Math, RegExp : логические значения, даты,…

  12. Вставка скрипта. 1. В коде HTML-страницы <SCRIPT Language=“Javascript”> … </SCRIPT> 2. Внешний файл. <SCRIPT language=javascript src=“имя файла"> </SCRIPT>

  13. Обращение к параметру или аттрибуту CSS. Объект.Свойство– обращение к параметрутэга Объект.style.Аттрибут – обращение к аттрибуту CSS Пример. image1.src=“sun.gif”; F1.T1.value=“Privet”; Win2.document.image1.src=“sun.gif”; paragraf1.style.textAlign=“center”; D1.style.display=“block”;

  14. DOM – Объектная модель документа window document … др. объекты документа form select text button …др. элементы форм option

  15. Некоторые сведения о синтаксисе Описание переменных: var count = 25, msg = 'Сообщение об ошибке'; var nullVar; // получает начальное значение null Операции такие же, как в Java и C#, но более широко используется преобразование типов + - * / % ++ -- = += -= *= /= %= == != > < >= <= && || ! 2 + '3' == '23', но 2 + 3 == 5 Многие операторы очень похожи на соответствующие операторы Java и C#,но могут иметь некоторые отличия в семантике. for (var i = 0; i < 100; ++i) { ... } if (x * y < 100) { ... } else { ... } try { ... } catch (e) { ... } finally { ... }

  16. Объекты, встроенные в браузеры При программировании можно использовать ряд встроенных объектов.Основные из них это: - window : представляет «глобальный контекст» и позволяет работать с атрибутами и методами окна. - document : загруженная страница со своей структурой элементов. - navigator : объект, представляющий браузер и его свойства. - location : характеристики текущего URL (порт, хост и т.п.). - объекты, представляющие элементы различных типов в HTML-странице, такие как <body>, <link>, <img>и т.п. - события (events), возникающие от действий пользователя, например, нажатие кнопки мыши (click), загрузка новой страницы (load) и т.д.

  17. Включение Javascript в HTML-страницу Фрагменты кода можно включать в заголовок или тело HTML-документа. Кроме того, можно разместить код в отдельном файле, а в HTML-страницеразместить ссылку на этот файл. <html> <head> <script type="text/javascript"> ... </script> <script type="text/javascript" src="scripts/myscript1.js/> <head> <body> <script type="text/javascript"> ... </script> <script type="text/javascript" src="scripts/myscript2.js/> </body> </html> Код, ссылки на который размещены в заголовке, просто подсоединяетсяк странице и может быть использован, например, для определенияреакций на пользовательские события. Код, ссылки на который размещены в теле, исполняется при загрузке страницы и может непосредственно использоваться для формирования содержания страницы во время загрузки.

  18. Реакция на событие • Код в обработчике события Пример. <IMG SRC=‘sun.gif’name=“img1” onmouseover=‘img1.src=“moon.gif”’ onmouseout=‘img1.src=“sun.gif”’> • Использование функций <IMG SRC=‘sun.gif’ onclick=‘alert(“Hello, world”)’>

  19. Создание и использование функций function имя функции(список параметров) { Операторы } ------------------------- return false; //Выход из функции и возврат результата -------------------------------

  20. Возвращение результата 1. Вывод Сообщения. alert(результат) 2. Изменение свойства элемента. F1.T3.value= результат 3. Изменение области( InnerHTML). d1.innerHTML= результат 4. Вывод в новом документе document.write(результат)

  21. Примеры создания и вызова функций Создание function chimage(obj,pict) {obj.src=pict} --------------------------------------------- Вызов в обработчике события <IMG SRC=‘sun.gif’name=“img1” onmouseover=‘chimage(img1,“moon.gif”)’ onmouseout=‘chimage(img1,“sun.gif”)’> ---------------------------------------- Вызов из скриптаchimage(img1,“moon.gif”); ------------------------------- Вызов по ссылке: <A href=“javascript:chimage(img1,’moon.gif’)”>Смена рисунка</A>

  22. JAVASCRIPT СИНТАКСИС И УПРАВЛЯЮЩИЕ КОНСТРУКЦИИ

  23. Операции, операторы, переменные Операции, операторы \\ комментарий ; разделение операторов в одной строке {} начало и конец блока = оператор присвоения + - * / арифметические операции ++ -- += -= Примеры: a++;b-- \\a=a+1;b=b-1 c+=10; \\ c=c+10

  24. Переменные var имя переменной Основные типы данных: Число, Строка, Логический тип и Объект. var a a=10; b=0.3;c=“ddd”; d=c+a+5; \\d=“ddd105” e=c+(a+5); \\e=“ddd15”

  25. Функциипроверки и преобразования типов • isNaN(значение) – проверка, является ли значение числом • parseInt(значение) преобразование к целому числу • parseFloat(значение) преобразование к вещественному числу • -- Примеры. x=parseInt(F1.T1.value)

  26. Объекты языка • Array • String • Date • Math

  27. Массивы var cn=new Array(3); --- cn[0]=“Russia”;cn[1]=“USA”;cn[2]=“China”; -- Параллельные массивы var cp=new Array(3); cp[0]=“Moscow”;cp[1]=“Washington”; cp[2]=“Bejing”; --- var n=0; var cn=new Array(); cn[n++]=“Russia”;cn[n++]=“USA”;cn[n++]=“China”;

  28. String var s=new String(); Проверка вхождения подстроки в строку: indexOf() Пример. var s=new String() s="индустриализация” i=s.indexOf("@") \\ i=-1 i=s.indexOf("н") \\i=1

  29. Условный оператор if (условие){операторы} if (условие){операторы} else {операторы} Логические операции == равно; != не равно; > больше; < меньше; >= больше или равно; <= меньше или равно Логические операторы || или;&& и Примеры. if (a<b) {min=a} else {min=b}

  30. Проверка корректности введенных данных • Проверка на пустоту. if (str1==””) {alert(“Введите данные”); return false} • Проверка на вхождение подстроки if ((s.indexOf("@")==-1)||(s.indexOf(".")==-1)) {alert ("e-mail введен неправильно"); return false} • Проверка, является значение числовым if (isNaN(F1.T1.value)||isNaN(F1.T2.value)) {alert ("Данные должны быть числовыми"); return false} else {p1=parseInt(F1.T1.value); p2=parseInt(F1.T1.value); …} • Проверка на вхождение числа в диапазон if (x1<0 || x1>100) {alert ("Значение должно быть в диапазоне от 0 до 100"); return false}

  31. Циклы Синтаксис. for (нач. выр. ; условие продолжения; выр. обновления) { операторы }

  32. Примеры циклов 1. Нахождения суммы всех чисел от 1 до 9. s=0 for (var i=1; i<=9; i++) {s+=i} 2. Нахождение минимального элемента массива A. imin=0 for (var i=1; i<=N; i++) {if (A[i]<A[imin]) {imin=i}} alert ("imin ="+imin+"; min="+A[imin])

  33. Два простых примера Метод document.writeиспользуется для непосредственного включенияHTML-текста в содержимое страницы, например, можно сгенерироватьдлинный текст в параграфе: <body><p> <script type="text/javascript"> for (var i = 0; i < 100; ++i) { document.write("Hello, world! "); } </script> </p></body> helloworld.html

  34. Два простых примера(продолжение) Во втором примере датчик случайных чисел используется для генерациислучайной ссылки (из заданного набора): <body> <p> <script type="text/javascript"> var rand = Math.random(); // в диапазоне: [0, 1) var numb = Math.floor(rand*10); var image = "images/image" + numb + ".jpg"; var insert = "<img class=\"floatRight\" src=\"" + image + "\" alt=\"Фотография цветочка\"/>"; document.write(insert); </script> </p> </body> randomPicture.html

  35. Тип String Строки заключаются либо в апострофы, либо в двойные кавычки var slogan = "Don't be evil!"; var image ='<img class="to-right" src="myphoto.jpg"/>'; escape-последовательности: \\ \' \" \t \n Операции над строками: + < > == != "2" + "3" "23" "a" == "A" false 5 == "5" true "10" < "5" true 5 === "5" false 10 < "5" false 5 + "5" "55" Атрибут строки: length – длина строки. "abc".length == 3 Преобразования типов: String(n) Number(s) String(10) < "5" == true Number('3.' + '14') == 3.14

  36. Стандартные методы объектов типа String charAt, indexOf, lastIndexOf, replace, split, substr, substring, toLowerCase, toUpperCase Примеры: "Google".charAt(3) "g" "Google".indexOf("o") 1 "Google".lastIndexOf("o") 2 "Google".replace("o", "oo") "Gooogle" "Google".replace(/o/g, "oo") "Goooogle" "Google".split("o") ["G","","gle"] "Google".substr(1,3) "oog" "Google".substring(1,3) "oo" "Google".toLowerCase() "google" "Google".toUpperCase() "GOOGLE"

  37. Тип Number Числа – это 64-х-разрядные двоичные числа с плавающей точкой. Number.MIN_VALUE Number.MAX_VALUE Number.NaNNumber.POSITIVE_INFINITYNumber.NEGATIVE_INFINITY 5e-3241.7976931348623157e+308 NaNInfinity -Infinity Операции над числами: + - * / % < > == != 3.14 % 2 1.14 Функции преобразования: parseInt, parseFloat, Number, toString parseInt("3.14") 3 parseFloat("*3.14") NaN Number("3.xaxa") NaN 3.14.toString() "3.14" isNaN(3.14 / 0) false isNaN(0 / 0) true

  38. Тип Boolean Стандартные логические значения – trueи false. Однако в качестве условий можно использовать любое значение. "Истинные" условия: "Ложные" условия: if ("") if (2 < 5) if (0) if (25) if (null) if ('Google могуч и ужасен') Логические условия используются в условных операторах и операторахциклов. if (x < y) { z = x; } else { z = y; } while (x < 100) { x = x * 2; n++; } do { x = Math.floor(x / 2); n++; } while (x > 0); for (var y = 0, x = 0; x < 100; ++x) { y += x; }

  39. Тип Date Объекты типа Dateсодержат дату в виде числа миллисекунд, прошедших с 1 января 1970 г. Диапазон от -108 до 108 дней от 1 января 1970 г. Конструкторы: var now = new Date(); // сейчас var january1st1970 = new Date(0); // дата в миллисекундах var gagarin = new Date(1961, 3, 12); var newYear = new Date("January 1, 2009"); Методы, применимые для работы с датами: getDate, getMonth, getFullYear, getTime, getTimezoneOffset, setDate, setFullYear,… function DaysToDate(day, month) { var now = new Date(), year = now.getFullYear(); var bd = new Date(year, month-1, day); var fullDay = 24 * 60 * 60 * 1000; var diff = Math.ceil((bd - now) / fullDay); return diff < 0 ? diff + 365 : diff; } todate.html

  40. Сообщения, выдаваемые в popup-окнах Три стандартные функции используются для генерации сообщенийв popup-окнах: alert, confirm, prompt. alert('Вы просрочили платеж!'); confirm('Вы этого хотите?'); Выдает trueили false var name = prompt('Как Вас зовут?', 'Никак', 'Вопросик...'); Выдает введенную строкуили null

  41. События и реакции на них Имеется большое количество событий, которые можно разделить наследующие классы: - события от мыши (click, dblclick, mousedown,…); - события от клавиатуры (keypress, keydown,…); - события от элементов ввода (focus, submit, select,…); - события страницы (load, unload, error,…); Один из способов программирования состоит в определении реакции на события непосредственно в описании элемента, например: <p>День независимости России <span style="color: blue; text-decoration: underline;" onclick= "alert('Осталось ' + DaysToDate(12, 6) + 'дней');">12 июня</span>. </p> holidays.html Недостаток этого способа: javascript-текстопять смешивается с содержанием страницы.

  42. Тип Array Существует несколько способов создания массива: var holidays = ["1 января", "7 января", "23 февраля"]; var holidays = new Array("1 января", "7 января", "23 февраля"); var holidays = new Array(3); holidays[0] = "1 января"; holidays[1] = "7 января"; holidays[2] = "23 февраля"; Атрибут массива: length – длина массива. var myArray = new Array();myArray[2] = new Date(2008,2,23); myArray[5] = new Date(2008,5,9); myArray.length == 6 ?

  43. Тип Array (продолжение) Методы, определенные для работы с массивом:concat, join, pop, push, shift , unshift, slice var names = ["Петя", "Вася"]; names = names.concat(["Сережа", "Наташа"], ["Оля", "Люба"]); names == ["Петя", "Вася", "Сережа", "Наташа", "Оля", "Люба"] var s = names.join(';'); s == "Петя;Вася;Сережа;Наташа;Оля;Люба" var e = names.pop(); e == "Люба" names == ["Петя", "Вася", "Сережа", "Наташа", "Оля"] var l = names.push("Саша"); l == 6 names == ["Петя", "Вася", "Сережа", "Наташа", "Оля", "Саша"] shift иunshift – точно так же, как popи push, но с началом массива. names = names.slice(1, 4); names == ["Вася", "Сережа", "Наташа", "Оля"]

  44. Тип Array (продолжение) Еще методы, определенные для работы с массивом:reverse, sort, splice, toString var names = ["Вася", "Сережа", "Наташа", "Оля"]; names.reverse(); names == ["Оля", "Наташа", "Сережа", "Вася"] names.sort(); names == ["Вася", "Наташа", "Оля", "Сережа"] var a = [5, 3, 40, 1, 10, 100].sort(); a == [1, 10, 100, 3, 40, 5] var a = [5, 3, 40, 1, 10, 100].sort(function(a,b){return a-b;}); a == [1, 3, 5, 10, 40, 100] names.splice(1, 2, "Саша", "Таня", "Нина"); names == ["Вася", "Саша", "Таня", "Нина", "Сережа"] toString – точно так же, как join(','). names.toString() == "Вася,Саша,Таня,Нина,Сережа"

  45. Работа с таймером Можно создать таймер и определить реакцию на событие от таймера. var timer = setTimeout(func, timeinterval); func – это функция или строка с кодом; timeinterval – время в миллисекундах. Таймер срабатывает один раз и запускает функцию. function launchTimer() { setTimeout("alert('Зенит – чемпион!');", 2000);} Теперь можно запустить этот таймер, например, по событию click: <body> <p>Нажми <span onclick="launchTimer();">сюда!</span></p></body> Пока событие еще не случилось, таймер можно остановить: var timer = setTimeout(func, timeinterval); clearTimeout(timer); settimer.html

  46. Работа с интервальным таймером Таймер может срабатывать многократно через равные промежутки времени. Такой таймер создается с помощью функции setIntervalи останавливается с помощью функции clearInterval. var timer = setInterval(func, timeinterval); function launchInterval() { timer = setInterval("alert('Зенит – чемпион!');", 2000);} function stopTimer() { if (timer) clearInterval(timer); timer = null; } <body> <p>Нажми <span onclick="launchInterval();">сюда,</span>чтобы запустить.</p> <p>Нажми <span onclick="stopTimer();">сюда,</span> чтобы остановить.</p></body> setinterval.html

  47. Календарь • <body bgColor=#923947 link="#008000" onload="start(document.forms[0])" onunload="cleartids()"> • <FONT color="#20ffff"><h3><CENTER>Вы смотрите пример работы скрипта Календарь с фоном цвета!</CENTER></h3></FONT color> • <CENTER> • <SCRIPT LANGUAGE="JavaScript"> • <!-- Begin • monthnames = new Array( • "Январь", • "Февраль", • "Март", • "Апрель", • "Май", • "Июнь", • "Июль", • "Август", • "Сентябрь", • "Октябрь", • "Ноябрь", • "Декабрь");

  48. var linkcount=0; • function addlink(month, day, href) { • var entry = new Array(3); • entry[0] = month; • entry[1] = day; • entry[2] = href; • this[linkcount++] = entry; • } • Array.prototype.addlink = addlink; • linkdays = new Array(); • monthdays = new Array(12);

  49. monthdays[0]=31; • monthdays[1]=28; • monthdays[2]=31; • monthdays[3]=30; • monthdays[4]=31; • monthdays[5]=30; • monthdays[6]=31; • monthdays[7]=31; • monthdays[8]=30; • monthdays[9]=31; • monthdays[10]=30; • monthdays[11]=31; • todayDate=new Date(); • thisday=todayDate.getDay(); • thismonth=todayDate.getMonth(); • thisdate=todayDate.getDate(); • thisyear=todayDate.getYear(); • thisyear = thisyear % 100; • thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));

  50. if (((thisyear % 4 == 0) • && !(thisyear % 100 == 0)) • ||(thisyear % 400 == 0)) monthdays[1]++; • startspaces=thisdate; • while (startspaces > 7) startspaces-=7; • startspaces = thisday - startspaces + 1; • if (startspaces < 0) startspaces+=7; • document.write("<table border=2 bgcolor=\"#CCCCCC\" "); • document.write("bordercolor=black><font color=black>"); • document.write("<tr><td colspan=7><center><strong>" • + monthnames[thismonth] + " " + thisyear • + "</strong></center></font></td></tr>"); • document.write("<tr>"); • document.write("<td align=center>Вс</td>"); • document.write("<td align=center>Пн</td>"); • document.write("<td align=center>Вт</td>"); • document.write("<td align=center>Ср</td>"); • document.write("<td align=center>Чт</td>"); • document.write("<td align=center>Пт</td>"); • document.write("<td align=center>Сб</td>"); • document.write("</tr>"); • document.write("<tr>");

More Related