İçeriğe geç

Kategori: Javascript, Es6

Javascript Callback nedir?

Javascriptte en çok kullanılan yapılardan biri de callback’lerdir. Bu yazıda asenkron fonksiyonları değil sadece callback yapısına değineceğim daha sonraki yazılarda asenkron yapılara await, then gibi özelliklere değineceğim.

callback
callback

En yalın hali ile callbackler başka bir fonksiyonun içine yolladığımız fonksiyonlardır.Basit bir örnekle daha iyi anlayalım:

	var callback = function(){
			alert("merhaba dünya")
		       }

	var button = document.createElement("button")
	button.onclick=callback

Yukarıdaki örnekte bir buton nesnesi oluşturduk ve bu buton nesnesinin onclick özelliğine bir callback atadık. Artık buton nesnesine yolladığımız fonksiyonun çalıştırılmasından biz sorumlu değiliz, onu eklediğimiz nesne onclick eventi gerekli olduğunda bizim dışarıdan verdiğimiz fonksiyonu çalıştırmış olacak. En yalın haliyle budur. Bir nesneye veya fonksiyona içeride kendi çalışma biçimine göre bizim ona yolladığımız bir fonksiyonu çalıştırmasıdır.

Şimdi bir fonksiyona bir fonksiyon yollayarak bir örnek yapalım.

var mycallback = function(s1,s2){
		
		return 	s1+" user"+s2
	
	}
	
	var mainfunc = function(callback){
		var s1 = "merhaba"
		var s1 = ", giriş başarılı."
		
		console.log(callback(s1,s2))
	}
	
	mainfunc(mycallback)
	//Output: merhaba user, giriş başarılı.

Böyle bir kullanım da olabilir örneğin express js hello world örneği tam anlatmak istediğimiz şeye uygun:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Yukarıdaki örnekte “(req, res) => res.send(‘Hello World!’)” kısım bir arrow fonksiyon yazımı(normal yazımı: function (req,res){} , arrow fonksiyonları başka bir yazıda değineceğim aklımızı karıştırmasın şimdi.), req, res yazması yolladığımız fonksyiona içeride req res adında parametrelerin yolanacağını ifade ediyor. Bunları yazmadan bir fonksiyon yollarsak zaten ana fonksiyonun içindeki req res değerlerine callback içinden ulaşamazdık. Bu parametlerelerle birlikte sanki main fonksiyonun içnideymişiz gibi bu değişkenleri istediğimiz şekilde kullanıp ana fonksiyona yollayabiliyoruz. Callback in en güzel yanı da budur. Umarım sade faydalı bir içerik olmuştur.

WEBGL nedir? -5 Ekrana üçgen, dörtgen çizdirme

Bu yazıda artık ilk 4 yazıda öğrenmemiz gereken şeyleri öğrendikten sonra birşeyler çizmeye başlayabiliriz. webgl ile ekrana bir kırmızı üçgen ve dörtgen çizimi şlemi yapacağız. Kaynak kodlara buradan ulaşabilirsiniz.

Kaynak kodu verdikten sonra biraz kodumuzu incelemeye geçelim.

gereksinimler

ilk olarak shader sınıfı ve matematik kütüphanesini import ediyorum. Webgl için gerekli matrix ve matematiksel işlemler için gl-matrix kütüphanesini kullandım. İsterseniz kaynak kodunu inceleyebilirsiniz. Uzun uzun matematik kodlarına girmeyeceğim.

import { CreateShaderProgram } from “../Shader/shader.js”
import { mat4, mat3, glMatrix} from “../lib/Math/gl-matrix.js”

gl parametrelerinin ayarlanması

Canvas ve shader programını oluşturduktan sonra gl objemi alıyorum. Daha sonra bazı gl kodları ile başlıyorum:

this.gl.viewport(0,0,this.canvas.width, this.canvas.height) // görüntü alanı 
                    //olarak kanvasın bütününü kullanacamızı belirtiyoruz
this.gl.enable(this.gl.DEPTH_TEST) // eğer derinlik oalrak üst üste gelen
                                   // bir pixel değeri varsa fragment shaderde 
                                   //işleneceğini ayarlıyor.
this.gl.clearColor(0.4689,0.5006,1,1) // arka fona verdiğim renk
this.gl.clear(this.gl.COLOR_BUFFER_BIT) // ayarlanan renk ile ekranı siler
this.gl.useProgram(this.shaderProgram) // shader kullnaımını set ediyorum.

Shader adresleri

Bu ksımdan sonra önceki shader yazılarından anlayacağımız üzere shaderden model matrix, position ve renk değişken adreslerini alıyorum:

this.vertexPos= this.gl.getAttribLocation(this.shaderProgram,"aVertexPosition")
this.ModelLoc = this.gl.getUniformLocation(this.shaderProgram,"uModelViewMatrix")
this.colorPos= this.gl.getUniformLocation(this.shaderProgram,"vColor")

Gene önceki yazılardan tanıdığımız bir kod vertexPos attribute adresini aktif ediyorum

this.gl.enableVertexAttribArray(this.vertexPos)

Model matrisi ve çizim

Sonraki adımda model düzlemimi belirleyen matrisi ayarlıyorum. Ben ortogonal yani dikey düzlem kullanacağım. dikey düzlemde perspektif olmaz. Dümdüz görürsünüz.
this.ModelMatrix = new Float32Array(16)
mat4.ortho(this.ModelMatrix,-2,2,-2,2,-2,2) // ilk iki sayı genişlik, sonraki yükseklik ve ensondaki derinliği ifade eder.
console.log(this.ModelMatrix);

Daha sonra çizim işlemi için vertex verileri ve bufferları dolduruyorum ve çizim yapıyorum.

var vertex =[
-0.5,-0.5,0,
-0.5, 0.5,0,
0.5,-0.5,0,
]

var vertexBuffer=this.FillBuffer(vertex)

this.gl.uniformMatrix4fv(this.ModelLoc, false, this.ModelMatrix)
this.gl.uniform4fv(this.colorPos, [1,0,0,1])

this.gl.bindBuffer(this.gl.ARRAY_BUFFER,vertexBuffer)
this.gl.vertexAttribPointer(this.vertexPos, 3, this.gl.FLOAT, false, 0 ,0)
this.gl.drawArrays(this.gl.TRIANGLES,0,3)

Ve sonuç biçok yazıdan sonraki sonuç:

webgl

WEBGL nedir? -4 Vertex Shader ve Fragment Shader açıklama

Bu yazıda shaderlerden bahsedip sonra shader programla olan ilişkisini açıklayacağım. Daha sonaki yazılarda webgl kısmı ile ekrana birşeyler çizdirmeye başlayacağım. Vertex shader ve Fragment shader webgl tarafında çizim için çok gerekliler bu yüzden bu kısımları iyi öğrenmemiz gerekiyor. Çok hızlı bir süreç değil fazla şey bilmek gerekiyor ama bildikten sonra yapması eğlenceli.

Vertex Shader:

Öncelikle shader language yazısında kullandığım vertex shader kodundan açıklamaya başlayalım.

const vsSource = `
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main(void) {
gl_Position = uModelViewMatrix * vec4(aVertexPosition,1);
}
`;

yukarıdaki vertex shader kod parçacığında ilk olarak attribure değişkenleri olarak aVertexPosition, ve aVertexColor değişkenleri tanımlıyoruz bunlar attribute tipinde çünkü her vertexin kendine özel koordinat ve renk bilgisi var. Sonra sabit dışarıdan verdiğimiz uModelViewMatrix ve uProjectionMatrix 4×4 matrisleri var bunlarında tipi uniform yani dışarıdan biz tekar set etmediğimiz sürece aynı kalan değişkenler. Zaten bu değişken tiplerine önceki yazımda değinmiştim.

Peki yukarıdaki olay nedir? Model matris ile vertex vektörünü çarpıp cismin clip spacedeki yeni buluyoruz. yukarıdaki kodda uProjectionMatrix ile çarpmadım yani herhangi bir perspektife sahip değil. Eğer perspektif eklemek istiyorsak en başa uProjectionMatrix i çarpım olarak yazmamız gerekirdi.

Mesela yukarıdak kodda aVertexPosition vec3 tipinde yani 3 eksenli bir koordinat ama bu 2 eksenli de olabilirdi iki eksenli olsaydı yani vec2 aVertexPosition; o zaman çarpımda kullandığımız değer şu şekilde olacaktı *vec4(aVertexPosition,0,1)

 

Fragment shader :

Gene shader language yazımdaki fragment shader kodunu alacağım.

const fsSource = `
uniform lowp vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
`;

Burada ilk olarak dikkat ettiğimiz vColor değişkeninin lowp limitinde olması bunun nedeni renk değeri 0 ile 1 arasında oluyor. yani beyaz vec3(1,1,1) rengi opaklığı da eklersek vec4(1,1,1,1) şeklinde olur. Bu renklerde de çok çok büyük sayılar kullanmıyorsak en düşük limitler işimi çok rahatlıkla görecektir. Buradaki shader kodlar en sade haliyle mesela fragment shaderde şu an texture eklemedik. Çizdiğimiz şeye sadece renk veriyoruz.

 

Shader Program:

Shader kodları bu şekilde tanımlandıktan sonra gl ile vertex shader ve fragment shader nesneleri oluşturuluyor.

const vertShader = gl.createShader(gl.VERTEX_SHADER)
const fragShader = gl.createShader(gl.FRAGMENT_SHADER)

daha sonra bu shaderlere yukarıdaki kaynak kodlar gösterilip bu kodlar bu nesneler için derleniyor.

gl.shaderSource(vertShader,vsSource)
gl.compileShader(vertShader)

gl.shaderSource(fragShader,fsSource)
gl.compileShader(fragShader)

Bu adımdan sonra gl ile gpu da koşacak programımızı oluşturuyoruz.

const shaderProgram = gl.createProgram()

Ve oluşturulan bu programa shaderer tutuşturulup vertex shader ve fragment shader birbirine bağlanıyor.

gl.attachShader(shaderProgram, vertShader)
gl.attachShader(shaderProgram, fragShader)
gl.linkProgram(shaderProgram)

Yani shader programı yaratılırken hangi shaderleri derleyip hangisinin birbiriyle bağlanacağına biz karar veriyoruz. Program GPU da koşuyor ama yönetim bizde oluyor. Bir sonraki yazıda artık ekrana birşeyler çizdireceğim. Tabi bu aşamada da shader programına hangi değişkenlere hangi değerlerin gideceği konusunda bizim yardım etmemiz gerekiyor bu adımları da görmüş olacağız.

Angular2 Components ve Templates

Angular2 Companents:

angular2 Components
Components

Angular2 versiyonunda, Component view(görünüm) olarak adlandırdığımız ekran yamasını kontrol eder.

Örneğin şu görünümler componentler tarafından kontrol edilir:
-Navigasyon bağlantıları olan root uygulama,
-Kahraman listesi.
-Kahraman editörü.

Component uygulama mantığı -görünümün neyi desteteklediği- class ların içinde tanımlanır. Class lar görünümlerle API nin özellikleri veya metodları ile etkileşime geçer.

 

Örneğin HeroListComponenet bir hero metoduna sahip ve metod servisten alınan hero dizisini geri döndürüyor. HorolistComponent ayrıca selectHero() motoduna sahiptir bu metod kullanılarak kullanıcı listeden seçilen bir kahramana tıkladığında selectedHero özelliği ile ayarlar.

angular2 components
Components

Angular kullanıcı uygulamadayken componentleri create, update ve destroetme özelliğine sahiptir. Uygulamanız opsiyonel yaşamdöngüsü(lifecycle) kancalarına göre her anda bir aksiyon alabilir, yukarıda resimde belirtilen ngOnInit() gibi.

 

Templates:

angular2 templates
Templates

angular2 template
Template

Bir componentin görünümünü(view) template(şablon) ile tanımlarız. Template Angular a nasıl render edeceğini söyleyen HTML in formudur.

Bir template normal HTML gibi gözükür ama ufak tefek farklilıkları vardır.

HeroListComponent:
(resim)

Tipik <h>, <p> gibi HTML elementlerini kullanılmasına rağmen ayrıca bazı değişiklikler de vardır: *ngFor, {{hero.name}}, (click), [hero] ve <hero-detail> gibi Angular syntaxını kullanırlar.

Son satırdaki <hero-detail> tagı yeni bir component -HeroDetailComponent- hazırlayan özel bir tagdır.

HeroDetailComponent daha önce incelediğimiz HeroListComponent componentinden farklı bir componenttir. HeroDetailComponent (kodu gösterilmedi) kullanıcının HeroListComponent ile sunulmuş kahraman listesinden kullanıcının seçmiş olduğu belli kahramanlar hakkında bilgileri gösteriyor. HeroDetailComponent, HeroListComponent in çucuğudur.

angular2 component tree
Component tree

<hero-detail> tagının normal html tagları arasında nasıl kolayca yer edindiğine dikkat edin. Özel componentler HTML ile aynı layoutta sorunsuz bir şekilde karıştırılabilir.

Önceki yazı <<-

 

Angular2 Moduller

Moduller:

Angular Module
Angular Module

Angular uygulamaları modülerdir ve NgModules (bir uygulamanın koordineli bloklar halinde düzenlenmesine yardımcı olur) adında kendi modülerlik sistemine sahiptir. NgModules büyük önem taşır daha ayrıntılı bilgiyi bu sayfadan(https://angular.io/guide/ngmodule) bulabilirsiniz.

Her angular uygulaması alışılmış olarak AppModule isminde, root module olan en az bir NgModule sınıfı içerir.

Root module küçük bir uygulamadaki tek modül olabilse de, çoğu uygulamanın daha birçok özellikte modülü vardır; her biri, bir uygulama alanına, iş akışına veya yakından ilgili bir dizi özellik için ayrılmış bir kod bloğu vardır.

NgModule, bir kök veya özellik olsun, @NgModule dekoratörlü bir sınıftır.

NgModule modül özelliklerini açıklayan tek bir meta data objesi alan bir dekoratör fonksiyonudur. En önemli özellikler şunlardır:

 

Declarations: view clasları da bu modüle aittir. Angular 3 view classına sahiptir bunlar: components, directives, pipes.

Exports: declarationların alt kümesi olarak modüllerin templatelerinde görülebilir veya kulanılabilir hale gelirler.

İmports: Başka modüllerin export edilmiş classlarına, component temlatesi tarafından ihtiyaç duyulduğunda burada tanımlanır.

Providers: Servis sağlayıcıları olarak adlandırılabilir, bu modül servislerin global bir koleksiyon olmasını sağlar, bu sayede uygulamanın her yerinden ulaşılabilir hale gelirler.

Bootstrap: Ana uygulama görünümüne sahip root componenti belirtir. Diğer bütün uygulama görünümlerini barındırır. bootstrap özelliği sadece root componentine atanır.

Örnek bir root module:

root module
root module

Yukarıdaki örnekte sadece export kısmının nasıl çalıştığını göstermek için kullanıldı. Root modulünün herhangi birşey export etmesine gerek yok çünkü diğer modüllerin root modülünden birşey import etmesine ihtiyacı yok.

Bir uygulama root modülünün önyükleme yapılması ile çalıştırılır. main.ts içerisinde şu şekilde görebilirsiniz:

bootstrapping module
bootstrapping module

NgModules vs JAvaScript Modules:

NgModule (@NgModule ile dekore edilmiş bir sınıf) Anguların temel bir özelliğidir.

Javascript obje kolaksiyonlarını yönetmek için kendi modül yönetim sistemine sahiptir. NgModule sisteminden tamamen ayrı ve ilişkisi yoktur.

Javascripte Her dosya bir modüldür ve bu module ait bütün objeler bu dosyada tanımlanır. Modülde bazı sınıflar public anlamına gelen “export” anahtarı ile işaretlenir. Diğer javascript modulleri başka sınıfların public sınıflarına ulaşmak için “import” ifadelerini kullanır.

Js import export
Js import export

Angular Libraries:

Angular2 library
Angular2 library

Angular, Javascript modülleri koleksiyonu olarak düşünülebilir.

Her angular kütüphanesi “@angular” öneki ile başlar.

npm paket yöneticisi ile indirip javascript “import” ifadesi ile onları ekleyebiliriz.

Örneğin Angular ın “Component” decoratörünü “@angular/core” kütüphanesinden şöyle ekleyebiliriz:

js import
js import

Bunun yanında Javascript import ifadelerini kullanarak NgModules de ekleyebiliriz:

js import
js import

Yukarıdaki örnek root modülünde “Browsermodule” kısmını javascript import ifadesi ile eklemiştik, Bu metariale ulaşmak için @ngModule de import metadatasına şu şekilde eklememiz gerekir:

Ng module import
Ng module import

Bu şekilde hem angular hemde Javascript import sistemini kullanmış olduk.

Önceki yazı <<-

->> Sonraki yazı

Angular2 nedir?

Angular2 Mimarisi:

Bu yazı dizisinde kaynak olarak Angular2 quickstart dökümanından çevirerek ilerleyeceğim. versiyon 2 ile birlikte yapısal bir değişkliğe gidildiği için devamında angular olarak da bahsedebilirim artık birinci sürümün pek bir önemi yok. Çevirmeler bitikten sonra kod örneklerine de geçebilirim fırsat oldukça bu şekilde ilerleme yapacağım. Bu yazı dizisinde amacım çok üstünkörü değil temelleriyle birlikte anlatmaya çalışmak. Bir şeyi ne kadar temelden öğrenirseniz o kadar faydalı olur.  Hadi temelden angular nedir öğrenmeye başlayalım:

Angular client uygulamaları yapmak için HTML ve Javascript yada Javascripti derleyen bir dil olan TypeScript(classlar oluşturarak daha rahat ve daha az karmaşık js kodu yazmamızı sağlar .ts uzantılıdır derlendiğinde normal javascript koduna dönüşür.) i kullanan bir frameworktür.

Angular frameworkü bazı temel kütüphaneler yada seçime bağlı kütühanelerden oluşur.

Angular uygulamaları yazılırken HTML *tema parçalarını(templates) Anglularize olmuş işaretlerle oluşturulur, bu temaları kontrol etmek için *companent sınıfları(class) yapılır, *servislerde uygulama mantığı eklenir.

Daha sonra uygulama onyükleyici(bootstrapping) root modülü tarafından çalıştırılır. Angular devreye girer ve uygulama tarayıcıda tarayıcıda sağlamış olduğunuz talimatlar doğrultusunda kullanıcıdan yanıt bekler.

 

Angular2 Mimari
Angular2

->> devam yazısı Modüller ve diğerleri

WebGL Yazı dizisi -1

WebGl nedir?

logo-webgl
WEbGL

3D animasyonları tarayıcı üzerinde gerçekleştirmek için bize olanak sağlayan bir javascript API sidir.

Khronos grup tarafından geliştirilen bir web standartıdır.Khronos Gurup a ek olarak Google (Chrome), Mozilla (Firefox), Apple (Saferi) ve diğer 3D yazılım geliştiricileride destek vermektedir.

Spesifik bir bağlam olan HTML canvas elementinde çalıştırılır, bu size Javascript te hardware-accelerated 3D oluşturucusuna ulaşmanızı sağlar. Çünkü WebGL canvas elementinde çalışır, ayrıca WebGl Bütün DOM arayüzleriyle tamamen entegredir. WEbGl API OpenGL ES 2.0 temellidir, bunun anlamı birçok farklı aygıtta çalışabilir, örneğin masaüstü bilgisayarlar, telefonlar, TV vs. Bunlara Khronos in web sitesinde spesification bölümünden ulaşabilirsiniz.

Nasıl çalıştıracağım ?

Genelde ek bir işlem yapmanıza gerek yok Chrome ve Firefoxta kullandığınız sürümler WEbGl i destekliyor çok eski olmadığı sürece.

Ayrıca İyi bir grafik kartına sahip olmanız WEbGl performansınızı artırır.

Ne için kullanılır ?

Geliştiricilere Gerçek zamanlı 3d grafikleri tarayıcıda oluşturmaya izin verir. WEbGl ile interaktif müzik, videolar,oyunlar, data sanallaştırması, art, 3D tasarım ortamları, 3D uzay modelleme, 3D nesne modelleme, matematiksel fonksiynların denenmesi,fiziksel simülasyonların yapılması gibi birçok şey uygulanabilir bu sizin hayal gücünüzle sınırlı bir dünya.

Nasıl çalışır ?

Tipik web teknolojilerine göre daha fazla karmaşıktır, çünkü direkt olarak grafik kartıyla çalışması için tasarlanmıştır. Sonuç olarak çok düşük seviyedir.Bu karmaşık 3D gerçekleştirmeleri içeren bir çok hesabı çabucak yapmaya imkan sağlar.

WEbGl in iç işleyisini(rendering) tamamen anlamana gerek yok. Karmaşık işleri elden çıkaran birkaç tane WEbGL kütüphanesi mevcut. Ancak kütüphanende olmayan seçenekler le kodunu zenginleştirmek istersen nasıl çaçlıştığını anlamak kullanışlı olabilir yada daha iyi kavramak için kütüphanelerin bunu nasıl yaptığını görmek ile de bunu yapabilirsiniz seçim tamamen size ait.

WebGL programlama yaparken, genellikle bir tür sahne(scene) işlemek hedefliyoruz.Bu, genellikle bir işlem oluşturma boru hattı(pipeline) adı verilen olsa da GPU içinde gerçekleştirilmektedir, her biri çok sayıda daha sonraki çizim işleri veya “çağrı” içerir.

Birçok gerkeç-zamanlı ^d çizimlerde olduğun gibi üçgen modellerin çiziminde temel elemandır. Bu nedenle WEbGl deki çizim işlemi, spesifik bilgileri oluşturmak için java script kullanır nerede, üçgenler nasıl üluşturuldu ve nasıl görünüyor(renk, gölgelendirme,yazı vs.) gibi bilgiler.Sonra bu bilgiler, hangi işlem olduğu ve döndürdüğü sahne(scene) görüntüsü GPU ya yollanır. Daha sonra bu son olayın nasıl olduğunu anlatacağım. Tam oalrak temel olay bu son kısımda aslında o yüzden bu kısmı ayrı bir yazıda anlatacağım.

Velocity ve GSAP nedir?

 

Velocity.js ve GSAP popüler Javascript animasyon kütüphanelerindendir. Bu kütüphaneler hem birlikte hemde jquery olmadan kullanılabilir.Jquery ile kullandığınızda performansınızda herhangi bri bozulma meydadna gelmez.jQuery sayfanızda varsa, sadece yapmanız gereken jQuery’nin $.animate(). ‘si gibi Velocity ve GSAP kullanabilirsiniz.