JavaScript in the browserJavaScript في المتصفح

Your HTML file is text. What JavaScript talks to is a tree the browser built from it — and the difference between those two explains most of what surprises people first.

ملف HTML خاصتك نص. وما تحادثه JavaScript شجرة بناها المتصفح منه — والفرق بينهما يفسّر معظم ما يفاجئ الناس أولًا.

Before you can change anything you have to find it. Two methods cover almost everything, and they use the CSS selectors you already know from a whole course of them.

قبل أن تغيّر شيئًا عليك إيجاده. وطريقتان تغطيان كل شيء تقريبًا، وتستخدمان مُحدِّدات CSS التي تعرفها من دورة كاملة عنها.

Two properties write text into an element, and the difference between them is a security decision rather than a style preference.

خاصيتان تكتبان نصًا في عنصر، والفرق بينهما قرار أمني لا تفضيل أسلوبي.

You can set styles directly from JavaScript, and you almost never should. Adding and removing a class keeps the design in the stylesheet where it belongs.

تستطيع ضبط التنسيقات مباشرة من JavaScript، ولا ينبغي أن تفعل تقريبًا. فإضافة صنف وإزالته تبقي التصميم في ملف التنسيق حيث ينتمي.

Building a list from data is the most common thing a page does. Doing it by creating elements rather than joining strings is what makes it safe.

بناء قائمة من بيانات أشيع ما تفعله صفحة. وفعله بإنشاء عناصر لا بوصل نصوص هو ما يجعله آمنًا.

Everything interactive is the same shape: something happens, and a function you wrote runs. One method attaches that function, and understanding that it is not called by you is the whole idea.

وكل تفاعلي هو الشكل نفسه: يحدث شيء فتعمل دالة كتبتها. وطريقة واحدة تربط تلك الدالة، وفهم أنك لست من يستدعيها هو الفكرة كلها.

The browser hands your function an argument describing what happened: which element, which key, where the pointer was — and one method that stops the browser doing its normal thing.

يسلّم المتصفح دالتك وسيطًا يصف ما حدث: أي عنصر وأي مفتاح وأين كان المؤشر — ودالة واحدة توقف المتصفح عن فعل عادته.

An event does not stop where it happened — it travels up the tree. That one behaviour lets you attach a single listener instead of two hundred, and it solves the problem lesson 3 warned about.

الحدث لا يتوقف حيث وقع — بل يسافر صاعدًا في الشجرة. وذلك السلوك وحده يتيح لك ربط مستمع واحد بدل مئتين، ويحل المشكلة التي حذّر منها الدرس 3.

Reading a form, checking it, and telling someone what is wrong. The browser does more of this for free than most people use — and none of it is a substitute for checking on the server.

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

A shorter way to write a function, used constantly in modern code. The syntax has four forms worth recognising, and one behaviour that is not just shorthand.

طريقة أقصر لكتابة دالة، تُستخدم باستمرار في الشيفرة الحديثة. وللصيغة أربعة أشكال تستحق التعرف، وسلوك واحد ليس مجرد اختصار.

Pulling values out of an object or an array into named variables, in one line. It appears everywhere in modern code, and once you can read it a great deal of other people's code opens up.

سحب القيم من كائن أو مصفوفة إلى متغيّرات مسمّاة في سطر واحد. ويظهر في كل مكان في الشيفرة الحديثة، وما إن تستطيع قراءته حتى ينفتح لك كثير من شيفرة الآخرين.

Three dots that mean two opposite things depending on where they stand: spreading a collection out, or gathering loose values in. They are also the standard way to copy an array or an object without changing the original.

ثلاث نقاط تعني شيئين متعاكسين بحسب موضعها: نشر مجموعة، أو جمع قيم متفرقة. وهما كذلك الطريقة المعيارية لنسخ مصفوفة أو كائن دون تغيير الأصل.

Two small operators that between them remove most of the defensive clutter from code that reads data it did not create. One stops a chain safely; the other supplies a default without swallowing zero.

مؤثران صغيران يزيلان بينهما معظم الفوضى الدفاعية من شيفرة تقرأ بيانات لم تنشئها. أحدهما يوقف سلسلة بأمان، والآخر يوفّر قيمة افتراضية دون ابتلاع الصفر.

How a project stops being one enormous file. Each file keeps its own names, publishes the few it wants shared, and states plainly which other files it depends on.

كيف يكفّ مشروع عن كونه ملفًا ضخمًا واحدًا. فكل ملف يحتفظ بأسمائه، وينشر القليل الذي يريد مشاركته، ويصرّح بوضوح بالملفات الأخرى التي يعتمد عليها.

A page has one thread, and everything competes for it: your code, the clicks, the scrolling, the drawing. Understanding that single queue is what makes promises and async/await make sense rather than feel like ceremony.

للصفحة خيط واحد، وكل شيء يتنافس عليه: شيفرتك والنقرات والتمرير والرسم. وفهم ذلك الطابور الواحد هو ما يجعل الوعود وasync/await منطقية بدل أن تبدو طقسًا.

A function you hand to somebody else to call later. Timers are the simplest place to see one work, and the honest place to see why nesting them stopped being good enough.

دالة تسلّمها لغيرك لينادينها لاحقًا. والمؤقتات أبسط موضع ترى فيه واحدة تعمل، وأصدق موضع ترى فيه لماذا كفّ تعشيشها عن أن يكون كافيًا.

The receipt the browser hands you when you ask for something that takes time. It is not the value; it is an object that will eventually hold either the value or the reason there is not one.

الإيصال الذي يعطيك إياه المتصفح حين تطلب شيئًا يستغرق وقتًا. وهو ليس القيمة؛ بل كائن سيحمل في النهاية إما القيمة وإما سبب عدم وجودها.

The same promises, written as though they were ordinary sequential code. Two keywords, no new machinery underneath — and one performance trap that catches everybody exactly once.

الوعود نفسها مكتوبة كأنها شيفرة تتابعية عادية. كلمتان مفتاحيتان بلا آلة جديدة تحتهما — وفخّ أداء واحد يوقع الجميع مرة واحدة بالضبط.

What try can and cannot catch, why an empty catch is worse than no catch at all, and how to fail in a way that tells the user something true.

ما يستطيع try التقاطه وما لا يستطيع، ولماذا catch فارغة أسوأ من لا التقاط أصلًا، وكيف تخفق على نحو يقول للمستخدم شيئًا صحيحًا.

Text that looks like a JavaScript object but is not one. It is how data crosses between a server and a page, and how a page keeps something between visits — and it loses a few things on the way, quietly.

نص يشبه كائن جافاسكربت وليس كذلك. وهو كيف تعبر البيانات بين خادم وصفحة، وكيف تحتفظ صفحة بشيء بين الزيارات — ويفقد أشياء قليلة في الطريق بهدوء.

Asking another machine for data, and the two awaits it always takes. Also the one thing about fetch that everybody gets wrong for the first year: a 404 is not an error.

سؤال آلة أخرى عن بيانات، والانتظاران اللذان يتطلبهما دائمًا. وكذلك الشيء الوحيد الذي يخطئ فيه الجميع في fetch طوال السنة الأولى: أن 404 ليست خطأً.

Anything that takes time has four outcomes, not one, and a page that only draws the happy path is unfinished. This is the lesson that separates code that works on your machine from code other people can use.

لكل ما يستغرق وقتًا أربع نتائج لا واحدة، والصفحة التي ترسم المسار السعيد وحده غير مكتملة. وهذا الدرس هو الذي يفصل شيفرة تعمل على جهازك عن شيفرة يستطيع غيرك استعمالها.

One page that fetches real data, renders it, responds to what the visitor does, remembers something between visits, and behaves properly when the network is slow or gone. Everything in this course, in one file tree.

صفحة واحدة تجلب بيانات حقيقية وتعرضها وتستجيب لما يفعله الزائر وتتذكر شيئًا بين الزيارات وتتصرف كما ينبغي حين تكون الشبكة بطيئة أو غائبة. كل ما في هذه الدورة في شجرة ملفات واحدة.