Konu: Javascript Programlama Dilini Öğrenmek İsteyenler  (Okunma sayısı 6451 defa)

serdaraydın

  • Bilge Üye
  • *****
  • 4. Sınıf Öğretmeni
  • İleti: 2.509
  • Teşekkür 5090
    • Çevrimdışı
  • # 20 Eki 2018 21:37:04
Leb demeden leblebiyi aldım. Bravo, müthiş hızlısınız. Ben içerikleri hazırlıyorum.

serdaraydın

  • Bilge Üye
  • *****
  • 4. Sınıf Öğretmeni
  • İleti: 2.509
  • Teşekkür 5090
    • Çevrimdışı
  • # 20 Eki 2018 23:30:02
[linkler sadece üyelerimize görünmektedir.] ; Şimdilik ana bilgisayarımdan uzak olduğum için, şöyle bir liste çıkardım. Sonra çok değişecek tabi ki ;

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 21 Eki 2018 02:44:19
[linkler sadece üyelerimize görünmektedir.]
yazdırma işine şöyle bir çözüm buldum:
her kısım ayrı yazdırılacak.

dikkat edilmesi gereken husus, tarayıcının yazdırma sayfasında kenarlıkları, alt bilgi üst bilgi vs kaldırıp %100 seçmek.

son birşey daha:
hazırla dedikten sonra, aşağıda hazırlanan belge üstünde değişiklik yapılabiliyor.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 24 Eki 2018 00:41:45
bu da excel versiyonu:

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 18:00:06
kendi js kütüphanemi hazırlıyorum.kod yazmayı kolaylaştırmak için.
denemeniz için bir şablon hazırladım:

önce elemanları ekliyoruz.
ekteki şablon.html'yi notepad++ ile açın.
<input></input>
<input></input> şeklinde iki tane giriş kutusunu

<body></body> taglarının arasına ekleyin. yani:(görüntülecek herşey bu iki tag'ın arasında olmalı)

<body>
<input></input>
<input></input>
</body>

sonra inputlara isim vereceğiz. bunun için id kullanın. pratiklik için ben herşeyi id üzerine kurdum. mesela
<input id="kutu1"></input>

isim tırnakların içinde olmalıdır. diğer kutuya da kutu2 ismini verin. şu anda şablonu chrome ile açarsanız iki boş kutu göreceksiniz.

daha sonra iki düğme ekleyelim:
<button></button>
<button></button>

düğmelerin görünecek yazısını yazalım:
<button>TOPLA</button>
<button>ÇIKAR</button>

şu anda düğmelere basarsak herhangi birşey olmaz.

düğmelere işlev atamalıyız. işlev atamak için onclick kullanacağız.

<button onclick="topla()">TOPLA</button>
<button onclick="çıkar()">ÇIKAR</button>

işlevlerin sonuna parantez eklemek zorunlu. şimdi TOPLA düğmesine basınca topla() işlevini yerine getirmesi lazım fakat bu işlevi daha tanımlamadığımız için birşey olmayacaktır.

diğer bölüme geçmeden sonuç kutusunu da ekleyelim.
<input id="sonuç"></input>

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 18:18:22
şimdi geldi programımıza toplama yaptırmaya.
şablon html'de aşağıda <script></script> taglarının arasına kodları ekleyeceğiz.

yukarıda belirttiğimiz toplama fonksiyonunu burada yazacağız. bunun için

function topla() {

}

kalıbını yazalım. bu boş kalıptır.

ben işleri kolaylaştırmak için şöyle bir yol izledim:
değer("isim") ->bize inputun içindeki değeri döndürüyor.
değer("isim",5)->inputun içine 5 rakamı koyuyor.

function topla() {
değer("sonuç",değer("kutu1")+değer("kutu2"));
}

bu kodu yazınca 1. ve 2. kutudaki sayıları toplayıp sonuç kutusuna yazacaktır.

not: her kodun sonuna ; eklemelisiniz.

çıkarma işlemini yapması için aşağıdaki kodu ekleyin:

function çıkar() {
değer("sonuç",değer("kutu1")-değer("kutu2"));
}

şimdi burada şöyle bir sonuçla karşılaştık, çıkarma işlemini güzel güzel yaparken toplama işleminde şunu yapıyor:
2+3=23

bu js de toplama işaretinin aynı zamanda birleştirme yapmaya yaramasından olayı oluşan bir hata.bu hatayı aşmak için Number() fonksiyonunu kullanacağız. yani js'ye diyoruz ki bunlar sayı bunları birleştirme topla:

   function topla() {
değer("sonuç",Number(değer("kutu1"))+Number(değer("kutu2")));
}

eğer buraya kadar herşeyi doğru yaptıysanız harika. ilk programınızı yaptınız

gokselgursu

  • Bilge Üye
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 2.060
  • Teşekkür 4621
    • Çevrimdışı
  • # 25 Eki 2018 18:33:15
Paylaşımlarınız  ve anlatımlarınız için teşekkürler.

Python dilinin yanında başka bir dil daha öğrenmek istiyordum. Javascript niye olmasın ki.

Javascript te mesela sürükle bırak, flash uygulamalar gibi uygulamalar yapılabiliniyor mu?
 
Javascript in uygulama alanlarını örneklerle açıklayabilir misiniz? Mesela neleri Javascript te yapabiliriz ya da yapamayız.

İlk başlayanlar için program yapmak için neler (Hangi programlar) gerekli? Türkçe pdf veya benzeri Türkçe kaynak var mı? Açıklarsanız sevinirim?

Benim gibi ilk başlayanlar ekranda bir şey yazdırmayı isterler. Sırayla neler yapılmalı?

Konunuzu takip edeceğim.

Kolaylıklar diliyorum.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 19:51:41
[linkler sadece üyelerimize görünmektedir.] javascript web sayfalarıyla uğraşanların kullandığı bir programdır. eğer web sayfası tasarlamayacaksanız pek size göre bir program değildir.

javascript tek başına çalışmaz. aslında html web sayfalarında yerel erişim ve değişiklik yapmak için icat edilmiştir. yani web sayfası javascript işlemlerini yapmak için sizin bilgisayarınızı kullanır. bu sayede servera yüklenme azalır.

javascript, html elemanlar üzerinde değişklik yapar. mesela o kutuyu kırmızı yapar, bu kutuyu siyah yapar, yerini ve şeklii değiştirir vb. sürükle bırak özelliği html nin özelliği olarak gelir. javascript ile de elemanlara bu özellik verilebilir.

flash uygulamaları başka bir olay. javascript onun gibi bir program değil. dediğim gibi mesela aşağıdaki "Gönder" butonunun yazısını,şeklini,rengini ve yerini js ile değiştirebilirsiniz.

pythondan sonra js biraz attan inip eşeğe binmek gibi olur. js yine dediğim gibi o tarz bir program da değil.ben sizin yerinize olsam bir sonraki adımda c++ denerdim.

js nin uygulamaları aslında etkileşimli web sayfaları yapmakta kullanılıyor. tabloları şekilledirme, hızlı içerik bulma, sayfanın boyuna göre içeriği ayarlama gibi...

js'nin kısıtlamaları çok fazla; sqlite,mysqli ,vb gibi data tabloları kullanamazsınız, yerel dosyalara erişimi yoktur, bir txt dosyasının içine bile bir satır yazı ekleyemezsiniz.

ben normalde web sayfaları ile uğraştığım için bu dili biliyordum. bu dili, diğer örneklerini yaptığım etkileşimli programları yapmak için kullanabileceğimi farkettim. mesela bir kutunun kaybolması, ortaya çıkması, rastgele yerlere gitmesi hep js marifeti ile oluyor.

js'nin kaynağı çok fazla olup mesela bu mozilla firefoxun türkçe js dersi:
[linkler sadece üyelerimize görünmektedir.]

şimdi gelelim ekrana birşey yazmaya:
1) benim şablonumu açın,
2) <script></script> taglarının arasına alert("merhaba"); yazın.
yani

<script>
alert("merhaba");
</script>

bir başka örnek:
1) body taglarının arasına;
<div id="yazılar"></div> (div: html'de kutuların tagıdır)
ekleyin.
2)script kısmına
içerik("yazılar","Merhaba"); yazın ya da tam anlamıyla js kodu kullanırsak:

document.getElementById("yazılar").innerHTML ="Merhaba";

