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

یکی از بهترین روش ها برای یادگیری زبان برنامه نویسی انجام پروژه های است که دانش شما را به چالش می کشد در این مقاله ی آموزشی ابتدا با javascript آشنا می شویم و پس از آن یک برنامه ی ساده جاوااسکریپتی را پیاده سازی می کنیم.

JavaScript

جاوااسکریپت از محبوب ترین و پرکاربرد ترین زبانهای برنامه نویسی است که همه روزه به علاقه مندان آن اضافه می شود ، JavaScript یک زبان برنامه نویسی سطح بالا ، شی‌گرا و داینامیک است که از آن برای توسعه وب سمت کاربر ، توسعه وب سمت سرور ، بازی و اپلیکیشن های موبایل و کامپیوتر استفاده می شود در واقع پایه و اساس هر آن چه که در اینترنت می بینید را تشکیل می دهد.

فایل هامی مورد نیاز برای شروع برنامه نویسی

برای شروع به ساخت یک نرم افزار ابتدا باید فایل های زیر را ایجاد کنید :

فایل با پسوند html برای وارد کردن تگ های خود و ساخت اسکلت اولیه نرم افزار

فایل با پسوند js برای کد های جاوا اسکریپتی

فایل با پسوند css برای استایل دهی

شروع به کار با تگ های html

پس از ساخت سند html کد زیر را درون آن قرار دهید.

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="change_bg">
        <p> با کلیک کردن روی کلید زیر می توانید رنگ پس زمینه را تغییر دهید</p>
    </div>

    <button id="button">کلیک کنید</button>
    <script src="app.js"></script>
</body>
</html>

در این قسمت شما مشاهده می کنید که ما ابتدا در قسمت body تگ div با id دلخواه (در اینجا من از change_bg استفاده کردم) ایجاد کردیم و درون آن با استفاده از تگ p متن دلخواهی را قرار دادیم.

پس از آن با استفاده از یک تگ button دکمه ای ایجاد کردیم با یک ایدی دلخواه تا به وسیله ی این دکمه پس زمینه متن ما تغییر کند.

کار با استایل دهی و کد های css

در مرحله ی بعدی شما باید کد های css خود را ایجاد کنید برای این کار ما با استفاده از id های که از قبل در سند html خود ایجاد کردیم شکل و ظاهر برنامه خود را با ظاهری بهتر به نمایش در می آوریم.

مانند کد های زیر :

  #change_bg{

    background-color: red;
    color: white;
    font-size: 30px;
    width: 400px;
    height: 400px;
    margin: 60px auto 60px;
    text-align: center;
    display: flex;
    justify-content: center;
}

#button{
    text-align: center;
    width: 200px;
    height: 50px;
    margin: 60px auto 60px;
    color: white;
    background: black;
    border-radius: 7px;
    display: block;
}

قرار دادن کد های جاوااسکریپت

در این قسمت همانند کد های زیر ابتدا یک متغییر با نام دلخواه برای مثال colors_bg ایجاد می کنیم.


let colors_bg = [ 'red', 'blue', 'green','black'];

سپس در سند html به دنبال المنتی با ایدی button می گردیم و آنرا درون متغییر click_btn قرار می دهیم.

let click_btn = document.getElementById('button');

پس از آن یک event کلیک بر روی متغییر click_btn قرار می دهیم که با صدا زدن آن دو دستور درون event اجرا می شود به این صورتی که با کلیک بر روی دکمه button یک رنگ تصادفی از آرایه colors_bg انتخاب شده و استایل پس زمینه ما را تغییر می دهد.


let colors_bg = [ 'red', 'blue', 'green','black'];

let click_btn = document.getElementById('button');

click_btn.addEventListener('click', function(){

    let index = parseInt((Math.random()*colors_bg.length)+1);

    let change_bg = document.getElementById('change_bg');

    change_bg.style.background = `${ colors_bg [index]}`
})

در این مقاله قصد داشتیم با ایجاد یک پروژه آموزشی بسیار ساده ، به شما در جهت افزایش دانش برنامه نویسی کمک کنیم ، قطعا تمرین کردن و ساخت نرم افزار های بیشتر به شما در تبدیل شدن به یک برنامه نویس حرفه ای کمک می کند.

برای یادگیری html می توانید از دوره ی آموزش رایگان html استفاده کنید.

همچنین با مطالعه این مقاله می توانید اطلاعات خود درمورد زبان برنامه نویسی جاوا اسکریپت را افزایش دهید.

امیدوارم این مقاله آموزشی برای شما مفید بوده باشد.