1. 1 Event-driven programs and HTML form elements

2. 2 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

3. 3 برنامه های وابسته به رخداد ها زبانهای C++ و جاوا معمولا بصورت سریال اجرا می شوند: از تابع main شروع می کنیم و از اولین خط به صورت ترتیبی اجرا می کنیم. ممکن است برنامه دارای حلقه یا کد شرطی باشد، اما در هر صورت اجرای برنامه قدم به قدم خواهد بود. برنامه دارای شروع و پایان است و برنامه به ترتیب دلخواه برنامه نویس اجرا می شود. اما محاسبات درون یک صفحه وب بندرت سریال است. صفحه به رخداد هایی مثل کلیک موس یا دکمه ها جواب می دهد. قسمتی از ابزارهای JavaScript اعمالی را مشخص می کنند که در اثر رخداد ها در صفحه وب واقع می شوند. برنامه نویس کنترل زیادی روی ترتیب اجرای کد ندارد. در واقع هیچ ترتیب اجرایی وجود ندارد و صفحه منتظر است تا به رخداد های پیش آمده واکنش نشان دهد.

4. 4 OnLoad & OnUnload ساده ترین رخداد ها، رخداد های OnLoad و OnUnload هستند. خاصیت OnLoad در برچسپ body به کدی اشاره می کند که هنگام بالا آمدن صفحه وب بطور خودکار اجرا می شود. خاصیت OnUnload در برچسب body به کدی اشاره می کند که هنگام بستن صفحه وب بطور خودکار اجرا می شود. Hello/Goodbye page function Hello() { globalName=prompt("Welcome to my page. " + "What is your name?",""); } function Goodbye() { alert("So long, " + globalName + " come back real soon."); } Whatever text appears in the page. view page

5. 5 HTML forms اکثر رخداد هایی که نیاز به پردازش دارند مربوط به عناصر فرمها هستند. یک فرم HTML مجموعه ای از عناصر جهت کنترل ورودی و خروجی و رخدادهای صفحه است. … عناصر فرم: ورودیها: دکمه، لیست رادیویی، دکمه رادیویی، جعبه کنترلی، رمز ورود و... ورودی وخروجی: جعبه متن، ناحیه متن و.... فرمها در برنامه نویسی CGI نیز استفاده می شوند.

6. 6 Button Element Fun with Buttons <script type="text/javascript" src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js"> <input type="button" value="Click for Lucky Number" onclick=“var num = RandomInt(1, 100); alert('The lucky number for the day is ' + num);" /> ساده ترین عنصر فرم دکمه است. کلیک روی دکمه یک رخداد است. view page

7. 7 Buttons & Functions Fun with Buttons 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"); } <input type="button" value="Click for Greeting" onclick="Greeting();" /> برای کارهای پیچیده تر، تابع مورد نظر را بنویسید و به رخداد onclick دکمه وصل کنید. view page

8. 8 Buttons & Windows جعبه 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

9. 9 Window Example Fun with Buttons 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(); } <input type="button" value="Click for Help" onclick="Help();" /> view page

10. 10 Window Example Refined Fun with Buttons 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(); } <input type="button" value="Click for Help" onclick="Help();" /> می توان به تابع window.open آرگومان فرستاد. آرگومان اول HREF را مشخص می کند. آرگومان دوم نام داخلی را مشخص می کند. آرگومان سوم خواص پنجره را تعیین می کند. view page

11. 11 Text Boxes جعبه متن برای گرفتن ورودی از کاربر استفاده می شود. برخلاف prompt ورودی کاربر در صفحه باقی می ماند و قابل تغییر است. پارامترها: اندازه: پهنای جعبه بر حسب کاراکتر مقدار: متن پیش فرض Fun with Text Boxes Enter your name here: <input type="button" value="Click Me" onclick="alert('Thanks, ' + document.BoxForm.userName.value + ', I needed that.');" /> view page

12. 12 Read/Write Text Boxes می توان محتوای جعبه متن را توسط دستور انتصاب نیز تغییر داد. نکته: محتوای متن ساده وخام است و از نوع رشته است. اگر می خواهید بصورت عدد استفاده شود از parseFloat و parseInt استفاده کنید. Fun with Text Boxes Enter a number here: <input type="button" value="Double" onclick="document.BoxForm.number.value= parseFloat(document.BoxForm.number.value) * 2;" /> view page

13. 13 Text Box Events رخداد onchange وقتی آتش می شود که متن تغییر کند. رخداد onfocus وقتی آتش می شود که ماوس روی متن کلیک کند. تابع blur() ، focus را خاموش می کند. Fun with Text Boxes function FahrToCelsius(tempInFahr) // Assumes: tempInFahr is a number (degrees Fahrenheit) // Returns: corresponding temperature in degrees Celsius { return (5/9)*(tempInFahr - 32); } Temperature in Fahrenheit: <input type="text" name="Fahr" size=“10” value=“0" onchange="document.BoxForm.Celsius.value = FahrToCelsius(parseFloat(document.BoxForm.Fahr.value));" /> ----> <input type="text" name="Celsius" size=“10” value="" onfocus="blur();" /> in Celsius view page

14. 14 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; }

15. 15 Validation Example Fun with Text Boxes <script type="text/javascript" src="verify.js"> function FahrToCelsius(tempInFahr) { return (5/9)*(tempInFahr - 32); } 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)); }" /> ----> in Celsius view page

16. 16 Text Areas جعبه متن فقط یک خط ورودی می پذیرد. TEXTAREA شبیه جعبه متن است ولی می شود تعداد ستونها وردیفها را تعیین نمود. Initial Text TEXTAREA یک برچسپ جفتی است. متن پیش فرض بین این جفت قرار می گیرد.

17. 17 TEXTAREA Example Fun with Textareas 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; } 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);" /> <input type="button" value="Generate Table" onClick="Table(parseFloat(document.AreaForm.lowRange.value), parseFloat(document.AreaForm.highRange.value), parseFloat(document.AreaForm.power.value));" /> view page

18. 18 JavaScript & Timeouts تابع setTimeout را می توان جهت اجرای کد در زمان های بعدی استفاده نمود. setTimeout(JavaScriptCodeToBeExecuted, MillisecondsUntilExecution) Fun with Timeouts function Move() // Results: sets the current page contents to be newhome.html { self.location.href = "form10.htm"; } This page has moved to newhome.html. view page

19. 19 Fun with Timeouts 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); } Countdown to Graduation 2007 Another Timeout Example view page

20. 20 Cookies & JavaScript کلوچه ها فایل های داده ای هستند که روی ماشین کلاینت ذخیره می شوند. قابل دسترسی و تغییر توسط سرور هستند. می توان با JavaScript نیز آنها را تغییر داد یا باز کرد. موارد استفاده: تجارت الکترونیکی:یادگیری اسم مشتری، خریدهای قبلی، رمز عبور و... خودآموز: ذخیره دروس یاد داده شده، نمرات و.... بازیها: ذخیره امتیازات قبلی هر صفحه میتواند کلوچه مخصوص به خود را داشته باشد. document.cookie مجموعه ای از زوجهای attribute=value است که با ; از هم جدا شده اند. "userName=Dave;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT"

21. 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) // 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(); } cookie.js

22. 22 Fun with Cookies <script type="text/javascript" src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/cookie.js"> 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); } Here is the stuff in my page. Cookie Example view page