yazın.

eğer bu yazdırma işlemini bir butona bağlamak istiyorsanız önceki örnekteki gibi buton ekleyip function hazırlayın.

gokselgursu

  • Bilge Üye
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 2.060
  • Teşekkür 4621
    • Çevrimdışı
  • # 25 Eki 2018 19:54:35
İlk programım oldu. Ekte verilmiştir.

Anlatımlarınızı yaparken programın veya kodların (özellikle girintilerin görülmesi açısından) ekran görüntüsünü eklerseniz yeni öğrenenler açısından yararlı olacaktır.

Klasördeki kolay.js dosyası ne amaçla kullanılıyor. Program kolay.js olmadan da çalışıyor. Açıklarsanız sevinirim.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 20:02:20
girintilerin göze hoş görünmekten başka hiçbir amacı yok :)

kolay.js benim hazırladığım işimi kolaylaştıran fonksiyonlar kümesi.
document.getElementById("isim").value yazmak yerine
değer("isim") yazıyorum.onsuz çalışmaz aslında.

js de girinti kullanılmıyor. onun yerine {} kullanılıyor.
satır sonu ;
if(buraya şart yazılır) {buraya çalışacak kod} else {diğer kod}
var asd=3; değişken atama.değişken isminin başına var konulur.

gokselgursu

  • Bilge Üye
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 2.060
  • Teşekkür 4621
    • Çevrimdışı
  • # 25 Eki 2018 20:12:27
[linkler sadece üyelerimize görünmektedir.]
girintilerin göze hoş görünmekten başka hiçbir amacı yok :)

kolay.js benim hazırladığım işimi kolaylaştıran fonksiyonlar kümesi.
document.getElementById("isim").value yazmak yerine
değer("isim") yazıyorum.onsuz çalışmaz aslında.

js de girinti kullanılmıyor. onun yerine {} kullanılıyor.
satır sonu ;
if(buraya şart yazılır) {buraya çalışacak kod} else {diğer kod}
var asd=3; değişken atama.değişken isminin başına var konulur.
Evet çalışmadı. Ben chrome un kodları çalıştırdığını düşünüyordum.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 20:16:32
[linkler sadece üyelerimize görünmektedir.]
Evet çalışmadı. Ben chrome un kodları çalıştırdığını düşünüyordum.
kolay js nin içini açıp bakabilirsiniz (notepad++ ile). içine açıklamalar koydum. ama daha geliştirme aşamasında.

gokselgursu

  • Bilge Üye
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 2.060
  • Teşekkür 4621
    • Çevrimdışı
  • # 25 Eki 2018 20:16:40
Notepad++ ta yeni yazdığım bir kodu yeni başlayanlar nasıl çalıştırabilir? Bunu merak edenler çoktur diye düşünüyorum.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.467
  • Teşekkür 5758
    • Çevrimdışı
  • # 25 Eki 2018 20:32:45
[linkler sadece üyelerimize görünmektedir.]
Notepad++ ta yeni yazdığım bir kodu yeni başlayanlar nasıl çalıştırabilir? Bunu merak edenler çoktur diye düşünüyorum.
web sayfaları temelde sadece basit bir txt dosyasıdır. sadece uzantısı html olarak değişmiştir. bunun sebebi sayfaların internette çabuk yüklenmesini sağlamaktır.
firefox, chrome gibi programlar bu txt dosyasını okur ve bize gördüğümüz web sayfaları olarak sunar. yazdığınız kodların çalışması için bu programlar şarttır.

hsbk

  • Tecrübeli Üye
  • ****
  • İleti: 108
  • Teşekkür 135
    • Çevrimdışı
  • # 25 Eki 2018 21:10:55
[linkler sadece üyelerimize görünmektedir.]
Notepad++ ta yeni yazdığım bir kodu yeni başlayanlar nasıl çalıştırabilir? Bunu merak edenler çoktur diye düşünüyorum.

Online kod editörleri ile başlayabilirsiniz.
[linkler sadece üyelerimize görünmektedir.] en kullanışlarından biridir.

Kodlarınızı da online paylaşabilirsiniz. Örnek:
[linkler sadece üyelerimize görünmektedir.]

 

Egitimhane.Com ©2006-2023