ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

معرفی جاوا اسکریپت JavaScript مطلب ویژه

توسط 20 آبان, 1394 5019 0

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

چگونه و کجا از کد های جاوا اسکریپت استفاده کنم؟ کد های جاوا اسکریپت میتواند در بدنه سایت <body> و در بخش  <head> نوشته یا بصورت یک فایل جداگانه با پسوند .js فراخوانی شوند.
البته با توجه به مکان استفاده از کد ،  گاها میتوان کد های جاوا اسکریپت را در انتهای صفحه قبل از تگ </body> نوشت.


آشنایی با تگ <script>
در صفحات HTML باید کدها جاوا اسکریپت بین دو تگ  <script> و  </script>نوشته شوند:

 

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

 


نکته: در ورژن های قدیمی باید نوع زبان اسکریپت را به صورت <script type="text/javascript"> بوسیله type مشخص می کردیم اما دیگر نیازی به این کار نیست چون جاوا اسکریپت به عنوان زبان اسکریپت نویسی پیش فرض در html انتخاب شده است.


Functions (عملکردها) و Events (رویداد) در جاوا اسکریپت:
Function:بلوکی از دستورات جاوا اسکریپت می باشد که در هنگام فراخوانی اجرا میشوند.به طور مثال زمانی که کاربر یک رویداد (Event) ، مانند کلیک کردن روی یک دکمه را انجام می دهد دستورات موجود در بلوک function اجرا می شوند.در درس های آینده به طور کامل در مورد عملکردها و رویداد ها صحبت خواهیم کرد.


استفاده از جاوا اسکریپت در <head> یا <body>:
شما هر تعداد اسکریپتی که نیاز دارید رو میتونید توی صفحه html استفاده کنید.
کدهای اسکریپتی می توانند در قسمت <head> یا <body> یا در هردوی آنها استفاده گردند.
البته پیشنهاد می شود تا کدها اسکریپتی را در یکجای ثابت و معین استفاده کنید تا از پراکندگی و سردرگمی جلو گیری بشه.


استفاده از جاوا اسکریپت در قسمت <head>:
در مثال زیر کد جاوا اسکریپت در قسمت هد استفاده شده است.در این مثال کدهای مجود در function پس از کلیک بر روی دکمه اجرا میشوند و باعث تغییر متن تگ <p> که آی دیشdemo  هست میشه.

 

