---
- JavaScript, web sayfalarını dinamik ve etkileşimli hale getiren programlama dilidir.
- HTML → yapı 🏗️, CSS → tasarım 🎨, JavaScript → etkileşim ⚡.
- Tarayıcı üzerinde çalışır ama Node.js sayesinde sunucu tarafında da kullanılabilir.
<!DOCTYPE html>
<html>
<body>
<h1>Merhaba Dünya</h1>
<script>
console.log("Merhaba JavaScript 🚀");
</script>
</body>
</html>📌 Açıklama:
console.log()→ Konsola yazı yazar.<script>→ JS kodunu HTML içine ekler.
var eski = "Bunu artık pek kullanma";
let degisken = "Değiştirilebilir";
const sabit = "Değiştirilemez";✔️ Modern JS’de let ve const tercih edilir.
❌ var hatalara yol açabilir.
let sayi = 42; // Number
let metin = "Merhaba"; // String
let dogruMu = true; // Boolean
let liste = [1, 2, 3]; // Array
let nesne = { ad: "Ebrar", yas: 20 }; // Object
let bos = null; // Null
let tanimsiz; // Undefinedlet yas = 18;
if (yas >= 18) {
console.log("Reşitsiniz ✅");
} else {
console.log("Reşit değilsiniz ❌");
}let gun = 3;
switch (gun) {
case 1: console.log("Pazartesi"); break;
case 2: console.log("Salı"); break;
case 3: console.log("Çarşamba"); break;
default: console.log("Bilinmiyor");
}for (let i = 1; i <= 5; i++) {
console.log(i);
}let sayac = 0;
while (sayac < 3) {
console.log("Sayaç: " + sayac);
sayac++;
}function selamla(isim) {
return "Merhaba, " + isim;
}
console.log(selamla("Ebrar"));👉 Modern JS’de arrow function:
const kare = x => x * x;
console.log(kare(5));let meyveler = ["Elma", "Armut", "Muz"];
console.log(meyveler[0]); // Elmalet ogrenci = { ad: "Ebrar", yas: 20 };
console.log(ogrenci.ad);HTML ile etkileşim için:
<!DOCTYPE html>
<html>
<body>
<h1 id="baslik">Merhaba</h1>
<button onclick="degistir()">Tıkla</button>
<script>
function degistir() {
document.getElementById("baslik").innerHTML = "JavaScript Çalıştı 🎉";
}
</script>
</body>
</html>📌 document.getElementById() → HTML öğesine erişim sağlar.
✔️ const kullan, sadece gerektiğinde let.
✔️ Dizilerde .forEach() ve .map() kullan → daha temiz kod.
✔️ Template string kullan:
let isim = "Ebrar";
console.log(`Merhaba ${isim} 🎉`);❌ var kullanma.
❌ == yerine === kullan (tip karşılaştırması yapar).
- Kullanıcıdan isim iste → “Merhaba, [isim]” yazdır.
- 1’den 20’ye kadar sayıları yazdır ama sadece çiftleri göster.
- Bir dizi oluştur (
["elma","armut","muz"]) → tümünü konsola yazdır. - Bir butona tıklandığında sayfa arka plan rengini değiştir.
JavaScript, modern web geliştirmede olmazsa olmaz bir dildir.
Frontend (React, Vue, Angular) ve Backend (Node.js, Express) alanlarında yaygınca kullanılır.
Kısacası: HTML + CSS + JavaScript üçlüsü web’in kalbidir ❤️
- JavaScript is a programming language that makes web pages dynamic and interactive.
- HTML → structure 🏗️, CSS → design 🎨, JavaScript → interactivity ⚡.
- Runs in the browser, but can also be used server-side thanks to Node.js.
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<script>
console.log("Hello JavaScript 🚀");
</script>
</body>
</html>📌 Description:
console.log()→ Writes text to the console.<script>→ Inserts JavaScript code into HTML.
var obsolete = "Don't use this anymore";
let variable = "Mustable";
const constant = "Immutable";✔️ In modern JS, let and const are preferred.
❌ var can lead to errors.
let number = 42; // Number
let text = "Hello"; // String
let true = true; // Boolean
let list = [1, 2, 3]; // Array
let object = { name: "Ebrar", age: 20 }; // Object
let null = null; // Null
let undefined; // Undefinedlet age = 18;
if (age >= 18) {
console.log("You are a minor ✅");
} else {
console.log("You are a minor ❌");
}let day = 3;
switch (day) {
case 1: console.log("Monday"); break;
case 2: console.log("Tuesday"); break;
case 3: console.log("Wednesday"); break;
default: console.log("Unknown");
}for (let i = 1; i <= 5; i++) {
console.log(i);
}let counter = 0;
while (counter < 3) {
console.log("Counter: " + counter);
counter++;
}function greet(name) {
return "Hello, " + name;
}
console.log(greet("Ebrar"));👉 arrow function in Modern JS:
const square = x => x * x;
console.log(square(5));let fruits = ["Apple", "Pear", "Banana"];
console.log(fruits[0]); // Applelet student = { name: "Ebrar", age: 20 };
console.log(student.name);To interact with HTML:
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello</h1>
<button onclick="change()">Click</button>
<script>
function change() {
document.getElementById("title").innerHTML = "JavaScript Worked 🎉";
}
</script>
</body>
</html>📌 document.getElementById() → Accesses the HTML element.
✔️ Use const, only use let when necessary.
✔️ Use .forEach() and .map() with arrays → cleaner code.
✔️ Use template string:
let name = "Ebrar";
console.log(`Hello ${name} 🎉`);❌ Do not use var.
❌ Use === instead of == (performs type comparison).
- Ask the user for a name → print “Hello, [name]”.
- Print numbers from 1 to 20, but only display pairs.
- Create an array (
["apple","pear","banana"]) → print all to the console. - Change the page background color when a button is clicked.
JavaScript is an essential language in modern web development. It's widely used in both the frontend (React, Vue, Angular) and backend (Node.js, Express). In short: HTML + CSS + JavaScript is the heart of the web ❤️