آذر ۱۵م, ۱۳۸۷
| Cookie یکسری رشته حرفی با فرمت مشخص میباشد. یعنی: |
|
CookieName = CookieValue; expires = expirationDateGMT ; path = URLpath ; Domain = siteDomain
|
توضیح خطوط فوق از این قرار است که اولین قسمت رشته حرفی به Cookie اسم و مقدار مربوطه را تخصیص داده که بایستی همیشه در ایجاد Cookie در نظر داشت. سپس تاریخ انقضای Cookie توسط expiration Date تعیین میشود که در فرمان تعیین شده فوق, browser بطور اتوماتیک, Cookie را پاک میکند. سپس اجازه وجود یک URL داده شده و در نهایت آدرس domain در Cookie تنظیم میگردد.
توجه داشته باشید که میتوان از چند Cookie درون یک صفحه استفاده نمود بدین منظور بعد از مشخصات هر قسمت, از علامت ” ; ” استفاده میگردد.
|
|
| برای ایجاد Cookie |
|
expireDate = new Date
|
1. |
ابتدا تاریخ فعلی گرفته شده و در متغییر expireDate نهاده میشود.
|
|
|
expireDate.setMonth(expireDate.getMonth()+6)
|
2. |
بدین صورت مقدار تاریخ اعتبار Cookie مورد نظر, ۶ ماه تعیین میگردد.
|
|
|
userName = “”
|
3. |
سپس متغییر userName با مقدار خالی تعریف میگردد.
|
|
|
userName = document.cookie.split(“=”)[1]
|
4. |
ابتدا خالی نبودن محتوی Cookie بررسی میشود. سپس توسط متد (“=”)split, هر record مربوط به Cookie به فیلدهای مختلف تقسیم میشود بطوریکه مثلاCookieField[0]s نام وCookieField[1]s مقدار Cookie میباشد.
|
|
|
function setCookie() {
userName = document.myForm.nameField.value |
5. |
در این مرحله یک تابع جدید با نامsetCookie()s ایجاد شده, سپس در خط بعد مقدار UserName توسط اطلاعات وارد شده کاربر درون فیلد فرم, مجددا نوشته میشود.
|
|
|
document.cookie = “username=” + username + “;expires=” + expireDate.toGMTString()
|
6. |
همانطور که در مطالب قبل ذکر شد, Cookie ها شامل رشته های حرفی ساده میباشد, در نتیجه توسط document.cookie, نام کاربر و تاریخ انقضاء نوشته شده زیرا توسط متد toGMTString, تاریخ expireDate به رشته حرفی تبدیل شده, که نتیجتا میتوان آن را درون Cookie قرار داد.
|
|
|
onLoad=”document.myForm.nameField.value=userName”
|
7. |
دستور onLoad در تگ body, نام کاربر را در صورت وجود در فایل Cookie درون فیلد name مینویسد.
|
|
|
<input readonly type=”text” name=”nameField” onBlur=”setCookie()” size=”40″>
|
8. |
نهایتا هنگام رهایی کاربر از فیلد متن, توسط کنترل کننده onBlur, تابع setCookie فرا خوانده میشود.
|
|
| **نکته |
- در این اسکریپت فرض میشود User name در Cookie وجود داشته است. در مباحث بعدی, نحوه کنترل چندین Cookie نیز توضیح داده میشود
<html>
<head>
<script language=”javascript” type=”text/javascript”>
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
userName = “”
if (document.cookie !=”") {
userName = document.cookie.split(“=”)[1]
}
function setCookie() {
userName = document.myForm.nameField.value
document.cookie = “username=” + username + “;expires=” + expireDate.toGMTString()
}
</script>
</head>
<body onLoad=”document.myForm.nameField.value=userName”>
</p>
<h2>
Cookies:
</h2>
<form name=”myForm”>
<input readonly type=”text” name=”nameField” onBlur=”setCookie()” size=”40″>
</form>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
|
بعد از تنظیم Cookie بایستی از آن در موارد مفید و گوناگون استفاده نمود. |
| برای خواندن Cookie |
|
if(document.cookie !=”") {
|
1. |
| درصورت خالی نبودن محتویات Cookie به مرحله بعد میرود. |
|
|
document.write(“Hello, “+ document.cookie.split(“=”)[1])
|
2. |
| در صورتی که Cookie خالی نباشد, رشته حرفی “Hello” به همراه مقدار موجود در Cookie در صورت نمایش, ظاهر میگردد. |
|
| **نکته |
- در صورتی که دقت کرده باشید, به این نکته پی خواهید برد که Cookie خاصی انتخاب نشده است! زیرا هر Cookie تنها توسط Server, مخصوص که برای اولین بار درون آن نوشته شده, خوانده میشود. یعنی فقط میتوانید به Cookie های مربوط به خود دسترسی پیدا نمایید.
<html>
<head>
</head>
<body>
<h2>
<script language=”javascript” type=”text/javascript”>
if(document.cookie !=”") {
document.write(“Hello, “+ document.cookie.split(“=”)[1])
}
</script>
</h2>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
| در مبحث قبل, مقدار یک Cookie از Server خوانده شد. در این قسمت, نحوه خواندن تمام Cookieها از Server و نمایش نام و مقادیرشان را فرا میگیرد. بطوریکه اگر هیچ Cookie نباشد, پیغام “هیچ Cookie وجود ندارد” اعلام میشود و در صورتیکه وجود داشته باشد. برای هر Cookie یک خط شامل اطلاعات آن نمایش داده میشود. |
| به منظور نمایش Cookieها |
|
if(document.cookie == “”) {
document.write(“There are no cookies here”) |
1. |
| در صورتیکه محتوی Cookieها خالی باشد, پیغام “There are no cookies here“ نشان داده میشود. |
|
|
else {
thisCookie = document.cookie.split(“; “) |
2. |
| ولی در صورتیکه محتوای آن خالی نباشد, مقدار تمامی Cookieهای موجود توسط document.cookie.split(“; “)s گرفته شده و در متغییری بنام thisCookie قرار داده میشود. به یاد داشته باشید که توسط دستورsplit(“; “)s آرایه ای از تمام Cookieها بوجود آمده تا درنهایت بتوان به مقدار هر Cookie ارجاعی داده شود. |
|
|
for (i=0; i<thisCookie.length; i++) {
|
3. |
| در حلقه فوق, که شمارنده آن از صفر شروع میشود, در صورتیکه i کمتر از تعداد Cookieها در آرایه thisCookie باشد به مقدار i, یک واحد می افزاید. |
|
|
document.write(“Cookie name is”+thisCookie[i].split(“=”)[0])
document.write(“,and the value is”+thisCookie[i].split(“=”)[1]+”<br>”) |
4. |
| Cookie در پنجره browser ابتدا عبارت “Cookie name is” و بعد نام Cookie و به دنبال آن, عبارت and the value is به همراه مقدار Cookie نوشته میگردد.
<html>
<head>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
if(document.cookie == “”) {
document.write(“There are no cookies here”)
}
else {
thisCookie = document.cookie.split(“; “)
for (i=0; i<thisCookie.length; i++) {
document.write(“Cookie name is”+thisCookie[i].split(“=”)[0])
document.write(“,and the value is”+thisCookie[i].split(“=”)[1]+”<br>”)
}
}
</script>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
| در هنگام ترک یک صفحه وب, کنترل کننده onUnLoad فعال میشود. به علت عدم محبوبیت این نوع پنجره ها, بهتر است که کنترل کننده فوق الذکر در کمترین حالت استفاده شود. اسکریپت فوق نحوه ایجاد پیغام خداحافظی درهنگام ترک سایت با استفاده از کنترل کننده onUnLoad را نشان میدهد. |
| برای ایجاد onUnLoad |
|
onUnload=”alert(‘thanks for visiting, and come back soon!’)”
|
|
| با قرار دادن کنترل کننده فوق درتگ body, هنگام ترک سایت پیغام مذکور به نمایش در خواهد آمد.
<html>
<head>
</head>
<body onUnload=”alert(‘thanks for visiting, and come back soon!’)”>
<h2>IranJavaScript</h2>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
|
از آنجایی که درنسخه ۴ برنامه Netscape, هنگام تغییر اندازه پنجره یک bug معروف وجود داشته بنابراین بایستی بعد از تغییر اندازه صفحه, محتویات درون پنجره را مجددا Load نمود. |
| برای اجرای onResize Event |
|
if(document.layers) {
|
1. |
| همانطور که ذکر شد این اسکریپت فقط برای Netscape 4 نیاز میباشد. به یاد داشته باشید که document.layers نیز یکی از Object هایی بوده که تنها در این browser وجود دارد. |
|
|
origWidth = window.innerWidth
origHeight = window.innerHeight |
2. |
| در صورتیکه کاربر در Netscape 4 باشد, ایتدا ابعاد پنجره اصلی (Orginal) را برای استفاده آینده نگهداری میکند. |
|
|
function resizeFix() {
|
3. |
| در این قسمت عمل resize تحت کنترل قرار میگیرد. |
|
|
if(document.layers) {
|
4. |
| مجددا برای کسب اطمینان, وجود Netscape 4 بررسی میشود. |
|
|
if(window.innerWidth != origWidth || window.innerHeight != origHeight) {
|
5. |
| در صورتیکه یا اندازه طول و یا عرض پنجره تغییر کرده باشد آماده انجام عمل بارگذاری مجدد محتویات صفحه در مرحله بعد خواهد شد و در غیر این صورت عملی صورت نمیگیرد. |
|
|
window.location.reload()
|
6. |
| در صورتیکه ابعاد صفحه پنجره تغییر کرده باشد, محتویات درون صفحه مجددا بارگذاری میشوند. |
|
|
onResize=”resizeFix()”
|
7. |
| در این قسمت پس از تغییر در ابعاد پنجره, تابع resizeFix فراخوانده میشود.
<html>
<head>
<script language=”javascript” type=”text/javascript”>
if(document.layers) {
origWidth = window.innerWidth
origHeight = window.innerHeight
}
function resizeFix() {
if(document.layers) {
if(window.innerWidth != origWidth || window.innerHeight != origHeight) {
window.location.reload()
}
}
}
</script>
</head>
<body onResize=”resizeFix()”>
<h2>IranJavaScript.com</h2>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
یکی از سوالهایی که بطور فراوان, توسط اکثر کاربران پرسیده میشود, نحوه و چگونگی پنهان کردن اصل محتوی اسکریپت بکار گرفته شده در صفحه است. اما پاسخ آنها بطور خیلی ساده, “غیر ممکن” میباشد. یعنی کاربر با اندکی تجربه و تشخیص میتواند مفهوم کدهای اسکریپت را دریابد.
ولی در صورتیکه بخواهید از جستجوگران که سطح معلومات متوسطی دارند, اسکریپت را اندکی غیر قابل دسترسی نمایید, آنگاه اسکریپت فوق, چگونگی کد لازم را به شما توضیح میدهد. بدین صورت کاربر نمیتواند با انجام کلیک راست بر روی صفحه از منوی Shortcut برای مشاهده Source برنامه استفاده کند.
|
| برای غیر فعال کردن دکمه سمت راست موس |
|
if(document.layers) {
document.captureEvents(Event.MOUSEDOWN)
} |
1. |
در صورتیکه کاربر دارای Netscape 4 باشد, آنگاه به browser, استفاده از Capture Events را برای کنترل Mousedown اعلام میکند.
|
|
|
document.onmousedown = captureMousedown
|
2. |
برای تمامی browserها از تابع captureMousedown برای حالت onmousedown استفاده میشود. توجه کنید در این مرحله, کنترل کننده event, (CaptureMousedown) دارای پرانتز نمیباشد. در صورتیکه وجود پرانتز از اساس کنترل کننده event بوده ولی در جاوااسکریپت میتوان از آن صرفنظر نمود.
|
|
|
function captureMousedown(evt) {
|
3. |
تابع مورد نیاز برای کنترل Mousedown در این مرحله شروع میشود. پارامتر evt نیز توسط Netscape, بطور اتوماتیک در هنگام اجرای event, که شامل اطلاعات در مورد event مربوطه است را ارسال میکند.
|
|
|
if(evt) {
mouseClick = evt.which |
4. |
در صورت استفاده از Netscape, متغیر evt وجود داشته, در این صورت انتخاب کلید ماوس توسط کاربر مشخص میشود.
|
|
|
else {
mouseClick = window.event.button
} |
5. |
ولی در صورتیکه که کاربر از IE استفاده کند, نتیجه عملها در متغییر mouseClick ذخیره میشود.
|
|
|
if(mouseClick == 1 || mouseClick == 2 || mouseClick == 3) {
alert(“Mouse Disabled”)
return false
} |
6. |
در صورتیکه کلیک ماوس مربوط به یکی از دکمه ۱,۲,۳ آن باشد یک پیغام اخطار نمایان میگردد که نشاندهنده عدم قابلیت تابع نویسی میباشد. در نتیجه false را برگردانده و بدین وسیله, پنجره منو از ناپدید شدن در امان می ماند.
<html>
<head>
<script language=”javascript” type=”text/javascript”>
if(document.layers) {
document.captureEvents(Event.MOUSEDOWN)
}
document.onmousedown = captureMousedown
function captureMousedown(evt) {
if(evt) {
mouseClick = evt.which
}
else {
mouseClick = window.event.button
}
if(mouseClick == 1 || mouseClick == 2 || mouseClick == 3) {
alert(“Mouse Disabled”)
return false
}
}
</script>
</head>
<body>
<h2>IranJavaScript.com</h2>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
| بدین طریق کاربر میتواند با انجام عمل Double Click عمل خاصی را مشاهده خواهد کرد. |
| برای عمل onDbclick Event |
|
onDblclick=”newWindow(1)“
|
|
| بدین صورت با دوبار کلیک بر روی تصویر کوچک, تصویر بزرگ آن در پنجره جدید نمایش داده میشود.
<html>
<head>
<script language=”javascript” type=”text/javascript”>
function newWindow(imgNumber) {
imgName = “images/test” + imgNumber + “.gif”
imgWindow = window.open(imgName,”imgWin”,”width=320,height=240,scrollbars=no”)
}
</script>
</head>
<body>
<h2>Double-click on an image to see the full-size version</h2>
<img src=”images/test1.gif” border=”2″ onDblclick=”newWindow(1)”>
<img src=”images/test2.gif” border=”2″ onDblclick=”newWindow(2)”>
<img src=”images/test3.gif” border=”2″ onDblclick=”newWindow(3)”>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
|
در صورتیکه بخواهید در یک فیلد که اطلاعات مخصوص به نمایش در می آید, کاربر تغییراتی در آن اعمال نکند, میتوان از ویژگی Readonly استفاده نمود ولی به یاد داشته باشید که اکثر browserها ویژگی مذکور را پشتیبانی نمیکنند.اسکریپت فوق این مشگل را برطرف خواهد کرد.
|
| برای ثابت نگه داشتن اطلاعات یک فیلد |
|
onFocus=”this.blur()”
|
1. |
| دستور فوق را در کنار input> کپی نمایید.
<html>
<head>
</head>
<body>
<form>
Email address:
<input type=”text” onFocus=”this.blur()” value=”info@iranjavascript.com” size=”20″>
<br>
</form>
</body>
</html> |
Posted in Java Script, برنامه نویسی | No Comments »
آذر ۱۵م, ۱۳۸۷
با استفاده از این اسکریپت میتوانید آهنگ دلخواه خود را در ساعتی مشخص به اجرا درآورید, کافیست فایل مورد نظر را در برنامه تعریف نمایید و ساعت مربوطه را تنظِم کنید.
<HTML>
<HEAD>
<script language=”javascript”>
function da(form){
ut=new Date()
h=ut.getHours()
m=ut.getMinutes()
if (h<10) h=”0″+h
if (m<10) m=”0″+m
time=h+”:”+m
document.frm.txt.value=time
setTimeout(“da(this.form)”,1000)
}
function alermon(){
hr=document.frm.se1.selectedIndex
mn=document.frm.se2.selectedIndex
tim=document.frm.se1.options[hr].value+”:”+document.frm.se2.options[mn].value
if (h>12) time=”0″+(h-12)+”:”+m
if (h=00) time=”12″+”:”+m
if (time==tim){
document.all.sound.src=document.frm.alermsound.value
}
else setTimeout(“alermon()”,1000)
}
function alermoff(){
document.all.sound.src=”"
tim=0
}
</script>
<bgSound src=”" id=”sound”>
</HEAD>
<BODY onload=”da(this.form)”>
<font color=”red” size=”6″>Alerm Clock</font>
<form name=”frm”>
your system clock is:<input type=”text” name=”txt” size=”12″><p>
<font size=”4″ color=”#0000FF”>step1:</font>when you want the clock is ringing?
select hour:<select name=”se1″ size=1>
<option selected value=”01″>01 or 13
<option value=”02″>02 or 14
<option value=”03″>03 or 15
<option value=”04″>04 or 16
<option value=”05″>05 or 17
<option value=”06″>06 or 18
<option value=”07″>07 or 19
<option value=”08″>08 or 20
<option value=”09″>09 or 21
<option value=”10″>10 or 22
<option value=”11″>11 or 23
<option value=”12″>12 or 24
</select>
select minute:<select name=”se2″ size=1>
<option selected value=”00″>00<option value=”01″>01<option value=”02″>02<option value=”03″>03<option value=”04″>04
<option value=”05″>05<option value=”06″>06<option value=”07″>07<option value=”08″>08<option value=”09″>09
<option value=”10″>10<option value=”11″>11<option value=”12″>12<option value=”13″>13<option value=”14″>14
<option value=”15″>15<option value=”16″>16<option value=”17″>17<option value=”18″>18<option value=”19″>19
<option value=”20″>20<option value=”21″>21<option value=”22″>22<option value=”23″>23<option value=”24″>24
<option value=”25″>25<option value=”26″>26<option value=”27″>27<option value=”28″>28<option value=”29″>29
<option value=”30″>30<option value=”31″>31<option value=”32″>32<option value=”33″>33<option value=”34″>34
<option value=”35″>35<option value=”36″>36<option value=”37″>37<option value=”38″>38<option value=”39″>39
<option value=”40″>40<option value=”41″>41<option value=”42″>42<option value=”43″>43<option value=”44″>44
<option value=”45″>45<option value=”46″>46<option value=”47″>47<option value=”48″>48<option value=”49″>49
<option value=”50″>50<option value=”51″>51<option value=”52″>52<option value=”53″>53<option value=”54″>54
<option value=”55″>55<option value=”56″>56<option value=”57″>57<option value=”58″>58<option value=”59″>59
</select><p>
<font size=”4″ color=”#0000FF”>step2:</font>browse your sound file:
<input type=”file” size=36 name=”alermsound”><p>
<font color=”#0000FF” size=”4″>step3:</font><input type=”button” value=”on” onclick=”alermon()”> <input type=”button” value=”off” onclick=”alermoff()”><br>
if you minimize this window you can’t hear any sound.
</form>
</BODY>
</HTML>
Posted in Java Script, برنامه نویسی | No Comments »