Neden HTML CSS ve JS? Neden bu kadar önemli?

ZyraPasaa · 19 Tem 2022

Selam, iyi günler!

Bu gün sizlere başlıkta gördüğünüz gibi html, css vs js dillerinin önemini, kullanım yerlerini anlatacağım. Aslında bu konudan önce "webste neden bu kadar önemli?" sorusuna cevap vermem gerekli. Website ve web servisleri sayesinde uygulamalarmıza patch, online alışveriş, kendimizi ve yaptığımız işleri tanıtabiliyoruz. Bunlardan farklı olarak, "memoryhackers.org" gibi forum sitelerini kurup insanlarla belirli konular hakkında tartışabiliyoruz. Daha da ileri gidersek sosyal media, web tabanlı oyunlar bile yapabiliyoruz. Müşteri yani client ile bire bir, canlı canlı görüşebiliyoruz. Belki sayamadığım bin farklı kategori, bin farklı hizmet...

html-hyper-text-transfer-protokol-nedir-ne-ise-yarar-800x400.jpg

HTML Nedir?

Çoğu insanın yanlış bildiği bir konu. "HTML bir progamlama dilidir." HAYIR! HTML sadece işaretleme dilidir. Nedir peki bu işaretleme dili? Progamlama dili ile aralarındaki fark nedir?

İşaretleme dili, metin işlemesi için kullanılır.
İşaretleme dili, tanımlama için kullanılır.
İşaretleme dili, çalıştırılabilir bir komut dosyası oluşturmaz.
İşaretleme dili okuma ve yorumlama üzerine ilerler.
İşaretleme dili, mantıksal operator, değişken, değer, döngü gibi komutları bünyesinde barındırmaz. (Örn: 2+2 işleminin sonucunu bulamazsınız.)

HTML dışında başka hiçbir dil işaretleme dili olarak kabul edilmez. Website, sadece ve sadece HTML dosyasını okur. Bildiği tek bir dil HTML'dir. HTML'in bu kadar sade bir dil olması onu basit ve tek kurallı olmasını içerir. "<" aç, tagını yaz ve ">" ile kapat. En çok kullanılar HTML DOM nedir, onlara bakalım.

<html>HTML</html> => İçerisine html kodları yazılacağını belirtilen tag. Sayfa içerisinde sadece 1 defa kullanılır ve bütün taglar bunun içerisine yazılmak zorundadır.
<head>Tag</head> => Sayfa hakkında ön bilgileri barındırır. İçerisine sadece tarayıcının bizlere sunduğu meta ve taglar yazılabilir.
<body>İçerik</body> => Kullanıcıların gördüğü kısımdır. İçeriklerin hepsi buranın içerisine yazılmak zorundadır.
<div>İçerik</div> => Kutu anlamına gelir. Elementleri kaplamak için kullanırız.
<a href="
Bağlantıları görmek için lütfen Giriş Yap
">İçerik</a> => Yönlendirmek için kullanırız. Tıklandığı zaman "href" içerisindeki adrese yönlendirir kullanıcıyı.
<ul>İçerik</ul> => Bir liste kapsayıcısını belirtir. İçerisine li elementi ile kullanırız.
<li>İçerik</li> => Listenin elementini belirtmek için kullanırız. İçine yazılanlar ul kapsayıcısının elemanıdır.
<h1>İçerik</h1> => Paragraf başlığını belirtmek için kullanırız. H1 ve H6 arasında boyutları mevcuttur.
<p>İçerik</h1> => Paragraf oluşturmak için kullanılır.
<button>İçerik</button> => Button oluşturmak için kullanır. Geriye click eventini fırlatır.
<input type="text"> => Kullanıcıdan değer almak için kullanılır. Radio, text, email gibi tipleri vardır.

Bunlar gibi, yüzlerce farklı DOM bulunmaktadır. Bu yazdıklarım en bilindik ve en çok kullanılanlar. Bunlar ile websitemizde tanımlanmış element oluşturuyoruz.

CSS Nedir?

