راهنمای قدم به قدم شروع برنامه نویسی « فرانت‌اند »

راهنمای قدم به قدم شروع برنامه نویسی « فرانت‌اند »

مفهوم اموجی‌های منابع:📃️ : مقاله📰️ : اطلاعات عمومی📼️ : ویدیو🏊️ : زمین بازی ( Playground )📖️ : کتاب📚️ : کتاب‌های چند جلدی📄️ : صفحه/هایی از کتاب، قسمت/هایی از مقالهاز آنجایی که مغز متفکر کامپیوتر در واقع خود ما هستیم، باید در ابتدا اجزای تشکیل دهنده این ربات را به خوبی بشناسیم و درک کنیم، تا با کسب توانایی با آن صحبت کنیم و دستورات خود را دیکته کنیمدو عضو این بدن حیات کامپیوتر را شکل می‌دهندCPU ( Central Processor Unit )RAM ( Random Access Memory )درک نحوه عملکرد این دو قطعه سرعت یادگیری برنامه‌نویسی را به شکل چشم‌گیری افزایش می‌دهددر ساده‌ترین حالت برای شروع توسعه یک نرم‌افزار تحت وب فرانت‌اند، به یک ویرایشگر متن برای تعریف برنامه و یک مرورگر برای اجرای آن نیاز داریماولین فایلی که از برنامه ما در مرورگر اجرا می‌شود یک فایل HTML است این تکنولوژی یک زبان نشانه‌گذاری ابر متن را تعریف می‌کند این زبان طرح رابط کاربری را ترسیم می‌کند واطلاعات و منابع برنامه ما را به مرورگر می‌دهدTagsBlock Tagshtmlheadtitlestylebodya, div, p, ul, li, ol, form, input, button, scriptInline Tagsimg, br, hrAttributeshref, src, name, class, idما برای زیبایی بخشیدن به رابط کاربری نیاز به تکنولوژی دیگری برای تعریف استایل خود داریم این زبان می‌تواند رنگ، شکل، ابعاد، مکان و فونت را تعیین کند و حتی هوشمندتر توانایی عکس‌العمل در برابر موس و کیبورد را دارد همچنین می‌تواند انیمیشن‌های ساده را اجرا کند و در دستگاه‌هایی با ابعاد مختلف، متفاوت عمل کندSelectorTag NameClassIdPropertycolor, backgroundwidth, heightfont-sizemargin, padding, borderopacityposition, top, bottom, left, rightValueColorsBy Name ( transparent, white, orange, … )HEX ( #000, #dedede, … )RGB ( rgb(0, 0, 0), rgb(255, 255, 255)UnitsAbsolute Lengthspx, pt, cm, mm, inRelative Lengthsem, ex, ch, rem, vw, vh, %برای جلوگیری از سردرگمی با در کنار هم قرار دادن انتخابگرها و مقدارهای مختلف در CSS و HTML، یک چارچوب آماده انتخاب می‌کنیم تا برای شروع برنامه‌نویسی و اضافه کردن منطق و رفتار به برنامه خود آماده شویمبعد از آن‌که با سیستم ترسیم رابط کاربری مرورگر آشنا شدیم و توانستیم با ابزارهای آماده، صفحات ساده را به‌وجود بیاوریم نوبت آن‌ است که به این صفحات جان ببخشیمتکنولوژی بعدی که برای این منظور طراحی و پیاده‌سازی شده، جاوااسکریپت استجاوااسکریپت یک زبان برنامه‌نویسی تفسیر شونده سبک است، این زبان برای سال‌ها در مرورگرها استفاده شده و تنها زبان در دسترس بوده ( برای زبان‌های دیگر درباره WebAssembly بخوانید )امروزه جاوااسکریپت در خارج از مرورگر و در محیط‌های متفاوت دیگری مانند Node.js هم استفاده می‌شود، تعدادی از برنامه‌های کاربردی نوشته شده با این تکنولوژی را در این آدرس ببینید: Electron Apps | ElectronLet’s start from the beginning.A program, often referred to as source code or just code, is a set of special instructions to tell the computer what tasks to perform. Usually code is saved in a text file, although with JavaScript you can also type code directly into a developer console in a browser, which we’ll cover shortly.The rules for valid format and combinations of instructions is called a computer language, sometimes referred to as its syntax, much the same as English tells you how to spell words and how to create valid sentences using words and punctuation.You Don't Know JS: Up & Going, Chapter 1: Into Programming, Codeاز آنجایی که زبان برنامه‌نویسی، از زبان انگلیسی الهام گرفته شده بهترین نقطه برای شروع یادگیری گرامر زبان برنامه‌نویسی است، همانطور که در انگلیسی ما با حروف، کلمات و نشانه‌ها جملات معناداری خلق می‌کنیم، باید با حروف، کلمات و نشانه‌های این زبان جدید آشنا شویم و در ابتدا چند جمله ساده خلق کنیمStatementsExpressionsLiteral ValueVariableArithmeticAssignmentتبریک! شما اولین برنامهٔ خود را نوشتید ما یاد گرفتیم که با حروف و کلمات ساده، جملات ساده خلق کنیم و این اطلاعات را با استفاده از متغیر در حافظه RAM ذخیره کنیم حال بیایید اولین گفت‌وگو با کاربر را در برنامه خود انجام دهیمOutputconsole.logalertInputconfirmprompt📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Executing a Program📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Try It Yourself📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Output📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Input📄️ Interaction: alert, prompt, confirm📄️📼️ JavaScript Output📄️ console.log() – Web APIs | MDN📄️ Window.alert() – Web APIs | MDN📄️ Window.prompt() – Web APIs | MDN📄️ Window.confirm() – Web APIs | MDNما تا به این لحظه با عملگرها، مقدارها و متغیرها آشنا شدیم، اما برای نوشتن برنامه‌هایی پیچیده‌تر به دایره واژگان گسترده‌تری نیاز داریم پس بیاید عمیق‌تر شویم و با انواع آن‌ها آشنا شویمOperatorsValues & TypesConverting Between TypesbooleanstringnumberarrayobjectCode CommentsVariables📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Operators📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Values & Types📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Converting Between Types📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Code Comments📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Variables📄️ Values, Types, and Operators :: Eloquent JavaScript📄️ مقدارها, انواع داده, و عملگرها :: Eloquent JavaScript📼️ Data Types – Beau teaches JavaScript – YouTube📼️ Numbers – Beau teaches JavaScript – YouTube📼️ String Basics – Beau teaches JavaScript – YouTube📄️ Storing the information you need — Variables – Learn web development | MDN📄️ Basic math in JavaScript — numbers and operators – Learn web development | MDN📄️ Handling text — strings in JavaScript – Learn web development | MDN📄️🏊️ JavaScript Comments📄️🏊️ JavaScript Data Types📄️🏊️ JavaScript Strings📄️🏊️ JavaScript Numbers📄️🏊️ JavaScript Arrays📄️ Data types📄️ Type Conversions📄️ Operators📄️ Comments📄️ You Don't Know JS: Types & Grammar, Chapter 1: Types📄️ You Don't Know JS: Types & Grammar, Chapter 2: Values📄️ You Don't Know JS: Types & Grammar, Chapter 3: Natives📄️ You Don't Know JS: Types & Grammar, Chapter 4: Coercion📄️ You Don't Know JS: Types & Grammar, Chapter 5: Grammar📄️ Grammar and types – JavaScript | MDNاگر بخواهیم بازی حدس اعداد درست کنیم یا اطلاعاتی را به تفکیک لیست کنیم، چگونه این‌ کار را انجام می‌دهیم؟ عدد وارد شده توسط بازیکن را چگونه با عدد هدف مقایسه می‌کنیم؟ چگونه به ازای هر قطعه از اطلاعات به ترتیب اِلمنت آیتم لیست به‌وجود بیاوریم؟کابرد کروشه در به‌وجود آوردن و یادگیری مفهوم بلاک، انواع اجراهای شرطی و حلقه‌های تکرار مفاهیم مهم بعدی برنامه‌نویسی استBlocksConditionalsifelseswitchLoopswhileforbreak📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Blocks📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Conditionals📄️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Loops📼️ Ternary Operator – Beau teaches JavaScript – YouTube📼️ Switch Statements – Beau teaches JavaScript – YouTube📼️ For Loops – Beau teaches JavaScript – YouTube📼️ While / Do While – Beau teaches JavaScript – YouTube📄️ Conditional operators: if, '?'📄️ Logical operators📄️ Loops: while and for📄️ The "switch" statement📄️🏊️ JavaScript if else and else if📄️🏊️ JavaScript Switch Statement📄️🏊️ JavaScript For Loop📄️🏊️ JavaScript While Loop📄️🏊️ JavaScript Break and Continue📄️ Program Structure, Conditional execution :: Eloquent JavaScript📄️ ساختار برنامه، اجرای شرطی :: Eloquent JavaScript📄️ Program Structure, while and do loops :: Eloquent JavaScript📄️ ساختار برنامه، while و do loops :: Eloquent JavaScript📄️ ساختار برنامه، حلقه‌های for :: Eloquent JavaScript📄️ Program Structure, for loops :: Eloquent JavaScript📄️ Program Structure, Breaking Out of a Loop :: Eloquent JavaScript📄️ ساختار برنامه، شکستن حلقه و خروج از آن :: Eloquent JavaScript📄️ switch – JavaScript | MDN📄️ if…else – JavaScript | MDN📄️ block – JavaScript | MDN📄️ break – JavaScript | MDN📄️ do…while – JavaScript | MDN📄️ for – JavaScript | MDN📄️ while – JavaScript | MDN📄️ Loops and iteration – JavaScript | MDNما تا به اینجا توانستیم با نوشتن دستوراتی مشخص اعمال مختلفی را توسط مرورگر انجام دهیم. حال اگر بخواهیم بخشی از کد را برای قسمت‌های مختلف به روشهای گوناگون و نام‌های مشخص استفاده کنیم، باید از تابع استفاده کنیم تا هر بار چرخ را از اول نسازیم و کد را با چیدمان قابل فهم ساختار ببخشیمFunctionParametersReturn valueFunctions as ValuesScopeNested Scopeاگر تا به اینجای متن و تمام منابع رو مطالعه کردید، پس تبریک میگم شما درک اولیه از برنامه نویسی را به‌دست آوردیدبرای درک عمیق‌تر جاوااسکریپت باید مفاهیم زیر را مطالعه کنیمTruthy, FalsyDynamic TypingvarHoistingClosureModule PatternHigher-Order FunctionsContextPrototypeEvent QueueSynchronousAsynchronousModulesECMAScript Modules ( ES6 )new IdentifierConstructorزمانی که با HTML ظاهر برنامه را ساختار بخشیدیم و دکمه‌ها و عکس‌ها و متن‌ها و … را در چارچوب مناسب قرار دادیم، و سپس با CSS به آن‌ها شکل دادیم و طراحی کردیم، مرورگر پس از کشیدن رابط کاربری تمام اطلاعات و ساختار آن‌ها را در قالب object به موتور جاوااسکریپت می‌دهد که به این آبجکت‌ها DOM API می‌گوینداین رابط‌های برنامه‌نویسی ( API ) خارج از استانداردهای ECMAScript هستند و APIهای محیطی ( Environment ) به حساب می‌آیندتنها با یادگیری متدها و ویژگی‌های این API می‌توانیم از جاوااسکریپت به موتور ترسیم رابط کاربری مرورگر دستور دهیممفاهیم مهمdocument.createElement, HTMLElement.prototypedocument.getElementById, document.getElementsByClassName, document.getElementsByTagNameEventTarget ( addEventListener, removeEventListener )document.title, HTMLElementelement, element.setAttribute(), element.getAttribute()همان‌طور که از چارچوب‌های آماده برای طراحی استفاده می‌کنیم تا ظاهر برنامه‌مان را راحت‌تر بسازیم، از کتابخانه‌های جاوااسکریپت استفاده می‌کنیم تا با شیوه‌های جدیدتر و بهینه‌تری برنامه خود را بنویسیمهرکدام از این کتابخانه‌ها، ابزارها و تکنولوژی‌های متفاوتی را هدف قرار داده‌اندمی‌خواهیم با استفاده از آخرین ویژگی‌های جاوااسکریپت کد بنویسیم، همچنین می‌خواهیم برای کدهایمان مستنداتی بسازیم، یا می‌خواهیم کدمان را تست کنیم و یا حتی آن را فشرده کنیم، اما می‌دانیم که همه مرورگرها در حال حاضر آن را پشتیبانی نمی‌کننداین ابزارها قبل از اجرای اصلی برنامه یک بار اجرا میشوند و کد را تغییر می‌دهند و در مکانی دیگر ذخیره می‌کنند، بنابراین با این ابزارها امکان نوشتن Syntaxهای دیگری مانند TypeScript فراهم می‌شوداگر می‌خواهیم توسعه فرانت‌اند انجام دهیم باید محیط‌‌های این کار را بشناسیممحیط‌های اجرای جاوااسکریپت می‌تواند متفاوت باشد و روی دستگاه‌های متفاوتی قابل اجرا باشداگر به این قسمت از این راهنما رسیدید باید به خودتان تبریک بگویید، حالا شما یک توسعه دهنده فرانت‌اند تازه نفس هستید و می‌توانید هرچه سریع‌تر برای کار یا کارآموزی اقدام کنیدو اگر در این مسیر گم شدید از نقشه راه زیر استفاده کنیداین مطلب برای سرویس « DPS University » نوشته شده که در آینده نزدیک لانچ می‌شوددر زمان انتشار، لینک در همین مطلب اضافه خواهد شدبرای مطلع شدن از نسخه‌های بعدی این راهنما من را دنبال کنید

Author: admin

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

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