Web Programlama. JavaScript (3)

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

Download "Web Programlama. JavaScript (3)"

Transkript

1 Web Programlama JavaScript (3)

2 Döküman Nesne Modeli (1/4) Document Object Model (DOM) DOM web tarayıcı tarafından, web sayfası yüklendiğinde otomatik oluşturulan bir organizasyon şemasıdır Web sayfasında bulunan her eleman (etiketler, metin, resim, tablo, CSS özellikleri vs.) bu organizasyon şemasında bir pozisyona sahiptir getelementbyid ve getelementsbytagname, DOM üzerinde değişiklik yapmak için kullanılan iki metotur İlerleyen slaytlarda DOM a yeni eleman ekleme ve DOM üzerindeki elemanların taşınması işlemlerinin nasıl yapılacağı gösterilecek

3 Döküman Nesne Modeli (2/4)

4 Döküman Nesne Modeli (3/4) Web sayfasındaki herşey DOM a dahil edilir İlk iki seviye tüm web sayfalarında aynıdır: "document" ve "html" Bir alt seviyede "head" ve "body" yer alır "head" ve "body" aynı seviyedeki elemanlardır Sayfanın asıl içeriği "body" seviyesinin altındaki elemanlardır Önceki sayfaya bir "div" ve paragraf daha ekleyerek DOM daki değişiklikleri inceleyelim

5 Döküman Nesne Modeli (4/4)

6 DOM: Üst ve Alt Nodlar

7 DOM: Üst ve Alt Nodlar (1/2) DOM ağacı üst ve alt nodlardan oluşur "document" nodu hariç tüm nodların bir üst nodu vardır "div" nodu "body" üst nodu içerisinde "p" nodları "div" üst nodu içerisinde metin nodları ilişkili "p" nodları içerisinde "html" nodu, "head" ve "body" nodlarının üst nodudur "body" nodu, "html" nodunun alt nodudur

8 DOM: Üst ve Alt Nodlar (2/2) Aşağıdaki paragraf için DOM ağacı nasıl olur gözünüzde canlandırın: <p>this is <em>important</em>!</p> Gözünüzde canlandırdığınız DOM ağacı aşağıdaki ile örtüşüyor mu?

9 DOM Ağacında Nod Aramak (1/6) Daha önce, getelementbyid metodunu kullanarak, nodların id lerini kullanarak arama yapmayı öğrenmiştik var efield = document.getelementbyid(" "); Belirli bir tipteki nodun (örnek: <p>) sayfadaki tüm örneklerini, getelementsbytagname metodu ile, bir kolleksiyon halinde almayı da görmüştük var efield = document.getelementsbytagname("p");

10 DOM Ağacında Nod Aramak (2/6) Bu kolleksiyondaki paragraflardan bir tanesinin içeriğini ise aşağıdaki gibi değiştirebiliyor veya okuyabiliyorduk var contents = p[2].innerhtml; Örneğin, yukarıdaki cümle sayfadaki 3. paragrafın içeriğini contents değişkeninin içerisine aktarmakta

11 DOM Ağacında Nod Aramak (3/6) Önceki slayttaki cümlelerde arama tüm DOM dökümanı üzerinde yapılmaktaydı Aramayı, belirli bir nodun alt nodları arasında yaparak arama alanını sınırlandırabiliriz Aşağıdaki örnekte "div3" id li nod altındaki "p" etiketi aranmakta ve içeriği contents değişkeni içerisine atılmakta var d = document.getelementbyid("div3"); var p = d.getelementsbytagname("p"); var contents = p[2].innerhtml;

12 DOM Ağacında Nod Aramak (4/6) Yandaki HTML sayfasnda "ny" id li "div" nodunun altındaki ikinci paragrafı elde etmek için aşağıdaki kod parçası çalıştırılabilir: var div = document.getelementbyid("ny"); var p = div.getelementsbytagname("p"); var contents = p[1].innerhtml;

13 DOM Ağacında Nod Aramak (5/6) Aynı elemana erişmenin yeni bir yolu (childnodes kullanılarak) yukarıda gösterilmiştir var p = document.childnodes[0].childnodes[1].childnodes[1].childnodes[1]; var contents = p.innerhtml;

14 DOM Ağacında Nod Aramak (6/6) Önceki örnekte, hedef noda erişim document nodundan başlayarak gerçekleştirilmiştir Pratikte ise hedef noda erişim daha alt seviyedeki bir noddan başlanarak daha kolay gerçekleştirilebilir var d = document.getelementbyid("ny"); var p = d.childnodes[1]; var contents = p.innerhtml;

15 Çöp Nodlar ve nodetype (1/4)

16 Çöp Nodlar ve nodetype (2/4)

17 Çöp Nodlar ve nodetype (3/4) Boşluk karakterleri için eklenen bu ekstra nodlar, farklı web tarayıcılarında aynı hedef nodu bulmayı zorlaştırabilir Bu durumu çözmek için aradığımız noda id vererek aramayı bu id üzerinden yapabiliriz document.getelementbyid("p2").innerhtml = "All his men."; Veya nodetype özelliğini kullanarak aradığımız nodu daha emin bir şekilde bulabiliriz var ntype = targetnode.nodetype;

18 Çöp Nodlar ve nodetype (4/4) Aşağıda nodetype özelliğini ilgili paragrafı bulup değiştiren JavaScript kod parçası bulunmaktadır Kod parçası "div" nodu altındaki nodları incelemekte, nod tipi 1 olan paragraflardan ikincisini, sayaç kullanarak bulmaktadır

19 Nod Tipleri nodetype özelliği sadece okunabilirdir, değeri değiştirilemez nodetype özelliği ilgili nodun tipini bir sayı olarak geri döndürür Element (element) nodlar için 1 (örnek: <p>, <ul>...) Özellik (attribute) nodlar için 2 (örnek: href) Metin (text) nodlar için 3 Yorum (comment) nodlar için 8 Diğer nod tipleri için:

20 firstchild ve lastchild Özellikleri childnodes kolleksiyonunu kullanarak alt nodlara erişim gösterilmişti var targetnode0 = parentnode.childnodes[0]; var targetnode1 = parentnode.childnodes[1]; İlk ve son alt nodlara firstchild ve lastchild özellikleri kullanılarak da erişilebilir var targetnode = parentnode.firstchild; var targetnode = parentnode.lastchild;

21 parentnode Özelliği DOM ağacında yukarı doğru giderek, bir alt nodun üst noduna da parentnode özelliğini kullanarak erişebiliriz DOM kullanarak yan tarafta gösterilen div nodunun üst noduna nasıl erişilebilir? var kidnode = document.getelementbyid("div2"); var pnode = kidnode.parentnode;

22 nextsibling ve previoussibling Özellikleri Bir çocuk nod ile aynı seviyedeki diğer nodları elde etmek için, çocuk nodun nextsibling ve previoussibling özellikleri kullanılabilir Aşağıdaki "div1" id li nod ile aynı üst noda sahip bir sonraki nodu elde etmek için kullanılabilir var firstel = document.getelementbyid("div1"); secondel = firstel.nextsibling; previoussibling ise aynı seviyede bulunan bir önceki nodu elde etmek için kullanılabilir

23 nodename Özelliği (1/3) Bir nodun adını nodename özelliği ile alabiliriz Nod adları "P" ve "DIV" gibi string değerlerdir Aşağıdaki örnekte, hedef noda ait nod adı nname değişkenine aktarılmaktadır var parent = document.getelementbyid("div1"); var target = parent.firstchild; nname = target.nodename;

24 nodename Özelliği (2/3) Eğer nod bir metin nodu (text node) ise nod adı "#text" olur (çift tırnaksız ve küçük harfle)

25 nodename Özelliği (3/3) nodename özelliği zaman zaman "P" yerine "p" veya "IMG" yerine "img" geri döndürebileceğinden, aşağıdaki şekilde küçük harfe çevrilerek kontrol edilmesi daha uygun olacaktır if (targetnode.nodename.tolowercase === "img") {

26 nodevalue Özelliği (1/2) Bir metin nodunun (text node) değeri nodevalue özelliği ile elde edilebilir Aşağıdaki HTML kod parçası verilmiş olsun <h2>do <em>not</em> hit!</h2> Burada H2 elemanının ilk çocuğu bir metin nodudur ve nod değeri "Do" değeridir (çift tırnaksız)

27 nodevalue Özelliği (2/2) P ve IMG gibi element nodların (element node) değerleri yoktur Bir element nodun değerini değişken içerisine atmaya çalışırsanız, değişkenin değeri null olacaktır Örneğin aşağıdaki HTML kod parçasında, em bir element nodudur ve nod değeri bir değişkene atanacak olursa, değişken null değere sahip olacaktır <h2>do <em>not</em> hit!</h2>

28 nodevalue ve innerhtml Özellikleri (1/2) Metin nodların nodevalue özelliği ile innerhtml özelliği karıştırılmamalıdır innerhtml element nodlarının bir özelliğidir. innerhtml özelliği ile dönen değer tüm alt nodları da içerir (alt elemanlar dahil). nodevalue özelliği ise tek bir metin noduna ait karakterleri döndürür

29 nodevalue ve innerhtml Özellikleri (2/2) Aşağıdaki örnekte H2 elementinin innerhtml özelliğine karşılık gelen kısım kırmızı olarak gösterilmiştir <h2>do <em>not</em> hit!</h2> Aşağıda ise H2 elementinin ilk çocuğuna ait nod değeri (nodevalue) gösterilmektedir <h2>do <em>not</em> hit!</h2>

30 Elementlerin Sayılması (1/4) Daha önce getelementsbytagname ve childnodes kullanarak bir element listesi/kolleksiyonu oluşturmayı gördünüz length özelliğini kullanarak bu kolleksiyonun boyutunu yani kolleksiyon içerisindeki elementlerin sayısını elde edebilirsiniz getelementsbytagname kullanarak elde edilen kolleksiyonun boyutunu elde etmek için: var lielements = getelementsbytagname("li"); var howmanyli = lielements.length;

31 Elementlerin Sayılması (2/4) childnodes kullanarak elde edilen kolleksiyonun boyutunu elde etmek için: var parentnode = document.getelementbyid("d1"); var nodelist = parentnode.childnodes; var howmanykids = nodelist.length;

32 Elementlerin Sayılması (3/4) Bu kolleksiyonların boyutu kullanılarak pek çok önemli işlem gerçekleştirilebilir Örneğin, bir sayfadaki tüm <li> elementlerinin üzerinde gezerek içi boş olanların içine geçici bir metin atayan JavaScript kodu aşağıda verilmiştir for (var i = 0; i < howmanyli; i++) { if (lielements[i].innerhtml === "") { } } lielements[i].innerhtml = "coming soon";

33 Elementlerin Sayılması (4/4) Aşağıdaki JavaScript kodu ise <div> etiketi altında olan resimlerin sayısını hesaplamaktadır var numberpics = 0; for (var i = 0; i < howmanykids; i++) { } if (nodelist[i].nodename.tolowercase() === "img") { numberpics++; }

34 Nod Özellikleri (1/3) HTML elemanlarının özelliklerini hatırlayınız <a href=" <div id="p1"> <p class="special"> <img src="images/slow-loris.png"> <img src="dan.gif" alt="dan" height="42" width="42">

35 Nod Özellikleri (2/3) Belirli bir elementin, belirli bir özelliğe sahip olup olmadığını hasattribute ile tespit edebiliriz var target = document.getelementbyid("p1"); var hasclass = target.hasattribute("class"); Eğer parametre olarak gönderilen özellik bu element için kullanılmış ise, metoddan true dönecektir. Aksi halde ise false dönecektir

36 Nod Özellikleri (3/3) Belirli bir elementin, özelliğinin değerini getattribute ile elde edebiliriz var target = document.getelementbyid("div1"); var attval = target.getattribute("class"); Bir özelliğin değerini ise setattribute ile atayabiliriz var target = document.getelementbyid("div1"); target.setattribute("class, "special"); <div id="div1" class="special">

37 Özellik Adları ve Değerleri (1/3) Bir elementin sahip olduğu özellikleri kolleksiyon halinde elde etmek için attributes özelliği kullanılır var list = document.getelementbyid("p1").attributes; Bu kolleksiyonda kaç özellik olduğunu tespit etmek içinse, daha önceki kullanımlarda olduğu gibi, lenght özelliği kullanılır var numofitems = list.length;

38 Özellik Adları ve Değerleri (2/3) Veya bu iki özelliğin kullanımı aşağıdaki gibi birleştirilebilir var numofitems = document.getitembyid("p1").attributes.length; Dizi notasyonu kullanarak, herhangi bir özelliğin adı, nodename özelliği kullanarak bir değişkenin içine atılabilir var nname = list[2].nodename;

39 Özellik Adları ve Değerleri (3/3) Örneğin aşağıdaki HTML kod parçası için nname değişkenine "onmou seover" değeri atanır <p id="p1" class="c1" onmouseover="chgcolor();"> Özelliğin değerini almak içinse nodevalue özelliği kullanılır Aynı HTML kod parçası için, aşağıdaki kod parçası nvalue değişkenine "chgcolor();" değerini atayacaktır var nvalue = list[2].nodevalue;

40 Nod Eklemek (1/9) DOM hiyerarşisini kullanarak, bir HTML dökümanın HEAD veya BODY bölümlerinin herhangi bir yerine element, özellik veya metin nodu (text node) eklenebilir İlerleyen slaytlarda, öncelikle (1) yeni bir paragraf oluşturma, bu paragrafa özellik ekleme ve metin ekleme, ardından (2) bu paragrafı sayfaya ekleme gösterilecektir Yeni bir nod oluşturmak için document nesnesinin createelement metodu kullanılır

41 Nod Eklemek (2/9) Aşağıda çeşitli elemanlar oluşturmak için örnekler bulunmaktadır var nodetoadd = document.createelement("p"); var anodetoadd = document.createelement("a"); var imgnodetoadd = document.createelement("img");

42 Nod Eklemek (3/9) Oluşturulan noda özellik eklemek için ise daha önce gösterilen setattribute metodu kullanılabilir nodetoadd.setattribute("class", "regular"); imgnodetoadd.setattribute("border", "1");

43 Nod Eklemek (4/9) Yeni bir metin nodu (text node) oluşturmak içinse document nesnesinin createtextnode metodu kullanılır var newtxt = document.createtextnode("hello!"); Oluşturulan bir metin nodunu, bir elemanla ilişkilendirmek için (örneğin paragraf) ilgili elementin appendchild metodu kullanılır Bu metod metin nodunu, elemente alt nod olarak ekler nodetoadd.appendchild(newtxt);

44 Nod Eklemek (5/9) Şu ana kadar bir paragraf, bu paragrafın özelliği ve içeriği oluşturuldu Ancak bu paragraf sayfaya henüz eklenmedi Paragrafı sayfaya eklemek için hedef bir <div> elementi bulunabilir ve appendchild metodu kullanılarak, paragraf bu <div> etiketine alt nod olarak eklenebilir Bir sonraki slaytta bu kullanım gösterilmektedir

45 Nod Eklemek (6/9) var parentdiv = document.getelementbyid("div1"); var newparagraph = document.createelement("p"); var t = document.createtextnode("hello world!"); newparagraph.appendchild(t); parentdiv.appendchild(newparagraph);

46 Nod Eklemek (7/9) Hedef <div> elementinin altında halihazırda 3 paragrafın olduğunu ve yeni paragrafı bu paragrafların üstüne eklemek istediğinizi varsayın Bu durumda appendchild metodu işe yaramayacaktır insertbefore metodunun kullanılması gerekir insertbefore metodu, yeni eklenecek elementi belirtilen elementin önüne yerleştirecektir İstenen işlemin insertbefore metodu ile gerçekleştirimi bir sonraki slaytta verilmiştir

47 Nod Eklemek (8/9) var parentdiv = document.getelementbyid("div1"); var newparagraph = document.createelement("p"); var t = document.createtextnode("hello world!"); newparagraph.appendchild(t); paragraph1 = parentdiv.firstchild; parentdiv.insertbefore(newparagraph, paragraph1);

48 Nod Eklemek (9/9) Benzer şekilde, yeni nodu, belirli bir elementin ardından yerleştirmek gerekebilir Bu amaçla insertafter metodu bulunmamaktadır Bu işlem nextsibling özelliğini kullanarak bir sonraki elementin önüne insertbefore kullanarak aşağıdaki gibi gerçekleştirilebilir var target = parentdiv.childnodes[1]; parentdiv.insertbefore(newe, target.nextsibling);

49 Nod Silmek Bir nodun alt nodu, removechild metodu kullanılarak aşağıdaki gibi silinebilir var parentdiv = document.getelementbyid("div1"); var nodetoremove = parentdiv.childnodes[2]; parentdiv.removechild(nodetoremove);

50 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (1/8) JavaScript web tarayıcısının kontrolünde de kullanılabilir O an zıyaret edilen sayfayı elde etmek için window nesnesinin ilgili özellikleri aşağıdaki gibi kullanılabilir var whereweat = window.location.href; Eğer şu anda ziyaret edilen sayfa " ise whereweat değişkenin içerisine bu değer atanacaktır

51 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (2/8) Aynı zamanda bu bilginin parçaları da elde edilebilir Sadece alan adını almak için aşağıdaki satır kullanılabilir var thedomain = window.location.hostname; Bu durumda thedomain değişkenin içine " değeri atanacaktır Baştaki " kısmının alınmadığına dikkat edin

52 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (3/8) Veya alan adından sonraki yol (path) alınmak istenirse aşağıdaki satır kullanılabilir var thepath = window.location.pathname; Bu durumda thepath değişkenin içine "/products/page12.html" değeri atanacaktır Baştaki "/" işaretine dikkat edin

53 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (4/8) Örnek URL de web tarayıcısı ilgili sayfanın "#bottom" ile işaretlenmiş bölümüne yönlendiriliyordu "#bottom" parçasını almak için aşağıdaki satır kullanılabilir var theanchor = window.location.hash; Bu durumda theanchor değişkenin içine "#bottom" değeri atanacaktır

54 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (5/8) window.location nesnesini kullanarak, benzer şekilde, web tarayıcısına hangi sayfaya gitmesi gerektiğini de söyleyebilirsiniz window.location.href = " Bu satır web tarayıcısını " web sayfasına yönlendirecektir

55 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (6/8) Aşağıdaki kod parçası web tarayıcısını aynı web sitesinde başka bir web sayfasına yönlendirmektedir var currentsite = window.location.hostname; var destination = "http: //" + currentsite + "/deneme. html"; window.location.href = destination;

56 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (7/8) Aşağıdaki kod parçası web tarayıcısını aynı sayfada başka bir bölüme yönlendirmektedir var currentsite = window. location. hostname; var currentpath = window. location. pathname; var destination = "http: //" + currentsite + currentpath + "#middle"; window. location. href = destination;

57 Web Tarayıcısı Kontrolü URL yi almak ve Değiştirmek (8/8) Web tarayıcısını yeni bir sayfaya yönlendirmek için, alternatif olarak, window.location nesnesinin assign ve replace metodları kullanılabilir window.location.assign(" window.location.replace(" İki metod arasındaki fark: assign metodu web tarayıcısı geçmişinde (web browser history) yönlendirilmeden önceki sayfayı korurken, replace metodu bu sayfayı tarihçeden siler Assign metodu kullanıldığında web tarayıcısının geri (back) butonunu kullanarak bir önceki sayfaya gidebilirsiniz

58 Web Tarayıcısı Kontrolü - Web Sayfasının Yeniden Yüklenmesi O anki sayfayı yeniden yüklemek için aşağıdaki yöntemlerden biri kullanılabilir window.location.reload(true) ; window.location.reload(false) ; window.location.reload() ; Eğer true parametresi gönderilirse, JavaScript sayfanın sunucudan alınmasını sağlar Parametre false olursa veya belirtilmezse, web tarayıcısı sayfayı öncelikle ön belleğinden yüklemeye çalışacaktır

59 Web Tarayıcısı Kontrolü İleri veya Geri Gitmek history nesnesinin forward ve back metotlarını kullanarak web tarayıcında, önceki ve sonraki sayfalara geöilebilir history.forward() ; history.back() ; Daha sonraki veya daha önceki sayfalara geçmek için go metodu da kullanılabilir history.go(2); history.go(-4);

60 Web Tarayıcısı Kontrolü Referrer Eğer kullanıcı o anki safaya bir bağlantıyı tıklayarak gelmişse, geldiği sayfanın URL sini document nesnesinin referrer özelliğini kullanarak elde edebilirsiniz var whereusercamefrom = document.referrer; Bu durumda whereusercamefrom değişkeni bir önceki sayfanın URL sini içerecektir

61 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (1/4) Web tarayıcısnda yeni bir pencere açmak için window nesnesinin open metodu kullanılır var monkeywindow = window.open(); Bu metod, herhangi bir parametre kullanılmazsa maksimum boyutta boş bir pencere açar Metoddan geri dönen değer, bu pencereyi daha sonra kullanabilmemiz için gereken pencere nesnesidir (window handle) Web tarayıcısına bağlı olarak pencere, yeni bir web tarayıcı olarak, yeni bir tab olarak veya varolan pencerenin üzerine açılabilir

62 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (2/4) Bir pencereyi doldurmak için üç farklı yol vardır Bunlardan biri write metodunu kullanmaktır Aşağıdaki kod parçası yeni bir pencere açmakta ve bu pencerenin içini windowcontent değişkeni içerisinde tutulan HTML kodu ile doldurmaktadır var monkeywindow = window. open() ; var windowcontent = "<h1>capuchin monkey</h1> <img src= 'monkey.jpg'><p>the capuchin derives from... </p>"; monkeywindow.document.write(windowcontent);

63 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (3/4) Bir pencereyi doldurmak için ikinci yol, ilgili pencereye yeni bir web sayfası adresi atamaktır Bunu gerçekleştirmenin iki yolu aşağıda gösterilmiştir: monkeywindow.location.assign(" monkeywindow.location.href = "

64 Web Tarayıcısı Kontrolü Pencereyi İçerikle Doldurmak (4/4) Bir pencereyi doldurmanın en çok kullanılan yolu ise open metodunu kullanmaktır var monkeywindow = window.open(" animals.com"); Açılacak sayfa, o anki sayfa ile aynı alan adına sahipse, kısaca aşağıdaki gibi yazılabilir var monkeywindow = window.open("capuchin.html") ;

65 Web Tarayıcısı Kontrolü Açılan Pencerenin Kapatılması Açılan bir pencereyi kapatmak için close metodu aşağıdaki gibi kullanılır: monkeywindow.close();

66 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (1/4) Yeni bir pencere açmak için kullanılan open metodunu farklı parametrelerle de kullanmak mümkündür Eklenebilecek ikinci bir parametre pencere adıdır var monkeywindow = window.open("monk. html", "win1"); URL parametresi boş olarak gönderilebilir var monkeywindow = window.open("", "win1");

67 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (2/4) Üçüncü bir parametre ile pencere boyutu da belirlenebilir var monkeywindow = window.open("monk.html", "win1", "width=420,height=380"); Üçüncü paramtre belirtilirken, çift tırnaklar içerisinde boşluk bırakılmaması zorunludur Sayılar piksel olarak belirtilmektedir width ve height in hangi sırada yazıldığı önemli değildir

68 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (3/4) Ekrandan daha küçük boyutta pencereler, ekranın sol üst köşesinde gösterilirler Bu tür pencerlerin, ekranın neresinde gösterileceğini aşağıdaki şekilde belirtebilirsiniz var w = window. open("", "", "width=420,height=380,left=200,top=100"); Son ikiparametre sırasıyla ekranın solundan ve üstünden kaç piksel öteye pencerenin konumlanacağını belirtmektedir

69 Web Tarayıcısı Kontrolü Pencerenin Boyutunun ve Konumunun Belirlenmesi (4/4) Alternatif olarak, tüm bu parametreler tek bir değişken aracılığıyla aşağıdaki gibi belirtilebilir var windowspecs = "'faq.html', 'faq', 'width=420,height=380,left=200,top=100'"; var faqpage = window.open(windowspecs);

70 Form Doğrulama Metin Alanları (1/6) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return checkforlastname();"> </form> Please enter your last name. <br> <input type="text" id="lastnamefield"> <input type="submit" value="submit Form"> Kullanıcı butonuna "submit" tıkladığında checkforlastname fonksiyonu çağırılacaktır

71 Form Doğrulama Metin Alanları (2/6) checkforlastname fonksiyonu aşağıdaki gibi tanımlanmıştır function checkforlastname() { } if (document.getelementbyid("lastnamefield").value.length === 0) { alert("please enter your last name") ; return false; } Fonksiyon lastnamefield alanına yazılan değerin uzunluğunu kontrol etmekte ve uzunluk sıfırsa kullanıcıyı uyarmakta ve false döndürmekte

72 Form Doğrulama Metin Alanları (3/6) Aşağıdaki kod parçasında tekrar return yazıldığına dikkat edin <form onsubmit="return checkforlastname();"> Buraya return yazılması sayesinde fonksiyondan false döndüğünde form bilgilerinin sunucuya gönderilmesine engel olunur Buraya return yazılmayacak olursa, kullanıcıya mesaj gösterilecektir ancak form bilgileri buna rağmen sunucuya gönderilecektir

73 Form Doğrulama Metin Alanları (4/6) Daha kullanıcı dostu bir web sayfası oluşturabilmek için, focus metodu kullanılarak imleç doldurulması gereken alana götürülebilir function checkforlastname() { if (document.getelementbyid("lastnamefield").value.length === 0) { } alert("please enter your last name"); document.getelementbyid("lastnamefield").focus(); return false; }

74 Form Doğrulama Metin Alanları (5/6) document.getelementid metodunun birden fazla kullanımı kodu gereksiz yere uzattığından bu metotu sadece bir kere çalıştırmak ve elde edilen elemanı bir değişkene atıp kullanmak mümkün function checkforlastname() { var targetfield = document.getelementbyid("lastnamefield"); if (targetfield.value.length === 0) { alert("please enter your last name"); targetfield.focus(); return false; } }

75 Form Doğrulama Metin Alanları (6/6) Kullanıcı dostu sayfa oluşturmak için, doldurulması gereken alanın arka plan rengini sarı yapmak da mümkün var targetfield = document.getelementbyid("lastnamefield"); if (targetfield.value.length === 0) { } alert("please enter your last name"); targetfield.focus(); targetfield.style.background = "yellow"; return false; targetfield.style.background = "white";

76 Form Doğrulama Drop-down (1/4) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return checkforselection();"> <select id="states"> <option value="" selected="selected">select A STATE</option> <option value="al">alabama</option> <option value="ak">alaska</option> </select> <input type="submit" value="submit Form"> </form>

77 Form Doğrulama Drop-down (2/4) Daha önceki örneğe benzer şekilde, formun submit butonuna tıklandığında aşağıdaki checkforselection metodu çağırılacaktır function checkforselection() { if (document.getelementbyid("states").selectedindex === 0) { } } alert("please select a state. ") ; return false;

78 Form Doğrulama Drop-down (3/4) selectedindex in sıfır olması, kullanıcının herhangi bir seçim yapmadığını göstermektedir Bu durumda kullanıcıdan bir seçim yapması istenmekte ve form bilgilerinin sunucuya gönderilmesi önlenmektedir Bir sonraki slaytta fonksiyon iki şekilde değiştirilmektedir: 1. Kontrol edilecek form elemanın ID si parametre olarak gönderilmektedir. Bu sayede fonksiyon farklı formlar üzerinde de çalışabilecektir 2. İlgili form elemanı bir değişkene atanmakta ve bu değişken üzerinden kullanılmaktadır

79 Form Doğrulama Drop-down (4/4) function checkforselection(selecid) { var target = document.getelementbyid(selecid); if (target.selectedindex === 0) { } } alert("please select a state. ") ; return false; Bu durumda fonksiyon, form içerisinden aşağıdaki gibi çağırılmalıdır <form onsubmit="return checkforselection('states');">

80 Form Doğrulama Radio Button (1/2) Aşağıdaki gibi bir formumuz olduğunu varsayalım <form onsubmit="return validateradios();"> </form> <input type="radio" name="r1" value="cat"> Cat<br> <input type="radio" name="r1" value="bat"> Bat<br> <input type="radio" name="r1" value="hat"> Hat<br> <input type="submit" value="submit Form">

81 Form Doğrulama Radio Button (2/2) Daha önceki örneğe benzer şekilde, formun submit butonuna tıklandığında aşağıdaki validateradios metodu çağırılacaktır function validateradios() { var radios = document.getelementsbyname("r1"); for (var i = 0; i < radios.length; i++) if (radios[i].checked) return true; } alert("please check one. ") ; return false;

82 Form Doğrulama Posta Kodları (1/5) Posta kodları 5 rakamdan oluşmaktadır HTML ile kullanıcının maksimum 5 karakter girmesi zorlanabilir Ancak, 5 karakterden az girmesi veya rakam yerine karakter girmesi durumları JavaScirpt ile kontrol edilmelidir Bir sonraki slayttaki validatezip metodunda kullanıcının posta kodu alanına 5 karakterden az girmesi kontrol edilmekte ve az girilmesi durumunda kullanıcı uyarılmakta ve form bilgisinin sunucuya gönderilmesi engellenmektedir

83 Form Doğrulama Posta Kodları (2/5) function validatezip() { } var numchars = document.getelementbyid("zip").value.length; if (numchars < 5) { } alert("please enter a 5-digit code."); return false;

84 Form Doğrulama Posta Kodları (3/5) Kullanıcının sadece rakam girmesini sağlamak için ise validatezip metodunu güncellemeliyiz Sonraki iki slaytta validatezip metodunun göncellenmiş hali bulunmakta Eklenen kod parçası, girilen her bir karakterin sayı olup olmadığını kontrol etmekte Bu amaçla her bir karakter sayıya çevirilmeye çalışılmakta ve herhangi bir karakterin sayıya çevrilememesi durumunda metot false döndürmekte

85 Form Doğrulama Posta Kodları (4/5) function validatezip() { var valueentered = document.getelementbyid("zip").value; var numchars = valueentered.length; if (numchars < 5) { } alert("please enter a 5-digit code. ") ; return false;

86 Form Doğrulama Posta Kodları (5/5) for (var i = 0; i <= 4; i++) { } } var thischar = parseint(valueentered[i]) ; if (isnan(thischar)) { } alert("please enter only numbers. ") ; return false;

87 Olayların İşlenmesi (1/4) Önceki slaytlarda, satıriçi olay işleyicilerini kullanarak olayları nasıl işleyebileceğinizi gördünüz Ancak JavaScript HTML içerikten olabildiğince ayrı tutulmalıdır Satır içi olay işleyicisi aşağıdaki şekilde kullanılıyordu <input type="button" value="click" onclick="sayhello();"> Bu kullanımı bırakmak için öncelikle kırmızı ile gösterilen kod parçası aşağıdaki gibi ID ile değiştirilmelidir <input type="button" value="click" id="button1">

88 Olayların İşlenmesi (2/4) Bu durumda, olayı işleyecek JavaScript kodu aşağıdaki gibi olacaktır var b1 = document.getelementbyid("button1"); b1.onclick = sayhello; onclick özelliğinin küçük harfle yazıldığına dikkat edin Fonksiyon adından sonra parantezler kullanılmadığına dikkat edin İstenirse bu iki satır tek satır olarak ifade edilebilir document.getelementbyid("button1").onclick = sayhello;

89 Olayların İşlenmesi (3/4) İlgili JavaScript fonksiyonun yazımında bir değişiklik olmamaktadır function sayhello() { } alert("hi there. "); Kullanıcı bir resmin üzerine geldiğinde resmin başka bir resimle değiştirilmesi aşağıdaki şekilde gerçekleştirilebilir var targetimg = document.getelementbyid("i12"); targetimg.onmouseover = swappic;

90 Olayların İşlenmesi (4/4) Bir formdaki adresinin gönderilmeden önce kontrol edilmesi ve adresinin doğru formatta girilmemesi durumunda form bilgilerinin sunucuya gönderilmemesi aşağıdaki şekilde gerçekleştirilebilir var frm = document. getelementbyid("form5") ; frm.onsubmit = val ;

JavaScript & DOM XML & JSON

JavaScript & DOM XML & JSON JavaScript & DOM XML & JSON Ele alınacak başlıklar JavaScript Dili DOM (Document Object Model) JavaScript ve OO Programlama XML ve JSON JavaScript Kısım 1 Gelişim JavaScript, 1995 yılında Netscape tarafından

Detaylı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1

Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1 Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 9

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 9 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 9 Dizi Değişkenler (Array) 2 Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1, eleman2,, elemann)

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Formlar Kullanıcının da aktif olacağı dinamik web sayfaları

Detaylı

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM

Detaylı

JAVASCRIPT JAVASCRIPT DİLİ

JAVASCRIPT JAVASCRIPT DİLİ JAVASCRIPT JAVASCRIPT DİLİ Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla

Detaylı

Dinamik Kodlama. [X] Fusion@6. [X] Yeni Fonksiyon

Dinamik Kodlama. [X] Fusion@6. [X] Yeni Fonksiyon Dinamik Kodlama Ürün Grubu Kategori Versiyon Önkoşulu [X] Fusion@6 [X] Yeni Fonksiyon @6 Uygulama @6 Serisi ürünlerde, kullanıcı arabirimlerinin her yerine eklenen dinamik kodlama özelliği ile, programın

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ

MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ Versiyon: 1.0.4 URL Adresi http://merchant.mobilepax.com/services/product.aspx Gönderilen XML Yapısı MobilePaxProduct fonksiyonu buton bilgisi oluşturulacak ürünün

Detaylı

DIV KAVRAMI <style> position: absolute

DIV KAVRAMI <style> position: absolute DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde

Detaylı

Web Tasarımı - Yrd. Doç. Devkan Kaleci 1

Web Tasarımı - Yrd. Doç. Devkan Kaleci 1 . onclick 2. onmouseover ve OnMouseOut 3. onload ve onunload 4. onsubmit 5. onreset 6. onfocus ve onblur 7. onchange 8. onabort, onerror 2 Bir olayın oluşması, mevcut durumda bir değişiklik olması anlamına

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

Javascript Ders Örnekleri -2. Tarayıcı Görüntüsü

Javascript Ders Örnekleri -2. Tarayıcı Görüntüsü Javascript Ders Örnekleri -2 Örnek 1 : Aşağıdaki Javascript kodları çalıştığında tarayıcı görüntüsü nasıl olur? JS Kodu var puan=85; if(puan>70) document.write( Notunuz iyi ); else document.write( Notunuz

Detaylı

GEÇERLİLİK KONTROLLERİ VALİDATİON CONTROLS. Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

GEÇERLİLİK KONTROLLERİ VALİDATİON CONTROLS. Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu GEÇERLİLİK KONTROLLERİ VALİDATİON CONTROLS Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu Giriş Kullanıcı bilgilerinin istenilen kriterlere uygun olup olmadığını denetlemek

Detaylı

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML Formları Temel Başlıklar HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML/WWW veri paylaşımı üzerine kurulmuştur. Html işaretleme dilidir. Diğer içerikler ile bağlantılar (linkler)

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım)

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Yeni Form Elementleri HTML5 işlevi fazla olan ve daha fazla form elemanı sunmaktadır Tarayıcı

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

Adım Adım SPSS. 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü. Y. Doç. Dr. İbrahim Turan Nisan 2011

Adım Adım SPSS. 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü. Y. Doç. Dr. İbrahim Turan Nisan 2011 Adım Adım SPSS 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü Y. Doç. Dr. İbrahim Turan Nisan 2011 File (Dosya) Menüsü Excel dosyalarını SPSS e aktarma Variable View (Değişken Görünümü 1- Name (İsim - Kod)

Detaylı

Üst Düzey Programlama

Üst Düzey Programlama Üst Düzey Programlama Servlet Üst Düzey Programlama-ders02/ 1 Form ve kullanıcı verilerinin alınması http://anamakine/yol?kullanici=mustafa&sayfa=22 gibi bir istek ile karşılaşmışızdır.? işaretinden sonra

Detaylı

1 JAVASCRIPT NEDİR? 1

1 JAVASCRIPT NEDİR? 1 İÇİNDEKİLER IX İÇİNDEKİLER 1 JAVASCRIPT NEDİR? 1 2 TEST ORTAMINI TANIMAK (FİREFOX VE FİREBUG) 5 Firefox 6 Firebug 8 CSS Sekmesi 10 DOM Sekmesi 11 Net ve Çerezler Sekmeleri 11 Script Sekmesi 11 Konsol Sekmesi

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

KURULUM KILAVUZU MART 2014. Visilabs Target Kurulum Kılavuzu

KURULUM KILAVUZU MART 2014. Visilabs Target Kurulum Kılavuzu KURULUM KILAVUZU MART 2014 1 İçindekiler 1 Suggest Methodu... 3 1.1 Banner Sıralamasının Ziyaretçilere özel değişmesi... 3 1.2 Site üzerindeki widget aracığıyla gösterilen öneriler... 4 1.2.1 RealTime

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

Detaylı

Üst Düzey Programlama

Üst Düzey Programlama Üst Düzey Programlama Servlet Üst Düzey Programlama-ders08/ 1 Servlet Nedir? Internetin ilk zamanlarında geliştirilen web sayfaları durağan bilgiler içeriyordu. Zaman geçtikçe web sayfaları daha değişken,

Detaylı

jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme

jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme az kod, çok iş! jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

Basit bir web uygulaması

Basit bir web uygulaması AJAX Ahmet Demirelli ahmetdemirelli@sabanciuniv.edu SCJP 5.0, SCWCD 1.4 Sabancı Üniversitesi Bilişim Teknolojileri Yüksek Lisans Programı 3/20/2007 Sabanci University 1 Ajanda Neden AJAX ihtiyacı AJAX

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

9. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

9. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 9. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler Request Nesnesinin Özellikleri

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ı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

HSancak Nesne Tabanlı Programlama I Ders Notları

HSancak Nesne Tabanlı Programlama I Ders Notları Konsol Uygulaması Oluşturma Konsol uygulaması oluşturmak için program açıldıktan sonra Create: Project ya da New Project seçeneği tıklanabilir. New Project penceresini açmak için farklı yollar da vardır.

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2013 2014 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 26 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla

Detaylı

INPUTBOX KULLANIMI. Komut Düğmesine uygulanan algoritma örneği

INPUTBOX KULLANIMI. Komut Düğmesine uygulanan algoritma örneği INPUTBOX KULLANIMI InputBox komutu, Basic programlama dilinde program algoritması içinde ekran aracışığı ile bir sorgu yönlendirerek, kullanıcının bilgi girmesini sağlamak amacıyla kullanılır. Bu komutun

Detaylı

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet

Detaylı

Internet Programming II

Internet Programming II Internet Programming II Elbistan Meslek Yüksek Okulu 2016 2017 Bahar Yarıyılı Öğr.Gör. Murat KEÇECĠOĞLU 1 Fonksiyonlar Değişken Kontrol Fonksiyonları isset() Fonksiyonu Parametre olarak aldığı değişken

Detaylı

IPACK LADDER. Arayüz Dökümantasyonu

IPACK LADDER. Arayüz Dökümantasyonu IPACK LADDER Arayüz Dökümantasyonu I. Giriş Bu dökümantasyon IPack Ladder yazılımının arayüz kullanımını, kullanılan model ile ilişkilerini ve işlevsel açıklamaları kapsamak üzere hazırlanmıştır. II. Dökümantasyon

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ı

ÜSKÜDAR ÜNVERSİTESİ EBYS KULLANIM KILAVUZU

ÜSKÜDAR ÜNVERSİTESİ EBYS KULLANIM KILAVUZU ÜSKÜDAR ÜNVERSİTESİ EBYS KULLANIM KILAVUZU 1. Sisteme Giriş Üsküdar EBYS sistemine giriş için, kullanıcı ismi ve şifre gereklidir. Kullanıcı İsmi: Bu alana, EBYS kullanıcı isminizi giriniz. Bu alan, eğer

Detaylı

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...

Detaylı

11 SÜRÜM İLE EKLENEN ÖZELLİKLER/DEĞİŞİKLİKLER ( V7 (B1554) )

11 SÜRÜM İLE EKLENEN ÖZELLİKLER/DEĞİŞİKLİKLER ( V7 (B1554) ) 11 SÜRÜM İLE EKLENEN ÖZELLİKLER/DEĞİŞİKLİKLER ( V7 (B1554) ) Evrak dağıtımlarında oluşan PDF içerisinde alt kısımda gösterdiğimiz ek listesi, evrak meta alanlarından ek metin kutusu ile manuel olarak girildiğinde,

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

CJ-CP1H-CP1L PLCLERĐNDE FONKSĐYON BLOĞU OLUŞTURMA

CJ-CP1H-CP1L PLCLERĐNDE FONKSĐYON BLOĞU OLUŞTURMA CJ-CP1H-CP1L PLCLERĐNDE FONKSĐYON BLOĞU OLUŞTURMA ĐÇĐNDEKĐLER Fonksiyon Bloğu Oluşturma Input ve Outputların Tanıtılması Programın Yazılması Programın Çalıştırılması Fonksiyon Bloğu Oluşturma Öncelikle

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

E-Birlik İhracat. Basitleştirilmiş Gümrük Hattı. Uygulaması - KULLANICI KILAVUZU -

E-Birlik İhracat. Basitleştirilmiş Gümrük Hattı. Uygulaması - KULLANICI KILAVUZU - E-Birlik İhracat Basitleştirilmiş Gümrük Hattı Uygulaması - KULLANICI KILAVUZU - İNDEKS: 1. GİRİŞ SAYFASI... 3 2. YENİ KULLANICI HESABI OLUŞTURMA İŞLEMİ... 4 2.1 Kullanıcı Giriş Profili Oluşturma İşlemi...

Detaylı

T.C. ETİ MADEN İŞLETMELERİ TEKLİF MODÜLÜ FİRMA KULLANIM KILAVUZU

T.C. ETİ MADEN İŞLETMELERİ TEKLİF MODÜLÜ FİRMA KULLANIM KILAVUZU T.C. ETİ MADEN İŞLETMELERİ TEKLİF MODÜLÜ FİRMA KULLANIM KILAVUZU Eylül 2012 Ankara Sayfa No:1/8 1.TEKLİF MODÜLÜ Kurumun herhangi bir ihale sürecinde firmalardan elektronik ortamda teklif isteyebilmesi

Detaylı

MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ

MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ Versiyon: 1.0.4 URL http://merchant.mobilepax.com/services/product.asmx Metot MobilePaxProduct fonksiyonu buton bilgisi oluşturulacak ürünün bilgilerinin Mobilepax

Detaylı

NB Macro Kullanımı Hakkında Genel Bilgiler

NB Macro Kullanımı Hakkında Genel Bilgiler NB Macro Kullanımı Hakkında Genel Bilgiler Genel Bilgi Makro Nasıl Eklenir? NB Ekranlarda Genel Makro Mantığı Makro Nasıl Çağrılır? Örnek Makro Projesi Genel Bilgi Makro, gelişmiş bir HMI kontrol metodudur.

Detaylı

C Programlama Dilininin Basit Yapıları

C Programlama Dilininin Basit Yapıları Bölüm 2 C Programlama Dilininin Basit Yapıları İçindekiler 2.1 Sabitler ve Değişkenler......................... 13 2.2 Açıklamalar (Expresions)........................ 14 2.3 İfadeler (Statements) ve İfade

Detaylı

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

PROGRAMLAMA DERSİ 1. İNTERNET

PROGRAMLAMA DERSİ 1. İNTERNET PROGRAMLAMA DERSİ 1. İNTERNET İnternet sunucu-istemci modeline göre çalışır. Fiziksel olarak bu sistem genelde isteği yapan bir bilgisayar (kullanıcı-client) ve bu isteği karşılayan özel bir bilgisayar

Detaylı

BİLGİSAYAR UYGULAMALARI Şırnak Üniversitesi Mühendislik Fakültesi Güz Dönemi Arş.Gör. Eren DEMİR ve Arş.Gör. Veysel KIŞ (

BİLGİSAYAR UYGULAMALARI Şırnak Üniversitesi Mühendislik Fakültesi Güz Dönemi Arş.Gör. Eren DEMİR ve Arş.Gör. Veysel KIŞ ( BİLGİSAYAR UYGULAMALARI Şırnak Üniversitesi Mühendislik Fakültesi 2018-19 Güz Dönemi Arş.Gör. Eren DEMİR ve Arş.Gör. Veysel KIŞ (e-mail: edemir@sirnak.edu.tr ) 04.10.2018 1 MATLAB da Workspace ve Workspace

Detaylı

App İnventor-Pide Sipariş Uygulaması

App İnventor-Pide Sipariş Uygulaması EĞİTİMDE BİLGİSAYAR PROGRAMLAMA FİNAL SINAVI App İnventor-Pide Sipariş Uygulaması 1)Ekran Tasarımı, ekranda kullanılan elementler ve özellikleri Bütün işlemler tek bir ekrandan yapılmaktadır. Arka plan

Detaylı

WEB FORMLARI. Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

WEB FORMLARI. Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu WEB FORMLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu WEB FORMLARI Web uygulamalarının etkileşimli olabilmesi için, diğer bir ifade ile uygulamanın kullanıcı isteğine

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

Site Temizlik Projesi Kodları

Site Temizlik Projesi Kodları Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu

Detaylı

WEB PROGRAMLAMA. DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA

WEB PROGRAMLAMA. DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA WEB PROGRAMLAMA DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA Betik dili web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan istemci tarafında

Detaylı

Üst Düzey Programlama

Üst Düzey Programlama Üst Düzey Programlama JSP Üst Düzey Programlama-ders04/ 1 JSP JSP durağan HTML ile dinamik oluşturulan içeriği birleştirmeyi sağlar. Bir web sayfası tasarlama programı ile web sayfasını tasarlar daha sonra

Detaylı

SIMAN KULLANIM KILAVUZU

SIMAN KULLANIM KILAVUZU SIMAN KULLANIM KILAVUZU Önder Öndemir SIMAN Simülasyon programı Model Çatı ve Deneysel Çatı olmak üzere iki kısımdan oluşur. Model çatı genel itibariyle modullerin ve işlem bloklarının yazıldığı kısımdır.

Detaylı

YZM 3215 İleri Web Programlama

YZM 3215 İleri Web Programlama YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 3 jquery II. Bölüm Bu bölümde; Jquery II. Bölüm

Detaylı

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ Argox X-2000+ barkod / etiket yazıcısını bilgisayardan bağımsız kullanabilmek için Argox X-2000+ barkod / etiket yazıcısı ile birlikte verilen CD içerisinde bulunan

Detaylı

BİL-142 Bilgisayar Programlama II

BİL-142 Bilgisayar Programlama II BİL-142 Bilgisayar Programlama II (C/C++) Hazırlayan: M.Ali Akcayol Gazi Üniversitesi Bilgisayar Mühendisliği Bölümü Konular Giriş Sınıflar, Nesneler, Fonksiyon ve Veri Üyeleri Sınıf ve Fonksiyon Üyeleri

Detaylı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

Uzaktan Eğitim Uygulama ve Araştırma Merkezi

Uzaktan Eğitim Uygulama ve Araştırma Merkezi JAVA PROGRAMLAMA Öğr. Gör. Utku SOBUTAY İÇERİK 2 Java da Fonksiyon Tanımlamak Java da Döngüler Java da Şart İfadeleri Uygulamalar Java da Fonksiyon Tanımlamak JAVA DA FONKSİYON TANIMLAMAK 4 Fonksiyonlar;

Detaylı

Ecat 8. Hakbim Bilgi İşlem A.Ş. Versiyon

Ecat 8. Hakbim Bilgi İşlem A.Ş. Versiyon Ecat 8 Hakbim Bilgi İşlem A.Ş. Versiyon 2015 01.01 1 Ecat8 Nedir? Firmaların elektronik yedek parça kataloğu ihtiyacını karşılamak için Hakbim Bilgi İşlem tarafından geliştirilmiş ve geliştirilmeye devam

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

ASP.NET ile Bir Web Sitesi Oluşturma

ASP.NET ile Bir Web Sitesi Oluşturma 29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site

Detaylı

WEB TASARIMIN TEMELLERİ

WEB TASARIMIN TEMELLERİ WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.

Detaylı

AJAX TEKNİĞİ KULLANILARAK ÇOKTAN SEÇMELİ SINAV SİSTEMİ UYGULAMASI

AJAX TEKNİĞİ KULLANILARAK ÇOKTAN SEÇMELİ SINAV SİSTEMİ UYGULAMASI T.C. BEYKENT ÜNİVERSİTESİ FEN BİLİMLERİ ENSTİTÜSÜ BİLGİSAYAR MÜHENDİSLİĞİ ANABİLİM DALI BİLGİSAYAR MÜHENDİSLİĞİ BİLİM DALI AJAX TEKNİĞİ KULLANILARAK ÇOKTAN SEÇMELİ SINAV SİSTEMİ UYGULAMASI YÜKSEK LİSANS

Detaylı

Google Search API ile ajax arama

Google Search API ile ajax arama Google Search API ile ajax arama 14 Ağustos Salı 12 http://mfyz.com/google-search-api-ile-ajax-arama Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları

Detaylı

Excel Nedir? Microsoft Excell. Excel de Çalışma sayfası-tablo

Excel Nedir? Microsoft Excell. Excel de Çalışma sayfası-tablo Microsoft Excell Excel Nedir? Excel programı; veriler üzerinde hesap yapabilme, verileri tabloya dönüştürebilme, verileri karşılaştırıp sonuç üretebilme, grafik oluşturma, veri yönetimi yapabilir. http://mf.dpu.edu.tr/~eyup

Detaylı

HTML Sayfaları. Bütün html sayfaları

HTML Sayfaları. Bütün html sayfaları HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 8

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 8 BTP 27 İNTERNET PROGRAMCILIĞI I Ders 8 Değişkenler 2 Tamsayı Değerler (Integer) Tamsayılar, tabanlı (decimal), 8 tabanlı (octal) veya 6 tabanlı (hexadecimal) olabilir. 8 tabanındaki sayıları belirtmek

Detaylı

YZM 2105 Nesneye Yönelik Programlama

YZM 2105 Nesneye Yönelik Programlama YZM 2105 Nesneye Yönelik Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 5 Nesneye Yönelik Programlamaya Giriş Bu

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ı

ÇANKIRI KARATEKİN ÜNİVERSİTESİ ZİMBRA E-POSTA SİSTEMİ KULLANICI DOKÜMANI

ÇANKIRI KARATEKİN ÜNİVERSİTESİ ZİMBRA E-POSTA SİSTEMİ KULLANICI DOKÜMANI ÇANKIRI KARATEKİN ÜNİVERSİTESİ ZİMBRA E-POSTA SİSTEMİ KULLANICI DOKÜMANI İÇİNDEKİLER GİRİŞ... 3 EPOSTA SİSTEMİNE BAĞLANMA... 3 ESKİ E-POSTLAR... 5 YENİ KİŞİ VEYA GÖREV OLUŞTURMA... 6 MESAJ YAZMA... 6 KİŞİLER...

Detaylı

Göstericiler (Pointers)

Göstericiler (Pointers) C PROGRAMLAMA Göstericiler (Pointers) C programlama dilinin en güçlü özelliklerinden biridir. Göstericiler, işaretçiler yada pointer adı da verilmektedir. Gösterici (pointer); içerisinde bellek adresi

Detaylı

Anadolu Üniversitesi Sınav Hizmetleri. Bilgisayar Araştırma ve Uygulama Merkezi

Anadolu Üniversitesi Sınav Hizmetleri. Bilgisayar Araştırma ve Uygulama Merkezi Anadolu Üniversitesi Sınav Hizmetleri Bilgisayar Araştırma ve Uygulama Merkezi Anadolu Üniversitesi Sınav Sistemi Genel Bilgi... 2 Giriş İşlemleri... 2 Sınav Seçme... 4 Bina Bilgileri... 5 Bina Ekleme...

Detaylı

Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY

Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY CSS Ünite 7 Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ Öğr. Gör. Rıza ALTUNAY 1 Ünite 7 CSS Öğr. Gör. Rıza ALTUNAY İçindekiler 7.1. CSS KULLANIM ALANLARI... 3 7.1.1. Yerel Kullanım Alanı...

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ı

Ajax kullanımı oldukça yaygınlaşmaktadır. Web tabanlı uygulamalar Ajax desteği ile çok daha esnek kullanışlı, performanslı bir yapıya kavuşmaktadır.

Ajax kullanımı oldukça yaygınlaşmaktadır. Web tabanlı uygulamalar Ajax desteği ile çok daha esnek kullanışlı, performanslı bir yapıya kavuşmaktadır. Ajax'a Giriş Ajax (asynchronous javascript and xml); web tabanlı uygulamalarda, zengin kullanıcı arayüzü ve güçlü arka plan uygulamaları bütünleştiren bir yaklaşım ve geliştirme ortamıdır. Ajax Bu yöntemde

Detaylı

NECMETTİN ERBAKAN ÜNİVERSİTESİ E-POSTA YARDIM BELGESİ

NECMETTİN ERBAKAN ÜNİVERSİTESİ E-POSTA YARDIM BELGESİ Zimbra Webmail GENEL ÖZELLİKLER Zimbra yüksek performanslı bir e-posta programı olup, e-posta, adres defteri, takvim, görev listeleri ve web dokümanları gibi özelliklere sahip bir uygulamadır. e-posta

Detaylı

Internet Programming II

Internet Programming II Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı 16 May. 2016 Öğr.Gör. Murat KEÇECĠOĞLU 1 Fonksiyonlar Değişken Kontrol Fonksiyonları isset() Fonksiyonu Parametre olarak aldığı

Detaylı

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 Ders- 13 World Wide Web (WWW) Yrd. Doç. Dr. Burcu Can Buğlalılar Bilgisayar Mühendisliği Bölümü Bilgisayar Katmanları İçerik World Wide Web (WWW) Anlık Mesajlaşma

Detaylı