شروع برنامه نویسی با جاوا اسکریپت

قسمت اول از 7 قسمت آموزش java script

شاید برای کسی که میخواهد این زبان برنامه نویسی را یاد بگیرد این سوال پیش ایدکه جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان کلاینت ساید (سمت کاربر اجرا می‌شود) است که داخل کدهای html نوشته میشود و قابلیت تغییر و بوجود اوردن کدهای

HTML  و CSS را دارد و میتواند با تعامل با کاربر سایتی پویا به شما تحویل دهد  این زبان توانایی محاسبات متحرک سازی پویا نمایی تعامل با کاربر جمع اوری اطلاعات از کاربر و…

را داراست شما میتوانید از امکانات این زبان برای ساخت منوهای زیبا تا محاسبات عددی تغییر در کدهای نمایشی خود استفاده کنید

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

(پیش‌نیاز این دوره دانستن HTML  است)

شروع سریع

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

getElementById ایدی آن المان را وارد میکنیم و با innerHTML مقدار دلخواهمان را وارد میکنیم

<p id="x">متن اولیه </p>

<button type="button" onclick='document.getElementById("x").innerHTML="hi"'>کلیک کنید!</button>

میخواهیم با کلیک روی دکمه متن پاراگرافی که id آن را برابر با x قرار دادیم تغییر کند پس در onclick دکمه‌ی خودمان کد زیر را می‌نویسیم

document.getElementById("x").innerHTML="hi" 

حال با کلیک روی دکمه متن داخل تگ p که ایدی x دارد تغییر میکند

به کلمه‌ی  hi به این شکل هم میتوانید همین کد را بنویسین

مثال زیر را مشاهده کنید

<script>
function hi()
{
document.getElementById("x").innerHTML="hi";	
}
</script>

<p id="x">متن اولیه </p>

<button type="button" onclick='hi()'>کلیک کنید!</button>

یک تابع با نام hi تعریف کردیم که دقیقا دستو قبل را در آن نوشتیم  و در onclick آن تابع hi را فراخوانی کردیم که دقیقا مانند همان روند قبل است

حال اگر بخواهید با مقادیر کار کنید

باید اول متغییرها را مشخص کنیم بعد محاسبات را اجرا کنیم

<p id="y"></p>

<script>

var x, y, z;
x = 4;
y = 6;
z = x + y;
document.getElementById("y").innerHTML ="جمع:"+ z ;

</script>

حال باید مقدار جمع:10 را در خروجی ببینید  مشخص است که با var متغییرها را تعریف کرده‌ایم

تمرین

با کلیک روی یک دکمه محاسبات مساحت یک دایره انجام شود به شعاع 3 متر

قسمت اول از 7 قسمت آموزش جاوا اسکریپت را آموختید

لطفا تمرین را انجام دهید

عضویت رایگان

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