Posts Tagged :

javascript

Binary representation of floating-point numbers 1024 420 mezo

Binary representation of floating-point numbers

Have you ever considered the process by which computers store floating-point numbers such as 3.1416 (­ŁŁ┐) or 9.109 ├Ś 10Ôü╗┬│┬╣ (the mass of the electron in kg) in the memory which is limited by a finite number of ones and zeroes (aka bits)?

For integers (i.e., 17). It appears to be fairly straightforward. Assume we have 16 bits (2 bytes) to store the number. We can store integers between 0 and 65535 in 16 bits:

(0000000000000000) = (0)

(0000000000010001)Ôéé =
    (1 ├Ś 2Ôü┤) +
    (0 ├Ś 2┬│) +
    (0 ├Ś 2┬▓) +
    (0 ├Ś 2┬╣) +
    (1 ├Ś 2Ôü░) = (17)ÔéüÔéÇ

(1111111111111111)Ôéé =
    (1 ├Ś 2┬╣ÔüÁ) +
    (1 ├Ś 2┬╣Ôü┤) +
    (1 ├Ś 2┬╣┬│) +
    (1 ├Ś 2┬╣┬▓) +
    (1 ├Ś 2┬╣┬╣) +
    (1 ├Ś 2┬╣Ôü░) +
    (1 ├Ś 2Ôü╣) +
    (1 ├Ś 2ÔüŞ) +
    (1 ├Ś 2ÔüĚ) +
    (1 ├Ś 2ÔüÂ) +
    (1 ├Ś 2ÔüÁ) +
    (1 ├Ś 2Ôü┤) +
    (1 ├Ś 2┬│) +
    (1 ├Ś 2┬▓) +
    (1 ├Ś 2┬╣) +
    (1 ├Ś 2Ôü░) = (65535)ÔéüÔéÇ

On the off chance that we really want a marked number we might utilize two’s supplement and shift the scope of [0, 65535] towards the negative numbers. For this situation, our 16 pieces would address the numbers in a scope of [-32768, +32767].

As you would have seen, this approach will not permit you to address the numbers like – 27.15625 (numbers after the decimal point are simply being disregarded).

However, we’re not the initial ones who have seen this issue. Around Ôëł36 years ago a few brilliant people conquered this limit by presenting the IEEE 754 norm for floating-point arithmetic.

The IEEE 754 standard portrays the way (the framework) of utilizing those 16 bits (or 32, or 64 bits) to store the numbers of wider range, including the small floating numbers (smaller than 1 and closer to 0).

To get the thought behind the standard we could review the logical documentation – an approach to communicating numbers that are excessively huge or excessively little (for the most part would bring about a long string of digits) to be helpfully written in decimal structure.

As you might see from the picture, the number portrayal may be parted into three sections:

sign
division (otherwise known as significant) – the important digits (the significance, the payload) of the number
example – controls how far and in which direction to move the decimal point in the fraction
The base part we might preclude simply by settling on what it will be equivalent to. For our situation, we’ll involve 2 as a base.

Rather than utilizing every one of the 16 bits (or 32 bits, or 64 bits) to store the fraction of the number, we might share the bits and store a sign, type, and portion simultaneously. Contingent upon the numbers of bits that we will use to store the number we end up with the accompanying parts:

Floating-point formatTotal bitsSign bitsExponent bitsFraction bitsBase
Half-precision1615102
Single-precision3218232
Double-precision64111522

With this approach, the number of bits for the fraction has been reduced (i.e. for the 16-bits number it was reduced from 16 bits to 10 bits). It means that the fraction might take a narrower range of values now (losing some precision). However, since we also have an exponent part, it will actually increase the ultimate number range and also allow us to describe the numbers between 0 and 1 (if the exponent is negative).

For example, a signed 32-bit integer variable has a maximum value of 2┬│┬╣ Ôłĺ 1 = 2,147,483,647, whereas an IEEE 754 32-bit base-2 floating-point variable has a maximum value of Ôëł 3.4028235 ├Ś 10┬│ÔüŞ.

To make it possible to have a negative exponent, the IEEE 754 standard uses the biased exponent. The idea is simple – subtract the bias from the exponent value to make it negative. For example, if the exponent has 5 bits, it might take the values from the range of [0, 31] (all values are positive here). But if we subtract the value of 15 from it, the range will be [-15, 16]. The number 15 is called bias, and it is being calculated by the following formula:

exponent_bias = 2 ^ (kÔłĺ1) Ôłĺ 1

k - number of exponent bits

I’ve tried to describe the logic behind the converting of floating-point numbers from a binary format back to the decimal format on the image below. Hopefully, it will give you a better understanding of how the IEEE 754 standard works. The 16-bits number is being used here for simplicity, but the same approach works for 32-bits and 64-bits numbers as well.

Checkout the interactive version of this diagram to play around with setting bits on and off, and seeing how it would influence the final result

Here is the number ranges that different floating-point formats support:

Floating-point formatExp minExp maxRangeMin positive
Half-precisionÔłĺ14+15┬▒65,5046.10 ├Ś 10Ôü╗ÔüÁ
Single-precisionÔłĺ126+127┬▒3.4028235 ├Ś 10┬│ÔüŞ1.18 ├Ś 10Ôü╗┬│ÔüŞ

Be aware that this is by no means a complete and sufficient overview of the IEEE 754 standard. It is rather a simplified and basic overview. Several corner cases were omitted in the examples above for simplicity of presentation (i.e. -0-Ôł×+Ôł× and NaN (not a number) values)

Code examples

In the javascript-algorithms repository, I’ve added a source code of binary-to-decimal converters that were used in the interactive example above.

Below you may find an example of how to get the binary representation of the floating-point numbers in JavaScript. JavaScript is a pretty high-level language, and the example might be too verbose and not as straightforward as in lower-level languages, but still it is something you may experiment with directly in the browser:

See the Pen bitsToFloat.js by mzekiosmancik (@mzekiosmancik) on CodePen.

References

You might also want to check out the following resources to get a deeper understanding of the binary representation of floating-point numbers:

Levenshtein Distance Algorithm 1024 668 mezo

Levenshtein Distance Algorithm

Hello my fellow Padawans 

