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.