Ma'lumotlarni ekranga chiqarish

Javascriptda natijalarni erkanga chiqarish namunalari

Javascript ma'lumotni turli xil yo'llar bilan:

  • HTML element ichida yozish orqali, innerHTML dan foydalanib.
  • HTMl element ichida yozilgan ma'lumotni chiqarishda, document.write()  dan foydalanib.
  • alert qutisining ichida yozish orqali,  window.alert()   dan foydalanib.
  • Brauzer konsoliga yozish orqali, console.log()   dan foydalanib ekranga "chop" etish mumkin.

innerHTML dan foydalanish

HTML elementiga ma'lumot kirgizish uchun, Javascriptda document.getElementById(id)  metod ishlatiladi. id atributi HTML elementni ifodalaydi. innerHTML xossasi esa HTML elementiga kirgiziladigan ma'lumot maydonchasini ifodalaydi.

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
 
HTML elementining innerHTML xossasini o'zgartirish, HTML da ma'lumotni ekranda aks ettirishning odatiy usuli hisoblanadi.

document.write() dan foydalanish

Ekranga natijani sinov tariqasida chiqarish uchun document.write() metodi qulay hisoblanadi:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

document.write() metodi HTML dokument yuklangandan keyin ishlatilsa, barcha mavjud HTML ni o'chirib yuboradi:

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
document.write() metodi faqat natijani sinab ko'rish uchun ishlatilsa maqsadga muvofiq bo'ladi.

window.alert() dan foydalanish

Alert box - o'zbekcha "ogohlanturuv oynasi" deb tarjima qilinadi. Maslahatimiz, atamalarning o'zbekchasini eslab qolishdan ko'ra, inglizchasini eslab qolganingiz foydali bo'ladi. Ogohlanturuv oynasiga ma'lumotni chiqarishda, alert box ni ishlatamiz:

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

console.log() dan foydalanish

Xatoliklarni bartaraf etish(inglizcha - debugging) maqsadida biz console.log() metodidan foydalanib ma'lumotni chiqaramiz:

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Mavzular ro'yhati

Javascript kirish Javascriptda ishlash Javascriptni brauzerlarda yoqish Javascript fayl joylashuvlari Ma'lumotlarni ekranga chiqarish Ko'rsatmalar Sintaksis Kirish Dasturlash muhitini o'rnatish va sozlash. Ilk JavaScript kodimiz O'zgaruvchilar va konstantalar O'zgaruvchilarning turlari va primitiv turlar haqida Object'lar haqida Massivlar haqida Funktsiyalar bilan tanishamiz Arifmetik Operatorlar Solishtiruv va tenglik operatorlari Ternary shartli operatori haqida 1-qism. Mantiqiy operatorlar 2-qism. Mantiqiy operatorlar Amaliy mashg'ulot 1 if else haqida switch case haqida for loop haqida while va do...while haqida break va continue ko'rsatmalari haqida for-in va for-of loop'lari haqida Amaliy mashg'ulot 2 FizzBuzz algoritmini yozamiz Amaliy mashg'ulot 3 Amaliy mashg'ulot 4 Amaliy mashg'ulot 5 Amaliy mashg'ulot 6 Yangi obyekt tuzish Yangi obyekt tuzish (konstruktor funktsiyasi yordamida) constructor xossasi Funksiya ham obyekt Value va Reference type'lar haqida batafsil Obyektning xossalarini sikllash Obyektdan klon olish Xotira boshqaruvi Math va String obyektlari haqida Amaliy mashg'ulot 7 To'plamga yangi element qo'shish, o'chirish va undan izlash To'plamlarni birlashtirish va ajratish To'plamlarni tartiblash To'plamlarning every, some va filter metodlari haqida map() metodi va metodlarni ketma-ket chaqirish (chaining) reduce() metodi haqida Amaliy mashg'ulot 8 Amaliy mashg'ulot 9 Amaliy mashg'ulot 10 Amaliy mashg'ulot 11 Funktsiyani yozish usullari Funktsiyalarning parametrlari haqida getter va setter metodlari Xatolarni boshqarish va try-catch Mahalliy va global o'zgaruvchilar let va var orasidagi farq "this" haqida batafsil "Promise"lar haqida Amaliy mashg'ulot 12 JavaScript'da DOM bilan ishlash Callback tushunchasi async\await