HTML'de olduğu gibi CSS'de bir progamlama dili değildir. Fakat HTML gibi işaretleme dili de değildir. CSS kendine özgü, stillendirme dilidir. HTML gibi sadece tek çeşitli bir dildir. Başka stillendirme dili yoktur, tarayıcı sadece CSS dilinden anlar. CSS'in komutlarına göre HTML elementlerini stillendirir. Rengini, şeklini, konumunu, hizalanmasını, boyutunu hatta animasyonunu CSS ile yaparız.

Stillendirme dili, kendine özgü kuralları vardır, dışarısına çıkılamaz.
Stillendirme dili, dişarıdan değer alamaz, değer okuyamaz.
Stillendirme dili, mantıksal operator, değişken, değer, döngü gibi komutları bünyesinde barındırmaz. (Örn: 2+2 işleminin sonucunu bulamazsınız.)
Stillendirme dili, tanımlama için kullanılmaz.
Stillendirme dili, çalıştırılabilir komut dosyası içermez.

CSS kullanmak için biraz ezber gerekiyor. Biraz da emir dinlemek gerekiyor. Kafanıza göre stil yazamazsınız. CSS'in size sunduğu komutlar dışı komut kullanamazsınız yani. HTML'de yazdığım gibi en çok kullanılan CSS dizilerini yazmak isterdim fakat az önce dediğim gibi ezber isteyen bir dildir ve o kadar fazla içeriği vardır ki yazmaya gözüm korkuyor xD

JavaScript Nedir?

HTML'de olduğu gibi JavaScript bir progamlama dili değildir yazmak isterdim fakat yalan söylemiş olurum. JavaScript HTML ve CSS'den bağımsız olarak bir progamlama dilidir. İçerisinde mantıksal operator, döngüler ve değişkenler barındırırlar. Peki JavaScript'i bu kadar değerli yapan şey nedir? Bunun tek bir cevabı vardır o da NodeJS. NodeJS, sizin JavaScript kodlarınızı sunucu tarafında çalıştırmanızı sağlar. Böylelikle server side işlerinizi yaptırabilirsiniz. Bunun ile birlikte JavaScript 2 bölümden oluşuyor. Client Side üzerinde kullanılan JavaScript ve Server Side için yazılan NodeJs.

Client Side üzerinde yazılan JavaScript çalıştırılmak için bir kural belirlenmez. Tarayıcı üzerinden bu kodlara erişilebilir ve değiştirilebilir. Genellikle eventlere cevap vermek için kullanılır. Mesela site üzerinden bir buttona basıldığı zaman bir şey yaptırmak istiyorsanız JavaScript ile Click eventini yakalamanız gerekli. Genellikle bu tür işleri yapmak için kullanılır. JavaScript'in temelidir.

Server Side üzerinde yazılan JavaScript kodlarını çalıştırmak için NodeJS ile çalıştırmamız gerekmekte. Bu kodlara dişarıdan kimse erişemez ve değiştiremez. SQL bağlantıları, veri alıp vermek, veri okumak için kullanılır. Kısacası arkaplan sistemleri yazılır. En basit örnek, login olayı. Giriş yapıldığı zaman SQL ile bağlantı kurar, kullanıcının kullanıcı adı, şifresini kontrol eder. Duruma göre yönlendirme ve işlemler yapar. JavaScript'i değerli ve ünlü yapan kısım burasıdır. Web sağlayıcısını sunucu tarafına taşıdığı için çoğu işi yapmamızı sağladı. Basit örnekler verecek olursak discord ile bağlantı kurar ve discord bot kodlamamızı sağlar. API'ler ile siteler arası ilişki kurar, bağımsız veri alıp vermeyi sağlar.

