آموزش جاوا اسکریپت – اصول پایه

آموزش جاوا اسکریپت اصول پایه – جاوا اسکریپت یک زبان برنامه نویسی است که تعامل را به وب سایت شما اضافه می کند. این در بازی ها ، در رفتار پاسخ ها هنگام فشار دادن دکمه ها یا با ورود داده ها به فرم ها اتفاق می افتد. با یک ظاهر طراحی پویا ؛ با انیمیشن و غیره. سری مقالات آموزش جاوا اسکریپت به شما کمک می کند با اصول پایه و سطوح مختلف این زبان شگفت انگیز آشنا شوید و درک بیشتری از آنچه ممکن است داشته باشید.

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

جاوا اسکریپت چیست؟

JavaScript (به اختصار “JS”) یک زبان برنامه نویسی پویا و کامل است که می تواند تعامل را به یک وب سایت اضافه کند. این توسط Brendan Eich (بنیانگذار پروژه موزیلا ، بنیاد موزیلا و شرکت موزیلا) اختراع شد.

جاوا اسکریپت همه کاره و مبتدی پسند است. با تجربه بیشتر ، قادر به ایجاد بازی ها ، گرافیک های 2D و 3D متحرک ، برنامه های جامع مبتنی بر پایگاه داده و موارد دیگر خواهید بود! و این میتواند آموزش جاوا اسکریپت را برایتان بسیار لذت بخش کند.

جاوا اسکریپت خود نسبتاً جمع و جور است ، در عین حال بسیار انعطاف پذیر است. و این آموزش جاوا اسکریپ را برای اغلب توسعه دهندگان آسان می کند. توسعه دهندگان ابزارهای مختلفی را درباره زبان اصلی JavaScript نوشته اند ، و با حداقل تلاش قفل بسیاری از قابلیت ها را باز می کنند. این شامل:

  • رابط های برنامه نویسی نرم افزار مرورگر (API) که در مرورگرهای وب تعبیه شده است ، عملکردهایی مانند ایجاد پویا HTML و تنظیم سبک های CSS را فراهم می کند. جمع آوری و دستکاری یک جریان ویدئویی از وب کم کاربر یا تولید گرافیک سه بعدی و نمونه های صوتی.
  • API های شخص ثالث که به توسعه دهندگان اجازه می دهد عملکرد را در سایت های سایر ارائه دهندگان محتوا مانند Twitter یا Facebook قرار دهند.
  • چارچوب ها و کتابخانه های شخص ثالثی که می توانید برای سرعت بخشیدن به کار در ساخت سایت ها و برنامه ها ، در HTML اعمال کنید.

ارائه جزئیات تفاوت زبان اصلی جاوا اسکریپت با ابزار ذکر شده در بالا ، خارج از محدوده این مقاله است – به عنوان مقدمه ای ساده برای جاوا اسکریپت. شما می توانید در بخش یادگیری جاوا اسکریپت MDN و همچنین در سایر قسمتهای MDN بیشتر بیاموزید.

بخش زیر برخی از جنبه های زبان اصلی را معرفی می کند و فرصتی را برای بازی با چند ویژگی API مرورگر نیز فراهم می کند. خوش بگذره!

سلام دنیا! مثال همیشگی!

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

با این حال ، راحت بودن با JavaScript پر چالش تر از راحت بودن با HTML و CSS است. ممکن است مجبور شوید از اصول کوچک و پایه شروع کنید و به تدریج پیشرفت کنید. برای شروع ، بیایید نحوه افزودن جاوا اسکریپت به صفحه خود را برای ایجاد کد معروف سلام دنیا بررسی کنیم! مثال. (سلام دنیا! استانداردی برای مثالهای برنامه نویسی مقدماتی است.)

مهم:

اگر بقیه دوره ما را دنبال نکرده اید ، این کد را بارگیری کنید و از آن به عنوان نقطه شروع استفاده کنید.

