akofaraji.ir

در این بخش قصد داریم با هم آموزش JavaScript ، که برگرفته از سایت خوب روکسو است را با هم پیش ببریم



Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

مقدمه ای بر Javascript

  مقدمه ای بر آموزش جاوا اسکریپت جاوا اسکریپت زبان برنامه نویسی وب و برای تکمیل HTML است، البته در سمت کاربر (Client)!   آیا می دانید سمت کاربر چیست؟ ما در دنیای توسعه دهندگان وب دو قسمت بسیار مهم داریم. تمام دنیای توسعه ی وب عبارت است از برقراری ارتباط و این مسئله از یک نظر می تواند به همان دو قسمت تقسیم بندی شود؛ server side (یا سمتِ سرور) و client side (یا سمت کاربر).   آیا می دانید فرق این دو چیست؟ به طور خلاصه می توان گفت زبان هایی که در دسته ی server side قرار دارند مربوط به سرور هستند و زبان هایی که در دسته ی client side قرار دارند مربوط به سمت کاربر (یعنی مرورگر و کامپیوتر کاربر) هستند. نمود این دسته بندی در دنیای برنامه نویسی به شکل زیر می باشد:   server side vs client side programming languages   سوال: اگر من نخواهم جاوا اسکریپت یاد بگیرم چه؟ پاسخ: این مسئله بستگی به هدف شما دارد. آیا میخواهید front-end developer (به معنی توسعه دهنده ی سمت کاربر) بشوید و یا back-end developer (به معنی توسعه دهنده ی سمت سرور)؟ شما می توانید یکی از این دو مورد را به طور تخصصی انتخاب کنید.     اما باید تذکر بدهم که حتی اگر به مباحث سمت سرور علاقه دارید باید حداقل آشنایی پایه ای با اکثر مباحث ج...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

بارگذاری جاوا اسکریپت در قالب HTML

  این دوره برای افراد مبتدی نیز مناسب است و در آن از پایه شروع کرده و تا پیشرفته جلو خواهیم رفت. اگرچه دانش قبلی به درک مطالب توسط شما کمک میکند اما نیازی به هیچ پیش زمینه ای به جز دانستن پایه ی HTML و CSS نیست.   اولین نکته ای که باید از جلسه ی قبل به خاطر داشته باشید این است که گفتیم جاوا اسکریپت دوست خوب HTML و CSS است و همیشه همراه آن هاست و از همین طریق به صفحات وب پویایی کم نظیری می بخشد. بنابراین جاوا اسکریپت باید کنار HTML و CSS باشد؛ این مطلب یعنی باید یا آن را مستقیما داخل سند HTML بنویسیم و یا آن را مانند فایل های CSS وارد HTML کنیم. برای این کار روش های مختلفی وجود دارد که به بررسی آن ها و توضیح خوبی ها و بدی های هر یک میپردازیم.   نکته ی مهم: تصور نکنید جاوا اسکریپت فقط برای کار با HTML و CSS است. این زبان بسیار قدرتمند بوده و حتی امروزه می توان از آن در سمت سرور و برای پردازش نیز استفاده کرد! از جمله پیاده سازی های موجود در این زمینه، بسیار مشهور Node.js است. برای اطلاعات بیشتر روی این لینک از ویکی‌پدیا کلیک کرده و یا در اینترنت سرچ کنید.     استفاده مستقیم جاوا اسکریپت در HTML   اگر بخواهید به طور مستقیم کد های جاوا اسکریپت خود را در سند HTML بیاورید باید آن ها را بین تگ های ...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

Statement ها و موتور های جاوا اسکریپت

  Statement در جاوا اسکریپت چیست؟   حتما میدانید که یک برنامه ی کامپیوتری لیستی از “دستورات” است که باید توسط کامپیوتر اجرا شوند. حالا در زبان های برنامه نویسی، این دستورات statement نام دارند و بر همین اساس یک برنامه ی جاوا اسکریپت لیستی از statement ها است (یادتان باشد که statement در واقع همان چیزی است که در زبان عامیانه به آن کد میگوییم!    statement های جاوا اسکریپت به معنی کدهای جاوا اسکریپت است، اما برای اینکه ذهن شما این مورد را از یاد نبرد در طول این جلسه فقط از کلمه ی statement استفاده می کنیم و از جلسات بعد از همان کلمه ی خودمانیِ کد!). برنامه های جاوا اسکریپت در HTML توسط مرورگر اجرا می شوند و تمام مروگر ها یک موتور جاوا اسکریپت دارند که با آن statement ها را اجرا می کنند.   آیا از موتور جاوا اسکریپت چیزی می دانید؟ موتور های جاوا اسکریپت در واقع ماشین های مجازی هستند. حتما با خودتان می گویید این چه تعریفی بود که فرقی با نبودنش نداشت! اگر بخواهم به زبان ساده تر بگویم ماشین های مجازی شبیه ساز های نرم افزاری هستند که روی یک سیستم اجرا می شوند. به طور مثال اگر کاربر سیستم مک باشید (کامپیوتر های اپل) احتمالا با ماشین مجازی Parallels آشنا هستید. این ماشین مجازی به شما اجازه میدهد ن...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

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

  نحوه ی اجرای statement ها در جاوا اسکریپت   statement ها در جاوا اسکریپت تک به تک و به ترتیب نوشته شدنشان اجرا می شوند! این مسئله چه اهمیتی دارد؟ اگر کدی که در قسمت قبل نوشتیم با عبارت “Hello From Roxo” را بعد از تگ <p> بگذاریم مشکلی پیش نمی آید اما اگر قبل از آن بگذاریم چیزی اجرا نمی شود! به مثال های زیر توجه کنید: حالت اول: عبارت “Hello From Roxo” بعد از تگ <p>   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!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 From Roxo"; </script>   </body> </html> حالت دوم: عبارت “Hello From Roxo” قبل از تگ <p>   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body> <script> document.getElementById("demo").innerHTML = "Hello From Roxo"; </script>...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

syntax های کلی جاوا اسکریپت

  با سلام، آیا تا به حال با کلمه ی Syntax برخورد کرده اید؟ این کلمه، کلمه ی بسیار مهمی است؛ چه از نظر معنی خود لغت و چه از نظر معنای عملی آن. بر اساس گفته ی دیکشنری Oxford در حالت کلی معنی این کلمه به شرح زیر است:   THE ARRANGEMENT OF WORDS AND PHRASES TO CREATE WELL-FORMED SENTENCES IN A LANGUAGE.   آرایش و چیدمان کلمات و عبارات برای ساخت جملات صحیح در یک زبان.   این تعریف (با اینکه غلط نیست) اما در بحث ما که برنامه نویسی است، دقیق نمی باشد. در دنیای کامپیوتر ها و برنامه نویسی syntax به صورت زیر تعریف می شود:   THE STRUCTURE OF STATEMENTS IN A COMPUTER LANGUAGE. (OXFORD DICTIONARY) JAVASCRIPT SYNTAX IS THE SET OF RULES, HOW JAVASCRIPT PROGRAMS ARE CONSTRUCTED. (W3SCHOOLS)     به عبارت دیگر در زبان های انسانی “گرامر” یا “دستور زبان” یا “نحو” داریم و در زبان های برنامه نویسی syntax را داریم!     مقادیر در جاوا اسکریپت   جاوا اسکریپت دو نوع از مقادیر را تعریف می کند: مقادیر ثابت (literals) مقادیر متغیر (variables)   ما هر دو نوع از این مقادیر را مورد بحث قرار خواهیم داد.   مقادیر ثابت در جاوا اسکریپت   مهم ترین...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

کامنت ها و متغیرها

      با سلام، در قسمت قبل به طور خلاصه در رابطه با syntax کلی جاوا اسکریپت صحبت کردیم. در این قسمت میخواهیم به طور ریزتری وارد جزئیات برخی از این syntax ها شویم و به نوعی نکات جزئی تر را برای شما توضیح دهیم.   کامنت ها (comments)   می دانید که کامنت ها در واقع خطوطی در سورس کد هستند که اجرا نمی شوند. این خطوط برای اهداف مختلفی استفاده می شوند که به مهم ترین استفاده های آن اشاره می کنیم: توضیح کد: برخی اوقات توسعه دهندگان پس از هفته ها تلاش مشکلی را حل می کنند و برای اینکه یادشان نرود آن را به شکل کامنت کنار کد توضیح می دهند. همچنین می توان برای آموزش به افراد تازه کار از کامنت ها استفاده کرد. اگر دوره ی ما را دنبال کرده باشید متوجه می شوید که من زیاد از آن استفاده میکنم. کار تیمی: برخی اوقات شما در یک پروژه ی گروهی کار خواهید کرد و اگر کمی تجربه در کار گروهی داشته باشید می دانید که خواندن کد دیگر توسعه دهندگان عذاب بزرگی است! در حدی که شوخی هایی مثل تصویر زیر بین توسعه دهنده ها دست به دست می شود!   انواع سر درد!   به همین دلیل در کار های گروهی کامنت گذاری می کنند تا اگر توسعه دهنده ی دیگری قسمتی از کار را بر عهده گرفت، وقت خود را روی خواندن کد شما نگذارد.   غیر فعال کردن موقت کد اجرایی:&nb...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
16 آذر 1403

Arithmetic operators

        اپراتور های محاسباتی (Arithmetic operators)   جدول زیر اپراتور های محاسباتی (رشته ی حساب در ریاضیات) در جاوا اسکریپت را به شما نشان می دهد:   علامت نام علامت و کارکرد مثال + مثبت – جمع بستن var x = 100 + 50; – منفی – تفریق کردن var x = 100 - 50; * ستاره – ضرب کردن var x = (100 + 50) * a; ** دو ستاره – به توان رساندن(1) var z = x ** 2;(2) / اسلش – تقسیم کردن var z = x / y; % درصد – باقیمانده تقسیم(3) var z = x % y; ++ دو مثبت – اضافه کردن یک واحد x++; — دو منفی – کم کردن یک واحد x--;   نکات جدول:   1- اپراتور مربوط به “به توان رساندن” فقط در ECMAScript 6 به بعد پشتیبانی می شود که آخرین استاندارد کد نویسی جاوا اسکریپت است و در سال 2015 ارائه شد. ما نیز در طول این دوره بر همین پایه کد نویسی می کنیم.   2- برای برخی از این اپراتور ها، توابع از پیش تعریف شده نیز وجود دارد. به طور مثال برای رساندن به توان خاص می توان از تابع (Math.pow(x,y استفاده کرد:   1 2 3 4 5 6 7 8 9 10 11 12 13 1...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

Assignment و string

        معرفی اپراتورهای انتساب (Assignment)   جدول زیر اپراتورهای انتساب را با مثال به شما نشان می دهد:   اپراتور مثال کد همانند1 = x = y x = y += x += y x = x + y -= x -= y x = x – y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y   1- توضیح کد همانند: اپراتورهایی که می بینید ممکن است برای شما آشنا نباشد و یا مفهوم آن را درک نکنید. کد همانند، معادل اپراتور را به صورت یک کد ساده برای شما می نویسد تا متوجه مفهوم اپراتور بشوید. به طور مثال عبارت x /= y شاید در نگاه اول برای شما گنگ باشد اما زمانی که به x = x / y نگاه کنید به مفهوم آن پی می برید، یعنی X را بر Y تقسیم کن.   اگر متوجه کد نمی شوید باید قسمت قبلی را مطالعه کنید.   احتمالا برایتان سوال پیش آمده است که آیا حتما باید از این اپراتور ها استفاده کنیم؟ خیر، اجباری در استفاده از آن ها نیست و شما می توانید از همان “کد همانند” در پروژه های خود استفاده کنید. در واقع اپراتورهایی که می بینید کار انتساب را ساده تر می کنند و به نوعی صورت خلاصه شده ی کد همانند هستند.   سوال: من اپراتورهایی شبیه به =** نیز دیده ام. چرا آن ها را در جدول ...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

اپراتورهای مقایسه ای و منطقی

        اپراتورهای مقایسه ای (Comparison)   همانطور که از نام اپراتورهای مقایسه ای مشخص است، از آنها برای مقایسه بین متغیر ها، داده ها و … استفاده می شود. جدول زیر شما را با این اپراتورها آشنا می کند:   اپراتور معنا / توضیحات == مقدار مساوی === مقدار و نوع مساوی != نا مساوی !== مقدارِ نا مساوی یا نوعِ نا مساوی < بیشتر از > کمتر از >= بیشتر از یا مساوی با <= کمتر از یا مساوی با ? اپراتور تِرنِری   برای آشنایی با استفاده ی عملی از این اپراتورها به مثال زیر نگاه کنید. در این مثال من 9 مقایسه ی مختلف برای شما نوشته ام و توضیحاتی را نیز برای برخی از آن ها ارائه می کنم:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html> <body>   <h2>JavaScript Comparison</h2>   <p>Assign 5 to x, and compare the different values:</p>   <p id="demo1">5 == 8 --> </p>   <p id="demo2"&g...

ادامه مطلب
Generic plajavascriptolder image
ئاکو فرجی
18 آذر 1403

انواع داده ها (data types) : رشته ها

        با سلام، مبحث امروز ما data types یا انواع داده ها است. متغیر های جاوا اسکریپت می توانند انواع مختلفی از داده را در خود ذخیره کنند، مثل اعداد، رشته ها، اشیاء و غیره:     1 2 3 var length = 16;                               // داده از نوع عدد var lastName = "Johnson";                      // داده از نوع رشته var x = {firstName:"John", lastName:"Doe"};    // داده از نوع شیء     مفهوم d‎ata type ها   در زبان های برنامه نویسی، مبحث  data type بسیار مهم است. چرا؟ ما برای اینکه بتوانیم با متغیر ها کار کنیم باید از نوع آن ها هم چیز هایی بدانیم. بدون مبحث انواع داده کامپیوتر چطور می خواهد کد زیر را حل کند؟   1 var x = 16 + "Volvo";   آیا جمع زدن کلمه ی volvo با عدد 16 اصلا معنی می دهد؟ آیا این کار منطقی است؟ مطمئنا جواب شما هم ...

ادامه مطلب