Javascript Programlama Dilini Öğrenmek İsteyenler

Çevrimdışı kuantum23

  • Tecrübeli Üye
  • ****
  • 135
  • 547
  • Müdür Yardımcısı
  • 135
  • 547
  • Müdür Yardımcısı
# 15 Eyl 2021 10:26:13
[linkler sadece üyelerimize görünmektedir.]
fişler programı, dokunmatik özelliği ekledim.
Emeğiniz için çok teşekkür ederiz hocam. Ellerinize sağlık.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 15 Eyl 2021 16:59:41
[linkler sadece üyelerimize görünmektedir.]
Emeğiniz için çok teşekkür ederiz hocam. Ellerinize sağlık.
Hocam, eklediğim dokunmatik özelliği akıllı tahtada çalışmadı. Akıllı tahtada çalışır hale getirmeye çalışıyorum.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 28 Eyl 2021 21:48:51
Rastgele öğrenci seçme programları.
isimleri, dosyalar klasörünün içindeki öğrenci isimleri.txt dosyasına yazın.
kartlar en fazla 24 öğrenciliktir.

Çevrimdışı hesap23

  • Bilge Üye
  • *****
  • 3.143
  • 17.772
  • 1. Sınıf Öğretmeni
  • 3.143
  • 17.772
  • 1. Sınıf Öğretmeni
# 29 Eyl 2021 07:36:22
[linkler sadece üyelerimize görünmektedir.]
Hocam, eklediğim dokunmatik özelliği akıllı tahtada çalışmadı. Akıllı tahtada çalışır hale getirmeye çalışıyorum.
Sayın hocam, daha önce 2017'de paylaştığınız "harflerkelimeler" programını Vestelin akıllı tahtalarında dün denedim. Harfleri taşıyamadım.
Şu an ki "fişler" programını da bugün deneyeceğim, olumlu ya da olumsuz geri dönüş yaparım.
Selam ve dua ile emeğinize sağlık.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 29 Eyl 2021 11:11:22
[linkler sadece üyelerimize görünmektedir.]
Sayın hocam, daha önce 2017'de paylaştığınız "harflerkelimeler" programını Vestelin akıllı tahtalarında dün denedim. Harfleri taşıyamadım.
Şu an ki "fişler" programını da bugün deneyeceğim, olumlu ya da olumsuz geri dönüş yaparım.
Selam ve dua ile emeğinize sağlık.
hocam, normal telefonlarda ekrana dokunduğunuzda "touchstart" eylemi(dokunma eylemleri) başlıyor. akıllı tahtalarda ise dokunmatikte bu eylem tetiklenmiyor. onun yerine "mousedown" eylemi sanki sistemde mouse varmış gibi tetikleniyor. fakat akıllı tahta+modern tarayıcı(chrome-firefox yeni sürümler) ikilisinde mouse events(fare etkinlikleri) çalışmıyor.

tek çözüm olarak seamonkey  ile çalıştırma çözümünü buldum. seamonkey firefox tarafından geliştirilen, içerisinde html düzenleyici program da bulunan eski tarz bir tarayıcı.
[linkler sadece üyelerimize görünmektedir.]

eğer bu soruna başka çözüm bulmaya çalışmıyorum, çünkü akılı tahtada fare eylemleri tam desteklenmiyor. yani farenin sol tuşuna basınca şu olsun, sürüklerken şu olsun gibi eylemler chrome ve firefox gibi modern tarayıcılarda çalışmayınca elim kolum bağlanıyor. ilginiz için teşekkür ederim.

Çevrimdışı hesap23

  • Bilge Üye
  • *****
  • 3.143
  • 17.772
  • 1. Sınıf Öğretmeni
  • 3.143
  • 17.772
  • 1. Sınıf Öğretmeni
# 29 Eyl 2021 18:36:47
[linkler sadece üyelerimize görünmektedir.]
hocam, normal telefonlarda ekrana dokunduğunuzda "touchstart" eylemi(dokunma eylemleri) başlıyor. akıllı tahtalarda ise dokunmatikte bu eylem tetiklenmiyor. onun yerine "mousedown" eylemi sanki sistemde mouse varmış gibi tetikleniyor. fakat akıllı tahta+modern tarayıcı(chrome-firefox yeni sürümler) ikilisinde mouse events(fare etkinlikleri) çalışmıyor.

tek çözüm olarak seamonkey  ile çalıştırma çözümünü buldum. seamonkey firefox tarafından geliştirilen, içerisinde html düzenleyici program da bulunan eski tarz bir tarayıcı.
[linkler sadece üyelerimize görünmektedir.]

eğer bu soruna başka çözüm bulmaya çalışmıyorum, çünkü akılı tahtada fare eylemleri tam desteklenmiyor. yani farenin sol tuşuna basınca şu olsun, sürüklerken şu olsun gibi eylemler chrome ve firefox gibi modern tarayıcılarda çalışmayınca elim kolum bağlanıyor. ilginiz için teşekkür ederim.
Teşekkür ederim sayın hocam. Haklısınız istediğim verimi alamadım.
Selam ve dua ile...

Çevrimdışı iskelet

  • Tecrübeli Üye
  • ****
  • 209
  • 1.471
  • 209
  • 1.471
# 16 Eki 2021 19:34:36
[linkler sadece üyelerimize görünmektedir.] hocam aşağıdaki eklediğim dosyadaki fontları  ve karakter boyutunu nasıl değiştirebilirim acaba ?

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 17 Eki 2021 08:37:27
[linkler sadece üyelerimize görünmektedir.]
[linkler sadece üyelerimize görünmektedir.] hocam aşağıdaki eklediğim dosyadaki fontları  ve karakter boyutunu nasıl değiştirebilirim acaba ?
hocam dosyayı açıp baktığımızda kodların küçüktülüp tek sıra olduğunu görüyoruz(bkz:resim 1). öncelikle bu kodları insan okuyabilir hale getirmeliyiz. google'a ccs formatter online yazarak kodları okunabilir yapacak sayfaları görüyoruz. (2). ilk siteye girip, dosyayı yükleyip beautfy css düğmesine basıyoruz.(3). site bize okunabilir css oluşturuyor. bunun tamamını kopyalayıp, mevcut dosyadaki tüm her şeyi silip, yapıştırıyoruz(5). artık düzenleme yapmaya hazırız.


eğer kendi özel fontumuzu kullanmak istiyorsa resim 6 daki gibi bir
[linkler sadece üyelerimize görünmektedir.] font-face oluşturuyoruz. eğer tüm bilgisayarlarda bulunan times new roman, calibri, arial gibi fontları kullanacaksanız buna gerek yok.

font-face eğitimi : [linkler sadece üyelerimize görünmektedir.]

fakat daha hiçbir elemanın fontu değişmedi. elemanların fontunu "font-family" değerinden değiştiriyoruz(7). font boyutunu resim 8 deki gibi değiştiriyoruz.

font-family ve font-size eğitimi: [linkler sadece üyelerimize görünmektedir.]

resimler ve dosya ekteki zip dosyasının içindedir. css dosyasını ücretsiz vscodium ( [linkler sadece üyelerimize görünmektedir.] ) ile düzenleyebilirsiniz.

Çevrimdışı iskelet

  • Tecrübeli Üye
  • ****
  • 209
  • 1.471
  • 209
  • 1.471
# 17 Eki 2021 12:55:46
[linkler sadece üyelerimize görünmektedir.]
hocam dosyayı açıp baktığımızda kodların küçüktülüp tek sıra olduğunu görüyoruz(bkz:resim 1). öncelikle bu kodları insan okuyabilir hale getirmeliyiz. google'a ccs formatter online yazarak kodları okunabilir yapacak sayfaları görüyoruz. (2). ilk siteye girip, dosyayı yükleyip beautfy css düğmesine basıyoruz.(3). site bize okunabilir css oluşturuyor. bunun tamamını kopyalayıp, mevcut dosyadaki tüm her şeyi silip, yapıştırıyoruz(5). artık düzenleme yapmaya hazırız.


eğer kendi özel fontumuzu kullanmak istiyorsa resim 6 daki gibi bir
[linkler sadece üyelerimize görünmektedir.] font-face oluşturuyoruz. eğer tüm bilgisayarlarda bulunan times new roman, calibri, arial gibi fontları kullanacaksanız buna gerek yok.

font-face eğitimi : [linkler sadece üyelerimize görünmektedir.]

fakat daha hiçbir elemanın fontu değişmedi. elemanların fontunu "font-family" değerinden değiştiriyoruz(7). font boyutunu resim 8 deki gibi değiştiriyoruz.

font-family ve font-size eğitimi: [linkler sadece üyelerimize görünmektedir.]

resimler ve dosya ekteki zip dosyasının içindedir. css dosyasını ücretsiz vscodium ( [linkler sadece üyelerimize görünmektedir.] ) ile düzenleyebilirsiniz.
Hocam açıklamalar için çok teşekkür ederim. Aslında benim yapmak istediğim aşağıda gönderdiğim vfabrika ile hazırlamış olduğum etkinlikteki yazı karakterini ve yazı boyutunu değiştirmekti onu da mı bu şekilde yapacağız acaba?

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 17 Eki 2021 20:03:37
[linkler sadece üyelerimize görünmektedir.]
Hocam açıklamalar için çok teşekkür ederim. Aslında benim yapmak istediğim aşağıda gönderdiğim vfabrika ile hazırlamış olduğum etkinlikteki yazı karakterini ve yazı boyutunu değiştirmekti onu da mı bu şekilde yapacağız acaba?
hocam baya uğraştım, fakat sonuç resimdeki gibi...
bunun sebebi ise, sistemin içindeki program cümlelerin bulunduğu kutucukları arka arkaya sıralamak yerine, pozisyonunu hesaplayıp ona göre yerleştiriyor. yani sadece css değiştirmekle olmayacak. her şeyi baştan değiştirmek ve programlamak lazım.

Çevrimdışı iskelet

  • Tecrübeli Üye
  • ****
  • 209
  • 1.471
  • 209
  • 1.471
# 17 Eki 2021 20:33:14
[linkler sadece üyelerimize görünmektedir.]
hocam baya uğraştım, fakat sonuç resimdeki gibi...
bunun sebebi ise, sistemin içindeki program cümlelerin bulunduğu kutucukları arka arkaya sıralamak yerine, pozisyonunu hesaplayıp ona göre yerleştiriyor. yani sadece css değiştirmekle olmayacak. her şeyi baştan değiştirmek ve programlamak lazım.
Anladım hocam çok teşekkür ederim zahmet verdim size de. Aklınıza bir yol gelirse hocam söylerseniz sevinirim.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 19 Eki 2021 00:24:31
[linkler sadece üyelerimize görünmektedir.]
Anladım hocam çok teşekkür ederim zahmet verdim size de. Aklınıza bir yol gelirse hocam söylerseniz sevinirim.
hocam, yapılabilecek en mantıklı çözüm, default.html dosyasına istenilen değişiklikleri yapabilecek javascript enjekte etmekti.

aşağıdaki kodları(txt dosyasının içinde) , istediğiniz değişiklikleri yaparak, default.html dosyasına ekleyin. eğer sistem kabul ederse işlem başarılı olmuş demektir.

değişiklik yapabileceğiniz kısımlar:
        var fontBüyüklüğü="2vw";
        var fontRengi="black";
        var fontu="Calibri";
        var kutuGenişliği=80;
        var kutuYüksekliği="5vw"
        var aralık="2vw"; 

font büyüklüğünü vw,vh,cm,mm,px vb. ile belirtebilirsiniz. mevcut font büyüklüğünü değiştirmek istemiyorsanız tırnakların arasını boş bırakın:
 var fontBüyüklüğü="";

kutu genişliği yüzde olaraktır. yani 80 yazarsanız genişliğin yüzde 80'i kadar olacaktır.

Çevrimdışı iskelet

  • Tecrübeli Üye
  • ****
  • 209
  • 1.471
  • 209
  • 1.471
# 19 Eki 2021 18:36:34
[linkler sadece üyelerimize görünmektedir.]
hocam, yapılabilecek en mantıklı çözüm, default.html dosyasına istenilen değişiklikleri yapabilecek javascript enjekte etmekti.

aşağıdaki kodları(txt dosyasının içinde) , istediğiniz değişiklikleri yaparak, default.html dosyasına ekleyin. eğer sistem kabul ederse işlem başarılı olmuş demektir.

değişiklik yapabileceğiniz kısımlar:
        var fontBüyüklüğü="2vw";
        var fontRengi="black";
        var fontu="Calibri";
        var kutuGenişliği=80;
        var kutuYüksekliği="5vw"
        var aralık="2vw"; 

font büyüklüğünü vw,vh,cm,mm,px vb. ile belirtebilirsiniz. mevcut font büyüklüğünü değiştirmek istemiyorsanız tırnakların arasını boş bırakın:
 var fontBüyüklüğü="";

kutu genişliği yüzde olaraktır. yani 80 yazarsanız genişliğin yüzde 80'i kadar olacaktır.

[linkler sadece üyelerimize görünmektedir.] Hocam teşekkür ederim dediğiniz kodları yapınca değişiklikler oldu. Ama benim başka html dosyalarımda dediğiniz kodları yapınca olmadı. Acaba hepsinde geçerli olabilecek şekilde bir düzenleme yapılabilir mi? Yoksa her dosyaya ayrı mı kod eklememiz gerekiyor. Ekte başka bir örnek gönderdim hocam mesala bundaki yazı boyutunu ve karakteri değişmek için ne yapmamız gerekiyor? Müsait bir zamanda bakarsanız çok sevinirim. Birde ben diğer dosyalarımda da karakter ve boyutu değiştirmek için neler yapmam gerekiyor.

Çevrimdışı smyi

  • Bilge Meclis Üyesi
  • *****
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
  • 3.341
  • 18.138
  • 4. Sınıf Öğretmeni
# 19 Eki 2021 20:42:31
[linkler sadece üyelerimize görünmektedir.]

[linkler sadece üyelerimize görünmektedir.] Hocam teşekkür ederim dediğiniz kodları yapınca değişiklikler oldu. Ama benim başka html dosyalarımda dediğiniz kodları yapınca olmadı. Acaba hepsinde geçerli olabilecek şekilde bir düzenleme yapılabilir mi? Yoksa her dosyaya ayrı mı kod eklememiz gerekiyor. Ekte başka bir örnek gönderdim hocam mesala bundaki yazı boyutunu ve karakteri değişmek için ne yapmamız gerekiyor? Müsait bir zamanda bakarsanız çok sevinirim. Birde ben diğer dosyalarımda da karakter ve boyutu değiştirmek için neler yapmam gerekiyor.
kodların bütün etkinliklerde çalışmamasının sebebi, her etkinlikteki kutuların farklı isimlere sahip olması.

sizin bu etkinliğinizde değişiklik yapmak çok daha kolay ve sadece application.min.css dosyasında değişiklik yaparak istediğimizi elde edebiliriz. bir öncekinde javascript  kullanmamızın nedeni kutuların program vasıtası ile bulundukları pozisyona konmasıydı. yani sürükle bırak gibi aksiyonların olmadığı diğer etkinliklerde sadece css ile değişiklik yapılabilir.

1) öncelikle yapılması gereken şu; öncelikle değişiklik yapmak istediğiniz öğelerin "id" veya "class"ını bulmalısınız. bunu bulabilmek için ise default.html dosyasını chrome ile açıp F12 tuşuna basıp, en sol üstteki eleman seçiciye basıp, değişiklik yapmak istediğiniz elemanı bulmanız gerekli.(resim 1)
class kullanmak daha iyi çünkü aynı class'a sahip tüm elemanlarda değişiklik yapar. id tek elemana aittir.

2) kutunun iki class adı var(questionRow whiteBox). biz birini kullanabiliriz. application.min.css dosyasını (vscodium ile) açarız. (bu arada default.html chrome da açık dursun. değişiklikleri görmek için kullanacağız.) css dosyasının altına şu kodları ekleriz:

.questionRow {

}

.questionRow class'ı gösteriri. süslü parantez arasına yazdığımız değişiklikler bu elemana etki edecektir.

bu noktada temel css bilginizin olduğunu varsayıyorum.

.questionRow{
    height: 8vw !important;
    font-size: 2vw !important;   
}

!important önceki değerleri geçersiz saymak için.

3) bunu uyguladığımızda kutu yüksekliğinin değiştiğini fakat yazı fontunun değişmediğini göreceksiniz. bunun sebebi, kutunun içinde ikinci bir kutunun yazı için eklenmiş olması. şimdi içteki kutunun class'ını bulup  değişiklik yapalım(resim 2). içteki kutunun class'ı "questionText".

bu class'ı css dosyasına ekleyelim.

.questionRow{
    height: 6vw !important;
}
.questionText{
    font-size: 2vw !important;
    font-family: verdana !important;
}

işte bu kadar. değişiklikler etki etti.

okların durduğu yer rahatsız ettiyse, o zaman okların class'ını bulup değişiklik yaparız.

.questionMark{
    top: calc(3vw - 8px) !important;
}

top=üste uzaklık
calc=hesapla
3vw-> kutu yüksekliğinin yarısı
8px->okun yüksekliğinin(16px) yarısı.

işlem tamam. diğer dosyalarda da bu şekilde classları bulup değişiklik yapabilirsiniz.

Çevrimdışı iskelet

  • Tecrübeli Üye
  • ****
  • 209
  • 1.471
  • 209
  • 1.471
# 19 Eki 2021 21:00:14
[linkler sadece üyelerimize görünmektedir.]
kodların bütün etkinliklerde çalışmamasının sebebi, her etkinlikteki kutuların farklı isimlere sahip olması.

sizin bu etkinliğinizde değişiklik yapmak çok daha kolay ve sadece application.min.css dosyasında değişiklik yaparak istediğimizi elde edebiliriz. bir öncekinde javascript  kullanmamızın nedeni kutuların program vasıtası ile bulundukları pozisyona konmasıydı. yani sürükle bırak gibi aksiyonların olmadığı diğer etkinliklerde sadece css ile değişiklik yapılabilir.

1) öncelikle yapılması gereken şu; öncelikle değişiklik yapmak istediğiniz öğelerin "id" veya "class"ını bulmalısınız. bunu bulabilmek için ise default.html dosyasını chrome ile açıp F12 tuşuna basıp, en sol üstteki eleman seçiciye basıp, değişiklik yapmak istediğiniz elemanı bulmanız gerekli.(resim 1)
class kullanmak daha iyi çünkü aynı class'a sahip tüm elemanlarda değişiklik yapar. id tek elemana aittir.

2) kutunun iki class adı var(questionRow whiteBox). biz birini kullanabiliriz. application.min.css dosyasını (vscodium ile) açarız. (bu arada default.html chrome da açık dursun. değişiklikleri görmek için kullanacağız.) css dosyasının altına şu kodları ekleriz:

.questionRow {

}

.questionRow class'ı gösteriri. süslü parantez arasına yazdığımız değişiklikler bu elemana etki edecektir.

bu noktada temel css bilginizin olduğunu varsayıyorum.

.questionRow{
    height: 8vw !important;
    font-size: 2vw !important;   
}

!important önceki değerleri geçersiz saymak için.

3) bunu uyguladığımızda kutu yüksekliğinin değiştiğini fakat yazı fontunun değişmediğini göreceksiniz. bunun sebebi, kutunun içinde ikinci bir kutunun yazı için eklenmiş olması. şimdi içteki kutunun class'ını bulup  değişiklik yapalım(resim 2). içteki kutunun class'ı "questionText".

bu class'ı css dosyasına ekleyelim.

.questionRow{
    height: 6vw !important;
}
.questionText{
    font-size: 2vw !important;
    font-family: verdana !important;
}

işte bu kadar. değişiklikler etki etti.

okların durduğu yer rahatsız ettiyse, o zaman okların class'ını bulup değişiklik yaparız.

.questionMark{
    top: calc(3vw - 8px) !important;
}

top=üste uzaklık
calc=hesapla
3vw-> kutu yüksekliğinin yarısı
8px->okun yüksekliğinin(16px) yarısı.

işlem tamam. diğer dosyalarda da bu şekilde classları bulup değişiklik yapabilirsiniz.

[linkler sadece üyelerimize görünmektedir.] hocam çok teşekkür ederim bilgilendirme için. Ama benim css bilgim yok. O yüzden beni aşacak gibi duruyor.

 


Egitimhane.Com ©2006-2023 KVKK