بنر بالای مطالب

banner

معرفی جاوا اسکریپت JavaScript

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

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

چگونه و کجا از کد های جاوا اسکریپت استفاده کنم؟ کد های جاوا اسکریپت میتواند در بدنه سایت <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

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

آخرین بروز رسانیچهارشنبه, 20 آبان 1394 13:55

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #3 کوتاه کننده لینک 1396-09-19 16:26
سلام ممنونم از وب سایت عالیتون
موفق باشید
نقل قول کردن
0 #2 مهدی باقری 1394-09-29 15:56
به نقل از alireza:
من یک سوال راحع به یک کد ای جکس دارم ممنون مبشم عکس کد و لخش موردنظر رو تز لینک زیر ببینید و نتیجش رو برام در صورت امکان میل کنیم واقعا به کمکتون نیاز دارم.باتشکر فراوووون واقعا به جواب این سوالم احتیج دارم مخصوصا بخش توضیح 3خط کدی ک مشخص کردم.خواهشا کمکم کنید تشکر
uupload.ir/.../...


با سلام خدمت شما دوست عزیز
در جاوا اسکریپت برای کدهایی که احتمال وقوع خطا دارن (به هر دلیلی) از ساختار try -catch استفاده می شود و کدهایی که قراره اجرا بشن در بخش try نوشته میشه و در صورت بروز خطا دستورات بخش catch اجرا میشن.مثلا در کد شما در بخش try یک کلاس جدید
ایجاد شده و در بخش cach چیزی نوشته نشده! که اگه مجموعه کدهای شما به درستی اجرا بشن نتیجه نمایش داده میشه ولی اگه این اتفاق نیوفته چیزی نمایش داده نمیشه.
function chekuser:یک فانکشن با نام check user که قراره پس از فشردن دکنه توسط کاربر بصورت ajax مقدار موجود در اینپوت user رو به صفحه index2.php به وسیلخ متد get ارسال کنه و در صورتی که همه چیز درست باشه و فانکشن statechange فراخوانی میشه(کادر قرمز سوم).
میتونید بخش try , cach رو حذف کنید ولی باید عبارت موجود در ترای رو در بجای اول فانکشن checkuser جایگذاری کنید.
میشه ترکیب کرد ولی کدتون کوتاه تر نمیشه:میتونید در سومین کادر قرمز بجای راخوانی تابع مستقیما خود تابع رو بنویسید.
موفق باشید
نقل قول کردن
0 #1 alireza 1394-09-29 02:56
من یک سوال راحع به یک کد ای جکس دارم ممنون مبشم عکس کد و لخش موردنظر رو تز لینک زیر ببینید و نتیجش رو برام در صورت امکان میل کنیم واقعا به کمکتون نیاز دارم.باتشکر فراوووون واقعا به جواب این سوالم احتیج دارم مخصوصا بخش توضیح 3خط کدی ک مشخص کردم.خواهشا کمکم کنید تشکر
uupload.ir/.../...

نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا