#javascript

🔸Best-practices JavaScript

🔹این pdf درباره بهترین شیوه های جاوااسکریپت هست.
✍🏽 ¦ @DevYara

#javascript

🟠 برگه تقلب جاوااسکریپت

• مناسب برای مرور کوتاه و مختصر روی کلیات.🔥

✍🏽 ¦ @DevYara

#Vs | #vsCode | #WebStorm

🔥 مقایسه نهایی ادیتورهای کد برای توسعه‌دهندگان وب: VSCode vs. WebStorm

👨‍💻 امروز می‌خواهیم به بررسی دو گزینه محبوب و قدرتمند بپردازیم: #VSCode و #WebStorm! 🚀

🔹 VSCode (Visual Studio Code):
- 💡 مزایا:

   - متن‌باز و رایگان! #OpenSource

- سبک و سریع برای استارت پروژه‌ها

   - پشتیبانی وسیع از افزونه‌ها #Extensions

- ادغام آسان با ابزارهای دیگر و #Git

- 🚫 معایب:

   - پشتیبانی کمتر برای تکنولوژی‌های پیچیده

  - نیاز به پیکربندی و تنظیمات افزونه‌ها برای قابلیت‌های ارتقاء یافته

🔹 WebStorm:
- 💡 مزایا:

- طراحی شده مخصوص جاوااسکریپت و فریم‌ورک‌های مرتبط #JavaScript

- ویژگی‌های پیشرفته برای دیباگ و رفاکتورینگ کد

- تکمیل کد هوشمند و تجزیه و تحلیل کد در سطح عمیق

- 🚫 معایب:

- نسخه پولی با هزینه اشتراک #SubscriptionCost

- ممکن است کمی سنگین‌تر از VSCode باشد

🤔 برای یک #توسعه‌دهنده_وب، انتخاب بستگی به نیازهای شخصی و جریان کاری دارد. VSCode گزینه‌ای عالی برای کسانی است که به دنبال انعطاف‌پذیری و صرفه‌جویی در هزینه‌ها هستند، در حالی‌که WebStorm برای کسانی که به کیفیت‌های پرمیوم و ویژگی‌های جامع نیاز دارند، ایده‌آل است.

🌐 دوستان #وب‌دولوپرز، نظر شما چیست؟
✍🏽 ¦ @DevYara

#javascript

📶 navigator.onLine JavaScript API برای بررسی وضعیت اتصال به اینترنت در مرورگر استفاده می شود. اگر مرورگر به اینترنت متصل باشد، این API true را برمی‌گرداند، در غیر این صورت false .

<div id="state">
        <div id='ofline'>No internet Connection!</div>
    </div>
    <script>
        function isOnline() {
            return navigator.onLine;
        }
        if (isOnline()) {
            state.innerHTML = "<div id='online'>Online ✅</div>"
        } else {
            state.innerHTML = "<div id='ofline'>Offline ❌</div>"
        }
    </script>

✍🏽 ¦ @DevYara

#debug #challenge #javascript

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

🔍 صورت مسئله:

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

💻 کد:

function calcuteSum(array) {
  var total = 0;
  for (var i = 0; i <= array.lenght; i++) {
    total += array[i];
  }
  return totl;
}

const result = calcuteSum([1, 2, 3, 4, 5]);
console.log('The sum of the array is:', result);

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

#javascript

👨🏻‍💻 JSchallenger

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

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

🔗 لینک سایت
✍🏽 ¦ @DevYara

#javascript

⛈️ 70 سوال مصاحبه ای جاوااسکریپت همراه با توضیح

بسیار کامل و جامع هست، حتمی یکجا سیو کنید.
منبع: ditty.ir

✍🏽 ¦ @DevYara

#jest #javascript

🌟 تست نویسی: راهی برای اطمینان از عملکرد بهتر برنامه‌نویسی!

چرا تست نویسی؟ 🤔🛠️

تست نویسی یک عنصر بسیار اساسی در فعالیت برنامه‌نویسان است که به آن‌ها کمک می‌کند از عملکرد صحیح و پایدار نرم‌افزار اطمینان حاصل کنند. این هنر به برنامه نویسان امکان می‌دهد با اعتماد بالا به کد خود و توانایی جلب توجه جامعه برنامه‌نویسی، خدمتی بی‌نظیر ارائه دهند. 🧪🖥️

🌿 تعریف تست نویسی :

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

مزایای ایجاد تست‌های قوی! 💪🚀

- افزایش اطمینان از خواص عملکردی برنامه

- کاهش زمان و هزینه‌های لازم برای اصلاح باگ‌ها

- ایجاد کد قابل نگهداری و توسعه

🧩 حالا jest چیست؟

یک فریمورک محبوب برای نوشتن تست در جاوا اسکریپت است که با تمامی فریمورک های محبوب جاوا اسکریپت مثل React, Angular, Vue, Node و … کار میکنه.

منبع برای یادگیری jest در یوتیوب

✍🏽 ¦ @DevYara

#debug #challenge #javascript

🛠 چالش دیباگ کد 🛠

📝 صورت مسئله:

ما یک صفحه وب ساده داریم که با فشردن دکمه "Fetch Data" باید اطلاعاتی را از یک API دریافت کند و آنها را در صفحه نمایش دهد. اما به نظر می‌رسد که کد JavaScript دچار مشکلی است و اطلاعات به درستی نمایش داده نمی‌شود. وظیفه شما این است که مشکل را پیدا کرده و کد را اصلاح کنید تا داده‌ها به درستی نمایش داده شوند.

📄 کد HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debug Challenge</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>Welcome to Debug Challenge!</h1>
        <button id="fetch-data">Fetch Data</button>
        <div id="data"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

🎨 کد CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#app {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

📜 کد JavaScript

document.getElementById('fetch-data').addEventListener('click', function() {
    fetchData();
});

function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => {
            let output = '<h2>Posts</h2>';
            data.forEach(post => {
                output += `
                    <div>
                        <h3>${post.title}</h3>
                        <p>${post.body}</p>
                    </div>
                `;
            });
            document.getElementById('data').innerHTML = output;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

🔍 نکات:

کد HTML، CSS، و JavaScript را بررسی کنید.

دکمه "Fetch Data" را کلیک کنید و رفتار صفحه را مشاهده کنید.

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

موفق باشید! 💪

#javascript

#bug

🐞ارورهای رایج در جاوااسکریپت🐞


1. SyntaxError 🚫
   - توضیح: این ارور زمانی رخ می‌دهد که کد جاوااسکریپت به درستی نوشته نشده باشد و قوانین نحوی (syntax) زبان رعایت نشده باشند.
   - مثال:

     console.log("Hello World'
    

2. ReferenceError 📚
   - توضیح: این ارور زمانی رخ می‌دهد که سعی در دسترسی به متغیری که تعریف نشده است یا خارج از دامنه فعلی است، داشته باشید.
   - مثال:

     console.log(nonExistentVariable);
    

3. TypeError 🛠️
   - توضیح: این ارور زمانی رخ می‌دهد که سعی در انجام عملیاتی روی نوع داده‌ای نادرست داشته باشید.
   - مثال:

     let num = 123;
     num.toUpperCase(); // TypeError: num.toUpperCase is not a function
    

4. RangeError 📏
   - توضیح: این ارور زمانی رخ می‌دهد که عددی خارج از محدوده مجاز باشد.
   - مثال:

     let arr = new Array(-1); // RangeError: Invalid array length
    

5. URIError 🌐
   - توضیح: این ارور زمانی رخ می‌دهد که یک URI (Uniform Resource Identifier) نامعتبر است.
   - مثال:

     decodeURIComponent('%'); // URIError: URI malformed
    

6. EvalError ⚠️
   - توضیح: این ارور زمانی رخ می‌دهد که یک ارور در تابع eval() باشد. این ارور در نسخه‌های جدیدتر جاوااسکریپت به ندرت رخ می‌دهد.
   - مثال:

     // EvalError تقریبا منسوخ شده است و در موارد نادر رخ می‌دهد
    

7. InternalError 🧩
   - توضیح: این ارور زمانی رخ می‌دهد که یک ارور داخلی در موتور جاوااسکریپت رخ دهد، مانند فراخوانی بیش از حد توابع تکراری (Recursion).
   - مثال:

     function recurse() {
       recurse();
     }
     recurse(); // InternalError: too much recursion
    

8. AggregateError 🔄
   - توضیح: این ارور برای نشان دادن چندین خطا در یک عملیات مانند Promise.all() استفاده می‌شود.
   - مثال:

     const err1 = new Error('Error 1');
     const err2 = new Error('Error 2');
     const aggregateError = new AggregateError([err1, err2], 'Multiple errors occurred');
     console.log(aggregateError); // AggregateError: Multiple errors occurred
    

🌟نکات برای مدیریت ارورها🌟

1. استفاده از try...catch 🛡️
   - توضیح: استفاده از بلوک try...catch برای مدیریت ارورها و جلوگیری از توقف اجرای برنامه.
   - مثال:

     try {
       // کد ممکن است ارور داشته باشد
     } catch (error) {
       console.error(error);
     }
    

2. پیاده‌سازی پیام‌های ارور سفارشی 🖋️
   - توضیح: ایجاد پیام‌های ارور سفارشی برای بهتر فهمیدن مشکل.
   - مثال:

     throw new Error('Something went wrong!');
    

3. استفاده از ابزارهای دیباگ 🐞
   - توضیح: استفاده از ابزارهای دیباگ مانند کنسول مرورگر برای ردیابی و رفع ارورها.
   - مثال:

     console.log('Debug message')

;

✍🏽 ¦ @DevYara

#javascript

•مجموعه سوال و جواب‌های جاوااسکریپت‼️
🔗 js.mariotek.ir/

✍🏽 ¦ @DevYara

#javascript #library #frontend

🟡 Driver.js

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

https://driverjs.com/docs/installation

✍🏽 ¦ @DevYara

#javascript #frontend

🟡  JavaScript cheatsheet
🟡برگه تقلب جاوااسکریپت

https://quickref.me/javascript

✍🏽 ¦ @DevYara

🌐 #JavaScript

🔍 ساختار شکنی چیه؟

ساختار شکنی (Destructuring) یکی از ویژگی‌های جذاب جاوااسکریپت مدرنه که به شما اجازه میده مستقیماً به اجزای شیء یا آرایه دسترسی پیدا کنید و نیاز نیست دائم مسیر طولانی رو طی کنید.
مثلاً به جای اینکه بگید user.name و user.age، می‌تونید مستقیماً بگید const {name, age} = user

---
📌 مثال 1: دسترسی سریع به خصوصیات شیء

فرض کنید شیء کاربری داریم:

const user = {
  name: "علی",
  age: 25,
  job: "توسعه‌دهنده وب"
};

حالا به جای این که هر بار بگیم user.name، می‌تونیم با ساختار شکنی مستقیم بهش دسترسی پیدا کنیم:

const { name, age } = user;
console.log(name); // "علی"
console.log(age);  // 25

⏩ حالا name و age دیگه متغیرهای مستقلی هستن که به مقادیر داخل شیء دسترسی دارن.

---
📌 مثال 2: ساختار شکنی در آرایه‌ها

برای آرایه‌ها هم جواب میده:

const colors = ["قرمز", "آبی", "سبز"];
const [firstColor, , thirdColor] = colors;

console.log(firstColor);  // "قرمز"
console.log(thirdColor);  // "سبز"

🪄 توی این مثال، firstColor مقدار اولین عنصر و thirdColor مقدار سومین عنصر آرایه رو می‌گیره. مورد دوم هم خالی می‌ذاریم.

---
✨ چرا ازش استفاده کنیم؟

1. کاهش کدنویسی: دیگه نیاز نیست دائم مسیر کامل رو بنویسید.

2. خوانایی بالا: کد شما کوتاه‌تر و قابل فهم‌تر میشه.

3. ساختار بهتر: برای شیء‌ها و آرایه‌های پیچیده خیلی کاربردیه!