JavaScript

JavaScript hassan.shojaee@gmail.com حسن شجاعی

client-side programming with JavaScript • scripts vs. programs • JavaScript vs. JScript vs. VBScript • common tasks for client-side scripts • JavaScript • data types & expressions • control statements • functions & libraries • strings & arrays • Date, document, navigator, user-defined classes

برنامه نویسی طرف مشتری • یادآوری: HTML برای تولید صفحات ایستا مناسب است. • می توان چینش عکس و متن، نحوه ارائه ، لینکها و ... را کنترل نمود. • هنگام دسترسی به صفحات وب، شکل و محتوای سایت ثابت است. • برای تولید صفحات فعال و تراکنشی به یک زبان برنامه نویسی نیاز داریم. • برنامه نویسی طرف مشتری • برنامه ها تحت یک زبان برنامه نویسی مجزا مثل JavaScript وJScript وVBScript نوشته می شوند. • برنامه در داخل کد HTML صفحه جاسازی می شود و با برچسب scriptمشخص می گردد. • <script type="text/javascript"> … </script> • هنگام بارگذاری صفحه، مرورگر کد برنامه را اجرا کرده و خروجی دینامیک آنرا با محتوای استاتیک HTML ترکیب کرده و نمایش می دهد.

Scripts vs. Programs • زبان اسکریپتی یک زبان برنامه نویسی ساده و تفسیر شوندهاست. • اسکریپتها به صورت متن ساده هستند که توسط کاربرد تفسیر می شوند. • مزایا: • مدل اجرایی ساده تر: به کامپایلر و یا محیط توسعه برنامه (مثل turbo c) نیازی نداریم. • صرفه جویی در پهنای باند: دینامیک کردن صفحات بدون جابجایی اطلاعات با سرور • مستقل از محیط اجرا: هر مرورگری که دارای قابلیت تفسیر اسکریپت باشد می تواند کد را اجرا کند. • معایب: • کندی: از زبانهای برنامه سازی معمول کندتر است. • توانایی محدود: قدرت و خواص زبانهای برنامه سازی معمول را ندارد.

زبانهای اسکریپتی • JavaScriptاولین زبان اسکریپتی است که توسطNetscape در سال 1995 ابداع شد. • از لحاظ syntax شبیهJava/C++ است اما دارای انعطاف بیشتر وتوانایی کمتر است. • نوع داده قابل تغییر، متغییرهای دینامیک، اشیا ساده • JScriptدر سال 1996 توسط مایکروسافت در پاسخ به JavaScript ابداع شد: • هسته هر دو شبیه هم هست. اما تفاوتهای وابسته به مرورگر وجود دارد. • خوشبختانه، اکثر مرورگرها هر دو زبان را پشتیبانی می کنند. • VBScriptنسخه اسکریپتی زبان برنامه نویسی ویژوال بیسیک است.

مزایای برنامه نویسی طرف مشتری • اضافه کردن خواص پویا به صفحات وب: • اعتبارسنجی داده های فرم • تغییر تصاویر • عناصر حساس به زمان و عناصر تصادفی • بررسی کلوچه های اینترنتی • تعریف برنامه هایی با واسط وب: • استفاده از دکمه ها، جعبه متن، تصاویر قابل کلیک کردن، پرومپت و...

محدودیتهای برنامه نویسی طرف مشتری • سورس کد برنامه توسط همه قابل مشاهده است. • بدلایل امنیتی اسکریپتها نمی توانند بعضی کارها را انجام دهند. • مثلا به دیسک سخت مشتری دسترسی ندارند. • چون قرار است روی هر نوع ماشینی اجرا شوند ، شامل دستورات وابسته به محیط اجرا نیستند. • زبانهای برنامه سازی اسکریپتی کامل نیستندو برای توسعه پروژه های بزرگ مناسب نیستند.

JavaScript • با استفاده از برچسپ SCRIPT می شود کدهای JavaScript را در صفحات وب جاسازی کرد. • خروجی کد JavaScript طوری نمایش داده می شود انگار که مستقیما جزء کد HTML است. • دستورdocument.writeمتن را داخل صفحه نمایش می دهد. • این متن می تواند شامل برچسپهای HTML باشد. • هنگام نمایش متن، برچسپها توسط مرورگر تفسیر می گردند. • مثل C++/Java ، عبارات با ;خاتمه پیدا می کنند. • اما، انتهای خط نیز به عنوان پایان دستور تلقی می شود. • توضیحات JavaScript نیز مثل C++/Java هستند. • // برای توضیحات تک خطی • /*…*/برای توضیحات چند خطی <html> <!–- COMP519 js01.html 16.08.06 --> <head> <title>JavaScript Page</title> </head> <body> <script type="text/javascript"> // silly code to demonstrate output document.write("Hello world!"); document.write("<p>How are <br/>" + "<i>you</i>?</p>"); </script> <p>Here is some static text as well. </p> </body> </html> view page

JavaScript Data Types & Variables • JavaScript دارای سه نوع اصلی داده است. • رشته:"foo" 'howdy do' "I said 'hi'." "" • اعداد:12 3.14159 1.5E6 • بولی:true false <html> <!–- COMP519 js02.html 16.08.06 --> <head> <title>Data Types and Variables</title> </head> <body> <script type="text/javascript"> var x, y; x= 1024; y=x;x = "foobar"; document.write("<p>x = " + y + "</p>"); document.write("<p>x = " + x + "</p>"); </script> </body> </html> • دستورات انتصاب نیز مثل C++/Javaهستند. • message = "howdy"; • pi = 3.14159; • اسم متغییرها می تواند دنباله ای از حروف و ارقام و underline باشد که با یک حرف یا رقم شروع شده است. • اسم متغییرها به بزرگ و کوچکی حروف حساس است. • اگر چه نیازی به اعلان متغییر ها وجود ندارد. اما توصیه می شود که از دستور varاستفاده شود. • var message, pi=3.14159; • نوع متغییر ها را می شود هنگام انتصاب مقادیر عوض کرد. view page

عملگرها و دستورات کنترلی JavaScript • عملگرهای و دستورات کنترلی استاندارد C++/Java در زبان JavaScript قابل استفاده هستند. +, -, *, /, %, ++, --, … ==, !=, <, >, <=, >= &&, ||, !,===,!== if-then, if-then-else, switch while, for, do-while, … • فرض کنید که یک کاغذ خیلی بزرگ دارید. این کاغذ را چند بار تا کنیم تا قطر آن برابر فاصله زمین تا خورشید شود. <html> <!–- COMP519 js03.html 16.08.06 --> <head> <title>Folding Puzzle</title> </head> <body> <script type="text/javascript"> distanceToSun = 93.3e6*5280*12; thickness = .002; foldCount = 0; while (thickness < distanceToSun) { thickness *= 2; foldCount++; } document.write("Number of folds = " + foldCount); </script> </body> </html> view page

