javascript2 - maihami.maad.ac.irmaihami.maad.ac.ir/teaching/web/java script2.pdf · read/write text...

طراحی صفحات وب

JavaScript2

وفا میهمی : مدرس

1

فهرست مطالة

2

– event-driven programs• onload, onunload

– HTML forms & attributes• button, text box, text area

• selection list, radio button, check box, password, hidden, …

– JavaScript form events• properties: name, type, value, …

• methods: blur(), focus(), click(), …

• event handlers: onblur(), onfocus(), onchange(), onclick(), …

– advanced features & techniques• windows & frames, timeouts, cookies

ترنامه های واتسته ته رخداد ها

3

:اجشا هی ضذ سشیالجاا هؼوال تػست ++Cصتاای •.ضشع هی کین اص الیي خط ت غست تشتیثی اجشا هی کین mainاص تاتغ –هوکي است تشاه داسای حلق یا کذ ضشطی تاضذ، اها دس ش غست اجشای تشاه قذم –

. ت قذم خاذ تد.تشاه داسای ضشع خایاى است تشاه ت تشتیة دلخا تشاه یس اجشا هی ضد–

غفح ت سخذاد . اها هحاسثات دسى یک غفح ب تذست سشیال است•. ایی هثل کلیک هس یا دکو ا جاب هی دذ

دس اػوالی سا هطخع هی کذ ک دس اثش سخذاد ا JavaScriptقسوتی اص اتضاسای –.غفح ب اقغ هی ضذ

. تشاه یس کتشل صیادی سی تشتیة اجشای کذ ذاسد–خیص دس اقغ یچ تشتیة اجشایی جد ذاسد غفح هتظش است تا ت سخذاد ای–

.آهذ اکص طاى دذ

OnLoad & OnUnload

4

ساد تشیي سخذاد ا، • OnLoadسخذاد ای OnUnload ستذ .

دس OnLoadخاغیت –ت کذی bodyتشچسح

اضاس هی کذ ک گام تاال آهذى غفح ب تطس

.خدکاس اجشا هی ضد

دس OnUnloadخاغیت –ت کذی bodyتشچسة

اضاس هی کذ ک گام تستي غفح ب تطس

.خدکاس اجشا هی ضد

<html>

<!–- COMP519 form01.html 12.10.2006 -->

<head>

<title>Hello/Goodbye page</title>

<script type="text/javascript">

function Hello()

{

globalName=prompt("Welcome to my page. " +

"What is your name?","");

}

function Goodbye()

{

alert("So long, " + globalName +

" come back real soon.");

}

</script>

</head>

<body onload="Hello();" onunload="Goodbye();">

Whatever text appears in the page.

</body>

</html> view page

f\form1.htm

HTML forms

5

.اکثش سخذاد ایی ک یاص ت خشداصش داسذ هشتط ت ػاغش فشها ستذ•هجوػ ای اص ػاغش جت کتشل سدی خشجی HTMLیک فشم •

.سخذادای غفح است

<form name="FormName">

…

</form>

:ػاغش فشم•... دکو، لیست سادییی، دکو سادییی، جؼث کتشلی، سهض سد : سدیا–

....جؼث هتي، احی هتي : سدی خشجی–

.یض استفاد هی ضذ CGIفشها دس تشاه یسی •

Button Element

6

<html>

<!–- COMP519 form02.html 12.10.2006 -->

<head>

<title> Fun with Buttons</title>

<script type="text/javascript"

src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js">

</script>

</head>

<body>

<form name="ButtonForm">

<input type="button" value="Click for Lucky Number"

onclick=“var num = RandomInt(1, 100);

alert('The lucky number for the day is ' + num);" />

</form>

</body>

</html>

.ساده ترین عنصر فرم دکمو است•

.کلیک روی دکمو یک رخداد است–

•<input type="button" value="LABEL" onclick="JAVASCRIPT_CODE"/>

view page

f\form2.htm

Buttons & Functions

7

<html>

<!–- COMP519 form03.html 13.10.2006 -->

<head>

<title>Fun with Buttons</title>


function Greeting()

// Results: displays a time-sensitive greeting

{ var now = new Date();

if (now.getHours() < 12) {

alert("Good morning");

}

else if (now.getHours() < 18) {

alert("Good afternoon");

} else {

alert("Good evening");

} }

</script>

</head>

<body>


<input type="button" value="Click for Greeting"

onclick="Greeting();" />

</form>

</body>

</html>

تشای کاسای خیچیذ تش، تاتغ •هسد ظش سا تیسیذ ت

دکو onclickسخذاد . غل کیذ

view page

f\form3.htm

Buttons & Windows

8

.تشای وایص خیغاهای کتا غیش هؼول هاسة است alertجؼث •.اها وایص خیغاهای طالی داسای فشهت یاص ت اتضاس هاسة تشی داسد••alert جضء غفح یست تایذ کاستش تػست غشیح آشا تثذد.استفاد کشد؟ document.writeآیا هی ضد اص : سال•

.چى کل غفح سا تغییش هی دذ–خیش –

:هی ضد یک خجش جذیذ تاص ود آجا ضت• var OutputWindow = window.open(); // open a window and assign

// a name to that object

// (first arg is an HREF)

OutputWindow.document.open(); // open that window for writing

OutputWindow.document.write("WHATEVER"); // write text to that

// window as before

OutputWindow.document.close(); // close the window

Window Example

9

<html>

<!– COMP519 form04.html 13.10.2006 -->

<head>

<title> Fun with Buttons </title>


function Help()

// Results: displays a help message in a separate window

{

var OutputWindow = window.open();

OutputWindow.document.open();

OutputWindow.document.write("This might be a context-" +

"sensitive help message, depending on the " +

"application and state of the page.");

OutputWindow.document.close();

}

</script>

</head>

<body>


<input type="button" value="Click for Help"

onclick="Help();" />

</form>

</body>

</html>view page

f\form4.htm

Window Example Refined

10

<html> <!– COMP519 form05.html 13.10.2006 -->

<head>

<title> Fun with Buttons </title>


function Help()

// Results: displays a help message in a separate window

{ var OutputWindow =

window.open("", "",

"status=0,menubar=0,height=200,width=200");

OutputWindow.document.open();

OutputWindow.document.write("This might be a context-" +

"sensitive help message, depending on the " +

"application and state of the page.");

OutputWindow.document.close();

}

</script>

</head>

<body>


<input type="button" value="Click for Help"

onclick="Help();" />

</form>

</body>

</html>

هی تاى ت تاتغwindow.open

.آسگهاى فشستاد

HREFآسگهاى ال .سا هطخع هی کذ

آسگهاى دم ام داخلی سا هطخع هی

.کذ

آسگهاى سم خاظ خجش سا تؼییي هی

.کذ

view page

f\form5.htm

Text Boxes

11

. جؼث هتي تشای گشفتي سدی اص کاستش استفاد هی ضد•.سدی کاستش دس غفح تاقی هی هاذ قاتل تغییش است promptتشخالف –

<input type="text" id=“BOX NAME” name="BOX_NAME"… />

: خاساهتشا–خای جؼث تش حسة کاساکتش: اذاص•

هتي خیص فشؼ: هقذاس•

<html>

<!– COMP519 form06.html 13.10.2006 -->

<head> <title> Fun with Text Boxes </title> </head>

<body>

<form name="BoxForm">

Enter your name here:

<input type="text" name="userName" size=“12” value="" />

<br /><br />

<input type="button" value="Click Me"

onclick="alert('Thanks, ' + document.BoxForm.userName.value +

', I needed that.');" />

</form>

</body>

</html>view page

f\form6.htm

Read/Write Text Boxes

12

.هی تاى هحتای جؼث هتي سا تسط دستس اتػاب یض تغییش داد•اگش هی خایذ تػست ػذد استفاد . هحتای هتي ساد خام است اص ع سضت است: کت–

.استفاد کیذ parseFloat parseIntضد اص

<html>

<!– COMP519 form07.html 13.10.2006 -->

<head>

<title> Fun with Text Boxes </title>

</head>

<body>


Enter a number here:

<input type="text" size=“12” name="number" value=“2” />

<br /><br />

<input type="button" value="Double"

onclick="document.BoxForm.number.value=

parseFloat(document.BoxForm.number.value) * 2;" />

</form>

</body>

</html> view page

f\form7.htm

Text Box Events

13

<html>

<!– COMP519 form08.html 13.10.2006 -->

<head>



function FahrToCelsius(tempInFahr)

// Assumes: tempInFahr is a number (degrees Fahrenheit)

// Returns: corresponding temperature in degrees Celsius

{ return (5/9)*(tempInFahr - 32); }

</script>

</head>

<body>


Temperature in Fahrenheit:

<input type="text" name="Fahr" size=“10” value=“0"

onchange="document.BoxForm.Celsius.value =

FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));" />

<tt>----></tt>

<input type="text" name="Celsius" size=“10” value=""

onfocus="blur();" />

in Celsius

</form>

</body>

</html>

سخذاد •onchange

قتی آتص هی ضد ک هتي

. تغییش کذ

onfocusسخذاد •قتی آتص هی ضد ک هاس

سی هتي کلیک . کذ

،()blurتاتغ •focus سا خاهش

view page.هی کذ

f\form8.htm

Text Box Validation

14

اگش دس جؼث هتي فاسایت یک کاساکتش چاج ضد، چکاس کین؟•.هی تاى هقذاس سدی جؼث هتي سا اػتثاسسجی کشد•

.تا یک هقذاس هؼتثش ضشع کیذ–.اػتثاس هقذاس سدی سا تسجیذ ،onchangeگام قع –.استفاد کیذ verify.jsاص کتاتخا –

function VerifyNum(textBox)// Assumes: textBox is a text box// Returns: true if textBox contains a number, else false + alert

{ var boxValue = parseFloat(textBox.value); if ( isNaN(boxValue) ) { alert("You must enter a number value!"); textBox.value = "";return false;

} return true;

}

Validation Example

15

<html>

<!– COMP519 form09.html 13.10.2006 -->

<head>


<script type="text/javascript"

src="verify.js">

</script>


function FahrToCelsius(tempInFahr)

{

return (5/9)*(tempInFahr - 32);

}

</script>

</head>

<body>


Temperature in Fahrenheit:

<input type="text" name="Fahr" size=“10” value=“0”

onchange="if (VerifyNum(this)) { // this refers to current element

document.BoxForm.Celsius.value =

FahrToCelsius(parseFloat(this.value));

}" />

<tt>----></tt>

<input type="text" name="Celsius" size=“10” value="" onfocus="blur();" />

in Celsius

</form>

</body>

</html>view page

f\form9.htm

Text Areas

16

.جؼث هتي فقط یک خط سدی هی خزیشد•

•TEXTAREA ضثی جؼث هتي است لی هی ضد تؼذاد.ستا سدیفا سا تؼییي ود

<textarea name="TextAreaName" rows=“NumRows”

cols=“NumCols”>

Initial Text

</textarea>

•TEXTAREA هتي خیص فشؼ تیي . یک تشچسح جفتی است.ایي جفت قشاس هی گیشد

TEXTAREA Example

17

<html> <!– COMP519 form10.html 12.10.2006 --><head> <title> Fun with Textareas </title><script type="text/javascript" src="verify.js“> </script> <script type="text/javascript">function Table(low, high, power){// Results: displays table of numbers between low & high, raised to powervar message = "i: i^" + power + "\n-------\n";for (var i = low; i <= high; i++) {message = message + i + ": " + Math.pow(i, power) + "\n";

}document.AreaForm.Output.value = message;

} </script></head><body><form name="AreaForm"><div style="text-align: center;"> Show the numbers from <input type="text" name="lowRange" size=“4”

value=“1” onchange="VerifyInt(this);" /> to <input type="text" name="highRange" size=“4” value=“10”

onchange="VerifyInt(this);" />raised to the power of <input type="text" name="power" size=3 value=2

onchange="VerifyInt(this);" /><br /> <br /><input type="button" value="Generate Table"

onClick="Table(parseFloat(document.AreaForm.lowRange.value),parseFloat(document.AreaForm.highRange.value),parseFloat(document.AreaForm.power.value));" />

<br /> <br /><textarea name="Output" rows=“20” cols=“15”></textarea>

