https://virgool.ir/feed/@arvinallfa2026-11-12 04:41:59https://files.virgool.ir/upload/users/174458/avatar/YqIDd3.pnghttps://virgool.ir/@arvinallhttps://virgool.ir/@arvinall/راهنمای-قدم-به-قدم-شروع-برنامه-نویسی-فرانت-اند-gwzljnomanmrمفهوم اموجی‌های منابع:?️ : مقاله?️ : اطلاعات عمومی?️ : ویدیو?️ : زمین بازی ( Playground )?️ : کتاب?️ : کتاب‌های چند جلدی?️ : صفحه/هایی از کتاب، قسمت/هایی از مقالهچگونه توسعه « وب فرانت‌اند » را یاد بگیریمدرک مفاهیم پایه‌ای کامپیوتراز آنجایی که مغز متفکر کامپیوتر در واقع خود ما هستیم، باید در ابتدا اجزای تشکیل دهنده این ربات را به خوبی بشناسیم و درک کنیم، تا با کسب توانایی با آن صحبت کنیم و دستورات خود را دیکته کنیمدو عضو این بدن حیات کامپیوتر را شکل می‌دهندCPU ( Central Processor Unit )RAM ( Random Access Memory )درک نحوه عملکرد این دو قطعه سرعت یادگیری برنامه‌نویسی را به شکل چشم‌گیری افزایش می‌دهدمنابع آموزشی?️ Variables And Memory Addresses?️ Random-access memory - Wikipedia?️ Central processing unit - Wikipedia?️ Introduction :: Eloquent JavaScript?️ مقدمه :: Eloquent JavaScriptنصب پیش نیازهادر ساده‌ترین حالت برای شروع توسعه یک نرم‌افزار تحت وب فرانت‌اند، به یک ویرایشگر متن برای تعریف برنامه و یک مرورگر برای اجرای آن نیاز داریمویرایشگر متن ( محیط توسعه )Visual Studio CodeAtomSublime Textمرورگر ( محیط اجرایی )ChromeFirefoxمنابع آموزشی?️ Running Visual Studio Code on Windows?️ Download & install Google Chrome - Computer - Google Chrome Help?️ Installing Atom?️ How to download and install Firefox on Windows | Firefox Help?️ Chrome DevTools | Tools for Web Developers | Google Developers?️ Firefox Developer Tools | MDN?️ Using Chrome Developer Tools: Elements (1/6) - YouTubeHTML ( Hypertext Markup Language )اولین فایلی که از برنامه ما در مرورگر اجرا می‌شود یک فایل HTML است این تکنولوژی یک زبان نشانه‌گذاری ابر متن را تعریف می‌کند این زبان طرح رابط کاربری را ترسیم می‌کند واطلاعات و منابع برنامه ما را به مرورگر می‌دهدمفاهیم مهمTagsBlock Tagshtmlheadtitlestylebodya, div, p, ul, li, ol, form, input, button, scriptInline Tagsimg, br, hrAttributeshref, src, name, class, idمنابع آموزشی?️ Getting started with HTML - Learn web development | MDN?️ Basic HTML and HTML5 | freeCodeCamp.org?️ HTML/CSS/JS Crash Course - YouTube?️ HTML Tutorial?️ HTML For Beginners The Easy Way: Start Learning HTML & CSS Today?️?️ Learn HTML & CSS in 15 minutes?️ HTML - WikipediaCSS ( Cascading Style Sheets )ما برای زیبایی بخشیدن به رابط کاربری نیاز به تکنولوژی دیگری برای تعریف استایل خود داریم این زبان می‌تواند رنگ، شکل، ابعاد، مکان و فونت را تعیین کند و حتی هوشمندتر توانایی عکس‌العمل در برابر موس و کیبورد را دارد همچنین می‌تواند انیمیشن‌های ساده را اجرا کند و در دستگاه‌هایی با ابعاد مختلف، متفاوت عمل کندمفاهیم مهم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, %منابع آموزشی?️ Getting started with CSS - Learn web development | MDN?️ Basic CSS | freeCodeCamp.org?️ Responsive Web Design Principles | freeCodeCamp.org?️ CSS Tutorial?️ Colors Tutorial?️ CSS Units?️ What is CSS - javatpoint?️ Cascading Style Sheets - Wikipedia?️ CSS-Tricks?️ صفحه اصلی - آموزش طراحی وبانتخاب یک چارچوب آمادهبرای جلوگیری از سردرگمی با در کنار هم قرار دادن انتخابگرها و مقدارهای مختلف در CSS و HTML، یک چارچوب آماده انتخاب می‌کنیم تا برای شروع برنامه‌نویسی و اضافه کردن منطق و رفتار به برنامه خود آماده شویمتعدادی از چارچوب‌های آماده محبوبBulma: Free, open source, and modern CSS framework based on FlexboxTailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom DesignsBootstrap · The most popular HTML, CSS, and JS library in the world.Semantic UIDevelop for the Web - Material Designمنابع آموزشی?️ (81) Bootstrap Tutorial for Beginners - 1 - Introduction - YouTube?️ (81) Bootstrap Tutorial - YouTube?️ Bootstrap 4 Tutorial?️ Bootstrap | freeCodeCamp.orgبرنامه نویسیبعد از آن‌که با سیستم ترسیم رابط کاربری مرورگر آشنا شدیم و توانستیم با ابزارهای آماده، صفحات ساده را به‌وجود بیاوریم نوبت آن‌ است که به این صفحات جان ببخشیمتکنولوژی بعدی که برای این منظور طراحی و پیاده‌سازی شده، جاوااسکریپت استجاوااسکریپت یک زبان برنامه‌نویسی تفسیر شونده سبک است، این زبان برای سال‌ها در مرورگرها استفاده شده و تنها زبان در دسترس بوده ( برای زبان‌های دیگر درباره 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منابع آموزشی?️ JavaScript First Steps - Learn web development | MDN?️ You Don't Know JS: Up & Going - 1st Edition?️ You Don't Know JS Yet: Get Started - 2nd Edition?️ جاوااسکریپت شیوا?️ Eloquent JavaScript?️ (81) Javascript Tutorial For Beginners - Free JS Course - Web Development Tutorial - YouTube?️ JavaScript Basics Course - YouTube?️ JavaScript Tutorial?️ Basic JavaScript | freeCodeCamp.org?️ The Modern JavaScript Tutorial?️ جاوا اسکریپت چیست و چه کاربردی دارد؟?️ JavaScript - Wikipediaگرامراز آنجایی که زبان برنامه‌نویسی، از زبان انگلیسی الهام گرفته شده بهترین نقطه برای شروع یادگیری گرامر زبان برنامه‌نویسی است، همانطور که در انگلیسی ما با حروف، کلمات و نشانه‌ها جملات معناداری خلق می‌کنیم، باید با حروف، کلمات و نشانه‌های این زبان جدید آشنا شویم و در ابتدا چند جمله ساده خلق کنیمStatementsExpressionsLiteral ValueVariableArithmeticAssignmentمنابع آموزشی?️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Statements?️ Hello, world!?️ Code structure?️ Variables?️ (81) Variables - Beau teaches JavaScript - YouTube?️ (81) Variables - Beau teaches JavaScript - YouTube?️?️ Learn Basic Storing Values with the Assignment Operator | freeCodeCamp.org?️?️ JavaScript Statements?️?️ JavaScript Syntax?️?️ JavaScript Variables?️?️ JavaScript Assignment?️?️ JavaScript Arithmetic?️?️ Assignment operators - JavaScript | MDN?️?️ var - JavaScript | MDN?️ Program Structure :: Eloquent JavaScript, Expressions and statements?️ ساختار برنامه :: Eloquent JavaScript, عبارت‌ها و دستوراتگفت و گوتبریک! شما اولین برنامهٔ خود را نوشتید ما یاد گرفتیم که با حروف و کلمات ساده، جملات ساده خلق کنیم و این اطلاعات را با استفاده از متغیر در حافظه 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تابع، محدوده ( Function, Scope )ما تا به اینجا توانستیم با نوشتن دستوراتی مشخص اعمال مختلفی را توسط مرورگر انجام دهیم. حال اگر بخواهیم بخشی از کد را برای قسمت‌های مختلف به روشهای گوناگون و نام‌های مشخص استفاده کنیم، باید از تابع استفاده کنیم تا هر بار چرخ را از اول نسازیم و کد را با چیدمان قابل فهم ساختار ببخشیمFunctionParametersReturn valueFunctions as ValuesScopeNested Scopeمنابع آموزشی?️ You Don't Know JS: Up & Going, Chapter 1: Into Programming, Functions?️ You Don't Know JS: Up & Going, Chapter 2: Into JavaScript, Nested Scopes?️ You Don't Know JS: Up & Going, Chapter 2: Into JavaScript, Functions As Values?️ Functions :: Eloquent JavaScript?️ Functions, Bindings and scopes :: Eloquent JavaScript?️ Functions, Nested scope :: Eloquent JavaScript?️ Functions, Functions as values :: Eloquent JavaScript?️ توابع :: Eloquent JavaScript?️ توابع، متغیرها و قلمرو‌ی آن - Scope :: Eloquent JavaScript?️ توابع، استفاده از توابع به عنوان مقدار :: Eloquent JavaScript?️ Functions - Beau teaches JavaScript - YouTube?️ Functions — reusable blocks of code - Learn web development | MDN?️ Build your own function - Learn web development | MDN?️?️ JavaScript Functions?️?️ JavaScript Scope?️ Functions?️ Function expressionsJavaScript ( ECMAScript )اگر تا به اینجای متن و تمام منابع رو مطالعه کردید، پس تبریک میگم شما درک اولیه از برنامه نویسی را به‌دست آوردیدبرای درک عمیق‌تر جاوااسکریپت باید مفاهیم زیر را مطالعه کنیمTruthy, FalsyDynamic TypingvarHoistingClosureModule PatternHigher-Order FunctionsContextPrototypeEvent QueueSynchronousAsynchronousModulesECMAScript Modules ( ES6 )new IdentifierConstructorمنابع آموزشی?️ You Don't Know JS (book series) - 1st Edition?️ up & going?️ scope & closures?️ this & object prototypes?️ types & grammar?️ async & performance?️ es6 & beyond?️ Eloquent JavaScript?️ جاوااسکریپت شیوا?️ JavaScript Basics Course - YouTube?️?️ JavaScript | MDN?️?️ JavaScript Tutorial?️ The Modern JavaScript Tutorialمدل شیء سند ( Document Object Model )زمانی که با 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()منابع آموزشی?️ Introduction to the DOM - Web APIs | MDN?️ Web APIs | MDN?️ DOM tree?️ The Document Object Model :: Eloquent JavaScript?️ DOM یا مدل شیء سند :: Eloquent JavaScript?️ The Document Object Model?️ Document Object Model - Wikipedia?️ What’s the Document Object Model, and why you should know how to use it.?️ What is the DOM? | CSS-Tricks?️ What, exactly, is the DOM?انتخاب کتابخانه مدیریت رابط کاربریهمان‌طور که از چارچوب‌های آماده برای طراحی استفاده می‌کنیم تا ظاهر برنامه‌مان را راحت‌تر بسازیم، از کتابخانه‌های جاوااسکریپت استفاده می‌کنیم تا با شیوه‌های جدیدتر و بهینه‌تری برنامه خود را بنویسیمهرکدام از این کتابخانه‌ها، ابزارها و تکنولوژی‌های متفاوتی را هدف قرار داده‌اندتعدادی از کتابخانه‌های محبوبReactVue.jsAngularمنابع آموزشی?️ Angular vs React vs Vue: Which is the Best Choice for 2019? - By Sophia?️ React vs Angular vs Vue.js: A Complete Comparison Guide?️ (81) Learn Angular - Full Tutorial Course - YouTube?️ Tutorial: Intro to React – React?️?️ AngularJS Tutorial?️?️ React Tutorial?️ Introduction — Vue.js?️ (81) Learn Vue.js - Full Course for Beginners - 2019 - YouTube?️ (81) Learn React JS - Full Course for Beginners - Tutorial 2019 - YouTubeابزارهای ساخت محیطی ( Environment Build Tools )می‌خواهیم با استفاده از آخرین ویژگی‌های جاوااسکریپت کد بنویسیم، همچنین می‌خواهیم برای کدهایمان مستنداتی بسازیم، یا می‌خواهیم کدمان را تست کنیم و یا حتی آن را فشرده کنیم، اما می‌دانیم که همه مرورگرها در حال حاضر آن را پشتیبانی نمی‌کننداین ابزارها قبل از اجرای اصلی برنامه یک بار اجرا میشوند و کد را تغییر می‌دهند و در مکانی دیگر ذخیره می‌کنند، بنابراین با این ابزارها امکان نوشتن Syntaxهای دیگری مانند TypeScript فراهم می‌شودتعدادی از ابزارهای محبوبTask Runners & Module BundlersGulpWebpackParcelYeomanDocumentation SoftwareJSDocDoccoTesting FrameworksMochaJasmineJestLinting SoftwareESLintJSHintFlowPrettierPackage ManagersnpmYarnمنابع آموزشی?️ A Complete Guide to JavaScript Tooling - advancedweb.dev?️ Comparison of Build Tools?️ 36 Essential Tools for JavaScript Developers in 2019?️ JavaScript Build Tools and Automation Systems - By DashMagazineمحیط‌های جاوااسکریپت ( JavaScript Environments )اگر می‌خواهیم توسعه فرانت‌اند انجام دهیم باید محیط‌‌های این کار را بشناسیممحیط‌های اجرای جاوااسکریپت می‌تواند متفاوت باشد و روی دستگاه‌های متفاوتی قابل اجرا باشدتعدادی از محیط‌های محبوبWeb ApplicationsProgressive Web AppsWorkerDesktop ApplicationsElectronBrigJSNodeGuiMobile ApplicationsIonicReact NativeApache CordovaNativeScriptFramework7به یادگیری ادامه دهیداگر به این قسمت از این راهنما رسیدید باید به خودتان تبریک بگویید، حالا شما یک توسعه دهنده فرانت‌اند تازه نفس هستید و می‌توانید هرچه سریع‌تر برای کار یا کارآموزی اقدام کنیدو اگر در این مسیر گم شدید از نقشه راه زیر استفاده کنیداین مطلب برای سرویس « DPS University » نوشته شده که در آینده نزدیک لانچ می‌شوددر زمان انتشار، لینک در همین مطلب اضافه خواهد شدبرای مطلع شدن از نسخه‌های بعدی این راهنما من را دنبال کنیدآروین لادنآروین لادنTue, 02 Feb 2021 00:50:36 +0330