JavaScript Math Routines <html> <!–- COMP519 js04.html 16.08.06 --> <head> <title>Random Dice Rolls</title> </head> <body> <div style="text-align:center"> <script type="text/javascript"> roll1 =Math.floor(Math.random()*6) + 1; roll2 =Math.floor(Math.random()*6) + 1; document.write("<imgsrc='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); document.write("<imgsrc='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll2 + ".gif'/>"); </script> </div> </body> </html> • شئ math شامل توابع و ثابتهای ریاضی است. • Math.sqrt • Math.pow • Math.abs • Math.max • Math.min • Math.floor • Math.ceil • Math.round • Math.PI • Math.E • تابعMath.randomیک عدد بین 0 و 1 بر می گرداند. view page

صفحات تعاملی <html>  <head> <title>Interactive page</title> </head> <body> <script type="text/javascript"> userName = prompt("What is your name?", ""); userAge = prompt("Your age?", ""); userAge = parseFloat(userAge); document.write("Hello " + userName + ".") if (userAge < 18) { document.write(" Do your parents know " + "you are online?"); } else { document.write(" Welcome friend!"); } </script> <p>The rest of the page...</p> </body> </html> • ساده ترین نوع تعامل با کاربر استفاده از promptاست. • آرگومان اول متنی است که به صورت سوال ظاهر می شود. • آرگومان دوم مقدار پیش فرض جواب سوال است. (در صورتی که کاربر چیزی وارد نکند.) • مقدار برگشتی تابع رشته ای است که کاربر وارد کرده است. • اگر مقدار رشته عدد بود باید توسط تابع parseFloatتبدیل شود. • البته استفاده از فرمها برای تعامل مناسبتر است. (بعدا) view page

تعریف توابع کاربر • تعریف توابع نیز مثل C++/Javaاست با این تفاوت که: • نوع داده برگشتی تابع مشخص نیست. • نوع پارامترهای ورودی توابع مشخص نیست. • روش مقدار دهی آرگومانها از نوع by-value است. function isPrime(n) // Assumes: n > 0 // Returns: true if n is prime, else false { if (n < 2) { return false; } else if (n == 2) { return true; } else { for (var i = 2; i <= Math.sqrt(n); i++) { if (n % i == 0) { return false; } } return true; } } می توان دامنه متغییرها را محدود کرد: اگر برای تعریف متغییر از varاستفاده کنیم، آن متغییر از نوع محلی خواهد بود. انجام این کار باعث ماژولار شدن برنامه می گردد.

یک مثال دیگر <html> <!–- COMP519 js07.html 16.08.2006 --> <head> <title> Random Dice Rolls Revisited</title> <script type="text/javascript"> function RandomInt(low, high) // Assumes: low <= high // Returns: random integer in range [low..high] { return Math.floor(Math.random()*(high-low+1)) + low; } </script> </head> <body> <div align="center"> <script type="text/javascript"> roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); document.write("<imgsrc='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); document.write("<imgsrc='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll2 + ".gif'/>"); </script></div> </body> </html> • مساله پرتاب تاسها را به یاد بیاورید. • می شود تابعی نوشت که یک عدد تصادفی بین a و b تولید کند. • این کار راحتتر است و می شود بعدا از آن استفاده کرد. view page

مثال تابع <html> <!–- COMP519 js06.html 16.08.2006 --> <head> <title>Prime Tester</title> <script type="text/javascript"> function isPrime(n) // Assumes: n > 0 // Returns: true if n is prime { // CODE AS SHOWN ON PREVIOUS SLIDE } </script> </head> <body> <script type="text/javascript"> testNum = parseFloat(prompt("Enter a positive integer", "7")); if (isPrime(testNum)) { document.write(testNum + " <b>is</b> a prime number."); } else { document.write(testNum + " <b>is not</b> a prime number."); } </script> </body> </html> • تعریف توابع را در HEADقرار دهید. • چونHEADابتدا بارگذاری می شود، تعریف توابع قبل استفاده از آنها در BODY اتفاق می افتد. view page

کتابخانه JavaScript • راه حل بهتر: اگر توابعی که تعریف می کنید ممکن است بعدا مورد استفاده قرار بگیرند، آنها را در یک فایل کتابخانه ای ذخیره کرده و آن کتابخانه را در موقع نیاز بارگذاری کنید. • فایلrandom.jsشامل تعریف توابع زیر است: • RandomNum(low, high)یک عدد حقیقی تصادفی در بازه[low..high)بر می گرداند. • RandomInt(low, high)یک عدد طبیعی تصادفی در بازه[low..high)بر می گرداند. • RandomChar(string) یک کاراکتر تصادفی را از رشته string انتخاب می کند. • RandomOneOf([item1,…,itemN])یکی از ایتمهای لیست را برمی گرداند. • برچسب SCRIPT دارای یک خاصیت به اسم SRC است که می توان از آن برای بارگذاری فایل کتابخانه ای استفاده کرد. <script type="text/javascript" src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js"> </script>

مثال کتابخانه <html> <!–- COMP519 js08.html 16.08.2006 --> <head> <title> Random Dice Rolls Revisited</title> <script type="text/javascript” src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js"> </script> </head> <body> <div align="center"> <script type="text/javascript"> roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); document.write("<img src='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); document.write("<img src='http://www.csc.liv.ac.uk/"+ "~martin/teaching/comp519/Images/die" + roll2 + ".gif'/>"); </script> </div> </body> </html> view page

JavaScript Strings • هر کلاس یک نوع جدید را تعریف می کند که داده ها (خصوصیات) را با عملهایی که روی آنها انجام می شود (متدها) را کپسوله می کند. • رشته یک کپسول از کاراکترها است که با “ احاطه شده اند. • خواص رشته : • length برای ذخیره تعداد کاراکترهای رشته استفاده میگردد. • متدهای رشته : • charAt(index): returns the character stored at the given index (as in Cindices start at 0) • substring(start, end) : returns the part of the string between the start (inclusive) and end (exclusive) indices • toUpperCase() : returns copy of string with letters uppercase • toLowerCase() : returns copy of string with letters lowercase • برای ایجاد رشته می توان از دستور new یا دستور انتساب ساده استفاده کرد. word = new String("foo"); word = "foo"; • خواص و متدها شبیه C++/Javaفراخوانی می شوند. word.lengthword.charAt(0)

مثال رشته: کلمات دو جهته function Strip(str) // Assumes: str is a string // Returns: str with all but letters removed { var copy = ""; for (var i = 0; i < str.length; i++) { if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z") || (str.charAt(i) >= "a" && str.charAt(i) <= "z")) { copy += str.charAt(i); } } return copy; } function IsPalindrome(str) // Assumes: str is a string // Returns: true if str is a palindrome, else false { str = Strip(str.toUpperCase()); for(var i = 0; i < Math.floor(str.length/2); i++) { if (str.charAt(i) != str.charAt(str.length-i-1)) { return false; } } return true; } • فرض کنید می خواهیم کلمات دوجهته را تشخیص دهیم • noon , Radar • Madam, I'm Adam. • A man, a plan, a canal: Panama! • باید ابتدا غیر حروفها را حذف کنیم • سپس همه حروف را بزرگ کنیم • در نهایت، حروف را از ابتدا و انتها یکی یکی با هم مقایسه کنیم.

<html> • <!–- COMP519 js09.html 16.08.2006 --> • <head> • <title>Palindrome Checker</title> • <script type="text/javascript"> • function Strip(str) { • // CODE AS SHOWN ON PREVIOUS SLIDE • } function IsPalindrome(str) { // CODE AS SHOWN ON PREVIOUS SLIDE } • </script> • </head> • <body> • <script type="text/javascript"> • text = prompt("Enter a word or phrase", "Madam, I'm Adam"); • if (IsPalindrome(text)) { • document.write("'" + text + "' <b>is</b> a palindrome."); • } • else { • document.write("'" + text + "' <b>is not</b> a palindrome."); • } • </script> • </body> • </html> view page

آرایه ها در JavaScript • آرایه دنباله ای از آیتم ها را نگهداری می کند. با ایندکس میتوان به عناصر دست یافت. • درJavaScriptممکن است نوع آیتمها متفاوت باشند. • برای ایجاد آرایه، با دستور newحافظه را تخصیص دهید.(یا مستقیما حافظه را تخصیص دهید) • items = new Array(10); // allocates space for 10 items • items = new Array(); // if no size, will adjust dynamically • items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values [] • برای دسترسی به یک عنصر آرایه از []استفاده کنید. • for (i = 0; i < 10; i++) { • items[i] = 0; // stores 0 at each index • } • خاصیت lengthتعداد آیتمهای آرایه را ذخیره می کند. • for (i = 0; i < items.length; i++) { • document.write(items[i] + "<br/>"); // displays elements • }

مثال آرایه <html> <!–- COMP519 js10.html 16.08.2006 --> <head> <title>Die Statistics</title> <script type="text/javascript" src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js"> </script> </head> <body> <script type="text/javascript"> numRolls = 60000; dieSides = 6; rolls = new Array(dieSides+1); for (i = 1; i < rolls.length; i++) { rolls[i] = 0; } for(i = 1; i <= numRolls; i++) { rolls[RandomInt(1, dieSides)]++; } for (i = 1; i < rolls.length; i++) { document.write("Number of " + i + "'s = " + rolls[i] + "<br />"); } </script> </body> </html> • فرض کنید می خواهیم که درستی تابع تولید عدد تصادفی را تحقیق کنیم. • آرایه ای از شمارنده ها داریم. • شمارنده ها را به صفر مقداردهی اولیه می کنیم. • هر بار که x آمد مقدار rolls[x] را افزایش می دهیم. • مقادیر شمارنده ها را نشان می دهیم. view page

کلاس Date • آرایه ها و رشته ها بیشترین استفاده را در JavaScript دارند. • اما کلاسها و اشیاء دیگری نیز وجود دارند. • کلاس Date را می شود برای دسترسی به زمان و تاریخ جاری استفاده نمود. • برای ایجاد یک شئ از نوع Date از new استفاده کنید و مقدار سال و ماه و ... را تنظیم کنید. • today = new Date(); // sets to current date & time • newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM • متدها: • newYear.getYear() • newYear.getMonth() • newYear.getDay() • newYear.getHours() • newYear.getMinutes() • newYear.getSeconds() • newYear.getMilliseconds()

مثال Date <html> <!–- COMP519 js11.html 16.08.2006 --> <head> <title>Time page</title> </head> <body> Time when page was loaded: <script type="text/javascript"> now = new Date(); document.write("<p>" + now + "</p>"); time = "AM"; hours = now.getHours(); if (hours > 12) { hours -= 12; time = "PM" } else if (hours == 0) { hours = 12; } document.write("<p>" + hours + ":" + now.getMinutes() + ":" + now.getSeconds() + " " + time + "</p>"); </script> </body> </html> • بصورت پیش فرض date اطلاعات کاملی را نمایش می دهد. • Sun Feb 03 22:55:20 GMT-0600 (Central Standard Time) 2002 • می شود با استفاده از متدها قسمتی از تاریخ یا زمان را نشان داد. view page

یک مثال دیگر <html> <!–- COMP519 js12.html 16.08.2006 --> <head> <title>Time page</title> </head> <body> This year: <script type="text/javascript"> now = new Date(); newYear = new Date(2008,0,1); secs = Math.round((now-newYear)/1000); days = Math.floor(secs / 86400); secs -= days*86400; hours = Math.floor(secs / 3600); secs -= hours*3600; minutes = Math.floor(secs / 60); secs -= minutes*60 document.write(days + " days, " + hours + " hours, " + minutes + " minutes, and " + secs + " seconds."); </script> </body> </html> • می شود تاریخ ها را از هم کم یا به هم اضافه نمود. • نتیجه عددی است که واحد آن ms است. view page

شئ document • هم IE و هم Netscape اجازه می دهند تا با استفاده از شئ document (که کلاس نیست!) اطلاعاتی راجع به سند HTML پیدا کنیم. <html> <!–- COMP519 js13.html 16.08.2006 --> <head> <title>Documentation page</title> </head> <body> <table width="100%"> <tr> <td><small><i> <script type="text/javascript"> document.write(document.URL); </script> </i></small></td> <td style=“text-align: right;"><small><i> <script type="text/javascript"> document.write(document.lastModified); </script> </i></small></td> </tr> </table> </body> </html> • document.write(…) • برای نمایش متن در سند HTML • document.URL • برای پیدا کردن URL سند HTML • document.lastModified • برای پیدا کردن زمان و تاریخ آخرین تغییرات سند HTML view page

شئ navigator navigator.appName برای گرفتن اسم مرورگر navigator.appVersion برای گرفتن نسخه مرورگر <html> <!–- COMP519 js14.html 16.08.2006 --> <head> <title>Dynamic Style Page</title> <script type="text/javascript"> if (navigator.appName == "Netscape") { document.write('<link rel=stylesheet '+ 'type="text/css" href="Netscape.css">'); } else { document.write('<link rel=stylesheet ' + 'type="text/css" href="MSIE.css">'); } </script> </head> <body> Here is some text with a <a href="javascript:alert('GO AWAY')">link</a>. </body> </html>  a {text-decoration:none; font-size:larger; color:red; font-family:Arial} a:hover {color:blue}  a {font-family:Arial; color:white; background-color:red} view page

User-Defined Classes • می توان توسط دستور function که بعنوان جزء سازنده عمل می کند، یک کلاس جدید تعریف کرد. • با استفاده از this متدها و خواص را مشخص کنید. • بر خلاف C++ نمی شود داده ها را پنهان کرد. // COMP519 Die.js 16.08.2006// // Die class definition //////////////////////////////////////////// function Die(sides) { this.numSides = sides; this.numRolls = 0; this.Roll = Roll; } function Roll() { this.numRolls++; return Math.floor(Math.random()*this.numSides) + 1; }

مثال کلاس <html> <!–- COMP519 js15.html 16.08.2006 --> <head> <title>Dice page</title> <script type="text/javascript" src="Die.js"> </script> </head> <body> <script type="text/javascript"> die6 = new Die(6); die8 = new Die(8); roll6 = -1; // dummy value to start loop roll8 = -2; // dummy value to start loop while (roll6 != roll8) { roll6 =die6.Roll(); roll8 =die8.Roll(); document.write("6-sided: " + roll6 + " " + "8-sided: " + roll8 + "<br />"); } document.write("<br />Number of rolls: " + die6.numRolls); </script> </body> </html> view page

Event-driven programs and HTML form elements

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

برنامه های وابسته به رخداد ها • زبانهای C++ و جاوا معمولا بصورت سریال اجرا می شوند: • از تابع main شروع می کنیم و از اولین خط به صورت ترتیبی اجرا می کنیم. • ممکن است برنامه دارای حلقه یا کد شرطی باشد، اما در هر صورت اجرای برنامه قدم به قدم خواهد بود. • برنامه دارای شروع و پایان است و برنامه به ترتیب دلخواه برنامه نویس اجرا می شود. • اما محاسبات درون یک صفحه وب بندرت سریال است. صفحه به رخداد هایی مثل کلیک موس یا دکمه ها جواب می دهد. • قسمتی از ابزارهای 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> </html> • ساده ترین رخداد ها، رخداد های OnLoad و OnUnload هستند. • خاصیت OnLoad در برچسپ body به کدی اشاره می کند که هنگام بالا آمدن صفحه وب بطور خودکار اجرا می شود. • خاصیت OnUnload در برچسب body به کدی اشاره می کند که هنگام بستن صفحه وب بطور خودکار اجرا می شود. view page

HTML forms • اکثر رخداد هایی که نیاز به پردازش دارند مربوط به عناصر فرمها هستند. • یک فرم HTML مجموعه ای از عناصر جهت کنترل ورودی و خروجی و رخدادهای صفحه است. <form name="FormName"> … </form> • عناصر فرم: • ورودیها: دکمه، لیست رادیویی، دکمه رادیویی، جعبه کنترلی، رمز ورود و ... • ورودی وخروجی: جعبه متن، ناحیه متن و .... • فرمها در برنامه نویسی CGI نیز استفاده می شوند.

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> </html> view page

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> </html> • برای کارهای پیچیده تر، تابع مورد نظر را بنویسید و به رخداد onclickدکمه وصل کنید. view page

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 forwriting OutputWindow.document.write("WHATEVER"); // write text to that // window as before OutputWindow.document.close(); // close the window

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

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 { varOutputWindow = 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

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> </html> view page

Read/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

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> </html> • رخداد onchange وقتی آتش می شود که متن تغییر کند. • رخداد onfocus وقتی آتش می شود که ماوس روی متن کلیک کند. • تابع blur()،focus را خاموش می کند. view page

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

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> </html> view page

Text Areas • جعبه متن فقط یک خط ورودی می پذیرد. • TEXTAREAشبیه جعبه متن است ولی می شود تعداد ستونها وردیفها را تعیین نمود. <textarea name="TextAreaName" rows=“NumRows” cols=“NumCols”> Initial Text </textarea> • TEXTAREAیک برچسپ جفتی است. متن پیش فرض بین این جفت قرار می گیرد.

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> </html> view page

JavaScript & 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

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

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

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(); }

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT