آموزش و دوره های رایگان برنامه نویسی( طراحی وب و اندروید) سایتاپ سئو

در سایتاپ با آموزش های اندروید،asp.et MVC و همچنین SEO و بهینه سازی وب با همراه باشید.همچنین با اخبار روز در زمینه های امنیت و هک و اخبار روز تکنولوژی را در سایت ما میتوانید بخوانید.


آموزش زبان جاوا اسکریپت برای مبتدیان

سایتاپ سئو

با نام و یاد خدا

دوره آموزش زبان Java Script با سایت اپ سئو

در این دوره به آموزش زبان  Java Script (جاوا اسکریپت)  میپردازیم.برای آموزش این زبان بهترین مرجع سایت w3Schools است که همه ی شما حداقل یکبار هم که شده اسمش را شنیده اید.خوب این سایت به زبان انگلیسی است و ممکن است شما به این زبان تسلط کافی نداشته باشید.

پس مام بر آن شدیم تا در جهت افزایش سطح یادگیری،این سایت را ترجمه کنیم تا شما تازه کار ها هم از آن بی نصیب نمانید.

 

شروع دوره اموزش جاوا اسکریپت

جاوا اسکریپت در کنار زبان های HTML, CSS  یکی از زبان های اصلی در زمینه طراحی وب است.ما در این دوره تلاش میکنیم تا بدون گفتن نکات نا مربوط و بی استفاده، زمان اتمام این دوره را برایتان به حداقل برسانیم.

 

طبق گفته سایت w3schools :

جاوا اسکریپت یک زبان برنامه نویسی در وب و hrml  است.

جاوااسکریپت در یادگیری بسیار ساده است.

در این دوره از صفر و تا پیشرفته جاوااسکریپت را تدریس خواهیم کرد.

 

 

شروع مباحث جاوا اسکریپت

از اینجا به بعد آموزش ها آغاز میشود و با هم پله پله جلو میرویم.

 

 

 

آموزش تغییر متن درون تگ،به وسیله جاوا اسکریپت

 

از بین بسیاری از متد های جاوا اسکریپت،یکی از معروف ترین آن ها، getElementById میباشد که به صورت زیر نوشته میشود.

 

document.getElementById("demo").innerHTML = "Hello JavaScript";

 

یک مثال از کاربرد کد بالا را در زیر میبینیم.
 


<!DOCTYPE html>

<html>

<body>


<h2>What Can JavaScript Do?</h2>


<p id="demo">JavaScript can change HTML content.</p>


<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>


</body>

</html>


 

خروجی این کد،تصویر زیر است.

تصویر شماره 1

و اگر روی دکمه کلیک شود،خروجی به صورت زیر میشود.

 

اگر دقت کنید،میبینید که متن بالای دکمه تغییر کرده است

.

نکته:در جاوااسکریپت هم میتوان از دابل کوتیشن (") و هم از تک کوتیشن () استفاده کرد.به صورت زیر:

document.getElementById('demo').innerHTML = 'Hello JavaScript';

 

عبارت  demo هم میتواند در تک کوتیشن و هم در دابل کوتیشن باشد.

 

تغییر دادن اتریبیوت های تگ های HTML با جاوااسکریپت

ما در کد زیر دو تصویر داریم.یکی pic_bulbon.gif و دیگری pic_bulboff.gif  که اولی عکس یه لامپ روشن و دومی عکس یه لامپ خاموش است.
 



<!DOCTYPE html>

<html>

<body>


<h2>What Can JavaScript Do?</h2>


<p>JavaScript can change HTML attributes.</p>


<p>In this case JavaScript changes the src (source) attribute of an image.</p>


<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>


<img id="myImage" src="pic_bulboff.gif" style="width:100px">


<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>


</body>

</html>

 

خروجی کد بالا،تصویر زیر است.

تصویر شماره 3

اگر روی دکمه شماره دو کلیک کنیم ،تصویر همین میماند ولی اگر روی دکمه شماره یک کلیک شود،تصویر بالا به تصویر زیر تغییر پیدا میکند.

تصویر شماره 4

و اگر دوباره روی دکمه سمت چپ کلیک کنیم،تصویر شماره 3 نمایش داده مییشود و همین روند بعد کلیک بر روی هر دکمه،ادامه دارد.

با مجله " سایت اپ " میتوانید دیگر مباحث مربوط به جاوا اسکریپت را دنبال کنید.

 

دسته بندی
programming
جاوا-اسکریپت

برگشت به صفحه اصلی

سایتاپ درباره ما

#به نام یکتا برنامه نویس هستی


تلگرام من

alitaheri_4

بنده علی طاهری دانشجوی رشته نرم افزار و علاقه مند به برنامه نویسی هستم.اولین بار در 14 سالگی با وبلاگ نویسی پا در عرصه وب و سئو گذاشتم.در حال حاضر در برنامه نویسی اندروید با زبان جاوا و تحت وب با asp.net فعالیت دارم.همچنین بسیار علاقه مند به سئو هستم.