صفحه 1:
صفحه 2:
5 عم مور
۶ اجه ولمم
© WPOL Porwws & utributes
° butiza, text box, text oreo
۶ setention bet, rode butioa, check box, password, kickdew, «..
© davaGoript Pore evedis
° propertes! carr, pr, voke, ...
° weeds: bhr(), Poous(), chch(), ...
باه )ماه اوه ,)اه حطمما مر ۰
tevkoiques 6 تسه حول ۶
و ۱
صفحه 3:
# زبانهای (6:+ و جاوا معمولا بصورت سریال اجرا می شوند:
؟ از تابع ۲۵ شروع می کنیم و از اولین خط به صورت ترتیبی اجرا می کنیم.
© ممکن است برنامه دارای حلقه یا کد شرطی باشد. اما در هر صورت اجرای برنامه قدم به قدم
خواهد بود.
* برنامه داراى شروع و پایان است و برنامه به ترتیب دلخواه برنامه نویس اجرا می شود.
© اما محاسبات درون یک صفحه وب بندرت سریال است. صفحه به رخداد هایی مثل
کلیک موس يا د کمه ها جواب می دهد.
* قسمتی از ابزارهای 97۳۱[ اعمالی را مشخص می کنند که در اثر رخداد ها در صفحه وب
ly مى ث
* برنامه نويس كنترل زيادى روى ترتيب اجراى كد ندارد.
* در واقع هيج ترتيب اجرايى وجود ندارد و صفحه منتظر است تا به رخداد هاى بيش آمده واكنش
نشان دهد.
صفحه 4:
#ساده ترین رخداد هاء
رخداد های 0۳۷ و
1م0010 هستند.
"خاصیت لا در
برچسپ بلح به کدی اشاره
می کند که هنگام بالا آمدن
صفحه وب بطور خود کار
اجرا می شود.
خاصیت 000۳۲1 در
برچسب 4 به کدی اشاره
می کند که هنگام بستن
صفحه وب بطور خود کار
اجرا می شود.
<html>
<!-- COMP519 formO1.html 12.10.2006 -->
<head>
<title>Hello/Goodbye page</title>
<script type="text/javascript">
function Hello()
globatName=prompt("Welcome to my page. " +
“What is your name?","");
+
function Goodbye()
{
alert("So long, " + globalName +
"come back real soon.");
1
</script>
</head>
<body onload="Hello();" onunload="Goodbye() ;">
Whatever text appears in the page.
</body> 5:
</html> view page
صفحه 5:
0 ALAM pore
اکثر رخداد هایی که نیاز به پردازش دارند مربوط به عناصر فرمها هستند.
SK © فرم ,۱/۳6" مجموعه ای از عناصر جهت کنترل ورودی و خروجی و
رخدادهای صفحه است.
<form name="FormName">
</form>
en 5 @
عناصر فرم:
... ورودیها: دکمه» لیست رادیویی؛ د کمه رادیویی؛ جعبه کنترلی رمز ورود و *
* ورودی وخروجی: جعبه متن؛ ناحیه متن و ....
© فرمها در برنامه نويسى 002 نيز استفاده می شوند.
صفحه 6:
۱
<html>
<!-- COMP519 formO2.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>
صفحه 7:
برای کارهای پیچیده ترء تا
در مر
رخداد 01011016 دکمه
وصل کنید.
COMP519 = form03.htmL 13.10.2006
<head>
<title>Fun with Buttons</title>
<script type="text/javascript">
function Greeting()
// Results: displays a time-sensitive greeting
{
var now = new Date();
if (now.getHours() < 12) {
alert("Good morning") ;
1
else if (now.getHours() > 18) {
alert("Good afternoon");
else {
alert ("Good evening");
1
1
</script>
</head>
<body>
<form name="ButtonForm">
<input type="button" value="Click for Greeting"
onclick="Greeting();" />
</form>
</body>
</html>
view page
صفحه 8:
© جعبه 7" برای نمایش پیغامهای کوتاه و غیر معمول مناسب است.
اما نمایش پیغامهای طولانی و دارای فرمت نیاز به ابزار مناسب تری دارد.
© له جزء صفحه نیس بساید کاربر ب صوردتصریح آنرا بسبندد.
‘de® آیا می شود از دحا استفاده کرد؟
- چون کل صفحه را تغییر می دهد.
© می شود یک پنجره جدید باز نمود و آنجا نوشت:
1
thot bent ۱/3
IL (Prstaryts oa LREC)
I ope trot wierdow Por writs سامح indo لوف
OutpuDiedow. dor rcrect.write("DLOBPEOER"); 1) vorite tert to tot
// بضحلصس as bePoe
لت I dose tre ساسح سوه تون
صفحه 9:
<html>
>!- 9 ۰ ۱ 13.10.2006 -->
<head>
<title> Fun with Buttons </title>
<script type="text/javascript">
function Help()
// Results: displays a help message in a separate window
1
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>
<form name="ButtonForm">
<input type="button" value="Click for Help’
onclick="Help();" />
</form>
</body>
</html> view page
صفحه 10:
<html>
غط. 9ص
<head>
<title> Fun with Buttons </title>
<script type="text/javascript">
function Help()
// Results: displays a help message in a separate window
1
13.10.2006 -->
می توان به تاب
window.open
آركومان فرستاد.
var OutputWindow =
window.open("", "",
"status=0 ,menuba:
OutputWindow.document..open();
height=200,width=200") ;
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>
<form name="ButtonForm">
<input type="button" value="Click for Help’
onclick="Help();" />
</form>
</body>
10
صفحه 11:
جعبه متن برای گرفتن ورودی از کاربر استفاده می شود.
برخلاف ۳۳۳۲۷ ورودی کاربر در صفحه باقی می ماند و قابل تغییر است.
<input type="text" id="BOX NAME” name="BOX_NAME"... />
يارامترها:
اندازه: يهناى جعبه بر حسب كاراكتر *
Pd مقدار: متن بيش *
<html>
>!- 9 ۴۵۳06 ۱ 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> 7
</html> view page
صفحه 12:
۱ Next Ooxes
© می توان محتوای جعبه متن را توسط دستور انتصاب نیز تغیبر داد.
نکته: محتوای متن.ساده وخام است و از نوع رشته است. اگر می خواهید بصورت
عدد استفاده شود از 03۲56۴0 و 02۳56711 استفاده کنید.
<html>
<!— COMP519 formo7.html 13.10.2006 -
<head>
<title> Fun with Text Boxes </title>
</head>
<body>
<form name="BoxForm">
Enter a number here:
<input type="text" size="12" name="number" valu
<br /><br />
<input type='
onclick="document .BoxForm.number.value=
parseFloat (document .BoxForm.number.value) * 2;" />
</form>
</body>
</html> view page
صفحه 13:
#رخداد بسن
وقتی آتش می شود
که متن تغییر کند.
#رخداد عحسا
وقتی آتش می شود
که ماوس روی متن
کلیک کند.
blur(). at ؟
Art | Pome
می کند.
heat م7
</html> view page
13
<html>
<!- COMP519 form@8.html 13.10.2006 -->
<head>
<title> Fun with Text Boxes </title>
<script type="text/javascript">
function FahrToCelsius(tempInFahr)
// Assumes: tempInFahr is a number (degrees Fahrenheit)
// Returns: corresponding temperature in degrees Celsius
return (5/9)*(tempInFahr - 32);
</script>
</head>
<body>
‘<form name="BoxForm">
Temperature in Fahrenhei
<input type="text" name="Fahr" size="10" value="0"
onchange="document .BoxForm.Celsius.value =
FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));" />
<tt>----></tt>
<input typ elsius" size="10” value=""
onfocus="blur();" />
in Celsius
</form>
صفحه 14:
0 Text Box Outdatica
* اككر در جعبه متن فارنهايت يكك كاراكتر جاب 0998 Sep
© مى توان مقدار ورودى جعبه متن را اعتبارسنجى كرد.
* با يكك مقدار معتبر شروع كنيد.
9 وقوع 7170۳ اعتبار مقدار ورودى را بسنجيد.
؟ از کتابخانه 5 [۰ ۷6۲1۲۷ استفاده کنید.
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;
صفحه 15:
<html>
<!- COMP519 form09.html 13.19.2006
<head>
<title> Fun with Text Boxes </title>
<script type="text/javascript"
src="verify.js">
</script>
<script type="text/javascript">
function FahrToCelsius (tempInFahr)
{
return (5/9)*(tempInFahr - 32);
+
</script>
</head>
<body>
<form name="BoxForm">
Temperature in Fahrenheit:
<input type="text" name="Fahr" size=“10" value=“0”
i cen At (Yor Sgn oats) 0) Ey علطا atea) ee curs eee elenents
document .BoxForm. Celsiu
FahrToCelsius (parseFloat (this. value)) ;
Enbsp; <tt>----></tt>
<input type="text" name="Celsius" size="10” value=" onfocus="blur();" />
in Celsius
</form>
</bod 1
ine MSM Page
صفحه 16:
* جعبه متن فقط یک خط ورودی می پذیرد.
9 00" شبیه جعبه مترلسلیمیشود تعداد ستونها
وردیفها را تعییرنمود.
<textarea name="TextAreaName" rows="NumRows”
cols="NumCols">
Initial Text
</textarea>
* 0 کب Sieh eh flames
قرار م ىكشيرة.
صفحه 17:
0 ۱۳ ۹۹۹/۳۵۹ Exanple
<html> <I— COMPS19 19۳21887 2-6
‘<head> <title> Fun with Textareas </title> _
<script type="text/javascript" sre="verify.js">
</script> ۰
<script. type="text/javascript">
function Table(Low, high, power) 1 ۰
{// Results: displays table of numbers between low & high, raised to power
var message = "i: i-" + power + "\n: ۱
for (var i= low; i <= high; i++) {
message = message + 1 + ": “ + Math.pow(i, power) + “\n";
الل ل ل ۳ با
</script>
<jhest>”
yead>
<body>
‘<form nane="AreaForm">
<diy stylen"text-align: center; "> 1
Show the ا لم ا ل
اه onchange="VerifyInt(this);" />
to <input type="text! nanes"highfange" size-“e" value="10"
ised to (nchange="Verifyint(this) |" /> Send valved
raised to the power of <inpu "text" name=" size=3 value
br /> cbr /: Put 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 />
/siggtare2 name="Output™ rows="20" colsz"15°></textarea>
</div>
ae
ee view page
صفحه 18:
© تابع ]درا می توان جهت اجرای کد در زمان های بعدی استفاده
نمود.
( سح سل( لح ح<)- :له وق هل )۱9۵ ود
‘<html>
<!— COMP519 form13.html 13.10.2006 -->
<head>
<title> Fun with Timeouts </title>
<script type="text/javascript">
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="forml0.htm">newhome.html</a>.
</body> :
</html> view page
صفحه 19:
<html>
<!—- COMP519 forml4.html 14.10.2007 -->
<head> 1 1
<title> Fun with Timeouts </title>
اه type="text/javascript">
a=
function timeSince()
//, Assumes: document. Countform.countdown exists in the page
77 Results: every second, recursively writes current countdown in the box
a--;
document . CountForm. countdown. value=a;
setTimeout("timeSince();", 1000);
</script>
</head>
<div style و
Countdown to Graduation 2007 <r /<
<textarea nai ountdown" rows="4" co
font-family: Courier,
'></textarea>
view page
صفحه 20:
۴ کلوچه ها فایل های داده ای هستند که روی ماشین کلاینت ذخیره می شوند.
قابل دسترسی و تغییر توسط سرور هستند.
* می توان با 9۳ج نیز آنها را تغیبر داد یا باز کرد.
# موارد استفاده:
* تجارت الکترونیکی:یاد گیری اسم مشتری خریدهای قبلیء رمز عبور و ...
* خودآموز: ذخیره دروس یاد داده شده نمرات و ....
بازیها: ذخیره امتیازات قبلی
هر صفحه میتواند کلوچه مخصوص به خود را داشته باشد.
۴ 6001316. 00۱11601 مجموعه لعاز زوجهای106 811۲1011162۷3 لسکه با
از همجدا شده لند
"userName=Dave ; score=100; expires=Mon, 21-Feb-01 00:00:01 GMT"
صفحه 21:
function getCookie(Attribute)
// Assumes: Attribute is a string
7/ Results: gets the value stored under the Attribute
{
if (document. cookie.indexOf(Attribute+"=") == -1) {
return";
1
else {
var begin = docunent. cookie. indexOf (attributer"=") + Attribute. Length+1;
var end = document.cookie.index0f("";", begin)
if (end == -1) end = document .cookie.tength;
return unescape (document .cookie.substring(begin, end));
1
function setCookie(Attribute, Value)
// Assumes: Attribute is a string
71 Results: stores Value under the name Attribute, expires in 30 days
1
var ExpireDate = new Date()
ExpireDate.setTime(ExpireDate.getTime() + (30+24*3600+1000)
document.cookie = Attribute + "=" + escape(Value) +
expires=" + ExpireDate.toGMTString();
}
function delCookie(Attribute)
// Assumes: Attribute is a string
ال م vate mde: the و را ا لاس
var now = new Date();
document.cookie = Attribute + “=; expires=" + now.toGMTString();
3
صفحه 22:
ج01
COMPS19 © forml5.html 13.10.2006 --> —!<
<head>
‘<title> Fun with Cookies </title>
<script type="text/javascript"
src="http: //www.csc. Liv.ac.uk/-martin/teaching/comp519/3S/cookie. js">
</script>
<script. type="text/javascript
‘function Greeting() i
77 Results: displays greeting using cookie
‘ ی سب | ist
1 eubie.");
alert ("Welcome je, 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 ny’ page.
<form 2۸
ا center; "> : ۳
اي value='Clear Cookie” onclick="delCookie( ‘visits! );" />
iene
تا view page
Event-driven programs and
HTML form elements
1
Agenda
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
2
برنامه های وابسته به رخداد ها
زبانهای ++Cو جاوا معموال بصورت سریال اجرا می شوند:
از تابع mainشروع می کنیم و از اولین خط به صورت ترتیبی اجرا می کنیم.
ممکن است برنامه دارای حلقه یا کد شرطی باشد ،اما در هر صورت اجرای برنامه قدم به قدم
خواهد بود.
برنامه دارای شروع و پایان است و برنامه به ترتیب دلخواه برنامه نویس اجرا می شود.
اما محاسبات درون یک صفحه وب بندرت سریال است .صفحه به رخداد هایی مثل
کلیک موس یا دکمه ها جواب می دهد.
3
قسمتی از ابزارهای JavaScriptاعمالی را مشخص می کنند که در اثر رخداد ها در صفحه وب
واقع می شوند.
برنامه نویس کنترل زیادی روی ترتیب اجرای کد ندارد.
در واقع هیچ ترتیب اجرایی وجود ندارد و صفحه منتظر است تا به رخداد های پیش آمده واکنش
نشان دهد.
OnLoad & OnUnload
<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>
view page
</html>
،ساده ترین رخداد ها
وOnLoad رخداد های
. هستندOnUnload
درOnLoad خاصیت
به کدی اشارهbody برچسپ
می کند که هنگام باال آمدن
صفحه وب بطور خودکار
.اجرا می شود
درOnUnload خاصیت
به کدی اشارهbody برچسب
می کند که هنگام بستن
صفحه وب بطور خودکار
.اجرا می شود
4
HTML forms
اکثر رخداد هایی که نیاز به پردازش دارند مربوط به عناصر فرمها هستند.
یک فرم HTMLمجموعه ای از عناصر جهت کنترل ورودی و خروجی و
رخدادهای صفحه است.
>"<form name="FormName
…
></form
عناصر فرم:
ورودیها :دکمه ،لیست رادیویی ،دکمه رادیویی ،جعبه کنترلی ،رمز ورود و ...
ورودی وخروجی :جعبه متن ،ناحیه متن و ....
فرمها در برنامه نویسی CGIنیز استفاده می شوند.
5
Button Element
. ساده ترین عنصر فرم دکمه است
.کلیک روی دکمه یک رخداد است
>/"input type="button" value="LABEL" onclick="JAVASCRIPT_CODE<
<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>
view page
</html>
6
Buttons & Functions
<html>
<!–- COMP519
form03.html
13.10.2006 -->
<head>
<title>Fun with Buttons</title>
<script type="text/javascript">
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>
<form name="ButtonForm">
<input type="button" value="Click for Greeting"
onclick="Greeting();" />
</form>
</body>
view page
</html>
تابع،• برای کارهای پیچیده تر
مورد نظر را بنویسید و به
دکمهonclick رخداد
.وصل کنید
7
Buttons & Windows
. برای نمایش پیغامهای کوتاه و غیر معمول مناسب استalert جعبه
.اما نمایش پیغامهای طوالنی و دارای فرمت نیاز به ابزار مناسب تری دارد
.بنددZZZریح آنرا بZZتصZصورZZZبر بZارZZZاید کZZZیست بZZن
و
فحهZZزء صZ ج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
8
Window Example
<html>
<!– COMP519
form04.html
13.10.2006 -->
<head>
<title> Fun with Buttons </title>
<script type="text/javascript">
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>
<form name="ButtonForm">
<input type="button" value="Click for Help"
onclick="Help();" />
</form>
</body>
</html>
view page
9
Window Example Refined
<html>
<!– COMP519
form05.html
13.10.2006 -->
<head>
<title> Fun with Buttons </title>
<script type="text/javascript">
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>
<form name="ButtonForm">
<input type="button" value="Click for Help"
onclick="Help();" />
</form>
</body>
</html>
می توان به تابع
window.open
.آرگومان فرستاد
آرگومان اول
را مشخصHREF
.می کند
آرگومان دوم نام
داخلی را مشخص
.می کند
آرگومان سوم
خواص پنجره را
.تعیین می کند
view page
10
Text Boxes
.جعبه متن برای گرفتن ورودی از کاربر استفاده می شود
. ورودی کاربر در صفحه باقی می ماند و قابل تغییر است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>
view
</html>
page
11
Read/Write Text Boxes
. می توان محتوای جعبه متن را توسط دستور انتصاب نیز تغییر داد
اگر می خواهید بصورت. ساده وخام است و از نوع رشته استZ محتوای متن: نکته
. استفاده کنیدparseInt وparseFloat عدد استفاده شود از
<html>
<!– COMP519
form07.html
13.10.2006 -->
<head>
<title> Fun with Text Boxes </title>
</head>
<body>
<form name="BoxForm">
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>
view page
</html>
12
Text Box Events
<html>
<!– COMP519 form08.html
13.10.2006 -->
<head>
<title> Fun with Text Boxes </title>
<script type="text/javascript">
function FahrToCelsius(tempInFahr)
// Assumes: tempInFahr is a number (degrees Fahrenheit)
// Returns: corresponding temperature in degrees Celsius
{
return (5/9)*(tempInFahr - 32);
}
</script>
</head>
<body>
<form name="BoxForm">
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>
view page
</html>
onchange رخداد
ش می شودZوقتی آت
.که متن تغییر کند
onfocus رخداد
ش می شودZوقتی آت
که ماوس روی متن
.کلیک کند
blur()، تابع
را خاموشfocus
.می کند
13
Text Box Validation
چکار کنیم؟، اگر در جعبه متن فارنهایت یک کاراکتر چاپ شود
. می توان مقدار ورودی جعبه متن را اعتبارسنجی کرد
. با یک مقدار معتبر شروع کنید
. اعتبار مقدار ورودی را بسنجید،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;
14
Validation Example
<html>
<!– COMP519
form09.html
13.10.2006 -->
<head>
<title> Fun with Text Boxes </title>
<script type="text/javascript"
src="verify.js">
</script>
<script type="text/javascript">
function FahrToCelsius(tempInFahr)
{
return (5/9)*(tempInFahr - 32);
}
</script>
</head>
<body>
<form name="BoxForm">
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>
view
</html>
page
15
Text Areas
. جعبه متن فقط یک خط ورودی می پذیرد
هاZتونZZZداد سZعZZZود تZZیشZیمZلZتZ
س وZتنZم
عبه اZبیه جZZZ شTEXTAREA
.مودZZعییننZZZیفها را تZورد
<textarea name="TextAreaName" rows=“NumRows”
cols=“NumCols”>
Initial Text
</textarea>
فتZینجZینZZZب
رض اZZZیشفZZZتنپZتمZ
. سZفتیZج
سپ اZرچZZZکبZZ یTEXTAREA
.یردZZZیگZرار مZZق
16
TEXTAREA Example
<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 power
var 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>
view page
</html>
17
JavaScript & Timeouts
ای کد در زمان های بعدی استفادهZ را می توان جهت اجرsetTimeout تابع
.نمود
setTimeout(JavaScriptCodeToBeExecuted, MillisecondsUntilExecution)
<html>
<!– COMP519
form13.html
13.10.2006 -->
<head>
<title> Fun with Timeouts </title>
<script type="text/javascript">
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
18
Another Timeout Example
<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
19
Cookies & JavaScript
کلوچه ها فایل های داده ای هستند که روی ماشین کالینت ذخیره می شوند.
قابل دسترسی و تغییر توسط سرZور هستند.
می توان با JavaScriptنیز آنها را تغییر Zداد یا باز کرد.
موارد استفاده:
تجارت الکترونیکی:یادگیری اسم مشتری ،خریدZهای قبلی ،رمز عبور و ...
خودآموز :ذخیرZه دروس یاد داده شده ،نمرZات و ....
بازیها :ذخیرZه امتیازات قبلی
هر صفحه میتواند کلوچه مخصوص به خود را داشته باشد.
document.cookieمZجموعه اZیاز زوZجZهای attribute=valueاZسZتکZZZه بZZZا ;
از همجZدا شZZده ZاZند.
""userName=Dave;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT
20
cookie.js
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)
// Assumes: Attribute is a string
// 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)
// Assumes: Attribute is a string
// Results: removes the cookie value under the name Attribute
{
var now = new Date();
document.cookie = Attribute + "=; expires=" + now.toGMTString();
}
21
Cookie Example
<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>
view page
</html>
22