Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
YayınlayanKoray Topal Değiştirilmiş 8 yıl önce
1
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html Editor: Notepad WebMatrix Dreamweaver Visual Studio Community Edition
2
Profesyonel Editor Avantajları Kodlama yaparken Auto-Complete özelli ğ i sa ğ lar. WebMatrix ücretsizdir
3
Neden Ana Sayfa İ smi İ ndex.html Olur?
4
İ lk Uygulama
5
Başlıklık Elementleri
7
Not: başlıklar birer bir standarttır. h1’den daha büyük yazı yazmak için stilleri kullanabiliriz. Sınır tam anlamıyla programcıya kalmıştır.
8
Metin Elementleri Yazıları ekranda farklı olarak göstermeyi sa ğ lar. Kendi fikir ve düşüncelerimizi en do ğ ru şekilde yansıtabilmesi için hepsi ayrı ayrı görevler almıştır. Pstrong Spanmark Divsmall Embr
9
Metin Elementleri
10
Yorum Ekleme - Comments Yorumlar, yazılan kodun daha kolay okunmasını sa ğ lamaktadır. Yorumlar tarayıcılar tarafından yok sayılır, yani yorumu dikkate almaz. Yorum etiketi " " karakterleri ile kapatılır ve yorumumuz bu etiket içine yazılır.
11
Kaynak Kodu / Source Code Sayfaların kodlarını / kayna ğ ını görebilmek için sayfa üzerindeyken sa ğ tıklayıp "Kayna ğ ı Göster" diyebilirsiniz.
12
Liste Elementleri Sıralı Liste(Ordered list) ol li 1,2,3,… a,b,c… A,B,C,… I,II,III,IV,…
13
Liste Elementleri Sırasız Liste(Unordered list) ul li Yuvarlak, kare,baklava,…
14
Liste Elementleri
15
Link Elementleri
16
Text-decoration: none = Linke tıklama işleminden sonra altı çizili özelli ğ ini kaldırır. Style ayarı yaptı ğ ımızdan, tagleri içersinde yer alır. Target: “_blank” = Linke tıkladı ğ ımızda sayfayı farklı bir sayfada açmamızı sa ğ lar.
17
Link ve Resim Elementleri
18
E ğ er resimleriniz web sayfanızın bulundu ğ u klasörden farklı bir yer de bulunuyor ve bulundu ğ u konum üst bir klasörde ise İ mg src=“../” şeklinde erişmemiz mümkündür
19
Link ve Resim Elementleri
20
Not: İ mage için anlatılan kurallar, linkler içinde geçerlidir. Hedef sayfaya erişim sa ğ larken a href=“../” mantı ğ ı ile yapılabilir. Uygulama: Resim için yaptı ğ ımız uygulamanın bir de ğ işi ğ ini sayfalar içinde yapınız.
21
Formlar ile Bilgi ve Giriş Input 1.Text 2.Password 3.Number 4.Tel 5.E-mail 6.url 7.Date 8.Time 9.Submit Textarea
22
Formlar ile Bilgi ve Giriş
23
autofocus="true" = Bu özellik sayfa ilk yüklendi ğ inde, klavyeden herhangi bir tuşa bastı ğ ımızda otomatik olarak yazılacak alanın belirlenmesinde kullanılır. Value=“” bütün type lar da kullanılır. Amaç yazılan kutuda sayfa ilk açıldı ğ ında varsayılan olarak istenilen de ğ erin gözükmesini sa ğ lar.
24
Combobox ile Seçim Select ◦ Option ◦ Optgroup ◦ Label ◦ Value ◦ selected
25
Combobox ile Seçim Çoktan Tek Seçmeli
26
Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli Checkbox ◦ İ d ◦ Name ◦ Checked Radio ◦ İ d ◦ name
27
Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli
28
Tarayıcılar, ekranda gördükleri yazı karakterlerini farklı yorumlayarak birbirlerinden farklı büyüklükte gösterebilir. E ğ er belli bir standart büyüklüklerinde ve bütün tarayıcıların aynı yorumu getirmesini istiyor isek, gibi taglerini kullanmamız gereklidir. checked : varsayılan olarak checkbox kutusunun seçili olarak gelmesini sa ğ lar
29
Video ve Ses Video ◦ Src ◦ Loop ◦ Autoplay ◦ Controls ◦ Poster Audio ◦ Src ◦ Loop ◦ controls
30
Video ve Ses
31
Video ve Ses Autoplay özelli ğ i kaldırması gerekiyor. Aksi halde ekledi ğ imiz resmi hızlı geçer ve bir anlamı kalmaz. Poster: Videoya ya poster eklememizi sa ğ lar Loop: Bu komut videonun sürekli olarak başa dönerek devam etmesini sa ğ lar
32
Video ve Ses
33
Etiketi Etiketi etiketi ile bir web sayfasını yada sitenin arama motorları için bilgilerin tanımlanmasını sa ğ ladı ğ ı gibi, içeri ğ in kodlama biçimini de tanımlar. 1- Arama motorlarına bilgi verme amacını taşır. 2- Bir web sayfasının içeri ğ ini temsil eden ve aralarına virgül konularak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamızı sa ğ lar.
34
CSS3(Cascading Style Sheets) Stil şablonları olarak tanımlanan bu kodlama tekni ğ i, HTML elementlerinin daha işlevsel özellikler kazanması için kullanılır. Tasarım tamamen CSS ile yapılmaktadır. CSS kuralı bir seçici ile bu seçicinin sınırlarını gösteren { } süslü parantezler arasındaki CSS özelliklerinin tümüne denir.
35
CSS3(Cascading Style Sheets) Body{ color:red } Bu kurala göre sayfanın yazı rengi kırmızı olacaktır. Sayfa düzeyind stil tanımı, sayfanın kısmında elementi bildirimi ile yapılır. elementi başlangıç ve bitiş etiketleri vardır ve kullanımı zorunludur.
36
CSS3(Cascading Style Sheets) Element Düzeyinde Stil Tanımı Style niteli ğ i alabilen her elementin bildirimi sırasında yapılabilir. metin
37
CSS3(Cascading Style Sheets) 1. Blok Düzeyi Elementleri Bloklar halinde alt alta gelecek bir biçimde görüntü oluşturur. Bu duruma blok denir., elementini bu duruma örnek verebiliriz. Marginleri vardır. Margin(Dış Boşluk) Blok düzeyi elementlerin bir ço ğ u kendisine atanan içeri ğ i görüntülerken bir dış boşluk bırakırlar.
38
CSS3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ ii kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.
39
CSS3(Cascading Style Sheets) Kutu Modelini Anlamak Bir elementin kutu modelinde margin(dış boşluk), padding(iç boşluk) ve border (çerçeve kalınlı ğ ı) ile tanımlanmaktadır.
40
CSS3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ i kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.
41
CSS3(Cascading Style Sheets) Dahili CSS Uygulaması
42
CSS3(Cascading Style Sheets) Harici CSS Uygulaması
43
CSS3(Cascading Style Sheets) Stilin bütün taglara uygulandı ğ ını görebiliyoruz.
44
CSS3(Cascading Style Sheets) Class tanımlaması yaparak istedi ğ imiz tagların farklı stiller almasını sa ğ lamış olduk
45
CSS3(Cascading Style Sheets) İ d tanımlaması ile tekil olma özelli ğ i ile farklı stiller oluşturmak için kullanılır
46
CSS3(Cascading Style Sheets) Not: Klavye den CTRL+K+D tuşlarına basar isek, web matrix kodların düzenini yeniden ayarlayarak do ğ ru hale getirir.
47
CSS3(Cascading Style Sheets) Padding: ustten başlar saat yönünde de ğ erler gireriz. Text-shahow: gölge için kullanılır. İ lk de ğ er gölgenin soldan ne kadar uzakta oldu ğ u, ikincisi Üstten ne kadar uzakta oldu ğ u, üçüncüsü koyulu ğ u ve son olarak renk işlemi yapılır.
48
CSS3(Cascading Style Sheets)
49
Solid: düz çizgi sa ğ lar Dashed: Kenarları kesikli yapar Dotted: Kenarları noktalı yapar Padding: boşluk olmasını istemedi ğ imiz bölümlere 0px girmemiz gereklidir. border-radius de ğ eri yükseklik ve genişlik de ğ erinin tam yarısı ise, resim daire haline gelir.
50
CSS3(Cascading Style Sheets) P elementine farklı farklı özellikler tayin edildi. Paragraf sayısı birden fazla olmalıdır:
51
CSS3(Cascading Style Sheets) Linklerin hover özelli ğ i
52
CSS3 AN İ MASYON Hover’ın animasyondan farkını görebiliriz.
53
CSS3 AN İ MASYON Transition: ◦ İ lk de ğ er: Div elementinin hangi özelliklerinde de ğ işiklik olacak ise ve ben hangilerinde olmasını istiyor isek onların isimlerini yazıyoruz. ◦ İ kinci de ğ er: süre ayarlaması ◦ Not: Elemente ait di ğ er özellikllerin de animasyon ile etkilenmesi için, transition komutuna “,” koyarak işleme devam edebiliriz
54
CSS3 AN İ MASYON
55
RES İ M GALER İ S İ UYGULAMASI
56
Transparan Uygulaması
57
Transparan Uygulaması(devam)
59
Overflow(TAŞMA)
60
HTML5 TAGLER İ İ LE S İ TE TASARIM
63
D İ SPLAY ÖZELL İĞİ P elementi
64
Display uygulamasının browser görüntüsü
65
Div ile Display Uygulaması
66
Div ile Display Uygulaması Browser Çıktısı
67
6.DERS
68
Box-Sizing Özelli ğ i: Kutu modelinde margin, padding ve border de ğ erleri kutunun Genişli ğ ine eklenerek esas genişlik de ğ erinin bulundu ğ unu ve kutuların genişli ğ inin Bu de ğ erlere göre de ğ işti ğ ini açıklamıştık. Burada bazı özelliklerin hesaba katılmayaca ğ ı durumdan bahsedece ğ iz.
69
Box-Sizing Browser Çıktısı
70
Uygulamayı Yapınız
71
Bir önceki uygulamanın cevabı
72
Uygulamayı yapınız
73
Bir önceki uygulamanın cevabı
74
Css Position nedir? nasıl kullanılır? Position de ğ erleri kullanılmadan yaptı ğ ımızda oluşan görüntüyü görmekteyiz.
75
Css Position nedir? nasıl kullanılır? 1-position:absolute; Görmüş oldu ğ unuz bu kutular float:left; komutu ile yan yana sıralanmış kutulardır. şimdi üçüncü kutuya position:absolute özelli ğ ini verelim ve neler olacak görelim. E ğ er kutuUc class’ımıza sadece position:absolute komutunu verirsek top ve left komutları otomatik olarak 0 de ğ eri alır ve bir üstteki div’i de position:relative; olarak de ğ erlendirir bu yüzden bulundu ğ u div’in sol üst başlangıç noktasına gider. Ama biz kutuUc divimizi istedi ğ imiz yere koymak istiyoruz o yüzden left: ve top: komutlarına de ğ erler verece ğ iz position:absolute; top:50px; left:300px; kutuUc’ün class’ına bu position:absolute; top:50px; left:300px; de ğ erini verdik burada top de ğ eri sayfanın en tepesinden başlar, left de ğ eri ise sayfanın en solundan başlar
76
Css Position nedir? nasıl kullanılır? 2-Position: relative; En önemli kısım burasıdır yani Position:relative. Relative komutu ilişkilendirme komutudur yaniPosition:relative. kutuUc’ü kutu div ile ilişkilendiriyoruz ve kutuUc div’inin başlangıç noktaları kutu div’i ile başlıyor. Hemen bir örnekte bu komut için verelim kutuUc div’inin bir üstündeki yani onu içine alan div’e position:relative; de ğ erini verece ğ iz sonra ise biz gene kutuUc div’i ile ilişkilendirerek yerleştirmemizi yapaca ğ ız.
77
Css Position nedir? nasıl kullanılır? 3-Position: fixed; Position:fixed; Position fixed verdi ğ imiz div çakılı bir şekilde orada kalıyor hiç bir şekilde oynama yapmıyor.Ama bu özelli ğ i ie6 desteklemiyor.
78
Menu Yapımı
79
Link Elementleri A:linkZiyaretten önce A:visitedZiyaretten sonra(hoverin tersi) A:hoverMouse üzerinde gezinirken A:activeZiyaret için tıklandı ğ ı sürece
80
Not Komutu
81
7.Ders
82
Üçgen Yapımı
83
Örnek Uygulama
84
Örnek Uygulama-Cevap
85
Örnek Uygulama
86
Örnek Uygulama-Cevap
87
9.Hafta
88
Örnek Uygulama-1 Yukarıda görülen kutuların üzerlerine mouse ile gelindi ğ inde kutuların width de ğ erlerinin hepsinde eşit oranda transition ile artmasını ve kırmızıdan farklı bir renge dönüşmesini sa ğ layınız. Mouse kutunun üzerinden ayrıldı ğ ında kutu yukarıda görüldü ğ ü gibi ilk halini almasını transition ile sa ğ layınız.
89
Örnek Uygulama-1 div { width: 100px; height: 100px; background-color: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s, background-color 2s; } div:hover { width: 300px; background-color: #d6d1d1; }
90
Örnek Uygulama-2 Sa ğ taraftaki resme mouse ile gelindi ğ inde resmin aldı ğ ı durumu görmekteyiz. Sol taraftaki resim ise, bu resimlerin ilk halini göstermektedir. İ ki resminde ilk hali bordersiz(kenarlık yok) ve opacity düşük de ğ erdedir. Yukarıdaki resimlerin üzerlerine gelindi ğ inde opacity de ğ erleri 1.0 ve border eklenecek şekilde ayarlayınız.
91
Örnek Uygulama-2 img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { opacity: 1.0; filter: alpha(opacity=100); border: 3px solid blue; } Transparan resimler 1.jpg 2.jpg
92
Örnek Uygulama-3 Bu siteyi HTML5 tagleri ile gerçekleştiriniz. Not:Soruda Aside tag'ı eklenmemiştir ve bütün taglar alt alta geldi ğ i için hesap yapmanııza da gerek yoktur. Burada dikkat edilmesi gereken noktalar; margin, padding, border ve background-color gibi özelliklerin yer almasıdır.
93
Örnek Uygulama-3
94
AN İ MASYON-1 UYGULAMASI
95
Animasyon-1 Ekran Çıktısı
96
Animasyon-2
97
Animasyon-2 Çıktısı
98
Animasyon Devam Bu tanımları örnek ile birlikte yazdı ğ ımızda bir sayfaya yakın bir kod yı ğ ını ortaya çıkmaktadır. Bu kod yı ğ ınını azaltmak için ve daha kısa kod yazmak için animation tanımı tanımları azaltabiliriz. Bu tanımlama ile animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation- direction, animation-delay tanımlarını tek bir tanım içine almış oluruz. Örne ğ imiz göz önüne alırsak;.canCanli { animation-name: gelsinGitsin; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 2; animation-direction: alternate; animation-delay: 5s; } Tanımı yerine.canCanli { animation: gelsinGitsin 2s ease-in-out 2 alternate 5s; } 6 satır kod tek satıra indi. Yukarıdaki sıra önemlidir; name, duration, timing function, count, direction, delay, and fill- mode. Her tanım birbirinden boşluk ile ayrılır. Sadece adı ve süresi yazılması gerekmektedir, di ğ er de ğ erler iste ğ e ba ğ lıdır.
99
Animasyon 3
100
Animasyon-4
101
Overlapping(Üst Üste Binme)
102
E ğ er katmanları istedi ğ imiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal de ğ er atamalıyız. Yüksek de ğ er alan katmanlar üstte düşük de ğ er alan katmanlar ise altta kalacaktır. Buna göre istedi ğ imiz görüntüyü elde etmek için z-index de ğ erleri vermeliyiz.
103
10.Hafta Jquery
104
1.Uygulama
105
1.Uygulama Cevap
106
2.Uygulama
107
3.Uygulama(HTML-Jquery)
108
4.Uygulama
109
5.Uygulama
110
6.Uygulama
111
7.Uygulama De ğ işken ve Fonksiyon Uygulaması
112
11.Hafta Jquery
113
8.Uygulama
114
9.Uygulama
115
10.Uygulama
116
11.Uygulama
117
12.Uygulama(Hide-Show)
118
13.Uygulama-hide(speed,callback) hiding/showing values: "slow", "fast", or milliseconds.
119
14.Uygulama(Toggle) Hide ve Show özelliklerinin bulundu ğ u bir fonksiyondur
120
15.Uygulama (CallBack)
121
Ornek-1 Çalışma
122
Ornek-1 Çalışma Cevap
123
12.Hafta
124
Dbclick() 16+ uygulama
125
jQuery Fading Methods fadeIn() fadeOut() fadeToggle() fadeTo()
126
jQuery Fading Methods jQuery fadeIn() Method Syntax: $(selector).fadeIn(speed,callback); Efekt süresince iste ğ e ba ğ lı olarak speed parametresini kullanabiliriz. Bu de ğ erler: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the fading completes.
127
jQuery Fading Methods jQuery fadeIn() Method 16.Uygulama
128
jQuery Fading Methods jQuery fadeIn() Method 17.Uygulama
129
jQuery Fading Methods jQuery fadeTo() Method 18.Uygulama
130
jQuery Sliding Methods With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle()
131
jQuery Sliding Methods 19.Uygulama
132
jQuery Sliding Methods 20.Uygulama
133
jQuery Sliding Methods 21.Uygulama
134
attr() Kullanımı Attr attributenin kısaltılmışı.Attribute html taglarındaki parametrelere verilen isim.Yani attr methodu ile parametre de ğ erlerini çekebiliriz veya atayabiliriz. İ lk önce de ğ er çekmekle başlayalım.De ğ eri şu şekilde alıyoruz..attr("parametre ismi"); var attr=$(".alan").attr("id");.alan clasına ait yerin id de ğ erini alıp attr adlı de ğ işkene atadık. Şimde de ğ er atamaya bakalım.2 şekilde atama yapıyoruz.Biri tek parametre için di ğ eri çoklu atama için.Tek atamayı şu şekilde yapıyoruz..attr("parametre ismi","parametre de ğ eri"); $(".alan").attr("id","cArleone"); Alan clasına ait taga id atadık de ğ eride cArleone yaptık.
135
attr() Kullanımı Çoklu atamayı şu şekilde yapıyoruz..attr({parametre ismi:"parametre de ğ eri",parametre ismi:"parametre de ğ eri",...}); var attr=$(".alan").attr({ id:"logo", name:"cArleone" }); Bu şekilde de çoklu parametre atamasını yapıyoruz.
136
attr() Kullanımı 22.Uygulama
137
Hover and Attr Kullanımı 23.Uygulama
138
jQuery Animations - The animate() Method Syntax: $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the animation completes. The following example demonstrates a simple use of the animate() method; it moves a element to the right, until it has reached a left property of 250px: Example $("button").click(function(){ $("div").animate({left: '250px'}); });
139
jQuery animate() - Manipulate Multiple Properties 24.Uygulama
140
Animate Komutu 25. Uygulama
141
26.Uygulama: Animate Toogle
142
13.HAFTA
143
SwitchCase ile İ f,Else, Else if Arasındaki Fark
144
Uygulama 27
145
28. Uygulama Webmatrix
146
29.Uygulama
147
14.HAFTA
148
30.Uygulama
149
Contains-resize 31.Uygulama
150
.Prop() Seçilen nesnenin alt özellklerine erişmemize yardımcı olur.Örnek Olarak aşa ğ ıdaki gibi bir checkbox ekiyoruz. $("#check1" ).prop( "checked"); Yukarıdaki örne ğ imiz ile checkbox’ımızın seçim de ğ erine erişebiliriz.Atama Olarak da key value mantı ğ ında aşa ğ ıdaki gibi atama işlemlerini yapabiliriz. $("#check1" ).prop( "checked",true);
151
32.Uygulama
152
Olay (Event) Web sayfasının cevap verebilece ğ i bütün farklı ziyaretçi eylemleri olay olarak tanımlanır. Bir olay, herhangi bir şey oluştu ğ u zaman, belirli bir hareketi temsil eder. Örnekler: Fareyi bir eleman üzerinde hareket ettirmek Bir radyo butonu seçmek Bir elemana tıklamak Aşa ğ ıdaki tabloda pek yaygın kullanılan DOM (Document Object Model) olaylarını görüyorsunuz:
153
Olay (Event) Olay metotları için yazılış biçimi jQuery'de, pek çok DOM olayı için, eşde ğ er bir jQuery metodu mevcuttur. Örne ğ in, bir sayfadaki bütün paragraflara bir tıklama (click) olayı atamak için aşa ğ ıdaki ifade kullanılabilir: $("p").click(); Bir sonraki adım ise olay meydana gelince (ateşlenince-fire) ne yapılması gerekti ğ ini tanımlamaktır: $("p").click(function(){ // Olay meydana gelince gerçekleştirilecek EYLEM });
154
Olay (Event) mouseenter(): mouseenter() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, fare imleci HTML elemanının üzerine gelince icra edilir. Aşa ğ ıdaki örnek kod, fare imleci bir elemanının üzerine gelince o elemanın gizlenmesini gerçekleştiriyor: $("#p1").mouseenter(function(){ alert("p1 uzerindesiniz!"); }); mouseleave(): mouseleave() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, mouse göstergesi HTML elemanının üzerini terk edince çalıştırılır. $("#p1").mouseleave(function(){ alert("p1 elemanından çıktınız!"); });
155
Olay (Event) mousedown(): mousedown() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, mouse göstergesi HTML elemanının üzerinde iken mouse sol tuşuna basılınca çalıştırılır. Örnek kodu aşa ğ ıda inceleyebilirsiniz: $("#p1").mousedown(function(){ alert(" p1 üzerinde fare sol tuşuna basılıyor!"); }); mouseup(): mouseup() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, fare imleçi HTML elemanının üzerinde iken fare sol tuşu serbest bırakılırsa çalıştırılır. $("#p1").mouseup(function(){ alert("p1 üzerinde fare serbest bırakılıyor!"); });
156
Olay (Event) hover(): hover() fonksiyonu, mouseenter() ve mouseleave() fonksiyonlarının bir kombinasyonunu oluşturur; fare HTML elemanı üzerine gelince ilk fonksiyon, elemanı terk edince de ikinci fonksiyon çalışır. Örnek kodu aşa ğ ıda inceleyebilirsiniz: $("#p1").hover(function(){ alert("p1 elemanına girdiniz!"); }, function(){ alert("p1 elemanını terk ettiniz!"); });
157
Olay (Event) focus(): focus() metodu, bir HTML form elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, HTML form alanı aktif hale gelince çalıştırılır. Alttaki örne ğ i dikkatle inceleyelim: $("input").focus(function(){ $(this).css("background-color","#ccffff"); }); blur(): blur() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu ba ğ lar. Fonksiyon, fare HTML form alanı aktif halden çıkınca çalıştırılır. $("input").blur(function(){ $(this).css("background-color","#eeffff"); });
158
İ çeri ğ e Erişme - text(), html(), and val() Üç adet basit fakat çok faydalı metot sayesinde jQuery, DOM elemanlarını manipüle edebilir: text() – seçilen elemanların metin içeriklerine atama yapar veya onlara erişerek işlem yapar. html() – HTML işaretçileri de dâhil, seçilen elemanların içeri ğ ini atar ya da onlara erişir. val() – Form alanlarının de ğ erine erişir veya onlara atama yapar. Aşa ğ ıdaki örnek, içeriklere text() ve html() metotları ile nasıl erişilece ğ ini gösteriyor: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Aşa ğ ıdaki örnekte ise jQuery val() metodu ile bir input alanına nasıl erişilece ğ i görülmektedir: $("#btn1").click(function(){ alert("Value: " + $("#test").val()); });
160
34. Uygulama
161
Cevap
162
jQuery Callback Fonksiyonları Bir geriça ğ ırma (callback) fonksiyonu, mevcut efekt %100 tamamlandıktan sonra icra edilen bir fonksiyondur. JavaScript deyimleri satır satır icra edilir. Bununla beraber, kodun bir sonraki satırı efekt sona ermeden icra edilebilir; bu da hatalar oluşturur. Bunu önlemek için bir geriça ğ ırma fonksiyonu oluşturabilirsiniz. Bir geriça ğ ırma fonksiyonu mevcut efekt bittikten sonra icra edilir.
163
jQuery Callback Fonksiyonları
164
Animate
165
Not: Sınav sırasında internet ba ğ lantısı olmayaca ğ ı için; Jquery dosyasını sunucudan alabileceksiniz ve son olarak script src=https://ajax.googleapis.com/ajax/libs/jq uery/1.11.3/jquery.min.jshttps://ajax.googleapis.com/ajax/libs/jq uery/1.11.3/jquery.min.js ayarlamasını yapabilirsiniz.
Benzer bir sunumlar
© 2024 SlidePlayer.biz.tr Inc.
All rights reserved.