Download presentation
Presentation is loading. Please wait.
1
JavaScript
2
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
3
برنامه نویسی طرف مشتری یادآوری: HTML برای تولید صفحات ایستا مناسب است.
می توان چینش عکس و متن، نحوه ارائه ، لینکها و ... را کنترل نمود. هنگام دسترسی به صفحات وب، شکل و محتوای سایت ثابت است. برای تولید صفحات فعال و تراکنشی به یک زبان برنامه نویسی نیاز داریم. برنامه نویسی طرف مشتری برنامه ها تحت یک زبان برنامه نویسی مجزا مثل JavaScript و JScript و VBScript نوشته می شوند. برنامه در داخل کد HTML صفحه جاسازی می شود و با برچسب script مشخص می گردد. <script type="text/javascript"> … </script> هنگام بارگذاری صفحه، مرورگر کد برنامه را اجرا کرده و خروجی دینامیک آنرا با محتوای استاتیک HTML ترکیب کرده و نمایش می دهد.
4
Scripts vs. Programs زبان اسکریپتی یک زبان برنامه نویسی ساده و تفسیر شده است. اسکریپتها به صورت متن ساده هستند که توسط کاربرد تفسیر می شوند. مزایا: مدل اجرایی ساده تر: به کامپایلر و یا محیط توسعه برنامه (مثل turbo c) نیازی نداریم. صرفه جویی در پهنای باند: بجای کد اجرایی برنامه، سورس کد بارگذاری می شود. مستقل از محیط اجرا: هر مرورگری که دارای قابلیت تفسیر اسکریپت باشد می تواند کد را اجرا کند. معایب: کندی: از زبانهای برنامه سازی معمول کندتر است. توانایی محدود: قدرت و خواص زبانهای برنامه سازی معمول را ندارد.
5
زبانهای اسکریپتی JavaScript اولین زبان اسکریپتی است که توسط Netscape در سال 1995 ابداع شد. از لحاظ syntax شبیه Java/C++ است اما دارای انعطاف بیشتر وتوانایی کمتر است. نوع داده قابل تغییر، متغییرهای دینامیک، اشیا ساده JScript در سال 1996 توسط مایکروسافت در پاسخ به JavaScript ابداع شد: هسته هر دو شبیه هم هست. اما تفاوتهای وابسته به مرورگر وجود دارد. خوشبختانه، اکثر مرورگرها هر دو زبان را پشتیبانی می کنند. هسته JavaScript 1.5 و JScript 5.0 با استاندارد ECMAScript مطابقت دارد. VBScript نسخه اسکریپتی زبان برنامه نویسی ویژوال بیسیک است.
6
مزایای برنامه نویسی طرف مشتری
اضافه کردن خواص پویا به صفحات وب: اعتبارسنجی داده های فرم تغییر تصاویر عناصر حساس به زمان و عناصر تصادفی بررسی کلوچه های اینترنتی تعریف برنامه هایی با واسط وب: استفاده از دکمه ها، جعبه متن، تصاویر قابل کلیک کردن، پرومپت و...
7
محدودیتهای برنامه نویسی طرف مشتری
سورس کد برنامه توسط همه قابل مشاهده است. بدلایل امنیتی اسکریپتها نمی توانند بعضی کارها را انجام دهند. مثلا به دیسک سخت مشتری دسترسی ندارند. چون قرار است روی هر نوع ماشینی اجرا شوند ، شامل دستورات وابسته به محیط اجرا نیستند. زبانهای برنامه سازی اسکریپتی کامل نیستند. مثلا اشیاء JavaScript خام هستند و برای توسعه پروژه های بزرگ مناسب نیستند.
8
JavaScript دستورdocument.write متن را داخل صفحه نمایش می دهد.
با استفاده از برچسپ SCRIPT می شود کدهای JavaScript را در صفحات وب جاسازی کرد. خروجی کد JavaScript طوری نمایش داده می شود انگار که مستقیما جزء کد HTML است. دستورdocument.write متن را داخل صفحه نمایش می دهد. این متن می تواند شامل برچسپهای HTML باشد. هنگام نمایش متن، برچسپها توسط مرورگر تفسیر می گردند. مثل C++/Java ، عبارات با ; خاتمه پیدا می کنند. اما، انتهای خط نیز به عنوان پایان دستور تلقی می شود. توضیحات JavaScript نیز مثل C++/Java هستند. // برای توضیحات تک خطی /*…*/ برای توضیحات چند خطی <html> <!–- COMP519 js01.html > <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
9
JavaScript Data Types & Variables
رشته: "foo" 'howdy do' "I said 'hi'." "" اعداد: E6 بولی: true false <html> <!–- COMP519 js02.html > <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 = ; اسم متغییرها می تواند دنباله ای از حروف و ارقام و underline باشد که با یک حرف یا رقم شروع شده است. اسم متغییرها به بزرگ و کوچکی حروف حساس است. اگر چه نیازی به اعلان متغییر ها وجود ندارد. اما توصیه می شود که از دستور var استفاده شود. var message, pi= ; نوع متغییر ها را می شود هنگام انتصاب مقادیر عوض کرد. view page
10
عملگرها و دستورات کنترلی JavaScript
عملگرهای و دستورات کنترلی استاندارد C++/Java در زبان JavaScript قابل استفاده هستند. +, -, *, /, %, ++, --, … ==, !=, <, >, <=, >= &&, ||, !,===,!== if-then, if-then-else, switch while, for, do-while, … فرض کنید که یک کاغذ خیلی بزرگ دارید. این کاغذ را چند بار تا کنیم تا قطر آن برابر فاصله زمین تا خورشید شود. <html> <!–- COMP519 js03.html > <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
11
JavaScript Math Routines
<html> <!–- COMP519 js04.html > <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("<img src=' "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); 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
12
صفحات تعاملی ساده ترین نوع تعامل با کاربر استفاده از prompt است.
<html> <!-- COMP519 js05.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
13
تعریف توابع کاربر تعریف توابع نیز مثل 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) { می توان دامنه متغییرها را محدود کرد: اگر برای تعریف متغییر از var استفاده کنیم، آن متغییر از نوع محلی خواهد بود. انجام این کار باعث ماژولار شدن برنامه می گردد.
14
یک مثال دیگر مساله پرتاب تاسها را به یاد بیاورید.
<html> <!–- COMP519 js07.html > <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"> roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); document.write("<img src=' "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); roll2 + ".gif'/>"); </script> </div> </body> </html> مساله پرتاب تاسها را به یاد بیاورید. می شود تابعی نوشت که یک عدد تصادفی بین a و b تولید کند. این کار راحتتر است و می شود بعدا از آن استفاده کرد. view page
15
مثال تابع تعریف توابع را در HEAD قرار دهید.
<html> <!–- COMP519 js06.html > <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> 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."); </body> </html> تعریف توابع را در HEAD قرار دهید. چون HEAD ابتدا بارگذاری می شود، تعریف توابع قبل استفاده از آنها در BODY اتفاق می افتد. view page
16
کتابخانه 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=" </script>
17
مثال کتابخانه view page <html>
<!–- COMP519 js08.html > <head> <title> Random Dice Rolls Revisited</title> <script type="text/javascript” src=" </script> </head> <body> <div align="center"> <script type="text/javascript"> roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); document.write("<img src=' "~martin/teaching/comp519/Images/die" + roll1 + ".gif'/>"); document.write(" "); roll2 + ".gif'/>"); </div> </body> </html> view page
18
JavaScript Strings هر کلاس یک نوع جدید را تعریف می کند که داده ها (خصوصیات) را با عملهایی که روی آنها انجام می شود (متدها) را کپسوله می کند. رشته یک کپسول از کاراکترها است که با “ احاطه شده اند. خواص رشته : length برای ذخیره تعداد کاراکترهای رشته استفاده میگردد. متدهای رشته : charAt(index) : returns the character stored at the given index (as in C++/Java, indices 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.length word.charAt(0)
19
مثال رشته: کلمات دو جهته
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) // 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! باید ابتدا غیر حروفها را حذف کنیم سپس همه حروف را بزرگ کنیم در نهایت، حروف را از ابتدا و انتها یکی یکی با هم مقایسه کنیم.
20
view page <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) </script> </head> <body> 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."); </body> </html> view page
21
آرایه ها در 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
22
مثال آرایه <html> <!–- COMP519 js10.html > <head> <title>Die Statistics</title> <script type="text/javascript" src=" </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)]++; document.write("Number of " + i + "'s = " + rolls[i] + "<br />"); </body> </html> فرض کنید می خواهیم که درستی تابع تولید عدد تصادفی را تحقیق کنیم. آرایه ای از شمارنده ها داریم. شمارنده ها را به صفر مقداردهی اولیه می کنیم. هر بار که x آمد مقدار rolls[x] را افزایش می دهیم. مقادیر شمارنده ها را نشان می دهیم. view page
23
کلاس Date آرایه ها و رشته ها بیشترین استفاده را در JavaScript دارند.
اما کلاسها و اشیاء دیگری نیز وجود دارند. کلاس Date را می شود برای دسترسی به زمان و تاریخ جاری استفاده نمود. برای ایجاد یک شئ از نوع Date از new استفاده کنید و مقدار سال و ماه و ... را تنظیم کنید. today = new Date(); // sets to current date & time newYear = new Date(2002,0,1); //sets to Jan 1, :00AM متدها: newYear.getYear() newYear.getMonth() newYear.getDay() newYear.getHours() newYear.getMinutes() newYear.getSeconds() newYear.getMilliseconds()
24
مثال Date بصورت پیش فرض date اطلاعات کاملی را نمایش می دهد.
<html> <!–- COMP519 js11.html > <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
25
یک مثال دیگر می شود تاریخ ها را از هم کم یا به هم اضافه نمود.
<html> <!–- COMP519 js12.html > <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
26
شئ document برای پیدا کردن زمان و تاریخ آخرین تغییرات سند HTML
هم IE و هم Netscape اجازه می دهند تا با استفاده از شئ document (که کلاس نیست!) اطلاعاتی راجع به سند HTML پیدا کنیم. <html> <!–- COMP519 js13.html > <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> document.write(document.lastModified); </tr> </table> </body> </html> document.write(…) برای نمایش متن در سند HTML document.URL برای پیدا کردن URL سند HTML document.lastModified برای پیدا کردن زمان و تاریخ آخرین تغییرات سند HTML view page
27
شئ navigator برای گرفتن اسم مرورگر navigator.appName
navigator.appVersion برای گرفتن نسخه مرورگر <html> <!–- COMP519 js14.html > <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> <!-- MSIE.css --> a {text-decoration:none; font-size:larger; color:red; font-family:Arial} a:hover {color:blue} <!-- Netscape.css --> a {font-family:Arial; color:white; background-color:red} view page
28
User-Defined Classes می توان توسط دستور function که بعنوان جزء سازنده عمل می کند، یک کلاس جدید تعریف کرد. با استفاده از this متدها و خواص را مشخص کنید. بر خلاف C++ نمی شود داده ها را پنهان کرد. // COMP Die.js // // 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;
29
مثال کلاس view page <html>
<!–- COMP519 js15.html > <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); </body> </html> view page
Similar presentations
