🟨

JavaScript

The exam's biggest topic. Master DOM + events + template literals.

Variables

var x = 5;        // function-scoped (old, avoid)
let y = 10;       // block-scoped, reassignable
const z = 15;     // block-scoped, NOT reassignable

Operators

+ - * / %         // arithmetic
== === != !==     // equality (use ===)
< > <= >=         // comparison
&& || !           // AND, OR, NOT
= += -= *= /=     // assignment

if / else / ternary

if (age >= 18) {
    console.log("adult");
} else if (age >= 13) {
    console.log("teen");
} else {
    console.log("child");
}

let status = age >= 18 ? "adult" : "minor";

Loops

for (let i = 0; i < 5; i++) { console.log(i); }
while (i < 5) { i++; }
do { i++; } while (i < 5);
for (let item of ["a","b","c"]) { console.log(item); }
for (let key in {a:1,b:2}) { console.log(key); }
[1,2,3].forEach(x => console.log(x));

Functions

function add(a, b) { return a + b; }
const sub = function(a, b) { return a - b; };
const mul = (a, b) => a * b;
const square = x => x * x;

Arrays

let arr = [10, 20, 30];
arr[0];              // 10
arr.length;          // 3
arr.push(40);
arr.pop();
arr.indexOf(20);
arr.includes(20);
arr.map(x => x * 2);
arr.filter(x => x > 15);

Objects (with shorthand from Kodlar)

let person = { name: "Ali", age: 25 };
person.name;          // dot
person["name"];       // bracket
person.age = 26;
Object.keys(person);
Object.values(person);

// shorthand (used in Kodlar.docx)
const isim = "Ali", foto = "url";
const newfoto = { isim, foto };

DOM — selecting

document.getElementById("myId");
document.querySelector(".myClass");
document.querySelectorAll("p");

DOM — reading / writing

let el = document.getElementById("box");
el.innerHTML = "<b>hi</b>";
el.innerHTML += "<p>more</p>";
el.textContent = "plain text";

let input = document.getElementById("nameInput");
input.value;                          // read
input.value = "default";              // set

img.src = "pic.jpg";
el.style.color = "red";
el.style.backgroundColor = "blue";    // camelCase
el.classList.add("active");
el.classList.remove("hidden");

Events

// inline
<button onclick="sayHi()">Click</button>

// listener
function sayHi() { alert("hi"); }
button.addEventListener("click", () => alert("hi"));

Template literals (very common on exam)

let name = "Ali";
let s = `Hello ${name}, you are ${age} years old.`;

el.innerHTML = `
    <div class="col-3">
        <img src="${item.foto}">
        <p>${item.isim}</p>
    </div>`;

User dialogs

let name = prompt("Your name?");
alert("Hello " + name);
let ok = confirm("Sure?");