1 / 69

جاوا اسکریپت

جاوا اسکریپت. Head. <html> <head> <title> ... </title> <script language="JavaScript" type="text/JavaScript"> ...... JavaScript codes ...... </script> </head>. Body.

uta-larson
Download Presentation

جاوا اسکریپت

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. جاوا اسکریپت

  2. Head • <html><head><title> ... </title><script language="JavaScript" type="text/JavaScript">...... JavaScript codes ......</script></head>

  3. Body • <html><head></head><body><script language="javascript" type="text/javascript">....... javascript codes ......</script></body></html>

  4. مثال: • <html><head></head><body><script language="javascript" type="text/javascript">document.write("<h1 align='center'> Hello my friends! </h1>");</script></body></html>

  5. تگ اسکریپت • <script> ... </script>

  6. تگ Language • <script language="javascript"></script>

  7. تگ type • تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascriptقرار دهيد. • نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند.

  8. مثال: • مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد: • <html><head><title> My JavaScript </title></head><body><script language="javascript1.5" type="text/javascript">document.write(" Hello my friends ")</script></body></html> • اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد.

  9. فایل خارجی با پسوند js

  10. تعریف متغیر • <script language="javascript" type="text/javascript">var strTest = "This is an example for variable."document.write(txtTest)</script> نکته: نوشتن Var اختیاری است.

  11. براي انتخاب نام متغير بايد نکات زير را رعايت کنيد: • نام يک متغير مي تواند از مجموع حروف، اعداد و علامت underline يا زيرين خط يعني _ تشکيل شود، که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در آن نبايد باشد. • در جاوااسکريپت حروف کوچک با بزرگ متفاوت مي باشند يعني strTest با strtest کاملاً تفاوت دارد که اصطلاحاً مي گويند جاوااسکريپت case sensitive است.

  12. انواع متغيرها: متغيرهاي سراسری: اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد نياز باشد از آنها بهره مي گيريد. متغیرهای محلی: متغير هاي محلي در توابع يا function ها کاربرد دارند که يک متغير در هر تابع مي تواند مقادير متفاوت داشته باشد

  13. Date Object اين object بصورت زير تعريف مي شود: new Date()

  14. متدهاي شئDate getDate(), getDay(), getMonth(), getYear(), getHours(), getMinutes(), getSeconds() نکته:برای اینکه سال بصورت چهاررقمي نوشته شود بايد از متد getFullYear() استفاده کنيد. نکته:استاندارد UTC ،استاندارد جهانی زمانی می باشد. نکته: اگر هم بخواهيد تمام مقادير بر اساس UTC برگردانده شوند، بايد اين کلمه را در وسط متد مورد نظر وارد کنيد. بدين صورت: getUTCFullyear(), getUTCDate(), getUTCHours(), getUTCMinutes()

  15. مثال: • <script language="javascript" type="text/javascript">var vorood = new Date()document.write( vorood.getHours() + ":" + vorood.getMinutes() + ":" + vorood.getSeconds() )</script>

  16. انواع عملگرها: • عملگرهاي رياضي يا Arithmetic Operators: • عملگرهاي مقايسه اي • عملگرهاي منطقي • عملگرهاي Assignment Operators(انتساب)

  17. دستورات شرطی if...else مثال 1: <script language="javascript" type="text/javascript">var d = new Date()var t = d.getHours()if ( t < 10 ){document.write ( "<b> Good morning </b>")}</script>

  18. مثال2: if ( t < 10 || t == 10 ) {document.write ( "<b> Good morning </b>" )}else{document.write ( "<b> Hello friends </b>")}

  19. دستور switch <script language="javascript" type="text/javascript">var d = new Date ()var weekday = d.getDay ()switch ( weekday ) {case 0 :          document.write ("Sunday")          breakcase 1:         document.write ("Monday")          breakcase 2:         document.write ("Tuesday")         breakcase 3:         document.write ("Wednesday")         breakcase 4:         document.write ("Thursday")          breakcase 5:         document.write ("Friday")         breakdefault:         document.write ("Saturday")}</script>

  20. از کلمه case بجاي if else استفاده مي کنيم.

  21. تکرار دستورات توسط حلقه هاjavascript loops حلقه for: در اين حلقه، مجموعه کد مورد نظر به تعداد مشخص تکرار مي شود که در ابتداي حلقه تعداد دفعات اجراي کد بايد اعلام شود. مثال: <script language="javascript" type="text/javascript">for ( i = 0; i <= 10; i++ ){document.write ( " Number " + i + "<br />")}</script>

  22. حلقه: while در مواردي هم که مقدار انتهايي حلقه مشخص نيست مي توانيم از اين نوع استفاده کنيم چون کد مورد نظر تا جايي که نتيجه دلخواه بدست بيايد تکرار خواهد شد. البته اين نوع حلقه را مي توانيم بجاي حلقه for هم بکار بريم يعني اگر مقدار نهايي متغير هم داشته باشيم اين حلقه کاربرد خواهد داشت: var i = 0while (i <= 10){document.write(" Number " + i + "<br />")i++}

  23. حلقه Do...while: var i=0do {document.write(" Number " + i + "<br />")i=i+1}while (i <= 10)

  24. دستورbreak: var i = 11while (i >= 10){document.write(" Number " + i + "<br />")i++if ( i == 21 ) break}

  25. آرايه هاArray شئ آرايه يا همان Array براي ذخيره کردن مقادير متفاوت در يک متغير بکار مي رود.

  26. تعریف آرایه 1) var weekdays = new Array(7)weekdays[0] = "Shanbeh"weekdays[1] = "Yekshanbeh"weekdays[2] = "Doshanbeh"weekdays[3] = "Seshanbeh"weekdays[4] = "Chaharshanbeh"weekdays[5] = "Panjshanbeh"weekdays[6] = "Jomeh" 2) var weekdays = new Array ("Shanbeh","Yekshanbeh",...)

  27. مثال: مي خواهيم هنگام باز شدن صفحه وب، روزهاي هفته به ترتيب نمايش داده شوند. بعد از اينکه مقادير را در آرايه تعريف کرديم سپس بهترين دستوري که به ما در اينجا کمک مي کند يک حلقه است تا دستور چاپ کردن در صفحه را تکرار کند تا به آخرين روز هفته برسيم: for ( i=0; i<7; i++ ) {document.write ( weekdays[ i ] + "<br />" )}

  28. خصوصيتي که بيشترين کاربرد را براي آرايه دارد، length مي باشد. وظيفه اين خصوصيت نمايش انديس کلي يک آرايه است. : document.write ( weekdays.length + "<br />" ) توضیح:بعد از وارد کردن اين کد و اجراي اسکريپت، عدد هفت در صفحه نوشته خواهد شد چون انديس ما در اينجا هفت بود.

  29. متدهاي آرايه concat(), join(), pop(), shift(), push(), unshift(), reverse(), slice(), sort(), splice(), toString(), valueOf()

  30. متد concat براي ترکيب مقادير دو يا سه آرايه بکار مي رود. اين متد هيچ چيزي را در آرايه ها تغيير نمي دهد و فقط مقادير تعريف شده را در صفحه چاپ مي کند. • متد joinتقريباً مانند متد قبلي عمل مي کند و کليه مقادير را بصورت يک رشته متني در صفحه نشان مي دهد با اين تفاوت که در اين متد مي توانيد يک علامت مانند نقطه، تعيين کنيد تا بين مقادير چاپ شده در صفحه قرار گيرد. بصورت پيش فرض اين علامت، کاما مي باشد.

  31. متد pop آخرين مقدار آرايه را جدا کرده و در صفحه نمايش مي دهد. • متد shift برعکس متد قبلي است يعني اين متد اولين مقدار آرايه را جدا مي کند و نشان مي دهد. • متد push يک يا چند مقدار را به آخر يک آرايه اضافه مي کند و انديس جديد برمي گرداند. • متد unshift يک يا چند مقدار به ابتداي يک آرايه اضافه مي کند و انديس جديد بر مي گرداند. • متد reverse ترتيب نمايش مقادير يک آرايه را برعکس کرده و در صفحه وب نمايش مي دهد.

  32. متد slice يکسري از مقادير موجود در يک آرايه را جدا مي کند. که در اين متد شماره انديس مقداري که مي خواهيد از آنجا جداسازي شروع شود را بايد بنويسيد و همچنين مي توانيد آخرين مقدار هم مشخص کنيد که اگر آنرا معين نکنيد تا آخرين مقدار انتخاب خواهد شد. • متد splice براي اضافه يا حذف يک مقدار در آرايه مي باشد . اولين پارامتر شماره انديس که در آنجا يک مقدار حذف يا اضافه خواهد شد و بايد عدد باشد. دومين پارامتر مقدار عددي است که معين مي کند چند تا مقدار از آن انديسي که در پارامتر قبل انتخاب کرديم، بايد حذف شود که اگر آنرا صفر در نظر بگيريد هيچ مقداري حذف نخواهد شد. اين دو پارامتر حتماً بايد نوشته شوند. در ضمن اگر مي خواهيد مقاديري هم اضافه شود بعد از اين پارامتر ها به عنوان پارامترهاي بعدي ذکر مي کنيد .

  33. متد toString مقادير يک آرايه را تبديل به يک رشته متني مي کند. • متد sort براي منظم کردن مقادير يک آرايه به ترتيب حروف الفباي انگليسي است. اگر هم مقادير يک آرايه، عدد باشند به ترتيب اعداد تنظيم خواهند شد.

  34. توابعFunctions • پس يک تابع، مجموعه کدي است که مي توان آنرا در جاهاي مختلف اسکريپت استفاده کرد بدون آنکه نياز به نوشتن مجدد آن کدها باشد. function message ( ){alert ( " Hello friends! " )} اين تابع و اجراي کد، يک پنجره باز مي کند و عبارت متني داخل پرانتز را نمايش مي دهد.

  35. يک تابع را در هر کجاي يک سند html مي توانيد بکار بريد. • مي توانيد يک تابع را در فايل خارجي جاوااسکريپت که با پسوند js ذخيره مي شود وارد کنيد تا در صفحات مختلف آنرا بکار بريد.

  36. فراخواني يک تابع هر کجا که نياز به دستورات آن تابع داشتيد، نامش را بنويسيد. <html><head><title> Call function </title><script type="text/javascript" type="text/javascript">function message ( ){alert ( " Hello friends! " )}</script></head><body><form><input type="button" onclick="message( )" value="Click me"></form></body></html>

  37. آرگومان يک تابع • گاهي اوقات هنگام تعريف يک تابع، آرگومان و يا پارامتري را براي آن داخل پرانتز تعيين مي کنيد تا هنگام صدا زدن تابع، آن آرگومان مقداردهي شود. در کل مي توان گفت که يک آرگومان، متغيري است که هنگام صدا زدن تابع مقدار آن ارسال مي شود تا تابع از آن استفاده کند. مي توانيم مثال بالا را با يک آرگومان تعريف کنيم: function message ( msg ){alert ( msg )}</script><input type="button" onclick="message( 'Hello friends!' )" value="Click me">

  38. بازگرداندن یک مقدار توسط دستور return توابع جاوااسکريپت داراي يک دستوري بنام return هستند که وظيفه اين دستور برگرداندن مقادير تعريف شده در آن تابع است. function greeting ( ) {return ( " Hello world! " )}.......document.write ( greeting( ) )

  39. مثال: <html><head><title> return statement </title><script type="text/javascript" type="text/javascript">function total (a,b ){x = a * breturn x}</script></head><body><script type="text/javascript" type="text/javascript">price = total ( 4, 15 )document.write ( price )</script></body></html>

  40. نکته: دقت کنيد که در دستورات جاوااسکريپت، بين دو علامت " " بايد از ' ' استفاده شود چون اگر مجدداً از خود علامت نقل قول يعني " " استفاده کنيد با پيغام خطا مواجه مي شويد.

  41. پنجره Alert پنجره alert ، حاوي يک اخطاريه براي کاربر است که در آن هشداري داده مي شود تا کاربر متوجه کاري که مي کند باشد. دستور اين پنجره به صورت زير است: alert (" text ") اين پنجره فقط داراي يک دکمه OK است که کاربر بعد از خواندن آن اخطاريه با زدن دکمه ok ، پنجره را مي بندد.

  42. مثال: • <html><head><script type="text/javascript" type="text/javascript">function alertbox ( ) {alert ( " This is an Alert box! " )}</script></head><body><form><input type="button" onclick="alertbox ( )" value="Click here"></form></body></html>

  43. پنجره Confirm • اين مدل پنجره ، همانطور که از اسمش پيداست براي گرفتن تأييد از کاربر اجرا مي شود. اين پنجره داراي دو دکمه OK و Cancel مي باشد که با زدن دکمه OK توسط کاربر مقدار true بازگردانده مي شود و با زدن Cancel مقدار false برگردانده مي شود. دستور اين پنجره به اين صورت است: confirm ( " text " )

  44. مثال: • <html><head><script type="text/javascript" type="javascript">function confirmbox ( ){var button = confirm (" press a button.")if (button == true){document.write (" You pressed OK button. ")}else{document.write (" You pressed Cancel button.")}}</script></head><body onload="confirmbox()"></body></html>

  45. پنجره prompt • از اين پنجره زماني استفاده مي شود که شما نياز داشته باشيد تا اطلاعاتي را از کاربر دريافت کنيد و آنرا در جايي مناسب بازگردانيد. معمولاً اجراي اين پنجره هنگام باز شدن صفحه وب است و داراي دو قسمت يا دو پارامتر مي باشد: prompt ( "text or question", " default value " )

  46. مثال: <html><head><script type="text/javascript">function promptbox ( ){var name=prompt("Please enter your name", "name...")if (name!=null && name!=""){document.write("Hello " + name + " and welcome to this page.")}}</script></head><body onload="promptbox()"> </body></html>

  47. رویدادها • اين اقدامات شامل حرکاتي است مانند کليک کردن دکمه هاي موس، قرار گرفتن نشانگر موس بر روي يک نقطه از صفحه، فشردن کليدهاي کيبورد، انتخاب يا تغيير در اجزاي يک فرم، فشردن دکمه هاي فرم و يا باز و بستن يک صفحه وب.

  48. رويدادهاي موس • زمانيکه مي خواهيد جاوااسکريپت نسبت به حرکات موس، عکس العمل نشان دهد از اين رويدادها استفاده مي کنيد. onClick  براي کليک کردن دکمه چپ موس توسط کاربر. onDblClick رويداد براي دوبار کليک دکمه چپ موس. onMouseDown فشار آوردن بر روي دکمه چپ موس. onMouseUp رها کردن دکمه موس پس از فشردن آن. onMouseOver قرار گرفتن نشانگر موس بر روي يک چيزي. onMouseOut خارج شدن موس از روي يک چيزي.

  49. رويدادهاي کيبورد • در اين رويدادها، جاوااسکريپت نسبت به فشردن يک کليد بر روي کيبورد توسط کاربر، عکس العمل نشان خواهد داد. • onKeyPress فشردن يک کليد کيبورد. • onKeyDown مانند رويداد بالا براي فشردن يک کليد. • onKeyUp رها کردن يک کليد فشرده شده.

  50. رويدادهاي فرم اين رويدادها مربوط به عملياتي است که کاربر بر روي اجزاي فرم انجام مي دهد. البته ممکن است بعضي از اين رويدادها بر روي متنهاي عادي در صفحه هم عکس العمل نشان دهند اما بيشترين کاربرد را در فرمها دارند. • onFocus هنگاميکه توسط موس و يا دکمه Tab کيبورد بر روي يکي از اجزاي فرم متمرکز شويد. • onBlur هنگاميکه تمرکز از روي يکي از اجزاي فرم خارج شود. • onSelect انتخاب کردن يک متن در صفحه يا در يک فرم. • onChange تغيير در اجزاي فرم، مانند تغيير متن در کادر متني. • onSubmit فشردن دکمه تأييد يک فرم. • onReset فشردن دکمه reset يا همان پاک کردن اطلاعات فرم.  

More Related