1: به سایت آزمایش خود بروید و یک پوشه جدید به نام اسکریپت ها ایجاد کنید. در پوشه اسکریپت ها ، یک فایل جدید به نام main.js ایجاد کنید و آن را ذخیره کنید.

2: در فایل index.html خود ، این کد را در یک خط جدید ، درست قبل از برچسب بسته شدن وارد کنید:

<script src="scripts/main.js"></script>

3: این کار همان کار عنصر برای CSS است. این جاوا اسکریپت را روی صفحه اعمال می کند ، بنابراین می تواند بر روی HTML تأثیر بگذارد (همراه با CSS و هر چیز دیگری در صفحه).

4: این کد را به پرونده main.js اضافه کنید:

const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

5: مطمئن شوید که فایلهای HTML و JavaScript ذخیره شده اند. سپس index.html را در مرورگر خود بارگیری کنید. شما باید چیزی شبیه به این را ببینید:

تصویر نمایش داده شده در صفحه
شما باید این تصویر را در مرورگرتان مشاهده کنید.

نکته

فایل HTML به این صورت است که مرورگر کد را به ترتیب ظاهر شده در فایل می خواند.
اگر ابتدا جاوا اسکریپت بارگیری شود و قرار باشد HTML که هنوز بارگیری نشده است تأثیر بگذارد ، ممکن است مشکلاتی وجود داشته باشد. قرار دادن جاوا اسکریپت در نزدیکی پایین صفحه HTML یکی از روشهای سازگاری با این وابستگی است. برای کسب اطلاعات بیشتر در مورد رویکردهای جایگزین ، به استراتژی های بارگیری اسکریپت مراجعه کنید.

چه اتفاقی افتاد؟

متن عنوان به Hello world تغییر کرد! با استفاده از JavaScript. این کار را با استفاده از تابعی به نام querySelector () انجام دادید تا مرجعی برای عنوان خود در نظر بگیرید و سپس آن را در متغیری به نام myHeading ذخیره کنید. این همان کاری است که ما با استفاده از انتخابگرهای CSS انجام دادیم. وقتی می خواهید کاری برای یک عنصر انجام دهید ، ابتدا باید آن را انتخاب کنید.

به دنبال آن ، کد مقدار متغیر myHeading را با ویژگی textContent (که محتوای عنوان را نشان می دهد) به Hello world تنظیم کرد !

دوره سقوط زبانهای ابتدایی

برای اینکه درک بهتری از نحوه کار JavaScript داشته باشید ، بیایید برخی از ویژگیهای اصلی زبان را توضیح دهیم. شایان ذکر است که این ویژگی ها در همه زبان های برنامه نویسی مشترک است. اگر بر این اصول مسلط باشید ، شروع به برنامه نویسی به زبان های دیگر نیز می کنید!

متغیرها

متغیرها ظروفی هستند که مقادیر را ذخیره می کنند. شما با اعلام یک متغیر با var (کمتر توصیه می شود ، برای توضیح بیشتر غوطه ور شوید) یا کلمه کلیدی let شروع می کنید ، و سپس نامی را که به متغیر می دهید دنبال می کنید:

let myVariable;

مهم

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

مهم

تقریباً از هر چیزی می توانید یک متغیر را نام ببرید ، اما محدودیت هایی وجود دارد. (به این بخش در مورد قوانین نامگذاری مراجعه کنید.) اگر مطمئن نیستید ، می توانید نام متغیر خود را بررسی کنید تا معتبر باشد.

مهم

توجه: جاوا اسکریپت به حروف کوچک بزرگ حساس است. این بدان معناست که myVariable با myvariable یکسان نیست. اگر در کد خود مشکلی دارید ، پرونده را بررسی کنید!

مهم

برای جزئیات بیشتر در مورد تفاوت var با let ، تفاوت var و let را ببینید.

پس از اعلام یک متغیر ، می توانید به آن یک مقدار بدهید:

myVariable = 'Bob';

همچنین ، می توانید هر دو این عملیات را در یک خط انجام دهید:

let myVariable = 'Bob';

شما با فراخوانی نام متغیر مقدار را بازیابی می کنید:

myVariable;

پس از اختصاص مقدار به یک متغیر ، می توانید بعداً آن را در کد تغییر دهید:

let myVariable = 'Bob';
myVariable = 'Steve';

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

مثالتوضیحمتغیر
let myVariable = 'Bob';این دنباله ای از متن است که به عنوان رشته شناخته می شود. برای نشان دادن اینکه یک مقدار یک رشته است ، آن را در علامت های نقل قول واحد ضمیمه کنید.String
let myVariable = 10;این یک عدد است. شماره ها در اطراف خود نقل قول ندارند.Number
let myVariable = true;این یک مقدار True / False است. کلمات true و false کلمات کلیدی خاصی هستند که نیازی به علامت گذاری ندارند.Boolean
let myVariable = [1,'Bob','Steve',10];
به هر یک از اعضای آرایه اینگونه مراجعه کنید:
myVariable[0], myVariable[1], etc.
این ساختاری است که به شما امکان می دهد چندین مقدار را در یک مرجع ذخیره کنید.Array
let myVariable = document.querySelector('h1');این می تواند هر چیزی باشد. همه چیز در JavaScript یک شی است و می تواند در یک متغیر ذخیره شود. همانطور که یاد گرفتید این را در ذهن داشته باشید.Object

ما چرا به متغیرها نیاز داریم؟ متغیرها برای انجام هر کار جالب در برنامه نویسی ضروری هستند. اگر مقادیر نمی توانند تغییر کنند ، بنابراین نمی توانید کاری پویا انجام دهید ، مانند شخصی کردن پیام تبریک یا تغییر تصویر نمایش داده شده در گالری تصاویر.

نظرات (Comments)

نظرات قطعه هایی از متن است که می تواند همراه با کد اضافه شود. مرورگر متن علامت گذاری شده به عنوان نظر را نادیده می گیرد. می توانید همانطور که در CSS می توانید نظرات خود را در JavaScript بنویسید:

/*
Everything in between is a comment.
*/

اگر نظر شما بدون خط شکسته باشد ، این گزینه است که آن را در پشت دو اسلش هم می توانید قرار دهید:

// This is a comment

عملگر ها (Operators)

عملگر یک نماد ریاضی است که بر اساس دو مقدار (یا متغیر) نتیجه می گیرد. در جدول زیر ، می توانید ساده ترین اپراتورها را به همراه چند مثال برای امتحان در کنسول JavaScript مشاهده کنید.

مثالنماد (ها)توضیحعملگر
6 + 9;
'Hello ' + 'world!';
+دو عدد را با هم جمع می کند یا دو رشته را با هم ترکیب می کند.اضافه کردن
9 - 3;
8 * 2; // ضرب در JS یک ستاره است
9 / 3;
-, *, /اینها همان کاری را انجام می دهند که انتظار دارید در ریاضیات پایه انجام دهند.تفریق ، ضرب ، تقسیم
let myVariable = 'Bob';=همانطور که قبلاً مشاهده کردید: این یک مقدار را به یک متغیر اختصاص می دهد.وظیفه
let myVariable = 3;
myVariable === 4;
===این آزمایشی را برای بررسی برابر بودن دو مقدار انجام می دهد. این یک نتیجه درست / نادرست (بولین) برمی گرداند.برابری
برای “نه” ، عبارت اساسی درست است ، اما مقایسه نادرست برمی گردد زیرا ما آن را نفی می کنیم:
let myVariable = 3;
!(myVariable === 3);

“آیا برابر نیست” در اصل همان نتیجه را با نحو متفاوت می دهد. در اینجا ما آزمایش می کنیم “myVariable NOT برابر با 3”. این نادرست است زیرا myVariable IS برابر با 3 است:
let myVariable = 3;
myVariable !== 3;
!, !==این مقدار منطقی مخالف آنچه قبل از آن است را برمی گرداند. این یک true را به نادرست و غیره تبدیل می کند. وقتی در کنار عملگر Equality استفاده می شود ، عملگر نفی آزمایش می کند که آیا دو مقدار برابر نیستند.نیست، برابر نیست

عملگر های بیشتری برای کشف وجود دارد ، اما اکنون همین کافی است. برای یک لیست کامل به عبارات و عملگرهای جاوا اسکریپت مراجعه کنید.

مهم

هنگام انجام محاسبات ، مخلوط کردن انواع داده ها می تواند به نتایج عجیب و غریب منجر شود. مراقب باشید که به درستی به متغیرهای خود مراجعه می کنید و نتایج مورد انتظار را بگیرید. به عنوان مثال ، “35” + “25” را در کنسول خود وارد کنید. چرا به نتیجه ای که انتظار داشتید نمی رسید؟ از آنجا که علامت های نقل قول ، اعداد را به رشته تبدیل می کنند ، بنابراین در نهایت به جای جمع کردن اعداد ، رشته ها را به هم پیوند می دهید. اگر 35 + 25 وارد کنید مجموع دو عدد را بدست خواهید آورد.

شرط (Conditionals)

شرط ها ، ساختارهای کدی هستند که برای آزمایش درست بودن یا نبودن عبارت استفاده می شوند. شکل بسیار متداول شرطی بودن عبارت if … else است. مثلا:

let iceCream = 'chocolate';
if(iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

عبارت داخل (…) آزمون است. با استفاده از عملگر هویت (همانطور که در بالا توضیح داده شد) متغیر iceCream را با شکلات رشته ای مقایسه می کند تا ببیند این دو برابر هستند یا خیر. اگر این مقایسه درست شود ، اولین بلوک کد اجرا می شود. اگر مقایسه درست نباشد ، بلاک دوم کد – بعد از عبارت else – به جای آن اجرا می شود.

توابع (Functions)

توابع راهی برای عملکرد بسته بندی است که می خواهید دوباره استفاده کنید. ممکن است مجموعه ای از کد را به عنوان تابعی تعریف کنید که وقتی نام تابع را در کد خود فراخوانی می کنید ، اجرا شود. این گزینه خوبی برای نوشتن مکرر همان کد است. قبلاً برخی از کاربردهای توابع را قبلاً مشاهده کرده اید. مثلا:

let myVariable = document.querySelector('h1');
alert('hello!');

این توابع ، document.querySelector و هشدار ، در مرورگر تعبیه شده اند.

اگر چیزی را مشاهده کنید که به نظر می رسد یک نام متغیر است ، اما با آن پرانتز دنبال می شود – () – احتمالاً یک تابع است. توابع غالباً بیت داده هایی که برای انجام وظیفه خود نیاز دارند را استدلال می کنند. آرگومان ها درون پرانتز قرار می گیرند ، اگر بیش از یک آرگومان وجود داشته باشد ، با کاما از هم جدا می شوند.

به عنوان مثال ، تابع alert () یک جعبه پاپ آپ را در داخل پنجره مرورگر نشان می دهد ، اما ما باید یک رشته را به عنوان آرگومان به آن دهیم تا به عملکرد بگوییم چه پیامی را نمایش دهد.

شما همچنین می توانید عملکردهای خود را تعریف کنید. در مثال بعدی ، یک تابع ساده ایجاد می کنیم که دو عدد را به عنوان آرگومان گرفته و آنها را ضرب می کند:

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

این کد را در کنسول اجرا کنید. سپس با چندین استدلال تست کنید. مثلا:

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

مهم

دستور Return به مرورگر می گوید که متغیر نتیجه را از عملکرد خارج کند ، بنابراین برای استفاده در دسترس است. این ضروری است زیرا متغیرهای تعریف شده در داخل توابع فقط در داخل این توابع در دسترس هستند. این عمل scoping متغیر نامیده می شود. (بیشتر بخوانید درباره محدوده بندی متغیر.)

رویداد (Events)

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

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

روش های زیادی برای اتصال یک کنترل کننده رویداد به یک عنصر وجود دارد. در اینجا عنصر را انتخاب می کنیم ، ویژگی کنترل کننده onclick آن را برابر با یک تابع ناشناس (یعنی بدون نام) قرار می دهیم که حاوی کدی است که می خواهیم رویداد کلیک اجرا شود.

توجه داشته باشید که

document.querySelector('html').onclick = function() {};

برابر است با

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

فقط کوتاه تره است!

بیایید گام به گام یک سایت بنویسیم!

در این بخش ، شما می آموزید که چگونه از ویژگی های JavaScript و DOM API برای جایگزینی نمایش یکی از دو تصویر استفاده کنید. این تغییر هنگامی رخ خواهد داد که کاربر روی تصویر نمایش داده شده کلیک می کند.

1: تصویری را که می خواهید در سایت نمونه خود قرار دهید انتخاب کنید. در حالت ایده آل ، اندازه تصویر همان تصویری است که قبلاً اضافه کرده اید یا تا حد امکان نزدیک خواهد بود.

2: این تصویر را در پوشه تصاویر خود ذخیره کنید.

3: تغییر نام تصویر webgenius.png

4: JavaScript زیر را به پرونده main.js خود اضافه کنید.

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/webgenius.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}

5: همه پرونده ها را ذخیره کرده و index.html را در مرورگر بارگیری کنید. حالا وقتی روی تصویر کلیک می کنید ، باید به تصویر دیگری تغییر کند.

این چیزی است که اتفاق افتاد. شما یک ارجاع به عنصر خود را در متغیر myImage ذخیره کرده اید. بعد ، ویژگی onclick handler event این متغیر را برابر با تابعی بدون نام کردید (یک تابع “ناشناس”). بنابراین هر بار که روی این عنصر کلیک می شود:

1: کد مقدار ویژگی src تصویر را بازیابی می کند.
2: کد از شرطی برای بررسی اینکه آیا مقدار src برابر با مسیر تصویر اصلی است استفاده می کند:

  • در صورت وجود ، کد مقدار src را به مسیر تصویر دوم تغییر می دهد و مجبور می شود تصویر دیگر در داخل عنصر بارگیری شود.
  • اگر اینگونه نباشد (یعنی باید از قبل تغییر کرده باشد) ، مقدار src به مسیر اصلی تصویر ، به حالت اصلی برمی گردد.

افزودن پیام خوش آمدگویی شخصی شده

در مرحله بعد ، بیایید عنوان کاربر را هنگام ورود کاربر به سایت ، به یک پیام خوشامدگویی شخصی تغییر دهیم. این پیام خوش آمد گویی پابرجا خواهد ماند. اگر کاربر سایت را ترک کند و بعداً برگردد ، ما پیام را با استفاده از Web Storage API ذخیره خواهیم کرد. ما همچنین گزینه ای برای تغییر کاربر و در نتیجه پیام خوش آمد گویی را در اختیارتان قرار می دهیم.

1: در index.html ، خط زیر را دقیقاً قبل از عنصر اضافه کنید:

<button>Change user</button>

2: در main.js ، کد زیر را دقیقاً همانطور که نوشته شده است ، در پایین پرونده قرار دهید. با مراجعه به دکمه جدید و عنوان ، هر متغیر را در داخل ذخیره می کند:

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

3: برای تنظیم تبریک شخصی ، عملکرد زیر را اضافه کنید. این هنوز هیچ کاری نمی کند ، اما این به زودی تغییر خواهد کرد.

