156- دروس جافا سكربت – تدريب على امثله – JS Examples For Editor

## شرح مفصل لـ “JS Examples For Editor” في لغة JavaScript

JavaScript هي واحدة من أكثر لغات البرمجة استخدامًا لتطوير تطبيقات الويب، وهي توفر العديد من الميزات التي تجعلها أداة قوية لإنشاء تفاعلات ديناميكية على صفحات الويب. في هذا المقال، سنستعرض بعض الأمثلة العملية التي يمكن استخدامها في بيئات التحرير المختلفة مثل Visual Studio Code، Sublime Text، وغيرها. الهدف [شركة برمجة مصرية] من هذه الأمثلة هو توضيح كيفية استخدام JavaScript لتحسين وظائف وبرمجيات المحرر.

### مثال 1: تفعيل ميزة الإكمال التلقائي

ميزة الإكمال التلقائي تعتبر أساسياً في العديد من المحررات، ويمكن تحسينها باستخدام JavaScript. لنفترض أنك تقوم بكتابة كود JavaScript، وتريد أن يقوم المحرر بمساعدتك بإكمال الكود تلقائيًا.

function autocomplete(input, suggestions) {
    let currentFocus;
    input.addEventListener("input", function(e) {
        let list, listItem, val = this.value;
        closeAllLists();
        if (!val) { return false;}
        currentFocus = -1;
        list = document.createElement("DIV");
        list.setAttribute("id", this.id + "autocomplete-list");
        list.setAttribute("class", "autocomplete-items");
        this.parentNode.appendChild(list);
        for (let i = 0; i < suggestions.length; i++) {
          if (suggestions[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
            listItem = document.createElement("DIV");
            listItem.innerHTML = "<strong>" + suggestions[i].substr(0, val.length) + "</strong>";
            listItem.innerHTML += suggestions[i].substr(val.length);
            listItem.innerHTML += "<input type='hidden' value='" + suggestions[i] + "'>";
            listItem.addEventListener("click", function(e) {
                input.value = this.getElementsByTagName("input")[0].value;
                closeAllLists();
            });
            list.appendChild(listItem);
          }
        }
    });

    function closeAllLists(elmnt) {
      let items = document.getElementsByClassName("autocomplete-items");
      for (let i = 0; i < items.length; i++) {
        if (elmnt != items[i] && elmnt != input) {
          items[i].parentNode.removeChild(items[i]);
        }
      }
    }
}

### مثال 2: تلوين النص البرمجي

تلوين النص البرمجي يساعد المبرمجين على قراءة الكود وفهمه بسرعة أكبر. يمكنك استخدام JavaScript لإنشاء نظام تلوين بسيط.

function syntaxHighlight(code) {
    const patterns = [
        { regex: /(".*?"|'.*?')/g, replacement: '<span class="string">$1</span>' },
        { regex: /b(var|let|const|function|if|else|return)b/g, replacement: '<span class="keyword">$1</span>' },
        { regex: ///.*?$/gm, replacement: '<span class="comment">$&</span>' }
    ];
    patterns.forEach(pattern => {
        code = code.replace(pattern.regex, pattern.replacement);
    });
    return code;
}

let codeBlock = `function greet(name) {
    // This is a comment
    return "Hello, " + name;
}`;

document.getElementById("code").innerHTML = syntaxHighlight(codeBlock);

### مثال 3: تنفيذ الأوامر باستخدام JavaScript

يمكنك استخدام JavaScript لتنفيذ أوامر معينة عند الضغط على اختصارات لوحة المفاتيح، مما يجعل تجربة التحرير أكثر كفاءة.

document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        saveFile();
    }
    if (e.ctrlKey && e.key === 'f') {
        e.preventDefault();
        showSearchBar();
    }
});

function saveFile() {
    console.log("File saved!");
}

function showSearchBar() {
    console.log("Search bar opened!");
}

### خلاصة

هذه الأمثلة تبرز بعض الاستخدامات المفيدة لـ JavaScript في بيئات تحرير النصوص البرمجية. من خلال تحسين ميزات مثل الإكمال التلقائي، وتلوين النصوص، وتنفيذ الأوامر عبر الاختصارات، يمكن للمطورين الحصول على تجربة أكثر سلاسة [شركة برمجة مصرية] وكفاءة. بالطبع، هذه مجرد بداية، ويمكن توسيع هذه الأمثلة لتشمل ميزات أخرى معقدة حسب احتياجات المطور.