Разделы презентаций


JavaScript

Содержание

Makhmazaiitov KufliddinВведениеЯзык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript: Создание динамических страниц,

Слайды и текст этой презентации

Слайд 1Makhmazaiitov Kufliddin
JAVA SCRIPT

Makhmazaiitov KufliddinJAVA SCRIPT

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

с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен

для создания интерактивных html-документов. Основные области использования JavaScript:

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

Слайд 3Makhmazaiitov Kufliddin
Что делает JavaScript !!

JavaScript дает HTML дизайнерам инструмент программирования

- HTML авторы, как правило, не программисты, но JavaScript это

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

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

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

Слайд 4Makhmazaiitov Kufliddin


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

может читать и изменять содержимое на HTML элемент

JavaScript может

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

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

JavaScript может быть использован для создания cookie - JavaScript может быть использован для хранения и извлечения информации о компьютере посетителя
Makhmazaiitov KufliddinJavaScript может читать и писать HTML элементы - JavaScript может читать и изменять содержимое на HTML

Слайд 5Makhmazaiitov Kufliddin
Hello World



document.write("Hello World!");



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

Makhmazaiitov KufliddinHello World  document.write(

Слайд 6Makhmazaiitov Kufliddin


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

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

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

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

Слайд 7Makhmazaiitov Kufliddin

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

{
document.write("This

is a header"); document.write("This is a paragraph"); document.write("This is

another paragraph

");
}


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


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

Слайд 8Makhmazaiitov Kufliddin


myHtml.html :






Enjoy !!!!!!



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

from test");

Makhmazaiitov KufliddinmyHtml.html :Enjoy !!!!!!test.js :document.write(

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




{
var x="the number

is" , y=50;
document.write(x+y);
}



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

Слайд 10Makhmazaiitov Kufliddin




var x = 12.5 + 7.5;
document.write(x);




Каков

результат::

…… “12.5”…….

Makhmazaiitov Kufliddinvar x = 12.5 + 7.5;document.write(x);Каков результат::…… “12.5”…….

Слайд 11Makhmazaiitov Kufliddin


What is the output ?




var x

= "12.5";
var y = 7.5
var a = parseFloat(x);
document.write(a+y);








Makhmazaiitov KufliddinWhat is the output ?var x =

Слайд 12Makhmazaiitov Kufliddin




var x = "ab12.5";
var a =

parseFloat(x);
document.write(a);




…….. NaN (not a number)……..

Makhmazaiitov Kufliddinvar x =

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

всплывающих окон:
Alert box (окно оповещения)
Confirm box (окно подтверждения)
Prompt box (контекстное

окно).
Makhmazaiitov KufliddinJavaScript всплывающих оконВ JavaScript мы можем создать три вида всплывающих окон:Alert box (окно оповещения)Confirm box (окно

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

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

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









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

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

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



function

disp_confirm()
{
var r=confirm("Press a button");
if (r==true)
{ document.write("You pressed OK!"); }
else
{ document.write("You pressed Cancel!"); }
}







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

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

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



function disp_prompt()
{
var

name=prompt("Please enter your name", "Kufliddin Makhmazaiitov");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}








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

Слайд 17Makhmazaiitov Kufliddin
Арифметический оператор
+ ,-,*,/,%

Оператор сравнения

,=,==
Оператор присваивания
Условный оператор
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Логический оператор
Логические операции обычно используется

для объединения нескольких сравнений в условном выражении
Makhmazaiitov KufliddinАрифметический оператор   + ,-,*,/,%Оператор сравнения   ,=,==Оператор присваиванияУсловный операторgreeting=(visitor==

Слайд 18Makhmazaiitov Kufliddin




var x = 10;
alert("the value of

x is = " +x); 10
alert("the value of x+x is

= " +(x+x));
alert("the value of x-x is = " +(x-x));
alert("the value of x*x is = " +(x*x));
alert("the value of x/x is = " +(x/x));
alert("the value of x%3 is = " +(x%3));
alert("the value of --x is = " +(--x));
alert("the value of ++x is = " +(++x));
alert("the value of -x is = " +(-x));



Makhmazaiitov Kufliddinvar x = 10;alert(

Слайд 19Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

Слайд 20Makhmazaiitov Kufliddin



var x

= 10;
var y = 5;
alert ("The

value of x is "
+ x + "The value of y is " + y);
alert("x AND y = " + (x && y));
alert("x OR y = " + (x || y));
alert("NOT x = " + (!x));



Makhmazaiitov Kufliddin      var x = 10;  var y = 5;

Слайд 21Makhmazaiitov Kufliddin

Если:


/ / Если время меньше 10,


/ / вы получите приветствие "Доброе утро".
/ / В

противном случае вы получите приветствие "Добрый день".
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}

Makhmazaiitov KufliddinЕсли: / / Если время меньше 10, / / вы получите приветствие

Слайд 22Makhmazaiitov Kufliddin

var d = new Date()
var time

= d.getHours()
if (time

(time>10 && time<16)
{
document.write("Good day");
}
else
{
document.write("Hello World!");
}

Makhmazaiitov Kufliddin var d = new Date() var time = d.getHours() if (time10 && time

Слайд 23Makhmazaiitov Kufliddin


Switch :


{
var x=2;
switch (x)
{
case

1:
document.write(“hello");
break;
case

2:
document.write(“Hai-hello");
break;
default:
document.write(“Goob bye!!");
}

Makhmazaiitov KufliddinSwitch : {var x=2; switch (x) { case 1:   document.write(“hello

Слайд 24Makhmazaiitov Kufliddin
Функции

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

с помощью вызова этой функции

Функции могут быть определены как

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

Слайд 25Makhmazaiitov Kufliddin




function hello()
{
document.write("calling hello function()
");
return;
}
function add(x,y)
{
var

result = x + y;
return result;
}
function circlearea(r)
{
var result = 3.14

* r * r;
return result;
}
hello();
document.write("sum of two number is " +add(12,32)+ "
");
document.write("area of circle is " +circlearea(5));



Makhmazaiitov Kufliddinfunction hello(){document.write(

Слайд 26Makhmazaiitov Kufliddin




function myfunction()
{
alert("HELLO");
}






При нажатии

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




Makhmazaiitov Kufliddinfunction myfunction(){alert(

Слайд 27Makhmazaiitov Kufliddin

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

возвращает значение

Локальная переменная: когда мы определяем переменную внутри функции, она

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



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

Слайд 28Makhmazaiitov Kufliddin
Цикл:




var i=0;
for (i=0;i


document.write("The number is " + i); document.write("
");
}



Makhmazaiitov KufliddinЦикл:  var i=0; for (i=0;i

Слайд 29Makhmazaiitov Kufliddin



var x =19,a;
for(a = 1;a

re = a * x;
document.write(x + " * "+a+" =

" +re + "
");
}



Makhmazaiitov Kufliddinvar x =19,a;for(a = 1;a

Слайд 30Makhmazaiitov Kufliddin



function table(form)
{
var x = form.num.value;
var a;
for(a

= 1;a

* "+a+" = " +re + "
");
}
}




Enter number :







Makhmazaiitov Kufliddinfunction table(form){var x = form.num.value;var a;for(a = 1;a

Слайд 31Makhmazaiitov Kufliddin


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

другому текстовом поле.

Напишите программу для отображения площадь круга в

текстовом поле. Радиус задается пользователем в соответствующее текстовое поле.

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

Слайд 32Makhmazaiitov Kufliddin
While :
while (i

+ 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 --->
Makhmazaiitov KufliddinWhile : while (i

Слайд 33Makhmazaiitov Kufliddin
Arrays :




emp = new Array(3);
emp[0]

= "John";
emp[1] = "TOM";
emp[2] = "Mike";
document.writeln(emp[0]+"
");
document.writeln(emp[1]+"
");
document.writeln(emp[2]);



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

Makhmazaiitov KufliddinArrays : emp = new Array(3);emp[0] =

Слайд 34Makhmazaiitov 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] + "

/>");
}
Makhmazaiitov Kufliddinvar x;var mycars = new Array();mycars[0] =

Слайд 35Makhmazaiitov Kufliddin
Java script try/catch

Try ... Catch позволяет проверить блок кода

на наличие ошибок. Попытка блок содержит код, который будет работать,

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

Слайд 36Makhmazaiitov Kufliddin

Error demo :




function message()
{
addalert("Welcome guest!");
}



message" onclick="message()" />



Makhmazaiitov KufliddinError demo : function message(){addalert(

Слайд 37Makhmazaiitov 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);
}
}
Makhmazaiitov KufliddinHandle the error (use of try/catch block)function message(){try { addalert(

Слайд 38Makhmazaiitov Kufliddin
Обработка событий


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

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

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

Слайд 39Makhmazaiitov Kufliddin
Пример некоторых событий


OnClick событие происходит, когда объект получает нажал




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

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

Слайд 40Makhmazaiitov Kufliddin
Некоторые событие тела :

onresize() : если вы хотите изменить

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


onload() :

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


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


Makhmazaiitov KufliddinНекоторые событие тела :onresize() : если вы хотите изменить размер документа, это событие генерируется.onload() : Это

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

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

world! Please select me !!!





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

Makhmazaiitov Kufliddinonselect() Event : Это событие относится на текстовое поле и области текста, когда пользователь хочет выделить.

Слайд 42Makhmazaiitov Kufliddin



function compute(form)
{
if (confirm("Are you sure?"))
form.result.value

= eval(form.expr.value)
else
alert("Please come back again.")
}



Enter an expression:








Result:




Makhmazaiitov Kufliddin function compute(form) {if (confirm(

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

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

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












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

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

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

перемещается с элемента





Makhmazaiitov Kufliddinfunction showLink(num){ if (num==1) {document.f1.t1.value=

Слайд 48Makhmazaiitov Kufliddin


>

KGFI

Asset

Arena



Makhmazaiitov KufliddinKGFIAssetArena

Слайд 49Makhmazaiitov Kufliddin



function mouseOver()
{
document.b1.src ="b_blue.gif";

}
function mouseOut()
{
document.b1.src ="b_pink.gif";
}



href=“otherpage.html" >





Makhmazaiitov Kufliddin  function mouseOver() { document.b1.src =

Слайд 50Makhmazaiitov Kufliddin
Javascript объект

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

свои собственные объекты и сделать свои собственные типы переменных.
объект


свойства
метод
String метод :

document.write(str.length);

var str="Hello world!"; document.write(str.toUpperCase());


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

Слайд 51Makhmazaiitov 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



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=

Слайд 52Makhmazaiitov 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()
Makhmazaiitov KufliddinОбъект Math :Объект Math позволяет выполнять общие математические задачи. Объект Math включает в себя несколько математические

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

var x

= navigator;
document.write("CodeName=" + x.appCodeName); // mozilla
document.write("MinorVersion=" + x.appMinorVersion); //SP2
document.write("Name=" +

x.appName); // microsoft IE
document.write("Version=" + x.appVersion); //5.0
document.write("CookieEnabled=" + x.cookieEnabled); //true
document.write("CPUClass=" + x.cpuClass); //x86
document.write("Platform=" + x.platform); // Windows
document.write("UA=" + x.userAgent);
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("SystemLanguage=" + x.systemLanguage);
document.write("UserLanguage=" + x.userLanguage);


Makhmazaiitov KufliddinПрограмма для отображения всей информации о браузере:var x = navigator;document.write(

Слайд 54Makhmazaiitov Kufliddin




function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")

&& (version>=4))
{
alert("Your browser is good enough!");
}
else
{

alert("It's time to upgrade your browser!");
}
}








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

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


свойства :
document

event
history
location
name
navigator
screen

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

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

Слайд 56Makhmazaiitov Kufliddin




document.write("opening new Window!!!!!!! ");
document.write("
");
window.open();




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


Makhmazaiitov Kufliddin document.write(

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

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

language = "javascript">
function call()
{
window.open(fm.site.value);
}



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






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

Слайд 58Makhmazaiitov 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()….

Makhmazaiitov KufliddinHistory Object :’ This object provides 	a list of the URL's most recently	visited by the client	Example,

Слайд 59Makhmazaiitov 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



Makhmazaiitov KufliddinJavaScript Объект DateОбъект Date используется для работы с датами и временемvar myDate=new Date() Объект Date будет

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

коды не сразу после вызова функции, но по истечении определенного

интервала времени. Это называется события времени.

Два основных метода, которые используются:
setTimeout() - выполняет через некоторое время
clearTimeout() - отмена setTimeout()

Синтаксис:
var t=setTimeout("javascript statement",milliseconds);
clearTimeout(setTimeout_variable)

Makhmazaiitov KufliddinJavaScript Timing Events С помощью JavaScript можно выполнять некоторые коды не сразу после вызова функции, но

Слайд 61Makhmazaiitov Kufliddin




function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}




onClick = "timedMsg()">

Click on the button above. An alert box

will be displayed after 5 seconds.






Makhmazaiitov Kufliddinfunction timedMsg(){var t=setTimeout(

Слайд 62Makhmazaiitov Kufliddin



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





type="text" id="txt">

Click on the button above. The input field will

count for ever, starting at 0.




Makhmazaiitov Kufliddinvar c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout(

Слайд 63Makhmazaiitov Kufliddin
Показать часы:




function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var

s=today.getSeconds();
// add a zero in front of numbers

Makhmazaiitov KufliddinПоказать часы: function startTime(){var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();// add a zero in front of numbers

Слайд 64Makhmazaiitov Kufliddin

function checkTime(i)
{
if (i

onload="startTime()">




Makhmazaiitov Kufliddinfunction checkTime(i){if (i

Слайд 65Makhmazaiitov 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.
Makhmazaiitov KufliddinHandling Form EventsWrite a programme to compute addition,subtraction , multiplication and division by clicking corresponding buttons.

Слайд 66Makhmazaiitov Kufliddin



function white()
{
document.bgColor = "white";
}
function black()
{
document.bgColor

= "black";
}




Light On

value = "r1" onclick = "white()" >
Light Off




Makhmazaiitov Kufliddin function white(){document.bgColor =

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

входных данных в HTML форм перед отправкой содержание к серверу.

Данные

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

Слайд 68Makhmazaiitov Kufliddin




function validate_form()
{
if (f1.t1.value == "")

{
alert ( "Please fill the

login id" );
return false;
}
if (f1.t2.value == "" )
{
alert ( "Please fill the password" );
return false;
}
return true;
}

Makhmazaiitov Kufliddinfunction validate_form(){   if (f1.t1.value ==

Слайд 69Makhmazaiitov Kufliddin




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

:

Password :





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

Слайд 70Makhmazaiitov Kufliddin




function validfn(frm)
{
var str = frm.fn.value;
if(str.length

== 0)
{
alert("first name field is empty ");
} }
function validln(frm)
{
var str

= frm.ln.value;
if(str.length == 0)
{
alert("Last name field is empty ");
} }
Makhmazaiitov Kufliddinfunction validfn(frm){var str = frm.fn.value;if(str.length == 0){alert(

Слайд 71Makhmazaiitov Kufliddin


function validem(frm)
{
var str = frm.em.value;
if(str.length == 0)
{
alert("E-mail id field

is empty");
}
}
function validco(frm)
{
var str = frm.comm.value;
if(str.length == 0)
{
alert("comment field should

not empty is empty");
}
}
Makhmazaiitov Kufliddinfunction validem(frm){var str = frm.em.value;if(str.length == 0){alert(

Слайд 72Makhmazaiitov Kufliddin

function process(frm)
{
var fname = frm.fn.value;
var lname = frm.ln.value;
var email

= frm.em.value;
var com = frm.comm.value;
disp = open("" , "result");
disp.document.write("Thanks for

signing
");
disp.document.write("First Name : " +fname+ "
");
disp.document.write("Last Name : " +fname+ "
");
disp.document.write("E-mail ID : " +fname+ "
");
disp.document.write("yor comments : " +fname+ "
");
if(disp.confirm("is this info correct"))
disp.close();
}




Makhmazaiitov Kufliddinfunction process(frm){var fname = frm.fn.value;var lname = frm.ln.value;var email = frm.em.value;var com = frm.comm.value;disp = open(

Слайд 73Makhmazaiitov Kufliddin


Application Form
Enter your first name :

type = text name = "fn" size = 20 onblur

= "validfn(this.form)">


Enter your Last name :


Enter your E-mail ID :


Please enter your comments :







Makhmazaiitov Kufliddin Application Form Enter your first name : Enter your Last name : Enter your E-mail

Слайд 74JavaScript работа со строками


javascript строки

rel="stylesheet" type="text/css" href="/style.css">




Введите текст:



Введите слово:




Количество слов в тексте:




Makhmazaiitov Kufliddin

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

Слайд 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

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)

Слайд 76Работа с окнами

javascript окно

type="text/css" href="/style.css">







javascript окно







Makhmazaiitov Kufliddin

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

Слайд 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() {
window.close();
}

Makhmazaiitov Kufliddin

function choiceOf(){  if (confirm(

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

стиля DOM-элемента. Например, увеличение координаты style.left от 0px до 100px сдвигает элемент.
Код, который производит изменение, вызывается

таймером. Интервал таймера очень мал и поэтому анимация выглядит плавной. Это тот же принцип, что и в кино: для непрерывной анимации достаточно 24 или больше вызовов таймера в секунду.
Псевдо-код для анимации выглядит так:
var timer = setInterval(function() {
показать новый кадр
if (время вышло)
clearInterval(timer);
}, 10)

Задержка между кадрами в данном случае составляет 10 ms, что означает 100 кадров в секунду.
В большинстве фреймворков, задержка по умолчанию составляет 10-15 мс. Меньшая задержка делает анимацию более плавной, но только в том случае, если браузер достаточно быстр, чтобы анимировать каждый шаг вовремя.

Makhmazaiitov Kufliddin

Основы анимацииС точки зрения HTML/CSS, анимация — это постепенное изменение стиля DOM-элемента. Например, увеличение координаты style.left от 0px до 100px сдвигает элемент.Код, который

Слайд 79Пример
function move(elem) {
var left = 0; // начальное

значение
function frame() { // функция для отрисовки


left++; elem.style.left = left + 'px'
if (left == 100) {
clearInterval(timer); // завершить анимацию
} }
var timer = setInterval(frame, 10) // рисовать каждые 10мс
}


Makhmazaiitov Kufliddin

Примерfunction move(elem) { var left = 0; // начальное значение function frame() { // функция для отрисовки

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

(в миллисекундах, т.е. 1/1000 секунды).
Например, 10мс.
duration
Общее время, которое должна

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

Makhmazaiitov Kufliddin

Структура анимацииУ анимации есть три основных параметра:delay Время между кадрами (в миллисекундах, т.е. 1/1000 секунды). Например, 10мс.durationОбщее

Слайд 81






class="example_path">



Makhmazaiitov Kufliddin

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

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

Слайд 83
Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

Слайд 84Makhmazaiitov Kufliddin
Спасибо !!!!!

Makhmazaiitov KufliddinСпасибо !!!!!

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика