آموزش Javascript (مقدماتی)

webramz · **آموزش Javascript (مقدماتی) -** 08-09-2006, 12:02 AM

خوب در این قسمت قصد دارم براتون کدهای Javascript را آموزش بدم. من سعی دارم از ابتدایی ترین کدها شروع کنم تا به قسمتهای پیشرفته برسیم . امیدوارم براتون مفهوم باشه. اما شما حتما باید با HTML آشنایی کافی داشته باشید و یا قسمت آموزش HTML در این فروم را مطالعه بفرمایید.

خوب اجازه بدین در ابتدا کمی در مورد تاریخچه این زبان صحبت کنیم:
در اولین روزهای تاسیس مجمع جهانی وب یا همان World Wide Web ، دستورات HTML بسیار ساده و آسان بود، بطوریکه فراگیری فرامین مورد نیاز بیشتر از چند روز طول نمی کشید ولی هنگامیکه Web شروع به پیشرفت کرد، طراحان خواستار کنترل بیشتری شده و در نتییجه مجموعه دستورات مورد نیاز تهیه گردید.

همچنین از آنجاییکه صفحات وب ، بهتر است بصورت دینامیک باشد، طراحان نیز خواستار ارتباط بین بینندگان سایت و صاحبان آن شدند، در نتیجه استفاده از دستورات HTML به تنهایی نیاز آنها را برطرف نکرد و سپس شرکت Netscape برای ایجاد و کنترل ارتباط بین صاحبان سایت و بینندگان آن در صفحات وب از JAVASCRIPT کمک گرفت.

بهترین سایت برای آشنایی با این زبان http://www.javascriptworld.com می باشد.
اغلب موارد از Javascript بعنوان یک زبان اسکریپت نویسی یاد می شود، که به مراتب ساده تر از یک برنامه است. اما در حقیقت تفاوتی بین اسکریپت و برنامه در این حالت وجود ندارد.
اسکریپت مربوط به Javascript برنامه ای می باشد که درون صفحه Html قرار گرفته و به خاطر قرار گرفتن آن درون تگ <script> متن داخل آن در صفحه کاربر نمایش داده نشده و browser فقط آنرا اجرا میکند. در اغلب موارد تگ <script> در قسمت HEAD صفحه HTML نوشته می شود .
بوسیله این زبان می توان قابلیتهای بیشماری از قبیل ایجاد ارتباط بین کاربر و سایت به صفحه وب اضافه نمود . مثلا سایتهایی را مشاهده نموده اید که با قرار گرفتن نشانگر موس برروی دکمه های موجود در صفحه، دکمه موردنظر بصورتی متفاوت مثلا برجسته نمایش داده می شوند ، این عمل توسط Javascript انجام شده و به این تکنیک rollover گفته می شود.

بوسیله این زبان می توان حالتی ایجاد نمود تا اطلاعات وارد شده توسط کاربر درون فرمها بطور صحیح باشند . می توان محاسبات لازم و مورد نیاز عددی را بدین وسیله در دستگاه کاربر و بدون نیاز به هیچ گونه فرایندی در Serverها انجام داد.

شاید ندانید تفاوت بین برنامه های server-side و client-side بدین گونه است که در برنامه های server-side برنامه توسط CGI در خود serverها اجرا می شوند و در برنامه های client-side برنامه در دستگاه کاربر اجرا خواهد شد.
بخاطر وجود قابلیتهای ویژه که در این نوع برنامه نویسی وجود دارد می توان ساعت ، تقویم و هر برنامه زمانی دیگر نیز تهیه کرد.
بوسیله این برنامه می توان بر بروسرها کنترل انجام داد و پنجره های جدید باز نمود و هزاران قابلیت دیگر ...

webramz · **آموزش Javascript جلسه دوم ... -** 08-09-2006, 09:11 AM

خوب در اینجا با یک مثال ساده نحوه عملکرد اسکریپت را بیان می کنیم :
توسط اسکریپت زیر در پنجره کاربر عبارت Hello world نشان داده می شود:

کد:

<html>
<head>
<title>my first script in javascript</title>
</head>
<body>
<h1>
<script language="javascript" type="text/javascript">
document.write("Hello,world")
</script>
</h1>
</body>
</html>

برای اینکه بیشتر با این زبان آشنا بشیم باید کمی بیشتر در مورد خصوصیت آن بحث کنیم. حالا میگم که منظور چیست؟
زبان Javascript یک زبان شی گرا است.در این قسمت و قسمت بعدی مفصلا منظور از شی گرایی را براتون توضیح میدم .
سه چیز هست که در شی گرایی باید مورد توجه قرار گیرد.

اشیا (Objects)

در دنیای حقیقی اشیا مانند کامپیوتر، دوچرخه و ... می باشند. اما در زبان Javascript اشیا درون browserها بوده و عبارتند از پنجره ها و فرم ها همچنین اجزای آن مانند دکمه ها و checkboxها.
بخاطر وجود تعداد بیشماری از اشیا آنها را نامگذاری می کنند. اگر مثلا به سگ های خود نام سگ1 و سگ2 بدهید در صدا کردن آنها بعلت وجود قسمتی مشابه در نامشان دچار مشکل می شوید.
پس بنابراین بهتر است که به هر شی در دنیای واقعی و در برنامه نویسی Javascript نامی متفاوت و مخصوص بدهید.

خصوصیات (Properties)
متدها (Methods)

اجازه بدین این دو قسمت را در جلسه بعد براتون توضیح بدم و بعد بریم سراغ شرح اسکریپت بالا

پیروز و پاینده باشید

webramz · 04:46 PM

در قسمت قبل با يک مثال مبحث اسکريپت نويسي را شروع کرديم در دنباله براتون به شرح خصوصيات و متدها در روش برنامه نويسي شي گرا مي پردازم:

خصوصيات (Properties)
اشيا خود داراي مشخصه هايي مي باشند مثلا گربه داراي پوست مي باشد، کامپيوتر کيبورد داشته و دوچرخه داراي چرخ است! در دنياي Javascript پنجره داراي تيتر و فرم ها داراي checkbox مي باشند.
تغيير مشخصه يک شي مي تواند آنرا تغيير بدهد، بطوريکه مي توان همان مشخصه را در اشياي کاملا متفاوتي بکار برد.
در ضمن هر شي ميتواند شامل زيرمجموعه اي از اشيا ديگر باشد.

متدها (Methods)
کاري که اشيا مي توانند انجام دهند، Methods ناميده مي شود، مثلا خرخر گربه، خرابي کامپيوتر، چرخش دوچرخه را مي توان عنوان نمود .
اشيا زبان Javascript نيز داراي متدهايي ميباشند مثلا عمل کليک بروي دکمه ها ، بازکردن پنجره، و انتخاب متن مورد نظر ...
براي راحت شدن درک اين مطلب، Object و Properties را بعنوان اسم و Methods را بعنوان فعل فرض کنيد بطوريکه Method عملياتي بوده که آنها انجام ميدهند و يا برروي آنها اعمال مي شود.

خوب حالا براي درک بهتر مفهوم شي و فرايند برنامه تمامي موارد فوق را در يکجا قرار ميدهيم . در Javascript اين مفاهيم با نقطه از يکديگر جدا مي شوند که به آن dot syntax اطلاق مي گردد.
در اينجا چند نمونه از اشيا و مشخصه هاي آنها را مشاهده مي کنيد:

bicycle.wheels
cat.paws.front.left
computer.disk.floppy
document.images.name
windows.status

در اينجا نيز چند مثال از اشيا و متدهاي آنها نوشته شده است:

cat.purr()
document.write()
forms.elements.radio.click()

webramz · **آموزش Javascript جلسه چهارم ... -** 08-11-2006, 07:28 PM

خوب در اين جلسه قصد دارم کنترل وقايع يا events را در Javascript براتون شرح بدم...
بعنوان مثال پذيرش يا submitting يک فرم و تغيير مکان نشانگر موس برروي يک تصوير ، کليک برروي يک دکمه در فرم نمونه هايي از حالات و وقايع اتفاق افتاده مي باشند.
توسط دستوراتي بنام event handlers وقايع در Javascript کنترل مي شوند. متداولترين کنترل کننده ها ي وقايع رادر زير براتون آورده ام:

onAbort کاربر به اشيا کاري ندارد
onBlur کاربر شي را تغيير مي دهد
onError اسکريپت با اشتباه مواجه مي شود
oncHange کاربر برروي يک شي کليک مي کند
onFocuse کاربر يک شي را فعال ميکند
onLoad بارگزاري شي اتمام مي يابد
onMouseover نشانگر موس برروي شي مي رود
onMouseout نشانگر موس از روي شي کنار مي رود
onSubmit کاربر يک فرم را پذيرش مي کند
onUnload کاربر به پنجره کاري ندارد
onSelect کاربر محتويات شي را انتخاب مي کند
onClick کاربر يک دکمه را کليک مي کند

بعنوان مثال ، فرض کنيد که اگر کاربر برروي دکمه کليک نمايد، کنترل کننده حالت onClick متوجه آن شده و وظيفه تخصيص يافته خود را انجام ميدهد.
در هنگام نوشتن اسکریپت هیچگاه پیش بینی هر عملی که کاربر ممکن است انجام بدهد مهم نبوده و تنها اعمالی که برنامه نویس می خواهد اتفاق بیافتد، بایستی پیش بینی گردند. بعنوان مثال صفحه طراحی شده بدون نیاز به کنترل کننده onLoad اجرا می شود اما برای فعال شدن یک اسکریپت ، همزمان با بازشدن صفحه از دستورonLoad استفاده می شود.
نگران نباشید مطالب ممکن است ابتدا پیچیده به نظر برسد، مخصوصا اگر مبتدی باشید اما به مرور برنامه آموزش شما کامل می شود و ابهامات از بین می رود.

webramz · **آموزش Javascript جلسه پنجم ... -** 08-13-2006, 01:29 PM

اکنون آماده فراگيري Javascript ميباشيد. در اين جلسه مکان قرار گرفتن اين برنامه در HTML و طريقه نوشتن Javascript را فرا مي گيريد. اما همانطور که قبلا هم اشاره شد شما مي بايست HTML را بخوبي ياد داشته باشيد.
اگر با HTML آشنايي نداريد مي توانيد بخش آموزش HTML که در همين انجمن آموزش داده شده مطالعه بفرماييد.

محل قرار گرفتن اسکريپتها

اسکريپت ها را مي توان در دو جا درون صفحه HTML قرار داد: يا در داخل تگهاي head که به آن اسکريپت header مي گويند. و يا در داخل تگهاي body
که به آن اسکريپت body مي گويند.
حال نمونه اي از اسکريپت body را براتون مي آورم:
اسکريپت را هميشه بايستي درون تگهاي Script قرار داد.

کد:

<html>
<head>
<title> my first script</title>
</head>
<body bgcolor="blue">
<h1>
<script language="javascript" type="text/javascript">
document.write("Hello,world!")
</script>
</h1>
</body>
</html>

براي نوشتن اسکريپت از تگ HTML بنام SCRIPT استفاده کنيد.

براي نوشتن اولين اسکريپت

1- عبارت
<script language="javascript" type="text/javascript"> را تايپ کنيد. بدين طريق تگ ابتدايي دستور <SCRIPT> وجود اين برنامه را به بروسر معين مي کند.
ويژگي language="javascript" نوع زبان اسکريپت نويسي را تعيين کرده و بوسيله ويژگي : type="text/javascript اسکريپت را بعنوان متن ساده تحت Javascript معرفي مي کند.

2- سپس عبارت document.write("Hello, world!") را تايپ کنيد. بدين طريق يک پنجره جديد باز شده و در آن عبارت ("Hello,world!") تايپ مي شود.

3- تگ پاياني </script> را تايپ کنيد.

بعد از اين browser بقيه سند HTML را اجرا مي کند زيرا متوجه پايان يافتن اسکريپت شده است.
توجه داشته باشيد مي توان در يک صفحه به هر تعداد از تگ اسکريپت استفاده کرد.

webramz · **آموزش Javascript جلسه ششم ... -** 08-13-2006, 02:01 PM

پنهان کردن اسکریپت ها از browserهای قدیمی

browserهای قدیمی از جمله Netscape و Internet Explorer و American Online 1 قبل از ویرایش چهارم، Javascript را متوجه نمی شوند. از آنجا که اساس browser بر این مبنا است که در صورتی که متوجه تگی نشوند، از آن بگذرند. اما همه آنها اینگونه عمل نمی کنند. یک راه برای پنهان کردن آنها وجود دارد که بوسیله آن تمامی محتویات موجود در تگ مورد نظر بعنوان تگ HTML در نظر گرفته می شوند و در نتیجه اجرا نخواهند شد.

اسکریپت زیر نحوه محافظت در برابر browserهای قدیمی را نشان می دهد.

کد:

<HTML>
<HEAD>
<TITLE> My first script </TITLE>
</HEAD>
<BODY BGCOLOR="blue">
<h1>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--Hide script from old browsers
document.write("Hello, world!")
//End hiding script from old browsers -->
</SCRIPT>
</H1>
</BODY>
</HTML>

خوب حالا شرح میدهم : به منظور پنهان کردن اسکریپتها از browserهای قدیمی:

1- ابتدا عبارت  را تایپ کنید . این خط با علامت مخصوص (//) شروع و با علامت مخصوص HTML --> پایان می پذیرد.

خوب می توانید عبارتی را برای کاربرانی که از broeserهای قدیمی استفاده می کنند ، نمایش دهید ، در این صورت آنرا در تگ <NOSCRIPT> قرار دهید. این پیغام هم در browserهای قدیمی و در browserهای جدیدی که Javascript در آنها فعال نیست ، نشان داده می شود.

webramz · **آموزش Javascript جلسه هفتم ... -** 08-13-2006, 02:46 PM

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

کد:

<HTML>
<HEAD>
<TITLE> My first script </TITLE>
</HEAD>
<BODY BGCOLOR="blue">
<h1>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> 
<!--Hide script from old browsers 

/*This is an example of a long JavaScript comment.


Note the characters at the begining and
ending of the comment.

This script adds the word "Hello,worlds!" into 


the body area of the HTML page

*/
 
document.write("Hello, world!")
//End hiding script from old browsers -->
</SCRIPT>
</H1>
</BODY>
</HTML>

برای نوشتن توضیحات اسکریپت :

1- ابتدا عبارت زیر را بنویسید:
/*This is an example of a long JavaScript comment.
Note the characters at the begining and
ending of the comment.
This script adds the word "Hello,worlds!" into
the body area of the HTML page
*/
توجه داشته باشید که با علامت */Javascript دیگر به تمامی محتویات داخل آن توجهی از لحاظ دستوری نمی کند.

2- سپس برای پایان توضیحات علامت /* را تایپ کنید.

3-سپس دستورات اصلی که در اینجا document.write("Hello, world!") است را تایپ کنید.

امیدوارم مثالها گویا باشه برای عزیزان - جاوااسکریپت خوبی داشته باشید...

webramz · **آموزش Javascript جلسه هشتم ... -** 08-14-2006, 10:41 AM

اخطار به کاربر

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

برای اخطار به کاربر :
عبارت alert("welcome to my javascript page!") را تایپ کنید. همانطور که در زیر مشاهده میکنید، بایستی تنها متنی که می خواهید نشان داده شود را در داخل alert() بگذارید.

کد:

<HTML>
<HEAD>
<TITLE> My first script </TITLE> 
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> 
<!--Hide script from old browsers
alert("Welcome to my Javascript page!")
//End hiding script from old browsers --> 
</SCRIPT> 
</HEAD> 
<BODY BGCOLOR="blue">
      <NOSCRIPT>
            <H2>This page requires Javascript.</H2>
      </NOSCRIPT>
</BODY>
</HTML>

webramz · **آموزش Javascript جلسه نهم ... -** 08-14-2006, 11:15 AM

نكاتي در مورد حالات شرطي:

حالات شرطي به 3 قسمت تقسيم مي شوند: بخش if كه آزمايش در آن انجام مي شود، قسمت then كه در آن دستوري است كه در حالت صحيح بودن قسمت اول بايستي اجرا گردد، قسمت Else كه در آن
دستوري كه در حالت نادرست بودن قسمت if، بايستي اجرا شود، قرار مي گيرد. در ضمن محتويات تست if بايستي درو ن پرانتز و محتويات دو قسمت ديگر درون براكت ها قرار بگيرند.
خوب حالا ميريم سراغ اسكريپت :
در اسكريپت زير بر اساس عكس العمل كاربر به سئوال ،‌پيغام مربوطه اعلام مي شود:

کد:

<html>
<head>
    <title> My Javascript page</title>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--Hide script from old browsers
   if (confirm("Are you sure you want to do that?")) {
                 alert("You said yes")
         }
     else {
                    alert("You said no")

}

//End hiding script from old browsers-->
</SCRIPT>
</Head>
<body bgcolor="blue">
<NOSCRIPT>
   <h2>This page requires Javascript.</h2>
</NOSCRIPT>
</BODY>
</HTML>

webramz · **آموزش Javascript جلسه دهم ... -** 08-15-2006, 12:18 PM

خوب در ارتباط با قسمت قبل توضیحات زیر را آورده ایم :

همانطور که در اسکریپت بالا ملاحظه نمودید، برای تایید انتخاب

1- عبارت if(confirm(Are you sure you want to do that?"))را تایپ کنید. دستورالعمل confirm() فقط یک پارامتر را قبول کرده و دو حالت true و false را بر اساس پاسخ کاربر اعلام می کند.

2- اکنون دستور alert("tou said yes") را تایپ کنید. وقتی کاربر بر روی دکمه ok کلیک می کند ، دستور confirm() مفهوم true را برگردانده و سپس پیغامی مثلا با عبارت You said yes به کاربر میدهد. این قسمت مربوط به بخش then می باشد. ذکر این نکته ضروریست که اگر چه قسمتی بنام then در Javascript وجود ندارند ولی اصولا براکت ها دارای چنین مفهومی می باشند.

3-{ را تایپ کنید. بدین وسیله دستورconfirm()بسته می شود.

4-else{ تایپ شود. در این قسمت در صورتیکه حالت اول اجرا نشود، برنامه مورد نظر نوشته می شود.

5-alert("you said no") را تایپ کنید. این براکت کل دستور if/else را به پایان می رساند.

نکات مورد توجه :

می توانید هر تعداد جمله در براکتهای موجود در قسمت های then و else بنویسید.
توجه داشته باشید که نحوه نوشتن دستور شرطی حتما نیازی به وجود براکتهای نهایی در اول خط یا تورفتگی های متن دستورها در جمله و یا حالتی که در این شکل نوشته می شود نمی باشد.
در واقع هر فرمتی که برای طراح و برنامه نویس راحتتر است، بهترین خواهد بود.
راه دیگری برای نوشتن حالت شرطی وجود دارد که در زیر نوشته شده است:
(confirm) ? truepart : falspart
که در اصل شبیه به فرمول اولیه است.

کد:

if(condition) {
truepart
}else{
falspart
}