Слайд 1Makhmazaiitov Kufliddin
JAVA SCRIPT
Слайд 2Makhmazaiitov Kufliddin
Введение
Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве
с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен
для создания интерактивных html-документов. Основные области использования JavaScript:
Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.
Проверка правильности заполнения пользовательских форм. Решение "локальных" задач с помощью сценариев.
JavaScript-код - основа большинства Ajax-приложений.
Слайд 3Makhmazaiitov Kufliddin
Что делает JavaScript !!
JavaScript дает HTML дизайнерам инструмент программирования
- HTML авторы, как правило, не программисты, но JavaScript это
язык сценариев с очень простым синтаксисом! Почти каждый может положить небольшие "фрагменты" кода на своих страницах HTML
JavaScript может поставить динамический текст в HTML страницу - A JavaScript заявление так:
document.write("" + имя + "");
может написать переменный текст в HTML страницу
JavaScript может реагировать на события - JavaScript может быть установлен, чтобы выполнить, когда что-то происходит, например, когда завершения загрузки страницы или когда пользователь нажимает на HTML элемент
Слайд 4Makhmazaiitov Kufliddin
JavaScript может читать и писать HTML элементы - JavaScript
может читать и изменять содержимое на HTML элемент
JavaScript может
использоваться для проверки данных - JavaScript может быть использован для проверки данных формы, до его передачи на сервер. Это экономит сервер от дополнительной обработки
JavaScript может быть использован для обнаружения браузер посетителя - JavaScript может быть использован для обнаружения браузер посетителя, и - в зависимости от браузера - загрузку еще одной страницы, специально предназначенные для этого браузера
JavaScript может быть использован для создания cookie - JavaScript может быть использован для хранения и извлечения информации о компьютере посетителя
Слайд 5Makhmazaiitov Kufliddin
Hello World
document.write("Hello World!");
Комментарий:
Одна строчный комментарий начинаются с //
Многострочный комментарий /*-комментарий- */
Слайд 6Makhmazaiitov Kufliddin
JavaScript в секции body будут выполнены во время загрузки
страниц.
JavaScript в header секции будут выполнены при вызове JavaScript
представляет собой последовательность инструкций для выполнения в браузере.
Слайд 7Makhmazaiitov Kufliddin
Заявления JavaScript могут быть сгруппированы в блоки.
{
document.write("This
is a header"); document.write("This is a paragraph"); document.write("This is
another paragraph
");
}
Использование внешнего файла
Слайд 8Makhmazaiitov Kufliddin
myHtml.html :
Enjoy !!!!!!
test.js :
document.write("hello i am
from test");
Слайд 9Makhmazaiitov Kufliddin
Объявление переменных
var x=5;
var name=“abcd”
_________________________________________________
{
var x="the number
is" , y=50;
document.write(x+y);
}
Слайд 10Makhmazaiitov Kufliddin
var 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);
Слайд 12Makhmazaiitov Kufliddin
var x = "ab12.5";
var a =
parseFloat(x);
document.write(a);
…….. NaN (not a number)……..
Слайд 13Makhmazaiitov Kufliddin
JavaScript всплывающих окон
В JavaScript мы можем создать три вида
всплывающих окон:
Alert box (окно оповещения)
Confirm box (окно подтверждения)
Prompt box (контекстное
окно).
Слайд 17Makhmazaiitov Kufliddin
Арифметический оператор
+ ,-,*,/,%
Оператор сравнения
,=,==
Оператор присваивания
Условный оператор
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
Логический оператор
Логические операции обычно используется
для объединения нескольких сравнений в условном выражении
Слайд 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));
Слайд 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));
Слайд 21Makhmazaiitov Kufliddin
Если:
/ / Если время меньше 10,
/ / вы получите приветствие "Доброе утро".
/ / В
противном случае вы получите приветствие "Добрый день".
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
Слайд 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!");
}
Слайд 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!!");
}
Слайд 24Makhmazaiitov 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));
Слайд 26Makhmazaiitov Kufliddin
function myfunction()
{
alert("HELLO");
}
При нажатии
на кнопку, функция будет вызываться. Функция будет оповещать сообщение.
Слайд 27Makhmazaiitov Kufliddin
Создать JavaScript файл для:
Передачи параметра в функцию
Функция
возвращает значение
Локальная переменная: когда мы определяем переменную внутри функции, она
может быть доступ только в функциях,
Глобальная переменная : когда мы определяем переменную вне функции, она может быть доступна на всех функций
Слайд 28Makhmazaiitov Kufliddin
Цикл:
var i=0;
for (i=0;i
document.write("The number is " + i); document.write("
");
}
Слайд 29Makhmazaiitov Kufliddin
var x =19,a;
for(a = 1;a
re = a * x;
document.write(x + " * "+a+" =
" +re + "
");
}
Слайд 30Makhmazaiitov Kufliddin
function table(form)
{
var x = form.num.value;
var a;
for(a
= 1;a
* "+a+" = " +re + "
");
}
}
Слайд 31Makhmazaiitov 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 --->
Слайд 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()………………
Слайд 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] + "
/>");
}
Слайд 35Makhmazaiitov Kufliddin
Java script try/catch
Try ... Catch позволяет проверить блок кода
на наличие ошибок. Попытка блок содержит код, который будет работать,
а блок улов содержит код, который будет выполнен, если произошла ошибка.
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
Слайд 36Makhmazaiitov Kufliddin
Error demo :
function message()
{
addalert("Welcome guest!");
}
message" onclick="message()" />
Слайд 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);
}
}
Слайд 38Makhmazaiitov Kufliddin
Обработка событий
Каждый элемент на веб-странице имеет определенные события, которые
могут вызвать функции JavaScript. Например, мы можем использовать событие OnClick
из элемента кнопки, чтобы указать, что функция будет работать, когда пользователь нажимает на кнопку. Определим события в HTML тегов
Слайд 39Makhmazaiitov Kufliddin
Пример некоторых событий
OnClick событие происходит, когда объект получает нажал
ondbclick событие используется для двойной щелчок
Слайд 40Makhmazaiitov Kufliddin
Некоторые событие тела :
onresize() : если вы хотите изменить
размер документа, это событие генерируется.
onload() :
Это событие генерируется, когда мы загружаем или откроем документ в браузере.
onunload() : Это событие генерируется, когда мы закрываем документ в браузере.
Слайд 42Makhmazaiitov Kufliddin
function compute(form)
{
if (confirm("Are you sure?"))
form.result.value
= eval(form.expr.value)
else
alert("Please come back again.")
}
Слайд 43Makhmazaiitov Kufliddin
OnChange событие : Мероприятие OnChange возникает всякий раз, когда
изменяется элемент формы. Это может произойти, когда содержимое текстового элемента
управления изменениями, или когда выбор в выборе изменений список.
Слайд 46Makhmazaiitov Kufliddin
onMouseOver
Мероприятие OnMouseOver генерируется всякий раз, когда курсор мыши перемещается
над элементом.
onMouseOut
Мероприятие onMouseOut генерируется всякий раз, когда курсор мыши
перемещается с элемента
Слайд 48Makhmazaiitov Kufliddin
>
KGFI
Asset
Arena
Слайд 49Makhmazaiitov Kufliddin
function mouseOver()
{
document.b1.src ="b_blue.gif";
}
function mouseOut()
{
document.b1.src ="b_pink.gif";
}
href=“otherpage.html" >
Слайд 50Makhmazaiitov Kufliddin
Javascript объект
JavaScript является объектно-ориентированного программирования (ООП).Язык ООП позволяет определить
свои собственные объекты и сделать свои собственные типы переменных.
объект
свойства
метод
String метод :
document.write(str.length);
var str="Hello world!"; document.write(str.toUpperCase());
Слайд 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
Слайд 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()
Слайд 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);
Слайд 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
Слайд 56Makhmazaiitov Kufliddin
document.write("opening new Window!!!!!!! ");
document.write("
");
window.open();
window.open(“table.html”);
window.open(“http://www.google.com”);
Слайд 57Makhmazaiitov Kufliddin
Написать программу, в которой пользователь введет имя сайта в
текстовом поле, нажав кнопку "открыт сайт" сайт будет открываться.
language = "javascript">
function call()
{
window.open(fm.site.value);
}
please Enter the complete URL : For Example
http://www.yahoo.com
Слайд 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()….
Слайд 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
Слайд 60Makhmazaiitov Kufliddin
JavaScript Timing Events
С помощью JavaScript можно выполнять некоторые
коды не сразу после вызова функции, но по истечении определенного
интервала времени. Это называется события времени.
Два основных метода, которые используются:
setTimeout() - выполняет через некоторое время
clearTimeout() - отмена setTimeout()
Синтаксис:
var t=setTimeout("javascript statement",milliseconds);
clearTimeout(setTimeout_variable)
Слайд 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.
Слайд 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.
Слайд 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
Слайд 64Makhmazaiitov Kufliddin
function checkTime(i)
{
if (i
onload="startTime()">
Слайд 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.
Слайд 67Makhmazaiitov Kufliddin
Проверка с помощью JavaScript
JavaScript может быть использован для проверки
входных данных в HTML форм перед отправкой содержание к серверу.
Данные
формы, которые обычно проверяются в JavaScript могут быть:
пользователь оставил необходимые поля пустыми?
пользователь ввел действительный адрес электронной почты?
пользователь ввел корректную дату?
пользователь ввел текст в цифровой области?
Слайд 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;
}
Слайд 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 ");
} }
Слайд 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");
}
}
Слайд 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();
}
Слайд 74JavaScript работа со строками
javascript строки
rel="stylesheet" type="text/css" href="/style.css">
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
Слайд 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
Слайд 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Пример
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
Слайд 80Структура анимации
У анимации есть три основных параметра:
delay
Время между кадрами
(в миллисекундах, т.е. 1/1000 секунды).
Например, 10мс.
duration
Общее время, которое должна
длиться анимация, в мс.
Например, 1000мс.
step(progress)
Функция step(progress) занимается отрисовкой состояния анимации, соответствующего времени progress.Каждый кадр выполняется, сколько времени прошло: progress = (now-start)/duration. Значениеprogress меняется от 0 в начале анимации до 1 в конце. Так как вычисления с дробными числами не всегда точны, то в конце оно может быть даже немного больше 1. В этом случае мы уменьшаем его до 1 и завершаем анимацию.
Makhmazaiitov Kufliddin
class="example_path">
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
Слайд 84Makhmazaiitov Kufliddin
Спасибо !!!!!
![Makhmazaiitov KufliddinArrays : emp = new Array(3);emp[0] =](/img/tmb/4/387186/821c60615cc7797c0ca4d42bb4876d60-800x.jpg "JavaScript Makhmazaiitov KufliddinArrays : emp = new Array(3);emp[0] =")
![Makhmazaiitov Kufliddinvar x;var mycars = new Array();mycars[0] =](/img/thumbs/d453236602cc714f64af3ff3e497ebe0-800x.jpg "JavaScript Makhmazaiitov Kufliddinvar x;var mycars = new Array();mycars[0] =")
=4))" alt="Makhmazaiitov Kufliddinfunction 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!");">
