JavaScript for Beginners Series - Part 1 (English & Darija)

Introduction

Welcome to the first part of the JavaScript for Beginners Series. This guide is designed to help you understand the core concepts of JavaScript, with explanations provided in both English and Moroccan Darija to make learning easier.

1. What is JavaScript? (شنو هو جافاسكريبت؟)

JavaScript is a programming language that brings websites to life. To understand its role, think of a website like a human body:

• • HTML: The skeleton (الهيكل).
  • CSS: The clothes (الحوايج).
  • JavaScript: The brain and muscles (العقل و العضلات). It is used to create interactive elements like complex animations, clickable buttons, and forms.

Where does it run?

• • Client-Side (جهة المتصفح): In the browser, JavaScript can change anything on a webpage (the DOM). This is how you make a site interactive.
  • Darija: جافاسكريبت كيخدم فالنافيكاتور ديالك (بحال كروم أو فيرفوكس) باش يبدل الصفحة لي كتشوف فيها، مثلا يوريك ميساج فاش تكليكي على شي بطونة.
  • Server-Side (جهة السيرفور): With environments like Node.js, JavaScript can also run on servers to power the backend of a website, communicate with databases, and more.
  • Darija: ممكن تخدم بيه حتى ف السيرفور باش تبني الواجهة الخلفية ديال شي موقع، تهضر مع الداطاباز و تصاوب API.

2. JavaScript vs. Java (الفرق بين جافاسكريبت و جافا)

Many beginners confuse the two, but they are very different:

JavaScript (JS)

• • Dynamic Typing: The type of a variable can change without issues.
  • Darija: النوع ديال المتغير كيقدر يتبدل فأي وقت بلا مايطرا شي مشكل.
  • Interpreted: Runs directly in the browser, line by line.
  • Darija: الكود كيتنفذ سطر بسطر مباشرة بلا ما يحتاج يترجم هو الأول.
  • Prototype-based: Objects inherit directly from other objects.
  • Single-threaded: Does one thing at a time, very efficiently.
  • Main Use: Web development (Frontend and Backend).

Java

• • Static Typing: You must declare a variable’s type, and it cannot change.
  • Darija: خاصك ضروري تحدد النوع ديال كل متغير، وداك النوع كيبقى ثابت.
  • Compiled: Code is first converted into bytecode, then run on the JVM.
  • Class-based: Objects must be created from a class (blueprint).
  • Multi-threaded: Can do many things at the exact same time.
  • Main Use: Enterprise-level applications, Android development, Big Data.

3. JavaScript and ECMAScript (ECMA العلاقة مع)

JavaScript is an implementation of a standard called ECMAScript. Think of ECMAScript as the official "rulebook" or recipe for the language. This standard ensures that your code works the same way in Chrome, Firefox, Safari, and other browsers.

• • Darija: ECMAScript هو المعيار الرسمي ديال اللغة. هو لي كيخلي الكود ديالك يخدم بنفس الطريقة فجميع المتصفحات. فاش كتسمع ES6, ES7... هادوك هما الإصدارات الجديدة ديال هاد المعيار.

4. Variables: How JavaScript Remembers Things

A program needs to store and manage information using Variables. Think of a variable as a labeled box where you can store a piece of data to use later.

let vs const

In modern JavaScript, there are two main ways to declare a variable:

• • let: Use this when you expect the value inside the box to change.
  • Darija: كنستعملوها ملي كنكونو عارفين بلي القيمة لي فداك المتغير كتقدر تتبدل.
  • const: (Short for constant). Use this when you know the value will never change once it is set. It is good practice to use const by default.
  • Darija: كنستعملوها ملي كتكون القيمة ثابتة ومكتبدلش من بعد ما كنحطوها أول مرة.

Code Example:

// We use 'let' because a user's score can change
let playerScore = 10;
playerScore = 15; // This is allowed.

// We use 'const' because a birth year doesn't change
const birthYear = 1995;
// birthYear = 1996; // This would cause an ERROR!