https://virgool.io/feed/@kavrin https://github.com/KavrinDEV fa 2026-06-17 10:26:51 https://files.virgool.io/upload/users/1739418/avatar/avatar.png?height=120&width=120 https://virgool.io/@kavrin https://virgool.io/@kavrin/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-es6-b7dwxeq8cwwl اکمااسکریپت (ECMAScript) 2015 یا ES6، ششمین و بزرگترین نسخه استاندارد ECMAScript است که استاندارد پیاده‌سازی جاوااسکریپت را مشخص می‌کند. ES6 تغییرات زیادی را در زبان جاواسکریپت اعمال کرد. بعد از این نسخه مقرر شده‌ است که هر سال یک نسخه جدید با تغییرات کمتر توسط ECMAScript ارائه شود تا مانند ES6، شاهد تغییرات بسیار زیاد در یک نسخه نباشیم. نسخه‌های جدید ECMAScript را معمولا با نام ESNext یا +ES6 می‌شناسند.مانند متغیرهای محدود به بلوک (block-scoped variables)، لوپ جدیدی برای آرایه‌ها و اشیا و تغییرات بسیار زیاد دیگری که کار با جاوااسکریپت را راحت تر و دلچسب می‌کند. در ادامه به این تغییرات خواهیم پرداخت.‌letکلمه let برای تعریف متغیرها استفاده می‌شود. قبل از ES6 برای تعرریف یک متغیر باید از کلمه‌ی var استفاده می‌کردیم.دو تفاوت اساسی بین let و var وجود دارد. متغیرهایی که با var تعریف شده‌اند function-scoped هستند و به بالای محدوده‌ی خود به اصطلاح hoist می‌شوند ولی در عوض متغیرهایی که با let معرفی می‌شوند block-scoped هستند و hoist در آن‌ها اتفاق نمی‌افتد.// ES6 syntax for(let i = 0; i < 5; i++) { console.log(i); // 0,1,2,3,4 } console.log(i); // undefined // ES5 syntax for(var i = 0; i < 5; i++) { console.log(i); // 0,1,2,3,4 } console.log(i); // 5همینطور که در بالا می‌بینید متغیر i در بلوک اول خارج از حلقه‌ی for قابل دسترس نیست.‌constکلمه‌ی جدید const این امکان تعریف مقادیر ثابت را فراهم می‌آورد. مقادیر ثابت (Constants)، فقط قابل خواندن هستند و امکان اختصاص (Assignment) دوباره را ندارند. همچنین مانند let، این مقادیر نیز block-scoped هستند.const PI = 3.14; console.log(PI); // 3.14 PI = 10; // errorالبته امکان تغییر ویژگی‌های آرایه‌ها و اشیا(Objects) وجود دارد.// Changing object property value const PERSON = {name: &quotPeter&quot, age: 28}; console.log(PERSON.age); // 28 PERSON.age = 30; console.log(PERSON.age); // 30 // Changing array element const COLORS = [&quotred&quot, &quotgreen&quot, &quotblue&quot]; console.log(COLORS[0]); // red COLORS[0] = &quotyellow" console.log(COLORS[0]); // yellowحلقه‌‌ی for..ofحلقه‌ی جدید for..of امکان تکرار (iterate) بر روی آرایه‌ها و یا اشیا قابل تکرار (iterable) را به آسانی فراهم می‌کنند. همچنین کد داخل حلقه برای هر عنصر آرایه و یا شئ اجرا می‌شود.// Iterating over array let letters = [&quota&quot, &quotb&quot, &quotc&quot, &quotd&quot, &quote&quot, &quotf&quot]; for(let letter of letters) { console.log(letter); // a,b,c,d,e,f } // Iterating over string let greet = &quotHello World!" for(let character of greet) { console.log(character); // H,e,l,l,o, ,W,o,r,l,d,! }این حلقه بر روی اشیاء معمول جاوااسکریپت کار نمی‌کند. برای این اشیاء می‌توان از حلقه for-in استفاده کرد.‌Template Literalsتمپلیت لیترال امکان ساخت رشته‌های (Strings) چند خطی و رشته‌های قابل الحاق (interpolation) را فراهم می‌کنند. با استفاده از این امکان، می‌توان متغیر‌ها و عبارات (expressions) را در هر قسمتی از یک رشته وارد کرد.تمپلیت لیترال با استفاده back-tick (``) نوشته می‌شوند و متغیر یا عبارتی که می‌خواهیم در آن وارد کنیم باید در داخل براکت بعد از یک علامت دلار ({...}$) نوشته شوند.// Simple multi-line string let str = `The quick brown fox jumps over the lazy dog.`; // String with embedded variables and expression let a = 10; let b = 20; let result = `The sum of ${a} and ${b} is ${a+b}.`; console.log(result); // The sum of 10 and 20 is 30.در ES5 برای نوشتن کد بالا باید به این شکل عمل می‌کردیم:// Multi-line string var str = 'The quick brown fox\n\t' + 'jumps over the lazy dog.'; // Creating string using variables and expression var a = 10; var b = 20; var result = 'The sum of ' + a + ' and ' + b + ' is ' + (a+b) + '.'; console.log(result); // The sum of 10 and 20 is 30.مقادیر پیش‌فرض برای توابعدر ES6 می‌توان برای توابع مقادیر پیش‌فرضی را برای پارامترها تعیین کرد بدین معنی که اگر در زمانی که یک تابع فراخوانده می‌شود آرگومانی به آن ارائه نشود، تابع از مقدار پیش‌فرض استفاده می‌کند:function sayHello(name='World') { return `Hello ${name}!`; } console.log(sayHello()); // Hello World! console.log(sayHello('John')); // Hello John!در ES5 برای نوشتن کد بالا باید به این شکل عمل می‌کردیم:function sayHello(name) { var name = name || 'World'; return 'Hello ' + name + '!'; } console.log(sayHello()); // Hello World! console.log(sayHello('John')); // Hello John!‌Arrow Functionsاین نوع توابع امکان مختصر کردن نوشتن یک تابع expression را فراهم می‌کند. نوشتن این نوع توابع با استفاده از یک پیکان (<=) صورت می‌گیرد:// Function Expression var sum = function(a, b) { return a + b; } console.log(sum(2, 3)); // 5 // Arrow function var sum = (a, b) => a + b; console.log(sum(2, 3)); // 5همانطور که در بالا می‌بینید، کلمه‌ی function و return در تعریف (declaration) تابع بالا وجود ندارد. زمانی که فقط یک پارامتر برای تابع وجود دارد، می‌توان پرانتزها را نیز حذف کرد، ولی زمانی صفر پارامتر یا بیشتر از یک پارامتر وجود دارد، وجود پرانتزها الزامی است.همچنین، زمانی که بیش از یک عبارت (expression) در تابع وجود دارد،باید از براکت‌ها ({}) استفاده و کلمه‌ی return در توابعی که مقدار بازگشتی دارند، وارد کرد.// Single parameter, single statement var greet = name => alert(&quotHi &quot + name + &quot!&quot); greet(&quotPeter&quot); // Hi Peter! // Multiple arguments, single statement var multiply = (x, y) => x * y; alert(multiply(2, 3)); // 6 // Single parameter, multiple statements var test = age => { if(age > 18) { alert(&quotAdult&quot); } else { alert(&quotTeenager&quot); } } test(21); // Adult // Multiple parameters, multiple statements var divide = (x, y) => { if(y != 0) { return x / y; } } alert(divide(10, 2)); // 5 // No parameter, single statement var hello = () => alert('Hello World!'); hello(); // Hello World!یک تفاوت مهم بین این نوع توابع و توابع معمول وجود دارد. برعکس توابع معمول، این نوع توابع مقدار this که برای خودشان باشد را ندارند و این مقدار را از تابع خارجی، جایی که تعریف شده‌اند، می‌گیرند. برای فهم بهتر مثال زیر را در نظر بگیرید:function Person(nickname, country) { this.nickname = nickname; this.country = country; this.getInfo = function() { // Outer function context (Person object) return function() { // Inner function context (Global object 'Window') alert(this.constructor.name); // Window alert(&quotHi, I'm &quot + this.nickname + &quot from &quot + this.country); }; } } var p = new Person('Rick', 'Argentina'); var printInfo = p.getInfo(); printInfo(); // Hi, I'm undefined from undefinedنوشتن کد بالا با استفاده از توابع پیکانی و template literals:function Person(nickname, country) { this.nickname = nickname; this.country = country; this.getInfo = function() { // Outer function context (Person object) return () => { // Inner function context (Person object) alert(this.constructor.name); // Person alert(`Hi, I'm ${this.nickname} from ${this.country}`); }; } } let p = new Person('Rick', 'Argentina'); let printInfo = p.getInfo(); printInfo(); // Hi, I'm Rick from Argentinaهمانطور که در بالا مشخص است، کلمه‌ی this در مثال بالا به زمینه‌ی (context) تابعی که تابع پیکانی در آن قراردارد، که شیء Person می‌شود، اشاره دارد. ولی در مثال قبلی، کلمه‌ی this به شیء گلوبال Window شاره دارد.کلاس‌ها (Classes)در نسخه‌های ES5 و قبل‌تر، در جاوااسکریپت هرگز کلاس وجود نداشت. کلاس‌ها در نسخه ES6 معرفی شده‌اند که بسیار شبیه به کلاس‌های موجود در دیگر زبان‌های برنامه‌نویسی شیءگرا مانند جاوا، پی‌اچ‌پی و ...، هستند اما نحوه کار کلاس‌های جاوااسکریپت کاملا شبیه به دیگر زبان‌های برنامه‌نویسی نیست. کلاس‌های ES6 ساخت اشیاء و پیاده سازی وراثت (inheritance) با استفاده از کلمه‌ی extend را فراهم می‌کنند.در ES6 می‌توان یک کلاس را با استفاده از کلمه‌ی class و نوشتن نام کلاس بعد از آن تعریف کرد. برای نوشتن نام یک کلاس، نوشتن آن به صورت TitleCase مرسوم است.class Rectangle { // Class constructor constructor(length, width) { this.length = length; this.width = width; } // Class method getArea() { return this.length * this.width; } } // Square class inherits from the Rectangle class class Square extends Rectangle { // Child class constructor constructor(length) { // Call parent's constructor super(length, length); } // Child class method getPerimeter() { return 2 * (this.length + this.width); } } let rectangle = new Rectangle(5, 10); alert(rectangle.getArea()); // 50 let square = new Square(5); alert(square.getArea()); // 25 alert(square.getPerimeter()); // 20 alert(square instanceof Square); // true alert(square instanceof Rectangle); // true alert(rectangle instanceof Square); // falseدر مثال بالا، کلاس Square از کلاس Rectangle، با استفاده از کلمه‌ی extend، ارث‌بری می‌کند. ار کلاس‌هایی که از دیگر کلاس‌ها ارث‌بری می‌کنند، به عنوان derived classes و یا child classes یاد می‌شود.همچنین در کلاس‌های فرزند، برا دسترسی به زمینه (context) در constructor، باید از کلمه‌ی super استفاده کرد. به عنوان مثال اگر در مثال بالا super را حذف کنید و تابع getArea را بر روی شیء Square فراخوانی کنید، از آن جایی که تابع getArea نیاز به this دارد، ارور به وجود می‌آید.نکته: برعکس توابع، تعریف کلاس‌ها Hoist نمی‌شود. بنابراین، باید قبل از دسترسی به کلاس آن را تعریف کنیم وگرنه با ReferenceError می‌شویم.‌Modulesقبل از ES6، پشتیبانی به صورت بومی (native) برای ماژول‌ها در جاوااسکریپت وجود نداشت. همه چیز در یک برنامه جاوا اسکریپت، به طور مثال متغیرها در فایل‌های مختلف، در یک محدوده (scope) بودند. ES6 ماژول برپایه فایل را معرفی کرد که در آن هر ماژول با یک فایل جدا ارائه می‌شود. حالا، می‌توان از export و import در یک ماژول برای export یا import کردن متغیرها، توابع، کلاس‌ها و غیره، از/به ماژول‌ها و یا فایل‌های دیگر استفاده کرد.در مثال زیر یک فایل با نام main.js می‌سازیم:let greet = &quotHello World!" const PI = 3.14; function multiplyNumbers(a, b) { return a * b; } // Exporting variables and functions export { greet, PI, multiplyNumbers };حال یک فایل دیگر با نام app.js درست می‌کنیم:import { greet, PI, multiplyNumbers } from './main.js'; alert(greet); // Hello World! alert(PI); // 3.14 alert(multiplyNumbers(6, 15)); // 90در آخر یک فایل HTML با نام test.html درست می‌کنیم (به "type="module در تگ script دقت کنید):<!DOCTYPE html> <html lang=&quoten&quot> <head> <meta charset=&quotutf-8&quot> <title>ES6 Module Demo</title> </head> <body> <script type=&quotmodule&quot src=&quotapp.js&quot> </body> </html> ‌The Rest Parametersنسخه ES6 ویژگی rest parameters معرفی کرده که به ما این اجازه را می‌دهد تا بتوان تعداد نامعلومی پارامتر را به یک تابع اختصاص داد. این ویژگی زمانی مفید است که می‌خواهید چند پارامتر به یک تابع بدهید ولی تعداد آن را نمی‌دانید.یک rest parameter با اضافه کردن اپراتور rest (...) به یک پارامتر ساخته می‌شود. rest parameter را فقط می‌توان به عنوان آخرین پارامتر یک تابع تعریف کرد و تنها یک rest parameter در هر تابع می‌تواند وجود داشته باشد. function sortNames(...names) { return names.sort(); } alert(sortNames(&quotSarah&quot, &quotHarry&quot, &quotPeter&quot)); // Harry,Peter,Sarah alert(sortNames(&quotTony&quot, &quotBen&quot, &quotRick&quot, &quotJos&quot)); // John,Jos,Rick,Tonyزمانی که rest parameter تنها پارامتر موجود در تابع باشد، تمام آرگومان‌های وارد شده به تابع را می‌گیرد، درغیر این صورت تمام پارامترهایی که بعد از پارامترهای نام‌گذاری شده را از آن خود می‌کند.function myFunction(a, b, ...args) { return args; } alert(myFunction(1, 2, 3, 4, 5)); // 3,4,5 alert(myFunction(-7, 5, 0, -2, 4.5, 1, 3)); // 0,-2,4.5,1,3نکته: rest parameter ارتباطی به REST (REpresentational State Transfer) ندارد.‌The Spread Operatorاین اپراتور، که با سه نقطه (...) مشخص می‌شود، دقیقا برعکس اپراتور rest عمل می‌کند. اپراتور spread (گسترش) یک آرایه را تفکیک و گسترده می‌کند و مقادیر آن را وارد تابع می‌کند.function addNumbers(a, b, c) { return a + b + c; } let numbers = [5, 12, 8]; // ES5 way of passing array as an argument of a function alert(addNumbers.apply(null, numbers)); // 25 // ES6 spread operator alert(addNumbers(...numbers)); // 25اپراتور spread همچنین می‌تواند عناصر یک تابع را، بدون استفاده از متدهای push(), unshift() concat()و غیره، وارد یک آرایه دیگر کند.let pets = [&quotCat&quot, &quotDog&quot, &quotParrot&quot]; let bugs = [&quotAnt&quot, &quotBee&quot]; // Creating an array by inserting elements from other arrays let animals = [...pets, &quotTiger&quot, &quotWolf&quot, &quotZebra&quot, ...bugs]; alert(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee‌Destructing Assignmentاین یک عبارت (expression) که خارج کردن مقادیر از یک آرایه یا ویژگی‌ها از یک شیء و تبدیل آن‌ها به متغیرهای مجزا را آسان می‌کند.دو نوع destructing assignment وجود دارد. یک نوع برای آرایه‌ها و یکی برای اشیاء.‌The array destructing assignmentقبل از ES6 برای گرفتن یک مقدار مجزا از یک آرایه باید به صورت زیر عمل می‌کردیم:// ES5 syntax var fruits = [&quotApple&quot, &quotBanana&quot]; var a = fruits[0]; var b = fruits[1]; alert(a); // Apple alert(b); // Bananaدر ES6 به این گونه عمل می‌کنیم:// ES6 syntax let fruits = [&quotApple&quot, &quotBanana&quot]; let [a, b] = fruits; // Array destructuring assignment alert(a); // Apple alert(b); // Bananaهمچنین می‌توان از اپراتور rest نیز استفاده کرد:// ES6 syntax let fruits = [&quotApple&quot, &quotBanana&quot, &quotMango&quot]; let [a, ...r] = fruits; alert(a); // Apple alert(r); // Banana,Mango alert(Array.isArray(r)); // true‌The object destructing assignmentقبل از ES6 برای گرفتن مقادیر ویژگی اشیاء باید به صورت زیر عمل می‌کردیم:// ES5 syntax var person = {name: &quotPeter&quot, age: 28}; var name = person.name; var age = person.age; alert(name); // Peter alert(age); // 28در ES6 به این گونه عمل می‌کنیم:// ES6 syntax let person = {name: &quotPeter&quot, age: 28}; let {name, age} = person; // Object destructuring assignment alert(name); // Peter alert(age); // 28بیشتر ویژگی‌های توضیح داده شده در بالا توسط مروگرها پشتیبانی می‌شود. هرچند می‌توان از ابزار ترجمه کد آنلاین Babel نیز برای تبدیل کد ES6 به ES5 به صورت رایگان استفاده کرد.ترجمه‌ای از مقاله JavaScript ES6 Features مصطفی حسینی مصطفی حسینی Mon, 05 Sep 2022 21:04:49 +0430 https://virgool.io/@kavrin/dom-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C-%D8%A2%D9%86-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A7%D8%B3%D8%AA-ovfy7xissixl در این مقاله در مورد DOM (Document Object Model) و نحوه دستکاری آن (DOM Manipulation) توسط جاوااسکریپت صحبت می‌کنیم.‌DOM چیست؟لغت DOM مخفف Document Object Model (مدل شیءِ سند) می‌باشد. در تعریف DOM می‌توان گفت که یک ارائه اطلاعات از اشیائی است که ساختار و محتوای یک صفحه وب را مشخص می‌کند.برای فهمیدن دقیق DOM، باید اول بفهمیم چگونه یک سند HTML به یک صفحه وب قابل تعامل تبدیل می‌شود. مسیری که در این تبدیل اتفاق می‌افتد به عنوان "مسیر تفسیر اساسی (Critical Rendering Path)" شناخته می‌شود.مراحل موجود در این مسیر به طور اصلی به دو بخش تقسیم می‌شود. بخش اول، مشخص کردن چیزهایی که تفسیر می‌شود و بخش دوم، تفسیر آن‌ها در مرورگر است. یک جزء مهم که در بین این دو بخش تشکیل می‌شود، "درخت تفسیر (Render Tree)" است.Critical Rendering Pathساختار DOM با استفاده از چیزی که ما آن را "درخت گره (node tree)" می‌نامیم نمایش داده می‌شود. در درخت گره، عنصر h گره‌ی منشاء است که توسط شاخه‌هایی که شامل عناصر فرزند است ادامه پیدا می‌کند. این درخت تا جایی که عنصری وجود داشته باشد که فرزندی ندارد، ادامه پیدا می‌کند.برای فهم بهتر مثال زیر را در نظر بگیرید:این سند HTML را می‌توان به صورت درخت گره‌ی زیر نمایش داد:DOM treeچند نکته در مورد DOM که باید در نظر بگیریم:‌DOM یک رابط (interface) را فقط برای یک سند HTML معتبر تشکیل می‌دهد اما مرورگر به تصحیح یک سند غیر معتبر کمک می‌کند.مثال:Invalid HTML document.سند بالا غیر معتبر است به دلیل اینکه تگ‌های <head> و <body> در آن وجود ندارد، ولی درخت DOM به صورت زیر تشکیل می‌شود: 2. ‌DOM به عنوان یک منبع زنده عمل می‌کند و یه کمک جاوااسکریپت می‌توان آن را دستکاری کرد. هر زمان که تغییری در DOM رخ دهد، مرورگر DOM را دوباره تفسیر (re-render) می‌کند.مثال:حال با استفاده از جاوااسکریپت DOM را دستکاری می‌کنیم و یک پارگراف دیگر با متن "This is paragraph 2" به آن اضافه می‌کنیم:بعد از اضافه کردن اسکریپت به سند HTML :خروجی مرورگر به این صورت است:3. چیزی که ما در مرورگر می‌بینیم درخت تفسیر است و نه خود DOMمرورگر پنجره نمایش (viewport) خود را با کمک درخت تفسیر، تشکیل می‌دهند. درخت تفسیر ترکیبی از DOM و CSSOM (CSS Object Model) است. تفاوت بین درخت تفسیر و DOM در این است که درخت تفسیر فقط شامل چیزهایی است که می‌تواند در صفحه نمایش داده شوند است و تمام چیزهایی که با استفاده از CSS مخفی شده ار آن کم می‌شود.در مثال زیر ما به عنصر p استایل display: none را داده‌ایم:از آنجایی که تگ <p> جزوی از سند HTML است، داخل درخت DOM قرار خواهد گرفت:ولی زمانی که درخت تفسیر در حال تشکیل است، DOM و CSSOM را با هم در نظر می‌‌گیرد و از آنجایی که عنصر p دارای استایلی است که از نمایش آن جلوگیری می‌کند، پس از درخت تفسیر حذف می‌شود.دستکاری DOM چگونه است؟ (DOM Manipulation)دستکاری DOM، تعامل با DOM API برای تغییر یا تصحیح سند HTML است که می‌خواهد بر روی مرورگر وب تفسیر (Render) شود. سند HTML می‌تواند به گونه‌ای دستکاری شود که عنصری به آن اضافه یا کم شود، تغییر یابد، جا به جا شود و ... .با دستکاری DOM میتوان برنامه‌ای درست کرد که بدون تازه‌سازی (refresh)، بروزرسانی شود. می‌توان عناصر موجود در سند را جابه‌جا، ترکیب یا حذف کرد.از زبان‌های زیادی برای دستکاری DOM می‌توان استفاده کرد که مهم‌ترین آن‌ها جاوااسکریپت است. به عنوان مثال، سند HTML زیر را در نظر بگیرید:برای دستکاری یک عنصر داخل DOM، در ابتدا باید آن عنصر را انتخاب کرده و ارجاع (reference) به آن را در داخل یک متغیر ذخیره کنید. این کار را می‌توان با Query Selectors انجام داد:تابع querySelector یک رفرنس از اولین مورد مطابق با انتخاب‌کننده (selector) 'p' را برمی‌گرداند. تابع querySelectorAll یک لیست گره شمال تمامی رفرنس‌های مطابق با (selector) 'p' را برمی‌گرداند.توجه داشته باشید که querySelectorAll یک لیست گره را برمی‌گرداند و نه یک آرایه. لیست گره شبیه به آرایه است و تا قسمتی شبیه به آرایه عمل می‌کند ولی همه متدهایی که برروی آرایه اعمال می‌شود را نمی‌توان برروی لیست گره نیز اعمال کرد.با استفاده از id، tag و class نیز می‌توان یک عنصر را انتخاب کرد:ساخت یک عنصر و دستکاری DOM :در بالا، عنصر section را انتخاب کردیم، حال یک عنصر p می‌سازیم:در بالا یک عنصر پاراگراف را با استفاده از متد createElement ساختیم. در ادامه یک متن نیز با استفاده از textContent به آن اضافه کردیم.حال می‌توان عنصر newPara را با استفاده از متد appendChild به آخر عنصر section اضافه کرد:حال بیاید یک متن جدید به پاراگراف اضافه کنیم. این کار را با متد createTextNode انجام می‌دهیم و سپس با appendChild آنرا به عنصر newPara اضافه می‌کنیم:با دستکاری DOM حذف کردن یک عنصر از آن نیز ممکن است. عنصر newPara را می‌توان به دو روش حذف کرد:در روش اول، از متد removeChild استفاده می‌کنیم. برای استفاده از این متد باید گره مادر بشناسیم و این متد را بر روی آن اعمال کنیم:عنصر sect، گره‌ی مادر گره‌ی newPara است. بدین ترتیب ما newPara با حذف کردن گره‌ی فرزند sect، حذف می‌کنیم.در روش دوم، از متد remove استفاده می‌کنیم. این متد زمانی استفاده می‌شود که بخواهیم بر پایه ارجاع به خود عنصر، آن را حذف کنیم:توجه داشته باشید که متد remove در مروگرهای قدیمی پشتیبانی نمی‌شود و برای اجرای کد بالا باید این کار را کنیم:در ادامه بیاید یک event listener به عنصر button برای نمایش پیام d، زمانی بر روی button کلیک می‌شود، اضافه کنیم. این کار را می‌توان با استفاده از متد addEventListener انجام داد. این متد دو پارامتر دارد. پارامتر اول نوع ایونت است مانند click و پارامتر دوم تابعی است که، به هنگام رخ دادن ایونت، می‌خواهیم اجرا شود:کد بالا را به صورت زیر نیز می‌توان نوشت:می‌توانیم یک سری ویژگی‌ها را برای آپدیت مستقیم عناصر، اعمال کنیم. اعمال استایل‌هایی بر روی عنصر newPara:اگر با استفاده از inspector مرورگر کد HTML را چک کنید می‌بینید که این استایل‌ها به صورت inline به عنصر newPara اضافه شده:با دستکاری DOM می‌توان خاصیت (attribute) هم به عناصر اصافه کرد. این کار با متد setAttribute می‌توان انجام داد. این متد دو پارامتر دارد، پارامتر اول خاصیتی که می‌خواهید اضافه کنید و پارامتر دوم، عنصری که می‌خواهید این خاصیت را بر روی آن اعمال کنید:ویژگی‌ها و متدهای بسیاری را می‌توان با دستکاری DOM اعمال کرد. برای مطالعه بیشتر می‌توانید به سایت w3scools یا MDN مراجعه کنید.ترجمه‌ای از مقالات What is DOM و What Is DOM Manipulation مصطفی حسینی مصطفی حسینی Tue, 30 Aug 2022 20:36:55 +0430 https://virgool.io/@kavrin/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-xctkyaaqcpxu جاوااسکریپت یک زبان برنامه‌نویسی پویا (Dynamic) است که در برنامه‌نویسی وب، اپلیکیشن‌های وب، توسعه بازی، توسعه نرم‌افزار موبایل و خیلی از زمینه‌های دیگر کاربرد دارد. جاوااسکریپت به شما این اجازه را می‌دهد که امکانات و خصوصیات پویا را بر روی وبسایت‌ها اجرا کنید که فقط با HTML و CSS قابل اجرا نیست.بیشتر مرورگرها از جاوااسکریپت به عنوان زبان اسکریپت‌نویسی برای اجرای قابلیت‌های پویا در صفحات استفاده می‌کنند. هرزمانی که یک منوی باز شونده، اضافه کردن محتوای اضافه، عوض کردن رنگ یک عنصر به صورت پویا و ... را می‌بینید، شاهد تاثیر جاوااسکریپت هستید.بدون جاوااسکریپت، تنها چیزی که در یک صفحه وب می‌بینید تنها HTML , CSS است. 90%(یا بیشتر) صفحه‌ی وب شما ایستا خواهد بود و فقط مقدار کمی پویایی وجود خواهد داشت که به وسیله CSS اجرا می‌شود.جاوااسکریپت چگونه چیزها را پویا می‌کند؟کد HTML ساختار کلی صفحه وب و محتویات آن را مشخص می‌کند. CSS نیز استایل‌های مختلفی را بر روی محتویات که در سند HTML تعریف شده اعمال می‌کند.زبان‌های HTML و CSS معمولا به عنوان زبان نشانه‌گذاری معرفی می‌شوند و نه زبان برنامه‌نویسی، به دلیل اینکه آن‌ها، در حالت کلی، محتویات را نشانه‌گذاری می‌کنند و پویایی بسیار کمی دارند.جاوااسکریپت از سوی دیگر، یک زبان برنامه‌نویسی پویاست که محاسبه‌های ریاضی را پشتیبانی می‌کند، می‌تواند استایل‌های پویا بسازد، محتوا را از سایت‌های دیگر دریافت کند و خیلی چیزهای دیگر.قبل از اینکه ببینیم جاوااسکریپت چگونه این کارها را انجام می‌دهد، بیاید به مثال زیر نگاه کنیم: https://codepen.io/Dillion/embed/XWjvdMG?default-tab=result#result-box در مثال بالا می‌بینید که وقتی در قسمت ورودی چیزی می‌نویسید، متن نوشته شده در بر روی صفحه نمایش داده می‌شود. این موضوع به خاطر جاوااسکریپت ممکن می‌شود و با استفاده از HTML و CSS دست پیدا کرد.جاوااسکریپت چگونه با HTML کار می‌کند؟روش‌های مختلفی برای استفاده از جاوااسکریپت در یک سند HTML وجود دارد:‌● inline JavaScriptدر این روش، کد جاوااسکریپت در داخل تگ‌های HTML با استفاده از یک سری خصوصیات (attributes) مخصوص جاوااسکریپت نوشته می‌شود:<button =&quotalert('You just clicked a button')&quot>Click me!</button> در این مثال، مقدار می‌تواند یک محاسبه ریاضی، اضافه کردن چیزی به DOM (Document object model) یا غیره باشد.‌‌● internal JavaScriptمانند تگ style که برای نوشتن استایل‌های CSS در سند HTML به کار می‌رود، تگ script نیز برای نوشتن کد جاوااسکریپت به کار می‌رود:<script > function(){ alert(&quotI am inside a script tag&quot) } </script >‌‌● external JavaScriptممکن است بخواهید کد جاوااسکریپت را در فایل جداگانه‌ای قرار دهید. جاوااسکریپت اکسترنال این قابلیت را فراهم می‌کند:<!-- index.html --> <script src=&quot./script.js&quot></script >// script.js alert(&quotI am inside an external file&quot); خاصیت src در تگ script این اجازه را به ما می‌دهد تا سورس فایل جاوااسکریپت را مشخص کنیم. این ارجاع مهم است چون به مرورگر می‌گوید مه فایل script.js را نیز از سرور دریافت کند.فایل script.js می‌تواند با index.html در یک دایرکتوری باشد یا از جای دیگری دریافت شود. در هر صورت باید url کامل قرار بگیرد.تمامی فایل های جاوااسکریپت دارای پسوند js می‌باشند.نوع داده‌ها در جاوااسکریپتجاوااسکریپت نیاز دارد که نوع داده بداند تا بفهمد چگونه عملیات‌های مختلف را روی آن انجام دهد.چند مورد از داده‌هایی که جاوااسکریپت پشتیبانب می‌کند:‌● Number (عدد): می‌شود برروی آن‌ها عملیات‌های حسابی (مانند جمع و تفریق) را اعمال کرد. مانند 6، 7، 8.9‌● String (رشته): هرچیزی که بین دو ' یا دو " یا دو ` باشد. فرقی بین ' و " وجود ندارد ولی ` (Backtick) ویژگی‌های بیشتری دارد : ● وارد کردن متغیر به داخل رشته مثلا در رشته‌ی My name is ${name} عبارت name یک متغیر است که به داخل رشته تزریق شده. ● رشته‌های چند خطی. در فرم معمولی با استفاده از کوت‌ها (" و ') برای رفتن به خط بعد نیازمند عبارت n\هستیم ولی با استفاده از Backtick می‌شود اینگونه عمل کرد:let str = `I am a multiline string`;‌● Boolean: تنها می‌تواند دو مقدار true یا false را داشته باشد.‌● Array (آرایه): گروهی از داده‌ها، که می‌تواند از هر نوعی باشند حتی آرایه، تفکیک شده توسط کاما. شماره گذاری این نوع از 0 آغاز می‌شود. دسترسی به محتوای این گروه می‌تواند اینگونه باشد: array[0]. مثال: [1, 2, "hello", false]‌● Object (شیء): گروهی از داده‌ها در فرم دوتایی key:value. عبارت key باید یک رشته باشد و عبارت value می‌تواند هر نوع داده‌ای باشد. دسترسی به محتوای این گروه می‌تواند به این دو صورت باشد: obj.age یا obj["age"]. مثال: {name: 'javascript', age: 5}‌● Undefined (مشخص نشده): این نوع داده می‌تواند به صراحت یا به طور ضمنی (توسط جاوااسکریپت) به یک متغیر نسبت داده شود. ‌● Null: ‌داده‌یnull به این معناست که مقداری وجود ندارد.‌● Function: تابع نوعی داده است که، زمانی که فراخوانده می‌شود، یک بلوک کد را اجرا می‌کند.یادگیری نوع داده‌ها در جاوااسکریپت می‌تواند مقداری پیچیده باشد. آرایه‌ها و تابع‌ها نیز در جاوااسکریپت نوعی شیء (Object) هستند.فهمیدن این موضوع شامل فهمیدن پروتوتایپ‌ها (prototypes) در جاوااسکریپت است. ولی در قدم اول، فهمیدن نوع داده‌هایی که در بالا اشاره شد کافی است.متغیرها در جاوااسکریپتمتغیرها نوعی ظرف و نگه‌دارنده برای مقادیر با هر نوع داده، هستند. آن‌ها مقادیری را در خود نگه می‌دارند که، زمانی که متغیر استفاده می‌شود، جاوااسکریپت داده‌ای که آن‌ها در خود دارند را استفاده می‌کند.متغیرها می‌توانند تعریف (declared) و مقداری به آن‌ها اختصاص یابد(assigned). تعریف یک متغیر به اینگونه است:let name;متغیرname در بالا تعریف شده است ولی مقداری به آن اختصاص نیافته.جاوااسکریپت در این مرحله به صورت اتوماتیک نوع داده‌ی متغیر nameرا undefined مشخص می‌کند. یعنی اگر متغیر name در جایی استفاده شود، نوع داده آن undefined خواهد بود.اختصاص دادن مقدار به یک متغیر اینگونه است:let name; name = &quotJavaScript"حال اگر این متغیر در جایی استفاده شود، مقدار JavaScript را نمایندگی می‌کند.تعریف متغیر و اختصاص دادن مقدار آن می‌تواند در یک خط انجام پذیرد:let name = &quotJavaScript"جاوااسکریپت سه نوع متد برای تعریف متغیر دارد:● اپراتور (operator، عملگر) var: این اپراتور، از زمان ساخته شدن جاوااسکریپت وجود داشته است. با استفاده از این اپراتور شما می‌توانید یک متغیر تعریف و مقداری را به آن اختصاص دهید و بعدا آن مقدار را تغییر دهید:var name = &quotJavaScript" name = &quotLanguage"● اپراتور let: این اپراتور بسیار شبیه به اپراتور var است با این تفاوت که اپراتور var، می‌تواند Hoist شود ولی اپراتور let نمی‌تواند. مفهوم Hoist را می‌توان به طور خلاصه به این شکل بیان کرد:function print() { console.log(name); console.log(age); var name = &quotJavaScript" let age = 5; } print();زمانی که تابع print فراخوانده می‌شود، اولین console.log مقدار undefined را چاپ می‌کند در صورتی که دومین console.log اروری با پیام "Cannot access age before initialization" را نمایش می‌دهد.این موضوع به این دلیل است که، تعریف متغیر name به اصطلاح hoist شده‌است ولی اختصاص مقدار به آن در همان خط باقی مانده، در صورتی که تعریف و اختصاص دادن مقدار به متغیر age، هر دو در یک خط انجام می‌شود. تفسیر (compile) کد بالا به این صورت است:function print() { var name; console.log(name); console.log(age); name = &quotJavaScript" let age = 5; } print();مشکلات مربوط به Hoist می‌تواند به صورت غیر منتظره‌ای اتفاق بیافتد، به همین دلیل توصیه می‌شود که همیشه به جای var از let استفاده شود.● اپراتور const: این اپراتور متغیر‌ها را hoist نمی‌کند ولی مطمئن می‌شود که، متغیری که یکبار به آن مقداری اختصاص یافته، در ادامه نتوان مقدار دیگری را به آن اختصاص داد: let name = &quotJavaScript&quot name = &quotLanguage&quot // no errors const age = 5 age = 6 // error, cannot reassign variableکامنت در جاوااسکریپتمانند HTML و CSS، شاید بخواهیم توضیح یا نوشته‌ای در کنار خود داشته باشیم که نمی‌خواهیم اجرا شود. این کار را با استفاده از کامن به دو صورت می‌توان انجام داد:● کامنت تک خطی:// a single line comment● کامنت چند خطی:/* a multi line comment */توابع در جاوااسکریپتبا استفاده از توابع، شما می‌توانید یک بلوک کد ، که می‌تواند در مکان‌ها دیگر نیز اجرا شود، را در داخل خود فایل کد ذخیره کنید. تصور کنید شما می‌خواهید کلمه j و l را در مکان‌هی مختلفی در کد خود چاپ کنید. به جای انجام دادن این کار:dاین کار را می‌توانید انجام دهید:dدر این صورت، ما یک بلوک کد، که در مکان‌های مختلفی مورد استفاده قرار می‌گیرد، را به نوعی ذخیره کردیم.به عنوان مثالی دیگر، تصور کنید می‌خواهیم مقدار میانگین سه عدد را محاسبه کنیم :dانجام این کار خارج از یک تابع مشکلی ندارد ولی زمانی که بخواهیم در مکان‌های دیگری نیز میانگین را محاسبه کنیم، بهتر است این کار را انجام دهیم:dهمانطور که متوجه شدید در تعریف تابع f، ما عبارات n را در داخل پرانتز داریم. این عبارات پارامترهایی هستند که نقش نگه‌دارنده مکان (placeholders) برای مقادیر واقعی، زمانی که تابع فراخوانده می‌شود، را ایفا می‌کنند.بلوک کد داخل تابع از این مقادیر استفاده می‌کند تا مقدار میانگین آن‌ها را محاسبه کند. کلمه‌ی r نیز مقداز محاسبه شده را به عنوان خروجی تابع برمی‌گرداند.این placeholder ها باعث می‌شود که تابع قابل استفاده مجدد باشد به طوری که مقادیر متفاوتی در زمان‌های متفاوتی وارد تابع شوند و از یک منطق استفاده کنند.نتیجه‌گیریجاوااسکریپت ویژگی‌های بسیار زیاد دیگری نیز دارد، که امیدوارم این مقاله شروعی برای یادگیری دیگر مباحث باشد.در این مقاله راجع به نحوه اضافه کردن کد جاوااسکریپت به فایل‌های HTML، انواع مختلف داده‌ها، متغیرها، نحوه نوشتن کامنت و مقدار کمی در مورد توابع جاوااسکریپت صحبت کردیم. در مقاله بعد راجع به DOM و نحوه ارتباط جاوااسکریپت با آن صحبت خواهیم کرد.ترجمه‌ای از مقاله What is JavaScript? A Definition of the JS Programming Language مصطفی حسینی مصطفی حسینی Tue, 30 Aug 2022 16:56:21 +0430 https://virgool.io/@kavrin/%D8%A7%D9%86%D9%88%D8%A7%D8%B9-%D9%85%D8%AA%D8%AF%D9%84%D9%88%DA%98%DB%8C-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-css-methodologies-u7md9s3cfx7y در این مقاله درباره‌ی متدلوژی‌های سی‌اس‌اس نویسی، دلیل وجود آن‌ها و انواع مختلف این متدها صحبت می‌کنیم.نوشتن و نگه‌داری کد‌های CSS در مقیاس بزرگ می‌تواند بسیار مشکل باشد. یک دلیل آن نبود سیستم محدودسازی (scoping mechanism) پیش‌فرض در CSS می‌باشد. همه چیز در CSS سراسری (Global) است.این موضوع به این معنا است که هر تغییری که در کد CSS خود اعمال می‌کنید، پتانسیل این را دارد که باعث تغییر در قسمتی غیرمرتبط با هدفی که در رابط کاربری دارد شود. پیش‌پردازنده‌های CSS، مانند Sass، Less و Stylus، با ارائه برخی قابلیت‌ها نوشتن کد CSS را کمی راحت‌تر می‌کنند.اما پیش‌پردازنده‌ها نیز به طور کامل مشکل مقیاس‌پذیری را در CSS را حل نمی‌کنند. تا زمانی که CSS سیستم محدودسازی داخلی برای وصل کردن هر استایل به قسمتی خاص از HTML را نداشته باشد، ما نیاز به راه حلی برای این موضوع داریم. متدلوژی‌های CSS نویسی جوابی برای این مشکلات است.بکار بردن یک متدلوژی CSS، حتی اگر توسط خودتان ساخته شده باشد، می‌تواند طراحی و توسعه پروژه‌ی شما را بسیار راحت‌تر کند. هر متدلوژی یک را‌ه‌حل نسبتا متفاوت برای مشکل مقیاس‌پذیری CSS ارا‌ئه می‌دهد. یک متدلوژی شامل راهنمایی‌هایی برای موضوعات زیر است: ● بهترین شیوه‌ها (Best Practices) برای CSS و HTML● قراردادهای نامگذاری ID و Class● مرتب و دسته‌بندی کردن استایل‌های CSS● مرتب‌سازی کدهاهیچکدام از متدلوژی‌های CSS بهترین نیستند. هر کدام از آن‌ها می‌تواند بسته به گروه/پروژه/شخص بهترین انتخاب باشد.سی‌اس‌اس شیءگرا ( Object-Oriented CSS (OOCSS) )نیکول سالیوان (Nicole Sullivan) این متدلوژی را در سال 2009 ارائه کرده است. می‌توان گفت این اولین متدلوژی است که برای CSS ارائه شده. OOCSS از جداسازی بدنه از نما حمایت می‌کند.این متدلوژی تفاوت مشخصی بین محتوا (Content) و دربرگیرنده آن‌ها (Containers) قائل می‌شود. در OOCSS، استایل‌ها تنها با استفاده از انتخاب کننده‌های (Selectors) کلاس نوشته می‌شود.مثال موافقاستایل عنصر buttonرا می‌توان با استفاده از دو کلاس تنظیم کرد:‌● .button ---> که ساختار پایه را برای button مشخص می‌کند‌● .grey-btn ---> رنگ و سایر مشخصات ظاهری را به آن اعمال می‌کند.‌CSS: .button { box-sizing: border-box; height: 50px; width: 100%; } .grey-btn { background: #EEE; border: 1px solid #DDD; box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; color: #555; }‌HTML:<button class=&quotbutton grey-btn&quot> یکی از اهداف OOCSS، کم کردن نوشتن ویژگی‌های تکراری در استایل‌های مختلف است. به بیانی دیگر OOCSS می‌تواند به ما کمک کند تا قانون DRY (Don't repeat yourself) را در کد خود پیاده کنیم. در OOCSS برای رسیدن به این هدف از تعداد زیادی کلاس‌های کوچک، ماژولار و تخصصی استفاده می‌کنیم.تعداد خیلی کمی از استایل‌ها با استفاده از انتخاب‌کننده‌های نوعی (type selectors) اعمال می‌شود.مثال مخالفدر OOCSS استفاده از انتخاب‌کننده‌های نسلی (descendant) توصیه نمی‌شود./* Descendant selectors are discouraged in OOCSS */ .wrapper .blog-post .button { ... }بدین ترتیب نمایش عناصر HTML شما هیچوقت وابسته به استفاده آن‌ها در یک زمینه مشخص یا ساختار DOM مشخص نیست.بهترین چیز در OOCSS این است که نویسنده را ملزم به استفاده حداکثری از رفتار آبشاری (cascading) CSS به‌جای جلوگیری از آن با استفاده از انتخاب‌کننده‌های با مختص‌سازی بالا (high-specificity) می‌کند.نویسنده تشویق می‌شود که در هر زمانی که امکان آن هست از استایل‌هایی که قبلا نوشته شده، به جای از نو نوشتن آن، دوباره استفاده کند. همچنین نویسنده تشویق می‌شود تا استایل‌های موجود را با استفاده از نوشتن کلاس‌های های جدید، به جای عوض کرد استایل‌های قدیمی، ارتقا دهد.مثال مخالفتصور کنید می‌خواهید به اولین آیتم در یک لیست غیر شماره‌گذاری شده (unordered list) رنگ متفاوت با بقیه آیتم‌ها بدهید.‌HTML:<!-- Counter-example --> <ul class=&quotto-do&quot> <li>Combine my CSS files</li> <li>Run CSS Lint</li> <li>Minify my stylesheet</li> </ul>‌CSS: /* Counter-example */ .to-do { color: #FFF; background-color: #000; } .to-do li:first-child { color: #FF0000; }مثال موافقبرای ماژولار و منعطف کردن کد CSS می‌توان مثال بالا را بدین ترتیب بازنویسی کرد:‌HTML:<!-- OOCSS --> <ul class=&quotto-do&quot> <li class=&quotfirst-to-do-item&quot>Combine my CSS files</li> <li>Run CSS Lint</li> <li>Minify my stylesheet</li> </ul>‌CSS: /* OOCSS */ .to-do { color: #FFF; background-color: #000; } .first-to-do-item { color: #FF0000; }شاید بتوان گفت بزرگترین مشکلی که متد OOCSS دارد این است که کد شما می‌تواند به طرز بدی دارای کلاس‌های زیادی شود که توسعه و مدیریت آن را سخت کند. ولی این بدین معنا نیست که OOCSS ناکارآمد است بلکه نقش یک عقل سلیم را دارد که توسعه CSS در مقیاس بزرگ را قابل تحمل و کمی راحت‌تر می‌کند.بلوک، عنصر، اصلاح‌کننده ( (BEM) Block, Element, Modifier )متدلوژی BEM، یک سیستم نام‌گذاری است که توسط تیم توسعه‌دهنده Yandex ارائه شده است. ایده‌ی اصلی پشت اسن سیستم، متمایز کردن کلاس‌های CSS براساس نقشی که ایفا می‌کنند است که این مهم با نام‌گذاری آن‌ها براساس نقش آن‌ها محقق می‌شود.درواقع BEM تکمیل کننده‌ی OOCSS است چون که OOCSS سیستم نام‌گذاری خاصی ارائه نمی‌کند. در واژه‌شناسی BEM، بلوک یک جزء ماژولار و مستقل از یک رابط کاربری است. یک بلوک می‌تواند از چندین عنصر HTML و یا چندین بلوک دیگر تشکیل شده باشد. هر بلوک یک هدف واحد و مشخص دارد.به طور مثال اگر شما یک بلوک منوی مسیریابی (navigation) داشته باشید، عناصر آن می‌تواند لینک‌های موجود در منوی مسیریابی باشند که در قالب آیتم‌های لیست (عنصر li) یا لینک‌ها (عنصر a) نمایش داده شوند. اصلاح‌کننده (modifier) یک کلاس CSS است که نمایش پیشفرص یک بلوک یا عنصر را تغییر می‌دهد.مثال سیستم نام‌گذاری BEM : ‌● .block‌● .block_modifier‌● .block__element‌● .block__element--modifierمثال مخالفکد زیر را ساختار یک فرم ثبت‌نام در نظز بگیرید:<form> <label>Username <input type=&quottext&quot name=&quotusername&quot /></label> <label>Password <input type=&quotpassword&quot name=&quotpassword&quot /></label> <button>Sign in</button> </form>مثال موافقتبدیل مثال بالا به روش BEM :<form class=&quotloginform loginform_errors&quot> <label class=&quotloginform__username loginform__username_error&quot> Username <input type=&quottext&quot name=&quotusername&quot /> </label> <label class=&quotloginform__password&quot> Password <input type=&quotpassword&quot name=&quotpassword&quot /> </label> <button class=&quotloginform__btn loginform__btn_inactive&quot> Sign in </button> </form>کلاس loginformیک بلوک است که از سه عنصر تشکیل شده: ‌● loginform__username ---> گرفتن نام کاربری‌● loginform__password ---> گرفتن رمزعبور‌● loginform__btn ---> ثبت فرمسه اصلاح‌کننده :‌● loginform__username_error ---> نمایش دادن ارور‌● loginform__btn_inactive ---> نمایش دادن حالت غیر فعال‌● loginform_error ---> نمایش دادن ارورسیستم نام‌گذاری BEM به نویسنده CSS کمک می‌کند تا قوانین OOCSS در مورد استفاده کردن از انتخاب‌کننده‌های غیر نسلی و دارای مختص‌سازی یکسان را رعایت کند.مثال مخالفبه جای استفاده از انتخاب‌کننده زیر :.loginform .username .error { ... }مثال موافقمی‌توان از این انتخاب‌کننده استفاده کرد :.loginform__username_error { ... }متد BEM یک سیستم قدرتمند در زمینه نام‌گذازی کلاس‌ها می‌باشد که به طور موفقیت آمیزی باعث متمایز کردن هر کلاس براساس نقش آن می‌شود.دو انتقادی که بعضی از افراد به متد BEM وارد می‌دانند :● اسامی کلاس‌ها می‌تواند طولانی و نازیبا شود.● این متد برای افراد تازه کار و دارای تجربه کم خیلی قابل فهم و درک نیست.معماری ماژولار و مقیاس‌پذیر سی‌اس‌اس ( Scalable and Modular Architecture for CSS (SMACSS) )جاناتان اسنوک (Jonathan Snook) کتاب معماری ماژولار و مقیاس‌پذیر سی‌اس‌اس را در سال 2011 منتشر کرد. ایده اصلی در این متدلوژی، نحوه دسته‌بندی استایل‌ها در CSS است.در این متدلوژی پنج دسته‌بندی داریم:● Baseاستایل‌هایی که ویژیگی‌های پیشفرض هر عنصر موجود در HTML را به صورت تکی تعیین می‌کند. این استایل‌ها معمولا با استفاده از انتخاب‌کننده‌های نوعی تعیین می‌شود:h1 { font-size: 32px; } div { margin: 0 auto; } a { color: blue; } ● Layoutاستایل‌هایی که مربوط به ساختار کلی و چیدمان صفحه است مانند کانتینرها، گرید و ... . این کلاس‌ها با پیشوند layoutیا l نام‌گذاری می‌شوند:.layout-sidebar { width: 320px; } .l-comments { width: 640px; }● Modulesاستایل‌های مربوط به جزءهای (components) قابل استفاده مجدد و ماژولار:.call-to-action-button { text-transform: uppercase; color: #FFF200; } .search-form { display: inline-block; background-color: E1E1E1; }● Stateاستایل‌هایی که حالت کنونی چیزی را در رابط کاربری تعیین می‌کنند:.is-hidden { display: none; } .is-highlighted { color: #FF0000; background-color: #F4F0BB; border: 1px solid #CBBD15; }● Themesاستایل‌هایی که layout و modules را تحت تاثیر قرار می‌دهد و با تنظیمات/اکشن‌های کاربر فعال می‌شود.متد SMACSS سیستم نام‌گذاری ساده‌تری از BEM را ارائه می‌دهد.مثال ‌موافقتصور کنید نام چیدمان (layout) ما l-footer است. یک ماژول فرم جستجو نیز داخل این چیدمان است که قبلا یکبار توسط کاربر ثبت شده: <section class=&quotl-footer&quot> <form class=&quotsearch is-submitted&quot> <input type=&quotsearch&quot /> <input type=&quotbutton&quot value=&quotSearch&quot> </form> </section> متد SMACSS نیز استفاده از انتخاب‌کننده‌های نسلی (descendant) را توصیه نمی‌کند. جانتان اسنوک این را با معرفی مفهومی به نام عمق قابل اجرا بودن (depth of applicability) توضیح می‌دهد. این مفهوم تماما در مورد محدود کردن تاثیر CSS بر روی ساختار HTML با استفاده از کلاس‌هایی که دقیقا عنصری که می‌خواهیم به آن استایل بدهیم، است.چند متدلوژی دیگر‌● SUIT CSS: ترکیب یک سیستم نام‌گذاری شبیه به BEM با پیش‌پردازنده‌های CSS‌● Systematic CSS‌● Atomic Design‌● DoCSSa‌● csstyleترجمه‌ای از مقاله A Look at Some CSS Methodologies مصطفی حسینی مصطفی حسینی Fri, 26 Aug 2022 17:07:12 +0430 https://virgool.io/@kavrin/%D9%81%D9%88%D9%86%D8%AA-%D8%A2%DB%8C%DA%A9%D9%88%D9%86-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A2%D9%86-%D9%87%D8%A7-uidknqkhtno6 در این مقاله درباره‌ی فونت‌آیکون صحبت و چند کتابخانه فونت‌آیکون را نیز معرفی می‌کنیم.فونت‌آیکون‌ها چیستند؟فونت‌آیکون‌ها، فونت‌هایی هستند که به جای اعداد و حروف دارای نماد‌ها و گلیف‌ها می‍باشند. این نوع فونت‌ها به دلیل اینکه به راحتی می‌توان استایل آن‌ها را با CSS تغییر داد، در بین توسعه‌دهندگان فرانت‌اند از محبوبیت زیادی برخوردارند. همچنین به دلیل اینکه از فرمت وکتور هستند، مقیاس‌پذیر نیز می‌باشند.مزایا و معایبفواید زیادی در استفاده از فونت‌آیکون در یک پروژه به جای تصویر (Image Bitmap). چند مورد از این فواید:● مانند فونت معمولی هر نوع تنطیمات CSS را می‌توان بر روی آن‌ها اعمال کرد.● چون از فرمت گرافیکی ویکتور هستند، مقیاس‌پذیزند. یعنی می‌توان به راحتی آن‌ها را کوچک و بزرگ کرد بدون اینکه در کیفیت آن‌ها تغییری ایجاد شود.● برای بارگذاری آن‌ها از یک یا تعداد کمی HTTP request استفاده می‌شود.● به خاطر حجم کمترشان سرعت بارگذاری بالاتری دارند.● در تمام مرورگرها پشتیبانی می‌شوند.فونت‌آیکون‌ها روشی عالی برای بهتر کردن طراحی هستند ولی محدودیت هایی نیز دارند. به طور مثال اگر میخواهید به جای آیکون ساده یک تصویر پیچیده نمایش دهید، استفاده از فونت‌آیکون روش مناسبی نیست.فونت‌آیکون‌ها بر اساس گریدهای (Grid) خاصی طراحی شده‌اند و اگر به هر دلیلی سیستم گرید آن‌ها را تغییر دهید، ممکن است نتیجه مناسبی نداشته باشد.کتابخانه‌ها● ‌Font Awesomeکتابخانه Font Awesome یک مجموعه غنی از 439 آیکون است. این کتابخانه چه برای استفاده شخصی چه برای استفاده تجاری کاملا رایگان است. Font Awesome در اصل برای Bootstrap ساخته شده بود ولی مشکلی در استفاده از آن با دیگر فریم‌ورک‌ها وجود ندارد. مطالعه بیشترنمونه کد html :<li> <a href=&quot#&quot data-name=&quotHome&quot> <i class=&quotfa fa-home fa-2x&quot></i> </a> </li> <li> <a href=&quot#&quot data-name=&quotAbout&quot> <i class=&quotfa fa-bullhorn fa-2x&quot></i> </a> </li>نمونه کد CSS :nav li { background: #ededed; height: 80px; width: 80px; line-height: 80px; text-align: center; } nav li:not(:first-child) { margin-top: 1px; } nav li a { outline: none; position: relative; width: 100%; height: 100%; } nav i { color: steelblue; vertical-align: middle; } nav li a:after { background: #ededed; content: attr(data-name); display: none; margin-left: 1px; width: 160px; height: 80px; left: 80px; position: absolute; font-size: 1.2em; } nav li a:hover:after { display: inline-block; }نتیجه : https://codepen.io/SitePoint/embed/MWPzZj?default-tab=result&height=517&name=cp_embed_1&slug-hash=GFspr&theme-id=6441&user=SitePoint#result-box ● ‌IcoMoonکتابخانه IcoMoon نیز یک کتابخانه معروف فونت‌آیکون است. این کتابخانه دو پک دارد یک پک رایگان و یک پک پرمیوم. بسته به پک مورد نظر تعداد آیکون‌ها متفاوت است. پک رایگان دارای 450 آیکون و پک پرمیوم 1266 آیکون دارد.همچنین این کتابخانه یک اپلیکیشن آنلاین که کاربر می‌تواندآیکون مورد نظر خود را جستجو و دانلود کند.مطالعه بیشترنمونه کد html : <li> <span class=&quoticon-pencil&quot></span> Analyze </li> <li> + </li> <li> <span class=&quoticon-paint-format&quot></span> Design </li> <li> + </li>نمونه کد CSS : section li:nth-child(even) { color: #ededed; width: 6%; font-size: 2.5em; height: 63px; margin-top: 31.5px; line-height: 63px; } section span { padding: 15px 0; font-size: 5em; display: block; color: steelblue; transition: all .2s ease-in-out; } section li:hover span { transform: translateY(-10px); }نتیجه : https://codepen.io/SitePoint/embed/xxyQep?default-tab=result&height=255&name=cp_embed_4&slug-hash=nIHkm&theme-id=6441&user=SitePoint#result-box برخی دیگر از کتابخانه‌ها‌● Entypo‌● Flaticon‌● Icofont‌● Flaticon‌● Flaticon‌● Flaticon مصطفی حسینی مصطفی حسینی Mon, 22 Aug 2022 23:23:58 +0430 https://virgool.io/@kavrin/%D9%88%D8%A7%D8%AD%D8%AF%D9%87%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%AF%D8%B1-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-css-measurement-units-bihs0syjih2a در این مقاله سعی داریم واحدهای اندازه‌گیری موجود در سی‌اس‌اس را معرفی کرده و درباره شباهت‌ها و تفاوت‌های آنها صحبت کنیم.واحدهای مطلق (Absolute Length Units)این نوع واحدهای اندازه‌گیری به چیز دیگری وابسته نیستند و عموماً در دستگاه‌های (Devices) مختلف، برابر در نظر گرفته می‌شوند.‌px.wrap { width: 400px; }واحد پیکسل، یکی از پر استفاده‌ترین واحد اندازه‌گیری در سی‌اس‌اس است. 1 پیکسل برابر با 1/96 دهم اینچ (0.0104166667 اینچ ⁓ 0.021 سانتی متر ) می‌باشد.نکته: واحد پیکسلی که در سی‌اس‌اس استفاده می‌شود یک اندازهٔ رادیانی است و با پیکسل موجود در صفحه نمایش دستگاه‌ها تفاوت دارد. مطالعه بیشتر‌in.wrap { width: 4in; }1 اینچ برابر 96 پیکسل (2.54 سانتی‌متر) است.‌cm.wrap { width: 20cm; }1 سانتی‌متر برابر با 37.8 پیکسل است.‌mm.wrap { width: 200mm; }1 میلی‌متر برابر 3.78 پیکسل است.‌pt (Points).wrap { width: 120pt; }1 پوینت برابر 1.33 پیکسل و 1/72 دهم اینچ است. pt یک واحد اندازه‌گیری مرسوم متنی خارج از دنیای سی‌اس‌اس و برای چاپ صفحات است ولی محدودیتی در استفاده از آن در سی‌اس‌اس وجود ندارد.‌pc (Pica).wrap { width: 12pc; }پیکا نیز مشابه پوینت است با این تفاوت که 1pc برابر 12pt است.واحدهای وابسته (Relative Length Units)واحدهای وابسته به تنظیمات یا اندازه‌ی عنصرهای دیگر وابسته هستند. به طور مثال اندازه‌ی متن یک عنصر ممکن است با استفاده از اندازه‌ی متن عنصر مادر اندازه‌گیر شود.‌em.wrap { width: 40em; }واحد em در اصل یک واحد اندازه‌گیری در تایپوگرافی است که براساس عرض حرف M (به صورت Capital) در یک تایپ‌فیس (طرح حروف یا خانواده قلم) و اندازه قلم محاسبه می‌شود.در سی‌اس‌اس زمانی که em برای font-size استفاده می‌شود، 1em برابر اندازه‌ی قلم عنصر مادر است:.container { font-size: 16px; } .container p { font-size: 1em; } .container h2 { font-size: 3em; } .container h3 { font-size: 2em; }در مثال بالا، اندازه‌ی قلم p برابر 16px (16 * 1)، اندازه‌ی قلم h2 برابر 48px (16 * 3) و h3 برابر 32px (16 * 2) است.زمانی که em برای ویژگی غیر از font-size استفاده شود (مانند width) 1em برابر اندازه‌ی قلم خود عنصر است.نکته حائز اهمیت در زمان استفاده از واحد em این است که این واحد در زمان استفاده در برای font-size می‌تواند در خودش ضرب شود. به طور مثال کد html زیر را در نظر بگیرید:<nav> <div> <p> </p> </div> </nav>اگر اندازه‌ی قلم در هر سه عنصر برابر 1.1em باشد، اندازه‌ی قلم واقعی و به نمایش درآمده در p (اگر اندازه‌ی قلم پیش‌فرض را 16px در نظر بگیریم) برابر ⁓ 21 پیکسل است (1.1 * 1.1 *1.1 * 16).‌rem.wrap { width: 40rem; }واحد rem برابر اندازه‌ی واحد em عنصر منشأ است. این واحد تحت تأثیر اندازه یا تنظیمات عنصر مادر نیست، در عوض براساس منشأ سند است و منشأ سند در یک وبسایت عنصر html می‌باشد. در بیشتر مرورگرها اندازه‌ی قلم پیش‌فرض برابر 16px است بنابراین 1rem برابر 16px می‌شود. اگر کاربر این اندازه را تغییر دهد، 1rem نیز به همان اندازه کم یا زیاد می‌شود.‌%‌.wrap { width: 50%; }درصد نیز یک واحد پراستفاده است که بر اساس اندازه‌ی عنصر مادر محاسبه می‌شود:div { width: 400px; } div p { width: 75%; }اندازه‌ی p برابر 300px است (400 * 0.75).‌vw.wrap { width: 10vw; }یک واحد vw برابر 1% عرض ویوپورت (viewport، اندازه‌ی پنجره مرورگر) است. اگر اندازه‌ی ویوپورت تغییر کند، مقدار محاسبه شده این اندازه نیز تغییر می‌کند.‌vh.wrap { width: 10vw; }یک واحد vh برابر 1% ارتفاع ویوپورت است.‌ex.wrap { width: 60ex; }واحد ex بر اساس اندازه حرف x در قلم فعلی است. در سی‌اس‌اس 1ex برابر اندازه حرف x یا، در صورت اینکه مرورگر نتواند این اندازه را از قلم بگیرد، برابر 0.5em است.از آنجایی که اندازه حرف x می‌تواند در قلم‌های مختلف اندازه متفاوتی داشته باشد، این واحد استفاده زیادی ندارد. ‌ch.wrap { width: 60ch; }واحد ch (Character Unit) نیز مشابه واحد ex با این تفاوت که اندازه‌ی آن بر اساس عرض کاراکتر 0 (صفر یا U+0030) در قلم مورد استفاده است.البته ch تفاوت دیگری نیز با ex دارد آن هم این است که در یک سری از قلم‌ها عرض تمام کارکاترها به یک اندازه‌است (مانند قلم Courier) ولی در بقیه قلم‌ها به یک اندازه نیستند (مانند Helvitca).‌vmin و vmax.wrap { width: 20vmin; }.wrap { width: 20vmax; }واحد vmin برابر کمینه (Minimum) اندازه بین vh و vw و vmax برابر بیشینه این دو است.منابع● CSS values and units● CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained● The Lengths of CSS● What is the CSS ‘ch’ Unit? مصطفی حسینی مصطفی حسینی Thu, 18 Aug 2022 17:01:06 +0430 https://virgool.io/@kavrin/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%DA%AF%D8%B1%DB%8C%D8%AF-css-grid-clqtiafvavif در این پست سعی می‌کنیم سی‌اس‌اس گرید را معرفی کرده و نگاهی به ویژگی‌های آن داشته باشیم.سی‌اس‌اس گرید چیست؟چیدمان سی‌سی‌اس گرید (به طور اختصار; گرید)، یک سیستم چیدمان دوبعدی است که، در مقایسه با تمامی سیستم‌های چیدمان قبلی در طراحی وبسایت‌ها، به طور کامل نحوه طراحی رابط کاربری را دگرگون کرده است.هر کدام از روش‌هایی که در گذشته (tables, floats, inline-block...) استفاده می‌شد در واقعا نوعی هک بودند کارکرد اصلی آن‌ها برای چیدمان صفحه نبود و به همین دلیل در اکثر مواقع نتیجه دلخواه را در پی نداشت.فلکس‌باکس(Flexbox) نیز یک ابزار عالی ولی یک سیستم چیدمان یک بعدی است. البته Flexbox و Grid دو ابزاری هستند که می‌توانند به خوبی با یکدیگر کار کنند. از ماه مارچ سال 2017، بیشتر مرورگرها گرید را پشتیبانی می‌کنند. گرید یکی از قدرتمندترین ماژول‌های سی‌اس‌اس است که تا به حال معرفی شده.برای شروع کار با گرید، باید یک المنت(Element) کانتینر(Container) را به صورتdisplay: grid، اندازه سطر(Row) و ستون‌ها(Column) را با grid-template-columns و grid-template-rows و المنت‌های زیر مجموعه را با grid-column و grid-row تعریف کنید.مشابه Flexbox، ترتیب اصلی آیتم‌های گرید اهمیتی ندارد. کد سی‌اس‌اس شما می‌تواند آن‌ها با هر ترتیبی جای‌گذاری کند که این قابلیت استفاده از گرید به همراه مدیا کوئری(Media Query) بسیار آسان می‌کند.واژه‌شناسیقبل از پرادختن به مفاهیم اصلی، بهتر است با یک سری از واژه‌ها و اصطلاحات مهم آشنا شویم. از آنجایی که این اصطلاحات به طور مفهومی به یکدیگر شبیه هستند، اگر معانی آنها را در راتباط با گرید ندانید، ممکن است آنها را با یکدیگر اشتباه بگیرید.‌Grid Containerالمنتی که بر روی آن display: gridاعمال می‌شود. این المنت، والد مستقیم آیتم‌های گرید است. در این مثال container ، کانتینر گرید است.<div class=&quotcontainer&quot> <div class=&quotitem item-1&quot> </div> <div class=&quotitem item-2&quot> </div> <div class=&quotitem item-3&quot> </div> </div>‌Grid Itemفرزند یا فرزندان گرید کانتینر. در مثال زیر، المنت‌های item، آیتم‌های گرید هستند ولی المنت sub-itemنه.<div class=&quotcontainer&quot> <div class=&quotitem&quot> </div> <div class=&quotitem&quot> <p class=&quotsub-item&quot> </p> </div> <div class=&quotitem&quot> </div> </div>‌Grid Lineخط‌های جدا کننده‌ای که ساختار گرید را تشکیل می‌دهند. این خط‌ها می‌توانند عمودی(column grid lines) یا افقی(row grid lines) باشند و در هر طرف از سطر یا ستون قرار بگیرند.‌Grid Cellفضای بین دو خط افقی (row grid lines) مجاور و دو خط عمودی (column grid lines) مجاور که یک واحد گرید است.‌Grid Trackفضای بین دو خط گرید مجاور. می‌توان به آن به عنوان یک سطر یا یک ستون گرید نگاه کرد.‌Grid Areaفضایی که توسط چهار خط گرید محاصره شده. می‌تواند از هرتعداد سلول (Grid Cell) تشکیل شده باشد.ویژگی‌هاویژگی‌های مخصوص کانتینر (Grid Container)● displayتعریف یک المنت یه عنوان به عنوان کانتینر گرید.مقادیر:▪ grid -- block-level grid▪ inline-grid -- inline-level grid● grid-template-columns, grid-template-rowsتعریف سطرها و ستون‌های گرید به وسیله لیستی از مقادیر که با فاصله از یکدیگر جدا شده‌اند. مقادیر نشان دهنده اندازه Grid Track هستند و فاصله‌ها نشان دهنده‌ی Grid Line .مقادیر:▪ <track-size> -- می‌تواند طول، درصد، یا کسری(با استفاده از واحد fr ) از فضای خالی موجود در گرید باشند.▪ <line-name> -- نامی دلخواه برای خط گرید(اختیاری) .container { grid-template-columns: ... ...; /* e.g. 1fr 1fr minmax(10px, 1fr) 3fr repeat(5, 1fr) 50px auto 100px 1fr */ grid-template-rows: ... ...; /* e.g. min-content 1fr min-content 100px 1fr max-content */ }خط‌های گرید به صورت خودکار، اعداد مثبت نام‌گذاری می‌شوند. برای خط آخر از 1- نیز می‌توان استفاده کرد.هر خط را به طور اختصاصی نیز می‌توان نام‌گذاری کرد..container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }هر خط می‌تواند بیشتر از یک نام داشته باشد..container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }از تابع repeat نیز می‌توان برای تعریف قسمت‌های یکسان استفاده کرد..container { grid-template-columns: repeat(3, 20px [col-start]); } /*معادل*/ .container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; }واحد fr این اجازه را به ما می‌دهد تا اندازه track را به عنوان کسری از فضای خالی موجود در گرید مشخص کنیم.در مثال زیر مقدار عرض هر آیتم برابر یک سوم کل اندازه گرید تعریف شده است..container { grid-template-columns: 1fr 1fr 1fr; }فضای خالی بعد از مشخص شدن اندازه هر یک از آیتم هایی که اندازه آنها متغیر نیست، محاسبه می‌شود.‌● grid-template-areasتعریف یک تمپلیت گرید به وسیله ارجاع دادن به اسم سطوح گرید که با ویژگی grid-area تعریف شده است. تکرار اسم سطح گرید باعث می‌شود که محتوای آن سطح در سلول‌های بعدی ادامه پیدا کند. نقطه نیز نشان دهنده‌ی سلول خالی است.مقادیر:▪ <grid-area-name> -- نامی که به وسیله ویژگی grid-area مشخص شده است.‌▪ . -- نقطه نشان دهنده فضای خالی است.▪ <none> -- هیچ سطح گریدی تعریف نشده است..container { grid-template-areas: &quot<grid-area-name> | . | none | ...&quot &quot...&quot }مثال:.item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: &quotheader header header header&quot &quotmain main . sidebar&quot &quotfooter footer footer footer&quot }مثال بالا یک گرید با 4 ستون و 3 سطر می‌سازد:هر یک از سطرها باید تعداد سلول‌هایش با دیگر سطرها یکی باشد.‌‌● grid-templateیک ویژگی خلاصه شده که شامل grid-template-columns ، grid-template-rows و grid-template-areas می‌شود.مقادیر:▪ none -- هر سه ویژگی را برابر مقدار پیش‌فرض قرار می‌دهد.▪ <grid-template-rows> / <grid-template-columns> -- مقادیر grid-template-columns و grid-template-rows را مشخص می‌کند و مقدار grid-template-areas را برابر none قرار می‌دهد.container { grid-template: none | <grid-template-rows> / <grid-template-columns>; }مشخص کردن هر سه ویژگی:.container { grid-template: [row1-start] &quotheader header header&quot 25px [row1-end] [row2-start] &quotfooter footer footer&quot 25px [row2-end] / auto 50px auto; /*معادل*/ .container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; grid-template-areas: &quotheader header header&quot &quotfooter footer footer&quot }● column-gap, row-gap, grid-column-gap, grid-row-gapتعریف اندازه خط‌های گرید. می‌توان از آن به عنوان فاصله بین سلول‌ها استفاده کرد.مقادیر:▪ <line-size> -- یک مقدار اندازه‌گیری طولی..container { /* standard */ column-gap: <line-size>; row-gap: <line-size>; /* old */ grid-column-gap: <line-size>; grid-row-gap: <line-size>; }مثال:.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; }‌● gap, grid-gapخلاصه شده‌ی row-gapو column-gapمقادیر:▪ <grid-row-gap> <grid-column-gap> .container { /* standard */ gap: <grid-row-gap> <grid-column-gap>; /* old */ grid-gap: <grid-row-gap> <grid-column-gap>; }مثال:.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; gap: 15px 10px; }‌● justify-itemsآیتم‌های گرید در راستای محور افقی تراز می‌کند. بر روی تمام آیتم‌های داخل گرید اعمال می‌شود.مقادیر:▪ start▪ end▪ center▪ stretchمثال‌ها:.container { justify-items: start; }.container { justify-items: end; }.container { justify-items: center; }.container { justify-items: stretch; }این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از justify-self اعمال کرد.‌● align-itemsآیتم‌های گرید در راستای محور عمودی تراز می‌کند. بر روی تمام آیتم‌های داخل گرید اعمال می‌شود.مقادیر:▪ start▪ end▪ center▪ stretch▪ baseline -- تراز کردن آیتم‌ها در راستای baseline متنمثال‌ها:.container { align-items: start; }.container { align-items: end; }.container { align-items: center; }.container { align-items: stretch; }این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از align-self اعمال کرد.‌● place-itemsاعمال همزمان align-items و justify-items.مقادیر:▪ <align-items> / <justify-items> -- اولین مقدار برای align-items و دومین مقدار برای justify-items است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود..center { display: grid; place-items: center; }‌● justify-contentدر بعضی از مواقع اندازه گرید می‌تواند کوچکتر از اندازه کانتینر آن باشد. به طور مثال در مواقعی که اندازه آیتم‌ها با واحدی انعطاف‌ناپذیر(مانند px) مشخص شده باشد. در این مواقع می‌توان کل گرید در هر یک از راستاها، با کانتینر تراز کرد.این ویژگی گرید را در راستای افقی تراز می‌کند.مقادیر:▪ start▪ end▪ center▪ stretch▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }مثال‌ها:.container { justify-content: start; }.container { justify-content: end; }.container { justify-content: center; }.container { justify-content: stretch; }.container { justify-content: space-around; }.container { justify-content: space-between; }.container { justify-content: space-evenly; }● align-contentاین ویژگی گرید را در راستای عمودی تراز می‌کند.مقادیر:▪ start▪ end▪ center▪ stretch▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }مثال‌ها:.container { align-content: start; }.container { align-content: end; }.container { align-content: center; }.container { align-content: stretch; }.container { align-content: space-around; }.container { align-content: space-between; }.container { align-content: space-evenly; }● place-contentاعمال همزمان justify-content و align-content.مقادیر:▪ <align-content> / <justify-content> -- اولین مقدار برای align-content و دومین مقدار برای justify-content است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود.● grid-auto-columns, grid-auto-rowsاندازه هر grid track که به صورت اتوماتیک (implicit grid tracks) درست شده است. زمانی ایجاد می‌شود که تعداد آیتم‌های بیشتری نسبت به سلول‌ها، در گرید وجود دارد یا اینکه محل قرارگیری یک آیتم خارج از گرید مشخص شده است.مقادیر:▪ <track-size>.container { grid-auto-columns: <track-size> ...; grid-auto-rows: <track-size> ...; }مثال:.container { grid-template-columns: 60px 60px; grid-template-rows: 90px 90px; }حالا تصور کنید که با استفاده از ویژگی‌های grid-column و grid-row، محل قرارگیری آیتم‌ها را اینگونه تعریف می‌کنید:.item-a { grid-column: 1 / 2; grid-row: 2 / 3; } .item-b { grid-column: 5 / 6; grid-row: 2 / 3; }ما محل قرارگیری T را بین خط ستون 5 و 6 در نظر گرفتیم ولی خود این خطوط را تعریف نکرده‌ایم. به همین خاطر سطوحی با اندازه صفر تولید شده‌اند تا این فاصله ایجاد شده را جبران کنند. از grid-auto-rows و grid-auto-columns برای تعیین اندازه این سطوح می‌توان استفاده کرد..container { grid-auto-columns: 60px; }● grid-auto-flowاگر آیتم‌هایی داریم که به صورت صریح محل قرارگیری آنها مشخص نشده، الگوریتم جای‌گذاری خودکار محل قرارگیری این آیتم‌ها را مشخص می‌کند.مقادیر:▪ row -- به الگوریتم می‌گوید که به ترتیب هر سطر را پر کند و اگر در صورت نیاز سطر جدید اضافه کند (پیش‌فرض)▪ row -- به الگوریتم می‌گوید که به ترتیب هر ستون را پر کند و اگر در صورت نیاز ستون جدید اضافه کند ▪ dense -- به الگوریتم می‌گوید که در صورت اضافه‌شدن آیتم، سعی کند فضاهای ابتدایی را پر کند. .container { grid-auto-flow: row | column | row dense | column dense; }مثال:این کد HTML را در نظر بگیرید:<section class=&quotcontainer&quot> <div class=&quotitem-a&quot>item-a</div> <div class=&quotitem-b&quot>item-b</div> <div class=&quotitem-c&quot>item-c</div> <div class=&quotitem-d&quot>item-d</div> <div class=&quotitem-e&quot>item-e</div> </section>تعریف یک گرید با پنج ستون و دو سطر و تعیین مقدار row برای grid-auto-flow:.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; }زمان مشخص کردن محل قرارگیری آیتم‌ها، فقط محل دو آیتم را مشخص می‌کنیم:.item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; }به دلیل اینکه مفدار grid-auto-flow را row قرار دادیم، چینش آیتم‌ها به این صورت می‌شود:اگر به جای مقدار row مقدار columnرا قرار می‌دادیم، چینش آتیم‌ها بدین صورت می‌شد:● gridویژگی خلاصه‌ای برا تنظیم همزمان grid-auto-columns، grid-auto-rows، grid-template-areas، grid-template-columns، grid-template-rows و grid-auto-flowمثال:.container { grid: 100px 300px / 3fr 1fr; } /*↓معادل↑*/ .container { grid-template-rows: 100px 300px; grid-template-columns: 3fr 1fr; }.container { grid: auto-flow / 200px 1fr; } /*↓معادل↑*/ .container { grid-auto-flow: row; grid-template-columns: 200px 1fr; }.container { grid: auto-flow dense 100px / 1fr 2fr; } /*↓معادل↑*/ .container { grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; }.container { grid: 100px 300px / auto-flow 200px; } /*↓معادل↑*/ .container { grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px; }ویژگی‌های مخصوص آیتم‌ها (Grid Items)● grid-column-start, grid-column-end, grid-row-start, grid-row-endمشخص کردن محل قرارگیری آیتم در داخل گرید با استفاده از خطوط گرید.مقادیر:▪ <line> -- می‌تواند عدد یا اسم باشد.▪ span <number> -- آیتم تا شماره خط اعلام شده گسترش پیدا می‌کند. ▪ span <name> -- آیتم تا اسم خط اعلام شده گسترش پیدا می‌کند. ▪ auto.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; }مثال‌ها:.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }● grid-column, grid-rowخلاصه شده‌ای برای grid-column-end + grid-column-start و grid-row-end + grid-row-start.مقادیر:▪ <start-line> / <end-line>.item { grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; }مثال:.item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }● grid-areaمشخص کردن نام برای یک آیتم تا از آن در ویژگی grid-template-areas استفاده شود.مقادیر:▪ <name>▪ <row-start> / <column-start> / <row-end> / <column-end>.item { grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; }مثال:.item-d { grid-area: 1 / col4-start / last-line / 6; }● justify-selfتراز کردن آیتم در راستای محور افقی.مقادیر:▪ start▪ end▪ center▪ stretch.item { justify-self: start | end | center | stretch; }مثال‌ها:.item-a { justify-self: start; }.item-a { justify-self: end; }.item-a { justify-self: center; }.item-a { justify-self: stretch; }● align-selfتراز کردن آیتم در راستای محور عمودی.مقادیر:▪ start▪ end▪ center▪ stretch.item { align-self: start | end | center | stretch; }مثال‌ها:.item-a { align-self: start; }.item-a { align-self: end; }.item-a { align-self: center; }.item-a { align-self: stretch; }● place-selfتعیین همزمان مقادیر align-self و justify-self.مقادیر:▪ auto▪ <align-self> / <justify-self>مثال‌ها:.item-a { place-self: center; }.item-a { place-self: center stretch; }ترجمه‌ای از مقاله A Complete Guide to Grid مصطفی حسینی مصطفی حسینی Tue, 16 Aug 2022 01:37:49 +0430 https://virgool.io/@kavrin/%D9%87%D8%A7%D8%B3%D8%AA-%D9%88-%D8%AF%D8%A7%D9%85%DB%8C%D9%86-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D9%87-%D8%AA%D9%81%D8%A7%D9%88%D8%AA%DB%8C-%D8%A8%DB%8C%D9%86-%D8%A2%D9%86%D9%87%D8%A7-%D8%A7%D8%B3%D8%AA-bh6fwyd5cdiu برای افراد شاید برای افرادی که برای اولین بار اسم دامین و هاست را می‌شنوند این دو شبیه به به نظر برسند ولی در واقع تفاوت زیادی با هم دارند. برای به راه انداختن یک وبسایت شما به دامین و هاست نیازمندید. در این مقاله سعی می‌کنیم دامین و هاست و تفاوت آنها را توضیح دهیم.دامین چیست؟دامین یک آدرس هست که کاربران اینترنت می‌توانند از طریق آن به وبسایت شما دسترسی داشته باشند.مثال: google.comvirgool.iogithub.comیک دامین می‌تواند هر ترکیبی از کلمات و اعداد باشد ولی هر کدام منحصر به فرد و دارای پسوندهای خاصی مانند com , .net. و ... هستند.دامین‌ها توسط شرکت‌های ارائه دهنده آنها کنترل می‌شود. شرکت‌های ارائه دهنده دامین وظیفه کنترل ثبت دامین، مالکیت و اطلاعات DNS آن را بر عهده دارند.هاست و خدمات هاستینگ چیست؟هاستینگ خدماتی است که توسط شرکت‌هایی که چندین سرور متصل به اینترنت دارند، ارائه می‌شود. سرور یک کامپیوتر است که می‌تواند در هر کجای دنیا باشد، فضای ذخیره سازی زیاد و بک آپ در اختیار دارد. هاست مکانی است دامین و فایل‌های وبسایت یا اپلیکیشن شمل در آن ذخیره می‌شود.تفاوت هاست و دامین چیست؟همانطور که در بالا گفته شد، هاست یک فضای ذخیره سازی برای اطلاعات وبسایت و دامین است، دامین آدرسی است که کاربر برای دسترسی به وبسایت از آن استفاده می‌کند.برای درک بهتر می‌توان وبسایت را یک شخص در نظر گرفت، هاست خانه‌ی آن شخص و دامین آدرس آن خانه است. بنابراین برای داشتن یک وبسایت شما نیاز به یک دامین و یک هاست برای ذخیره سازی فایل‌ها و اطلاعات وبسایت دارید.تفاوت URL و دامین چیست؟اگر چه این دو به طور ظاهری شبیه به هم هستند ولی در واقع با یکدیگر تفاوت دارند. دامین نام یک وبسایت است (مانند: mydomain.com) ولی URL آدرس دقیقی است شما را به یک صفحه خاص از وبسایت هدایت می‌کند (مانند: https://www.mydomain.com/blog) .با استفاده از مثالی که بالا گفته شد، اگر دامین آدرس خانه باشد، URL می‌تواند شرح یک اتاق از آن خانه باشد.دامین چگونه کار می‌کند؟طرحی محاسباتی از بخشی از شبکه اینترنتاینترنت شبکه عظیمی از کامپیوترها است که توسط شبکه‌های کابلی به یک دیگر متصل هستند. هر کامپیوتر یک آدرس IP منحصر به فرد دارد. IP مجموعه‌ای از اعداد است که برای شناسایی هر کامپیوتر به کار می‌رود، مثال: .192.168.1.1 .به خاطر سپردن یک IP می‌تواند سخت باشد و دامین‌ها برای حل این مشکل ساخته شده شده‌اند. زمانی که کاربر یک دامین را در مرورگر وارد می‌کند، یک درخواست به DNS (سامانهٔ نام دامنه Domain Name System) ارسال می‌شود. زمانی سرور DNS درخواست شما را دریافت می‌کند، سرورهای مرتبط با دامین را جستجو کرده و درخواست را به آنها منتقل می‌کند.شرکتی که خدمات هاستینگ را از آنها خریداری کرده‌اید، درخواست را به سروری که فایل‌ها و اطلاعات وبسایت در آن ذخیره شده ارسال می‌کند و سرور پس از جمع‌آوری اطلاعات آنها را به مرورگر ارسال می‌کند و در آخر این اطلاعات به کاربر نمایش داده می‌شود.سامانهٔ نام دامنه (DNS) چیست؟هر دامین باید به یک سرور DNS متصل باشد. سرور DNS آدرس IP هاستی که دامین در آن قرار دارد را مشخص می‌کند. هر ارائه دهنده اینترنت یک DNS Resolver (حل کننده DNS) دارد. DNS Resolver چیزی است که از سرور DNS اطلاعات را درخواست می‌کند. به طور مثال زمانی که شما می‌خواهید به یک وبسایت مانند ویرگول از طریق موبایل خود دسترسی پیدا کنید، موبایل شما آدرس IP ویرگول را از DNS Resolver درخواست می‌کند و سپس DNS Resolver از سرور DNS که دامین در آن قرار دارد آدرس IP را می‌پرسد.در آخر DNS Resolver آدرس IP سروری که ویرگول در آن قرار دارد را به موبایل شما می‌دهد و مرورگر به طور مستقیم به آدرس IP ارائه شده درخواست اطلاعات را می‌فرستد.منابعWhat is a domain name?Domain Name SystemInternet مصطفی حسینی مصطفی حسینی Wed, 10 Aug 2022 14:46:23 +0430 https://virgool.io/@kavrin/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%86%D9%87-%D9%85%DB%8C-%DA%A9%D9%86%D8%AF-crgxt1viapkb اگر که تازه با دنیای برنامه‌نویسی آشنا شده باشید، شاید اصطلاح فرانت اند به گوشتون خورده باشه. در این مقاله سعی میکنم این اصطلاح و مباحث مرتبط با اون توضیح بدم.فرانت اند چیست؟توسعه سمت کاربرِ وب (به انگلیسی: Front End web development) عمل برنامه‌نویسی اچ‌تی‌ام‌ال(HTML)، سی‌اس‌اس(CSS) و جاوااسکریپت(JavaScript) برای تولید یک سایت یا یک برنامه کاربردی وب است که به‌طور مستقیم یک کاربر می‌تواند آن را ببیند و با آن در تعامل باشد. ویکی‌پدیابه طور کلی هر چیزی که در یک وبسایت می‌بینید، مثل دکمه‌ها، لینک‌ها، انیمیشن و...، توسط یک توسعه دهنده فرانت اند ساخته شده. وظیفه توسعه دهنده فرانت اند اینه که طرح یک طراح رابط کاربری(UI Designer) رو با استفاده از ابزارهای برنامه‌نویسی تبدیل به یک صفحه وبسایت بکنه تا کاربر اون رو ببینه و بتونه با اون ارتباط برقرار کنه. همچنین توسعه دهنده هنگام طراحی یک وبسایت، باید مطمئن بشه که طراحی اون در همه دستگاه‌ها(لپ‌تاپ، موبایل و ...) خوب و قابل دسترسی باشه.مهارت‌های مورد نیاز یک توسعه‌دهنده فرانت اند چیست؟سه ابزار اصلی یک توسعه‌دهنده فرانت اند اچ‌تی‌ام‌ال(HTML)، سی‌اس‌اس(CSS) و جاوااسکریپت(JavaScript) هستند.اچ‌تی‌ام‌ال(HTML)‌کلمه HTML مخفف HyperText Markup Language به معنی زبان نشانه‌گذاری فرامتنی هست. وظیفه HTML نشانه‌گذاری محتوای صفحه با استفاده از برچسب‌ها(Tag) برای توصیف نحوه نمایش اون صفحه روی مرورگرهای وب هست.نمونه کد HTML :<html> <head> <title>Href Attribute Example</title> </head> <body> <h1>Href Attribute Example</h1> <p> <a href=&quothttps://www.freecodecamp.org/contribute/&quot>The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth. </p> </body> </html>سی‌اس‌اس(CSS)‌کلمه CSS مخفف Cascading Style Sheets به معنی شیوه‌نامه آبشاری هست. وظیفه CSS توصیف ظاهر صفحه‌ای هست که با HTML نوشته شده، مثل رنگ‌ها، نوع قلم، اندازه‌ها و ... .نمونه کد CSS :body { background-color: blue; } h1 { background–color: purple; }بخشی از صفحه اصلی ویرگول بدون CSS :جاوااسکریپت(JavaScript)جاوااسکریپت این اجازه رو به کاربر می‌ده که بتونه با صفحه ارتباط برقرار کنه. برای مثال اگر در بالای همین صفحه دکمه جستجو رو بزنید، منوی جستجو وارد صفحه میشه و اگه دکمه خروج رو بزنید از صفحه خارج میشه.این یه مثال ساده از کارکرد جاوااسکریپت هست و در عمل هرنوع عملکردی که در یک صفحه وبسایت هست به وسیله جاوااسکریپت انجام میشه.به طور کلی میشه گفت HTML نقش بنای یک ساختمان، CSS نقش ظاهر و نمای اون و JavaScript نقش عملکرد(Functionality) اون رو داره.منابعFront End Developer – What is Front End DevelopmentFront-end web developmentHTMLCSSJavaScript مصطفی حسینی مصطفی حسینی Sun, 07 Aug 2022 14:51:41 +0430