JavaScript Örnekleri PDF

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "JavaScript Örnekleri PDF"

Transkript

1 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF

2 İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript Text Kutusuna Sadece Sayı Girdirme(Olayın JavaScript Tarafında Yazılmış Hali)... 4 PROGRAM KODU... 5 İki Text Kutusuna Girilen Sayıların Toplamını Div İçinde Gösterme... 6 PROGRAM KODU... 7 Butona tıklandığında, tıklanan butondaki sayıları toplayan program... 8 PROGRAM KODU... 9 İki text kutusuna girilen şifreyi kontrol eden javascript örneği; PROGRAM KODU Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme; ÖRNEKLERİN UYGULAMA DOSYALARI... 12

3 Javascript Text Kutusuna Sadece Sayı Girdirme Aşağıdaki kodları verilmiş olan uygulamada text kutularına girilen değerlerin sadece sayı olmasına izin vermektedir. HTML kodu içindeki return dönüş ifadesi sayikontrol fonksiyonundan dönen değeri kontrol edecektir. event tuş basılması ile ilgili olayı takip eden özel bir anahtar ifadedir. <input type="text" id="sayi1" onkeypress="return sayikontrol(event)"> sayikontrol metodu event ile gönderilen değeri fonksiyonu içinde olay adı ile karşılamaktadır. Gerçekleşen olay içinde charcode özelliği basılan tuşun ASCII kodunu döndürmektedir. 0-9 arasındaki rakamların ASCII kodları arasındadır. sayikontrol metodu içinde de basılan karakter 47den büyük ve 58den küçük mü kontrolü yapılarak 0-9 arasında rakama basıp basmadığı tespit edilir. Basılan tuşun kodu bu aralıktaysa return true değerini döndürecek ve tuşu text kutusuna yazacaktır. Basılan tuş aralıkta değilse return false ifadesini döndürecek ve tuş text kutusuna yazılmayacaktır. function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false;

4 PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; margin:5px; border:none; box-sizing: border-box; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; </style> <body> <input type="text" id="sayi1" onkeypress="return sayikontrol(event)"> <input type="text" id="sayi2" onkeypress="return sayikontrol(event)"> <input type="button" id="hesapla" value="hesapla" > <script> //Javascript Text Kutusuna Sadece Sayı Girdirme //basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false; </script> </body> </html>

5 Javascript Text Kutusuna Sadece Sayı Girdirme(Olayın JavaScript Tarafında Yazılmış Hali) Aynı örneği html ve JavaScript kodlarının bir birinden tamamen ayrılmış örneği; Örneğin bu şekilde yazılmasındaki amaç HTML kodu ile Programlama kodunun bir birinden ayrışmasını sağlamak. Gelelim kodların nasıl çalıştığına; JavaScript tarafında etiketlere ulaşmak için etiketlerin id isimlerini kullanarak onları aşağıdaki kod ile onları bir değişkende tuttuk(sayi1,sayi2 değişkenleri) var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); ilk örnekte onkeypress olaynı html içinde yazmıştık ve olaya bir fonksiyon tanımlamıştık. JavaScript tarafında ise olaylara fonksiyonları adını özellik olarak ekliyoruz. Fonksiyon tetiklendiğinde sayikontrol olayını çalıştıracak.( sayikontrol metodunun çalışması yukarıdaki örnekle aynı) sayi1.onkeypress=sayikontrol; sayi2.onkeypress=sayikontrol;

6 PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; box-sizing: border-box; margin:5px; border:none; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; </style> <body> <input type="text" id="sayi1" > <input type="text" id="sayi2" > <input type="button" id="hesapla" value="hesapla" > <script> //Javascript Text Kutusuna Sadece Sayı Girdirme var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); sayi1.onkeypress=sayikontrol; sayi2.onkeypress=sayikontrol; //basılan tuşların sayı olup olmadığını kontrol edecek javascript fonksiyonu function sayikontrol(olay){ if(olay.charcode>=48 && olay.charcode<57) { return true; else { return false; </script> </body> </html>

