نوشته های RezaMohammadiyan1375

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

RezaMohammadiyan1375 — Tue, 15 Jan 2019 22:56:39 +0330

در این مجموعه مقالات، به بررسی و آموزش برنامه نویسی با استفاده از توابع در جاوا اسکریپت می‌پردازیم. در طول آموزش، فرض را بر این قرار دادیم که شما با مبانی جاوا اسکریپت آشنا می‌باشید و حداقل چند قطعه کد مفید را با جاوا اسکریپت نوشته‌اید.در طول آموزش با چند مثال ساده و بصورت تقریبا مبتدی مسائل پایه را تشریح نموده و آرام آرام مباحث حرفه ای را آغاز خواهیم کرد. توابع در جاوا اسکریپت (JavaScript)، شباهت زیادی به PHP دارند، به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان (آرگومان به زبان ساده یعنی همان ورودی هایی که به تابع داده می شود) می پذیرند. function functionName(parameters) { code to be executed } توابع در جاوا اسکریپت (JavaScript)، شباهت زیادی به PHP دارند، به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان (آرگومان به زبان ساده یعنی همان ورودی هایی که به تابع داده می شود) می پذیرند. function functionName(parameters) { code to be executed } توابع (Functions) : همیشه در برنامه، مجموعه دستوراتی وجود دارند که عمل خاصی را انجام می‌دهند و به دفعات نیز مورد استفاده قرار می‌گیرند. جهت جلوگیری از تکرار این دستورات، افزایش خوانایی و کاهش پیچیدگی برنامه، این دستورات را در بسته‌ای به نام تابع قرار می‌دهیم تا در زمان نیاز، آن را فراخوانی یا اجرا نماییم. جهت تعریف تابع در جاوا اسکریپت به صورت زیر عمل می‌نماییم: function functionName(parameters) { code to be executed } نکته: تعیین پارامتر(ها) کاملا اختیاریست معمولا در هر زبان برنامه نویسی، توابع (Functions) نقشی کلیدی در پیش برد اهداف برنامه نویس و تسهیل کدنویسی دارند، توابع مثل ماشین هایی هستند که هر بار با توجه به مواد اولیه، خروجی متفاوتی تولید می کنند، خوشبختانه این امر در جاوا اسکریپت (JavaScript) شباهت زیادی به دیگر زبان برنامه نویسی وب یعنی PHP دارد، این موضوع باعث می شود کاربرانی که با PHP آشنایی دارند، به راحتی بخش توابع در جاوا اسکریپت را فرا بگیرند، هر چند بهتر است ابتدا زبان های سمت کاربر(کلاینت) را یاد بگیرید و سپس به برنامه نویسی سمت سرور بپردازید، به هر صورت در ادامه آموزش های مقدماتی جاوا اسکریپت، این بار به سراغ توابع رفته ایم. تابع چیست و چه کاربردی دارد؟ اولین سوالی که ممکن است به ذهنتان برسد این است که اصلا تابع چیست و چه کاربردی دارد؟! پاسخ این است که توابع یا Functions بیشتر شبیه ماشین هایی هستند که با دستورالعملی ثابت، هر بار با توجه به ورودی که دریافت می کنند، خروجی متفاوت می دهند، مثلا در دنیای واقعی، دستگاه چاپی را تصور کنید، مسلما با توجه به رنگ ها، تنظیمات و داده هایی که تعیین می کنید، خروجی منحصر به فردی خواهید داشت! عملکرد توابع هم بی شباهت به این مثال نیست، در برنامه نویسی شرایطی پیش می آید که یک رفتار به تعداد خیلی زیاد ممکن است تکرار شود، مثلا یک فونت در صفحات مختلف تنظیم گردد، اگر بخواهیم هر بار تمام جزئیات را تک به تک برای هر صفحه بنویسیم، علاوه بر اینکه این کار وقت زیادی از ما می گیرد، باعث افزایش ضریب خطا و حجم صفحات می شود، از این رو، روش بهتر و حرفه ای تر آن است که یک بار الگویی را به شکل تابع بنویسیم و هر بار ورودی های متفاوت (یا مشابه) به آن بدهیم و خروجی دریافت کنیم. همانطور که گفتیم، توابع در جاوا اسکریپتJavaScript ، شباهت زیادی به PHP دارند، به این صورت که با عبارت function تعریف می شوند و مقادیری به عنوان آرگومان می پذیرند، مثال زیر نحوه تعریف یک تابع ساده را در جاوا اسکریپت نشان می دهد. Untitled Document توضیح: - همانطور که ملاحظه می کنید، در این تابع دو آرگومان فرضی (c و n)به عنوان نام کاربر و کشور او دریافت می شود. - سپس درون تابع، سه متغیر تعریف شده است با نام های name، country و output که در واقع نهایتا خروجی به صورت نام کاربر: مقادیر کشور کاربر: مقادیر ارسال می شود. - در قسمت return، خروجی تابع تعیین می شود، در اینجا return متغیر output را که خود حاصل جمع دو متغیر name و country است، به عنوان خروجی تابع برمی گرداند. - دقت کنید که توابع در جاوا اسکریپت باید حتما به صورت رویدادی فراخوانی شوند (مثلا onclick یا onload و...)، در حالت عادی وجود یک تابع در صفحه به خودی خود، کار خاصی انجام نمی دهد، در مثال صفحه قبل فراخوانی تابع با دستور document.write انجام شده است. همانطور که در توضیحات بالا اشاره کردیم، توابع در جاوا اسکریپت بدون وجود رویداد ها، کاربردی ندارند، یک رویداد به معنی حالتی است که پس از وقوع آن، موتور تابع به حرکت می افتد، درست شبیه به استارت یک خودرو! اگر بخواهیم توسط تابع مقداری را برگردانیم می‌توانیم از دستور return برای این منظور استفاده نماییم. به مثال زیر توجه کنید: function sum(num1, num2) { return num1 + num2; } تابع sum دو عدد را به عنوان آرگومان ورودی دریافت نموده و حاصل جمع آن‌ها را توسط دستور return به عنوان خروجی بر می‌گرداند. تابع فوق را می‌توان به صورت زیر فراخوانی نمود: alert(sum(10, 20)); خروجی :30 اینک به بررسی چند نکته در مورد دستور return می‌پردازیم. دستور return فقط می‌تواند یک مقدار را برگرداند و نمی‌توان، چند مقدار را مقابل این دستور نوشت. همچنین روال اجرای تابع با رسیدن به دستور return خاتمه می‌یابد و دستورات بعد از آن اجرا نخواهند شد. به مثال زیر توجه کنید: function sum(num1, num2) { return num1 + num2; alert("Hello"); }در مثال فوق دستور alert به هیچ عنوان اجرا نخواهد شد؛ زیرا تابع با رسیدن به دستور return خاتمه می‌یابد. یک تابع می‌تواند شامل بیش از یک دستور return باشد. function diff(num1,num2) { if (num1 > num2) return num1 - num2; else return num2 - num1; }تابع فوق اختلاف دو عدد را بدست می‌آورد و اگر عدد اول بزرگتر باشد، عدد دوم را از عدد اول تفریق می‌کند؛ در غیر اینصورت عدد اول را از عدد دوم تفریق می‌کند و به عنوان خروجی بر می‌گرداند. نکته‌ی دیگری که لازم است بدانید این است که دستور return می تواند هیچ مقداری را بر نگرداند و به تنهایی بکار گرفته شود. در این صورت دقیقا بعد از دستور return سمی کالن (;) قرار می‌دهیم. function checkNumber(num) { if (isNaN(num)) { alert("Not a number"); return; } alert(num+" is a number"); }تابع فوق یک ورودی را دریافت می‌نماید و در صورتی که آرگومان ورودی عدد نباشد پیغام “Not a number” را نمایش می‌دهد و از تابع خارج می‌شود. در صورتی که آرگومان ورودی یک عدد باشد، پیغام دوم را نمایش می‌دهد. توجه:یک تابع بهتر است همیشه یک مقداری را به عنوان خروجی برگرداند و یا کلا هیچ مقداری را بر نگرداند. نوشتن توابعی که در برخی شرایط مقداری را به عنوان خروجی بر میگردانند و در برخی شرایط مقداری را برنمی گردانند موجب ایجاد پیچیدگی در اشکال زدایی می‌گردند. نوشتن تابعی به صورت زیر کمی گیج کننده و نامتعارف می‌باشد:function sum(num1, num2) { if (isNaN(num1) || isNaN(num2)) return; // بهتر است حداقل مقدار 0 برگردانده شود return num1 + num2; }آموزش کامل و اجرای کدها در آپاراتhttps://www.aparat.com/v/BKDtU#طراحی_وب #شمسی_پور_ابریشمی #ارائه #ابریشمی #جاوا_اسکریپت

مهمترین مفاهیم SCSS،SASS و Preprocessor ها

RezaMohammadiyan1375 — Sun, 13 Jan 2019 19:21:24 +0330

این مقاله درمورد مهمترین مفاهیم SCSS،SASS و Preprocessor ها می باشدو تفاوت بین SASS و SCSS را بیان می کند. سی اس اس به تنهایی برای طراحی صفحات وب بسیار مناسب می باشد.که شامل بسیاری از وظایف تکراری می باشد و زمانی که برنامه بسیار بزرگ باشد مدیریت استایل صفحات برایش دشوار می شود.برای جلوگیری از این وظایف تکراری و نوشتن CSS به بهترین روش،ما به یک Preprocessor نیاز داریم. پروسسر ها ،گسترش یافته ی CSS هستند.Preprocessorها تمامی ویژگی های CSS به همراه ویژگی های اضافه تر مانند متغیر،expression، mixin و... می باشند.یک Preprocessor از نظر کاربر نهایی کار بزرگی را انجام نمی دهد اما می تواند سریعتر و راحت تر توسعه پیدا کند.ازلحاظ عملکرد از دید کاربر نهایی ، Preprocessor ها می توانند همه ی Style Sheet ها را به یک فایل واحد تبدیل کنند.بنابراین همه ی Style ها برای یک برنامه در یک شبکه رفت و برگشت(round-trip) بارگذاری می شود به جای این که برای هر Style Sheet درخواست های جداگانه شود. استایل ها با استفاده از تعدادی Preprocessor ها ایجاد شده اند که به CSS تبدیل می شوند(Convert) و فایل کامپایل شده CSS در صفحه HTML می باشد، زیرا مرورگر CSS را میفهمد. ما Preprocessor های معروفی مانند LESS,SASS,Stylus داریم. ما میخواهیم در مورد Sass بحث کنیم. اما Sass چیست؟ سس(Sass) مخفف Syntactically awesome style sheets است. SASS ، قسمتی از Preprocessor دیگر به نام HAML می باشد.HAML توسط توسعه دهندگان Rubyنوشته شده است.از این رو، SASS ، قواعد Ruby را دنبال می کند و برای کامپایل فایل های SASS وCSS باید Ruby روی سیستم شما نصب شود.در نسخه سوم،Syntax آن مانند CSS شد و نام آن هم به Sassy CSS یا SCSS تغییر یافت. از این رو ، این مقاله به طور کلی درمورد Preprocessor ها و SCSS صحبت می کند. مزایای Sass: سس (Sass) برنامه ی شما را با جلوگیری از تکرار وظایف ، براحتی نگهداری می کند . استفاده از ویژگی های اضافی مانند variable, expression, nesting, inheritance, mixins, partials آن را بسیار راحت تر از CSS می کند. سس (Sass)توابع کاربردی بسیاری را برای دستکاری کردن رنگ ها و دیگر متغیر ها فراهم می کند.سس (Sass) ویژگی های پیشرفته ای مانند control directiveبرای کتابخانه ها را فراهم میکند.سس (Sass)به شما اجازه می دهد تا فایل کامپایل شده ی CSS را فرمت و سفارشی سازی کنید. پیش نیاز (Requirement): برای استفاده از SASS ، ابتدا ما باید Ruby را نصب کنیم.که این کار یک عمل راحتی می باشد.مطمئن شوید گزینه ی" Add Ruby executable to your PAT " را در هنگام نصب تیک زده باشید که این کار باعث می شود که Ruby در کل برنامه در دسترس باشد.اگرچه امروزه editorهای زیادی (که شامل Visual studio 2013 Update 2 و نسخه های بالاتر نیز هستند ) وجود دارند که به صورت ذاتی و تعبیه شده ، پشتیبانی از SASS را انجام می دهند. از این رو ، اگر شما نمی توانید Ruby را نصب کنید ، جایگزین های دیگری وجود دارد.جم(Gem) به همراه Ruby نصب می شود. Command Prompt را با Ruby باز کنید و SASS را با Gem بوسیله Command زیر نصب کنید. gem install sass در صورت بروز هر خطا:sudo gem install sass برای تبدیل فایل های SCSS به فایل CSS: sass .scss : .css sass sassfiles /style.scss : stylesheets/style.css مقایسه SASS و SCSS : اس سی اس اس (Scss) نسخه سوم از SASS می باشد.که از نظر قواعدی باهم متفاوت هستند. سس(SASS) : کد SASS فشرده شده است، که به ساختارهای کلیدی کمتری نیاز دارد.ما به پرانتز و semicolon ها نیازی نداریم. فرورفتگی ها نقش مهمی را ایفا می کنند. از این رو، آن ها برنامه نویسی را استاندارد می کنند .اس سی اس اس (SCSS(Sassy CSS: -گویاتر-خواناتر-یادگیری آسانیکپارچه سازی آن با CSS آسان می باشد.شما می توانید به صورت مستقیم از کد CSS پلاگین استفاده کنید.ابزارهای تبدیل CSS به SASS صددرصد صحیح نمی باشند.آموزش کامل در آپاراتhttps://www.aparat.com/v/Q6GzU#مصاحبه_شغلی #توسعه_وب #شمسی_پور_ابریشمی #شمسی_پور #ابریشمی