jquery ile input text copy-paste engelleme-yasaklama

Çokça karşımıza çıkabilecek uygulamalardan biridir aslında.Onun için kodlarını sizlerle paylaşmak isterim.Input textler içinden kopyalama-yapıştırma işlemini aşağıda ki kodlarla engelleyebilirsiniz.Ama unutmayın; birisi illada kopyalamak veya yapıştırmak isterse türlü türlü hilelerle istediğini gerçekleştirebilir.


    $('input[name="hoca_adi"]').bind('paste', function(){return false;})
    $('input[name="hoca_adi"]').bind('copy', function(){return false;})
    $('input[name="hoca_sicilno"]').bind('paste', function(){return false;})
    $('input[name="hoca_sicilno"]').bind('copy', function(){return false;})

Javascript Hata bulma

Javascript yazarken bazen çakışmalar, tanımsız değerler olabilir ve compile hatası vermez.Bu Kodlar yardımıyla hangi satırda hangi hatanın var olduğunu öğrenebilirsiniz.

window.onerror = function(message, url, lineNumber) 
{
    alert(url + " dosyasında + " + lineNumber + ".satırda bir hata oluştu : " + message);
};

javascript nesnel yaklaşım

Merhaba arkadaşlar bu makalemizde sizlere javascript’e nesnel yaklaşımdan bahsedeceğim.Diğer dillerde olduğu gibi Class tanımlama işleminden başlayarak devam edelim.

function mahmut(){
}

Gördüğünüz gibi class tanımlamasını normal bir function tanımlaması gibi yaparak başlıyoruz.Daha sonra mahmut adlı bu class ın bir kopyasını alarak devam ediyoruz.Class kullanmaya başlamak için aşağıdaki kod blogunu kullanıyoruz.

var muhterem=new mahmut();
Evet gördüğünüz gibi “mahmut” class’ından “muhterem” adında bir kopya oluşturduk.Daha sonra ki kullanımlar da sürekli “muhterem ” kelimesini kullanacağız.Ama ilk tanımladığımız “mahmut” nesnesinin içi boş.Şimdi bu nesnenin içine bir kaç tane değişken tanımlayalım ve bunlara ulaşmayı deneyelim.
Kodlar aşağıda ki gibi olacak.

function mahmut(){
this.ad="mahmut";
this.yas="30";
this.il="Erzurum";
var soyad="aydın";
this.sonuc=ad+this.soyad;
}

Evet nesnemizin içini sadece değişkenlerle doldurduk ama şimdi bu değişkenlere ulaşmaya çalışalım.Şu şekilde ulaşabileceğiz.

var muhterem=new mahmut();
alert(muhterem.ad)//mahmut;
alert(muhterem.yas)//30;
alert(muhterem.il)//Erzurum;
alert(muhterem.soyad)//undefined
alert(muhterem.sonuc)//mahmutaydın;

Gördüğünüz gibi değişkenler eğer this ile refere edilmişse “public” olarak tanımlandığı için dışarıdan ulaşabiliriz ancak var ile tanımlanıp refere edilmişseler “private” oldukları için dışarıdan erişilemez ve sadece nesne içinde ulaşılabilir.Bu şekilde nesne içinde değişken tanımlama ve erişme işlemlerini hallettikten sonra basitçe metodlara girelim.
Şimdide “mahmut” nesnesinin içine metod(fonksiyon) ekleyelim ve dışarıdan ulaşalım.Şu şekilde olması gerekir.

function mahmut(){
this.ad="mahmut";
this.yas="30";
this.il="Erzurum";

this.merhaba_de=function()
{
return 'merhaba';
}
}

Kullanımı ise şu şekilde olması gerekir:

var muhterem=new mahmut();
alert(muhterem.merhaba_de())

Evet değerli arkadaşlar bu dersimizde basitce nesne tabanlı js yazmanın temellerini attık.Başka bir derste görüşmek üzere hoşçakalın.

Not: Alıntıdır.http://www.aydinmahmut.com/javascript-nesnel-yaklasim/

Equals ve Eşittir Karşılaştırma Operatörleri Arasındaki Farklar Nelerdir?

(==) ve Equals() methodları’nın ikisi de farklı 2 değeri karşılaştırmak için kullanılır. (==) operator’ü 2 nesneyi karşılaştırırken, Equals() methodu nesnenin içerdiği string’i karşılaştırır. Yani kısaca (==) operatörü 2 nesnenin referans değerlerini karşılaştırırken Equals() methodu sadece içeriği karşılaştırır.
*Null değer atanmış değişkeni Equals() methodu ile karşılaştıramayız ve hata döner. Çünkü bakılacak bir content yoktur.

*Code behind’da eğer sadece içeriğe bakılacak ise (==) operatör’ü yerine Equals() methodu kullanılmalıdır. Ama null kontrolü yapılması şarttır.

*Aynı şekilde Javascript’de işler biraz değişmekte ve (==) operatörü bu sefer nesnelerin içerdiği string’leri karşılaştırmaktadır. Aynı şekilde (===) operatörü ise içerik yerine nesnelerin kendisini kıyaslamaktadır.

Jquery Ajax GET ve POST arasındaki farklar

POST ile GET arasındaki fark jQuery ile ilgili değil HTTP ile ilgilidir.

Bildiğiniz gibi web uygulamaları request – response denilen istek – cevap mantığı ile çalışırlar. HTTP yedi adet request yani istek tipi tanımlar.

1- GET
2- POST
3- PUT
4- TRACE
5- DELETE
6- HEAD
7- OPTIONS

Metodlar arasında bazı farklar vardır ve kullanım yerleri farklılık gösterir. Tarayıcılar nadiren GET ve POST yöntemleri dışındaki diğer HTTP yöntemleri ile ilgilenir. Örneğin dosya yüklemede (file upload) kullanılan PUT yöntemi yerine MIME veri tipleri ile POST yöntemi ile aynı iş yapılabilir. Çoğu web uygulaması sadece GET ve POST yöntemlerini kullanır.

HTTP’de sunucuya gidebilecek çeşitli istek türleri/metotları bulunur. Bunlar GET, POST, HEAD, DELETE (…) gibi türlerdir.

Get methodu kullanıldığında istekler adres satırında görüntülenir. Gönderilen bilgiler adres çubuğunda görüntülendiği için güvenliği düşük bir yöntemdir ancak daha hızlıdır. Web’te varsayılan yöntemdir.

http://www.cemelma.wordpress.com/index?ad=cem

Post metodu ise adres satırında görüntülenmesi istenmeyen istekler gönderildiğinde kullanılır. Gönderilen bilgiler adres satırında görünmediği için daha güvenlidir ancak Get methoduna göre daha yavaştır. Yani POST durumunda form alanları HTTP REQUEST HEADER içinde kodlanmış olarak gider, adres satırında çıkmaz. Post işleminde her türlü dosyayı post edebiliriz xml,image, file post edebiliriz.

Get metodu sunucudan veri çekmek için tasarlanmış bir metodtur. Post,Put,Delete ise sunucudaki veriyi düzenlemek için tasarlanmıştır. Get metodu sunucudaki veriyi düzenlemek/silmek için kullanılmamalıdır. Örneğin eğer bir veriyi silmek için Get yöntemi kullanan bir bağlantı (link) kullanırsanız, Google bot sitenizi tararken “silme linki”ne bol bol tıklayarak tüm verilerinizi rahatlıkla silebilir.

GET isteğinde belirli bir karakter sayısı sınırı varken (512) POST isteğinde böyle bir sınır yoktur. Örneğin formda bir textarea/ varsa POST kullanmak gerekir, aksi taktirde textarea/ içine yazılan metnin bir kısmı gitmeyebilir.

//Post methodu bu şekilde kullanılabilir

$.post(“@Url.Action(“action”, “controller”)”,{ id: id }, function (data) {

});

XMLHttpRequest ile Resim Kaydetme

Resim yükleyip göstermek istediğimizde sayfada tekrar yükleme yapılmasını istemediğimiz durumlarda aşağıdaki yapıyı kullanabiliriz.

Controller;

[HttpPost]
public JsonResult Upload(string Url)
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i]; //Uploaded file
//Use the following properties to get file's name, size and MIMEType
int fileSize = file.ContentLength;
string fileName = file.FileName;
string mimeType = file.ContentType;
System.IO.Stream fileContent = file.InputStream;
//To save file, use SaveAs method
file.SaveAs(Server.MapPath("~/Content/") + fileName); //File will be saved in application root
}
return Json("Uploaded " + Request.Files.Count + " files");
}

Script;
<script>
 $(document).ready(function () {

 $("#fileInput").change(function () {
 var formdataDP = new FormData();
 var fileInputDP = document.getElementById('fileInput');
 if (fileInputDP.files.length > 0) {
 for (i = 0; i < fileInputDP.files.length; i++) {
 formdataDP.append(fileInputDP.files[i].name, fileInputDP.files[i]);
 }
 var xhr1 = new XMLHttpRequest();
 xhr1.open('POST', '@Url.Action("Upload", "Home")');
 xhr1.send(formdataDP);
 xhr1.onreadystatechange = function () {
 if (xhr1.readyState == 4 && xhr1.status == 200) {
 $("#profileimage").attr("src", "@Url.Content("~/Content/")" + fileInputDP.files[0].name);
 }
 }
 }
 else { alert("lutfen_bir_dosya_seciniz"); }
 });

 });
</script>

Style;
<style type="text/css" media="screen">
.third-effect .mask{ position: absolute;overflow: hidden;top: 0;left: 0;}
.third-effect img { display: block;position: relative;}
.third-effect a.info { background:url(@Url.Content("/images/upload.png")) center no-repeat;display: inline-block;text-decoration: none;padding:0;text-indent:-9999px;width:90px;height:90px;}
.third-effect { float: left;overflow: hidden;position: relative;text-align: center;box-shadow: 0px 0px 5px #aaa;cursor: default;}
.third-effect .mask { width: 90px; height: 90px; opacity: 0; overflow:visible;border:39px solid rgba(0,0,0,0.7);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.third-effect a.info { left: -39px; position:relative;top:-39px;opacity: 0;-webkit-transition: opacity 0.5s 0s ease-in-out;-moz-transition: opacity 0.5s 0s ease-in-out;-o-transition: opacity 0.5s 0s ease-in-out;-ms-transition: opacity 0.5s 0s ease-in-out;transition: opacity 0.5s 0s ease-in-out;}
.third-effect:hover .mask { opacity: 1;border:39px solid rgba(0,0,0,0.7);}
.third-effect:hover a.info { opacity:1;-moz-transition-delay: 0.1s;-webkit-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay: 0.1s;}
#fileInput{width: 90px;height: 90px;z-index: 100;position: absolute;left: 0px;top: 0px;-webkit-appearance: none;opacity: 0;}
</style>

CSHTML
<div class="third-effect">
 <img id="profileimage" src="" width="90" height="90" style="cursor: pointer">
 <div class="mask" style="cursor: pointer">
 <a href="#" class="info"><input name="fileInput" id="fileInput" type="file" /></a>
 </div>
</div>

JS Dosyalarında Localization Resource Textleri kullanma

Bilindiği gibi js dosyalarının içerisinden direk resource içerisindeki bir tanımlamaya  ulaşıp içerisindeki değerleri alınamıyor. Bunun için kullandığım yapı şu şekildedir. Öncelikle sayfa script dosyamızın yükleneceği sayfada(cshtml) üzerinde resource dosyasındaki değerleri okuyup global değişkenlerimde tutuyorum aşağıdaki gibi

<script type="text/javascript">
var resourcedangelendeger = "@Html.Raw(GeneralRess.GeneralStrings.s_enaz_bir_parametre_secmelisiniz)";
</script>

Tanımlamamdan daha sonra ise js file dosyasını ekliyorum.

<script src="@Url.Content("~/Scripts/customScript.js")" type="text/javascript"></script>

Script Dosya içerisinde ise global olarak tutulan değişkenimdeki değerleri okuyabiliyorum. Script dosya içerisinde alert ile resourcedaki değeri ekranda gösterelim.

$(document).ready(function () {
    alert(resourcedangelendeger);
});

JS ile şifre güvenlik düzeyi kontrolü

Kullanıcı şifrelerinin çözülmesini zorlaştırmak için ne kadar karışık bir şifre verilirse o kadar güvenli olacaktır, girilen şifrenin ne kadar güçlü olduğunu jquery ile kontrol edebiliriz.

var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (strongRegex.test($(this).val())) {
    $('#passstrength').removeClass();
    $('#passstrength').addClass("alert-success strong");
    $('#passstrength').html('Güçlü');
} else if (mediumRegex.test($(this).val())) {
    $('#passstrength').removeClass();
    $('#passstrength').addClass("alert-info medium");
    $('#passstrength').html('Orta');
} else {
    $('#passstrength').removeClass();
    $('#passstrength').addClass("alert-error weak");
    $('#passstrength').html('Zayıf');
}
/pre>

Width ve Height’e göre auto font-size

Bazen sabit boyutlu bir div,span vs. içerisindeki textlerin font-size’larının widthe göre otomatik ayarlanmasına ihtiyaç duyabiliriz. Bunun için;

Html
<div id="fitin">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Css
#fitin {
 width: 500px;
 height: 100px;
 overflow: hidden;
 font-size: 1em;
}

JS
$(function() {
 while( $('#fitin div').height() > $('#fitin').height() ) {
 $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
 }
});