Couple days ago I had to use an algorithm for comparing string and I want to write something about Levenshtein Algorithm. This algorithm is for measure the metric distance between 2 string text. Informally, the Levenshtein distance between two words is the minimum number of single-character edits (insertions, deletions or substitutions) required to change one word into the other. It is named after the Soviet mathematician Vladimir Levenshtein, who considered this distance in 1965.

Mathematically, the Levenshtein distance between two strings a, b (of length |a| and |b| respectively) is given by leva,b(|a|,|b|)

where 1(aiÔëábi) is the indicator function equal to 0 when aiÔëábi and equal to 1 otherwise, and leva, b(i,j) is the distance between the first i characters of a and the first j characters of b.

Note that the first element in the minimum corresponds to deletion (from a to b), the second to insertion and the third to match or mismatch, depending on whether the respective symbols are the same.

We can use this algorithm for string matching and spell checking

This algorithm calculates the number of edit operation that are necessary to modify one string to another string. Fro using this algorithm for dynamic programming we can use these steps :
1- A matrix is initialized measuring in the (m, n) cells the Levenshtein distance between the m-character prefix of one with the n-prefix of the other word.
2 – The matrix can be filled from the upper left to the lower right corner.
3- Each jump horizontally or vertically corresponds to an insert or a delete, respectively.
4- The cost is normally set to 1 for each of the operations.
5- The diagonal jump can cost either one, if the two characters in the row and column do not match else 0, if they match. Each cell always minimizes the cost locally.
6- This way the number in the lower right corner is the Levenshtein distance between these words.

An example that features the comparison of “HONDA” and “HYUNDAI”,

Following are two representations: Levenshtein distance between “HONDA” and “HYUNDAI” is 3.

The Levenshtein distance can also be computed between two longer strings. But the cost to compute it, which is roughly proportional to the product of the two string lengths, makes this impractical. Thus, when used to aid in fuzzy string searching in applications such as record linkage, the compared strings are usually short to help improve speed of comparisons.

Here’s the code that you can use the Levenshtein Distance and calculate percentage between 2 string.

See the Pen levenshtein.js by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalar─▒ – Bubble Sort 230 300 mezo

Javascript Algoritmalar─▒ – Bubble Sort

Bubble Sort okullarda ├Â─čretilen ilk algoritmad─▒r diyebiliriz. Bu algoritma verim olarak en verimsiz s─▒ralama algoritmas─▒d─▒r ancak yap─▒sal olarak anla┼č─▒lmas─▒ en kolay─▒d─▒r. Buradaki temel fikir s─▒ralanacak dizi i├žindeki elemanlar─▒n kar┼č─▒la┼čt─▒r─▒lmas─▒d─▒r. Her seferinde 2 eleman kar┼č─▒la┼čt─▒r─▒l─▒r ve sonras─▒nda yerleri de─či┼čmeden ├Ânce do─čru s─▒radalarm─▒ diye emin olur. Basit olarak :┬á
*Ilk eleman ile ikinciyi kar┼č─▒la┼čt─▒r─▒r
*E─čer ilk eleman ikinci elemandan sonra gelmeliyse yerlerini de─či┼čtirir
*Sonra ├╝├ž├╝nc├╝ eleman ile ikiyi kar┼č─▒la┼čt─▒r─▒r┬á
*E─čer┬á ikinci eleman , ├╝├ž├╝nc├╝ elemandan sonra gelecekse yerlerini de─či┼čtirir ve bu i┼člem dizinin son eleman─▒na kadar devam eder.┬á
A┼ča─č─▒daki resim anlatt─▒─č─▒m ┼ču mant─▒─č─▒ anlaman─▒za yard─▒mc─▒ olacakt─▒r.┬á

Flowchart:

├ľrnek Kod:

See the Pen Bubble Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalar─▒ – Selection Sort 300 363 mezo

Javascript Algoritmalar─▒ – Selection Sort

Selection Sort Bubble Sort’un biraz geli┼čtirilmi┼č halidir ve elemanlar aras─▒nda d├Âng├╝ ile d├Ânerken her eleman ge├ži┼činde sadece bir se├žim yapar ve o se├žimin s─▒ralamas─▒n─▒ de─či┼čtirir.
Bu sıralama : 
*Ilk eleman─▒n en k├╝├ž├╝k oldu─čunu varsayar┬á
*Sonra bu eleman─▒ ikinci s─▒radaki de─čer ile kar┼č─▒la┼čt─▒r─▒r.
*E─čer ikinci s─▒radaki eleman ilkinden k├╝├ž├╝kse bu sefer ikinci de─čeri en k├╝├ž├╝k olarak atar.┬á
*Bu i┼člem dizinin son eleman─▒na dek devam eder.
*E─čer minimum deger ba┼člad─▒─č─▒n─▒z de─čer de─čilse yerlerini de─či┼čtirir.
A┼ča─č─▒daki resim biraz daha yard─▒mc─▒ olacakt─▒r.

Selection Sort ├çal─▒┼čmas─▒:

├ľrnek Kod:

See the Pen Selection Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalar─▒ – Insertion Sort 300 180 mezo

Javascript Algoritmalar─▒ – Insertion Sort

Insertion Sort sonu├ž olarak bekledi─čimiz s─▒ralanm─▒┼č listeyi her eleman i├žin s─▒ralayan ├žok basit bir s─▒ralama algoritmas─▒d─▒r. Bu y├╝zden de Heap Sort yada Quick Sort kadar verimli bir s─▒ralama algoritmas─▒ de─čildir. Insertion s─▒ralamas─▒n─▒ elimizdeki bir dizi iskambil ka─č─▒tlar─▒n─▒ s─▒ralamak gibi d├╝┼č├╝nebilirsiniz. A┼ča─č─▒daki animasyonu inceledi─činizde g├Âreceksiniz elinizdeki ka─č─▒tlar─▒ s─▒ramak i├žin bir kart─▒ aradan ├žekip yerine yerle┼čtirdi─čimiz gibi ├žal─▒┼čan ve her seferinde s─▒ralanm─▒┼č bir dizi elde eden bir s─▒ralama y├Ântemi. 

Animasyon:

FlowChart:

├ľrnek Kod:

See the Pen Insertion Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalar─▒ – Binary Search 386 878 mezo

