javascript, icon, web script-2189147.jpg

الدالة في جافاسكريبت javascript function

اترك تعليقاً / Blog, JavaScript

الدالة في جافاسكريبت javascript function هي مجموعة من الأوامر المعاد استخدامها لأداء مهمة معينة. تعتبر الدوال أحد العناصر الأساسية في جافاسكريبت، حيث تسمح لك بتقسيم الكود إلى قطع صغيرة ومدارة، يمكن استدعاؤها عند الحاجة.

الدالة في جافاسكريبت javascript function

البنية الاساسية لتعريف الدالة في جافا سكريبت

				
					function functionName(parameters) {
    // code block
}

function : الكلمة المفتاحية المستخدمة لتعريف الدالة.

functionName : اسم الدالة، الذي يجب أن يكون فريدًا وواضحًا.

parameters : القيم المدخلة التي يتم تمريرها إلى الدالة (اختياري).

{} : مجموعة الأوامر حيث يتم كتابة تعليمات الدالة.

مثال بسيط لجمع رقمين

				
					function addNumbers(num1, num2) {
    return num1 + num2;
}

return : تستخدم لارجاع جمع الرقمين  num1 + num2

يمكنك استدعاء هذه الدالة في أي مكان في الكود على النحو التالي:

				
					let result = addNumbers(5, 3); // result will be 8

يمكن أيضًا تعيين الدوال إلى متغيرات (تعابير الدوال) أو إنشاؤها بشكل مجهول (دوال مجهولة الاسم). ويمكن تمريرها كمعلمات إلى دوال أخرى، وإرجاعها كقيم من دوال أخرى، وحتى تخزينها في هياكل بيانات. هذه المرونة تجعل الدوال أدوات قوية لتنظيم وتلاعب الكود في جافاسكريبت.

مثال اكبر واكثر وضوحا

لنفترض أن لدينا موقع ويب بسيط يحتوي على نموذج لحساب متوسط ​​الدرجات. سنكتب دالة لحساب المتوسط ​​بناءً على الدرجات التي يدخلها المستخدم.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grade Average Calculator</title> <script type="litespeed/javascript">function calculateAverage(grades){let total=0;for(let i=0;i<grades.length;i++){total+=grades[i]}
let average=total/grades.length;return average}
function printResult(result){document.getElementById("result").innerText="Final Average: "+result.toFixed(2)}
function calculateButtonClicked(){let grades=[];grades.push(parseFloat(document.getElementById("grade1").value));grades.push(parseFloat(document.getElementById("grade2").value));grades.push(parseFloat(document.getElementById("grade3").value));let average=calculateAverage(grades);printResult(average)}</script> </head>
<body>
    <h2>Grade Average Calculator</h2>
    <label for="grade1">Grade 1:</label>
    <input type="number" id="grade1"><br><br>

    <label for="grade2">Grade 2:</label>
    <input type="number" id="grade2"><br><br>

    <label for="grade3">Grade 3:</label>
    <input type="number" id="grade3"><br><br>

    <button onclick="calculateButtonClicked()">Calculate Average</button><br><br>

    <div id="result"></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://onemoka.com/wp-content/litespeed/js/8d9b04b4a23e4da37483d6d2535e3478.js?ver=54b1f"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

شرح المثال 

  • لدينا دالة calculateAverage التي تأخذ قائمة من الدرجات وتحسب المتوسط ​​النهائي.
  • لدينا دالة printResult التي تأخذ النتيجة وتقوم بطباعتها على الصفحة.
  • لدينا دالة calculateButtonClicked التي تستدعي دالتين السابقتين، حيث تقوم بجمع الدرجات من الحقول في النموذج وحساب المتوسط ​​عند النقر على زر الحساب.

هذا المثال يوضح كيفية استخدام الدوال في جافاسكريبت لتنظيم الكود وإعادة استخدام الأجزاء المشتركة من الوظائف.

النتيجة

average 1

معلومات إضافية حول الدوال في جافاسكريبت :

1. الدوال ككائنات أول – مواطن : في جافاسكريبت، الدوال هي كائنات من الطراز الأول، وهذا يعني أنه يمكنك استخدامها كأي متغير آخر. يمكن تخزين الدوال في متغيرات، وتمريرها كمعلمات، واسترجاعها من دوال أخرى، وحتى تعيينها كخصائص لكائنات.

2. تعريف الدالة: يمكن تعريف الدوال في جافاسكريبت باستخدام الكلمة الأساسية function متبوعة بالاسم الذي تريد إعطاء الدالة وقائمة بالمعلمات المطلوبة بين قوسين، ومجموعة الأوامر التي تريد تنفيذها داخل الدالة.

3. العبارة return: يستخدم العبارة return لإرجاع قيمة من داخل الدالة. عندما يتم تنفيذ العبارة return، يتم إيقاف تنفيذ الدالة وإرجاع القيمة المحددة. إذا لم يتم استخدام return، فسيتم إرجاع قيمة undefined افتراضيًا.

4. الدوال الإنشائية والتعبيرية: يمكن تعريف الدوال بطريقتين: إما باستخدام التعريف الإنشائي (function declaration) أو باستخدام التعبير الوظيفي (function expression). في التعريف الإنشائي، يتم تحديد اسم الدالة مباشرة، بينما في التعبير الوظيفي، يتم تخزين الدالة في متغير.

5. المعلمات والوسائط : يمكن تمرير المعلمات إلى الدوال لتنفيذ العمليات المطلوبة. يمكن للدوال أن تأخذ أي عدد من المعلمات أو لا تأخذ أي معلمات على الإطلاق.

6. الدوال المجهولة الاسم : يمكنك أيضًا تعريف دوال بدون تسمية، وهي معروفة باسم الدوال المجهولة الاسم أو الدوال المعرفة بشكل فوري. يتم استخدام هذا النوع من الدوال عندما تحتاج إلى دالة لن تُستدعى مرة أخرى.

7. الدوال الناتجة والدوال القابلة للاستدعاء : يمكن للدوال أن تكون ناتجة من الدوال الأخرى (كدوال مرتجعة)، أو يمكن أن تكون قابلة للاستدعاء عند تحديدها داخل نطاقها الذي تم إنشاؤه فيه (دوال مسماة ومجهولة الاسم).

 

مصادر اخري لتعلم جافا سكريبت:

1. MDN Web Docs – JavaScript Guide : مصدر رائع للمبتدئين والمتقدمين، يغطي جميع جوانب جافا سكريبت بطريقة مفصلة وبأسلوب سهل الفهم. [الرابط]  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

2. freeCodeCamp : يوفر دورات تعليمية مجانية عبر الإنترنت لتعلم جافا سكريبت والعديد من التقنيات الأخرى لتطوير الويب. [الرابط] https://www.freecodecamp.org/learn/

3. JavaScript.info : موقع يقدم دورات تعليمية شاملة لجافا سكريبت، تبدأ من المستوى الأساسي وتصل إلى المتقدم. [الرابط] https://javascript.info/

هذه الروابط يمكن أن تكون مفيدة لك لبدء رحلتك في تعلم جافا سكريبت أو تعميق معرفتك بها إذا كنت متقدمًا بالفعل. استمتع بالتعلم

Sharing to

Facebook
Twitter
LinkedIn
Post Views: 24

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Related Posts

اساسيات HTML

اساسيات HTML

Blog, HTML

تعلم اساسيات HTML يعتبر خطوة مهمة لفهم كيفية بناء صفحات الويب وتنظيم المحتوى عليها.

More »

visual studio code

Visual Studio Code

Blog

Visual Studio Code هو برنامج تحرير النصوص بيئة تطوير مفتوحة المصدر وخفيفة الوزن تم تطويرها…

More »

امثلة CSS 2

امثلة CSS 1

Blog, CSS

امثلة CSS 1 تعتبر css هي لغة تنسيق الويب التي تستخدم لتصميم وتنسيق صفحات الويب.

More »

اقترب من المستقبل الذي تحلم بة

Scroll to Top