<html>
<head>
//آغاز کد جاوا اسکریپت در قسمت head
<script>
//ایجاد یک function با نام دلخواه
function myFunction() {
//قرار دادن مقدار دلخواه در المنت مورد نظر با آی دی demo
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
//ایجاد یک المنت با آی دی دلخواه که در مثال ما demo  می باشد
<p  id="demo">A Paragraph</p>
// ایجاد یک دکمه که در رویداد کلیک (onclick) آن فانکشن یا همون عمکردمون که اسمش myFuncyion هست اجرا میشه.
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

 

استفاده از جاوا اسکریپت در <body>:
در این مثال کد جاوا اسکریپت در بدنه سایت ایجاد شده و عملکرد این برنامه مشابه برنامه فوق می باشد.

 

<html>
<body>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
//شروع جاوا اسکریپت در بدنه سایت
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>

 

 

نکته: استفاده از کدهای جاوا اسکریپت در قسمت پایین بدنه قبل از تگ </body> باعث افزاش  سرعت  بالا آمدن سایت می شود.

اسفاده از جاوا اسکریپت بصورت فایل جداگانه:
اسکریپت ها را میتوان بصورت فایل های جداگانه نیز استفاده کرد.
استفاده از کدهای اسکریپت بصورت فایل های جداگانه زمانی کاربرد دارد که بخواهیم به دفعات از آنها در صفحات مختلف سایتمان استفاده کنیم.
فایل های جداگانه جاوا اسکریپت با پسوند .js می باشند.
برای استفاده از فایل های جداگانه جاوا اسکریپت مسیر فایل به همراه نام فایل به همراه پسوند فایل را در خصیصه src تگ <script>  می نویسیم.
در صورتی که فایل در مسیر جاری صفحه سایتمون قرار داره فقط نام فایل با پسوند فایلمون رو مینویسیم.


مثال:

 

<html>
<body>
<script src="/myScript.js"></script>
</body>
</html>

 
همان طور که مشاهده کردید در صورت استفاده از فایل خارجی دیگر از نوشتن کد بین دو تگ <script> خود داری میکنیم.
از فایل خارجی هم میتوان در body و هم در قسمت head استفاده کرد.

مزایای استفاده از جاوا اسکریپت بصورت فایل جداگانه:
جدا سازی HTML از کدهای اسکریپت.
راحتی در خواندن و ویرایش کدهای javascript و HTML
بالا رفتن سرعت لود(بالا آمدن صفحه برای اولین بار).


 نمایش خروجی جاوا اسکریپت
به طور کلی 4 روش برای نمایش نتیجه اجرای کدهای جاوا اسکریپتتون وجود داره:
1-نمایش در یک alert box (جعبه هشدار) با استفاده از window.alert().
2-نمایش در خود صفحه HTML با استفاده از document.write().
3-نمایش در یک المنت HTML مانند <p> با استفاده از innerHTML.
4-نمایش در کنسول های عیب یابی مرورگر با استفاده از console.log().

در ادامه با استفاده از مثال به آموزش نحوه استفاده از روش های بالا می پردازیم.

نمایش خروجی با استفاده از window.alert():
شما می توانید با استفاده از alert box نتیجه اجرای کد جاوا اسکریپت را مشاهده کنید.
در مثال زیر با استفاده از جاوا اسکریپت نتیجه جمع دو عدد در یک aler box  نمایش داده میشود:

<html>
<body>
<p>My first paragraph.</p>
<script>
//شروع کد جاوا اسکریپت و جمع دو عدد 5 و 6 و نمایش در یک alert box
window.alert(5 + 6);
</script>
</body>
</html>

 


در مثال فوق بمحض لود شدن صفحه قطعه کد جاوا اسکریپت اجرا میشود و نتیجه به شکل زیر در یک alert box نمایش داده می شود:
نکته:محل نمایش alert box با توجه به مرورگر شما متفاوت می باشد.مثلا در گوگل کروم در بالای صفحه و در فایرفاکس در وسط صفحه می باشد.

مقدمه جاوا اسکریپت JavaScript 1

نمایش خروجی با استفاده از document.write():
از این روش بدلیل راحت بودن  بیشتر برای تست کدهای اسکریپت استفاده میشه:
مثال زیر مشابه مثال فوق عمل میکنه با این تفاوت که نتیجه رو بر روی صفحه چاپ میکنه:

<html>
<body>
<h1>My First Web Page</h1>
<script>
document.write(5 + 6);
</script>
</body>
</html>

 
نتیجه جمع دو عدد 5 و 6 در محلی که کد جاوا اسکریپت نوشته شده نمایش داده میشود در این مثال نتیجه به محض لود شدن صفحه و بعد از تگ <h1>نمایش داده میشه:

مقدمه جاوا اسکریپت JavaScript 2


 
در صورتی که از document.write() بعد از لود شدن صفحه استفاده استفاده کینم(مثلا با استفاده از یک دکمه) ، پس اجرای کد تمام محتوای صفحه پاک (حذف) می شود:

<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>

 

پس از اجرای قطعه کد فوق تگ های h1 و p حذف میشود و تنها نتیجه جمع دو عدد 5 و 6 یعنی 11 روی صفحه نمایش داده می شود.

مقدمه جاوا اسکریپت JavaScript 3

نمایش خروجی با استفاده از innerHTML:
برای دسترسی به یک المنت خاص در HTML میتوان از متد document.getElementById(id) در جاوا اسکریپت استفاده کرد.
در این متد خصیصه id که داخل پرانتز قرار دارد باید برابر با id المنت مورد نظرمون که میخوایم روش تغییرمون رو اعمال کنیم باشه.
خصیصه innerHtml محتوای صفحه جاریمون رو انتخاب میکنه.
در اکثر موراد برای نمایش خروجی بهتره که از innerHTML استفاده کیند.
در مثال زیر محتوای المنت p  که دارای id با مقدار demo می باشد پس از لود شدن صفحه به  عدد 11 تغییر میکند.

 


نمایش خروجی با استفاده از  console.log():
یکی از روش های نمایش خروجی در مرورگر استفاده از این متد می باشد.برای دسترسی به کنسول مرورگر خودتون میتونید با از دکمه F12 روی کیبردتون استفاده کنید.
این روش بیشتر برای عیب یابی و برای توسعه دهندگان وب کاربرد داره.

 

<html>
<body>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

 
در مثال زیر بعد از لود شدن صفحه پس از فشردن F12 و انتخاب سربرگ console نتیجه اجرای کد رو میتونید مشاهده کنید:

مقدمه جاوا اسکریپت JavaScript 4

آموزش جاوا اسکریپت همچنان ادامه دارد...

این مورد را ارزیابی کنید
(2 رای‌ها)
آخرین ویرایش در چهارشنبه, 20 آبان 1394 ساعت 13:55
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا