نو آموزان وب
نو آموزان وب
167دنبال کننده
سلام دوستان من مهدی شامحمدی هستم من مدرس و برنامه نویس فرانت اند هستم من توی این کانال به شما کمک میکنم با آموزش دادن برنامه نویسی پیشرفت چشم گیری داشته باشید
لینک کانال آپارات ما : https://www.aparat.com/Noamouzan_web
مشاهده کانال پیام‌رسان
دانلود روبیکا
۹ فروردین
نو آموزان وب
نو آموزان وب
که می‌تواند در جذابیت و زیبایی خروجی نهایی تاثیر مثبتی داشته باشد. همچنین این فریموریک به وضوح و خوانایی رنگ‌ها نیز توجه ویژه‌ای داشته؛ به طوری که افراد با مشکلات بینایی نیز می‌توانند به راحتی از سایت‌های مبتنی بر بوت استرپ استفاده کنند و مشکلی از نظر دیدن رنگ‌ها نداشته باشند!

در مجموع، هدف از این تغییرات، بهبود تجربه کاربری و امکان توسعه سایت‌های جذاب‌تر و قابل استفاده برای همه کاربران است. چیزی که به نظر می‌رسد بوت استرپ در پیاده سازی آن موفق بوده است!

اضافه شدن آیکون‌های جدید با نام Bootstrap Icon
یکی دیگر از تفاوت‌های بوت استرپ 4 و 5 که زیاد به چشم آمد، اضافه شدن دوباره آیکون‌ها در این فریمورک بود. در نسخه سوم بوت استرپ، آیکون‌های متعددی برای استفاده در پروژه‌ها وجود داشت؛ اما این ویژگی در نسخه چهارم این فریمورک به طور کلی حذف شد تا کاربران مجبور به استفاده از آیکون‌های دیگر شوند. اما با معرفی بوت استرپ 5، شاهد اضافه شدن دوباره آیکون‌ها با نام Bootstrap Icons هستیم که بیش از 1300 آیکون متن‌باز و رایگان با فرمت SVG را در اختیار توسعه دهندگان قرار می‌دهد.

علاوه بر این، در استفاده از این آیکون‌ها که دارای ظاهر منحصر به فردی نیز هستند، محدودیتی وجود ندارد؛ بنابراین می‌توانید از آنها در سایر پروژه‌های خود که مبتنی بر بوت استرپ نیستند نیز استفاده کنید!

تغییرات و بهبود در Grid و طرح‌بندی
فرمورک Bootstrap 5 در زمینه گرید و طرح‌بندی صفحات، دارای بهبودها و تغییرات مثبتی است که فرآیند توسعه را راحت‌تر و سریعتر می‌کنند. برای مثال، می‌توانید از کلاس‌های ستون نظیر col-6 برای قرار دادن عرض ستون به مقدار 50% استفاده کنید. علاوه بر این، کلاس‌هایی نظیر position: relative و کامپوننت .media از بوت استرپ حذف شده‌اند.

عدم پشتیبانی از مرورگرهای قدیمی
در مقایسه Bootstrap 4 و 5 یک نکته جالب وجود دارد؛ این فریمورک دیگر از برخی مرورگرها پشتیبانی نمی‌کند. این عدم پشتیبانی برای ارائه خروجی بهتر و بهینه‌تر بدون نیاز به رعایت برخی استانداردهای قدیمی برای نسخه‌های قدیمی برخی مرورگرها اعکال شده است. لیست زیر، این مرورگرها و نسخه‌های آنها که دیگر توسط فریمورک بوت استرپ 5 پشتیبانی نمی‌شوند را نشان می‌دهد.

مرورگر Microsoft Edge Legacy
مرورگر IE نسخه 10 و 11
مرورگر فایرفاکس نسخه 60 و قدیمی‌تر
مرورگر کروم نسخه 60 و قدیمی‌تر
مرورگر سافاری نسخه 10 و قدیمی‌تر (هم در مک و هم در آیفون)
مرورگرهای تلفن‌های دارای اندروید 6 و قدیمی‌تر
تفاوت بوت استرپ 4 و 5

حالا از کدام یک استفاده کنیم؟ بوت استرپ 4 یا 5؟
انتخاب بین بوت استرپ 4 یا 5 به نیازها و شرایط شما بستگی دارد. هر دو نسخه مزایا و معایب خاص خود را دارند و شما باید بسته به نیاز و شرایطی که دارید، از یکی از این دو استفاده کنید.

پیشنهاد ما، استفاده از Bootstrap 5 است؛ زیرا این نسخه 5 مزایای متعددی نسبت به نسخه 4 دارد. این مزایا شامل سرعت بارگذاری بیشتر به دلیل حذف جی کوئری، واکنشگرایی بهتر به واسطه استفاده از واحدهای اندازه گیری Em و Rem، پشتیبانی کامل از زبان فارسی و راست چین، پالت رنگی گسترده‌تر، آیکون‌های جدید و رایگان و همچنین بهبود در Grid و طرح‌بندی صفحات می‌شود. انتخاب نسخه مناسب به نیازها و شرایط شما بستگی دارد، اما بوت استرپ 5 با ارائه این مزایا، انتخابی ایده‌آل برای طراحان و توسعه‌دهندگان وب محسوب می‌شود.

البته این نسخه معایبی هم دارد. برای مثال، از برخی نسخه‌های مرورگها پشتیبانی نمی‌کند و به طور کامل، پشتیبانی از مرورگر Microsoft Edge Legacy که نسخه‌ای قدیمی از مرورگر محبوب Microsoft Edge است را متوقف کرده است. همچنین برای کسانی که می‌خواهند از نسخه 4 به نسخه 5 بوت استرپ مهاجرت کنند، مشکلاتی نظیر تغییر نام کلاس‌های پیش‌فرض و نیاز به یادگیری برخی مباحث جدید وجود دارد.

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

یادگیری بوت استرپ هنوز ارزش دارد؟
با وجود ظهور فریمورک‌های جدید و قدرتمندی نظیر React و Angular، بوت استرپ به عنوان یکی از محبوب‌ترین فریمورک‌های طراحی وب، جایگاه خود را حفظ کرده است. سرعت بارگذاری بیشتر، واکنشگرایی بهتر، پشتیبانی از زبان فارسی و راست چین، پالت رنگی متنوع، آیکون‌های جدید و بهبود در Grid و طرح‌بندی، تنها بخشی از مزایای بوت استرپ 5 هستند. با استفاده از این فریمورک، می‌توانید به سادگی صفحات وب زیبا و ریسپانسیو را به صورت مقیاس پذیر برای پروژه‌های کوچک و متوسط و حتی بزرگ توسعه دهید.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مهدی:
کامپوننت در برنامه نویسی چیست؟ بررسی کامپوننت در تکنولوژی های مختلف
مهدی شامحمدی
1403/01/09
کامپوننت در برنامه نویسی چیست؟
کامپوننت در برنامه نویسی چیست؟ اگر در حوزه برنامه نویسی وب (مخصوصا فرانت اند) فعالیت داشته باشید، قطعا کلمه کامپوننت را شنیده اید و ممکن است برایتان سوال باشد که کامپوننت چیست؟

در این مقاله قصد داریم به سوال “کامپوننت در برنامه نویسی چیست” پاسخ دهیم و مزایا و معایب استفاده از کامپوننت را هنگام توسعه مورد بررسی قرار دهیم.

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

کامپوننت چیست؟
کلمه کامپوننت در لغت به معنی جزء، قسمت و تکه است. کامپوننت (Component) یعنی یک قسمت کوچک از یک شی بزرگ؛ به عنوان مثال یک شهر از یک کشور، یک کامپوننت از آن کشور به شمار می رود.

دقیقا به همین صورت کلمه کامپوننت در برنامه نویسی نیز یعنی قسمت کوچکی از کل پروژه.

به عنوان مثال قسمت Header یا Footer از وب سایت شما یک کامپوننت به شمار می رود. اگر بخواهیم یک مثال بهتر و واضح تر بزنیم، قسمت دوره های وب سایت سبزلرن را در نظر بگیرید:

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

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

یک مثال دیگر این که هر وب سایت را یک پازل و هر سکشن از وب سایت را یک تکه از آن پازل در نظر بگیرید. به این صورت که تکه های پازل کنار هم قرار گرفته و در نهایت پازل نهایی (وب سایت) ساخته می شود.

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

همچنین شما میتوانید در سایت whatis.techtarget نیز در این رابطه مقالاتی مطالعه نمایید .

در قسمت های بعدی با مبحث کامپوننت بیشتر آشنا خواهیم شد.

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

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

به عنوان مثال اگر بخواهیم کامپوننت های صفحه اصلی یک فروشگاه اینترنتی را در نظر بگیریم، می توان به Header، NavBar، Products، PopularProducts، Footer و … اشاره کرد.

به تصویر زیر که از داکیومنت رسمی ری اکت گرفته شده است توجه کنید:

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

همان طور که مشاهده می کنید یکی از ویژگی های ری اکت Component Based بودن آن است که مفهومش بالاتر توضیح داده شد.

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

چرا باید کامپوننت بیس توسعه دهیم؟
کامپوننت در برنامه نویسی چیست؟

اما ممکن است برایتان سوال باشد که چرا باید پروژه خود را به صورت کامپوننت بیس پیش ببریم و استفاده از کامپوننت چه مزیت هایی دارد.

در خیلی از پروژه هایی که تا به حال با Vanilla Js توسعه داده اید در انتهای پروژه با باگ ها و مشکلاتی روبرو شدید و پیدا کردن و فیکس کردن آن به شدت درگیر شده و مدت زمان زیادی را صرف کرده اید.

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

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

مزایای بعدی استفاده از کامپوننت این است که شما می توانید پروژه خودتان را با کنترل بالاتر توسعه دهید و مدیریت بیشتری روی پروژه مورد نظر داشته باشید.

به عنوان مثال فرض کنید بعد از مدت ها از توسعه پروژه قصد دارید فیچری را به پروژه خودتان اضافه کنید. در این صورت به راحتی و در مدت زمان کم می توانید فیچر مورد نظرتان را به پروژه مورد نظر اضافه کنید.

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

به عنوان مثال تصویری از وب سایت سبزلرن که بالاتر مشاهده کردید را در نظر بگیرید. سه دوره متفاوت داریم که می توانیم یک کامپوننت تحت عنوان Course ایجاد کرده و 3 بار از آن استفاده کنیم.

به همین راحتی باعث می شود سورس کد پروژه شما کاهش پیدا کند.

این 3
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مورد فقط چند مورد محدود از مزایای استفاده از کامپوننت است که در این قسمت مورد بررسی قرار دادیم.

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

1 | توسعه و مدیریت بهتر

2 | دیباگینگ راحت تر

3 | پرفورمنس بهتر

4 | تست نویسی راحت تر

و … را دارد.

آموزش جاوا اسکریپت

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

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

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

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

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

مفهوم کامپوننت به وجود آمده است تا بتوانیم حجم سورس کد خود را کاهش داده و کد های کمتری را بنویسیم.

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

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

انواع کامپوننت ها در لایبرری ری اکت
کامپوننت در برنامه نویسی چیست؟

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

قبل از این که مطالعه این قسمت را ادامه دهید خدمتتان عرض کنم که کار با کامپوننت های ری اکت نیازمند آشنایی با مبحث class و function در جاوا اسکریپت است.

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

کامپوننت کلاسی (Class Based Component)
کامپوننت تابعی (Functional Component)
کامپوننت های Class Base
کامپوننت در برنامه نویسی چیست؟ همان طور که از اسم این دسته از کامپوننت ها مشخص است، به کمک class تعریف می شوند.

برای استفاده از یک کامپوننت کلاسی ابتدا یک class تعریف می کنیم و سپس داخل آن سازنده و متد های لازم را پیاده سازی می کنیم. همان طور که می دانید هر class یک متد کانستراکتور (سازنده) دارد که اولین متدی است که هنگام استفاده از کلاس فراخوانی می شود.

اما قبل از تعریف کلاس مورد نظر باید این نکته را بدانید که کامپوننت های کلاسی ری اکت از یک کلاس دیگر به اسم Component Class ارث بری می کند. پس برای همین منظور قبل از تعریف کامپوننت مورد نظر، کلاس Component را از ماژول react در صفحه مورد نظر import می کنیم.

کد زیر یک کامپوننت کلاسی است که فعلا فقط یک سازنده دارد:

import React, { Component } from 'react'

class Test extends Component {
constructor () {

}
}

export default Test
همان طور که در کد های بالا مشاهده می کنید یک کامپوننت کلاسی ایجاد کردیم که از کلاس Component ارث بری می کند و یک کانستراکتور نیز دارد.

همان طور که بالاتر گفته شد، هر کامپوننت کد های قسمتی از وب سایت ها شامل می شوند و این را می دانیم که ظاهر و template کلی وب سایت به کمک Html و Css پیاده سازی می شود.

با این توصیفات ممکن است برایتان سوال باشد که در کدام قسمت از کامپوننت های کلاسی کد های Html را پیاده سازی می کنیم.

در کامپوننت های کلاسی متدی به اسم render وجود دارد که کد های Html آن کامپوننت را return می کند. البته در توسعه وب سایت با لایبرری ری اکت دیگر خبری از Html نیست و کد های ما به صورت JSX نوشته می شوند.

در مقاله های قبلی به طور مفصل در مورد JSX صحبت کردیم و دز این مقاله قصد ندارم توضیح زیادی ارائه دهم اما در این حد بدانید که JSX مخفف Java Script Xml می باشد و به این معنی است که ما کدهای Html را به صورت xlm داخل صفحات جاوا اسکریپت پیاده سازی می کنیم.

برای درک بهتر به کد های زیر توجه کنید:

import React, { Component } from 'react'

class Test extends Component {
constructor () {

}

render () {
return
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
(
<div>SabzLearn.ir</div>
)
}
}

export default Test
همان طور که مشاهده می کنید یک متد به اسم render پیاده سازی کردیم و کدهای Html مورد نیاز با داخل آن return کردیم.

اما در انتهای کد ها کدی تحت عنوان export default نوشته است که ممکن است کاربرد آن برای شما سوال باشد.

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

کلمه export در لغت به معنی صادر کردن و کلمه import به معنی وارد کردن است. کامپوننت نوشته شده را export می کنیم تا در صفحات مورد نیاز آن را import کرده و از آن استفاده کنیم.

پس در این قسمت مفهوم export و import را نیز متوجه شدید.

کامپوننت های Functional
همان طور که از اسم این دسته از کامپوننت ها مشخص است، به کمک یک فانکشن (تابع) تعریف می شوند. شما برای پیاده سازی یک فانکشنال کامپوننت می توانید از انواع مختلف فانکشن ها مثل arrow function، expression component و … استفاده کنید.

همان طور که می دانید در یک فانکشن بر خلاف کلاس ها خبری از کانستراکتور و ارث بری نیست. برای تعریف یک کامپوننت فانکشنال ابتدا یک فانکشن با اسم مورد نظر و دلخواه تعریف می کنیم و سپس داخل آن JSX مورد نیاز را پیاده سازی کرده و سپس آن را برای استفاده در کامپوننت های دیگر export می کنیم.

به کد زیر توجه کنید:

import React from 'react'

const Test = () => {
return (
<div>
SabzLearn.ir
</div>
)
}

export default Test
همان طور که مشاهده می کنید یک فانکشن به صورت Arrow پیاده سازی کرده و داخل آن کد های JSX مورد نیاز را نوشته و در نهایت آن را export می کنیم.

آموزش جاوا اسکریپت

یک نکته خیلی مهم در مورد کامپوننت ها
در مثال هایی که بالاتر زده شد، فقط یک تگ div داشتیم که متنی را نمایش می داد. اما اگر بخواهیم چندین تگ را return کنیم، ری اکت به ما خطایی تحت عنوان “JSX expressions must have one parent element” را نمایش می دهد.

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

به عنوان مثال به تکه کد زیر توجه کنید:

import React from 'react'

const Test = () => {
return (
<div>
SabzLearn.ir
</div>
<div>
Java Script Course
</div>
)
}

export default Test
همان طور که مشاهده می کنید در این کامپوننت دو تگ div را return کرده ایم که اگر همچین پروژه ای را اجرا کنیم، با خطا مواجه خواهیم شد. با توجه به مفهوم خطا که بالاتر گفته شد، شما می توانید فقط و فقط یک المنت را به عنوان والد return کنیم. اگر بخواهیم دو یا چندین تگ div را return کنیم، باید تگ های مورد نیاز را داخل یک والد قرار دهیم تا فقط یک والد return شده و با همچین خطایی مواجه نشیم.

به عنوان مثال به کد زیر توجه کنید:

import React from "react";

const Test = () => {
  return (
    <div>
      <div> SabzLearn.ir </div>
      <div> Java Script </div>
    </div>
  );
};

export default Test;
همان طور که مشاهده می کنید، دو تگ div را داخل یک تگ div به عنوان والد return می کنیم و به همین راحتی مشکل موجود برطرف می شود.

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

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

در قسمت های قبلی به کلماتی مثل export و import اشاره کردیم و متوجه شدیم که به کمک این کلمات کلیدی از کامپوننت های مختلف داخل همدیگر استفاده کنیم.

کامپوننت زیر را که کامپوننت Footer است در نظر بگیرید:

import React from "react";

const Footer = () => {
  return (
    <div>
      <div> This is footer component </div>
    </div>
  );
};

export default Footer;
در کد بالا یک کامپوننت با اسم Footer پیاده سازی کرده و آن را export کرده ایم. فرض کنید در صقحه لاگین وب سایت قصد داریم از آن استفاده کنیم.

به کد های زیر توجه کنید:

import React from 'react'
import Footer from './components/Footer'

const Login = () => {
return (
<div>
<h1>اینجا صفحه لاگین می باشد</h1>
<Footer />
</div>
)
}

export default Login
همان طور که در کدهای بالا مشاهده می کنید، ابتدا کامپوننت Footer را import کرده و بعد از پیاده سازی کد های مربوط به فرم لاگین (اینجا به یک h1 بسنده کردیم) از کامپوننت Footer استفاده کرده ایم.

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

کامپوننت در برنامه
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
نویسی چیست و از کدام نوع کامپوننت استفاده کنیم؟
بنا به پیشنهاد داکیومنت رسمی ری اکت بهتر است که عمدتا از کامپوننت های فانکشنال استفاده کنیم.

به عنوان مثال فرض کنید قصد داریم پیغام Hello World را در یک تگ h1 نمایش دهیم. اگر بخواهیم این پیغام را به کمک فانکشنال کامپوننت پیاده سازی کنیم به صورت زیر خواهد بود:

const App = props => <div>Hello World</div>
همان طور که مشاهده می کنید توانستیم پیغام مورد نظر را در یک خط به کمک کامپوننت فانکشنال نمایش دهید.

حالا نوبت کامپوننت های کلاسی است. اگر بخواهیم پیغام Hello World را به کمک کامپوننت های کلاسی نمایش دهید به صورت زیر خواهد بود:

class App extends React.Component {
    render () {
        return (
            <div>Hello World</div>
        )
    }
}
بله. تا همین قسمت قطعا متوجه شده اید که کامپوننت های فانکشنال بهینه تر از کامپوننت های کلاسی هستند.

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

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

کد زیر همان کد بالا برای کامپوننت فانکشنال است که توسط Babel ترجمه شده است:

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

و اما در ادامه به به خروجی کد کامپوننت کلاسی برای Hello World که توسط Babel توجمه شده است می پردازیم:

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

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

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

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

آیا مفهوم کامپوننت فقط در ری اکت مطرح است؟
جواب این سوال منفی است و مفهوم کامپوننت فقط به لایبرری ری اکت محدود نمی شوند. مفهوم و اصطلاح کامپوننت در فریمورک هایی مثل Vue Js و Angular Js نیز مطرح بوده و آن ها هم از کامپوننت استفاده می کنند.

به عنوان مثال تکه کد زیر کد های یک کامپوننت در فریمورک Vue Js است:

Vue.component('custom-input', {
  props: ['value'],
  template:
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
 
})
همان طور که در تکه کد بالا مشاهده می کنید یک کامپوننت به اسم custom-input ایجاد کرده ایم که به ازای هر بار استفاده، template مورد نظر را render کرده و روی Dom به کاربر نمایش داده می شود.

مبحث کامپوننت در فریمورک انگیولار نیز به این ترتیب بوده و با اهداف ذکر شده ایجاد شده است.

ایجاد و استفاده راحت تر از کامپوننت ها
کامپوننت در برنامه نویسی چیست؟

اگر شما بخواهید یک کامپوننت کلاسی یا فانکشنال در یک پروژه ری اکتی ایجاد کنید، باید کلمات کلیدی لازم مثل const، export، default و … را به طور دستی تایپ کنید و این کار زمان زیادی از شما خواهد گرفت؛ پس در نتیجه کار بهینه و معقولی نیست.

برای این کار یکی اکستنشن برای کد ادیتور Visual Studio Code وجود دارد به اسم ES7 React/Redux/GraphQL/React-Native snippets (اسمش چه طولانیه :|) که به شما کمک می کند تا با کلمات مخفف  کوتاه، کدهای زیادی را در صفحه مورد نظرتان ایجاد کنید.

به عنوان مثال شما برای ایجاد یک کامپوننت کلاسی از کلمه rcc را نوشته و tab را می زنیم و به این ترتیب کد های لازم برای یک کامپوننت کلاسی ایجاد می شود.

همچنین برای ایجاد یک کامپوننت فانکشنال از کلمه rfc استفاده می شود. جالب است بدانید که rcc مخفف React Class Component بوده و کلمه rfc مخفف React Functional Component می باشد.

شما با نوشتن کلمه rcc کد های زیر برایتان ایجاد می شود:

import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div> $2 </div>
  }
}
و همچنین با کلمه rfc کد های زیر ایجاد می شوند:

import React from 'react'

export default function $1() {
  return <div> $0 </div>
}
این فقط
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
دو مورد از شورتکات های این اکستنشن هستند و شورتکات های زیادی نیز در اختیارتان قرار می دهد تا شما بتوانید سرعت توسعه بالایی داشته و در مدت زمان شما صرفه جویی شود.

اگر شما از ادیتور VsCode برای کد نویسی استفاده می کنید، می توانید این اکستنشن را از این لینک دریافت و نصب کنید.

سخن پایانی
کامپوننت در برنامه نویسی چیست؟ مبحث کامپوننت یکی از مهم ترین و پر استفاده ترین مباحث برنامه نویسی {فرانت اند} است که شما باید با آن آشنایی کاملی داشته باشید.

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

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

اما اگر قصد یادگیری ری اکت را دارید، یکی از مهم ترین پیش نیاز های آن یادگیری زبان جاوا اسکریپت است. یعنی شما برای شروع یادگیری ری اکت، ابتدا باید زبان جاوا اسکریپت را به خوبی یاد گرفته و پروژه های مختلفی را با آن پیاده سازی کنید تا کاملا مسلط شوید.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مهدی:
فرق سنیور و جونیور چیست؟ + سطح بندی در حوزه برنامه نویسی
مهدی شامحمدی
1403/01/09
فرق سنیور و جونیور چیست؟
فرق سنیور و جونیور چیست ؟ اگر شما در حوزه های مرتبط با برنامه نویسی فعالیت داشته باشید، قطعا کلماتی مثل سنیور و جونیور را شنیده و در آگهی های استخدامی این حوزه مشاهده کرده اید.

قبلا در مدارس مختلف دانش آموزان را با نمره هایی بین 0 تا 20 مورد سنجش قرار می دادند اما آن نمرات امروزه با نمرات توصیفی مثل خوب، خیلی خوب، عالی، نیاز به تلاش و … جایگزین شده اند. امروزه به کمک همین نمرات توصیفی دانش آموزان را دسته بندی کرده و از این دسته بندی در انتخاب رشته آن ها استفاده می کنند.

همین دسته بندی و سطح بندی در حوزه برنامه نویسی نیز وجود دارد که به کمک کلماتی مثل سنیور، جونیور و … تعیین می شوند.

زمانی که یک شرکت در پلتفرم های مختلف آگهی استخدامی منتشر می کند، بنا به نیاز خود یکی از این کلمات را در آگهی خود ذکر می کنند.

در این مقاله قصد داریم که در مورد سطح بندی های برنامه نویسی و تعیین سطح در این حوزه صحبت کنیم تا شما هنگام ورود به بازار کار بتوانید سطح خود را تشخیص داده و سردرگم نشوید.

اموزش پایتون

چند سطح در حوزه برنامه نویسی وجود دارد؟
فرق سنیور و جونیور چیست ؟اکثر افراد در مورد سطح بندی برنامه نویس ها فقط کلمات جونیور، میدلول و سنیور را می شناسند و سطح کارآموزی را جزو سطح بندی به حساب نمی آورند.

در حالی که به صورت کلی در حوزه برنامه نویسی چهار سطح داریم که به ترتیب از مبتدی به حرفه ای کارآموز، جونیور، میدلول و سنیور هستند.

اگر بخواهیم مفهوم هر کدام از این چهار سطح را به طور مختصر بیان کنیم:

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

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

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

علاوه بر این یکی از سوالات برنامه نویسان در این سطح این است که “چه زبانی بازار کار خوبی دارد؟”، “چه زبان را یاد بگیرم؟”، “در چه مدت زمانی می توانم یاد بگیرم؟” و … .

پس اگر شما همچین سوالاتی ذهنتان را مشغول کرده است، در سطح کارآموز قرار دارید.

یکی از سوالاتی که ذهن افراد تازه وارد به این حوزه را به خود مشغول می کند این است که برای کارآموزی حتما باید به شرکت های برنامه نویسی مراجعه کنیم یا راهکار دیگری موجود است.

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

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

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

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

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

آگهی زیر از وب سایت جابینجا می باشد:

فرق سنیور و جونیور چیست

همان طور که مشاهده می کنید، عنوان این آگهی “کارآموز Node Js” است. اگر به قسمت مهارت های مور نیاز این آگهی مراجعه کنیم، سورپرایز خواهید شد.

تصویر زیر
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مهارت مورد نیاز همین آگهی استخدام کارآموز است:

فرق سنیور و جونیور چیست

بله! همان طور که مشاهده می کنید، از نظر این شرکت یک کاراموز Noe Js باید با فریمورک Express و Socket و لایبرری های Node کار کرده باشد و همچنین بنا به مورد 5 باید دانش کاملی از دیتابیس های MySql و Mongo داشته باشند!!
مگر یک کارآموز به دنبال یادگیری نیست؟ مگر یک کارآموز در سطح تقریبا صفر قرار ندارد؟ پس این همه مهارت برای یک کارآموز قطعا اشتباه بوده و هدفشان از جذب کارآموز آموزش دادن نیست.

متاسفانه خیلی از شرکت های داخلی از اسم کارآموز سو استفاده کرده و افرادی که مهارت و نمونه کار هایی دارند را با اسم کارآموز جذب می کنند و مدت زیادی در شرکت از مهارت آن ها سو استفاده می شود.

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

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

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

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

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

اموزش پایتون

مدت زمان مطرح نیست!
به جرئت می توان گفت یکی از سوالاتی که توسط افراد تازه وارد به این حوزه پرسیده می شود این است که “در مدت چند ماه یا چند سال می توان به فلان سطح رسید؟” یا “در چه مدت زمانی می توانم وارد بازار کار برنامه نویسی شوم؟”.

اگر این سوالات ذهن شما را هم درگیر کرده اند، جالب است بدانید که مدت زمان در حوزه برنامه نویسی به هیچ وجه مطرح نیست. ممکن است یک شخص یکی از تکنولوژی های این حوزه مثل ری اکت، جاوا اسکریپت، پایتون و … را در مدت زمان 6 ماه در حد خیلی خوب و قابل قبول برای بازار کار یاد بگیرد اما شخص دیگر همان تکنولوژی را در مدت زمان 10 ماه هم نتواند در سطح قابل قبول یاد بگیرد!

پس در نتیجه به هیچ وجه نمی توان در مورد مدت زمان یادگیری برنامه نویسی توسط یک شخص اظهار نظر کرد و هیچ مدت زمان ثابتی در این زمینه وجود ندارد.

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

برای حدس مدت زمان یادگیری یک شخص باید تمام این پارامتر ها تعیین شوند و بدون تعیین همچین پارامتر هایی به هیچ وجه نمی توان در مورد مدت زمان یادگیری صحبتی کرد.

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

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

در ادامه به جزئیات بیشتری در مورد از سطح ها خواهیم پرداخت.

چه برنامه نویسی جونیور است؟
فرق سنیور و جونیور چیست بالاتر در مورد یک برنامه نویس جونیور صحبت کردیم و اطلاعات کلی در مورد آن به دست آوردیم.

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

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

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

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

موضوع بعدی این که خطاهایی که یک برنامه نویس
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
و حقوق شما دارد و شما هر اندازه که یک برنامه نویس متخصص و حرفه ای باشید، به همان اندازه می توانید درآمد بالاتری داشته باشید.

اموزش پایتون

تشخیص سطح یک برنامه نویس توسط کد نوشته شده توسط او
فرق سنیور و جونیور چیست ؟حوزه برنامه نویسی شبیه ریاضی یا فیزیک نیست که هر مسئله فقط و فقط یک جواب مطلق و ثابت داشته باشد. به عنوان مثال حاصل محاسبه 2 +2 + 3 برابر است با 7. در همه جای دنیا این موضوع یک امر ثابت است.

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

برای همین منظور از کد یک برنامه نویس نیز می توان سطح او را حدس زده و تشخیص داد. اما این تشخیص سطح توسط یک برنامه نویس مبتدی ممکن نیست و برنامه نویس های میدلول و سنیور می توانند از طریق کد یک برنامه نویس، سطح او را تشخیص دهند.

ممکن است برایتان سوال باشد که چطور می شود با مشاهده کد های یک برنامه نویس سطح او را تشخیص داد!

در حوزه برنامه نویسی یک مبحث بسیار مهمی به اسم Clean Code یا همان کد نویسی مرتب. کد نویسی مرتب یکی از مهم ترین اصول برنامه نویسی است که برنامه نویس های حرفه ای نکات و قواعد آن را رعایت می کنند اما برنامه نویس های مبتدی (کارآموز و جونیور) به اصول کد مرتب توجهی نمی کنند و برای آن ها مهم فقط این است که کدشان کار کند.

اگر بخواهیم کد مرتب را در یک جمله تعریف کنیم، می توان گفت که “کد مرتب کدی است که به راحتی و با یک نگاه به آن بتوان عملکرد آن را متوجه شد.”

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

تجربه و پیشنهاد شخصی + شرکت های ایرانی
فرق سنیور و جونیور چیست ؟ در این قسمت قصد دارم تجربه اندکی که در این حوزه دارم برای شما صحبت کنم. ممکن است مطالبی که در این مقاله گفته شد با مواردی که در شرکت های ایرانی مشاهده کرده اید کمی متفاوت باشد.

شخصا در شرکتی حضور داشتم که اشخاصی به مدت بالای 2 سال به عنوان کارآموز در آن شرکت حضور داشتند و این عمق فاجعه است!

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

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

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

و در آخر پیشنهاد من به شما دوستان عزیز این است که قبل از این که به فکر کار کردن در شرکت های مختلف و ورود به بازار کار باشید، سعی کنید مهارت های لازم در فیلد کاری خود را به بهترین شکل یاد بگیرید و چندین نمونه کار + رزومه خوب و پربار را برای خود آماده کرده و سپس با خیال راحت و با دست پر وارد بازار کار شوید تا در دام برخی از شرکت های ایرانی نیفتید.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مبتدی با آن رو به رو می شوند، اکثرا در حد سینتکس هستند. پس از روی باگ های یک برنامه نویس نیز می توان سطح او را تشخیص داد.

موضوع بعدی این است که سوالاتی که ممکن است برای یک برنامه نویس جونیور پیش بیاید در حد مقایسه تکنولوژی های مختلف است. مثلا ممکن است برای یک برنامه نویس جونیور سوال باشد که لایبرری ری اکت بهتر است یا فریمورک ویو یا مثلا ممکن است سوال باشد که برای ادامه مسیر کدام تکنولوژی را انتخابی کنم.

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

جونیور با جونیور متفاوت است!
یک برنامه نویس جونیور با یک برنامه نویس جونیور دیگر صرفا برابر نبوده و متفاوت هستند.

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

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

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

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

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

همچنین یک برنامه نویس میدلول بر خلاف یک برنامه نویس جونیور علاوه بر خروجی کدی که می نویسند، به خود کد، نحوه نوشتن آن و رعایت استاندارد ها نیز اهمیت می دهد و همچنین از اتفاقاتی که پشت پرده اتفاق می افتند نیز خبر دارد (مثلا نحوه کار کردن جاوا اسکریپت، وب پک، ری اکت و ارتباط آن ها با مرورگر یا Api و …)

پس اگر شما این ویژگی ها را در زمینه فعالیت خود دارید، می توان گفت که در سطح میدلول هستید.

چه برنامه نویسی سنیور است؟
سطح سنیور یک قله ای بلند و راهی بسیار طولانی است. یک برنامه نویس سنیور به مباحث سافت اسکیل (مهارت های نرم)، الگوریتم، ساختمان داده، معماری کامپیوتر، دیزاین پترن ها و … تسلط کافی دارد و می توانید چندین برنامه نویس میدلول را نیز منتور کند.

همچنین یک برنامه نویس سنیور چندین به پارادایم برنامه نویسی مسلط است و می تواند در یک شرکت کل سیستم را مدیریت کرده و مشکلات پیش آمده را برطرف کند.

همان طور که می دانید دو نوع یادگیری سطحی و عمقی وجود دارند. یک برنامه نویس سنیور در حوزه فعالیت خود در تکنولوژی های لازم به طور عمیق مسلط بوده و تجربه کاری بالایی دارد.

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

اگر شما این ویزگی ها را دارید، به شما تبریک می گویم. شما یک برنامه نویس سنیور هستید و می توانید هم با ایران و هم با خارج از کشور به صورت ریموت همکاری کرده و درآمد های بسیار بالایی را داشته باشید.

ثابت نبودن سطح هر برنامه نویس
جالب است بدانید که حتی اگر یک سنیور باشید، به این دلیل نیست که همیشه و در هر تیمی یک سنیور هستید.

ممکن است شما در یک شرکت یا تیم برنامه نویسی سنیور باشید اما در یک تیم یا شرکت دیگر به عنوان برنامه نویس میدلول استخدام شوید.

پس این موضوع را نیز به یاد داشته باشید که نمی توانید همیشه سطح خود را ثابت نگه دارید و به سطح شما به تیم مورد نظر نیز بستگی دارد.فرق سنیور و جونیور چیست؟

سطح چه تاثیری در حقوق برنامه نویس دارد؟
برای جواب دادن به این سوال باید به منابعی که در زمینه بازار کار و فرصت های شغلی فعالیت می کنند مراجعه کنیم.

از همچین وب سایت هایی می توان به جابینجا، جاب ویژن، کوئرا، آی استخدام و … اشاره کرد.

تصویر زیر برای یکی از آگهی های استخدام در زمینه برنامه نویس ری اکت از سایت جابینجا می باشد:

فرق سنیور و جونیور چیست

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

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

پس در این قسمت به این نتیجه می رسیم که میزان مهارت و تخصص شما در حوزه کاری خود رابطه مستقیمی با میزان درآمد
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
مهدی:
وب دیزاینر کیست؟ طراح وب و برنامه نویس چه تفاوتی دارند؟
مهدی شامحمدی
1403/01/09
وب دیزاینر کیست؟
وب دیزاینر کیست؟ اگر شما در حوزه طراحی و برنامه نویسی وب فعالیت داشته باشید، قطعا کلماتی مثل وب دیزاینر، برنامه نویس وب، توسعه دهنده وب، طراح Ui/Ux و … به گوشتان خورده است.این مفاهیم و اصطلاحات چند مورد از مهم ترین مفاهیمی است که در حوزه وب مورد استفاده قرار می گیرند و ممکن است معنی برخی از آن ها را ندانید. در این مقاله قصد داریم معنی و کاربرد هر کدام از مفاهیم ذکر شده و همچنین وظایف هر کدام از آن ها را مورد بررسی قرار دهیم.

مزایای در ارتباط بودن طراح و برنامه نویس وب
وب دیزاینر کیست از آن جایی که یک برنامه نویس وب (فرانت اند کار) نیز در حوزه ظاهر و فرانت اند تجربه هایی دارد و ممکن است اطلاعاتی در زمینه Ui و Ux داشته باشد که یک طراح آن ها را نداند یا در پیاده سازی طرح مورد نظر فراموش کرده باشد.

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

تجربه نشان داده است که در ارتباط بودن طراح گرافیکی و برنامه نویس وب می تواند باعث بهتر شدن قالب و محصول کلی شود. شما همچنین میتوانید در وب سایت targetjobs در رابطه با این موضوع که یک وب دیزاینر واقعی کیست نیز اطلاع نیز کسب کنید .

آموزش جاوا اسکریپت

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

امروزه برای طراحی و گرافیک عمدتا از تکنولوژی هایی مثل Adobe Xd، Adobe Illustrator، Figma و … استفاده می شود و شما با کسب تخصص کافی در هر کدام از آن ها می توانید وارد بازار کار شده و کسب درآمد کنید.

نرم افزار Adobe XD یکی از نرم افزار های شرکت Adobe است که برای طراحی و پیاده سازی Ui و Ux یک محصول مورد استفاده قرار می گیرد. از کاربرد های Adobe XD می توان به طراحی و پیاده سازی طرح اولیه وب سایت ها، اپلیکیشن های موبایل، بنر های مختلف و … اشاره کرد. سبز لرن

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

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

تکنولوژی های ذکر شده فقط چند مورد از مهارت ها و تکنولوژی هایی هستند که یک طراح باید کار با آن ها را بلد باشند و علاوه بر موارد ذکر شده باید مفاهیم و اصطلاحات موجود در مورد Ui و Ux را نیز بلد باشند.

یک برنامه نویس وب باید چه مهارت هایی را داشته باشد؟
در قسمت قبل در مورد مهارت های یک طراح وب صحبت کرده و ابزار ها و مفاهیم مورد نیاز برای یک طراح را مطرح کردیم.

در این قسمت در مورد مهارت های یک برنامه نویس وب صحبت خواهیم کرد.

کلمه “برنامه نویس وب” یک کلمه کلی است که به دو شاخه کلاینت ساید (فرانت اند) و سرور ساید (بک اند) تقسیم می شود که در این مقاله در مورد یک برنامه نویس فرانت اند صحبت خواهیم کرد.

برنامه نویس فرانت اند شخصی است که طرح یک وب سایت را برنامه نویسی کرده و با کد های نوشته شده، ظاهر وب سایت را تشکیل می دهد.

مهارت های اصلی و پایه ای که یک برنامه نویس وب باید بلد باشد، تسلط بر زبان های Html، Css و جاوا اسکریپت است.

متاسفانه یا خوشبختانه حوزه برنامه نویسی وب یکی از حوزه های برنامه نویسی است که گستردگی زیادی نسب به بقیه حوزه های موجود دارد و شما برای فعالیت در این حوزه باید تکنولوژی ها و ابزار های زیادی را بلد باشید.

البته این گستردگی باعث افت کیفیت کار شما و فراموش کردن قواعد هر ابزار نمی شود، چون هر کدام از آن ها به دیگری وابسته است. به عنوان مثال شما در هر وب سایتی که پیاده سازی می کنید، قطعا از زبان های Html، Css و جاوا اسکریپت استفاده می کنید و همین وابستگی بین آن ها باعث می شود هیچگونه فراموش کردن و از یاد بردنی در کار نباشد.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
یک برنامه نویس وب علاوه بر مهارت های اصلی که بالاتر گفته شد، باید به تکنولوژی هایی مثل بوت استرپ، تیلویند، وب پک، NPM، ری اکت و … نیز مسلط باشد و بعد از مسلط شدن به تکنولوژی های ذکر شده به سطح قابل قبول بازار کار رسیده و می

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

در کل یک برنامه نویس فرانت اند بر خلاف یک طراح وب با کد و کد نویسی سر و کار دارد. وب دیزاینر کیست؟

وب دیزاینر کیست و با برنامه نویس وب چه تفاوتی دارد؟
در قسمت های قبل به وضوح با مهارت های طراح و برنامه نویس آشنا شده و همچنین متوجه شدیم که یک طراح با ابزار هایی مثل فیگما، XD و … و یک برنامه نویس فرانت اند با تکنولوژی هایی مثل Html، Css، JavaScript و در کل با کد سر و کار دارد.

فرض کنید که یک شرکت برنامه نویسی قصد دارم یک وب سایتی برای اداره شهرداری پیاده سازی کند.

ابتدا طراح ها و دیزاینر های شرکت طرح های لازم برای وب سایت را با ابزار هایی مثل فیگما و XD پیاده سازی می کنند.

سپس طرح هایی که توسط دیزاینر ها طراحی شدند، در اختیار برنامه نویس های شرکت قرار می گیرند و برنامه نویس ها طرح های موجود را کد نویسی می کنند.

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

این نکته را نیز مد نظر داشته باشید که پیاده سازی یک اپلیکیشن موبایل نیز همین روند را طی می کند. ابتدا شخص دیزاینر طرح های لازم را طراحی می کند و سپس آن ها را در اختیار برنامه نویس موبایل قرار می دهد تا آن ها را کد نویسی کرده و اپلیکیشن نهایی آماده عرضه شود. وب دیزاینر کیست؟

آموزش جاوا اسکریپت

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

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

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

مخصوصا امروزه با وجود کرونا تمام مدارس و دانشگاه های کشور به صورت مجازی به کار خود ادامه دادند.

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

در ادامه همین مقاله در مورد درآمد های طراح و برنامه نویس وب نیز صحبت خواهیم کرد.

شغل طراحی و برنامه نویسی سایت برای چه کسانی مناسب است؟
وب دیزاینر کیست؟

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

علاوه بر مهارت های نرمی که بالاتر ذکر شد، یک برنامه نویس باید ذهن تحلیل گر و محاسباتی داشته باشند. احتمالا شنیده اید که یکی از پیش نیاز های برنامه نویسی بلد بودن علم ریاضی است.

منظور از این جمله این نیست که ما در پروژه های برنامه نویسی حتما از انتگرال، مشتق، حد و … مباحث پیشرفته ریاضی استفاده می کنیم؛ بلکه منظور این است قوه حل مسئله ای که ریاضی به ما می دهد، در حوزه برنامه نویسی به ما کمک می کند تا بتوانیم محاسبات لازم را سریع تر و با استفاده از بهینه ترین روش انجام دهیم.

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

بعد از مهارت ذهن تحلیل گر شما باید به آپدیت و به روز بودن علاقه داشته باشید. برنامه نویسی مثل بقیه حوزه های شغلی نیست که شما فقط یک بار طی مدت زمان تعیین شده ای مباحثی را یاد بگیرید و با همان اطلاعاتی که دارید تا آخر عمرتان به کسب درآمد بپردازید.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
علت این موضوع این است که امروزه تعداد تکنولوژی ها و ابزار هایی که در حوزه برنامه نویسی وجود دارند بسیار زیاد هستند و طی مدتی ممکن است یکی از آن ها منسوخ شده و تکنولوژی جدیدی جای آن را بگیرد. در همچین حالتی اگر یک برنامه نویس نتواند خود را با تکنولوژی جدید وفق دهد و با آن همراه شود، به هیچ وجه نمی تواند در بازار کار دوام بیاورد.

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

مهم تر از این موارد شما باید به حوزه برنامه نویسی علاقه داشته

باشید. علاقه مهم ترین شرط شما برای ورود به حوزه برنامه نویسی است. چون اگر به تکنولوژی و کار هایی که توسط برنامه نویسی انجام می شود علاقه داشته باشید، مهارت های قبلی در بلند مدت در شما تقویت می شوند.

به اندازه کافی در مورد ویژگی های یک برنامه نویس وب صحبت کردیم و در ادامه همین قسمت در مورد ویژگی های یک طراح وب صحبت خواهیم کرد.

کلمه طراح و طراحی در کلمه خلاقیت خلاصه می شوند. شما برای ورود به حوزه طراحی وب باید ذهن خلاقی داشته و اهل خلاقیت باشید.

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

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

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

تقریبا تنها تفاوتی که بین ویژگی های یک برنامه نویس و طراح وجود دارد این است که شما برای ورود به حوزه طراحی وب نیازی به قوه حل مسئله و ذهن تحلیل گر ندارید.

درآمد یک برنامه نویس وب چقدر است؟
کلمه برنامه نویس وب برای دو قسمت فرانت اند (کلاینت) و بک اند (سرور) مورد استفاده قرار می گیرد اما از آن جایی که این مقاله با مفهوم ظاهر و طراحی در ارتباط است، منظور از برنامه نویس وب در این قسمت همان برنامه نویس فرانت اند است.

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

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

برای بررسی بازار کار برنامه نویسی فرانت اند باید یک سر به منابعی بزنیم که در حوزه آگهی های شغلی و استخدامی فعالیت می کنند. از وب سایت هایی که در این زمینه فعالیت می کنند می توان به جابینجا، کوئرا، جاب ویژن و … اشاره کرد.

تصویر زیر یک آگهی شغلی برای کتابخانه ری اکت از وب سایت جابینجا می باشد:

وب دیزاینر کیست؟

همان طور که در تصویر بالا مشاهده می کنید، اگر شما یک ری اکت کار باشید می توانید حداقل 9 میلیون تومان حقوق ثابت در یک شرکت برنامه نویسی داشته باشید.

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

به عنوان مثال آگهی زیر را مشاهده کنید:

وب دیزاینر کیست؟

بله. همان طور که مشاهده می کنید شما می توانید با استخدام در همچین شرکتی ماهانه حداقل 20 میلیون تومان حقوق ثابت داشته باشید.

این شرکت بر خلاف فرصت شغلی قبلی به صورت دورکاری نیز با شما همکاری می کند.

تصویر زیر شرایط آگهی استخدامی فوق است:

وب دیزاینر کیست؟

همان طور که بالاتر گفته شد و شما در تصویر بالا مشاهده می کنید، معیار هایی مثل جنسیت، مدرک تحصیلی و … هیچ اهمیتی در درامد شما ندارند.

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

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

درآمد یک طراح وب چقدر است؟
همان طور که در قسمت قبل برای بررسی بازار کار از وب سایت های استخدامی مثل جابینجا استفاده کردیم، برای بررسی بازار کار حوزه طراحی وب نیز از وب سایت جابینجا استفاده می کنیم.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
از اکثر انتظاراتی که شرکت ها از طرحان گرافیک دارند، می توان به Adobe XD، فیگما، ایلوستریتور و مفاهیم Ui و Ux می اشاره کرد.

تصویر زیر یک نمونه از آگهی های طراح گرافیک در وب سایت جابینجا می باشد:

وب دیزاینر کیست؟

همان طور که مشاهده می کنید شما می توانید در شهر تهران بدون نیاز به سابقه کار و فقط با داشتن تخصص و مهارت کافی در حوزه طراحی حقوق 10 میلیون تومان را داشته باشید.

مهارت های مورد نیازی که برای این آگهی ثبت شده اند، فتوشاپ، مفاهیم Ui/Ux و ایلستریتور هستند.

تصویر زیر نیز یک آگهی دیگر از وب سایت جابینجا می

باشد:

وب دیزاینر کیست؟

میزان حقوق شما ببه عنوان طراح در یک شرکت به میزان تخصص و مهارت شما در این حوزه بستگی دارد. طبق آگهی بالا شما بنا به میزان تخصصی که دارید می توانید ماهیانه حقوق 15 میلیون تومان را نیز داشته باشد.

یکی دیگر از ویزگی های بسیار عالی حوزه طراحی بی توجه بودن به معیار هایی مثل جنسیت، سن و … است.

به عنوان مثال تصویر زیر مربوط به آگهی هایی است که بالاتر در مورد آن ها صحبت کردیم:

وب دیزاینر کیست؟

همان طور که مشاهده می کنید، برای فعالیت در بازار کار طراحی معیار هایی مثل جنسیت، سن، مدرک تحصیلی و … به هیچ وجه مهم نبوده و تنها معیاری که مهم است میزان تخصص و سطح مهارت های شما در این حوزه است. وب دیزاینر کیست

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

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

وب دیزاینر کیست؟

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

وب دیزاینر کیست؟

همان طور که مشاهده می کنید، مهارت هایی که این شرکت از شما به عنوان طراح وب انتظار دارد وردپرس و دیتابیس است!!

در قسمت مهارت های مورد نیاز هیچ خبری از مهارت هایی Ui، Ux، فیگما، XD و … نیست.

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

روش های کسب درآمد طراح و برنامه نویس وب
وب دیزاینر کیست؟

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

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

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

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

علاوه بر این ها می توانید از طریق تدریس مهارت های خود در وب سایت های آموزشی مثل سبزلرن، آموزشگاه های حضوری و … به کسب درآمد بپردازید.

آموزش جاوا اسکریپت

سخن پایانی
وب دیزاینر کیست ؟ اصطلاحاتی مثل وب دیزاینر، برنامه نویس وب، طراح Ui و Ux و … چند مورد از اصطلاحات مهم و پر استفاده در حوزه وب هستند که می تواند ذهن هر برنامه نویس و طراح مبتدی را به خود مشغول کند.

در این مقاله سعی کردیم این ابهامات را برطرف کرده و به توضیح این مفاهیم و اصطلاحات بپردازیم.
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
دوستان عزیز این هم ویدیو قسمت بیست و ششم آموزش css مون

ما داخل این قسمت درباره شبه کلاس ها صحبت کردیم و توضیحات لازم را برای شما عزیزان دادیم

امیدوارم لذت کافی رو برده باشید و این ویدیو براتون آموزنده بوده باشه

کانال پرشین ساز رو داخل کانال روبیکا و روبینو دنبال کنید
Please open Rubika to view this post
VIEW IN RUBIKA
۹ فروردین
نو آموزان وب
نو آموزان وب
این هم فایل پیوست این قسمت مون
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
نصب جاوا اسکریپت | فعال و غیر فعالسازی javascript
مهدی شامحمدی
1402/01/18
نصب جاوا اسکریپت | فعال و غیر فعالسازی javascript
جاوا اسکریپت که به اختصار Js هم گفته میشه، یکی از زبان‌های برنامه‌نویسی رایج و کم حجم هست که معمولا توسط برنامه‌نویسان وب برای ایجاد وب‌سایت‌های تعاملی، صفحات وب پویا، وب اپلیکیشن و حتی توسعه بازی استفاده میشه. معمولا جاوا اسکریپت رو در کنار HTML و CSS استفاده میکنند.

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

در این مقاله آموزشی نحوه فعال کردن جاوا اسکریپت (نصب جاوا اسکریپت) در پنج مرورگر پرکاربرد ارائه شده‌ است. علاوه بر این به آموزش دیگر روش‌های نصب جاوا اسکریپت پرداخته شده است.

پس اگر در نصب جاوا اسکریپت مشکل دارید، در این مقاله باهم بررسی می‌کنیم که چطور این کار رو انجام بدیم.

آموزش جاوا اسکریپت

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

روش Internal نصب جاوا اسکریپت
روش External نصب جاوا اسکریپت
روش inline نصب جاوا اسکریپت
بهترین روش برای نصب جاوا اسکریپت کدام است؟
خب الان ببینیم دلیل و کاربرد فعال کردن جاوا اسکریپت توی مرورگرها چیه؟ جاوا اسکریپت باعث می‌شه که صفحات وب پویاتر باشند. به‌عنوان مثال اگر بخواهیم انیمیشنی اجرا کنیم یا بازی تحت وب انجام دهیم، به طور حتم به جاوا اسکریپت نیاز پیدا می‌کنیم، اما در برخی مواقع ممکنه جاوا اسکریپت در مرورگر ما فعال نباشه.در ادامه برای فعال کردنش گام به گام جلو میریم و باهم انجام میدیم.

نصب جاوا اسکریپت

آموزش نصب جاوا اسکریپت در مرورگر های فاقد جاوا اسکریپت
نصب جاوا اسکریپت بر روی مرورگر یکی از کارهایی است که افراد برای اجرای اسکریپت های جاوا اسکریپت باید انجام دهند.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
اگر مرورگر شما کد های جاوا اسکریپت را نشناسد شما نمی توانید به درستی با وب سایت کار کنید و حتی گاها وب سایت به درستی نمایش داده نمی شود! ممکن است شما هم با این پیغام مواجه شده باشید: ” برای اجرای این برنامه لطفا جاوا اسکریپت دستگاه خود را فعال کنید “. راه حل این مشکل نصب برنامه جاوا اسکریپت در مرورگر شماست.

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

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

اگر از اینترنت استفاده کنیم در صورت پشتیبانی نکردن مرورگر از جاوا اسکریپت، پیامی از این تگ بر روی صفحه نمایش نشون داده می‌شه.

نصب جاوا اسکریپت

فعال کردن جاوا اسکریپت در گوگل کروم Chrome
برای نصب جاوا اسکریپت یا بهتر بگم فعال کردن جاوا اسکریپت در مرورگر chrome، شما می‌تونید مراحل زیر رو انجام بدید.

در اولین مرحله، باید بر روی علامت سه نقطه Customize and control Google Chrome در قسمت بالا سمت راست مرورگر کروم کلیک کرده و گزینه settings رو انتخاب کنید.

در صفحه جدیدی که باز میشه گزینه Privacy and security رو انتخاب کنید.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
با کلیک روی Privacy and security صفحه زیر باز میشه و سپس گزینه Site settings رو انتخاب کنید.
نصب جاوا اسکریپت

بعد از اینکه گزینه Site settings رو انتخاب کردید باید از قسمت Content گزینه JavaScript رو انتخاب کنید.
نصب جاوا اسکریپت

در این قسمت، صفحه زیر با عنوان JavaScript باز می‌شه که می‌تونید از این صفحه، به همه سایت‌ها اجازه اجرای JavaScript رو بدید. روی گزینه Sites can use Javascript کلیک کنید تا جاوا اسکریپت براتون فعال بشه.
نصب جاوا اسکریپت

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

حالا اگر بخواهیم جاوا اسکریپت رو غیرفعال کنیم، مراحلی که بالاتر بررسی کردیم رو طی ‌کنید و در آخر بجای کلیک روی گزینه Sites can use Javascript گزینه Don’t allow sites can use Javascript رو انتخاب کنید.

فعالسازی جاوا اسکریپت در فایرفاکس Firefox
تا اینجا متوجه شدید که برای مرورگر کروم چطور عمل کنید (چه مراحلی باید انجام بشه). حالا اگر مرورگر فایرفاکس بود چطور؟

ابتدا مرورگر فایر فاکس را باز کنید.
در قسمت آدرس بار، عبارت about:config را تایپ کرده و اینتر را بزنید.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
در پنجره‌ی نمایش داده شده، روی دکمه‌ی Accept the Risk and Continue در وسط صفحه کلیک کنید.
نصب جاوا اسکریپت

بعداز اینکه مراحل قبل رو انجام دادید، صفحه جدیدی باز می‌شه که شما باید مثل صفحه زیر عبارت javascript.enabled رو سرچ کنید.
نصب جاوا اسکریپت فایرفاکس

می‌بینید که عبارت true به ما نمایش داده شده است. این به معنای فعال بودن جاوا اسکریپت در مرورگر فایرفاکس ما هست. اگر هم بخواهید جاوا اسکریپت رو غیر فعال کنید، مثل تصویر زیر باید عمل کنید تا نصب جاوا اسکریپت غیرفعال بشه. در تصویر بالا اگر روی آیکونی که با فلش نمایش داده شده، کلیک کنید عبارت false رو به ما نمایش میده که این یعنی نصب جاوا اسکریپت غیرفعال شد.
نصب جاوا اسکریپت و فعال سازی آن در Microsoft Edge
نصب جاوا اسکریپت در مرورگر Edge هم مثل دو مرورگر بالا که باهم بررسی کردیم کار راحتی هست. برای این کار لازمه اول مرورگر Edge رو باز کنید. سمت راست قسمت بالای صفحه، روی سه نقطه کلیک کرده و گزینه Settings رو انتخاب کنید.

سپس گزینه Cookies and site permissions رو که در تصویر زیر نشان داده شده، انتخاب کنید.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
در سمت چپ صفحه‌ای که باز می‌شود، گزینه‌ی Site permissions را انتخاب کنید.

در زیر سکشن Site permissions، روی باکس با عنوان جاوا اسکریپت کلیک کنید.

اگر به تصویر بالا دقت کنید، زیر JavaScript عبارت Allowed نوشته شده. این عبارت به معنی فعال بودن جاوا اسکریپت هست، ولی اگر این عبارت رو مشاهده نکردید با کلیک روی JavaScript میتونید به‌راحتی این کار رو انجام بدید.گزینه Allow (recommended) رو به حالت فعال ببرید تا مراحل نصب جاوا اسکریپت در مرورگر Edge کامل بشه.

نکته: در نسخه‌ی ویندوز 10 Microsoft Edge، جاوا اسکریپت به صورت پیشفرض فعال هست و شما نیازی به نصب اون ندارید.
نصب جاوا اسکرپیت و فعالسازی آن در Internet Explorer
در سال 2022 مایکروسافت بالاخره تصمیم گرفت با مرورگر اینترنت اکسپلورر خداحافظی کند و کاربران این مرورگر را به آخرین نسخه مرورگر EDGE هدایت کرد. پس باهم نصب جاوا اسکریپت رو روی مرورگر Edge بررسی کنیم. اما در سیستم های قدیمی به نحوه زیر می باشد. نصب جاوا اسکرپیت Internet Explorer به شما امکان می‌دهد که تمام اسکریپت‌ها را روی این مرورگر اجرا کنید. برای این کار کافی است مراحل زیر را طی کنید.
در منوی مرورگر روی آیکون tools در گوشه‌ی سمت راست بالا کلیک کنید و سپس گزینه‌ی Internet Options را انتخاب کنید.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
در پنجره باز شده وارد تب Security شوید.
در این بخش اول بررسی کنید که اینترنت به عنوان zone انتخاب شده و بعد در قسمت پایین روی دکمه‌ی Custom level کلیک کنید.

پنجره‌ی باز شده Security Settings – Internet Zone نام داره و شما باید سکشن Scripting را داخل اون فعال کنید.

با فعال کردن این دکمه یک پنجره‌ی Warning برای شما باز میشه که می‌پرسه برای انجام این کار اطمینان دارید یا نه. شما باید yes را انتخاب کنید.
حالا با زدن دکمه‌ی ok این پنجره را ببندید.
در صفحه‌ی اصلی مرورگر آیکن رفرش را بزنید تا مرورگر صفحه را رفرش کنه.

فعال کردن جاوا اسکریپت در اپل سافاری apple safari
برای نصب جاوا اسکریپت روی سافاری ابتدا مرورگر سافاری رو باز کنید. دکمه  command + ,  (ویرگول command +) رو همزمان بگیرید تا صفحه موردنظر باز بشه.
Please open Rubika to view this post
VIEW IN RUBIKA
۱۸ فروردین
نو آموزان وب
نو آموزان وب
در صفحه‌ای که براتون باز میشه، روی گزینه Security کلیک کرده و تیک Web content رو فعال کنید تا نصب جاوا اسکریپت در مرورگر سافاری کامل بشه.و با برداشتن تیک موردنظر نصب جاوا اسکریپت غیرفعال خواهد شد.

نصب جاوا اسکریپت و فعال سازی آن در Opera
حالا می‌رسیم به مرورگر اپرا، همونطور که در بخش گوگل کروم نحوه فعال کردن جاوا اسکریپت رو دیدیم، در مرورگر اپرا هم مثل کروم این کار رو انجام میدیم.
اولین مرحله، ورود به بخش تنظیمات هست. به این صورت:
برای قسمت تنظیمات از سمت راست، بالا گزینه Easy setup رو انتخاب کنید. سپس گزینه Go to full browser settings رو بزنید.
و هم می‌تونید از سمت چپ، پایین گزینه settings رو بزنید و وارد تنظیمات مروگر شوید.

بعداز اینکه مراحل بالارو انجام دادید، باید گزینه Privacy & security رو انتخاب کنید،

در پنجره‌ی باز شده روی Site Settings کلیک کنید.
Please open Rubika to view this post
VIEW IN RUBIKA
نو آموزان وب
نو آموزان وب
167دنبال کننده
سلام دوستان من مهدی شامحمدی هستم من مدرس و برنامه نویس فرانت اند هستم من توی این کانال به شما کمک میکنم با آموزش دادن برنامه نویسی پیشرفت چشم گیری داشته باشید
لینک کانال آپارات ما : https://www.aparat.com/Noamouzan_web
مشاهده کانال پیام‌رسان