لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 07/03/22 في كل الموقع
-
webpack في الاصل هو مجمع ملفات او بشكل ادق مجمع وحدات module bundler تقوم بتجميع عدد من ملفات الجافاسكربت، الـ HTML والcss لتجعلها في ملف واحد، وبهذا المنطق تتيح الكثير من الميزات الأخرى على سبيل: امكانية تقسيم الشيفرات وتجزئتها. استخدام المحملات لتحميل وتفسير انواع معينة من الملفات مثل sass. فصل بيئة التطوير عن بيئة الانتاج. وغيرها الكثير.. عيب هاته الطريقة انها قد تأخذ الكثير من الوقت أثناء عملية التطوير. لنقل مثلا أنك تستخدم 2000 وحدة نمطية في تطبيق كبير لديك. الآن عملية بناء او تجميع او تحزيم هاته الوحدات قد ياخذ وقتا طويلا جدا بادئ الأمر. ثم ستكون عملية الاستماع الى التغييرات هي الأخرى بطيئة (رغم التخزين المؤقت) لأن ويب باك تقوم كل مرة بإعادة تجميع كامل الملفات واخراجها في ملف واحد كل مرة ولا تستثني الملفات الغير معدلة، هذا بجانب تشغيل كامل المحملات والوحدات الاخرى. ويتم تقديم laravel-mix كآداة توفر واجهة تطبيقات برمجية للعمل بـ webpack بشكل أكثر فعالية في تطبيقات لارافيل لذات الغرض السابق. يأتي Vite هنا لتقديم حل استثنائي لتحسين تجربة التطوير وتسريعها، فالفكرة الاساسية منه هو تحويل وتقديم جزء من شيفرة التطبيق الخاص بك عندما يطلب المتصفح ذلك وفقط. فعند بداية عملية التطوير سيقوم Vite بتقسيم وحدات جافاسكربت الخاصة بك الى فئتين: dependency modules أو وحدات التبعية، وهي الوحدات التي يتم تحميلها وطلبها من node_modules. يتم ذلك عن طريق مجمع يدعى esbuild هو مكتوب بلغة Go ويعد اسرع بـ 10 الى 100 مرة من ويب باك. application modules او وحدات التطبيق، وهي الوحدات التي تشتغل عليها او بالأحرى هي ملفات تطبيقك. ويبباك تقوم بتجميع كل ما ينتمي لكليهما واخراجهما في ملف واحد كل مرة تطلبه. يدعى هذا بـ bundler-based workflow او سير العمل القائم على التحزيم. Vite تقوم فقط بتجميع وحدات التبعية الخاصة بك، في حين ان وحدات التطبيق تقدم فقط حينما يتم طلبها او في لحظة ما تكون مستعملة من طرف صفحة ما او مكون ما. تسمي Vite هذا بـ vite ESM-based dev build أو سير العمل القائم على وحدات ES. بمعنى أنه قادر على معالجة التطوير الخاص بك بشكل أسرع كثيرا من Webpack. وقد لا تلحظ هذا مع تطبيقات عادية، ولكن ستزداد الحاجة الى تجميع اسرع مع ازدياد حاجيات التطبيق وتوسعه. وبما أنه يخدم مفهوم التوسع scalability أكثر من ويب باك فإن لارافيل ضمته إليها هذا الاسبوع فقط ليزيد من حظ وقدرة لارافيل في بناء تطبيقات بأحجام عملاقة، بجانب المحافظة على تجربة تطوير جيدة الى ممتازة. يتفائل الكثير من المطورون باستعمال لارافيل له، ويرون أنه الجيل الجديد من ادوات بناء جافاسكربت بخدمته لمفهوم الوحدات في المتصفح، وهو مفهوم لم يكن شائعا قبله. وكتجربة شخصية، عملت بـ Vite في تطبيق واجهة أمامية بـ VueJS وكانت تجربة التطوير رائعة مقارنة بالتطبيقات التي اعتمدت على ويب باك فيها. وبما أن Vite مقدم من مطوري VueJS أنفسهم فأظن أنه سيكون هنالك تقارب أكثر بين VueJS و Laravel في المستقبل.2 نقاط
-
السلام عليكم مسألة تحزيم الأصول او الملفات (css,js ) في laravel اريد الإطلاع عليه بشكل اكبر وماهو webpack و laravel mix و لماذا إستعملت مؤخرا vite و ما الفرق بينهما ؟1 نقطة
-
انا دورت ومش لاقي حل لل warning ده وهل الwarning ده بيأثر علي المشروع؟ (2189:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. @ ./node_modules/bootstrap/dist/css/bootstrap.rtl.min.css @ ./src/js/index.js 1:0-50 webpack 5.73.0 compiled with 1 warning in 3990 ms1 نقطة
-
عند عمل build للمشروع وتشغيله على المتصفح لاحظت ان حجم px صار اكبر مثلا حجم الخط 18px يظهر عند تشغيل المشروع على ال localhost اصغر مما يظهر عند رفع الموقع على الاستضافة1 نقطة
-
شكرا جزيلا لك استاذ وائل بالفعل كان معامل التكبير zoom مختلف1 نقطة
-
الطريقة الأولى و هي إرجاع القيمة في دالة : class Profile(models.Model): user = models.OneToOneField(User, null=True, blank=True, on_delete=models.CASCADE) first_name = models.CharField(max_length=200, blank=True, null=True) last_name = models.CharField(max_length=200, blank=True, null=True) def __str__(self): # الدالة تقوم بإرجع الاسم كامل وسيظهر كامل في لوحة التحكم name = str(self.first_name) if self.last_name: name += ' ' + str(self.last_name) return name أو عنطرق حفظها في حقل جديد: وسيقوم بحفظها بشكل ألى class User( models.Model ): first_name = models.CharField( max_length=64 ) last_name = models.CharField( max_length=64 ) full_name = models.CharField( max_length=128 ) def save( self, *args, **kw ): # بهذه الدالة self.full_name = '{0} {1}'.format( first_name, last_name ) super( User, self ).save( *args, **kw )1 نقطة
-
هذه دالة قد إستخدمتها من قبل في أحد مشاريع الخاصة بي يمكنك فحص نوع الملف المستقبل ومعرفة إمتداده: الفكرة هي فحص أخر 3 حروف من اسم الملف. و عمل الدالة كامل فكرته منع رفع ملفات غير مروغوب بها على النظام. import os from django.core.exceptions import ValidationError def validate_is_audio(file): global file_is_sported try: file_name = str(file) file_ext = file_name[-4:] if file_ext == '.wav': # يمكنك هنا تحديد نوع الملف الذي تريده فقط. first_file_check = True else: print("Unsupported file type.") # raise ValidationError('Unsupported file type.') first_file_check = False except Exception as e: first_file_check = False # if not first_file_check: raise ValidationError('Unsupported file type.') valid_file_extensions = ['.wav'] ext = os.path.splitext(file.name)[1] if ext.lower() not in valid_file_extensions: raise ValidationError('Unacceptable file extension.') أما لمعرفة حجم الملف: قم بتمربر الملف عبر هذه الدالة و تفحص الملف عبر الدالة الجاهزة thisFile._size def handle_uploaded_file(thisFile): if thisFile._size > 5242880: # هنا نفحص ان كان حجم الملف أكللا من 5 مبقا return "This file is more than 5mb" else: with open('some/file/' + str(thisFile), 'wb+') as destination: for chunk in thisFile.chunks(): destination.write(chunk) return "File has successfully been uploaded"1 نقطة
-
فقط اتسآئل لماذا لايوجد مسار vue.js ضمن مسارات دورة javascript رغم أنه من أشهر أطر جافاسكريبت واكثرها إستعمالا؟1 نقطة
-
حاليًا لا يوجد مسار لذلك ضمن الدورات، يوجد العديد من مكتبات تطوير الواجهات الأمامية الأخرى مثل Alpine و Svelte و Angular وغيرها، مسار دورة جافاسكريبت يغطي أشهر مكتبة منها وهي React لتطوير تطبيقات الويب، و ReactNative لتطوير تطبيقات المنصات الأخرى كأندرويد و IOS، وذلك لحجم التقاطع الكبير بينهما بذلك كمتدرب ستتعلم أساسيات مكتبة واحدة مشهورة فقط وتستطيع باستخدامها بناء تطبيقات بطرف العميل، يمكنك معرفة الفروق بين أشهر تلك المكتبات من المقال التالي: ويمكنك تعلم Vue بنفسك بقراءة سلسلة مقالات "مقدمة إلى vuejs" التالية:1 نقطة
-
ماهي افضل لغة برمج وإيطار للمواقع والمناسبة مع عرض الخرائط او مع قوقل ماب1 نقطة
-
نعم، عند تعلّم أي لغة برمجة يجب عليك أن تبدأ بأساسيات هذه اللغة، وإذا تخطيت الأساسيات ستواجه العديد من المشاكل أثناء تعلّمك ولن تستطع تحديد مكان المشكلة أو معرفة كيفية حلّها. يمكنك الاطلاع على المزيد من المعلومات التي قد تكون مشابهة لسؤالك:1 نقطة
-
حاول تطبيق الحل المذكور في التعليق السابق وسيتم امتداد طول العنصر ذو الصف tasks حسب طول العناصر الأبناء (المحتوى بداخله).1 نقطة
-
أقصد عندما كنت أضيف تاسك يبقى العنصر الحاوي كما هو ولا يزيد مع إضافتي لكل تاسك1 نقطة
-
بديت اتعلم مكتبة django واعجبني سهولة عمله ولكن السؤال هل احتاج الى مكتبات جافا سكريبت مثل vue.js - react.js- angular لعمل صفحات single-page للقالب ام هناك مكتبات خاصة للغة python يؤدي هذه الوظيفة وماهو الاصح والأفضل1 نقطة
-
السؤال غير واضح، هل يمكنك إرفاق صورة للنتيجة النهائية التي ترغب بتحقيقها؟ بشكل افتراضي خصائص الطول والعرض في CSS هي auto، ولذلك فإن السلوك الطبيعي هو ازدياد الطول والعرض للحاوية عند زيادة محتوى العناصر الأبناء، ولديك في الصف tasks قمت بتحديد الطول 50px، بإزالته أو بوضع القيمة التالية: .tasks { height: auto } سيعود للسلوك الطبيعي ولن يتم تحديد الطول بهذه القيمة.1 نقطة
-
Django هو إطار عمل مفتوح المصدر لتطوير تطبيقات الويب من طرف الخادم Back-end بشكل أساسي، ويتيح أيضاً إنشاء وعرض قوالب واجهات المستخدم من طرف خادم الويب، ولكن مفهومه مختلف بعض الشيء عن أطر عمل واجهات المستخدم أو تطبيقات الصفحة الواحدة SPA. يمكنك مكاملة مشروعك المبني بواسطة Django باستخدام أي إطار عمل في واجهات المستخدم: React, vue, angular أو غيرها. فيتيح إطار العمل Django إمكانية التعامل مع أي إطار عمل في واجهات المستخدم.1 نقطة
-
مرحبًا بك في هذه السلسلة التي سنتحدث من خلالها عن إطار العمل Bootstrap 5 ذلك الإطار الذي يهيمن على معظم عمليات التطوير التي تحدث في الواجهة الأمامية Front-End Development في مواقع الإنترنت عمومًا. لا تفترض هذه السلسلة أن يكون لديك أي فكرة مسبقة عن بوتستراب Bootstrap (ولو أنّ بعض المعرفة القليلة مرحّب بها)، في حين أنّ الإلمام بـ HTML و أساسيات CSS هو أمر ضروري للمتابعة في هذه السلسلة. رغم أنّ بوتستراب يستخدم جافاسكريبت في بعض المكوّنات إلى أنّه ليس من الضروري أن يكون لديك معرفة بها لكي تتعلّم بوتستراب، ولو أنّ الإلمام بجافاسكريبت يُعدّ بديهيًا لمطوري الواجهة الأمامية عمومًا. هذا هو المقال الأوّل في هذه السلسلة، وهو مقال تمهيدي بطبيعة الحال، وفيه سنتحدّث عن النقاط التالية: ماهو بوتستراب؟ مالجديد في بوتستراب 5؟ إعداد بوتستراب للعمل. استخدام محرر برمجي مناسب ما الذي سنبنيه في هذه السلسلة؟ ماهو بوستراب؟ بوتستراب ببساطة هو إطار عمل Framework متكامل مبني على CSS و جافاسكريبت JavaScript يُستخدم لتنسيق صفحات الويب وإكسابها نواح جمالية بدون الحاجة إلى استخدام تنسيقات معقدة من CSS. يدعم بوتستراب مبدأ تنسيق الأجهزة المحمولة أولًا Mobile First Style وهذا يعني توافقية عالية مع الأجهزة المحمولة ذات الشاشات الصغيرة. عندما يُذكر بوتستراب فأول ما يتبادر إلى الذهن هو السرعة والأناقة والسهولة والتصميم المتجاوب Responsive Design مع مختلف أنواع الشاشات. كان أول من طور بوتستراب شركة تويتر الشهيرة، وبعد عام تقريبًا، جعلته مفتوح المصدر ومتاحًا بالكامل من خلال GitHub. يستند بوتستراب كما أشرنا مسبقًا إلى CSS فهو يوفّر كمّا كبيرًا من الجهد لتنسيق المكوّنات في صفحة الويب. يهدف بوتستراب كما هو واضح إلى تبسيط عمليات التصميم التي تحدث في الواجهة الأمامية Front-End وجعلها معيارية. يسهّل هذا الأمر إلى حدّ بعيد من حياة المصممين والمطورين على حدّ سواء، ويجعل عملية انضمام مصمّم جديد إلى فريق العمل في شركة تعتمد بوتستراب أمرًا يسيرًا نسبيًا. استخدام بوتستراب سهل جدًا. فيمكن من خلال إضافة صنف Class أو أكثر إلى عنصر HTML أن تحصل على أثر فوري يحوّل هذا العنصر إلى شكل جميل وعصري. انظر مثلًا إلى شيفرة HTML التالية: <button>مرحبًا</button> سيولّد الكود السابق الزر البسيط التالي: سأضيف الآن صنفان بسيطان من بوتستراب إلى الكود السابق: <button class="btn btn-primary">مرحبًا</button> ستحصل على الشكل الجميل التالي: لاحظ كيف اكتسب هذا الزر الألوان المناسبة بالإضافة إلى حاشية Padding مناسبة أيضًا وبتلقائية حول النص الموجود ضمن الزر. وأيضًا كيف أصبحت حواف الزر منحنية. توجد العديد من التشكيلات الأخرى التي يمكن اكسابها للأزرار كما سنرى فيما بعد. مالجديد في بوتستراب 5؟ يُعَد الإصدار 5 إصدارًا رئيسيًا وهو الأحدث من بوتستراب حاليًا (وقت كتابة هذا المقال)، وكما جرت العادة، فهناك العديد من التغييرات التي طرأت على الإصدار الذي يسبقه (الإصدار 4) فمثًلا فقد أزيل المكوّن Jumbotron بالإضافة إلى إزالة الدعم عن المتصفحين IE 10 و IE 11، وأيضًا أزيل عدد من أصناف التنسيق التي كانت موجودة في الإصدار 4. هناك تغييرات أخرى قد حدثت ضمن مخطط الصفحة حيث أضيف قياس آخر جديد لم يكن موجودًا في الإصدار السابق وهو القياس xxl. و توجد تحسينات أخرى في نظام الألوان. كما أضيف دعم أيقونات SVG جميلة ومتنوّعة ومفتوحة المصدر أيضًا. يمكنك مع مكتبة الأيقونات هذه الاستغناء عن مكتبات أيقونات إضافية مثل Font Awesome. في الإصدار 5 أيضًا لم يعد هناك حاجة لاستخدام المكتبة jQuery بعد الآن (بعض المزايا الموجودة في بوتستراب تحتاج إلى جافاسكريبت)، فقد انتقل مطوّرو بوتستراب إلى استخدام جافاسكريبت فقط، مع إمكانية الإبقاء على استخدام jQuery في حال الرغبة. أود أن أركّز هنا على ميزة مهمة أضيفت إلى بوتستراب 5، طالما انتظرها المصممين والمطورين العرب! وهي دعم الاتجاه من اليمين إلى اليسار RTL مما يسهّل حياتهم إلى حدّ كبير. إعداد بوتستراب للعمل يمكن تضمين بوتستراب في صفحة الويب التي نعمل بها بإدراجه عن طريق العنصر link ضمن العنصر head في ترويسة الصفحة، ويمكن اختيار تضمين بوتستراب من مزوّد محتوى على الإنترنت CDN وهو الخيار الأفضل. ومن الممكن كذلك تنزيل نسخة من بوتستراب محليًا ومن ثمّ تضمينها ضمن صفحة الويب التي تعمل بها. سنعمل في هذه السلسلة على الخيار الأول، أي أنّنا سنستخدم مزوّد محتوى CDN. سنعتمد القالب الأساسي التالي أثناء عملنا على بوتستراب: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>السلام على الجميع</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> لاحظ أنّه وقبل نهاية وسم الإغلاق </body> وضعنا الوسم <script> الذي يسمح بتحميل كود جافاسكريبت الذي تحتاجه بعض مكوّنات بوتستراب لكي تعمل عملًا صحيحًا. استخدام محرر برمجي مناسب توجد العديد من الخيارات المتاحة لاستخدام محرّر برمجي مناسب في سياق عملك كمطوّر واجهة أمامية، ومن المحرّرات الشهيرة Visual Studio Code و Sublime و Atom. بالنسبة لي أفضل استخدام Visual Studio Code من مايكروسوفت لما يتمتع به من مرونة ودعم كبيرين. لتثبيت محرر vs code انتقل إلى الموقع الخاص به لتنزيله. سيظهر زر التحميل في الصفحة الرئيسية. عندما تنتهي من تنزيله وتثبيته، افتحه وانتقل إلى قسم الإضافات Extensions ضمنه في الشريط الموجود على الناحية اليسرى كما في الشكل التالي: بعد ذلك وفي خانة البحث في الأعلى اكتب Live Server للبحث عن هذه الإضافة التي ستسمح لك بتشغيل خادوم مبسّط على حاسوبك الشخصي مما يسمح لنا بتجريب الشيفرة التي نكتبها مباشرةً على المتصفح الافتراضي الموجود على حاسوبنا. بعد اختيار الإضافة انقر الزر Install في الناحية الخاصة بشرح الإضافة (في الطرف الأيمن) لتثبيتها. بنفس الأسلوب السابق تمامًا ننصحك بتثبيت إضافة Auto Rename Tag، حيث تساعد هذه الإضافة على التعديل التلقائي لوسم ما عند تعديل الوسم المرافق له. ما الذي سنبنيه في هذه السلسلة؟ سنبني في هذه السلسلة موقع ويب بسيط عبارة عن صفحة واحدة يمكن أن يُعتبر كقالب يشرح مزايا بوتستراب 5 التي سنتناولها تباعًا أثناء تقدمنا في هذه السلسلة. هذا الموقع عبارة عن موقع يبيع دورات تعليمية على الإنترنت. يوفر الموقع إمكانية التسجيل الجديد للمستخدمين بالإضافة إلى تسجيل دخول للمستخدمين السابقين. كما سيعرض آخر الدورات التدريبية (المنتجات) المتوفرة، وأيضًا الدورات الأكثر مبيعًا. كما سنوفّر ميزة سلة المشتريات التي تسمح للمستخدم بالتسوّق من خلال اختيار الدورات التي يرغب بشرائها. بالإضافة إلى ما سبق سنضيف بعض الأقسام على الصفحة الرئيسية التي توفّر بعض المعلومات عن الموقع وبنفس الوقت توضّح لنا كيفية استخدام مزايا بوتستراب 5 المتنوّعة. سنعمل على بناء هذا الموقع شيئًا فشيئًا أثناء عملنا في هذه السلسلة. انظر إلى الشكل التالي الذي يعطيك شكلًا تقريبيًا لما سنحصل عليه في نهاية هذه السلسلة. مصدر الصور في آخر هذه السلسلة سنتعلّم كيف نرفع الموقع كاملًا على إحدى الإستضافات لكي يصبح بالإمكان معاينته بصورة حية. اقرأ أيضًا 10 أخطاء شائعة عند استخدام إطار العمل Bootstrap بناء قائمة شجرية باستخدام البوتستراب تصميم صفحة موقع باستخدام 3 Bootstrap - الجزء الأول1 نقطة -
تستخدَم لغة JavaScript لإنشاء صفحات ويب تفاعلية، وهي منتشرة بشكل كبير ومُستعمَلة من أغلبية المواقع، وتدعمها جميع المتصفحات تقريبًا دون الحاجة إلى إضافات خارجية. يشرح هذا المقال مزايا لغة JavaScript، وما يمكنك تحقيقه باستخدامها، وأفضل التقنيات التي تعمل معها بشكل جيد. ما هي لغة JavaScript؟ ظهرت لغة JavaScript لإنشاء صفحات ويب حيوية وتفاعلية. تسمى البرامج المكتوبة بلغة JavaScript بالسكربتات (scripts)، ويمكن كتابتها بشكل مباشر ضمن شيفرة HTML لصفحة الويب ليتم تنفيذها تلقائيًا عند تحميل الصفحة. ولا تحتاج هذه السكربتات إلى تحضير خاص أو تصريف مسبق وإنما تتم كتابتها ثم تنفيذها كنص عادي. هذا الأمر يميز لغة JavaScript عن لغة برمجية أخرى تشبهها بالاسم تدعى Java. لماذا سميت JavaScript؟ عندما ظهرت لغة JavaScript، كان لها اسم مختلف وهو «LiveScript» ولكن الشعبية الكبيرة للغة Java في تلك الفترة دفعت إلى تغيير اسم اللغة إلى JavaScript بهدف إظهارها بصورة «الأخ الصغير» للغة Java واكتساب بعض الشهرة منها. ومع تطور لغة JavaScript، أصبحت لغةً مستقلة بشكل كامل ولها مواصفات ومعايير خاصة بها تُسمى «ECMAScript»، ولم يعد لها أي علاقة بلغة Java. في الوقت الحالي لا يقتصر تنفيذ لغة JavaScript على المتصفح وإنما من الممكن تنفيذها ضمن الخادوم أيضًا، أو أي جهاز يحتوي على برنامج خاص يسمى محرك JavaScript. يحتوي المتصفح على محرك مدمج ضمنه عادةً ما يسمى بآلة JavaScript الافتراضية وله أسماء تختلف باختلاف المتصفحات. فمثلًا يسمى المحرك باسم: V8 في متصفحي Chrome و Opera وباسم SpiderMonkey في المتصفح FireFox. Trident و Chakra في إصدارات مختلفة من IE، ويسمى ChakraCore في MicroSoftEdge، ويسمى Nitro و SquirrelFish في متصفح Safari …إلخ. احفظ هذه الأسماء في ذهنك جيدًا لأنها مستخدمة بشكل كبير في مقالات المطورين عبر الإنترنت وسنأتي على ذكرها لاحقًا في مقالاتنا. إذا قرأت مثلًا الجملة التالية: «الخاصية X مدعومة من قبل V8»، فيجب أن تعرف أنَ هذه الخاصية تعمل على الأغلب ضمن المتصفحين Opera و Chrome. كيف تعمل محركات JavaScript؟ طريقة عمل المحركات معقدَة وتتألف من ثلاث مراحل أساسية: بدايةً، يقرأ المحرك (إذا كان التنفيذ يتم عن طريق المتصفح فالمحرك مدمج ضمنه) أو يفسر (بمعنى أدق) السكربت، ثم يحول السكربت إلى لغة الآلة (عملية التصريف)، ثم تُنفَّذ شيفرات الآلة بشكل سريع. يحسّن المحرك كل مرحلة من هذه العملية عن طريق مراقبة السكربت المترجم أثناء تنفيذه، وتحليل تدفق البيانات وفق السكربت ثم يقوم بتحسين شيفرة الآلة الناتجة وفقًا للمعرفة التي قام باكتسابها مما يساعد على زيادة سرعة تنفيذ السكربت. ما الذي يمكن أن تفعله لغة JavaScript ضمن المتصفح؟ لغة JavaScript بإصدارها الحالي هي لغة برمجية «آمنة». ويعود ذلك إلى توجيه هذه اللغة للعمل ضمن المتصفحات لذلك فهي لا تحتوي على تعليمات للوصول إلى طبقة أدنى من العتاد مثل المعالج أو الذاكرة لأن عملها لا يتطلب ذلك. وتعتمد امكانيات لغة JavaScript بشكل كبير على البيئة التي تعمل ضمنها؛ فمثلًا تدعم بيئة Node.Js (التي تنفِّذ شيفرة JavaScript خارج بيئة المتصفح) التوابع التي تسمح بالقراءة من أو الكتابة على الملفات، وتنفِّذ طلبات الشبكة، وغيرها من المهام التي لا يمكن تنفيذها في بيئة المتصفح. أما ضمن المتصفح، فيمكن للغة JavaScript القيام بجميع الأعمال المتعلقة بمعالجة صفحات الويب، والتحكم بالتفاعل بين المستخدم وخادم الويب. يمكن للغة JavaScript ضمن المتصفح تنفيذ العديد من المهام نذكر منها: إضافة عناصر HTML جديدة إلى الصفحة، وتغيير المحتوى الحالي لها، وتعديل التنسيقات. التفاعل مع المستخدم وتنفيذ أعمال معينة عند النقر على الفأرة وتحريك المؤشر والضغط على أزرار لوحة المفاتيح. إرسال الطلبات عبر الإنترنت للخوادم البعيدة، بالإضافة إلى تحميل وتنزيل الملفات (كما في تقنية AJAX و COMET). الحصول على معلومات من «ملفات تعريف الارتباط» (Cookies، أو الكعكات) والتعديل عليها، وطرح الأسئلة على زوار الموقع وإظهار الرسائل والاشعارات. يمكن استخدامها لتخزين البيانات من جهة المستخدم أي ذاكرةً محليةً. ما المهام التي لا يمكن للغة JavaScript القيام بها ضمن المتصفح؟ الحد من إمكانيات JavaScript ضمن المتصفح أمرٌ بالغ الضرورة وذلك لضمان أمان المستخدم. أي أن الهدف من ذلك هو منع صفحات الويب الخطيرة من الوصول إلى معلومات سرية أو التلاعب ببيانات المستخدم ...إلخ. يوجد العديد من القيود على عمل JavaScript ضمن المتصفح نذكر منها: لا يمكن للغة JavaScript ضمن المتصفح قراءة الملفات الموجودة على القرص الصلب للمستخدم، أو نسخها، أو التعديل عليها. كما لا يمكنها تشغيل البرامج على جهاز المستخدم أو الوصول إلى ملفات نظام التشغيل. تسمح المتصفحات في الوقت الحالي للغة JavaScript بالتعامل مع الملفات في حالة سماح المستخدم بذلك. مثال على ذلك هو تحميل المستخدم ملفًا ما إلى موقع ويب طلب ذلك إما عبر السحب والإفلات في مربع محدَّد أو اختيار ملف معين في الوسم <input>. وتوجد طرق تتيح التعامل مع الأجهزة الملحقة مثل الكاميرا أو مسجل الصوت ولكنها تتطلب تقديم صلاحيات صريحة من قبل المستخدم وأخذ موافقته على أداء مهمة معينة فقط. بمعنى أن الصفحة التي جرى تفعيل JavaScript لا يعني بالضرورة تفعيل كاميرات الويب والوصول إليها الأمر الذي يتيح مراقبة المستخدم ومحيطه وإرسال المعلومات عبر الإنترنت إلى وكالات الأمن القومي كما يظن البعض. في الحالة العامة، الألسن والنوافذ المختلفة في المتصفح لا يمكنها تبادل البيانات فيما بينها أو معرفة أية تفاصيل عن بعضها بعضًا إلا عندما تستخدم صفحة JavaScript لفتح صفحة أخرى؛ وحتى في هذه الحالة، لا يمكن لصفحة تبادل البيانات مع صفحة فتحتها إذا كانت هاتين الصفحتين من موقعين مختلفين (نطاق مختلف، برتوكول أو منفذ). يسمى ذلك «سياسة المصدر الواحد» ويمكن تجاوزها عند الحاجة ولكن يجب أن تحتوي كلا الصفحتين على سكربت JavaScript خاص يتحكم بتبادل البيانات بينهما. هذه المحدودية - مرةً أخرى - ضرورية لضمان أمان المستخدم. فلا يجب على أي صفحة من الموقع http://anysite.com مثلًا والتي فتحها المستخدم أن يكون باستطاعتها الوصول وسرقة بيانات صفحة أخرى من الموقع http://gmail.com مثلًا مفتوحة في لسان آخر من نفس المتصفح. بإمكان لغة JavaScript تبادل البيانات عبر الإنترنت بسهولة بين صفحة الويب والخادم الخاص بها ولكن إمكانيتها على استقبال البيانات من مواقع ونطاقات أخرى محدودة إلا في حالة السماح بذلك بتصريح صريح (يُذكَر ضمن ترويسة HTTP) للطرف الآخر البعيد. هذه المحدودية مرةً أخرى ضرورية لأمان المستخدم. يجب التنويه أنَ المحدوديات السابقة توجد فقط عند استخدام لغة JavaScript ضمن المتصفح ولا توجد عند استخدامها ضمن بيئة مختلفة مثل الخادم. كما أنّ المتصفحات في الوقت الحالي توفر ملحقات/إضافات تسأل المستخدم عن الرغبة بإعطاء صلاحيات أكبر للغة JavaScript المنفذة في المتصفح. ما المميز في لغة JavaScript؟ هنالك على الأقل ثلاثة أمور تميَز لغة JavaScript وهي: الاندماج الكامل مع HTML و CSS. سهولة تنفيذ الأمور البسيطة. مدعومة من قبل أغلبية المتصفحات ومفعًلة تلقائيًا. لغة JavaScript هي اللغة الوحيدة التي تتوفر فيها هذه المزايا الثلاث. وهذا ما يجعلها الأداة الأكثر انتشارًا لبناء صفحات الويب. قبل البدء بتعلم لغة JavaScript، من المفيد الاطلاع على الآفاق المستقبلية لها والتقنيات الحديثة التي تنافسها من لغات برمجية جديدة وتحديثات في عمل المتصفحات. اللغات المعتمدة على لغة JavaScript لا تناسب قواعد كتابة لغة JavaScript الجميع. ويختلف المطورون في حاجاتهم إلى مزايا مختلفة، وهذا بالطبع أمر متوقع لاختلاف مشاريعهم ومتطلباتهم. لذلك، ظهرت مؤخرًا مجموعة من اللغات البرمجية الجديدة والتي تُحوَّل (transpiled) إلى لغة JavaScript قبل تنفيذها في المتصفح. ومع تطور هذه الأدوات، أصبحت عملية التحويل (transpilation) سريعة. الأمر الذي سمح للمطورين بكتابة الشيفرات بلغة برمجية أخرى ليتم تحويلها تلقائيًا دون أي اختلاف إلى لغة JavaScript وكأنها مكتوبة من الأصل بهذه اللغة. بعض الأمثلة عن مثل هذه اللغات هي: CoffeeScript: تعدُّ لغةً ذات صياغة تجميلية للغة JavaScript. توفر صياغة أقصر مما يسمح بكتابة شيفرة برمجية أوضح وأكثر دقةً. لها شعبية بين مطوري لغة Ruby . TypeScript: تركز على إضافة تعريف لأنواع المعطيات لتسهيل دعم وتطوير الأنظمة المعقدة. طُوِّرت هذه اللغة من قبل شركة Microsoft. Dart: هي لغة مستقلة ولها محرك خاص وتعمل على بيئات مختلفة غير المتصفح (مثل تطبيقات الموبايل). قدمتها شركة Google كبديل عن لغة JavaScript، ولكن تعمل المتصفحات في الوقت الحالي على تحويلها إلى لغة JavaScript كما هو حال اللغات السابقة. هنالك المزيد من اللغات ولكن تعلمك واستخدامك لإحداها لا يلغي ضرورة تعلمك للغة JavaScript، إذ يجب تعلم وفهم هذه اللغة لمعرفة كيفية تنفيذ العمليات والوظائف المختلفة بشكل فعلي. على أي حال، تبقى لغة JavaScript هي الأشهر والأقوى والأسرع تطورًا بين اللغات الشبيهة والمنافسة لها. الخلاصة أُوجدت لغة JavaScript في البداية كلغة يتم تنفيذها فقط من قبل المتصفح ثم تطورت وأصبح من الممكن تنفيذها ضمن بيئات مختلفة عبر Node.js. اليوم، تملك لغة JavaScript مكانة كبيرة وخاصة بسبب دعمها من قبل معظم المتصفحات واندماجها الكامل مع HTML و CSS. هنالك العديد من اللغات التي تُحول إلى JavaScript وتوفر مزايا خاصة. لذا ننصحك بالاطلاع عليها ولو بشكل سريع بعد تمكنك من لغة JavaScript. ترجمة -وبتصرف- للفصل An Introduction to JavaScript من كتاب The JavaScript Language انظر أيضًا المقال التالي: أدوات المطور محررات الشيفرة البرمجية كامل مقالات دليل تعلم جافاسكربت1 نقطة
