jQuery Sunucusunda Buton Ekleme, Site içi Buton Mesajı ve Butonu Özelleştirme İşlemleri Nasıl Yapılır? HTML Açıklama Satırı Ne işe yarar ve Nasıl Kullanılır? Part #6 | Turkish Video Tutorial

in #utopian-io8 years ago (edited)

Ne öğreneceğim?

  • jQuery sunucusu üzerinde, tam buton kurulumu için gereken kodların (input, type, value,click) hangi kodlarla nasıl kullanılacağını öğreneceksiniz.
  • jQuery localhost sunucusu üzerinde, NotePad++'da yazılan kodları HTML Açıklama Satırı özelliğiyle (< !-- kodlar -->) nasıl kullanılacağını öğreneceksiniz.
  • jQuery sunucusu üzerinde oluşturduğumuz butonun üzerindeki yazıyı düzenlemeyi, butona basıldığında uyarı mesajı çıkartmayı ve çıkan uyarı mesajındaki mesajı nasıl düzenleyeceğinizi öğreneceksiniz.

Gereksinimler

  • jQuery 3.3.1.min.js
  • MySQL 5.7.17 (full veya developer serisi)
  • XAMPP Server
  • Javascript destekli bir Internet Tarayıcısı
  • Filezilla (Şu anlık sunucunun çalışması için)
  • Notepad++
  • Ortalama bir bilgisayar

Zorluk

  • Orta düzey

Açıklama

Merhaba arkadaşlar, eğitimimizin bu bölümünde, HTML Açıklama satırı ile istediğimiz kodları, diğer kullanıcılardan gizlemeyi ve buton ekleyip, eklediğimiz butonun hem yazısını hemde özelliklerini nasıl istediğimiz gibi özelleştirebileceğimizi uygulamalı olarak öğreneceksiniz. Butonumuzun üzerindeki yazıyı belirledikten sonra, tıklandığı takdirde önümüze bir uyarı mesajı çıkarması için (alert).('yazilacakmetin') komutundan yararlandık. Bu eğitimimizde 2 konuya değindik fakat, yaklaşık 5-6 tane kodun kullanımı ve bağlantıları ile ilgili teknik bilgileri uygulamalı olarak gösterdim. Eğitim serimiz orta düzeyden zora doğru ilerleyecektir.
Videoda anlatılan tüm programlar (jQuery, FileZilla, Notepad++, XAMPP Server, MySQL) açık kaynak kodludur ve hepsinin github repository'leri bağlantılar kısmında yer almaktadır. Dilerseniz bu programların web sayfalarına ve Windows için direkt indirme bağlantılarına bağlantılar bölümünden erişebilirsiniz.

Eğitimde kullanılan kodlar;

<html lang="tr">
<head>
    <meta charset="utf-8">
    <title>Sargoon Utopian jQuery Egitim Serisi</title>
<head>

<body>

         
   <­!-- <p id="mesaj"> Kaydol </p> -->
   <!­-- <input id="al" type="text" value="Başarıyla Kayıt Oldunuz"> -->
      
    <input id="click" type="button" value="Kaydol">


<script type="text/javascript" src="js/jqueryders.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>

$('#click').click(function() {
    
    alert('Başarıyla Kayıt Oldunuz');
    
});


/*var ad = $('#text').text();
alert(ad);
*/

</script>
</body>
</html> 


Video Tutorial

Müfredat

Part 1: jQuery Kurulumu Nasıl Yapılır? Kurulumdan sonra Localhost Sunucusuna erişim için Filezilla ve XAMPP Server'da hangi ayarlar yapılmalı? Notepad++ üzerinden sunucu bağlantı kontrolü nasıl yapılır? Part #1 | Turkish Video Tutorial

Part 2: jQuery Localhost Sunucusuna Kodlarla Yazı-Paragraf Nasıl yazılır? Site kaynak adı nasıl düzenlenir? Part #2 | Turkish Video Tutorial

Part 3: jQuery Localhost Sunucusu üzerinde kodlarla nasıl resim eklenir?Alert komutu nasıl kullanılır? Part #3 | Turkish Video Tutorial

Part 4: jQuery Localhost Sunucusunda FadeIn Komutu Nasıl Kullanılır? document.ready komutu Nasıl Kullanılır? Part #4 | Turkish Video Tutorial

Part 5: jQuery Localhost sunucusu için Notepad++ üzerinde var count, a href ve input komutları aynı sayfa içinde Nasıl Kullanılır? Part #5 | Turkish Video Tutorial

Bağlantılar



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @sametceylan, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Hey @sargoon I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x