Kod düzeyinden hallice işler...: JavaScript

JavaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

14 Şubat 2011 Pazartesi

JavaScript Methods Samples

Dropdownlist ten dizin ya da değer alma method örneği;

function getValues(){
var dd = document.getElementById('dropdown');
theindex = dd.options[dd.selectedIndex].value;
thevalue = dd.options[dd.selectedIndex].text;
var span = document.getElementById('span1');
span.innerHTML = '  Selected Index: ' + theindex + 
 ', Selected Value: ' + thevalue
}

Seçilen değerde hangisi işaretli hangisi işaretsiz onu algılayan method örneği;

function getchk(val){
var output = 'You clicked ' + val + ' Selected: ';
for(var i = 0; i < document.forms[0].check.length; i++){
 if(document.forms[0].check[i].checked)
 output += document.forms[0].check[i].value + ' ';
 }
document.getElementById('span2').innerHTML = output;
}
 
Textbox a girilen yazı ve rakam değerlerini gösteren method örneği;
 
function getText(){
var txt = document.getElementById('txt');
var output = txt.value;
var length = output.length;
document.getElementById('span3').innerHTML = 'Count: ' + length
 + ' Text: ' + output;
}

12 Kasım 2010 Cuma

Javascript'de Captcha Kod Yaratma...

İlgimi çeken bir konu olmuştur her zaman javascript te olması da ayrı bir zevk açıkcası.

Öncelikle Bir Asp.Net Web Site oluşturuyoruz. Default.aspx e yazılacak kod bölümü;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

var a = 49, b = 65;

var c = 100;

var d = 70;

function show() {

if (a == 57) {

a = 49;

}

var main = document.getElementById('txt1');

var a1 = String.fromCharCode(a);

var b1 = String.fromCharCode(b);

var c1 = String.fromCharCode(c);

var d1 = String.fromCharCode(d);

main.value = a1 + b1 + c1 + d1;

a = a + 1;

b = b + 1;

c = c + 1;

d = d + 1;

}

</script>

#form1

{

height: 95px;

}

</style>

</head>

<body>

<div>

<input type="text" id="txt1" runat="server"

style="border-style: none; border-color: inherit; border-width: medium; background-color:black; color:red; font-family: 'Curlz MT'; font-size: x-large; font-weight: bold; font-variant: normal; letter-spacing: 10pt; width: 120px; background-image: url('glitter_background_b4.gif');"

value="4e5yt" />

</div>

<asp:TextBox ID="txtverification" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Verification"

onclick="Button1_Click" />

<asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>

</form>

</body>

</html>

Cs tarafında yazılacak kodlar;

protected void Button1_Click(object sender, EventArgs e)

{

if (txtverification.Text == txt1.Value)

{

lblmsg.Text = "Successful";

}

else

{

lblmsg.Text = "Failure";

}

3 Kasım 2010 Çarşamba

JavaScript Kullanarak ListBox da Arama yapmak

<title>SearchList</title>

</head>

function SearchList()

{

var l = document.getElementById('<%= ListBox1.ClientID %>');

var tb = document.getElementById('<%= TextBox1.ClientID %>');

if(tb.value == "")

{

ClearSelection(l);

}

else{

for (var i=0; i < l.options.length; i++)

{

if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase()))

{

l.options[i].selected = true;

return false;

}

else

{

ClearSelection(l);

}

function ClearSelection(lb)

{

lb.selectedIndex = -1;

}

</script>

<body>

<asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />

<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">

<asp:ListItem>Ali</asp:ListItem>

<asp:ListItem>Veli</asp:ListItem>

<asp:ListItem>Kır</asp:ListItem>

<asp:ListItem>Dokuz</asp:ListItem>

<asp:ListItem>Elli</asp:ListItem>

</asp:ListBox>

</form>

</body>

</html>

26 Ekim 2010 Salı

JavaScript'te trim fonksiyonunu kullanmak

Görevi, stringin baş ve sonundaki boşlukları temizlemekten ibaret olsa da pek çok programlama dilinin hayat kurtaran fonksiyonlarından biridir trim(). Ne yazık ki JavaScript'te bu fonksiyon bulunmuyor. Biz bu yazıda JavaScript'e bu fonksiyonu ekleyeceğiz.

I.Yöntem

String.prototype.trim = function() {
s = this.replace(/^\s+/, "");
return s.replace(/\s+$/, "");
};

II.Yöntem

String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
};

Her iki fonksiyonu da " sağ ve soldaki boşluklar silinecek ".trim() şeklinde kullanabiliriz.

29 Eylül 2010 Çarşamba

Javascript ve Regular Expressions

Bu yazımda javascript ile regular expression kullanımından bahsedeceğim. Regular expression ile herhangi bir değeri kontrol edip, bu değerin belirlediğimiz formata uygun olup olmadığını veya bu değerin belirlediğimiz formata dönüşmesini sağlayabiliriz. Visual Studio ile bu kontrolü validation bölümündeki kontroller ile rahatlıkla yapabiliriz. Ancak bu kontrolü kendimiz javascript ile de yapabiliriz. Böylece yaptığımız uygulamaya daha da hakim oluruz.

Ben bu konuda basit bir örnek yaptım ve sayfada bulunan bir textbox değerini alıp bu değeri regular expression ile kontrol edip belirli formatlara uyup uymadığını kontrol ettim. Bu formatlar ise; email formatı, sadece rakam formatı ve sadece metin formatı. Bunların dışında ihtiyaç duyduğumuz formatları belirleyip konrol edebiliriz. Mesela textbox değerinden html formatta bilgi alacaksak bu değerdeki html tagların neler olacağını bu yöntemle belirleyebiliriz. Dediğim bu uygulama birçok blogda yorum ekleme bölümünde kullanılıyor.

Verdiğim örneğin kodlarına bakacak olursak:

Görüldüğü gibi bu kodar ile girilen değerin rakam mı, metin mi veya email formatın da mı olduğunu kontrol ediyorum. İhtiyacınıza göre format belirleyip bu şekilde kullanarak kullanıcıların kontrolleri doğru ve hatasız şekilde kullanmasını sağlayabiliriz.

İyi Çalışmalar!

Kaynak: http://www.mehmetduran.com/Blog/Makale.html/Javascript-ve-Regular-Expressions/106

Kod düzeyinden hallice işler...