Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


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

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

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

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

Презентация на тему Язык программирования JavaScript

Содержание

Makhmazaiitov KufliddinВведениеЯзык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript: Создание динамических страниц, т.е. страниц, содержимое которых может
Makhmazaiitov KufliddinJAVA SCRIPT Makhmazaiitov KufliddinВведениеЯзык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Makhmazaiitov KufliddinЧто делает JavaScript !!JavaScript дает HTML дизайнерам инструмент программирования - HTML Makhmazaiitov KufliddinJavaScript может читать и писать HTML элементы - JavaScript может читать Makhmazaiitov KufliddinHello World  document.write( Makhmazaiitov KufliddinJavaScript в секции body будут выполнены во время загрузки страниц. JavaScript Makhmazaiitov KufliddinЗаявления JavaScript могут быть сгруппированы в блоки. {document.write( Makhmazaiitov KufliddinmyHtml.html :Enjoy !!!!!!test.js :document.write( Makhmazaiitov KufliddinОбъявление переменныхvar x=5;var name=“abcd”_________________________________________________ {var x= Makhmazaiitov Kufliddinvar x = 12.5 + 7.5;document.write(x);Каков результат::…… “12.5”……. Makhmazaiitov KufliddinWhat is the output ?var x = Makhmazaiitov Kufliddinvar x = Makhmazaiitov KufliddinJavaScript всплывающих оконВ JavaScript мы можем создать три вида всплывающих окон:Alert Makhmazaiitov KufliddinAlert box : Окно оповещения часто используется, если вы хотите, чтобы Makhmazaiitov KufliddinConfirm box : Когда окно подтверждения всплывает, пользователь должен будет нажать Makhmazaiitov KufliddinPrompt box : Контекстное окно часто используется, если вы хотите, чтобы Makhmazaiitov KufliddinАрифметический оператор   + ,-,*,/,%Оператор сравнения   ,=,==Оператор присваиванияУсловный Makhmazaiitov Kufliddinvar x = 10;alert( Makhmazaiitov Kufliddin Makhmazaiitov Kufliddin      var x = 10; Makhmazaiitov KufliddinЕсли: / / Если время меньше 10, / / вы получите Makhmazaiitov Kufliddin var d = new Date() var time = d.getHours() if (time10 && time Makhmazaiitov KufliddinSwitch : {var x=2; switch (x) { case 1: Makhmazaiitov KufliddinФункцииФункция содержит код, который будет выполняться по событию или с помощью Makhmazaiitov Kufliddinfunction hello(){document.write( Makhmazaiitov Kufliddinfunction myfunction(){alert( Makhmazaiitov KufliddinСоздать JavaScript файл для: Передачи параметра в функцию Функция возвращает значениеЛокальная Makhmazaiitov KufliddinЦикл:  var i=0; for (i=0;i Makhmazaiitov Kufliddinvar x =19,a;for(a = 1;a Makhmazaiitov Kufliddinfunction table(form){var x = form.num.value;var a;for(a = 1;a Makhmazaiitov KufliddinНапишите программу, чтобы скопировать содержимое одного текстового поля к другому текстовом Makhmazaiitov KufliddinWhile : while (i Makhmazaiitov KufliddinArrays : emp = new Array(3);emp[0] = Makhmazaiitov Kufliddinvar x;var mycars = new Array();mycars[0] = Makhmazaiitov KufliddinError demo : function message(){addalert( Makhmazaiitov KufliddinHandle the error (use of try/catch block)function message(){try { addalert( Makhmazaiitov KufliddinОбработка событийКаждый элемент на веб-странице имеет определенные события, которые могут вызвать Makhmazaiitov KufliddinПример некоторых событийOnClick событие происходит, когда объект получает нажал ondbclick событие используется для двойной щелчок Makhmazaiitov KufliddinНекоторые событие тела :onresize() : если вы хотите изменить размер документа, Makhmazaiitov Kufliddinonselect() Event : Это событие относится на текстовое поле и области Makhmazaiitov Kufliddin function compute(form) {if (confirm( Makhmazaiitov KufliddinOnChange событие : Мероприятие OnChange возникает всякий раз, когда изменяется элемент Makhmazaiitov Kufliddinelse alert ( Makhmazaiitov Kufliddin  onFocus: Мероприятие OnFocus отправляется всякий раз, когда элемент формы Makhmazaiitov KufliddinonMouseOverМероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается над элементом.onMouseOut Makhmazaiitov Kufliddinfunction showLink(num){ if (num==1) {document.f1.t1.value= Makhmazaiitov KufliddinKGFIAssetArena Makhmazaiitov Kufliddin  function mouseOver() { document.b1.src = 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= Makhmazaiitov KufliddinОбъект Math :Объект Math позволяет выполнять общие математические задачи. Объект Math Makhmazaiitov KufliddinПрограмма для отображения всей информации о браузере:var x = navigator;document.write( Makhmazaiitov Kufliddinfunction detectBrowser(){var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);if ((browser===4)) {"> Makhmazaiitov Kufliddinобъект Окно : представляет окно браузера и может быть использован для Makhmazaiitov Kufliddin document.write( Makhmazaiitov KufliddinНаписать программу, в которой пользователь введет имя сайта в текстовом поле, Makhmazaiitov KufliddinHistory Object :’ This object provides 	a list of the URL's Makhmazaiitov KufliddinJavaScript Объект DateОбъект Date используется для работы с датами и временемvar Makhmazaiitov KufliddinJavaScript Timing Events С помощью JavaScript можно выполнять некоторые коды не Makhmazaiitov Kufliddinfunction timedMsg(){var t=setTimeout( Makhmazaiitov Kufliddinvar c=0;var t;function timedCount(){document.getElementById('txt').value=c;c=c+1;t=setTimeout( Makhmazaiitov KufliddinПоказать часы: function startTime(){var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();// add a Makhmazaiitov Kufliddinfunction checkTime(i){if (i Makhmazaiitov KufliddinHandling Form EventsWrite a programme to compute addition,subtraction , multiplication and Makhmazaiitov Kufliddin function white(){document.bgColor = Makhmazaiitov KufliddinПроверка с помощью JavaScriptJavaScript может быть использован для проверки входных данных Makhmazaiitov Kufliddinfunction validate_form(){   if (f1.t1.value == Makhmazaiitov KufliddinLogin ID : Password : If(f1.t1.value.indexOf(“@”) == -1)  // for Makhmazaiitov Kufliddinfunction validfn(frm){var str = frm.fn.value;if(str.length == 0){alert( Makhmazaiitov Kufliddinfunction validem(frm){var str = frm.em.value;if(str.length == 0){alert( Makhmazaiitov Kufliddinfunction process(frm){var fname = frm.fn.value;var lname = frm.ln.value;var email = frm.em.value;var Makhmazaiitov Kufliddin Application Form Enter your first name : Enter your Last JavaScript работа со строками   javascript строки function numword(obj) { var t=obj.textin.value; var s=obj.slovo.value; var m=s.length; var res=0; var Работа с окнами   javascript окно function choiceOf(){  if (confirm( Основы анимацииС точки зрения HTML/CSS, анимация — это постепенное изменение стиля DOM-элемента. Примерfunction move(elem) { var left = 0; // начальное значение function frame() Структура анимацииУ анимации есть три основных параметра:delay Время между кадрами (в миллисекундах, Makhmazaiitov Kufliddin function animate(opts) { var start = new Date; // сохранить время начала Makhmazaiitov Kufliddin Makhmazaiitov KufliddinСпасибо !!!!!
Слайды презентации

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

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

в сотрудничестве с Sun Microsystems и анансирован в 1995

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

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

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

JavaScript дает HTML дизайнерам

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

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

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

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


Слайд 4 Makhmazaiitov Kufliddin


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

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

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

элемент

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

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

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

Слайд 5 Makhmazaiitov Kufliddin
Hello World



document.write("Hello World!");

Makhmazaiitov KufliddinHello World  document.write(





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

комментарий /*-комментарий- */

Слайд 6 Makhmazaiitov Kufliddin


JavaScript в секции body будут выполнены во

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

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

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


Слайд 7 Makhmazaiitov Kufliddin

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

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

type="text/javascript">
{
document.write("This is a header"); document.write("This is a

paragraph

"); document.write("

This is another paragraph

");
}


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



Слайд 8 Makhmazaiitov Kufliddin


myHtml.html :






Enjoy !!!!!!



test.js :
document.write("hello

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

i am from test");


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




{
var

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

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




Слайд 10 Makhmazaiitov Kufliddin




var x = 12.5

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

+ 7.5;
document.write(x);




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

…… “12.5”…….


Слайд 11 Makhmazaiitov Kufliddin


What is the output ?



Makhmazaiitov KufliddinWhat is the output ?var x =

"javascript">
var x = "12.5";
var y = 7.5
var a =

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









Слайд 12 Makhmazaiitov Kufliddin




var x = "ab12.5";
var

Makhmazaiitov Kufliddinvar x =

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




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


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

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

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

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

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

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

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

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










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

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

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

продолжить.










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

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

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

страницу.











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

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

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

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

Логический оператор
Логические

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

Слайд 18 Makhmazaiitov Kufliddin




var x = 10;
alert("the

Makhmazaiitov Kufliddinvar x = 10;alert(

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));




Слайд 19 Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

Слайд 20 Makhmazaiitov Kufliddin



Makhmazaiitov Kufliddin   var x = 10; var y =

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));




Слайд 21 Makhmazaiitov Kufliddin

Если:


/ / Если время

Makhmazaiitov KufliddinЕсли: / / Если время меньше 10, / / вы

меньше 10,
/ / вы получите приветствие "Доброе утро".


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


Слайд 22 Makhmazaiitov Kufliddin

var d = new Date()

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

var time = d.getHours()
if (time

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


Слайд 23 Makhmazaiitov Kufliddin


Switch :


{
var x=2;
switch (x)

Makhmazaiitov KufliddinSwitch : {var x=2; switch (x) { case 1:

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

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


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

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

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

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

Функции могут

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

Слайд 25 Makhmazaiitov Kufliddin




function hello()
{
document.write("calling hello function()

Makhmazaiitov Kufliddinfunction hello(){document.write(


");
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));




Слайд 26 Makhmazaiitov Kufliddin




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






Makhmazaiitov Kufliddinfunction myfunction(){alert(

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

оповещать сообщение.







Слайд 27 Makhmazaiitov Kufliddin

Создать JavaScript файл для:
Передачи параметра в

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

функцию
Функция возвращает значение

Локальная переменная: когда мы определяем переменную

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




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




var i=0;
for

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

(i=0;i

/>");
}




Слайд 29 Makhmazaiitov Kufliddin



var x =19,a;
for(a =

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

1;a

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




Слайд 30 Makhmazaiitov Kufliddin



function table(form)
{
var x =

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

form.num.value;
var a;
for(a = 1;a

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




Enter number :








Слайд 31 Makhmazaiitov Kufliddin


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

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

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

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

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

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

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

Makhmazaiitov KufliddinWhile : while (i

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 =

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

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()………………


Слайд 34 Makhmazaiitov Kufliddin

var x;
var mycars = new Array();
mycars[0] =

Makhmazaiitov Kufliddinvar 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 позволяет проверить

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

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

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

Слайд 36 Makhmazaiitov Kufliddin

Error demo :




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



Makhmazaiitov KufliddinError demo : function message(){addalert(

type="button" value="View message" onclick="message()" />




Слайд 37 Makhmazaiitov Kufliddin
Handle the error (use of try/catch block)

function

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

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
Обработка событий


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

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

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

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

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


OnClick событие происходит, когда объект

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

получает нажал


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


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

onresize() : если вы

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

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

"func()" >

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


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



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

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

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

cols="20" rows="5“ onselect="func()">
Hello world! Please select me !!!





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


Слайд 42 Makhmazaiitov Kufliddin



function compute(form)
{
if (confirm("Are you

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

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




Enter an expression:








Result:





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

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

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

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













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

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

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

когда курсор мыши перемещается с элемента






Слайд 48 Makhmazaiitov Kufliddin


Makhmazaiitov KufliddinKGFIAssetArena

"t1" size=60 >

KGFI

Asset

Arena




Слайд 49 Makhmazaiitov Kufliddin



function mouseOver()
{

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


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












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

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

Makhmazaiitov KufliddinJavascript объект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

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=

: 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 позволяет выполнять общие

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
Программа для отображения всей информации о браузере:

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

type="text/javascript">
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);



Слайд 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") && (version>=4))
{
alert("Your browser is good

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








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

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

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


свойства

:
document
event
history
location
name
navigator
screen

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


Слайд 56 Makhmazaiitov Kufliddin




document.write("opening new Window!!!!!!!

Makhmazaiitov Kufliddin document.write(

");
document.write("
");
window.open();




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



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

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

сайта в текстовом поле, нажав кнопку "открыт сайт" сайт

будет открываться.




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







Слайд 58 Makhmazaiitov Kufliddin

History Object :’ This object provides
a

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

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 используется для работы

Makhmazaiitov KufliddinJavaScript Объект 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 можно

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

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

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

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

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


Слайд 61 Makhmazaiitov Kufliddin




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




Makhmazaiitov Kufliddinfunction timedMsg(){var t=setTimeout(

timed alertbox!" onClick = "timedMsg()">

Click on the button above.

An alert box will be displayed after 5 seconds.







Слайд 62 Makhmazaiitov Kufliddin



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




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

count!" onClick="timedCount()">


Click on the button above. The

input field will count for ever, starting at 0.





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




function startTime()
{
var today=new Date();
var

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

h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of

numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}



Слайд 64 Makhmazaiitov Kufliddin

function checkTime(i)
{
if (i

Makhmazaiitov Kufliddinfunction checkTime(i){if (i

}
return i;
}









Слайд 65 Makhmazaiitov Kufliddin
Handling Form Events


Write a programme to compute

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

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



function white()
{
document.bgColor =

Makhmazaiitov Kufliddin function white(){document.bgColor =

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




Light On

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





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

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

для проверки входных данных в HTML форм перед отправкой

содержание к серверу.

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

Слайд 68 Makhmazaiitov Kufliddin




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

Makhmazaiitov Kufliddinfunction 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;
}


Слайд 69 Makhmazaiitov Kufliddin




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

onsubmit="return validate_form

( );">
Login ID :

Password :





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

Слайд 70 Makhmazaiitov Kufliddin




function validfn(frm)
{
var str

Makhmazaiitov Kufliddinfunction validfn(frm){var str = frm.fn.value;if(str.length == 0){alert(

= 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 ");
} }

Слайд 71 Makhmazaiitov Kufliddin


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

Makhmazaiitov Kufliddinfunction validem(frm){var str = frm.em.value;if(str.length == 0){alert(

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

0)
{
alert("comment field should not empty is empty");
}
}

Слайд 72 Makhmazaiitov Kufliddin

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

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

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();
}





Слайд 73 Makhmazaiitov Kufliddin


Application Form
Enter your first name

Makhmazaiitov Kufliddin Application Form Enter your first name : Enter your

:

= 20 onblur = "validfn(this.form)">


Enter your Last name :


Enter your E-mail ID :


Please enter your comments :








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


javascript строки

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






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



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




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




Makhmazaiitov Kufliddin


Слайд 75
function numword(obj) {
var t=obj.textin.value;
var s=obj.slovo.value;
var

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

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 окно

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









javascript окно







Makhmazaiitov Kufliddin


Слайд 77

function choiceOf(){
if (confirm("Вы действительно хотите открыть

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, анимация — это

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

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

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

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

Makhmazaiitov Kufliddin


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

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

// начальное значение
function frame() { // функция

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


Makhmazaiitov Kufliddin


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

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

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

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

Makhmazaiitov Kufliddin


Слайд 81



Makhmazaiitov Kufliddin

src="width.js">






Makhmazaiitov Kufliddin


Слайд 82
function animate(opts) {
var start = new Date;

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
Makhmazaiitov Kufliddin

Makhmazaiitov Kufliddin

  • Имя файла: yazyk-programmirovaniya-javascript.pptx
  • Количество просмотров: 252
  • Количество скачиваний: 2