7 İki Text Kutusuna Girilen Sayıların Toplamını Div İçinde Gösterme JavaScript tarafına nesneleri id isimleri ile almak için alağıdaki kodları yazdık. var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); var sonuc=document.getelementbyid("sonuc"); button nesnesine tıkladığımızda topla adında fonksiyonun çalışması için gerekli kod; <input type="button" id="hesapla" value="hesapla" onclick="topla()" > Topla fonksiyonu içinde çalışan kod; innerhtml açılıp kapatılan etiketlerin içini doldurmak için kullanılır. Sonuc divinin içine işlem sonucunu yazmak için innerhtml özelliğini kullandık. İnput etiketlerinin içindeki değerleri okumak içinse value değerleri kullanılmaktadır. Sayi1.value dediğimizde sayi1 içine yazılanlar anlamına gelmektedir. Burada Numberın kullanılmasının sebebi ise input nesnelerindeki tüm string türünde olmasıdır. String turunde toplama olmayacağı için Number türüne çevirip toplam yaptık. sonuc.innerhtml=number(sayi1.value)+number(sayi2.value);

8 PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> </head> <title>yazilimbilisim.net</title> <style> #sayi1,#sayi2,#hesapla{ display: block; width: 300px; height: 30px; line-height: 30px; box-sizing: border-box; margin:5px; border:none; #sayi1,#sayi2{ background: #3498db; padding-left:20px; color:#fff; font-weight: bold; #sonuc{ width: 300px; height: 30px; line-height: 30px; font-size: 2em; </style> <body> <input type="text" id="sayi1" > <input type="text" id="sayi2" > <input type="button" id="hesapla" value="hesapla" onclick="topla()" > <div id="sonuc"> </div> <script> var sayi1=document.getelementbyid("sayi1"); var sayi2=document.getelementbyid("sayi2"); var sonuc=document.getelementbyid("sonuc"); function topla(){ sonuc.innerhtml=number(sayi1.value)+number(sayi2.value); </script> </body> </html>

9 Butona tıklandığında, tıklanan butondaki sayıları toplayan program Nesneleri id isimleri ile javascript tarafında elde etmek için aşağıdaki kodlar yazdık. var b1=document.getelementbyid("t1"); var b2=document.getelementbyid("t5"); var b3=document.getelementbyid("t10"); var b4=document.getelementbyid("t50"); var sonuc=document.getelementbyid("sonuc"); her butonun click olayını topla fonksiyonunu ekledik. Buton nesnelerine tıkladığında topla fonksiyonu tetiklenecek ve topla fonksiyonu çalışacaktır. b1.onclick=topla; b2.onclick=topla; b3.onclick=topla; b4.onclick=topla; Aşağıdaki kodda innerhtml div etiketinin içinde değer yazmak için kullanılmaktadır. Basılan butonu tespit etmek için this anahtarı kullanılmıştır. Basılan butonun içindeki değeri okumak için this.value ifade kullanılmıştır. innerhtml ve value olan değerler metinsel ifadelerdir Number ile bu ifadeleri sayısal değere çevirip toplama işlemini gerçekleştirip innerhtml özelliği ile div içine tekrar yazdırdık. sonuc.innerhtml=number(sonuc.innerhtml)+number(this.value);

10 PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> input[type="button"]{ width:50px; height: 50px; line-height: 50px; #butonlar{ text-align: center; #sonuc{ background: #12123a; color:#efefaa; font-size:2em; padding:10px; margin:10px; text-align: center; </style> <body> <div id="butonlar"> <input type="button" id="t1" value="1"> <input type="button" id="t5" value="5"> <input type="button" id="t10" value="10"> <input type="button" id="t50" value="50"> </div> <div id="sonuc">0</div> <script> var b1=document.getelementbyid("t1"); var b2=document.getelementbyid("t5"); var b3=document.getelementbyid("t10"); var b4=document.getelementbyid("t50"); var sonuc=document.getelementbyid("sonuc"); b1.onclick=topla; b2.onclick=topla; b3.onclick=topla; b4.onclick=topla; function topla(){ sonuc.innerhtml=number(sonuc.innerhtml)+number(this.value); </script> </body> </html>

11 İki text kutusuna girilen şifreyi kontrol eden javascript örneği; PROGRAM KODU <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> </style> <body> <table> <tr> <td>şifre:</td><td><input type="password" id="t1"></td> </tr> <tr> <td> Şifre Tekrar: </td><td> <input type="password" id="t2"> </td> </tr> <tr> <td colspan="2"> <input type="button" id="kontrol" value="şifre KONTROL"> </td> </tr> </table> <div id="sonuc"></div> <script> var t1=document.getelementbyid("t1"); var t2=document.getelementbyid("t2"); var sonuc=document.getelementbyid("sonuc"); document.getelementbyid("kontrol").onclick=function(){ if(t1.value==t2.value) sonuc.innerhtml="doğru Giriş Yapabilirsiniz"; else sonuc.innerhtml="şifreler HATALI! Tekrar Kontrol edin"; </script> </body> </html>

12 Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme; <!doctype html> <html> <head> <meta charset="utf-8"> <title>js01</title> </head> <style> #kutu{ top:0px; left: 0px; width: 300px; height: 300px; position: absolute; background: #3498db; z-index: -1; </style> <body> <input type="text" id="x" value="0"> <input type="text" id="y" value="0"> <div id="kutu"></div> <script> var x=document.getelementbyid("x"); var y=document.getelementbyid("y"); y.onkeyup=function(){ kutu.style.top=y.value+"px"; kutu.style.left=y.value+"px"; x.onkeyup=function(){ kutu.style.top=y.value+"px"; kutu.style.left=x.value+"px"; </script> </body> </html>

13 ÖRNEKLERİN UYGULAMA DOSYALARI

JavaScript Örnekleri

JavaScript Örnekleri JavaScript Örnekleri www.ahmetcanserver.com İçindekiler JavaScript Dizi içindeki en büyük ve en küçük sayıyı bulma... 2 Sayısal Loto Örneği (Javascript)... 3 Javascript: Sayının Tek mi Çift mi Olduğunu

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

PHP ile İnternet Programlama

PHP ile İnternet Programlama PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 5. BÖLÜM: Oturum Yönetimi ve Güvenlik Sayfaya Yönlendirme PHP sayfamızdan

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu. Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html

Detaylı

Radio butonları CSS ile makyajlamak

Radio butonları CSS ile makyajlamak Radio butonları CSS ile makyajlamak 4 Ocak Cuma 13 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/radio-butonlari-css-ile-makyajlamak Bildiğiniz gibi bazı form elementlerine (radio butonlar, check

Detaylı

Google Map Api 3.0. Google Map Api 3.0. Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyorduk.

Google Map Api 3.0. Google Map Api 3.0. Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyorduk. Google Map Api 3.0 Google Maps API 3 resmi API artık. Versiyon 2 API artık resmi olarak önerilmilyor.v2 ile yaptığınız uygulamalarınızı V3 için güncellemeniz gerekli. V3 'ün en büyük özelliği mobil cihazlara

Detaylı

ASP.NET Web Kontrolleri

ASP.NET Web Kontrolleri ASP.NET Web Kontrolleri ASP.NET web sayfalarında kullanılmak üzere çeşitli işlevleri yerine getiren hazır kontroller sunar. Bu kontroller çeşitli özelliklere ve işlevlere sahip olmakla beraber uygulamalarda

Detaylı

JAVASCRİPT ÖRNEKLERİ

JAVASCRİPT ÖRNEKLERİ JAVASCRİPT ÖRNEKLERİ WWW.YAZILIMBILISIM.NET İçindekiler Sayının tek mi çift mi olduğunu bulma(fonksyion Kullanmadan)... 2 Sayının tek mi çift mi olduğunu bulma(fonksyionlu)... 3 Text kutusuna girilen sayının

Detaylı

DIV KAVRAMI