</div></form></body></html>

view page

f\form10.htm

JavaScript & Timeouts

18

سا هی تاى جت اجشای کذ دس صهاى ای تؼذی setTimeoutتاتغ •. استفاد ود

setTimeout(JavaScriptCodeToBeExecuted, MillisecondsUntilExecution)

<html>

<!– COMP519 form13.html 13.10.2006 -->

<head>

<title> Fun with Timeouts </title>


function Move()

// Results: sets the current page contents to be newhome.html

{

self.location.href = "form10.htm";

}

</script>

</head>

<body onload="setTimeout('Move()', 3000);">

This page has moved to <a href=“form10.htm">newhome.html</a>.

</body>

</html> view page

f\form13.htm

Another Timeout Example

19

<html><!–- COMP519 form14.html 14.10.2007 --><head><title> Fun with Timeouts </title><script type="text/javascript">

a=1000;function timeSince()

// Assumes: document.CountForm.countdown exists in the page// Results: every second, recursively writes current countdown in the box

{ a--;document.CountForm.countdown.value=a; setTimeout("timeSince();", 1000);

} </script>

</head><body onload="timeSince();"><form name="CountForm">

<div style="text-align: center;">Countdown to Graduation 2007 <br /><textarea name="countdown" rows=“4” cols=“15”

style="font-family: Courier;" onfocus="blur();"></textarea></div>

</form></body>

</html>view page

f\form14.htm

Cookies & JavaScript

20

ککی ا، فایل ای داد ای ستذ ک سی هاضیي کالیت رخیش هی •.ضذ.قاتل دستشسی تغییش تسط سشس ستذ–

.آا سا تغییش داد یا تاص کشدیض JavaScriptهی تاى تا –

:هاسد استفاد•... یادگیشی اسن هطتشی، خشیذای قثلی، سهض ػثس :تجاست الکتشیکی–....رخیش دسس یاد داد ضذ، وشات : خدآهص–رخیش اهتیاصات قثلی: تاصیا–

.ش غفح هیتاذ ککی هخػظ ت خد سا داضت تاضذ••document.cookie هجوػ ای اص صجایattribute=value است ک

. اص ن جذا ضذ اذ ;تا "userName=Dave;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT"

cookie.js

21

function getCookie(Attribute)

// Assumes: Attribute is a string

// Results: gets the value stored under the Attribute

{ if (document.cookie.indexOf(Attribute+"=") == -1) {

return "";

}

else {

var begin = document.cookie.indexOf(Attribute+"=") + Attribute.length+1;

var end = document.cookie.indexOf(";", begin);

if (end == -1) end = document.cookie.length;

return unescape(document.cookie.substring(begin, end));

}

}

function setCookie(Attribute, Value)


// Results: stores Value under the name Attribute, expires in 30 days

{

var ExpireDate = new Date();

ExpireDate.setTime(ExpireDate.getTime() + (30*24*3600*1000));

document.cookie = Attribute + "=" + escape(Value) +

"; expires=" + ExpireDate.toGMTString();

}

function delCookie(Attribute)


// Results: removes the cookie value under the name Attribute

{

var now = new Date();

document.cookie = Attribute + "=; expires=" + now.toGMTString();

}

Cookie Example

22

<html><!– COMP519 form15.html 13.10.2006 -->

<head><title> Fun with Cookies </title><script type="text/javascript"

src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/cookie.js"></script><script type="text/javascript">function Greeting()// Results: displays greeting using cookie{visitCount = getCookie("visits");if (visitCount == "") {alert("Welcome to my page, newbie.");setCookie("visits", 1);

}else {visitCount = parseFloat(visitCount)+1;alert("Welcome back for visit #" + visitCount);setCookie("visits", visitCount);

}}

</script></head><body onload="Greeting();">Here is the stuff in my page.<form name="ClearForm"><div style="text-align: center;">

<input type="button" value="Clear Cookie" onclick="delCookie('visits');" /></div> </form></body></html>

view page

f\form15.htm

javascript2 - maihami.maad.ac.irmaihami.maad.ac.ir/teaching/web/java script2.pdf · read/write text...

Documents