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

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 12 Kas 2018 01:28:35
bugün size sublime text programını tanıtacağım ve biraz da div tagından bahsedeceğim.
sublime text paralı bir program olmasına rağmen ücretsiz sürümü işinizi görebilen bir programdır.
kod yazarken otomatik doldurma seçenekleri gösterir, hatalı kısımlarda uyarı niteliğinde renkler görürsünüz. bu açılardan faydalıdır.

div tagı html dilinde kutuyu temsil eder.
<div></div> yazdığınız yerde içi boş, yüksekliği sıfır, genişliği sayfa genişliğinde olan bir kutu. bu kutuyu css dili ile biz şekillendririz.
ama önce kutumuza bir isim verelim:
<div id="kutu"></div>
şimdi şablonumuza dönelim. en üst kısımda <style></style> tagları bizim şekilleri yazdığımz kısımdır.
bu kısma
#kutu {} yazalım. #kutu'nun anlamı id="kutu" olan div demektir. buraya yazdığımız herşey id="kutu" yu etkiler. öncelikle kutumuza yükseklik ve genişlik değerleri verelim.
#kutu {
width:100px;
height:100px;
}

px piksel demektir. bunun yerine cm, mm, %, em, vw ,vh kullanabilirsiniz. hepsi uzunluk ölçüsüdür. kutumuz şimdi 100px * 100px boyutunda. fakat görünmüyor. bunun için kenar eklemeliyiz:

#kutu {
width:100px;
height:100px;
border:2px solid black;
}

gördüğünüz gibi ifadeler hep ingilizce. border, kenar demek. 2px, kalınlığı;
solid, çizginin şeklini; black, rengini ifade eder. istediğiniz gibi değiştirebilirsiniz.

eğer herşeyi doğru yazdıysanız kutuyu görebilirsiniz artık.
kutumuzu renklendirelim:
#kutu {
width:100px;
height:100px;
border:2px solid black;
background-color:pink;
}

bu şekilde kutunuza  istedğiniz şekli verebilirsiniz. başka neleri belrleyebileceğinizi google'a "css referance" yazıp bulabilirsiniz.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 13 Kas 2018 19:58:07
css(şekil verme) kodlarının nasıl çalıştığını görmeniz için küçük bir örnek hazırladım.
bunun javascript ile alakası ne diye soracak olursanız, js ile bu değerleri değiştirebiliyoruz.
(top ve left değerleri "relative,fixed ve absolute kısmen de sticky" ile çalışır.)

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 19 Kas 2018 19:28:21
İyi akşamlar hocam. Dökümanlar sayfasında paylaştığınız programları burada da paylaşırsanız  programlarınızı kaçırmamız oluruz. Sınıfta değişik etkinlikler öğrencilerin hoşlarına gidiyor.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 19 Kas 2018 19:58:55
[linkler sadece üyelerimize görünmektedir.]
İyi akşamlar hocam. Dökümanlar sayfasında paylaştığınız programları burada da paylaşırsanız  programlarınızı kaçırmamız oluruz. Sınıfta değişik etkinlikler öğrencilerin hoşlarına gidiyor.
Tamam hocam. İyi fikir.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 27 Kas 2018 22:36:00
yeni projemizin adı: Anlamlı ve kurallı cümle oluşturma oyunu :)
şöyle bir çizim yaptım, bakalım bu defa başarabilecek miyiz?

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 29 Kas 2018 02:07:51
süslenmemiş hali şöyle:

iki satırdan vazgeçtim. herşey aynı satırda olacak.
sonraki adımlar:
kutular renklenecek.
doğru yanlış yazısı renklenecek.
cümleler değiştirilecek, daha uygun cümleler konacak.

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 29 Kas 2018 02:53:52
[linkler sadece üyelerimize görünmektedir.]
süslenmemiş hali şöyle:

iki satırdan vazgeçtim. herşey aynı satırda olacak.
sonraki adımlar:
kutular renklenecek.
doğru yanlış yazısı renklenecek.
cümleler değiştirilecek, daha uygun cümleler konacak.
2 satırdan neden vazgeçtiniz. Okulistikte sürükle bırak tarzında uygulamalar var.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 29 Kas 2018 06:43:34
[linkler sadece üyelerimize görünmektedir.]
2 satırdan neden vazgeçtiniz. Okulistikte sürükle bırak tarzında uygulamalar var.
İşin içinden çıkamadım. Bu çok daha kolayıma geldi.

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 01 Ara 2018 17:17:02
[linkler sadece üyelerimize görünmektedir.]
İşin içinden çıkamadım. Bu çok daha kolayıma geldi.

İnternetten python dili ile yazılmış sürükle bırak kaynak kodu buldum. Üstteki sayı değerlerini alttaki boşluğa taşıyacaklar. Ekte a.zip dosyası -python dili ile yazılmış kaynak kod - vardır. Geliştirilmeye müsaittir.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 05 Ara 2018 22:44:06
ve son hali.

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 06 Ara 2018 04:25:50
Merhaba [linkler sadece üyelerimize görünmektedir.] hocam. Okulda kodlama eğitimi vermeye başlayacağım. Excel de veya chrome da çalışan ve çıktısını alabileceğimiz kodlama etkinlik programı yapabilir misiniz? İlk aşamada basit 1. sınıf düzeyinde 4x4 16 karelik bir zeminde, verilen yönergelerin yazdığı etkinlik sayfası hazırlayabilir misiniz? Kare sayıları seviyeleri geliştikçe artacak. Mesela buna benzer.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 06 Ara 2018 19:51:36
[linkler sadece üyelerimize görünmektedir.]
Merhaba [linkler sadece üyelerimize görünmektedir.] hocam. Okulda kodlama eğitimi vermeye başlayacağım. Excel de veya chrome da çalışan ve çıktısını alabileceğimiz kodlama etkinlik programı yapabilir misiniz? İlk aşamada basit 1. sınıf düzeyinde 4x4 16 karelik bir zeminde, verilen yönergelerin yazdığı etkinlik sayfası hazırlayabilir misiniz? Kare sayıları seviyeleri geliştikçe artacak. Mesela buna benzer.
bu işi çözmeye bir matematik dehası lazım...

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 06 Ara 2018 20:44:39
[linkler sadece üyelerimize görünmektedir.] hocam Ekran görüntüsündeki gibi olsa 1. sınıf seviyesi olarak işimi görür. Boyut yatay ve büyütülmeli. 2,3,4. sınıf seviyesi sonra düşünülebilir.

smyi

  • Bilge Meclis Üyesi
  • *****
  • 2. Sınıf Öğretmeni
  • İleti: 1.489
  • Teşekkür 5939
    • Çevrimdışı
  • # 06 Ara 2018 20:50:30
[linkler sadece üyelerimize görünmektedir.]
[linkler sadece üyelerimize görünmektedir.] hocam Ekran görüntüsündeki gibi olsa 1. sınıf seviyesi olarak işimi görür. Boyut yatay ve büyütülmeli. 2,3,4. sınıf seviyesi sonra düşünülebilir.
bu akşam uğraşayım. dediğiniz kısım yapılabilir.

gokselgursu

  • Bilge Üye
  • *****
  • 3. Sınıf Öğretmeni
  • İleti: 2.198
  • Teşekkür 4749
    • Çevrimdışı
  • # 06 Ara 2018 20:52:25
[linkler sadece üyelerimize görünmektedir.]
bu akşam uğraşayım. dediğiniz kısım yapılabilir.
Çok iyi olur hocam. Bir çay yollarım sana.

 

Egitimhane.Com ©2006-2023