Javascript Algoritmalar─▒ – Binary Search

Binary search s─▒ral─▒ bir dizi i├žinde arad─▒─č─▒m─▒z de─čeri bulabilmek i├žin ├žok verimli bir algoritmad─▒r.┬á Verilen s─▒ral─▒ diziyi tekrar tekrar 2 ye b├Âlerek aramaya devam eder sonunda arad─▒─č─▒ de─čerin index numaras─▒n─▒ bulana kadar. Binary search kullan─▒m─▒ i├žin bir ├Ârnek verecek olursak , diyelim ki Google Maps ile ├žal─▒┼č─▒yorsunuz ve kullan─▒c─▒dan ald─▒─č─▒n─▒z bir mekan ismini DB den gelen s─▒ral─▒ listenizden bulup o mekan─▒n koordinatlar─▒n─▒ al─▒p haritada gostermek istiyorsunuz bunun i├žin en verimli arama algoritmas─▒ Binary Search olacakt─▒r. Nedenini a├ž─▒klayacak olursak linear arama da algoritma t├╝m listeyi bastan sona gezer ve bulmaya ├žal─▒┼č─▒rd─▒ bu da binlerce mekan bilgisi i├žinden bir isim bulabilmek i├žin tek tek bastan sona hepsini incelemesi gerekti─či anlam─▒na geliyor hem uzun hemde yorucu bir i┼člem ancak binary search ile bu binlerce mekan─▒ tek tek kontrol etmek zorunda de─čiliz.

─░nsanlara bir algoritmay─▒ anlat─▒rken baz─▒ k├╝├ž├╝k detaylar─▒ s├Âylemeye gerek yoktur ├Ârne─čin bir kek yap─▒lmas─▒n─▒ istedi─čimizde buzdolab─▒n─▒ nas─▒l a├žmas─▒ gerekti─čini yada yumurtalar─▒ dolaptan ├ž─▒kar─▒p nas─▒l k─▒rmalar─▒ gerekti─čini s├Âylememize gerek kalmaz insan bu gibi k├╝├ž├╝k detaylar─▒ kendisi tamamlayarak kek yapma i┼člemini tamamlayabilirler ancak bilgisayarda bu gibi k├╝├ž├╝k detaylar┬á bilgisayar taraf─▒ndan tamamlanamaz t├╝m detaylar─▒n bilgisayara tan─▒mlanmas─▒ gerekir.

Programlama boyutunda algoritmalar─▒ uygulayabilmek i├žin algoritman─▒n t├╝m detaylar─▒n─▒ bilmek gerekiyor. Problem i├žin girdiler nedir ? ├ç─▒kt─▒s─▒ nedir ? Hangi de─či┼čkenler tan─▒mlanmal─▒ ? Bu de─či┼čkenler ne t├╝rde olmal─▒? Bir d├Âng├╝ olmal─▒ m─▒ ne gibi ko┼čullarda olmal─▒ gibi detaylar.

Hadi bu kadar bo┼č yapt─▒ktan sonra ┼ču binary search e dikkatlide g├Âz atal─▒m. Buradaki ana fikir belirtti─čimiz say─▒y─▒ bulabilmek i├žin belirli aral─▒klar─▒ takip etmek. Diyelim ki bir tahmin oyunu oynuyoruz ve bu tahmin oyununda akl─▒m─▒zdan 1 ile 100 aras─▒nda bir say─▒ tutuyoruz. Ard─▒ndan siz de bana tahminimizi s├Âyl├╝yorsunuz ve 25 diyorsunuz ve ben size Yukar─▒ diyorum. Ard─▒ndan siz 81 diyorsunuz bende size A┼ča─č─▒ diyorum. ┼×imdi biliyorsunuz ki say─▒ art─▒k k─▒rm─▒z─▒ ile i┼čaretledi─čimiz 26 ile 80 aral─▒─č─▒nda yani 25 ten k├╝├ž├╝k ve 81 den b├╝y├╝k say─▒lar─▒n hepsini elemi┼č olduk.

Her seferinde tahmininiz e─čer do─čru de─čilse kalan aral─▒ktaki say─▒lar─▒ belli tahmin edilebilir bir aral─▒─ča b├Âlerek devam ediyor. ├ť├ž├╝nc├╝ tahmininde53 diyorsunuz ve bende A┼ča─č─▒ diyorum yine ne yapm─▒┼č olduk 26-80 aral─▒─č─▒ndaki say─▒y─▒ tekrar b├Âlm├╝┼č olduk┬á

Do─čru say─▒y─▒ bulana kadar b├Âyle s├╝r├╝p giden ama sonunda say─▒y─▒ buldu─čumuz bir oyun gibi ├žal─▒┼č─▒r Binary Search.

─░┼člem s─▒ras─▒ yazacak olursak

1-Min = 1 ve Max = n

2-Max ve Min say─▒ aral─▒─č─▒nda bir integer bir de─čer tut

3-E─čer say─▒y─▒ bulduysan ├ž─▒k. Do─čru tahmin

4-E─čer tutulan say─▒dan d├╝┼č├╝k ise Min de─či┼čkenine tahmin edilen say─▒ya 1 ekleyip atama i┼člemini ger├žekle┼čtir.

5-E─čer tahmin edilen say─▒ tutulandan b├╝y├╝k ise o zaman Max de─čerini tahmin edilenden 1 ├ž─▒kar─▒p atama i┼člemini ger├žekle┼čtir.

6-2 numaral─▒ i┼čleme geri d├Ân.

See the Pen Binary Search by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalari – Heap Sort 709 790 mezo

Javascript Algoritmalari – Heap Sort

S─▒radaki s─▒ralama algoritmam─▒z Heap Sort yani T├╝rk├že meali ile y─▒─č─▒n s─▒ralamas─▒.

Bilgisayar bilimine g├Âre heap Sort yani y─▒─č─▒n s─▒ralamas─▒ algoritmas─▒ kar┼č─▒la┼čt─▒rma bazl─▒ bir s─▒ralama algoritmas─▒d─▒r. Heap sort geli┼čtirilmi┼č se├žimli s─▒ralama olarak da d├╝┼č├╝n├╝lebilir : yani diziyi s─▒ralanm─▒┼č ve s─▒ralanmam─▒┼č olarak b├Âl├╝mlere ay─▒r─▒r ve interaktif bir bi├žimde s─▒ralanmam─▒┼č olan b├Âl├╝m├╝ daralt─▒r son olarak bir b├╝t├╝n s─▒ralanm─▒┼č bir output ortaya ├ž─▒kar─▒r. Heap sort iyi dizayn edilmi┼č QuickSort dan daha yava┼č ├žal─▒┼čsa da , O(n log n) ├žal─▒┼čma zaman─▒nda olumlu b─▒r  avantaj─▒ vard─▒r.  Heap sort yerinde ve kullan─▒labilir bir algoritma olmas─▒na ra─čmen stabil ├žal─▒┼čan bir s─▒ralama algoritmas─▒ de─čildir. 

Heap sort ├žal─▒┼čmas─▒ s─▒ras─▒nda bir diziyi rastgele s─▒ras─▒ de─či┼čen de─čerlerle s─▒ralar.  Algoritman─▒n ilk ├žal─▒┼čma a┼čamas─▒nda elemanlar heap yap─▒s─▒na uygun olacak sekilde tekrar s─▒ralan─▒r ve heap a─čac─▒ yap─▒s─▒ a┼ča─č─▒daki animasyonda g├Âsterildi─či gibi sonucu sunar. 

Animasyon:

FlowChart:

├ľrnek Kod:

See the Pen Heap Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalar─▒ – Merge Sort 625 598 mezo

Javascript Algoritmalar─▒ – Merge Sort

B─▒r baska s─▒ralama tekni─či ile birlikteyiz inkilizcesi Merge Sort t├╝rk├žesi birle┼čtirme kayna┼čt─▒rma s─▒ralamas─▒ olan bu algoritma 2 diziyi al─▒p k├╝├ž├╝kten b├╝y├╝─če s─▒ralamak ├╝zerine kurulmu┼čtur.

A┼ča─č─▒daki animasyondan da anlayaca─č─▒n─▒z ├╝zere 2 dizi al─▒n─▒yor daha sonra bunlar─▒ n kadar alt dizilere b├Âlerek bu alt listeleri kar┼č─▒la┼čt─▒r─▒larak results dizisine ekleme yaparak s─▒ral─▒yor.
Animasyon :

Flowchart :

├ľrnek Kod :

See the Pen Merge Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

Javascript Algoritmalari – Quick Sort 453 593 mezo

Javascript Algoritmalari – Quick Sort

Merhaba arkada┼člar baz─▒ ald─▒─č─▒m notlar─▒ sizlerle paylasmak istiyorum bunlar javascript┬á ile temel algoritma sorular─▒ ve y├Ântemleri olarak nitelendirece─čimiz k├╝├ž├╝k yaz─▒lar olacak.
H─▒zl─▒ s─▒ralama
H─▒zl─▒ s─▒ralama bir dizi i├žindeki elemanlar─▒ herhangi bir ili┼čki kural─▒ koymadan d├╝md├╝z k├╝├ž├╝kten b├╝y├╝─če s─▒ralamam─▒za yarayan bir algoritma hadi bakal─▒m nas─▒l bir ┼čeymi┼č…

Bu s─▒ralama ├Ânce diziden bir ilk eleman─▒ pivot olarak belirler ve onun etraf─▒nda s─▒ralama yapmaya ba┼člar. K├╝├ž├╝kse left dizisine b├╝y├╝kse right dizisine. Yani pivot eleman her zaman ortada kal─▒cak ┼čekilde ,ondan b├╝y├╝k ve k├╝c├╝kleri s─▒ralar. Dikkat edecek olursan─▒z fonksiyonun sonunda s─▒ralanm─▒┼č olan diziyi d├Ând├╝r├╝rken left ve right dizileri i├žinde ayn─▒ metodu ca─č─▒rarak yani onlar─▒ da bir daha s─▒ralamaya koyarak geri d├Ând├╝r├╝yoruz.
S─▒ralama Animasyonu :
Sorting quicksort animation

FlowChart :

├ľrnek Kod :

See the Pen Quick Sort by mzekiosmancik (@mzekiosmancik) on CodePen.

AngularJS – Dinamik De─či┼čken 980 400 mezo

AngularJS – Dinamik De─či┼čken

Merhaba arkada┼člar
Bildi─činiz gibi AngularJS de html ile js dosyas─▒ aras─▒ndaki ba─č─▒ scope ile sa─čl─▒yorduk. Yani controller ├╝zerinde tan─▒mlad─▒─č─▒m─▒z b─▒r scope nesnesini html ├╝zerinde {{}} veya ng-bind ile ├ža─č─▒rabiliyoruz. Bahsetti─čimiz de─či┼čkenler sabit tan─▒mlan─▒p g├Âr├╝nt├╝lenenler. Bir de JS taraf─▒nda tan─▒mlayabildi─čimiz de─či┼čkenler var ki bu yaz─▒m─▒z─▒n konusuda budur zaten ­čÖé

Hemen HTML kodlar─▒m─▒z─▒ yerlestirelim
[codebox 1]

ve Controller kodlar─▒m─▒z
[codebox 2]

Burada tan─▒mlad─▒─č─▒m─▒z $scope.dynamicVariable = {}; objemiz i├žersine istenilen miktarda de─či┼čken tan─▒mlanabilir ve HTML taraf─▒ndan da {{dynamicVariable[company.CompanyID]}} ┼čeklinde kullanabiliyoruz.

ve AngularJS ile dinamik de─či┼čkenimiz hay─▒rl─▒ olsun ­čÖé Bu da ornegimiz.

Umar─▒m Yararl─▒ Olur
Bilgiyle Kal─▒n
M.Zeki OSMANCIK

AngularJS – Basit Search Filter 1024 789 mezo

AngularJS – Basit Search Filter

Merhaba arkada┼člar
Bu kez de AngularJS ile ├žooooooook ama ├žok basit ┼čekilde listeledi─čimiz nesneler ├╝zerinde bir Text input ile nas─▒l arama yapabiliriz sorusunun cevab─▒n─▒ 2 sat─▒rda bir fiddle’da payla┼čmak istiyorum.

Bu datay─▒ AngularJS ile Controller i├žersinde┬áolu┼čtural─▒m┬áve bir $scope de─čiskeni i├žersine┬á┼ču ┼čekli tan─▒mlamam─▒z gerekiyor .
[codebox 2]

ve her zaman oldu─ču gibi HTML kodlar─▒m─▒z─▒ bir olu┼čtural─▒m ve listeme i┼člemini ger├žekle┼čtirelim.
[codebox 1]

Bu asamadan sonra JSON nesnemizin i├žersindeki elemanlar─▒n ekran─▒m─▒za listelendi─čini g├Ârebileceksiniz.

─░┼č arama k─▒sm─▒na geldi─činde ise HTML de de ┼ču ┼čekli bir de─či┼čiklik yapmam─▒z gerekmekte.

[codebox 3]

Burada kulland─▒─č─▒m─▒z FILTER bizim listeledi─čimiz JSON nesnesi ya da array i├žersinde input ├╝zerine tan─▒mlad─▒─č─▒m─▒z ng-model yard─▒m─▒ ile filtreleme yap─▒p $scope.companyList ad─▒nda ki objeye atama yapar b├Âylelikle siz de listeye abc yazd─▒─č─▒n─▒zda listedeki abc yi bularak $scope.companyList nesnesine atamas─▒n─▒ yaparak bizlere g├Âsterir ­čÖé

Benim yorumlamam bu kadar ­čÖé
Iste bu kadar bas─▒t ­čÖé
├ľrnek kodu Fiddle’dan inceleyebilirsiniz.

Umar─▒m Yararl─▒ Olur
Bilgiyle Kal─▒n.
M.Zeki OSMANCIK

Angular JS – Model 1024 576 mezo

Angular JS – Model

model

Biliyorum Model denilince akl─▒n─▒za yukar─▒daki ablalar geliyor ama hayaller Viktoriya Sikr─▒t┬á hayatlar Angular JS ne yapal─▒m ┬á!! Konuyla alakas─▒ bile yok tamamen ilgi ├žekmek i├žin kulland─▒m bu foto─čraf─▒. Bu model ├Âyle bir model ki bu ablalar kadar g├╝zel olmasa da angularjs ile hayat─▒ kolayla┼čt─▒ran g├╝zel bir yap─▒d─▒r ┼č├Âyle ki :

Bob_at_EaselModel aslinda bir boyadir !!

“Ne diyon lan sen de─či┼čik? AngularJS anlat─▒yordun ne alaka boya badana!” diyebilirsiniz ama Model bir boyad─▒r. ┼×imdi alakaya ├žay demleyelim.

MVC yi anlatabilece─čim en iyi metafor belki de budur ve bundan sonraki k─▒s─▒mda modeli daha iyi anlayabilece─činizi d├╝┼č├╝n├╝yorum.

MVC deki

Model = Boya , Controller = Ressam , View = Tual olarak d├╝┼č├╝n├╝rsek :

Yani son kullan─▒c─▒ya bir g├Âr├╝nt├╝, bilgi vb. ┼čeyleri bir web sitesi ├╝zerinde g├Âstermek i├žin ├Âncelikle bu bilgileri ve g├Âr├╝nt├╝leri bir yerden sa─člamam─▒z gerekiyor. ─░ste bu verileri DB veya servislerden sa─člayan ve View ├╝zerinde Controller yard─▒m─▒ ile g├Âsterilmesini sa─člayan yap─▒ya MODEL diyoruz…

Ayn─▒ yandaki Bob amcam─▒z─▒n┬áboyay─▒ al─▒p tuval ├╝zerine k├╝├ž├╝k yaln─▒z a─ča├žlar, mutlu bulutlar yap─▒p resmini tamamlay─▒p┬ág├Âstermesi gibi bir ┼čey i┼čte ­čÖé

┼×imdi bakal─▒m model denen ┼čey AngularJS i├žersinde ne gibi bir role sahip bakal─▒m View i nas─▒l boyayacak ?

Yine bir HTML dosyam─▒z var ve bunun ├╝zerine AngularJS k├╝t├╝phanesini ve js dosyam─▒z─▒ ekledik ve ng-model nesnesini bu HTML dosyam─▒z i├žersinde kulland─▒k.

[codebox 1]

 

Burada kulland─▒─č─▒m mydata benim modelim olmu┼č oluyor ve sayfa ├╝zerinde bir veriyi al─▒p ba┼čka bir yere sayfay─▒ yenilemeden, durulamadan, kurulamadan a┼ča─č─▒daki resimde g├Âr├╝lece─či ├╝zere yazabiliyor. Controller i├žersinde bir tan─▒mlama yapmadan bu ┼čekilde kullanmak m├╝mk├╝n. Bu demektir ki biz controller ├╝zerinde bir servisten ya da bir i┼člemden elde etti─čimiz de─čeri mydata adl─▒ modele e┼čitlersek bu bizim HTML sayfam─▒z ├╝zerinde g├Âsterilecek anlam─▒na geliyor yani tuval ├╝zerine boyam─▒z d├Âk├╝lecek ve resim ortaya ├ž─▒kacak.

model2

Controller ├╝zerine ├žok basit bir i┼člem yaparak bu mydata de─čerini sayfa ├╝zerinde g├╝ncellemeye ├žal─▒┼č─▒rsak.

[codebox 2]

Ve bunu HTML ├╝zerinden tetiklemek istersek

[codebox 3]

Sonu├ž olarak ├ž─▒kt─▒m─▒z ┼ču ┼čekilde olacakt─▒r

 model3

Burada olan olay ┼ču: controller ├╝zerine bir metot yazarak ng-model taraf─▒ndan kullan─▒lan nesneyi de─či┼čtirdim ve butona t─▒klad─▒─č─▒mda an─▒nda View ├╝zerinde g├Âr├╝nt├╝lemeye ba┼člad─▒m. Bu string yerine servisten gelen bir veri olabilirdi ya da bir i┼člem sonucu elde edilen bir veri olabilirdi.

Umar─▒m Yararl─▒ Olur

Bilgiyle Kal─▒n

M.Zeki OSMANCIK

Angular JS – View 478 326 mezo

Angular JS – View

Merhabalar

Angular JS nin VÔÇÖsi olan “View for Vendeta” ile devam ediyoruz. View denilen yap─▒ asl─▒nda HTML dosyalar─▒ndan baska bir ┼čey de─čildir.Bildi─činiz gibi AngularJS i├žin ┼č├Âyle b├Âyle demi┼čtik ,sonra kendisinden Single Page Application olarak bahsetmi┼čtik. Buradaki mant─▒k sabit bir index.html sayfas─▒ ve i├žerisinde sayfalar─▒m─▒z─▒n i├žeri─či ile de─či┼čen k├╝├ž├╝k, leziz, ger├žek html par├žac─▒klar─▒ ile donat─▒lm─▒┼č, harika bir tat.

┼×imdi isterseniz bu View olay─▒ nas─▒l ├žal─▒┼č─▒yor sayfa ├╝zerinde nas─▒l g├Âsteriliyor bir g├Âz atal─▒m…

├ľncelikle gerekli olan malzemeleri say─▒yorum

1 adet Angularjs k├╝t├╝phanesi buradan temin ediyorsunuz

1 adet Angularjs Route k├╝t├╝phanesi onuda buradan temin ediyorsunuz

1 adet Notepad++ o sizde var zaten olmayan─▒ d├Âv├╝yoruz ­čÖé

Evet tarife ge├želim art─▒k…

Index.HTML dosyan─▒z─▒ olu┼čturarak i├žersine ┼ču kodlar─▒ ekliyorsunuz.

[codebox 1]

Daha ├Ânceki Controller makalesindeki indexten tek fark─▒ bir fazla k├╝t├╝phane ve bir de ng-view denen bir dalga motor eklemi┼čiz.

Ng-view┬á bizim sayfa g├Âstericimiz┬á yani ASP.Net de ContentPlaceHolder vard─▒ ayn─▒ ondan i┼čte ­čÖé ┬áng-view ├╝zerinde g├Âsterilecek olan k├╝├ž├╝k html par├žalar─▒ yani sayfa i├žerikleri ,ngroute k├╝t├╝phanesini kullanarak olu┼čturaca─č─▒m─▒z config nesnesi ├╝zerindeki y├Ânergeleri takip ederek ng-view ├╝zerinde de─či┼čirler.

O zaman bir config nesnesi olu┼čtural─▒mda neymi┼č bu olay g├Ârelim.

[codebox 2]

G├Âr├╝ld├╝─č├╝ ├╝zere module tan─▒mlarken i├žerisine mutlaka ngRoute tan─▒ml─▒yoruz ki config olu┼čturdu─čumuzda ÔÇťbu ne lan?ÔÇŁ ┬ádemesin.

Daha sonra config i├žersinde $routeProvider.when() metodunu kullan─▒p sayfa url si sonundaki parametreleri yazarak hangi view g├Âsterilecek bu view in controller i ne olacak belirtebiliyoruz.

Sonrasinda buda Controller im bunu zaten biliyorsunuz bilmiyorsan─▒z “o ne la?” diyorsan─▒z buraya bak─▒n─▒z.

[codebox 3]

Bu arada yukar─▒da yazm─▒┼č oldu─čum config ve controller tek bir JS dosyas─▒ i├žersine yaz─▒l─▒yor yani en az─▒ndan ben ┼čuanl─▒k ├Âyle yapt─▒m sonra dosya yap─▒s─▒ ve klas├Ârleme y├Ântemlerinide anlataca─č─▒m.

Son olarak eklemi┼č oldu─čum iki View ┬ái├žersine ayn─▒ ┼čeyleri yazd─▒m oda ┼č├Âyle ki :

[codebox 4]

Ve ├žal─▒┼čt─▒rd─▒─č─▒m zaman ald─▒─č─▒m ├ž─▒kt─▒da burada ­čÖé

view2 view1

Sonu├ž olarak 2 de─či┼čik sayfay─▒ bir index.html i├žersinde g├Âsterdik ve sayfa de─či┼čimlerini sa─člad─▒k.

Umar─▒m Yararl─▒ Olur

Bilgiyle Kal─▒n

M.Zeki OSMANCIK

Angular JS – Controller 657 486 mezo

Angular JS – Controller

Selam Arkadaslar

Yazmaya uzuuun bir ara verdikten sonar yine sizlerleyim ­čÖé Angular JS konusuna devam edece─čiz. ─░lk yaz─▒mda AngularJS nedir mant─▒─č─▒ nedir k─▒saca bahsettik. Bu yaz─▒da ise MVC nin C sinden bahsedece─čim.

Controller

Controller MVC nin View’i yani son kullan─▒c─▒n─▒n g├Ârd├╝─č├╝ ile model yani business logic katmanlar─▒n─▒n ileti┼čime ge├žti─či katmand─▒r.┬á Yani kod yardimi ve model katman─▒ ile elde ettigimiz bir veriyi HTML kodlar─▒na g├Ânderme i┼čini ├╝stlenir. A┼ča─č─▒daki diagram bize Controller’─▒n g├Ârevini anlamakta biraz daha yard─▒mc─▒ olacakt─▒r.

angularJs_mvc_framwork

┼×imdi gelin isterseniz k├╝├ž├╝k bir ├Ârnek ile Controller ne i┼če yar─▒yor g├Ârelim. ├ľncelikle JS dosyalar─▒ ile ├žal─▒┼čaca─č─▒m─▒z─▒ belirtmek isterim herhangi bir edit├Âre ihtiyac─▒n─▒z olmayacakt─▒r Notepad++ i┼činizi g├Ârecektir. Tabi AngularJS k├╝t├╝phanesinide buradan indirip eklemeyi unutmay─▒n l├╝tfen.

HTML dosyamizi asagidaki gibi olu┼čturuyoruz.

[codebox 1]

Ard─▒ndan birde buradaki ng controller kar┼č─▒s─▒nda yer alan Controller1 adl─▒ dosyam─▒z─▒ ekleyip i├žersine ┼ču kodlar─▒ eklemeliyiz.

[codebox 2]

Eklemi┼č oldu─čumuz ng-controller tag─▒ ile html ├╝zerinde ├žal─▒┼čacak olan AngularJS kodlar─▒n─▒n nereyi hedef alarak metotlar─▒ aramas─▒ ve ├žal─▒┼čt─▒rmas─▒ gerekti─čini belirtmi┼č olduk.

Bu y├Ântem ile bir angularjs uygulamas─▒n─▒n i├žersine bir controller tan─▒mlayarak bu controller i├žersine yazd─▒─č─▒m─▒z her kodu ve ald─▒─č─▒m─▒z her de─čeri html elemanlari ├╝zerine aktarmam─▒z─▒n ne kadar kolay oldu─čunu g├Ârm├╝┼č olduk . Son olarak bu i┼člemin ├ž─▒kt─▒s─▒ a┼ča─č─▒daki gibi olacakt─▒r. Butona t─▒kland─▒─č─▒nda controller i├žersindeki metot ├žal─▒┼čacakt─▒r.

angularController2

Umar─▒m yararl─▒ olur

Bilgiyle Kal─▒n

M.Zeki OSMANCIK

JavaScript Saya├ž

JavaScript Saya├ž Div i├žerisinde a├ž─▒lan bir ileti┼čim formunun 2 saniye sonra kaybolmas─▒ i├žin haz─▒rlanm─▒┼čt─▒r. jQuery'nin slideUp kapanma efekti kullan─▒lm─▒┼čt─▒r.

function closeForm(){
  setTimeout('$("#contactForm").slideUp("slow")', 2000);
}

JavaScript Saya├ž 150 150 mezo
JavaScript XmlHttpRequest 657 588 mezo

JavaScript XmlHttpRequest

Merhaba arkada┼člar bu yaz─▒mda sizlere Javascript ile yap─▒labilen ├žok yararl─▒ bir o kadar performansl─▒ hep g├Âr├╝p acaba nas─▒l dedi─čimiz bir yap─▒y─▒ anlatmaya ├žal─▒┼čaca─č─▒m…
XML HTTP REQUEST Javascript ile herhangi bir server’a http request yapman─▒za olanak veren guzel bir objedir. Gelen cevab─▒ parse edip sayfadaki bazi ├Â─čeleri de─čistirebilir ve sayfa refresh olmadan bir cok ┼čey yapilabilir. Yani i┼čin k─▒sas─▒ Postback olmadan bilgileri ├žekebilme i┼člemini ger├žekle┼čtirmemize yard─▒mc─▒ oluyor. ├ľrnek olarak Google da yazd─▒─č─▒m─▒z bir harf tamamlanarak ├Âneriler halinde geliyor. Sayfan─▒n yenilendi─čini g├Ârm├╝yoruz sadece ├Ânerilerin belirdi─či g├Âzlemleniyor ama bu verilerde bir veritaban─▒ndan geliyor o derece h─▒zl─▒ ­čśë


Bu teknolojiyi Internet Explorer, Mozilla Firefox,Opera ve Safari destekliyor.Xml Http Request ─░nternet Explorer ÔÇśda ActiveX Control , Firefox ÔÇśta ise DOM (Document Object Model)ÔÇÖ in bizzat par├žasidir. Internet Explorer 7ÔÇÖ den itibaren native olarak desteklenmektedir. Bu sayede de artik ActiveX ÔÇśi kapatilmis browserlarda dahi calisabilmektedir.
Bu yap─▒n─▒n avantajlar─▒n─▒ ┼č├Âyle s─▒ralayabilirim :
ÔÇó En ├Ânemli art─▒s─▒, sayfa yenilenmedi─či i├žin de─či┼čken olmayan di─čer k─▒s─▒mlar─▒n sunucuda yeniden i┼členip sunucuyu yormas─▒ engellenir;
ÔÇó Kullan─▒c─▒da tekrar y├╝klenmedi─činden bant geni┼čli─či bo┼ča harcanmaz, ayn─▒ zamanda kullan─▒c─▒ taraf─▒nda sayfalarda daha h─▒zl─▒ i┼člem yap─▒l─▒r.
ÔÇó Sayfay─▒ yenilenmeden i├žeri─čimizi al─▒yor olmam─▒z, web uygulamam─▒za bir masa├╝st├╝ uygulama g├Âr├╝n├╝m├╝ katar.
ÔÇó Web uygulamalar─▒n─▒n tek s─▒k─▒nt─▒s─▒, h─▒zl─▒ ve pratik ├žal─▒┼čam─▒yor olman─▒zd─▒r. Web yaz─▒l─▒mlar─▒ masa├╝st├╝ndeki yaz─▒l─▒mlar gibi pratik kullan─▒lan ┼čeyler olmal─▒d─▒r
ÔÇó XMLHttpRequest asl─▒nda javascript ile sunulmu┼č bir kolayl─▒kt─▒r. Web sitesinin e┼č zamanl─▒ olarak arka planda ├žal─▒┼čan olaylar─▒n─▒ takip eder. XML CSS ve javascript ile sonucun an─▒nda g├Âr├╝lmesini sa─člar.
ÔÇó XMLHttpRequest istemci taraf─▒nda (Client Side) ├žal─▒┼č─▒r. Birden fazla asenkron web sayfas─▒na postback ve yenileme yapmadan istekte bulunabilir ve gelen cevaplar─▒ istekte bulunanlara iletir.

ONREADYSTATECHANGE
Sunucuya bir istek g├Ânderilmesinden sonra, sunucudan d├Ânen veriyi alabilecek bir i┼čleve ihtiyac─▒m─▒z var. onreadystatechange ├Âzelli─či sunucunun yan─▒t─▒n─▒ i┼čleyecek olan fonksiyonu tutar.
A┼ča─č─▒daki kod hem bo┼č bir fonksiyon tan─▒mlar hemde onreadystatechange ├Âzelli─čini ayarlar

xmlHttp.onreadystatechange=function(){ // Buraya kod yazaca─č─▒z}

 

READYSTATE ├ľZELL─░─×─░
Sunucu yan─▒t─▒n─▒n durumunu tutar. readyState her de─či┼čti─činde onreadystatechange fonksiyonu ├žal─▒┼čt─▒r─▒l─▒r. Sunucudan gelen yan─▒t─▒n tamamland─▒─č─▒n─▒ (veriyi alabilece─čimiz durumu) kontrol etmek i├žin onreadystatechange i┼člevimize bir If ifadesi ekleyece─čiz:

xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4)

{ // Veriyi sunucu yan─▒t─▒ndan al }
}

 

RESPONSETEXT ├ľZELL─░─×─░
Sunucudan gelen veri responseText ├Âzelli─či ile al─▒nabilir.
Kodumuzda “time” form de─či┼čkenimizin de─čerini responseText de─čerine e┼čitleyece─čiz:

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}
}

XMLHttpRequest nesnesini etkin ┼čekilde kullanman─▒n 2 yolu mevcut:

Send the Request
Bu y├Ântem bir XMLHttpRequest nesnesi yarat─▒p olaylar─▒ dinlemesi i├žin atamakt─▒r.
Basit olarak bir xhr nesnesi yarat─▒yoruz:

var xhr = new XMLHttpRequest();

Daha sonra olu┼čturdu─čumuz nesneyi onreadystatechange ile olaylar─▒ dinlemesi i├žin g├Ârevlendirmek:

xhr.onreadystatechange = myCallback;

Ard─▒ndan open() metodunu ├ža─č─▒r─▒yoruz.

xhr.open(‘GET’, ‘somefile.txt’, true);

ilk parametre HTTPRequest tipini belirler (GET,POST,HEAD,……) Get ve Post en s─▒k kullan─▒lanlard─▒r. Get deyimini istekle birlikte ├žok fazla data g├Ândermemiz gerekmiyorsa kullan─▒r─▒z. Bunun aksi durumlarda POST kullan─▒r─▒z.
─░kinci parametre bizim istekte bulundu─čumuz URL dir. ├ľrnekte belirtilen bir text dosyas─▒d─▒r sayfam─▒zla ayn─▒ adres i├žerisinde bulunur.
Son parametremizde iste─čin boolean de─čerdir iste─čin e┼č zamanl─▒ olmamas─▒ durumunu true veya false de─čer ile belirler.
Son ad─▒m olarak iste─či g├Ândermektir.

xhr.send(”);

Send() metodu istekle birlikte herhangi bir datay─▒da i├žerebilir. Get ile g├Ânderilen isteklerde bu bo┼č bir stringdir ├ž├╝nk├╝ data URL olarak belirtti─čimiz dosya yada adrestedir. POST ile g├Ânderilen isteklerde bir query string mevcuttur key=value&key2=value2.
Bu noktada istek g├Ânderilir ve kodlar di─čer bir g├Âreve atanabilir. Callback fonksiyonu iste─čimizim serverdan geri gelmesi ile ├ža─č─▒r─▒l─▒r.

Process the Response
Olay dinleyici cevap geldi─činde uyar─▒r ve kodlar─▒m─▒z gelen cevap ile yararl─▒ i┼čler yapar her gelen cevab─▒ bo┼ča kontrol ve ya i┼čleme sokmak zorunda kalmay─▒z.
Readystatechange olay─▒ ile bir dinleyici yerle┼čtirdik XHR nesnesinin readystate ├Âzelli─čini ├ža─č─▒rd─▒k. Readystatechange olay─▒ ├žal─▒┼čt─▒─č─▒nda her zaman de─či┼čen bir ├Âzelliktir .
Readystate ├Âzelli─či ┼ču de─čerleri takip eder
0ÔÇöuninitialized
1ÔÇöloading
2ÔÇöloaded
3ÔÇöinteractive
4ÔÇöcomplete = istek geri geldi ve i┼člendi.
Readystate ├Âzelli─čini 4 olarak ayarlad─▒─č─▒m─▒zda bunun anlam─▒ istek geri geldi ve i┼čleme girdi demektir. 4 ├Âzelli─či sadece bununlada kalmayarak HTTP istek durum kodlar─▒n─▒da inceler. Olmayan bir URL g├Ânderildi─činde al─▒nadan HTTP istek kodu 404 (Dosya bulunamad─▒) hatas─▒d─▒r.
E─čer d├Ânen durum kodu 200 (ok ) ise bu ge├žerli bir adres bulundu─čunu XHR nesnesinin ├žal─▒┼čabilece─čini belirtir.

function myCallback() {if (xhr.readyState < 4) {

return; // not ready yet

}

if (xhr.status !== 200) {

alert(‘Error!’); // the HTTP status code is not OK

return;

}

// all is fine, do the work

alert(xhr.responseText);

}

├ľnce istekte bulundu─čumuz sayfay─▒ yeni i├žerik olarak alm─▒┼č olaca─č─▒z ve bunu ister sayfada g├Âr├╝nt├╝leyebilir istersekte bir tak─▒m hesaplamalarda kullanabiliriz.

Hadi bununla ilgili bir uygulama yapal─▒m kafalarda nas─▒l ├žal─▒┼č─▒r bu sorusu olmas─▒n ­čśë
XMLHTTP REQUEST y├Ântemiyle databasede bulunan kategorilere ait ├╝r├╝nleri h─▒zl─▒ bir bi├žimde ekranda g├Âr├╝nt├╝leyece─čiz.
├ľncelikle XmlHttpRequest nesnemizi yaratmak i├žin bir function yaz─▒yoruz.

 

Daha sonra olu┼čturdu─čumuz bu nesneye get ile parametre yollayabilece─čimiz ve geri d├Ân├╝┼č sa─člayabilece─čimiz ba┼čka bir function daha yaz─▒yoruz.

Daha sonra Handler ile istekte bulundu─čumuz ├╝r├╝n grubunun kategori id sini birlikte yollayabilece─čimiz ba┼čka bir function daha yaz─▒yoruz.

Sayfam─▒z─▒n CodeBehind k─▒sm─▒ndada Repeater nesnesi ile databasedeki “Categories” tablosundaki kategori isimlerini buton nesneleri ile birlikte olu┼čturuyoruz.

Son olarak sayfam─▒z─▒ g├Âr├╝nt├╝ledi─čimizde hem butonlarla bir se├žim yapabiliyoruz hemde Dropdown men├╝ ile istedi─čimiz Kategoriye ait ├╝r├╝nleri g├Âr├╝nt├╝leyebiliyoruz.
Hi├ž beklemeden sanki masa├╝st├╝ uygulamas─▒ym─▒┼čcas─▒na h─▒zl─▒ ve pratik

Umar─▒m Yararl─▒ olur ­čśë

M.Zeki Osmanc─▒k

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.