Web Teknolojileri Hafta 6.

... konulu sunumlar: "Web Teknolojileri Hafta 6."— Sunum transkripti:

1 Web Teknolojileri Hafta 6

2 İçerik Html Formlar Javascript

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ı <form> . form elements . </form>

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.

5 Text Input <input type="text"> tek satırlı metin girişi elemanı tanımlar. <form>   First name:<br>   <input type="text" name="firstname"><br>   Last name:<br>   <input type="text" name="lastname"> </form>

6 Radio Button İnput <input type="radio"> radio button tanımlar
Radio butonlar ile sadece bir seçeneği seçebilirsiniz. <form>   <input type="radio" name="gender" value="male" checked>Male<br>   <input type="radio" name="gender" value="female">Female<br>   <input type="radio" name="gender" value="other"> Other </form>

7 CheckBox Button İnput <input type="checkbox"> onay kutularını tanımlar Onay kutuları ile hiç yada tüm seçenekler seçilebilir. <form>   <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>   <input type="checkbox" name="vehicle2" value="Car"> I have a car  </form>

8 Submit Button <input type="submit"> formu göndermek için kullanılan butondur. Submit butonuna tıklanınca action özelliği ile belirtilen yere sayfa yönlenir. <form action="action_page.php">   First name:<br>   <input type="text" name="firstname" value="Mickey"><br>   Last name:<br>   <input type="text" name="lastname" value="Mouse"><br><br>   <input type="submit" value="Submit"> </form>

9 Button <input type="button"> buton tanımı yapılır
<input type="button" value="Click Me!">

10 Şifre <input type="password"> şifre metin kutusu tanımı yapılır.
<form>   User name:<br>   <input type="text" name="username"><br>   User password:<br>   <input type="password" name="psw"> </form>

11 Select Drop-Down List <select> tagı ile seçmeli liste tanımlanır. selected özelliği kullanıldığı seçeneği otomatik seçili olarak getirir. <select name="cars">   <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="fiat« selected>Fiat</option>   <option value="audi">Audi</option> </select>

12 Text Area Çoklu Metin Girişi
<textarea> çok satırlı metin girişini tanımlar <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>

13 Input Özellikleri value özelliği form elemanının içeriğini belirler.
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>

14 Input Özellikleri Readonly özniteliği kullanıldığı yerde form elemanını sadece okunabilir yapar. <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>

15 Input Özellikleri disabled  özelliği kullanıldığı yerde elemanı pasif yapar. <form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>

16 Input Özellikleri size özelliği form elemanının boyutunu belirler.
<form action=""> First name:<br> <input type="text" name="firstname" value="John" size="30"> <br> Last name:<br> <input type="text" name="lastname"> </form>

17 Input Özellikleri id özelliği form elemanına javascript kodu ile erişilebilmesini sağlar. <form action=""> First name:<br> <input type="text" name="firstname" id="firstname" value="John" size="30"> <br> Last name:<br> <input type="text" name="lastname"> </form> "

18 Form Özellikleri Form Action özelliği form gönderildiği zaman web sayfasının yönleneceği URL adresini gösterir. <form action="action_page.php">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit"><br>   <input type="submit" formaction="demo_admin.asp"   value="Submit as admin"> </form>

19 Form Özellikleri formenctype özelliği formun gönderilme şeklini belirtir. Bu şekilde form ile bir dosya verisi gönderilebilir. <form action="action_page.php" formenctype="multipart/form-data">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit"> </form>

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. <form action="action_page.php" method="get">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit">   <input type="submit" formmethod="post" formaction="demo_post.asp"   value="Submit using POST"> </form>

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.

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

23 JavaScript JavaScript <head> tagı örneği.
<!DOCTYPE html> <html><head> <script> function myFunction() {     document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>

24 JavaScript JavaScript <body> tagı örneği.
<!DOCTYPE html> <html> <body>  <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() {    document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html>

25 JavaScript JavaScript harici dosya ile kullanımı. myScript.js
head içinde çağırma body içinde çağırma function myFunction() {    document.getElementById("demo").innerHTML = "Paragraph changed."; } <!DOCTYPE html> <html> <head> <script src="myScript.js"> </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>

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()

27 JavaScript window.alert()
<!DOCTYPE html> <html> <body> <script> window.alert(5 + 6); </script> </body> </html>

28 JavaScript document.write()
<!DOCTYPE html> <html> <body> <script> document.write(7 + 6); </script> </body> </html>

29 JavaScript document.write()
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. <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <button onclick="document.write(5 + 6)">Try it</button> </body> </html>

30 JavaScript innerHTML Bir HTML öğesi erişmek için JavaScript kullanabilirsiniz document.getElementById (id) yöntemiyle. <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>

31 JavaScript console.log()
Tarayıcıdaki konsola log yazdırmak için kullanılır. F12 ile tarayıcı konsolunu etkinleştirin ve sekmelerden Console seçiniz. <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(7 + 4); </script> </body> </html>

32 JavaScript sözdizimi 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 Değişkenler Html içeriğe aktarılabilir.
<p id="demo"></p> <script> var carName = "Volvo"; document.getElementById("demo").innerHTML = carName;  </script>

34 JavaScript sözdizimi Açıklama satırı için // veya /* */ ifadesi kullanılır. Değişken tanımlarken alt çizgi yada camelcase metodu kullanılabilir. 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*/ var ad_soyad, kullanici_adi; var AdSoyad, KullaniciAdi;

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

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

37 JavaScript Operatörler
Arttırma var x = 5; x++; var z = x; Toplama var x = 5; var y = 2; var z = x + y; Azaltma var x = 5; x--; var z = x; Çıkarma var x = 5; var y = 2; var z = x - y; Çarpma 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
Operator Example Same As = x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y

39 JavaScript Atama Operatörler
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
Dinamik tipler. var x;               // Now x is undefined var x = 5;           // Now x is a Number var x = "John";      // Now x is a String Ondalık ve tamsayı tipler. var x1 = 34.00;     // Written with decimals var x2 = 34;        // Written without decimals Boolean tipler. var x = true; var y = false;

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

42 JavaScript Fonksiyonlar
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
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
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
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 Nesneler HTML DOM Ağacı
JavaScript Html DOM 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 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. HTML elemanları nesne olarak tanımlar Tüm Html elemanların özelliklerini kullanır. Tüm Html öğelerin yöntemlerine erişebilir. Tüm Html elemanlarının olaylarını tanımlar.

48 JavaScript Html DOM 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 HTML DOM HTML içeriği değiştirebilir. innerHTML özelliği ile içerik değiştirilir. <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>

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

51 JavaScript Html DOM getElementById farklı çeşitleri vardır. Method
Description 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 HTML elemanlarının özelliklerini değiştirebilir.
Method Description element.innerHTML =  new html content Change the inner HTML of an element element.attribute = new value Change the attribute value of an HTML element element.setAttribute(attribute, value) element.style.property = new style Change the style of an HTML element

53 JavaScript Html DOM HTML elemanı ekler yada silebilir. Method
Description 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 HTML olayı ekleyebilir. Method Description document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event

54 JavaScript Html DOM HTML taglarına erişerek değiştirebilir.
<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element = document.getElementById("header"); element.innerHTML = "New Header"; </script> </body> </html>

55 JavaScript Html DOM HTML tagların özniteliklerine erişerek değiştirebilir. <!DOCTYPE html> <html> <body> <img id="myImage" src="smiley.gif"> <script> document.getElementById("myImage").src = "landscape.jpg"; </script> </body> </html>

56 JavaScript Olaylar 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 Bir öğeye tıklayınca çalışır.
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>

58 Olaylar OnLoad, OnUnload
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. <body onload="checkCookies()" > <body onunload="close()" >

59 Olaylar OnChange OnMouseOver OnMouseOut
Html öğesinin içeriği değiştirildiğinde çalışır. <input type="text" id="fname" onchange="upperCase()"> 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
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" </script> </body> </html>

61 JavaScript Form Elemanlar
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. <p id="demo">İçerikler buraya gelecek.</p> var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) {     text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;

62 JavaScript Form Doğrulama
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;     } } <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>