Javascript Programlama Dilini Öğrenmek İsteyenler

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.)

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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?

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 05 Ara 2018 22:44:06
ve son hali.

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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...

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
  • 4.252
  • 23.235
  • 4. Sınıf Öğretmeni
# 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.

Çevrimiçi gokselgursu

  • Bilge Meclis Üyesi
  • *****
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
  • 3.986
  • 13.241
  • 3. Sınıf Öğretmeni
# 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 KVKK