Язык программирования JavaScript

Август 6, 2022

Главная
Информатика
Язык программирования JavaScript

Содержание

2. Makhmazaiitov Kufliddin Введение Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и
3. Makhmazaiitov Kufliddin Что делает JavaScript !! JavaScript дает HTML дизайнерам инструмент программирования - HTML авторы, как
4. Makhmazaiitov Kufliddin JavaScript может читать и писать HTML элементы - JavaScript может читать и изменять содержимое
5. Makhmazaiitov Kufliddin Hello World document.write("Hello World!"); Комментарий: Одна строчный комментарий начинаются с // Многострочный комментарий /*-комментарий-
6. Makhmazaiitov Kufliddin JavaScript в секции body будут выполнены во время загрузки страниц. JavaScript в header секции
7. Makhmazaiitov Kufliddin Заявления JavaScript могут быть сгруппированы в блоки. { document.write(" This is a header ");
8. Makhmazaiitov Kufliddin myHtml.html : Enjoy !!!!!! test.js : document.write("hello i am from test");
9. Makhmazaiitov Kufliddin Объявление переменных var x=5; var name=“abcd” _________________________________________________ { var x="the number is" , y=50;
10. Makhmazaiitov Kufliddin var x = 12.5 + 7.5; document.write(x); Каков результат:: …… “12.5”…….
11. Makhmazaiitov Kufliddin What is the output ? var x = "12.5"; var y = 7.5 var
12. Makhmazaiitov Kufliddin var x = "ab12.5"; var a = parseFloat(x); document.write(a); …….. NaN (not a number)……..
13. Makhmazaiitov Kufliddin JavaScript всплывающих окон В JavaScript мы можем создать три вида всплывающих окон: Alert box
14. Makhmazaiitov Kufliddin Alert box : Окно оповещения часто используется, если вы хотите, чтобы убедиться, оповещения поступает
15. Makhmazaiitov Kufliddin Confirm box : Когда окно подтверждения всплывает, пользователь должен будет нажать либо "ОК" или
16. Makhmazaiitov Kufliddin Prompt box : Контекстное окно часто используется, если вы хотите, чтобы пользователь ввел значение
17. Makhmazaiitov Kufliddin Арифметический оператор + ,-,*,/,% Оператор сравнения , =,== Оператор присваивания Условный оператор greeting=(visitor=="PRES")?"Dear President
18. Makhmazaiitov Kufliddin var x = 10; alert("the value of x is = " +x); 10 alert("the
19. Makhmazaiitov Kufliddin
20. Makhmazaiitov Kufliddin var x = 10; var y = 5; alert ("The value of x is
21. Makhmazaiitov Kufliddin Если: / / Если время меньше 10, / / вы получите приветствие "Доброе утро".
22. Makhmazaiitov Kufliddin var d = new Date() var time = d.getHours() if (time { document.write(" Good
23. Makhmazaiitov Kufliddin Switch : { var x=2; switch (x) { case 1: document.write(“hello"); break; case 2:
24. Makhmazaiitov Kufliddin Функции Функция содержит код, который будет выполняться по событию или с помощью вызова этой
25. Makhmazaiitov Kufliddin function hello() { document.write("calling hello function() "); return; } function add(x,y) { var result
26. Makhmazaiitov Kufliddin function myfunction() { alert("HELLO"); } При нажатии на кнопку, функция будет вызываться. Функция будет
27. Makhmazaiitov Kufliddin Создать JavaScript файл для: Передачи параметра в функцию Функция возвращает значение Локальная переменная: когда
28. Makhmazaiitov Kufliddin Цикл: var i=0; for (i=0;i { document.write("The number is " + i); document.write(" ");
29. Makhmazaiitov Kufliddin var x =19,a; for(a = 1;a { var re = a * x; document.write(x
30. Makhmazaiitov Kufliddin function table(form) { var x = form.num.value; var a; for(a = 1;a { var
31. Makhmazaiitov Kufliddin Напишите программу, чтобы скопировать содержимое одного текстового поля к другому текстовом поле. Напишите программу
32. Makhmazaiitov Kufliddin While : while (i { document.write("The number is " + i); document.write(" "); i=i+1;
33. Makhmazaiitov Kufliddin Arrays : emp = new Array(3); emp[0] = "John"; emp[1] = "TOM"; emp[2] =
34. Makhmazaiitov Kufliddin var x; var mycars = new Array(); mycars[0] = "Volvo"; mycars[1] = "BMW"; mycars[2]
35. Makhmazaiitov Kufliddin Java script try/catch Try ... Catch позволяет проверить блок кода на наличие ошибок. Попытка
36. Makhmazaiitov Kufliddin Error demo : function message() { addalert("Welcome guest!"); }
37. Makhmazaiitov Kufliddin Handle the error (use of try/catch block) function message() { try { addalert("Welcome guest!");
38. Makhmazaiitov Kufliddin Обработка событий Каждый элемент на веб-странице имеет определенные события, которые могут вызвать функции JavaScript.
39. Makhmazaiitov Kufliddin Пример некоторых событий OnClick событие происходит, когда объект получает нажал ondbclick событие используется для
40. Makhmazaiitov Kufliddin Некоторые событие тела : onresize() : если вы хотите изменить размер документа, это событие
41. Makhmazaiitov Kufliddin onselect() Event : Это событие относится на текстовое поле и области текста, когда пользователь
42. Makhmazaiitov Kufliddin function compute(form) { if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back
43. Makhmazaiitov Kufliddin OnChange событие : Мероприятие OnChange возникает всякий раз, когда изменяется элемент формы. Это может
44. Makhmazaiitov Kufliddin else alert ("Thank you"); } Please enter a number:
45. Makhmazaiitov Kufliddin onFocus: Мероприятие OnFocus отправляется всякий раз, когда элемент формы становится текущим элемент формы. Только
46. Makhmazaiitov Kufliddin onMouseOver Мероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается над элементом. onMouseOut Мероприятие
47. Makhmazaiitov Kufliddin function showLink(num) { if (num==1) { document.f1.t1.value= "You have selected KGFI"; } if (num==2)
48. Makhmazaiitov Kufliddin KGFI Asset Arena
49. Makhmazaiitov Kufliddin function mouseOver() { document.b1.src ="b_blue.gif"; } function mouseOut() { document.b1.src ="b_pink.gif"; }
50. Makhmazaiitov Kufliddin Javascript объект JavaScript является объектно-ориентированного программирования (ООП).Язык ООП позволяет определить свои собственные объекты и
51. Makhmazaiitov Kufliddin str.big() str.small() str.italics() str.bold() str.strike() : Hello World! Str.fontcolor(“red”) Str.fontsize(16) Substrics : str.sub() Superstrics
52. Makhmazaiitov Kufliddin Объект Math : Объект Math позволяет выполнять общие математические задачи. Объект Math включает в
53. Makhmazaiitov Kufliddin Программа для отображения всей информации о браузере: var x = navigator; document.write("CodeName=" + x.appCodeName);
54. Makhmazaiitov Kufliddin function detectBrowser() { var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") &&
55. Makhmazaiitov Kufliddin объект Окно : представляет окно браузера и может быть использован для получения информации о
56. Makhmazaiitov Kufliddin document.write("opening new Window!!!!!!! "); document.write(" "); window.open(); window.open(“table.html”); window.open(“http://www.google.com”);
57. Makhmazaiitov Kufliddin Написать программу, в которой пользователь введет имя сайта в текстовом поле, нажав кнопку "открыт
58. Makhmazaiitov Kufliddin History Object :’ This object provides a list of the URL's most recently visited
59. Makhmazaiitov Kufliddin JavaScript Объект Date Объект Date используется для работы с датами и временем var myDate=new
60. Makhmazaiitov Kufliddin JavaScript Timing Events С помощью JavaScript можно выполнять некоторые коды не сразу после вызова
61. Makhmazaiitov Kufliddin function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000); } Click on the button above. An alert
62. Makhmazaiitov Kufliddin var c=0; var t; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } Click on the
63. Makhmazaiitov Kufliddin Показать часы: function startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds();
64. Makhmazaiitov Kufliddin function checkTime(i) { if (i { i="0" + i; } return i; }
65. Makhmazaiitov Kufliddin Handling Form Events Write a programme to compute addition,subtraction , multiplication and division by
66. Makhmazaiitov Kufliddin function white() { document.bgColor = "white"; } function black() { document.bgColor = "black"; }
67. Makhmazaiitov Kufliddin Проверка с помощью JavaScript JavaScript может быть использован для проверки входных данных в HTML
68. Makhmazaiitov Kufliddin function validate_form() { if (f1.t1.value == "") { alert ( "Please fill the login
69. Makhmazaiitov Kufliddin onsubmit="return validate_form ( );"> Login ID : Password : If(f1.t1.value.indexOf(“@”) == -1) // for
70. Makhmazaiitov Kufliddin function validfn(frm) { var str = frm.fn.value; if(str.length == 0) { alert("first name field
71. Makhmazaiitov Kufliddin function validem(frm) { var str = frm.em.value; if(str.length == 0) { alert("E-mail id field
72. Makhmazaiitov Kufliddin function process(frm) { var fname = frm.fn.value; var lname = frm.ln.value; var email =
73. Makhmazaiitov Kufliddin Application Form Enter your first name : Enter your Last name : Enter your
74. JavaScript работа со строками javascript строки Введите текст: Введите слово: Количество слов в тексте: Makhmazaiitov Kufliddin
75. function numword(obj) { var t=obj.textin.value; var s=obj.slovo.value; var m=s.length; var res=0; var i=0; while (i {var
76. Работа с окнами javascript окно javascript окно Makhmazaiitov Kufliddin
77. function choiceOf(){ if (confirm("Вы действительно хотите открыть окно?")) { volvo=window.open("volvo.html", "display_volvo", "width=400,height=300,status=no,toolbar=no,menubar=no"); } } function close_pict()
78. Основы анимации С точки зрения HTML/CSS, анимация — это постепенное изменение стиля DOM-элемента. Например, увеличение координаты
79. Пример function move(elem) { var left = 0; // начальное значение function frame() { // функция
80. Структура анимации У анимации есть три основных параметра: delay Время между кадрами (в миллисекундах, т.е. 1/1000
81. Makhmazaiitov Kufliddin
82. function animate(opts) { var start = new Date; // сохранить время начала var timer = setInterval(function()
83. Makhmazaiitov Kufliddin
85. Скачать презентацию

Слайд 2

Makhmazaiitov Kufliddin
Введение
Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с

Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:
Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.
Проверка правильности заполнения пользовательских форм. Решение "локальных" задач с помощью сценариев.
JavaScript-код - основа большинства Ajax-приложений.

Слайд 3

Makhmazaiitov Kufliddin
Что делает JavaScript !!
JavaScript дает HTML дизайнерам инструмент программирования -

HTML авторы, как правило, не программисты, но JavaScript это язык сценариев с очень простым синтаксисом! Почти каждый может положить небольшие "фрагменты" кода на своих страницах HTML
JavaScript может поставить динамический текст в HTML страницу - A JavaScript заявление так:
document.write("

" + имя + "");
может написать переменный текст в HTML страницу
JavaScript может реагировать на события - JavaScript может быть установлен, чтобы выполнить, когда что-то происходит, например, когда завершения загрузки страницы или когда пользователь нажимает на HTML элемент

Слайд 4

Makhmazaiitov Kufliddin
JavaScript может читать и писать HTML элементы - JavaScript может

читать и изменять содержимое на HTML элемент
JavaScript может использоваться для проверки данных - JavaScript может быть использован для проверки данных формы, до его передачи на сервер. Это экономит сервер от дополнительной обработки
JavaScript может быть использован для обнаружения браузер посетителя - JavaScript может быть использован для обнаружения браузер посетителя, и - в зависимости от браузера - загрузку еще одной страницы, специально предназначенные для этого браузера
JavaScript может быть использован для создания cookie - JavaScript может быть использован для хранения и извлечения информации о компьютере посетителя

Слайд 5

Makhmazaiitov Kufliddin
Hello World

Комментарий:

Одна строчный комментарий начинаются с //
Многострочный комментарий /*-комментарий- */

Слайд 6

Makhmazaiitov Kufliddin
JavaScript в секции body будут выполнены во время загрузки страниц.

JavaScript в header секции будут выполнены при вызове JavaScript представляет собой последовательность инструкций для выполнения в браузере.

Слайд 7

Makhmazaiitov Kufliddin
Заявления JavaScript могут быть сгруппированы в блоки.

Использование внешнего файла

Слайд 8

Makhmazaiitov Kufliddin
myHtml.html :

Enjoy !!!!!!

test.js :
document.write("hello i am from

test");

Слайд 9

$Makhmazaiitov Kufliddin Объявление переменных var x=5; var name=“abcd” _________________________________________________ { var$

Makhmazaiitov Kufliddin
Объявление переменных
var x=5;
var name=“abcd”
_________________________________________________

Слайд 10

Makhmazaiitov Kufliddin

Каков результат::
……

“12.5”…….

Слайд 11

Makhmazaiitov Kufliddin
What is the output ?

Слайд 12

Makhmazaiitov Kufliddin

……..

NaN (not a number)……..

Слайд 13

Makhmazaiitov Kufliddin
JavaScript всплывающих окон
В JavaScript мы можем создать три вида всплывающих

окон:
Alert box (окно оповещения)
Confirm box (окно подтверждения)
Prompt box (контекстное окно).

Слайд 14

Makhmazaiitov Kufliddin
Alert box : Окно оповещения часто используется, если вы хотите,

чтобы убедиться, оповещения поступает через пользователь. Когда окно предупреждения всплывает, пользователь должен будет нажать кнопку "ОК", чтобы продолжить.

Слайд 15

Makhmazaiitov Kufliddin
Confirm box : Когда окно подтверждения всплывает, пользователь должен будет

нажать либо "ОК" или "Отмена", чтобы продолжить.

Слайд 16

Makhmazaiitov Kufliddin
Prompt box : Контекстное окно часто используется, если вы хотите,

чтобы пользователь ввел значение перед входом страницу.

Слайд 17

Makhmazaiitov Kufliddin
Арифметический оператор
+ ,-,*,/,%
Оператор сравнения
<,>,<=.>=,==
Оператор присваивания
Условный оператор
greeting=(visitor=="PRES")?"Dear President ":"Dear

";
Логический оператор
Логические операции обычно используется для объединения нескольких сравнений в условном выражении

Слайд 18

Makhmazaiitov Kufliddin

Слайд 19

Makhmazaiitov Kufliddin

Слайд 20

Makhmazaiitov Kufliddin

Слайд 21

Makhmazaiitov Kufliddin
Если:

Слайд 22

Makhmazaiitov Kufliddin

Слайд 23

Makhmazaiitov Kufliddin
Switch :

Слайд 24

Makhmazaiitov Kufliddin
Функции
Функция содержит код, который будет выполняться по событию или с

помощью вызова этой функции
Функции могут быть определены как в и в разделе документа. Тем не менее, чтобы убедиться, что функция чтения / загрузки обозревателем, прежде чем она называется, она может быть мудрым, чтобы положить его в разделе .

Слайд 25

Makhmazaiitov Kufliddin

Слайд 26

Makhmazaiitov Kufliddin

При нажатии на

кнопку, функция будет вызываться. Функция будет оповещать сообщение.

Слайд 27

Makhmazaiitov Kufliddin
Создать JavaScript файл для:
Передачи параметра в функцию
Функция возвращает

значение
Локальная переменная: когда мы определяем переменную внутри функции, она может быть доступ только в функциях,
Глобальная переменная : когда мы определяем переменную вне функции, она может быть доступна на всех функций

Слайд 28

Makhmazaiitov Kufliddin
Цикл:

Слайд 29

Makhmazaiitov Kufliddin

Слайд 30

Makhmazaiitov Kufliddin

Enter number :

Слайд 31

Makhmazaiitov Kufliddin
Напишите программу, чтобы скопировать содержимое одного текстового поля к другому

текстовом поле.
Напишите программу для отображения площадь круга в текстовом поле. Радиус задается пользователем в соответствующее текстовое поле.
Напишите программу для преобразования температуры от Фаренгейта к Цельсия

Слайд 32

Makhmazaiitov Kufliddin
While :
while (i<=10)
{
document.write("The number is " +

i);
document.write("
");
i=i+1;
}
Do-while :
do
{
document.write("The number is " + i);
document.write("
");
i=i+1;
}
while (i<0);
Break/continue --->

Слайд 33

Makhmazaiitov Kufliddin
Arrays :

……………………….. emp.sort()………………

Слайд 34

Makhmazaiitov Kufliddin
var x;
var mycars = new Array();
mycars[0] = "Volvo";
mycars[1] = "BMW";
mycars[2]

= "Toyata";
mycars[5] = "Mercedes";
for (x in mycars)
{
document.write(mycars[x] + "
");
}

Слайд 35

Makhmazaiitov Kufliddin
Java script try/catch
Try ... Catch позволяет проверить блок кода на

наличие ошибок. Попытка блок содержит код, который будет работать, а блок улов содержит код, который будет выполнен, если произошла ошибка.
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

Слайд 36

Makhmazaiitov Kufliddin
Error demo :

onclick="message()" />

Слайд 37

Makhmazaiitov Kufliddin
Handle the error (use of try/catch block)
function message()
{
try
{
addalert("Welcome

guest!");
}
catch(err)
{
txt="Ошибке на этой странице.\n\n";
txt+=" Описание ошибки : " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}

Слайд 38

Makhmazaiitov Kufliddin
Обработка событий
Каждый элемент на веб-странице имеет определенные события, которые могут

вызвать функции JavaScript. Например, мы можем использовать событие OnClick из элемента кнопки, чтобы указать, что функция будет работать, когда пользователь нажимает на кнопку. Определим события в HTML тегов

Слайд 39

Makhmazaiitov Kufliddin
Пример некоторых событий
OnClick событие происходит, когда объект получает нажал
ondbclick

событие используется для двойной щелчок

Слайд 40

Makhmazaiitov Kufliddin
Некоторые событие тела :
onresize() : если вы хотите изменить размер

документа, это событие генерируется.

onload() : Это событие генерируется, когда мы загружаем или откроем документ в браузере.

onunload() : Это событие генерируется, когда мы закрываем документ в браузере.

Слайд 41

Makhmazaiitov Kufliddin
onselect() Event : Это событие относится на текстовое поле и

области текста, когда пользователь хочет выделить.

onselect="alert('You have selected some of the text.')">

Слайд 42

Makhmazaiitov Kufliddin

Enter an expression:

Result:

Слайд 43

Makhmazaiitov Kufliddin
OnChange событие : Мероприятие OnChange возникает всякий раз, когда изменяется

элемент формы. Это может произойти, когда содержимое текстового элемента управления изменениями, или когда выбор в выборе изменений список.

enter a number:

Слайд 45

Makhmazaiitov Kufliddin
onFocus: Мероприятие OnFocus отправляется всякий раз, когда элемент формы

становится текущим элемент формы. Только тогда, когда элемент имеет фокус может это принимать ввод от пользователя.
onBlur: Является противоположностью фокусе. Когда пользователь оставляет элемент формы, событие ONBLUR активируется.

Слайд 46

Makhmazaiitov Kufliddin
onMouseOver
Мероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается над

элементом.
onMouseOut
Мероприятие onMouseOut генерируется всякий раз, когда курсор мыши перемещается с элемента

Слайд 48

Makhmazaiitov Kufliddin

href="#" onMouseOver="showLink(1)">KGFI
Asset
Arena

Слайд 49

$Makhmazaiitov Kufliddin function mouseOver() { document.b1.src ="b_blue.gif"; } function mouseOut() { document.b1.src ="b_pink.gif"; }$

Makhmazaiitov Kufliddin

Слайд 50

Makhmazaiitov Kufliddin
Javascript объект
JavaScript является объектно-ориентированного программирования (ООП).Язык ООП позволяет определить свои

собственные объекты и сделать свои собственные типы переменных.
объект
свойства
метод
String метод :
document.write(str.length);
var str="Hello world!"; document.write(str.toUpperCase());

Слайд 51

Makhmazaiitov Kufliddin
str.big()
str.small()
str.italics()
str.bold()
str.strike() : Hello World!
Str.fontcolor(“red”)
Str.fontsize(16)
Substrics : str.sub()
Superstrics : str.sup()
var str="Hello

world!";
document.write(str.indexOf("Hello") + "
"); // 0 document.write(str.indexOf("World") + "
"); // -1 document.write(str.indexOf("world")); // 6
document.write(str.match("world")); // world
document.write(str.match("World")); // null

Слайд 52

Makhmazaiitov Kufliddin
Объект Math :
Объект Math позволяет выполнять общие математические задачи.
Объект

Math включает в себя несколько математические значения и функции. Вам не нужно определить объект Math перед его использованием.
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Некоторые часто используемые методы:
round()
min()
max()
random()

Слайд 53

Makhmazaiitov Kufliddin
Программа для отображения всей информации о браузере:

Слайд 54

$Makhmazaiitov Kufliddin function detectBrowser() { var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version);$

Makhmazaiitov Kufliddin

Слайд 55

Makhmazaiitov Kufliddin
объект Окно : представляет окно браузера и может быть использован

для получения информации о состоянии окна

свойства :
document
event
history
location
name
navigator
screen

метод :
alert
blur
close
focus
navigate
open

Слайд 56

Makhmazaiitov Kufliddin

window.open(“table.html”);
window.open(“http://www.google.com”);

Слайд 57

Makhmazaiitov Kufliddin
Написать программу, в которой пользователь введет имя сайта в текстовом

поле, нажав кнопку "открыт сайт" сайт будет открываться.

please Enter the complete URL : For Example
http://www.yahoo.com

Слайд 58

Makhmazaiitov Kufliddin
History Object :’ This object provides
a list of the

URL's most recently
visited by the client
Example, history's "back()" method cause
the window to again display the
immediately previous document:
history.back();
Location Object : This object maintains
information about the current URL.
It provides a method
that causes the window's current
URL to be reloaded.
location.replace()….

Слайд 59

Makhmazaiitov Kufliddin
JavaScript Объект Date
Объект Date используется для работы с датами и

временем
var myDate=new Date()
Объект Date будет автоматически удерживать текущую дату и время в качестве начального значения
Манипуляция с датами:
var d = new Date();
d.setFullYear(1992,10,3);
document.write(d); // Tue Nov 3 02:06:39 PST 1992

Слайд 60

Makhmazaiitov Kufliddin
JavaScript Timing Events
С помощью JavaScript можно выполнять некоторые коды

не сразу после вызова функции, но по истечении определенного интервала времени. Это называется события времени.
Два основных метода, которые используются:
setTimeout() - выполняет через некоторое время
clearTimeout() - отмена setTimeout()
Синтаксис:
var t=setTimeout("javascript statement",milliseconds);
clearTimeout(setTimeout_variable)

Слайд 61

Makhmazaiitov Kufliddin

= "timedMsg()">

Click on the button above. An alert box will be displayed after 5 seconds.

Слайд 62

Makhmazaiitov Kufliddin

id="txt">

Click on the button above. The input field will count for ever, starting at 0.

Слайд 63

Makhmazaiitov Kufliddin
Показать часы:

id="txt">

Слайд 65

Makhmazaiitov Kufliddin
Handling Form Events
Write a programme to compute addition,subtraction , multiplication

and division by clicking corresponding buttons. Result will display in text field
Write a programme to display name , age , address and phone number of user in pop-up window. Details will be given by the user.

Слайд 66

Makhmazaiitov Kufliddin

Light On
Light Off

Слайд 67

Makhmazaiitov Kufliddin
Проверка с помощью JavaScript
JavaScript может быть использован для проверки входных

данных в HTML форм перед отправкой содержание к серверу.
Данные формы, которые обычно проверяются в JavaScript могут быть:
пользователь оставил необходимые поля пустыми?
пользователь ввел действительный адрес электронной почты?
пользователь ввел корректную дату?
пользователь ввел текст в цифровой области?

Слайд 68

$Makhmazaiitov Kufliddin function validate_form() { if (f1.t1.value == "") { alert$

Makhmazaiitov Kufliddin

Слайд 69

Makhmazaiitov Kufliddin

onsubmit="return validate_form ( );">
Login ID :

Password :

If(f1.t1.value.indexOf(“@”) == -1) // for validating he e-mail id

Слайд 70

Makhmazaiitov Kufliddin

Слайд 73

Makhmazaiitov Kufliddin

Application Form

Enter your first name :

= text name = "fn" size = 20 onblur = "validfn(this.form)">
Enter your Last name :
Enter your E-mail ID :
Please enter your comments :

Слайд 74

JavaScript работа со строками

javascript строки

Makhmazaiitov Kufliddin

Слайд 75

function numword(obj) {
var t=obj.textin.value;
var s=obj.slovo.value;
var m=s.length;
var res=0;

var i=0;
while (i < t.length-1)
{var ch=t.substr(i,m)
if (ch==s){
res+=1;
i=i+m
}
else
i++
}
obj.res.value=res
}

Makhmazaiitov Kufliddin

Слайд 76

Работа с окнами

javascript окно

type="text/javascript" src="script.js">

javascript окно

Makhmazaiitov Kufliddin

Слайд 77

$function choiceOf(){ if (confirm("Вы действительно хотите открыть окно?")) { volvo=window.open("volvo.html", "display_volvo",$

function choiceOf(){
if (confirm("Вы действительно хотите открыть окно?")) { volvo=window.open("volvo.html", "display_volvo",

"width=400,height=300,status=no,toolbar=no,menubar=no");
}
}
function close_pict() {
window.close();
}

Makhmazaiitov Kufliddin

Слайд 78

Основы анимации
С точки зрения HTML/CSS, анимация — это постепенное изменение стиля

DOM-элемента. Например, увеличение координаты style.left от 0px до 100px сдвигает элемент.
Код, который производит изменение, вызывается таймером. Интервал таймера очень мал и поэтому анимация выглядит плавной. Это тот же принцип, что и в кино: для непрерывной анимации достаточно 24 или больше вызовов таймера в секунду.
Псевдо-код для анимации выглядит так:
var timer = setInterval(function() {
показать новый кадр
if (время вышло)
clearInterval(timer);
}, 10)
Задержка между кадрами в данном случае составляет 10 ms, что означает 100 кадров в секунду.
В большинстве фреймворков, задержка по умолчанию составляет 10-15 мс. Меньшая задержка делает анимацию более плавной, но только в том случае, если браузер достаточно быстр, чтобы анимировать каждый шаг вовремя.

Makhmazaiitov Kufliddin

Слайд 79

Пример

Makhmazaiitov Kufliddin

Слайд 80

Структура анимации
У анимации есть три основных параметра:
delay
Время между кадрами (в

миллисекундах, т.е. 1/1000 секунды).
Например, 10мс.
duration
Общее время, которое должна длиться анимация, в мс.
Например, 1000мс.
step(progress)
Функция step(progress) занимается отрисовкой состояния анимации, соответствующего времени progress.Каждый кадр выполняется, сколько времени прошло: progress = (now-start)/duration. Значениеprogress меняется от 0 в начале анимации до 1 в конце. Так как вычисления с дробными числами не всегда точны, то в конце оно может быть даже немного больше 1. В этом случае мы уменьшаем его до 1 и завершаем анимацию.

Makhmazaiitov Kufliddin

Слайд 81

class="example_block" style="width: 5%;">

Makhmazaiitov Kufliddin

Слайд 82

function animate(opts) {
var start = new Date; // сохранить время

начала
var timer = setInterval(function() { // вычислить сколько времени прошло
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1; // отрисовать анимацию
opts.step(progress);
if (progress == 1) clearInterval(timer); // конец
}, opts.delay || 10);
}
function stretch(elem) {
animate({
duration: 1000, step: function(progress) {
elem.style.width = progress*100 + "%";
} });}

Makhmazaiitov Kufliddin

Слайд 83

Язык программирования JavaScript

Содержание

Makhmazaiitov KufliddinВведениеЯзык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с

Makhmazaiitov KufliddinЧто делает JavaScript !!JavaScript дает HTML дизайнерам инструмент программирования -

Makhmazaiitov KufliddinJavaScript может читать и писать HTML элементы - JavaScript может

Makhmazaiitov KufliddinHello World <br>document.write("Hello World!"); <br> Комментарий:

Makhmazaiitov KufliddinJavaScript в секции body будут выполнены во время загрузки страниц.

Makhmazaiitov KufliddinmyHtml.html :Enjoy !!!!!!test.js :document.write("hello i am from

Makhmazaiitov KufliddinОбъявление переменныхvar x=5;var name=“abcd”_________________________________________________ <br>{<br>var x="the number is"</div></h2><div class="slides-content">, y=50;<br>document.write(x+y);<br>}<br>

Makhmazaiitov Kufliddin<br>var x = 12.5 + 7.5;<br>document.write(x);<br>Каков результат::……

Makhmazaiitov KufliddinWhat is the output ?<br>var x =</div></h2><div class="slides-content">"12.5";<br>var y = 7.5<br>var a = parseFloat(x);<br>document.write(a+y);<br>

Makhmazaiitov Kufliddin<br>var x = "ab12.5";<br>var a = parseFloat(x);<br>document.write(a);<br>……..

Makhmazaiitov KufliddinJavaScript всплывающих оконВ JavaScript мы можем создать три вида всплывающих

Makhmazaiitov KufliddinAlert box : Окно оповещения часто используется, если вы хотите,

Makhmazaiitov KufliddinConfirm box : Когда окно подтверждения всплывает, пользователь должен будет

Makhmazaiitov KufliddinPrompt box : Контекстное окно часто используется, если вы хотите,

Makhmazaiitov KufliddinАрифметический оператор + ,-,*,/,%Оператор сравнения <,>,<=.>=,==Оператор присваиванияУсловный операторgreeting=(visitor=="PRES")?"Dear President ":"Dear

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin <br> var x = 10;<br> var y</div></h2><div class="slides-content">= 5;<br> alert ("The value of x is " <br> + x + "The value of y is " + y);<br> alert("x AND y = " + (x && y));<br> alert("x OR y = " + (x || y));<br> alert("NOT x = " + (!x));<br>

Makhmazaiitov KufliddinSwitch : <br>{<br>var x=2;<br> switch (x)<br> { <br>case 1:</div></h2><div class="slides-content"><br> document.write(“hello"); <br> break; <br>case 2:<br> document.write(“Hai-hello"); <br> break;<br>default: <br> document.write(“Goob bye!!");<br> } <br>

Makhmazaiitov KufliddinФункцииФункция содержит код, который будет выполняться по событию или с

Makhmazaiitov Kufliddin<br>function myfunction()<br>{<br>alert("HELLO");<br>}<br> При нажатии на

Makhmazaiitov KufliddinСоздать JavaScript файл для: Передачи параметра в функцию Функция возвращает

Makhmazaiitov KufliddinЦикл: <br> var i=0;<br> for (i=0;i<=10;i++)<br> { <br>document.write("The</div></h2><div class="slides-content">number is " + i); document.write("<br />");<br> }<br>

Makhmazaiitov Kufliddin<br>var x =19,a;<br>for(a = 1;a <=10;a++)<br>{<br>var re</div></h2><div class="slides-content">= a * x;<br>document.write(x + " * "+a+" = " +re + "<br>");<br>}<br>

Makhmazaiitov Kufliddin<br>function table(form)<br>{<br>var x = form.num.value;<br>var a;<br>for(a =</div></h2><div class="slides-content">1;a <=10;a++)<br>{<br>var re = a * x;<br>document.write(x + " * "+a+" = " +re + "<br>");<br>}<br>}<br>Enter number :

Enter number :

Makhmazaiitov KufliddinНапишите программу, чтобы скопировать содержимое одного текстового поля к другому

Makhmazaiitov KufliddinWhile : while (i<=10) { document.write("The number is " +

Makhmazaiitov Kufliddinvar x;var mycars = new Array();mycars[0] = "Volvo";mycars[1] = "BMW";mycars[2]

Makhmazaiitov KufliddinJava script try/catchTry ... Catch позволяет проверить блок кода на

Makhmazaiitov KufliddinError demo : <br>function message()<br>{<br>addalert("Welcome guest!");<br>}<br>

Makhmazaiitov KufliddinHandle the error (use of try/catch block)function message(){try { addalert("Welcome

Makhmazaiitov KufliddinОбработка событийКаждый элемент на веб-странице имеет определенные события, которые могут

Makhmazaiitov KufliddinПример некоторых событийOnClick событие происходит, когда объект получает нажал ondbclick

Makhmazaiitov KufliddinНекоторые событие тела :onresize() : если вы хотите изменить размер

Makhmazaiitov Kufliddinonselect() Event : Это событие относится на текстовое поле и

Makhmazaiitov Kufliddin <br>function compute(form) <br>{<br>if (confirm("Are you sure?"))<br> form.result.value =</div></h2><div class="slides-content">eval(form.expr.value)<br>else<br> alert("Please come back again.")<br>}<br> Enter an expression: Result:

Makhmazaiitov KufliddinOnChange событие : Мероприятие OnChange возникает всякий раз, когда изменяется

Makhmazaiitov Kufliddin onFocus: Мероприятие OnFocus отправляется всякий раз, когда элемент формы

Makhmazaiitov KufliddinonMouseOverМероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается над

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin <br> function mouseOver() <br>{ <br>document.b1.src ="b_blue.gif";<br> }<br></div></h2><div class="slides-content">function mouseOut()<br> { <br>document.b1.src ="b_pink.gif";<br> } <br>

Makhmazaiitov KufliddinJavascript объектJavaScript является объектно-ориентированного программирования (ООП).Язык ООП позволяет определить свои

Makhmazaiitov Kufliddinstr.big()str.small()str.italics()str.bold()str.strike() : Hello World! Str.fontcolor(“red”)Str.fontsize(16)Substrics : str.sub()Superstrics : str.sup()var str="Hello

Makhmazaiitov KufliddinОбъект Math :Объект Math позволяет выполнять общие математические задачи. Объект

Makhmazaiitov Kufliddinобъект Окно : представляет окно браузера и может быть использован

Makhmazaiitov Kufliddin <br>document.write("opening new Window!!!!!!! ");<br>document.write("<br>");<br>window.open();<br>window.open(“table.html”);window.open(“http://www.google.com”);

Makhmazaiitov KufliddinНаписать программу, в которой пользователь введет имя сайта в текстовом

please Enter the complete URL : For Example http://www.yahoo.com

Makhmazaiitov KufliddinHistory Object :’ This object provides a list of the

Makhmazaiitov KufliddinJavaScript Объект DateОбъект Date используется для работы с датами и

Makhmazaiitov KufliddinJavaScript Timing Events С помощью JavaScript можно выполнять некоторые коды

Makhmazaiitov Kufliddin<br>function timedMsg()<br>{<br>var t=setTimeout("alert('5 seconds!')",5000);<br>}<br>

Makhmazaiitov Kufliddin<br>var c=0;<br>var t;<br>function timedCount()<br>{<br>document.getElementById('txt').value=c;<br>c=c+1;<br>t=setTimeout("timedCount()",1000);<br>}<br>

Makhmazaiitov KufliddinHandling Form EventsWrite a programme to compute addition,subtraction , multiplication

Makhmazaiitov Kufliddin <br>function white()<br>{<br>document.bgColor = "white";<br>}<br>function black()<br>{<br>document.bgColor =</div></h2><div class="slides-content">"black";<br>}<br>Light On Light Off

Makhmazaiitov KufliddinПроверка с помощью JavaScriptJavaScript может быть использован для проверки входных

Makhmazaiitov Kufliddin onsubmit="return validate_form ( );">Login ID :

Makhmazaiitov Kufliddin Application Form Enter your first name :

Application Form

JavaScript работа со строками javascript строки

function numword(obj) { var t=obj.textin.value; var s=obj.slovo.value; var m=s.length; var res=0;

Работа с окнами javascript окно

function choiceOf(){ if (confirm("Вы действительно хотите открыть окно?")) { volvo=window.open("volvo.html", "display_volvo",

Основы анимацииС точки зрения HTML/CSS, анимация — это постепенное изменение стиля

Makhmazaiitov Kufliddin
Введение
Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с

Makhmazaiitov Kufliddin
Что делает JavaScript !!
JavaScript дает HTML дизайнерам инструмент программирования -

Makhmazaiitov Kufliddin
JavaScript может читать и писать HTML элементы - JavaScript может

Makhmazaiitov Kufliddin
Hello World

Комментарий:

Makhmazaiitov Kufliddin
JavaScript в секции body будут выполнены во время загрузки страниц.

Makhmazaiitov Kufliddin
myHtml.html :

Enjoy !!!!!!

test.js :
document.write("hello i am from

Makhmazaiitov Kufliddin
Объявление переменных
var x=5;
var name=“abcd”
_________________________________________________

Makhmazaiitov Kufliddin

Каков результат::
……

Makhmazaiitov Kufliddin
What is the output ?

Makhmazaiitov Kufliddin

……..

Makhmazaiitov Kufliddin
JavaScript всплывающих окон
В JavaScript мы можем создать три вида всплывающих

Makhmazaiitov Kufliddin
Alert box : Окно оповещения часто используется, если вы хотите,

Makhmazaiitov Kufliddin
Confirm box : Когда окно подтверждения всплывает, пользователь должен будет

Makhmazaiitov Kufliddin
Prompt box : Контекстное окно часто используется, если вы хотите,

Makhmazaiitov Kufliddin
Арифметический оператор
+ ,-,*,/,%
Оператор сравнения
<,>,<=.>=,==
Оператор присваивания
Условный оператор
greeting=(visitor=="PRES")?"Dear President ":"Dear

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin
Switch :

Makhmazaiitov Kufliddin
Функции
Функция содержит код, который будет выполняться по событию или с

Makhmazaiitov Kufliddin

При нажатии на

Makhmazaiitov Kufliddin
Создать JavaScript файл для:
Передачи параметра в функцию
Функция возвращает

Makhmazaiitov Kufliddin
Цикл:

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

Enter number :

Makhmazaiitov Kufliddin
Напишите программу, чтобы скопировать содержимое одного текстового поля к другому

Makhmazaiitov Kufliddin
While :
while (i<=10)
{
document.write("The number is " +

Makhmazaiitov Kufliddin
var x;
var mycars = new Array();
mycars[0] = "Volvo";
mycars[1] = "BMW";
mycars[2]

Makhmazaiitov Kufliddin
Java script try/catch
Try ... Catch позволяет проверить блок кода на

Makhmazaiitov Kufliddin
Error demo :

Makhmazaiitov Kufliddin
Handle the error (use of try/catch block)
function message()
{
try
{
addalert("Welcome

Makhmazaiitov Kufliddin
Обработка событий
Каждый элемент на веб-странице имеет определенные события, которые могут

Makhmazaiitov Kufliddin
Пример некоторых событий
OnClick событие происходит, когда объект получает нажал
ondbclick

Makhmazaiitov Kufliddin
Некоторые событие тела :
onresize() : если вы хотите изменить размер

Makhmazaiitov Kufliddin
onselect() Event : Это событие относится на текстовое поле и

Makhmazaiitov Kufliddin

Enter an expression:

Result:

Makhmazaiitov Kufliddin
OnChange событие : Мероприятие OnChange возникает всякий раз, когда изменяется

Makhmazaiitov Kufliddin
onFocus: Мероприятие OnFocus отправляется всякий раз, когда элемент формы

Makhmazaiitov Kufliddin
onMouseOver
Мероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается над

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin
Javascript объект
JavaScript является объектно-ориентированного программирования (ООП).Язык ООП позволяет определить свои

Makhmazaiitov Kufliddin
str.big()
str.small()
str.italics()
str.bold()
str.strike() : Hello World!
Str.fontcolor(“red”)
Str.fontsize(16)
Substrics : str.sub()
Superstrics : str.sup()
var str="Hello

Makhmazaiitov Kufliddin
Объект Math :
Объект Math позволяет выполнять общие математические задачи.
Объект

Makhmazaiitov Kufliddin
объект Окно : представляет окно браузера и может быть использован

Makhmazaiitov Kufliddin

window.open(“table.html”);
window.open(“http://www.google.com”);

Makhmazaiitov Kufliddin
Написать программу, в которой пользователь введет имя сайта в текстовом

please Enter the complete URL : For Example
http://www.yahoo.com

Makhmazaiitov Kufliddin
History Object :’ This object provides
a list of the

Makhmazaiitov Kufliddin
JavaScript Объект Date
Объект Date используется для работы с датами и

Makhmazaiitov Kufliddin
JavaScript Timing Events
С помощью JavaScript можно выполнять некоторые коды

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin
Handling Form Events
Write a programme to compute addition,subtraction , multiplication

Makhmazaiitov Kufliddin

Light On
Light Off

Makhmazaiitov Kufliddin
Проверка с помощью JavaScript
JavaScript может быть использован для проверки входных

Makhmazaiitov Kufliddin

onsubmit="return validate_form ( );">
Login ID :

Makhmazaiitov Kufliddin

Application Form

Enter your first name :

JavaScript работа со строками

javascript строки

function numword(obj) {
var t=obj.textin.value;
var s=obj.slovo.value;
var m=s.length;
var res=0;

Работа с окнами

javascript окно

function choiceOf(){
if (confirm("Вы действительно хотите открыть окно?")) { volvo=window.open("volvo.html", "display_volvo",

Основы анимации
С точки зрения HTML/CSS, анимация — это постепенное изменение стиля