Dinamik Olarak Değişen İçerik

JavaScript
,
1

Merhaba.

Python’dan sonra öğrenmek istediğim ilk dil olan JavaScript’e şöyle bir gözatmaktayım şu aralar. :grin:

Merak ettiğim ilk şey ise:
Mevcut HTML sayfasından ayrılmadan, html>body>div etketi içerisindekileri, en kısa ve sürdürülebilir yoldan nasıl değiştirebilirim?

Daha anlaşılır olsun diye şu denememi örnek olarak veriyorum:
./index.html: 
<!DOCTYPE html>
<html lang="TR">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!---------------------->
    <title>JavaScript</title>
    <!---------------------->
    <script src="./script.js" type="module"></script>
  </head>
  <body>
    <div>
      Sayfa 1 | <a href="#">Sayfa 2</a>
    </div>
  </body>
</html>
./script.js: 
let s1 = `Sayfa 1 | <a href="#">Sayfa 2</a>`;
let s2 = `Sayfa 2 | <a href="#">Sayfa 1</a>`;
let curr = s1;

let a = document.querySelector("div>a")
let div = document.querySelector("body>div");

function refresh() {
  a = document.querySelector("div>a");
  a.addEventListener("click", change);
};

refresh();

function change() {
  switch (true) {
    case (curr === s1):
      div.innerHTML = s2;
      curr = s2;
      break;
    case (curr === s2):
      div.innerHTML = s1;
      curr = s1;
      break;
  };
  refresh();
};

İlgilenen herkese şimdiden teşekkür ederim. :slight_smile:

3

:thinking:

:thinking: :thinking:

3 Beğeni
4

Javascriptin Java’nın devamı olduğuna dair bir kaynak verir misiniz?

Javascript işaretleme dillerinin programlama dilidir, diğer programlama dillerinden farklı olarak.

Java ise Python gibi bir programlama dilidir.
İkisinin fazlasıyla farkı var. Öncelikle Javanın öğrenilmesi önerecek kadar bu iki dili nasıl bağdaştırdınız anlayamadım.

1 Beğeni
5

Katılıyorum, Java ile JavaScript arasınsaki ilişki, “terlik-çorap”(:slightly_smiling_face:) ilişkisinden çok, Python ile MicroPython arasındaki işlişkiye benziyor, yani: Sözdizimleri benzer olsada farklı alanlar için yapılmış diller.

6

Java ile javascriptin birbiriyle isim benzerliği dışında hiçbir alakası yok.

2 Beğeni
7

DOM hakkında bilginiz var mı? Sayfadaki bir element’i değiştirmenin yolu önce ona ulaşmak, ve daha sonrasında niteliklerini değiştirmektir. Ulaşmanın türlü yolu var. CSS selector ile ulaşabildiğiniz gibi, document.getElementsByTagName("div") gibi bir sorguyla tüm div elementlerine de ulaşabilirsiniz. Bunun için sayfadan ayrılmanıza gerek yok.

Yoksa kastettiğiniz şey başka bir şey mi?

düzeltme: Tamam kodunuzu açılır bölmeye koymuşsunuz, görmemişim. Bu yaptığınız şey SPA yani Single Page App olarak geçiyor. Bunun için de çeşitli frameworkler var. ReactJS, VueJS gibi. Saf javascript ile yaparsanız baya uğraşmanız gerekecek, o yüzden bir framework kullanmanız daha uygun.

2 Beğeni
8

Yazdığınız kod bu işin bir iki yönteminden biri. Sıkıntı olmadan çalışmalı.

Saf haliyle javascript kullanmak biraz zordur. Onun yerine jquery kullanın. Jquery’de html metoduyla hızlıca değiştirebiliyorsunuz.

Büyük çaplı bir proje yaparsanız jquery yorucu oluyor. Onun yerine bir javascript frameworkü kullanmak çok iyi oluyor. En kısa ve sürdürülebilir yöntem de frameworkler.

2 Beğeni
9

Bu kavramı daha önce duymuştum, araştırdığımda etiketlerin id’leri ile navigasyonu sağlanan HTML sayfaları görmüştüm.

JavaScript framework’lerinden pek haberdar değilim açıkçası. Pek çoğunun ismini duydum ama hangisinin ne işe yaradığı hakkında bir bir fikrim yok.

Siz hangi framework’leri önerirsiniz?

10

Yukarıda saydığım iki kütüphaneyi de deneyip kendiniz tecrübe etmeniz daha iyi olur. Ben şahsen ReactJS tercih ettim. VueJS kütüphanesinin syntax’ı hoşuma gitmedi açıkçası <div v-for="i in bla"></div> gibi bir syntax’a ısınamadım. AngularJS öğrenmesi diğer ikisine göre daha uzun bir süreç gerektiriyor ve henüz ona vakit ayıramadım, yorum yapamıycam yani.

Tabi herşey syntax değil, ama birisi diyelim. Instagram, facebook, medium gibi büyük şirketler ReactJS kullanıyorlar. ReactJS için kendi resmi sitesinde Türkçe kaynak da var. Bir sorunla karşılaştığınızda, aynı sorunu başka birinin yaşamış olma ihtimali ReactJS’de daha yüksek. ReactJS ayrıca Virtual DOM denilen bir teknik kullanarak hız konusunda önemli bir adım atmış aynı zamanda. Düzeltiyorum, bu ifade ReactJS kütüphanesinin diğerlerinden hızlı olduğu anlamında söylenmedi. Virtual DOM, genel olarak ReactJS ile anılan bir tekniktir ve ReactJS, normal DOM yapısına göre daha hızlı olduğu için Virtal DOM tekniğini tercih etmiştir. Durum bundan ibaret.

Kaynak: medium.com

Hepsinin kendine göre eksileri ve artıları vardır. Hepsini deneyip, hangi işlemin, tekniğin hangisinde daha rahat yapılabildiğini tecrübe edindikten sonra birinden diğerine geçmek zor değil. Yani ayrım yapıp sadece birini öğrenmek zorunda da hissetmeyin kendinizi. Hepsini de öğrenebilirsiniz. Hatta ReactJS ve VueJS kütüphanelerini aynı projede de kullandım.

Ama siz tabi yeni başladınız Javascript’e. Bence önce Javascript temelinizi sağlamlaştırın. Sonra kütüphanelere geçiş yaparsınız.

3 Beğeni
11

Bu faydalı bilgiler için çok teşekkür ederim. Mâdem ReactJS’nin pazar payı bu kadar çok, “Topluluğun Bilgeliği“‘dir deyip ondan başlayım

Açıkçası o konuda çok sıkıntı çekmiyorum, Python’dan kazandığım algoritma becerisi az çok getirip götürüyor. İş, JavaScript’e tercüme etmekte. :slight_smile:

1 Beğeni
12

Yanlış anlamayın ama biraz daha çalışmanızı tavsiye ederim. let, var, const arasındaki farklar, this kullanımı, promise, async ve await kullanımı, callback mekanizması, AJAX, websocket, Javascript obje yapısı, prototype, tarayıcılar arasındaki uyumsuzluk çözümleri gibi konuları tercüme etmek zor diyelim.

1 Beğeni
13

Burayı daha sonra okuyacaklar için düzeltme ihtiyacı duydum. VueJS de Virtual DOM tekniğini kullanıyor. Yani hız konusunda çok bir fark yok aralarında.

1 Beğeni
14

Burada hız karşılaştırmasından değil de, ReactJS kütüphanesinin bir özelliğinden bahsetmiştim. Yine de ekleme için teşekkür ederim. ReactJS, bir güncelleme durumunda alt bileşenleri baştan oluşturabiliyor performans olarak çok az da olsa VueJS’den geri de kalabilir karmaşık bir bileşen yapısında. Ama bildiğim kadarıyla VueJS alt bileşenlerin tekrar işlenmesini engelleyebiliyor.

15

Yok niye yanlış anlayım, bunlar gibi şeyler için hâlâ sağlam(bizim istihza belgeleri gibi) bir kaynak arayışındayım zaten.

1 Beğeni
16

Eğer ingilizceniz varsa çok güzel kaynaklar var. Zaten javascript tarayıcı üzerinde çalıştığı için(evet biliyorum nodejs var ama konumuz bu değil), javascript ile ilgili kaynaklar interaktif oluyor genelde, yani hem öğren hem uygula. Bu yüzden çok daha etkili ve hızlı öğrenebiliyorsunuz. İngilizce artık problem değil bence. Eksiğiniz varsa bile eklentilerle çok rahat bir şekilde ingilizce bir kaynağı okuyabilirsiniz.

JavaScript Tutorial → bu çok tavsiye edilir
https://javascript.info/
Learn JavaScript Tutorial - javatpoint → bu da kapsamlı bir kaynaktır tavsiye edebilirim.

1 Beğeni
17
Konu dışı

Java ile İSİM benzerliği olan bir dil yaptıkları için kızgınım.

18

Tekrar merhaba.

JavaScript framework’lerini biraz inceledim ve önce kendimi biraz zorlamak istedim. Ortaya şöyle birşey çıktı:

Yazan kişi olarak, güzel bir iş çıkardığımı düşünüyorum. Yine de hem fikirlerinizi almak hem de “belki birine bir faydası dokunur” diye, paylaşmak istedim.

3 Beğeni