JavaScript'i övdük. Biraz da gömelim. Diğer progamlama dillerine göre nelerin kötü olduğuna bakalım. Progamlama dilleri ile haşır neşir olanlar iyi bilir. JavaScript'in OOP(Object Oriented Programming) kısmı çok zayıftır. ES6 ile gelen Class yapıları ile bu düzeni kapatmak istediler. Fakat JavaScript doğası gereği OOP'si hiçbir zaman C# ve ya daha detaylı diller ile aynı düzey olamaz. JS'de kullandığımız Class yapıları aslında objedir. Doğası gereği OOP güçlü olmuyor. Eğer çok güçlü olsaydı, belki şu an çok farklı konuları konuşuyor olurduk...

SON

Sizlere HTML CSS ve JavaScript hakkında temel ve bilinmesi gereken şeyleri anlattım. Umarım sizlere yardımcı olmuşumdur ve bilgilendirmişimdir. Bilgili arkadaşlar yanlış bildiğim bir yer fark ederlerse yoruma yazmalarını rica ediyorum. Hızla düzeltirim. Kendimi tanıtmak gerekirse ben Batuhan, 7 yıldır yazılım sektörü içerisindeyim. Son 4 yıldır profesyonel olarak işler yapıyorum. Ulaşmak isterseniz "ZyraPasaa#2802" ekleyebilirsiniz veya "zyrapasaa" instagram adresinden takip edebilirsiniz. Ayrıca sormak istediğiniz farklı sorular olursa yorumlarda cevap vereceğime emin olabilirsiniz. Benlik bu kadar, ZyraPasaa out xD

regloy · 19 Tem 2022

html css site açma konusunda herşeyin temeli olduğu için önemli diye biliyorum bende kodlama ögrenmeye başladıgım zaman ilk bu ikisini öğrenmiştim.

erenerel37 · 19 Tem 2022

güzel anlatmışsın helal olsun

hamzayusuf4747 · 19 Tem 2022

çok iyi özetlemişsin

zort313131 · 20 Tem 2022

detaylı ve güzel anlatmışsın ellerine kollarına sağlık kanka

alperenadem12 · 20 Tem 2022

Ustam detaylı anlatımın çok iyi teşşekürler bilgielr için

krujstr · 20 Tem 2022

çok iyi özetlemişsin

Post automatically merged: 20 Tem 2022

çok iyi özetlemişsin

rnzdmr88 · 20 Tem 2022

Merhabalar, konuya ilgisi olan ama güncel olarak herhangi bir bilgisi bulunmayan kişilere başlangıç olarak göstereceğiniz bir yol var mı? Bahsederseniz çok sevinirim.
İyi forumlar!

ZyraPasaa · 20 Tem 2022

rnzdmr88' Alıntı:
Merhabalar, konuya ilgisi olan ama güncel olarak herhangi bir bilgisi bulunmayan kişilere başlangıç olarak göstereceğiniz bir yol var mı? Bahsederseniz çok sevinirim.
İyi forumlar!

Tabiki de.
Öğrenme sırası kesinlikle HTML > CSS > JavaScript olmalı. Nedeni ise, CSS'i billmek için HTML bilmemiz gerekmekte. Aynı şekilde, JavaScript'i Client Side kodlamak istiyorsan CSS bilginin olması gerek. O yüzden sıralama böyle. Nereden öğreneceğim konusuna gelirsek;
Paranız var ise Udemy üzerinden "Sadık Turan" adlı kişiden kurs satın alabilirsin. Tavsiyem o, çok güzel anlatıyor. Durmadan güncelliyor ve öğrencilerine önem veriyor. Maddi durumunuz yok ise YouTube üzerinde HTML ve CSS anlatan bir çok kanal var. Pek bilgim yok, şu kanal iyi anlatıyor diyemeyeceğim maalesef. JS konusuna gelecek olursak, tavsiyem basit bir şekilde öğrenip kendiniz proje geliştirmek. Nedeni ise, HTML ve CSS'den bağımsız olarak progamlama dilidir ve kolayca, ezberlenerek öğrenilecek konu değildir.
Kaynak bulmakta sıkıntı çekiyorsan bana ulaşabilirsin, daha detaylı inceleyip önüne sunabilirim.

Post automatically merged: 20 Tem 2022

erenerel37' Alıntı:
güzel anlatmışsın helal olsun

regloy' Alıntı:
html css site açma konusunda herşeyin temeli olduğu için önemli diye biliyorum bende kodlama ögrenmeye başladıgım zaman ilk bu ikisini öğrenmiştim.

Kaplan Ateş' Alıntı:
güzel anlatmışsın helal olsun

Teşekkür ederim, umarım işinize yaramıştır.

suporhoros · 22 Tem 2022

ZyraPasaa' Alıntı:
Tabiki de.
Öğrenme sırası kesinlikle HTML > CSS > JavaScript olmalı. Nedeni ise, CSS'i billmek için HTML bilmemiz gerekmekte. Aynı şekilde, JavaScript'i Client Side kodlamak istiyorsan CSS bilginin olması gerek. O yüzden sıralama böyle. Nereden öğreneceğim konusuna gelirsek;
Paranız var ise Udemy üzerinden "Sadık Turan" adlı kişiden kurs satın alabilirsin. Tavsiyem o, çok güzel anlatıyor. Durmadan güncelliyor ve öğrencilerine önem veriyor. Maddi durumunuz yok ise YouTube üzerinde HTML ve CSS anlatan bir çok kanal var. Pek bilgim yok, şu kanal iyi anlatıyor diyemeyeceğim maalesef. JS konusuna gelecek olursak, tavsiyem basit bir şekilde öğrenip kendiniz proje geliştirmek. Nedeni ise, HTML ve CSS'den bağımsız olarak progamlama dilidir ve kolayca, ezberlenerek öğrenilecek konu değildir.
Kaynak bulmakta sıkıntı çekiyorsan bana ulaşabilirsin, daha detaylı inceleyip önüne sunabilirim.

Post automatically merged: 20 Tem 2022

Teşekkür ederim, umarım işinize yaramıştır.

Dostum eline sağlık çok güzel anlatmışsın. Ben HTML'i de CSS'i de Youtube üzerinden öğrendim. BroCode freecodecamp.org gibi kanallar var İngilizce anlatıyorlar ama bence bu dilleri İngilizce öğrenmek daha iyi. İlgisi olanlar bakabilirler.

ZyraPasaa · 22 Tem 2022

suporhoros' Alıntı:
Dostum eline sağlık çok güzel anlatmışsın. Ben HTML'i de CSS'i de Youtube üzerinden öğrendim. BroCode freecodecamp.org gibi kanallar var İngilizce anlatıyorlar ama bence bu dilleri İngilizce öğrenmek daha iyi. İlgisi olanlar bakabilirler.

Tesekkür ederim, umarım ilgisi olan bu yorumu görür.

ismail8064 · 30 Tem 2022

JavaScript'i övdük. Biraz da gömelim. Diğer progamlama dillerine göre nelerin kötü olduğuna bakalım. Progamlama dilleri ile haşır neşir olanlar iyi bilir. JavaScript'in OOP(Object Oriented Programming) kısmı çok zayıftır. ES6 ile gelen Class yapıları ile bu düzeni kapatmak istediler.

Javascript OOP desteklemez sadece sugar syntax var
örneğin
function BlaBlaBla(props){

this.blanblan=props.blanblan;

}

JavaScript'de bir fonksiyonu class olarak kullanabiliyoruz bu kod ile new BlaBlaBla() yazıp yeni bir obje oluşturabiliyoruz her classda olması gereken özellikler içinde JavaScript'de bulunan prototype özelliği kullanılabilir değişkene verilirse tabi veya yerine göre statik değişken kullanımı interface kullanımı gibi dediğiniz gibi JS'de OOP zayıf ama YOK yani kısaca yok
yine basit bir örnek vereyim OOP'de standart tabir olan encapsulation'ı JavaScript'de bir map döndürerek kısaca cheat yaparak yapıyoruz

const encapsulation=( ()=>{

const erisilemeyenDeger=1;

return {
erisilemeyenDegerSetprop)=>erisilemeyenDeger=prop;

}

} ) ()

==> () () = ANINDA ÇALIŞ

Bu şekilde küçük küçük olaylar dönüyor yazıda bahsedildiği gibi "OOPSİ ZAYIF YA" değil direk yok kardeşim o yüzden JS'de design patternlar hiç olmadığı kadar önemli en ufak pure js projsinde design pattern kullanmak zorundasınız aksi halde "JS'İN OOPSİ ÇOK ZAYIF YA" der durursunuz

ZyraPasaa · 1 Ağu 2022

ismail8064' Alıntı:
JavaScript'i övdük. Biraz da gömelim. Diğer progamlama dillerine göre nelerin kötü olduğuna bakalım. Progamlama dilleri ile haşır neşir olanlar iyi bilir. JavaScript'in OOP(Object Oriented Programming) kısmı çok zayıftır. ES6 ile gelen Class yapıları ile bu düzeni kapatmak istediler.

Javascript OOP desteklemez sadece sugar syntax var
örneğin
function BlaBlaBla(props){

this.blanblan=props.blanblan;

}

JavaScript'de bir fonksiyonu class olarak kullanabiliyoruz bu kod ile new BlaBlaBla() yazıp yeni bir obje oluşturabiliyoruz her classda olması gereken özellikler içinde JavaScript'de bulunan prototype özelliği kullanılabilir değişkene verilirse tabi veya yerine göre statik değişken kullanımı interface kullanımı gibi dediğiniz gibi JS'de OOP zayıf ama YOK yani kısaca yok
yine basit bir örnek vereyim OOP'de standart tabir olan encapsulation'ı JavaScript'de bir map döndürerek kısaca cheat yaparak yapıyoruz

const encapsulation=( ()=>{

const erisilemeyenDeger=1;

return {
erisilemeyenDegerSetprop)=>erisilemeyenDeger=prop;

}

} ) ()

==> () () = ANINDA ÇALIŞ

Bu şekilde küçük küçük olaylar dönüyor yazıda bahsedildiği gibi "OOPSİ ZAYIF YA" değil direk yok kardeşim o yüzden JS'de design patternlar hiç olmadığı kadar önemli en ufak pure js veya react veya herhangi bir lib projsinde design pattern kullanmak zorundasınız aksi halde "JS'İN OOPSİ ÇOK ZAYIF YA" der durursunuz

Aslında aynı şeyi savunuyoruz. Yazdığım yazının JS kısmını tam okusaydın az çok aynı şeyleri dediğimizi anlardın. Class yapısı sadece tanım olarak geldi. Sonuç olarak arkada obje olarak işleniyor. Umarım kafasında soru işareti olan birisi bu yorumu görür ve kafasında soru işareti kalmaz.

ardasen1 · 1 Ağu 2022

çok güzel anlatım olmuş teşekkür ederim

ZyraPasaa · 2 Ağu 2022

ardasen1' Alıntı:
çok güzel anlatım olmuş teşekkür ederim

Rica ederim.

JesterLove · 2 Ağu 2022

Güzel ve sade bir anlatım olmuş.
Elinize Sağlık.

ZyraPasaa · 2 Ağu 2022

JesterLove' Alıntı:
Güzel ve sade bir anlatım olmuş.
Elinize Sağlık.

Teşekkür ederim dostum.

luciferssw4 · 14 Ağu 2022

Client Kısmında JS yerine Asp kullanılabilir mi ?

KulPolSas · 31 Ağu 2022

Baya detaylı ve güzel anlatmışsın, gerçekten işe yarar bilgiler sunuyorsun. Teşekkür ederiz.

ZyraPasaa · 31 Ağu 2022

Teşekkürler millet!

Ara

Neden HTML CSS ve JS? Neden bu kadar önemli?

ZyraPasaa

regloy

erenerel37

hamzayusuf4747

zort313131

alperenadem12

krujstr

rnzdmr88

ZyraPasaa

suporhoros

ZyraPasaa

ismail8064

ZyraPasaa

ardasen1

ZyraPasaa

JesterLove

ZyraPasaa

luciferssw4

KulPolSas

ZyraPasaa

Benzer Konular