function setUserName() {
  let myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}

تابع setUserName () حاوی یک تابع prompt () است که کادر محاوره ای مشابه هشدار () را نمایش می دهد. این تابع prompt () بیشتر از هشدار () عمل می کند ، از کاربر می خواهد داده را وارد کند و پس از کلیک کاربر بر روی متغیر ذخیره می کند. در این حالت ، ما از کاربر می خواهیم نامی را وارد کند. بعد ، کد با API localStorage فراخوانی می شود ، که به ما امکان می دهد داده ها را در مرورگر ذخیره کرده و بعداً بازیابی کنیم. ما از تابع () setItem localStorage برای ایجاد و ذخیره آیتم داده ای به نام ‘name’ استفاده می کنیم ، مقدار آن را روی متغیر myName تنظیم می کنیم که شامل ورودی کاربر برای نام است. در آخر ، متن texting عنوان را به یک رشته اضافه می کنیم ، به علاوه نام تازه ذخیره شده کاربر.

4: بلوک if … else را اضافه کنید (در زیر). ما می توانیم این کد اولیه را فراخوانی کنیم ، زیرا در هنگام بارگیری برنامه ، ساختار آن را ایجاد می کند.

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

این خط اول از این بلوک با استفاده از عملگر نفی (نه منطقی ، نشان داده شده توسط!) برای بررسی وجود داده های نام ، استفاده می کند. در غیر این صورت ، تابع setUserName () برای ایجاد آن اجرا می شود. اگر این مورد وجود داشته باشد (یعنی کاربر در هنگام بازدید قبلی نام کاربری را تنظیم کند) ، ما نام ذخیره شده را با استفاده از getItem بازیابی می کنیم () و متن متن عنوان را به عنوان نام کاربر مانند رشته داخل setUserName تنظیم می کنیم ().

5: این کنترل کننده رویداد onclick (زیر) را روی دکمه قرار دهید. با کلیک بر روی ، setUserName () اجرا می شود. با این کار کاربر می تواند با فشار دادن دکمه نام دیگری وارد کند.

myButton.onclick = function() {
  setUserName();
}

نام کاربری null است؟

وقتی این مثال را اجرا کردید و کادر گفتگویی را دریافت کرد که از شما می خواهد نام کاربری خود را وارد کنید ، دکمه لغو را فشار دهید. در آخر شما باید با عنوانی روبرو شوید که Mozilla جذاب است. این اتفاق می افتد زیرا – وقتی درخواست را لغو می کنید – مقدار به صورت null تنظیم می شود. Null یک مقدار خاص در JavaScript است که به نبود یک مقدار اشاره دارد.

همچنین ، بدون وارد کردن نام ، روی تأیید کلیک کنید. به دلایل کاملاً واضحی باید عنوان خود را با عنوان موزیلا جالب بدانید.

برای جلوگیری از این مشکلات ، می توانید بررسی کنید که کاربر نام خالی وارد نکرده است. عملکرد setUserName () خود را به این روز کنید:

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

در زبان انسانی این بدان معنی است: اگر myName هیچ ارزشی ندارد ، از همان ابتدا setUserName () را دوباره اجرا کنید. اگر مقداری دارد (اگر عبارت بالا درست نیست) ، مقدار را در localStorage ذخیره کنید و آن را به عنوان متن عنوان تنظیم کنید.

نتیجه پایانی

اگر تمام دستورالعمل های این مقاله را دنبال کرده باشید ، باید در آخر صفحه ای ظاهر شوید که چیزی شبیه به تصویر زیر باشد. همچنین می توانید نسخه ما را مشاهده کنید.

خروجی نهایی از کد سایتی که ساختید
خروجی نهایی از شاهکار شما!!!

اگر گیر کردید ، می توانید کار خود را با کد مثال نهایی ما در GitHub مقایسه کنید.

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *