Web Teknolojileri Hafta 6 1. İçerik  Html Formlar  Javascript 2.

... konulu sunumlar: "Web Teknolojileri Hafta 6 1. İçerik  Html Formlar  Javascript 2."— Sunum transkripti:

1 Web Teknolojileri Hafta 6 1

2 İçerik  Html Formlar  Javascript 2

3 Html Formlar  Html formlar kullanıcıdan veya web sayfasından bilgi almak amacıyla kullanılan html elemanlarıdır.  Basit bir form tanımı 3. form elements.

4 Html Formlar  Html formlar form elemanlarını içerir.  Form elemanları input elemanının farklı şekilleridir. checkboxes, radio buttons, submit buttons, text ve di ğ erleri. 4

5 Text Input  tek satırlı metin girişi elemanı tanımlar. 5 First name: Last name:

6 Radio Button İnput  radio button tanımlar  Radio butonlar ile sadece bir seçene ğ i seçebilirsiniz. 6 Male Female Other

7 CheckBox Button İnput  onay kutularını tanımlar  Onay kutuları ile hiç yada tüm seçenekler seçilebilir. 7 I have a bike I have a car

8 Submit Button  formu göndermek için kullanılan butondur.  Submit butonuna tıklanınca action özelli ğ i ile belirtilen yere sayfa yönlenir. 8 First name: Last name:

9 Button  buton tanımı yapılır 9

10 Şifre  şifre metin kutusu tanımı yapılır. 10 User name: User password:

11 Select Drop-Down List  tagı ile seçmeli liste tanımlanır.  selected özelli ğ i kullanıldı ğ ı seçene ğ i otomatik seçili olarak getirir. 11 Volvo Saab Fiat Audi

12 Text Area Çoklu Metin Girişi  çok satırlı metin girişini tanımlar 12 The cat was playing in the garden.

13 Input Özellikleri  value özelli ğ i form elemanının içeri ğ ini belirler. 13 First name: Last name:

14 Input Özellikleri  Readonly özniteli ğ i kullanıldı ğ ı yerde form elemanını sadece okunabilir yapar. 14 First name: Last name:

15 Input Özellikleri  disabled özelli ğ i kullanıldı ğ ı yerde elemanı pasif yapar. 15 First name: Last name:

16 Input Özellikleri  size özelli ğ i form elemanının boyutunu belirler. 16 First name: Last name:

17 Input Özellikleri  id özelli ğ i form elemanına javascript kodu ile erişilebilmesini sa ğ lar. 17 First name: Last name: "

18 Form Özellikleri  Form Action özelli ğ i form gönderildi ğ i zaman web sayfasının yönlenece ğ i URL adresini gösterir. 18 First name: Last name:

19 Form Özellikleri  formenctype özelli ğ i formun gönderilme şeklini belirtir.  Bu şekilde form ile bir dosya verisi gönderilebilir. 19 First name: Last name:

20 Form Özellikleri  Method özelli ğ i formun gönderdi ğ i bilginin gönderilme yöntemini belirtir.  Get ve Post olmak üzere iki yöntem vardır.  Get açık bir şekilde form verilerini gönderir.  Post kapalı bir şekilde form verilerini gönderir. 20 First name: Last name:

21 JavaScript  JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir.  JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeri ğ inin de ğ iştirilmesi gibi işlevler sa ğ lanır. 21

22 JavaScript  JavaScript kodları script tagları ile tanımlanır.  JavaScript 3 şekilde kullanılabilir.  yada  tagları arasında yazılabilir.  Harici dosya ile yazılabilir. 22 document.getElementById("demo").innerHTML = "My First JavaScript";

23 JavaScript  JavaScript tagı örne ğ i. 23 function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } My Web Page A Paragraph Try it

24 JavaScript  JavaScript tagı örne ğ i. 24 My Web Page A Paragraph Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }

25 JavaScript  JavaScript harici dosya ile kullanımı.  myScript.js head içinde ça ğ ırma  body içinde ça ğ ırma 25 function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }

26 JavaScript Görüntü Olanakları  JavaScript ile HTML sayfasına farklı şekillerde yazdırma işlemi yapılabilir.  Uyarı penceresi window.alert();  HTML sayfaya yazdırma document.write();  HTML tagı içine yazdırma innerHTML  Tarayıcı konsol içine yazdırma console.log() 26

27 JavaScript window.alert() 27 window.alert(5 + 6);

28 JavaScript document.write() 28 document.write(7 + 6);

29 JavaScript document.write() 29 My First Web Page My first paragraph. Try it  document.write() ile tüm içeri ğ i silebilirsiniz.  Aşa ğ ıdaki kodda butona tıklayınca tüm içerik silinir ve 11 yazar.

30 JavaScript innerHTML 30  Bir HTML ö ğ esi erişmek için JavaScript kullanabilirsiniz document.getElementById (id) yöntemiyle. My First Web Page My First Paragraph document.getElementById("demo").innerHTML = 5 + 6;

31 JavaScript console.log() 31  Tarayıcıdaki konsola log yazdırmak için kullanılır.  F12 ile tarayıcı konsolunu etkinleştirin ve sekmelerden Console seçiniz. My First Web Page My first paragraph. console.log(7 + 4);

32 JavaScript sözdizimi 32  Her bir ifade ; ile ayrılır.  De ğ işkenler var deyimi ile tanımlanır.  Atama işlemi = ile yapılır  Metinler çift veya tek tırnak içinde yazılır. var x = 5; var y = 6; var z = x + y; "Sakarya Üniversitesi" 'Sakarya Üniversitesi'

33 JavaScript sözdizimi 33  De ğ işkenler Html içeri ğ e aktarılabilir. var carName = "Volvo"; document.getElementById("demo").innerHTML = carName;

34 JavaScript sözdizimi 34  Açıklama satırı için // veya /* */ ifadesi kullanılır.  De ğ işken tanımlarken alt çizgi yada camelcase metodu kullanılabilir. var ad_soyad, kullanici_adi; var AdSoyad, KullaniciAdi; var x = 5; // I will be executed // var x = 6; I will NOT be executed /*Birden fazla satır Yorum bu şekilde yapılır*/

35 JavaScript sözdizimi 35  Aritmetik operatörler hesaplama işlemleri için kullanılır.  De ğ işkenler ile aritmetiksel işlemler yapılabilir.  Metinler + ile birleştirilebilir. "Sakarya" + " " + "Üniversitesi" (5 + 6) * 10 X* (5 + 6) * 10

36 JavaScript Operatörler 36 OperatorDescription +Addition -Subtraction *Multiplication /Division %Modulus ++Increment --Decrement

37 JavaScript Operatörler 37 Arttırma var x = 5; x++; var z = x; Azaltma var x = 5; x--; var z = x; Çarpma var x = 5; var y = 2; var z = x * y; Toplama var x = 5; var y = 2; var z = x + y; Çıkarma var x = 5; var y = 2; var z = x - y; Bölme var x = 5; var y = 2; var z = x / y;

38 JavaScript Atama Operatörler 38 OperatorExampleSame As =x = y +=x += yx = x + y -=x -= yx = x - y *=x *= yx = x * y /=x /= yx = x / y %=x %= yx = x % y

39 JavaScript Atama Operatörler 39 Assignment var x = 10; Assignment var x = 10; x += 5; Assignment var x = 10; x -= 5; Assignment var x = 10; x *= 5; Assignment var x = 10; x /= 5; Assignment var x = 10; x %= 5;

40 JavaScript Veri Tipleri 40 Ondalık ve tamsayı tipler. var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String var x1 = 34.00; // Written with decimals var x2 = 34; // Written without decimals var x = true; var y = false; Dinamik tipler. Boolean tipler.

41 JavaScript Diziler 41 Diziler [] içinde tanımlanır. var cars = ["Saab", "Volvo", "BMW"];

42 JavaScript Fonksiyonlar 42 Bir JavaScript fonksiyonu belirli bir görevi yerine getirmek için tasarlanmış bir kod bloğudur function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 }

43 JavaScript Fonksiyon Syntax 43 Javascript fonksiyonu function anahtar kelimesi ile tanımlanır. Fonksiyon isimleri harfler, sayılar, altçizgi içerebilir. Fonksiyonlar birden fazla parametre alabilir. function name(parameter1, parameter2, parameter3) { code to be executed }

44 JavaScript Fonksiyon Geri Değeri 44 Javascript fonksiyonları return anahtar kelimesi ile geri değer döndürürüler. var x = myFunction(4, 3); /* Function is called, return value will end up in x*/ function myFunction(a, b) { return a * b; // Function returns the product of a and b }

45 JavaScript Fonksiyon Örneği 45 Aşağıdaki fonksiyon fahrenayt derece değerini celcius değer çevirir. function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } Fonksiyonu Kullanım Örnekleri document.getElementById("demo").innerHTML = toCelsius(77); var text = "The temperature is " + toCelsius(77) + " Celsius"; var x = toCelsius(32); var text = "The temperature is " + x + " Celsius";

46 JavaScript Html DOM 46 HTML DOM ile JavaScript erişebilir ve bir HTML belgesinin tüm unsurları değiştirebilir. Nesneler HTML DOM Ağacı

47 JavaScript Html DOM 47 DOM nedir? DOM W3C (World Wide Web Consortium) standardıdır. DOM belgeleri erişmek için bir standart tanımlar: HTML Dom aşağıdakileri yapabilir. 1.HTML elemanları nesne olarak tanımlar 2.Tüm Html elemanların özelliklerini kullanır. 3.Tüm Html öğelerin yöntemlerine erişebilir. 4.Tüm Html elemanlarının olaylarını tanımlar.

48 JavaScript Html DOM 48 HTML DOM ile aşağıdaki işlevler yapılabilir. JavaScript sayfasındaki tüm HTML öğelerini değiştirebilirsiniz JavaScript sayfasındaki tüm CSS stillerini değiştirebilir JavaScript, HTML elemanları ve özelliklerini kaldırabilirsiniz Yeni HTML öğelerini ve özelliklerini ekleyebilirsiniz JavaScript sayfasında yeni bir HTML olayları oluşturabilir

49 JavaScript Html DOM 49 HTML DOM HTML içeriği değiştirebilir. innerHTML özelliği ile içerik değiştirilir. document.getElementById("demo").innerHTML = "Hello World!";

50 JavaScript Html DOM 50 getElementById yöntemi ile HTML elemanlarına id özelliği aracılığıyla erişilebilir. document.getElementById("demo").innerHTML = "Hello World!";

51 JavaScript Html DOM 51 getElementById farklı çeşitleri vardır. MethodDescription document.getElementById(id)Find an element by element id document.getElementsByTagName(name)Find elements by tag name document.getElementsByClassName(name)Find elements by class name

52 JavaScript Html DOM 52 HTML elemanlarının özelliklerini değiştirebilir. MethodDescription element.innerHTML = new html contentChange the inner HTML of an element element.attribute = new valueChange the attribute value of an HTML element element.setAttribute(attribute, value)Change the attribute value of an HTML element element.style.property = new styleChange the style of an HTML element

53 JavaScript Html DOM 53 HTML elemanı ekler yada silebilir. MethodDescription document.createElement(element)Create an HTML element document.removeChild(element)Remove an HTML element document.appendChild(element)Add an HTML element document.replaceChild(element)Replace an HTML element document.write(text)Write into the HTML output stream MethodDescription document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event HTML olayı ekleyebilir.

54 JavaScript Html DOM 54  HTML taglarına erişerek de ğ iştirebilir. Old Header var element = document.getElementById("header"); element.innerHTML = "New Header";

55 JavaScript Html DOM 55  HTML tagların özniteliklerine erişerek de ğ iştirebilir. document.getElementById("myImage").src = "landscape.jpg";

56 JavaScript Olaylar 56 HTML Dom Olayları Her bir HTML elemanına olay eklenebilir. Olaylara tepki verilebilir. HTML olayları örnekler: Kullanıcı fareyi tıkladığında Bir web sayfası yüklendiğinde Bir görüntü yüklendikten sonra Bir öğenin üstündeyken fare hareket ettiğinde Bir giriş alanı değiştirildiğinde HTML form gönderildiğinde Kullanıcı bir tuşa bastığı zaman

57 Olaylar OnClick 57 Bir öğeye tıklayınca çalışır. Click on this text!

58 Olaylar OnLoad, OnUnload 58 Kullanıcı web sayfasına girdiği anda sayfa yüklenince onLoad olayı çalışır. Kullanıcı sayfadan ayrılınca onUnLoad olayı çalışır.

59 Olaylar OnChange 59 Html öğesinin içeriği değiştirildiğinde çalışır. OnMouseOver Html öğesine fare ile üzerine gelindiğinde çalışır. OnMouseOut Html öğesinden fare ile üzerinden çıkıldığında çalışır.

60 OnMouseOver ve OnMouseOut Örnek 60 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> Mouse Over Me function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" }

61 JavaScript Form Elemanlar 61 İçerikler buraya gelecek. var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i "; } document.getElementById("demo").innerHTML = text; Aşağıdaki javascript kodu frm1 isimli formdaki tüm elemanların içindeki değerleri demo Id değere sahip p tagına basar.

62 JavaScript Form Doğrulama 62 Form kontrolü yapılabilir. function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } } Name: