Event-driven programs and HTML form elements
اسلاید 1: 1Event-driven programs and HTML form elements
اسلاید 2: 2Agendaevent-driven programsonload, onunloadHTML forms & attributesbutton, text box, text areaselection list, radio button, check box, password, hidden, …JavaScript form eventsproperties: name, type, value, …methods: blur(), focus(), click(), …event handlers: onblur(), onfocus(), onchange(), onclick(), …advanced features & techniqueswindows & frames, timeouts, cookies
اسلاید 3: 3برنامه های وابسته به رخداد ها زبانهای C++ و جاوا معمولا بصورت سریال اجرا می شوند:از تابع main شروع می کنیم و از اولین خط به صورت ترتیبی اجرا می کنیم.ممکن است برنامه دارای حلقه یا کد شرطی باشد، اما در هر صورت اجرای برنامه قدم به قدم خواهد بود. برنامه دارای شروع و پایان است و برنامه به ترتیب دلخواه برنامه نویس اجرا می شود.اما محاسبات درون یک صفحه وب بندرت سریال است. صفحه به رخداد هایی مثل کلیک موس یا دکمه ها جواب می دهد. قسمتی از ابزارهای JavaScript اعمالی را مشخص می کنند که در اثر رخداد ها در صفحه وب واقع می شوند.برنامه نویس کنترل زیادی روی ترتیب اجرای کد ندارد. در واقع هیچ ترتیب اجرایی وجود ندارد و صفحه منتظر است تا به رخداد های پیش آمده واکنش نشان دهد.
اسلاید 4: 4OnLoad & OnUnloadساده ترین رخداد ها، رخداد های 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
اسلاید 5: 5HTML formsاکثر رخداد هایی که نیاز به پردازش دارند مربوط به عناصر فرمها هستند.یک فرم HTML مجموعه ای از عناصر جهت کنترل ورودی و خروجی و رخدادهای صفحه است.<form name=FormName>…</form>عناصر فرم:ورودیها: دکمه، لیست رادیویی، دکمه رادیویی، جعبه کنترلی، رمز ورود و ... ورودی وخروجی: جعبه متن، ناحیه متن و ....فرمها در برنامه نویسی CGI نیز استفاده می شوند.
اسلاید 6: 6Button Element<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
اسلاید 7: 7Buttons & 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></html>برای کارهای پیچیده تر، تابع مورد نظر را بنویسید و به رخداد onclick دکمه وصل کنید. view page
اسلاید 8: 8Buttons & 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: 9Window 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
اسلاید 10: 10Window 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
اسلاید 11: 11Text 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></html>view page
اسلاید 12: 12Read/Write Text Boxesمی توان محتوای جعبه متن را توسط دستور انتصاب نیز تغییر داد. نکته: محتوای متن ساده وخام است و از نوع رشته است. اگر می خواهید بصورت عدد استفاده شود از parseFloat و parseInt استفاده کنید.<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></html>view page
اسلاید 13: 13Text Box Eventsرخداد onchange وقتی آتش می شود که متن تغییر کند. رخداد onfocus وقتی آتش می شود که ماوس روی متن کلیک کند. تابع blur()، focus را خاموش می کند.<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></html>view page
اسلاید 14: 14Text 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: 15Validation 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></html>view page
اسلاید 16: 16Text Areasجعبه متن فقط یک خط ورودی می پذیرد.TEXTAREA شبیه جعبه متن است ولی می شود تعداد ستونها وردیفها را تعیین نمود.<textarea name=TextAreaName rows=“NumRows” cols=“NumCols”>Initial Text</textarea>TEXTAREA یک برچسپ جفتی است. متن پیش فرض بین این جفت قرار می گیرد.
اسلاید 17: 17TEXTAREA 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></html>view page
اسلاید 18: 18JavaScript & Timeoutsتابع 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
اسلاید 19: 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>Another Timeout Exampleview page
اسلاید 20: 20Cookies & JavaScriptکلوچه ها فایل های داده ای هستند که روی ماشین کلاینت ذخیره می شوند.قابل دسترسی و تغییر توسط سرور هستند.می توان با JavaScript نیز آنها را تغییر داد یا باز کرد.موارد استفاده:تجارت الکترونیکی:یادگیری اسم مشتری، خریدهای قبلی، رمز عبور و ... خودآموز: ذخیره دروس یاد داده شده، نمرات و ....بازیها: ذخیره امتیازات قبلیهر صفحه میتواند کلوچه مخصوص به خود را داشته باشد.document.cookie مجموعه ای از زوجهای attribute=value است که با ; از هم جدا شده اند. userName=Dave;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT
اسلاید 21: 21function 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<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>Cookie Exampleview page
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.