جاوا اسکریپت یکی از 3 زبانی است که تقریبا همه ی برنامه نویسان وب سایت باید یاد بگیرند. HTML برای تعریف ساختار صفحات وب است. Css برای مشخص کردن خصوصیات ظاهری آن ساختار مورد استفاده قرار می گیرد. Javascript برای مشخص کردن عناصری که بتواند با کاربر تعامل داشته باشد، مورد استفاده قرار می گیرد. جاوا اسکریپت یکی از زبان های برنامه نویسی محبوب وب است که به شما اجازه می دهد تا ویژگی های را به صفحات وب اضافه کنید تا کاربر بتواند با آن ها تعامل داشته باشد و در ازای آن تعامل یک عملی اتفاق بیفتد. مثلا شما می توانید با استفاده از جاوا اسکریپت یک دکمه طراحی کنید که با رفتن نشان گر موس بر روی آن، رنگ آن تغییر کند. یا مثلا می توانید با استفاده از جاوا اسکریپت، تصاویر اسلاید وار در صفحه اول یا هر صفحه ای که نیاز دارید بگذارید. یا مثلا دکمه ای بگذارید که با کلیک روی آن اطلاعات بیشتری را کاربر مشاهده کند. یا مثلا می توانید یک تایمر شمارش معکوس بر روی وب سایت بگذارید. یا مثلا تابعی تعریف می کنید تا ازای زدن دکمه ای فراخوانی شود و …
این موارد کاربردی و بسیاری از موارد دیگر پیشرفته تر با جاوا اسکریپت امکان پذیر است. به عنوان موارد پیشرفته تر مثلا می توانید یک فرم با html طراحی کنید و رخدادی با جاوا اسکریپت تعریف کنید که این رخداد زمانی فعال شود که دکمه ی مثلا ثبت نام زده شود. و سپس با استفاده از زبان های سمت سرور، زمانی که این دکمه زده شد، اطلاعات در دیتا بیس ذخیره شود و یا زمانی که دکمه ورود زده شد، اطلاعات از دیتابیس فراخوانی شود و پردازش شود.
البته از خود جاوا اسکریپت هم به عنوان زبان سمت سرور می توان استفاده کرد و پیشرفت های بسیار زیادی در سالهای اخیر داشته است و یکی از زبان هایی است که هم سمت کاربر و هم سمت سرور کاربردهای متنوعی دارد و موارد مختلفی را می توانید با استفاده از آن پیاده سازی کنید.
فهرست مطالعه این مقاله
جاوا اسکریپت چیست؟
جاوا اسکریپت یک زبان برنامه نویسی شی گرا عمدتا برای ایجاد صفحات وب سایت تعاملی و کاربر پسند تر و همچنین برای ایجاد برنامه های موبایل و … است. جاوا اسکریپت هم در سمت کاربر و هم در سمت سرور مورد استفاده قرار می گیرد و در سمت کاربر ویژگی هایی دارد که با HTML و CSS نمی توانید آنها را پیاده سازی کنید.
البته موضوعاتی پیرامون این بحث که جاوا اسکریپت و سئو با هم سازگاری ندارند وجود دارد ولی به عقیده بسیاری از افراد جاوا اسکریپت مزیت های مخصوص به خود را دارد و نه تنها در تقابل با سئو قرار نمی گیرد، که به عنوان یک عامل مثبت نیز محسوب می شود چرا که محیط وب را به محیطی کاربردی تر و کاربر پسند تر تبدیل کرده است و کاربران از تاثیرات آن رضایت دارند.
چرا باید جاوا اسکریپت یاد بگیریم؟
با گسترش نیاز های وب سایت ها و کاربران، یاد گرفتن زبانی که بتواند ویژگی های مختلفی را به صفحات وب اضافه کند ضروری است و جاوا اسکریپت یکی از زبان های محبوب است که در این سال ها بسیار مورد استفاده قرار می گیرد. از جمله مهمترین ویژگی هایی که یادگیری جاوا اسکریپت را ضروری می کند می توان به موارد زیر اشاره کرد:
تعامل پذیری
وب سایت هایی که از جاوا اسکریپت استفاده می کنند، تعاملی تر و در واقع نیازهای کاربران را بسیار بهتر پوشش می دهند.
آسانی
به آسانی شما می توانید موارد مختلفی را با یادگیری دانش پایه جاوا اسکریپت در وب سایت خود پیاده سازی کنید.
محبوبیت
جاوا اسکریپت یکی از محبوب ترین زبان های برنامه نویسی وب است و در واقع جامعه بالایی از آن استفاده می کنند.
رایگان بودن
جاوا اسکریپت رایگان است و هر کسی می تواند استفاده کند.
چگونه از جاوا اسکریپت استفاده کنیم؟
یک برنامه ی کامپیوتری لیستی از دستورات است که توسط یک کامپیوتر اجرا می شوند. در زبان های برنامه نویسی معمولا به این دستورات statements یا عبارات می گویند.
یک برنامه جاوا اسکریپت یا یک کد جاوا اسکریپت، لیستی از این عبارات است که توسط مرورگر وب (مثلا کروم) اجرا می شوند.
جاوا اسکریپت می تواند محتوای تگ های html را تغییر دهد مثلا متن یک متن را یا حذف کند یا نشان دهد یا تغییر دهد.
به عنوان مثال عبارت زیر به مرورگر می گوید که hello را بنویس در عنصر اچ اتی ام ال ای که آی دی آن برابر با demo است.
Document.getElementById(“demo”).innerHTML = “Hello”;
اگر کد اچ اتی ام ال زیر را در نظر بگیرد:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id=”demo”></p>
<script>
Document.getElementById(“demo”).innerHTML = “Hello Dolly.”;
</script>
</body>
</html>
خروجی به صورت زیر خواهد بود:
یا به عنوان مثال جاوا اسکریپت می تواند مقدار یک صفت را تغییر بدهد مثلا scr یک صفت است و سورس تصویر را مشخص کند و بنابراین جاوا اسکریپت می تواند این سورس را تغییر دهد به یک سورس دیگر.
روش های نمایش داده ها در جاوا اسکریپت
در جاوا اسکریپت داده ها می توانند به روش های مختلفی نمایش داده شوند
innerHTML، document.write()، window.alert از مهمترین های آن ها هستند.
innerHTML به معنی این است که در محتوای اچ اتی ام الی که با آی دی یا … مشخص می شود، داده ها نمایش داده شوند.
مثال
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>
خروجی به صورت زیر خواهد بود و در پاراگرافی که آی دی آن demo است خروجی نمایش داده می شود.
Document.Write برای اهداف تست و … به کار می رود و به آسانی استفاده می شود.
مثال:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<script>
document.write( 5 + 6);
</script>
</body>
</html>
خروجی به صورت زیر خواهد بود
یا مثلا
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>
</body>
</html>
خروجی به صورت زیر خواهد بود
که زمانی که روی دکمه کلیک می کنید خروجی به این صورت خواهد شد
()Window.alert هم برای نشان دادن در یک پنجره است. همچنین می توانید فقط کلمه alert را بنویسید. مثلا
<!DOCTYPE html>
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
خروجی به صورت زیر است
جاوا اسکریپت در کجا نوشته می شود؟
مانند css، روش های مختلفی برای استفاده از جاوا اسکریپت وجود دارد و به طور کلی به سه صورت می توانید از javascript استفاده کنید و در واقع به سه صورت می توانید javascript به کدتان اضافه کنید.
- javascript درون خطی
- javascript داخلی
- javascript خارجی
1-javascript درون خطی
بیشتر از این نوع زمانی استفاده می کنیم که گاهی تگ های اچ تی ام ال، صفت هایی دارند که اجازه می دهند برخی از کدها در ازای اتفاق افتادن رخدادی، اجرا شود. مثلا
<button onclick=”alert(‘you just ckicked a button’)”>Click me!</button>
خروجی کد بالا به صورت زیر خواهد بود:
که با کلیک روی آن خروجی به صورت زیر خواهد بود:
2-javascript داخلی
درست مثل تعریف تگ style برای تعریف css، تگ script برای جاوا اسکریپت بکار می رود. این اسکریپتها هم در body و هم در بخش head و هم در هر دو می توانند قرار بگیرند
مثال کدهای جاوا اسکریپت به صورت داخلی در head:
مثلا در مثال زیر در قسمت head یک کد جاوا اسکریپت نوشته شده است. و تابعی که در این قسمت نوشته شده است، زمانی که یک دکمه کلیک شود فراخوانی می شود. البته در کد زیر یک بخش هم به صورت javascript درون خطی نوشته شده است.
<!DOCTYPE html>
<html>
<head>
<script>
Function myfunction() {
Document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myfunction()”>Try it</Button>
خروجی به صورت زیر خواهد بود:
به محضی که روی دکمه try it کلیک شود، خروجی به صورت زیر می شود:
مثال کدهای جاوا اسکریپت به صورت داخلی در body:
<!DOCTYPE html>
<html>
<head>
</head>
<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>
خروجی این کد عینا مانند بالا است.
3-javascript خارجی
همچنین کدهای جاوا اسکریپت می توانند مانند Css خارجی، در یک فایل خارجی باشند و در هر جا نیاز بود آن ها فراخوانی شوند. در واقع زمانی که از یک کد در چندین صفحه بخواهید استفاده کنید می توانید از جاوا اسکریپت به صورت خارجی استفاده کنید. همچنین با این روش کدهای javascript از کدهای html و css جدا می شوند.
برای این موارد به صورت زیر عمل می کنیم و در واقع فایل جاوا اسکریپت را فراخوانی می کنیم.
<script src=”./script.js”></script>
مثال کدهای جاوا اسکریپت به صورت خارجی:
برای این منظور یک فایل myscript.js خارجی باید داشته باشید مثلا به صورت زیر:
Function myFunction() {
Document.getElementById(“demo”).innerHTML = “Paragraph changed.”; }
و در کد اصلی html صفت src تگ script را برابر با آن فایل قرار می دهید. (البته در این کد هم جاوا اسکریپت درون خطی وجود دارد هم خارجی)
مثلا:
<html>
<body>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<script src=”myscript.js”></script>
</body>
</html>
خروجی این کد نیز دقیقا مانند قبلی ها است.
همچنین اگر بخواهید چندین فایل اسکریپت به یک صفحه اضافه کنید، باید چندین تگ اسکریپت مانند زیر بنویسید:
<script src=”myscript1.js”></script>
<script src=”myscript2.js”></script>
و به عنوان نکته آخر این بخش، توجه داشته باشید که به سه روش می توانید آدرس فایل های خارجی جاوا اسکریپت را مشخص کنید.
هم می توانید یو آر ال کامل را بنویسید:
مثلا
<script src=”https://www.w3schools.com/js/myScript.js”></script>
هم می توانید مسیر فایل را بنویسید:
مثلا
<script src=”/js/myScript.js”></script>
و هم می توانید بدون هیچ مسیری، نام فایل را بنویسید:
<script src=”myScript.js”></script>
معرفی برخی از مفاهیم پایه و مهم جاوا اسکریپت
متغیرها در جاوا اسکریپت
متغیرها محفظه هایی برای ذخیره کردن داده ها هستند. نام متغیرها هم می تواند به صورت کوتاه باشد مثلا x، y و غیره و هم می تواند به صورت توصیفی باشد مثلا total، age و غیره.
مثال
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables.</p>
<p id=”demo”></p>
<script>
Var x = 5;
Var y = 6;
Var z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>
</body>
</html>
خروجی مثال بالا به صورت زیر خواهد بود:
توابع (functions) و رخدادها (events)
توابع در برنامه نویسی کدهایی هستند که اعمال خاصی را انجام می دهند و زمانی که آن ها فرا خوانده می شوند، اجرا می شوند. رخدادها یک اتفاقی هستند که رخ می دهند. به عنوان مثال زمانی که یک رخدادی مثل کلیک کردن روی یک دکمه توسط کاربر اتفاق افتاد، تابعی که رنگ آن دکمه را تغییر می دهد، فرا خوانده شود و رنگ آن عوض شود.
توابع جاوا اسکریپت بلوکی از کدها هستند که برای اجرای یک کار خاص نوشته می شوند. توابع در واقع یک بار نوشته می شوند و دفعات زیادی مورد استفاده قرار می گیرند و یکی از مهمترین دلایل نوشتن توابع نیز همین است.
ساختار تعریف توابع در جاوا اسکریپت به صورت زیر است:
Function name(parameter1, parameter2, parameter3)
{
//code to be executed
}
به عنوان مثال تابع زیر درجه فارنهایت را به عنوان ورودی دریافت می کند و درجه سلسیوس را به عنوان خروجی برمی گرداند.
Function toCelsius(fahrenheit)
{
return (5/9) * (Fahrenheit-32);
}
document.getElementById(“demo”).innerHTML = “the temperature is”+ toCelsius(77) + “Celsius”;
خروجی به صورت زیر خواهد بود:
رخدادها در زبان های برنامه نویسی بسیار مهم و پرکاربرد هستند. رخدادها در جاوا اسکریپت هر اتفاقی هستند که رخ می دهند.
زمانیکه جاوا اسکریپت در صفحات html بکار برده می شود، در واقع کدهای جاوا اسکریپت در ازای وقوع این رخداد ها واکنش نشان می دهد. مثلا با زدن یک دکمه (که در واقع یک رخداد اتفاق افتاده است) یک عددی نمایش داده می شود و … .
جنس رخدادها می تواند مواردی مانند زیر باشد:
مثلا رخدادی از جنس اینکه بارگذاری یک صفحه html به پایان برسد. یعنی در واقع زمانیکه این اتفاق افتاد، حالا یک عملی تعریف شود.
یا مثلا رخدادی از جنس کلیک بر روی یک دکمه (button)
یا مثلا رخدادی از جنس تغییر یک فیلد ورودی
و …
زمانیکه رخدادها رخ می دهند، برنامه نویسان در واقع کاری را تعریف می کنند (در قالب یک تابع یا … ) که انجام شود.
کلاس ها و اشیا در جاوا اسکریپت:
کلاس ها در جاوا اسکریپت، یک نوع داده هستند.
کلاس ها در واقع همان متغیرها هستند که برای ذخیره داده استفاده می شوند با این تفاوت که می توانند چندین مقدار در خود نگه دارند و همچنین چندین تابع هم دارند. در واقع کلاس ها یک سری خصوصیت (property) و یک سری رفتار (method) دارند. رفتارها، اعمالی هستند که روی آن ها اجرا می شوند.
ساختار کلاس ها در جاوا اسکریپت به صورت زیر است:
Class ClassName {
Constructor() { … }
}
Constructor متدی است که به محضی که شی ای از کلاس ساخته می شود ایجاد می شود و برای مقدار دهی اولیه به خصوصیات اشیا مورد استفاده قرار می گیرد.
کلاس جاوا اسکریپت یک شی نیست و اشیا از روی کلاس ها ایجاد می شوند. اشیای مختلف از کلاس ها ساخته می شوند.
Let myCar1 = new Car(“Ford”, 2014);
Let myCar2 = new Car(“Audi”, 2019);
به عنوان مثال
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript class</h2>
<p id=”demo”></p>
<script>
Class Car {
Constructor(name, year) {
This.name = name;
This.year = year;
}
}
Const myCar = new Car(“Ford”, 2014);
Document.getElementById(“demo”).innerHTML = myCar.name + “” + myCar.year;
</script>
</body>
</html>
خروجی کد بالا به صورت زیر خواهد بود
یا به عنوان مثال:
Class Car {
Constructor(name, year) {
this.name = name;
this.year = year;
age() {
let date = new Date();
return date.getFullYear() – this.year;
}
}
let myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML = “My car is” + myCar.age() + “years old.”;
خروجی به صورت زیر خواهد بود:
یا مثلا
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x){
return x – this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML= “My car is” + myCar.age(year) + “years old.”;
خروجی به صورت زیر خواهد بود:
اشیا در واقع نمونه های واقعی کلاس ها هستند و در یک برنامه کامپیوتری در زمان اجرا، اشیا اجرا می شوند و با هم در ارتباط اند و … .
یک مثال ساده از جاوا اسکریپت
در این قسمت یک مثال ساده از کاربرد جاوا اسکریپت را با هم خواهیم دید. در این مثال می خواهیم با زدن دکمه (وقوع رخداد) زمان و ساعت نمایش داده شود.
<!DOCTYPE html>
<html>
<body>
<h2>ساعت و زمان</h2>
<button type=”button” onclick=”document.getElementById(‘demo’).innerHTML = Date()”>
برای نمایش ساعت و تاریخ کلیک کنید</button>
<p id=”demo”>بر روی دکمه بالا کلیک کنید تا به جای این متن زمان و ساعت ظاهر شود</p>
خروجی به صورت زیر خواهد بود
که با کلیک روی دکمه بالا ساعت و تاریخ مانند زیر به نمایش در آورده می شود.
جاوا اسکریپت ویژگی های بسیاری دارد که می تواند وب سایت شما را تعاملی تر و کاربردی تر کند. در این مقاله به برخی از مفاهیم پایه در این مورد اشاره کردیم و در واقع صرفا یک نقطه شروع برای آغاز این زبان برنامه نویسی است و در این نقطه شروع سعی کردیم برخی از نکات کاربردی را ارائه کنیم تا برخی از مفاهیم آن آشنا شوید. برای یادگیری و استفاده از آن در پروژها می توانید از وب سایت w3school ادامه یادگیری را پیش ببرید و با انجام پروژه های واقعی به موارد مختلف تسلط یابید و موارد مختلفی را در وب سایت خود پیاده سازی کنید. امیدواریم بتوانید با بکارگیری درست این موارد بتوانید در کسب و کار خود بهتر عمل کنید.
جاوا اسکریپت چیست؟
جاوا اسکریپت یک زبان برنامه نویسی شی گرا عمدتا برای ایجاد صفحات وب سایت تعاملی و کاربر پسند تر و همچنین برای ایجاد برنامه های موبایل و … است. جاوا اسکریپت هم در سمت کاربر و هم در سمت سرور مورد استفاده قرار می گیرد و در سمت کاربر ویژگی هایی دارد که با HTML و CSS نمی توانید آنها را پیاده سازی کنید.
چرا باید جاوا اسکریپت یاد بگیریم؟
با گسترش نیاز های وب سایت ها و کاربران، یاد گرفتن زبانی که بتواند ویژگی های مختلفی را به صفحات وب اضافه کند ضروری است و جاوا اسکریپت یکی از زبان های محبوب است که در این سال ها بسیار مورد استفاده قرار می گیرد. از جمله مهمترین ویژگی هایی که یادگیری جاوا اسکریپت را ضروری می کند می توان به موارد زیر اشاره کرد: تعامل پذیری وب سایت هایی که از جاوا اسکریپت استفاده می کنند، تعاملی تر در در واقع نیازهای کاربران را بسیار بهتر پوشش می دهند. آسانی به آسانی شما می توانید موارد مختلفی را با یادگیری دانش پایه جاوا اسکریپت در وب سایت خود پیاده سازی کنید. محبوبیت جاوا اسکریپت یکی از محبوب ترین زبان های برنامه نویسی وب است و در واقع جامعه بالایی از آن استفاده می کنند. رایگان بودن جاوا اسکریپت رایگان است و هر کسی می تواند استفاده کند.
جاوا اسکریپت در کجا نوشته می شود؟
مانند css، روش های مختلفی برای استفاده از جاوا اسکریپت وجود دارد و به طور کلی به سه صورت می توانید از javascript استفاده کنید و در واقع به سه صورت می توانید javascript به کدتان اضافه کنید. 1- javascript درون خطی 2- javascript داخلی 3- javascript خارجی
با عضویت در خبرنامه ایمیلی ما میتوانید در رشد کسب و کار خود قدم موثری بردارید!
برچسب :
بدون دیدگاه