{"id":205,"date":"2013-10-01T14:26:36","date_gmt":"2013-10-01T14:26:36","guid":{"rendered":"https:\/\/www.templatemonster.com\/tr\/blog\/?p=205"},"modified":"2020-02-26T11:09:21","modified_gmt":"2020-02-26T11:09:21","slug":"jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/","title":{"rendered":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme"},"content":{"rendered":"<p>Kay\u0131t formlar\u0131 genellikle web sitelerinin ortak bir par\u00e7as\u0131. Kay\u0131tl\u0131 kullan\u0131c\u0131lar kazan\u0131yor bloglar, webapps, sosyal a\u011flar ve web siteleri i\u00e7in daha onlarca yarar sa\u011flayabilir. <strong>Dinamik jQuery efektleri<\/strong>\u00a0 kullan\u0131c\u0131lara olduk\u00e7a pratik yol g\u00f6sterici kapsaml\u0131 deneyim i\u00e7in faydal\u0131 olabiliyor. \u00a0Bu a\u015famalardan biriside \u0130nternet korsanl\u0131\u011f\u0131n\u0131 \u00f6nlemek a\u00e7\u0131s\u0131ndan yeterince kar\u0131\u015f\u0131k ve benzersiz \u015fifreler \u00fcretmek gerekebilir.<\/p>\n<p>Bu e\u011fitim i\u00e7in ben Passy adl\u0131 a\u00e7\u0131k kaynak kodlu bir jQuery eklentisinin g\u00fcc\u00fcn\u00fc g\u00f6stermek istiyorum. \u00a0Bu parola \u00fcretimi ve karma\u015f\u0131kl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan test yapabilece\u011fimiz iki ana fonksiyon ile birlikte gelir.\u00a0\u00a0Uzunluk, karakter t\u00fcrleri, harf ve di\u011fer benzer \u00f6zellikleri kontrol etmek i\u00e7in \u00f6zel parametreler den olu\u015fan listeler bulunur. \u00a0Fakat, Passy kendi \u00f6zel ayarlar\u0131 ile ilgili bir tak\u0131m kodlama olmadan da kullan\u0131labilir. \u00a0 Benim \u00f6rnek dosyam\u0131 inceleyin ve kodlar\u0131 kopyalamak i\u00e7in l\u00fctfen \u00e7ekinmeyin.<\/p>\n<p><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/demo-password-generation-rating\/index.html\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" alt=\"password generation and testing\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/password-passy-tutorial-preview-demo.png?9d7bd4\" \/><\/a><\/p>\n<p><strong><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/demo-password-generation-rating\/index.html\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Canl\u0131 \u00a0Demo<\/a><\/strong> \u2013 <strong><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/password-generation-rating-source-codes.zip?9d7bd4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Kaynak Kodunu indir<\/a><\/strong><\/p>\n<h3>Sayfa Olu\u015fturma<\/h3>\n<p>\u00d6ncelikle temel HTML dosyas\u0131 kurulum ve Passy eklentisinin bir kopyas\u0131n\u0131 y\u00fcklememiz gerekir. \u00a0Bunun i\u00e7in en son jQuery k\u00fct\u00fcphanesinin bir kopyas\u0131 ile birlikte tek bir JS dosyas\u0131 gereklidir. Asl\u0131nda olduk\u00e7a k\u00fc\u00e7\u00fck, resmi bir Github repo Passy bir kopyas\u0131d\u0131r.\u00a0Zip ar\u015fivi i\u00e7erisinde sadece beni oku ile birlikte JS dosyas\u0131n\u0131 i\u00e7ermektedir.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/td>\n<td>\n<pre>&lt;!doctype html&gt;\r\n&lt;html lang=\"en-US\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;meta http-equiv=\"Content-Type\" content=\"text\/html\"&gt;\r\n  &lt;title&gt;Dynamic Password Generation &amp; Rating Demo&lt;\/title&gt;\r\n  &lt;meta name=\"author\" content=\"Jake Rocheleau\"&gt;\r\n  &lt;link rel=\"shortcut icon\" href=\"http:\/\/www.templatemonster.com\/favicon.ico\"&gt;\r\n  &lt;link rel=\"icon\" href=\"http:\/\/www.templatemonster.com\/favicon.ico\"&gt;\r\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"css\/styles.css\"&gt;\r\n  &lt;script type=\"text\/javascript\" src=\"js\/jquery-1.10.2.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script type=\"text\/<a href=\"http:\/\/blog.templatemonster.com\/category\/javascript\/\" target=\"_blank\">javascript<\/a>\" src=\"js\/<a href=\"http:\/\/blog.templatemonster.com\/category\/jquery\/\" target=\"_blank\">jquery<\/a>-passy.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Tasar\u0131m stillerini, t\u00fcm bu ana HTML dosyalar\u0131n\u0131n alt k\u0131sm\u0131na eklemek gerekir ve \u00f6zel jQuery kodu yaz\u0131l\u0131r. JS eklenti kodunu anlamak i\u00e7in ve \u00f6zelle\u015ftirmek i\u00e7in herhangi bir zorluk i\u00e7ermez gayet kolayd\u0131r. \u00a0Bende genel sayfa tasar\u0131m\u0131n\u0131 \u015fekillendirebilmek ad\u0131na kendi sitillerimi dahil ettim.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8<\/pre>\n<\/td>\n<td>\n<pre>&lt;div id=\"someform\"&gt;\r\n    &lt;input type=\"password\" name=\"password\" id=\"input\" class=\"basictxt\" placeholder=\"Type your password\"&gt;\r\n\r\n      &lt;span id=\"output\"&gt;...&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;a href=\"#\" id=\"generate\" &gt;Generate Password&lt;\/a&gt;\r\n  &lt;input type=\"text\" id=\"generatedpw\"&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Sayfa b\u00fcnyesinde bu HTML kodlar\u0131n\u0131n saklanmas\u0131 i\u00e7in herhangi bir y\u00f6ntem gerekmez. \u00a0Bu de\u011fer niteli\u011finde eklenir \u00e7\u00fcnk\u00fc, bir giri\u015f alan\u0131 ve parolalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131labilir. Di\u011fer tek y\u00f6ntem daha sonra HTML i\u00e7inde \u015fifre \u00a0\u00fczerine kopyalan\u0131r, gizli bir giri\u015f \u00fczerinde \u00fcretimi ge\u00e7erli olacakt\u0131r. \u00a0Biraz daha k\u0131vr\u0131k, ama PW \u00fcretimi i\u00e7in tek bir giri\u015f i\u00e7in ba\u015fka bir \u015fey gerekiyorsa bu yararl\u0131 olacakt\u0131r.<\/p>\n<p>Sayfan\u0131n en \u00fcst\u00fcnde bizim taraf\u0131m\u0131zdan olu\u015fturulan ba\u015fka bir span \u00f6\u011fesi ile tipik bir \u015fifre giri\u015fi vard\u0131r. \u00a0Bu bekleme s\u00fcresi canl\u0131 Passy'nin demo ayar\u0131d\u0131r ID no \u00e7\u0131k\u0131\u015f\u0131 kullan\u0131larak hedeflenmektedir.<\/p>\n<h3>Tasar\u0131m Sitilleri<\/h3>\n<p>Benim \u00f6rnek demom dahil, ger\u00e7ekten harika baz\u0131 \u00f6zel tasar\u0131mlarda vard\u0131r. \u00a0\u00c7e\u015fitli s\u0131n\u0131flar\u0131n bir \u00e7o\u011funu g\u00f6rmek i\u00e7in benim haz\u0131rlad\u0131\u011f\u0131m styles.css stil dosyam\u0131 kontrol edebilirsiniz. \u00a0\u00d6zellikle ben @import deneyimini kullanarak tek bir Google Web Font API dosyas\u0131n\u0131 dahil ettim.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38<\/pre>\n<\/td>\n<td>\n<pre>.btn { \r\n  display: inline-block;\r\n  margin: 2px;\r\n  padding: 0px 15px 3px;\r\n  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));\r\n  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));\r\n  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));\r\n  background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));\r\n  background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));\r\n  background-color: #659ae0;\r\n  vertical-align: middle;\r\n  font: italic 14px\/32px Georgia,Serif;\r\n  text-align: center;\r\n  color: #fff;\r\n  text-decoration: none;\r\n  text-shadow: 0px 1px 0px rgba(0,0,0,0.15);\r\n  -webkit-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);\r\n  -moz-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);\r\n  box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);\r\n  -webkit-border-radius: 5px;\r\n  -moz-border-radius: 5px;\r\n  border-radius: 5px;\r\n}\r\n.btn:hover {\r\n  color: #fff;\r\n  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));\r\n  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));\r\n  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));\r\n  background-image: -o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));\r\n  background-image: linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));\r\n}\r\n.btn:active{ \r\n  position: relative;\r\n  top: 2px;  \r\n  -webkit-box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);\r\n  -moz-box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);\r\n  box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Bu b\u00fcy\u00fck mavi d\u00fc\u011fme Codepen kullan\u0131larak Stephan Rusu taraf\u0131ndan tasarlanm\u0131\u015ft\u0131r. Onun kodlar\u0131 aras\u0131nda daha \u00e7ok, siyah ve ye\u015fil butonlar bulunmaktad\u0131r eski Firefox tasar\u0131mlar\u0131n\u0131 i\u00e7erir. Herhangi bir d\u00fczen i\u00e7in g\u00fczel renkli butonlar\u0131 dahil ederek kolay bir y\u00f6ntem olabilir.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45<\/pre>\n<\/td>\n<td>\n<pre>\/* page structure *\/\r\n#w {\r\n  display: block;\r\n  width: 800px;\r\n  margin: 0 auto;\r\n  background: #fff;\r\n  padding: 15px 20px;\r\n  -webkit-border-radius: 4px;\r\n  -moz-border-radius: 4px;\r\n  border-radius: 4px;\r\n}\r\n\r\n#someform {\r\n  display: block;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.basictxt {\r\n  padding: 4px 7px;\r\n  color: #474747;\r\n  font-size: 1.75em;\r\n  width: 320px;\r\n}\r\n\r\n#generatedpw {\r\n  display: block;\r\n  margin-top: 15px;\r\n  border: 1px solid #ddd;\r\n  padding: 5px;\r\n  width: 260px;\r\n  color: #575757;\r\n  font-size: 1.7em;\r\n}\r\n\r\n#output {\r\n  position: relative;\r\n  top: -1px;\r\n  padding: 8px 10px;\r\n  font-size: 1.4em;\r\n  color: #fff;\r\n  text-shadow: 0px 1px 1px rgba(0,0,0,0.25);\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Benim stil dosyas\u0131n\u0131n alt\u0131nda t\u00fcm sayfa i\u00e7eri\u011fini bulabilirsiniz. \u00a0Bu stiller \u00e7e\u015fitli form elemanlar\u0131 ile birlikte temel Wrapping divi i\u00e7ermektedir. \u00a0\u015eifre ger\u00e7ek de\u011ferlendirilmesi jQuery kullan\u0131larak ele al\u0131n\u0131r, \u00f6zelle\u015ftirmek i\u00e7in bu \u015fekilde daha kolay olacak. Her iki \u015fekil de, sadece \u00e7ok benzer bir web sitesi tasar\u0131m\u0131 kurulumu biraz sab\u0131r ve biraz el eme\u011fi al\u0131r.<\/p>\n<h3>jQuery ile Geli\u015ftirilmesi<\/h3>\n<p>Son olarak bu eklenti i\u00e7in son par\u00e7a tim varsay\u0131lan i\u015flevleri olu\u015fturmaktad\u0131r. \u00a0Bu demo \u00f6rnek kod \u015fifre gereksinimleri i\u00e7in kendi desen belirtilmeden en kolay y\u00f6ntemlerden biri etraf\u0131na dayan\u0131r. Daha anla\u015f\u0131l\u0131r olmas\u0131 i\u00e7in jQuery \u00e7ok daha kolay bir hale getirir, k\u00fc\u00e7\u00fck par\u00e7ac\u0131klar halinde her b\u00f6l\u00fcm\u00fc incelemek istiyorum.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5<\/pre>\n<\/td>\n<td>\n<pre>var $input  = $('#input');\r\nvar $output = $('#output');\r\nvar $generate = $('#generatedpw');\r\n\r\n$.passy.requirements.length.min = 5;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>\u0130lk olarak hedef \u00a0\u00f6\u011feleri i\u00e7in bir ka\u00e7 sat\u0131r kurulum de\u011fi\u015fkenleri bulunur. \u00a0<strong>$input<\/strong>\u00a0ba\u011flamsal de\u011ferlendirilmesi ise\u00a0<strong>$output<\/strong>\u00a0parola alan\u0131d\u0131r. \u00a0\u015eimdi\u00a0<strong>$generate<\/strong> ba\u015fkabir giri\u015f alan\u0131 sayfan\u0131n alt k\u0131sm\u0131nda yer al\u0131r. Bu dinamik olarak olu\u015fturulmu\u015f bir parola al\u0131r ve kopyala\/yap\u0131\u015ft\u0131r \u00a0ile kendi parolas\u0131 olarka kullanmak i\u00e7in ziyater\u00e7ilere normal metin olarak g\u00f6r\u00fcn\u00fcrler.<\/p>\n<p>The <strong>$.passy.requirements<\/strong>\u00a0nesneyi i\u015fleyebilirsiniz farkl\u0131 bir s\u00fcr\u00fc \u00f6zellikleri i\u00e7ermektedir. bu demo sadece bir \u015fifrenin 5 karakterden daha uzun olmas\u0131n\u0131 gerektirir.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12<\/pre>\n<\/td>\n<td>\n<pre>var feedback = [\r\n    {color: '#d0a14f', text: 'weak'},\r\n    {color: '#4fb9d0', text: 'okay'},\r\n    {color: '#4fd098', text: 'good'},\r\n    {color: '#2fc170', text: 'perfect!'}\r\n];\r\n\r\n\/\/ setup the passy() function on each input\r\n$input.passy(function(strength, valid) {\r\n  $output.text(feedback[strength].text);\r\n  $output.<a href=\"http:\/\/blog.templatemonster.com\/category\/css\/\" target=\"_blank\">css<\/a>('background-color', feedback[strength].color);\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Geri bildirim karma\u015f\u0131kl\u0131\u011f\u0131 de\u011fi\u015fen nesneleri tutan \u00f6zel bir dizidir. \u00a0\u015eifre de\u011ferlendirmesi mekan\u0131zmas\u0131 bir \u015fifre d\u00fcze d\u00fczeyini g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131l\u0131r. \u00a0Gerekti\u011fi gibi renk ve di\u011fer stil ayarlar\u0131n\u0131 \u00f6zelle\u015ftirmenize olanak sa\u011flar, ancak eklenti kaynak koduna in\u015fa edilmi\u015ftir.<\/p>\n<p>Kod ikinci blogu <strong>passy()<\/strong> fonksiyonunu \u00e7al\u0131\u015f\u0131rken bizim giri\u015f alan\u0131m\u0131z\u0131 hedefliyor. \u00a0Biz mevcut dize ge\u00e7erlili\u011fini g\u00fcncellemek i\u00e7in yeni bir karakter alan\u0131na yazd\u0131\u011f\u0131m\u0131z\u0131 her zaman kontrol eder. \u00a0T\u00fcm yapt\u0131\u011f\u0131m\u0131z $output eleman\u0131 i\u00e7in dahili metin ve arka plan rengini g\u00fcncellenmesi olabilir. Hatta s\u00f6z dizimi kullan\u0131larak her seviye i\u00e7in kendi \u00f6zelliklerini olu\u015fturabilir ve eri\u015febilirsiniz.<br \/>\n<strong>feedback[strength].nameofproperty<\/strong>.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<pre>1\r\n2\r\n3\r\n4\r\n5<\/pre>\n<\/td>\n<td>\n<pre>\/\/ unique password generation\r\n$('#generate').on('click', function(e) {\r\n  e.preventDefault();\r\n  $generate.passy('generate', 10);\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Bu kod son blok benzersiz \u00f6zel parola olu\u015fturur ve <strong>$generate<\/strong>\u00a0olu\u015fturmak i\u00e7in giri\u015f alan\u0131na yerle\u015ftirilir. Parametre ile arama passy() biz eklenti farkl\u0131 bir y\u00f6ntem ile \u00e7a\u011fr\u0131s\u0131n\u0131 bekliyoruz anlam\u0131na gelir.\u00a0\u00a0Benim ikinci parametre yeni \u015fifre uzunlu\u011fu belirten bir say\u0131d\u0131r. \u00a0Bu y\u00f6ntemleri ara\u015ft\u0131rma ihtiyac\u0131 duyuyorsan\u0131z biraz daha \u00e7evrimi\u00e7i eklenti belgelerine g\u00f6z at\u0131n.<\/p>\n<p><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/demo-password-generation-rating\/index.html\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\"><img decoding=\"async\" alt=\"password generation and testing\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/password-passy-tutorial-preview-demo.png?9d7bd4\" \/><\/a><\/p>\n<p><strong><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/demo-password-generation-rating\/index.html\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Canl\u0131 Demo<\/a><\/strong>\u00a0\u2013 <strong><a href=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/password-generation-rating-source-codes.zip?9d7bd4\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Kaynak Kodunu \u0130ndir<\/a><\/strong><\/p>\n<h3>Kapan\u0131\u015f<\/h3>\n<p>Passy dinamik kay\u0131t formlar\u0131 kurmak i\u00e7in idealdir tabi ki bu benim kendi \u015fahsi fikrimdir. Kullan\u0131c\u0131lar\u0131n akl\u0131na bir par\u00e7a ak\u0131l vermek i\u00e7in bir \u015fifre karma\u015f\u0131kl\u0131\u011f\u0131 denetleyicisi ile do\u011fru olur. \u00a0Web siteniz beklentileri kar\u015f\u0131layan durumda bir \u015fifre se\u00e7erken insanlar\u0131n karar vermesine yard\u0131mc\u0131 olabilir. Kesinlikle benim kaynak kodlar\u0131m\u0131n kopyas\u0131n\u0131 indirmek ve kendi web projeleriniz i\u00e7in bu eklentinin nas\u0131l g\u00f6r\u00fcnece\u011fini g\u00f6rmek i\u00e7in \u00e7ekinmeyin.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kay\u0131t formlar\u0131 genellikle web sitelerinin ortak bir par\u00e7as\u0131. Kay\u0131tl\u0131 kullan\u0131c\u0131lar kazan\u0131yor bloglar, webapps, sosyal a\u011flar ve web siteleri i\u00e7in daha onlarca yarar sa\u011flayabilir. Dinamik jQuery efektleri\u00a0 kullan\u0131c\u0131lara olduk\u00e7a pratik yol g\u00f6sterici kapsaml\u0131 deneyim i\u00e7in faydal\u0131 olabiliyor. \u00a0Bu a\u015famalardan biriside \u0130nternet korsanl\u0131\u011f\u0131n\u0131 \u00f6nlemek a\u00e7\u0131s\u0131ndan yeterince kar\u0131\u015f\u0131k ve benzersiz \u015fifreler \u00fcretmek gerekebilir. Bu e\u011fitim i\u00e7in ben Passy [&hellip;]<\/p>\n","protected":false},"author":1805522,"featured_media":3615,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[247,15],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme<\/title>\n<meta name=\"description\" content=\"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme\" \/>\n<meta property=\"og:description\" content=\"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog TemplateMonster T\u00fcrkiye\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-01T14:26:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T11:09:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2013\/10\/2013.10.011.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bar\u0131\u015f Hep\u00e7orman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bar\u0131\u015f Hep\u00e7orman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\"},\"author\":{\"name\":\"Bar\u0131\u015f Hep\u00e7orman\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815\"},\"headline\":\"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme\",\"datePublished\":\"2013-10-01T14:26:36+00:00\",\"dateModified\":\"2020-02-26T11:09:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\"},\"wordCount\":1040,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"articleSection\":[\"Haberler\",\"Web Geli\u015ftirme\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\",\"name\":\"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\"},\"datePublished\":\"2013-10-01T14:26:36+00:00\",\"dateModified\":\"2020-02-26T11:09:21+00:00\",\"description\":\"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"name\":\"Blog TemplateMonster T\u00fcrkiye\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/tr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\",\"name\":\"MonsterPost T\u00fcrkiye\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost T\u00fcrkiye\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815\",\"name\":\"Bar\u0131\u015f Hep\u00e7orman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Bar\u0131\u015f Hep\u00e7orman\"},\"description\":\"Bar\u0131\u015f profesyonel bir i\u00e7erik pazarlamac\u0131s\u0131 ve ilham veren bir yazard\u0131r. G\u00fcnd\u00fcz pazarlama m\u00fcd\u00fcr\u00fc, gece ise yazar, i\u015f, pazarlama, tasar\u0131m ve web geli\u015ftirme \u00fczerine bir\u00e7ok blog yaz\u0131s\u0131 yaz\u0131yor. Web sitesi olu\u015fturucular ve CMS ile \u00e7al\u0131\u015fmay\u0131 ve deneyimini okuyucularla payla\u015fmay\u0131 seviyor. Onu LinkedIn'de takip edin\",\"url\":\"https:\/\/monsterspost.com\/tr\/author\/baris\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme","description":"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/","og_locale":"tr_TR","og_type":"article","og_title":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme","og_description":"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!","og_url":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/","og_site_name":"Blog TemplateMonster T\u00fcrkiye","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","article_published_time":"2013-10-01T14:26:36+00:00","article_modified_time":"2020-02-26T11:09:21+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2013\/10\/2013.10.011.jpg","type":"image\/jpeg"}],"author":"Bar\u0131\u015f Hep\u00e7orman","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Yazan:":"Bar\u0131\u015f Hep\u00e7orman","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/"},"author":{"name":"Bar\u0131\u015f Hep\u00e7orman","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815"},"headline":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme","datePublished":"2013-10-01T14:26:36+00:00","dateModified":"2020-02-26T11:09:21+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/"},"wordCount":1040,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"articleSection":["Haberler","Web Geli\u015ftirme"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/","url":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/","name":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/#website"},"datePublished":"2013-10-01T14:26:36+00:00","dateModified":"2020-02-26T11:09:21+00:00","description":"jQuery ile dinamik \u015fifreler nas\u0131l olu\u015fturulur merak ediyorsan\u0131z bu makaleyi mutlaka incelemelisiniz sizler i\u00e7in haz\u0131rlanm\u0131\u015f harika p\u00fcf noktalar\u0131 bulunmakta!","breadcrumb":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-dinamik-sifre-uretimi-ve-degerlendirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/tr\/"},{"@type":"ListItem","position":2,"name":"JQuery ile Dinamik \u015eifre \u00dcretimi ve De\u011ferlendirme"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/tr\/#website","url":"https:\/\/monsterspost.com\/tr\/","name":"Blog TemplateMonster T\u00fcrkiye","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/tr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/tr\/#organization","name":"MonsterPost T\u00fcrkiye","url":"https:\/\/monsterspost.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost T\u00fcrkiye"},"image":{"@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815","name":"Bar\u0131\u015f Hep\u00e7orman","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Bar\u0131\u015f Hep\u00e7orman"},"description":"Bar\u0131\u015f profesyonel bir i\u00e7erik pazarlamac\u0131s\u0131 ve ilham veren bir yazard\u0131r. G\u00fcnd\u00fcz pazarlama m\u00fcd\u00fcr\u00fc, gece ise yazar, i\u015f, pazarlama, tasar\u0131m ve web geli\u015ftirme \u00fczerine bir\u00e7ok blog yaz\u0131s\u0131 yaz\u0131yor. Web sitesi olu\u015fturucular ve CMS ile \u00e7al\u0131\u015fmay\u0131 ve deneyimini okuyucularla payla\u015fmay\u0131 seviyor. Onu LinkedIn'de takip edin","url":"https:\/\/monsterspost.com\/tr\/author\/baris\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/205"}],"collection":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/users\/1805522"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":7,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":12400,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/205\/revisions\/12400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/media\/3615"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}