İçerikler :

alert Bir Popup Penceresinden Ana Pencereye Erişmek.. confirm Event (Olay) Godoro Tanıtım - Görüntülü Eğitim - HTML & CS.. Godoro Tanıtım - Görüntülü Eğitim - JavaScrip.. HTML'de JavaScript Dosyası Kullanım Örneği HTML'de Javascript Örneği IntellijIdea 11 ile NodeJS Kullanımı İki Boyutlu Dizi Kullanımı Java'da Basit Bir Dizi Örneği Javascript Javascript'te Basit Bir For Örneği Javascript'te Basit Bir İf-Else Örneği Javascript'te Basit Tipler Javascript'te Confirm Dialog Örneği Javascript'te Değişken Javascript'te Fonksiyon Örnekleri Javascript'te Prompt Dialog Örneği Javascript Yazım Kuralları (Syntax) Olarak C,.. JSON - JavaScript Object Notation Modernizr Modernizr: the feature detection library for .. Object (Nesne) opener prompt Script Script Etiketi Unobtrusive JavaScript var

Bu Sayfayı Paylaş:

Kavram

Modernizr

Tanım: Client (cihaz ve tarayıcı) özellikleri, hangi CSS , Javascipt ve HTML özelliklerinin desteklenip desteklenmediği gibi bilgileri veren javascript kütüphanesi

Kavram

Script

Tanım: HTML'de kullanıcı ile etkileşim sağlamak veya duruma göre sayfa üzerinde dinamik olarak değişiklik yapmak için kullanılan kod. Bu şekilde web sayfaları dinamik bir hale getirilebilmektedir. En çok kullanılan script dilleri Javascript ve Vbscript'tir.

Kaynak

Modernizr: the feature detection library for HTML5/CSS3

Client (cihaz ve tarayıcı) özellikleri, hangi CSS , Javascipt ve HTML özelliklerinin desteklenip desteklenmediği gibi bilgileri veren Modernizr javascript kütüphanesi web sitesi

Kavram

Script Etiketi

Tanım: HTML'de Script kodları eklemek veya script dosyasını kullanımı için kullanılan etiket.

Kavram

Unobtrusive JavaScript

Tanım: Web sitesi tasarımında , javascript'i olabildiğince HTML-CSS kodlarından uzak tutulması, yapı veya içerik ile sunum katmanının ayrılması, tarayıcıların ortak olarak desteklemediği javascipt kodlarının yazılmaması gibi temel ilkeleri olan web programlama yöntemi. Unobtrusive ingilizce "mütevazi" anlamına gelmektedir

Kavram

Javascript

Tanım: HTML'de kullanıcı ile etkileşim sağlamak veya duruma göre sayfa üzerinde dinamik olarak değişiklik yapmak için kullanılan script dili. Microsoft'un JScript şeklinde adlandırdığı script'te genellikle Javascript olarak adlandırılır

Kavram

Object (Nesne)

Tanım: Javascript'te belirli özellikler ve method'lar (işlev) içeren yapı. Javascript'te ön tanımlı (predifed) nesnelere ve oluşan web sayfası ve tarayıcı ile ilgili nesnelere (DOM nesneleri) erişim için destek sunmaktadır

Kavram

JSON - JavaScript Object Notation

Tanım: Uygulamalar arasında veri transaferi için kullanılan, basit bir veri biçimi. Çıkış amacı Javascript ile nesneleri tutmak olmasından dolayı adı "JavaScript Object Notation" ifadesinin kısaltmasıdır. Örnek bir JSON {"kisi":{"ad":"Ali","soyad:"Kaya","no":12},"sehir":"İstanbul"} şeklinde verilebilir

Kavram

var

Tanım: Javascript'te değişken declare (tanımlama) için kullanılan keyword (ifade). var a; şeklinde tanımlanır ve atama daha sonradan yapılabilir

Kavram

Event (Olay)

Tanım: Javascript'te bir kodun çalışmasını tetikleyen (sağlayan) her türlü durum değişikliği veya kullanıcı hareketi. Örneğin sayfanın yüklenmesi, düğmeye tıklanması, yazı alanına yazının girilmeye başlanması gibi olaylar bir event (olay) olarak tanımlanır. Javascript Event (Olay) temelli bir script dilidir

Kavram

alert

Tanım: Javascript'te kullanıcıya mesaj göstermek için kullanılan mesaj kutusu ve bu kutuyu açmak için kullanılan fonksiyon. alert("mesaj"); şeklinde kullanılır ve kullanıcıya mesaj kutusu gösterilir. Gösterilen mesaj kutusunda Ok veya Tamam'a basıldığında pencere kapanır

Kavram

confirm

Tanım: Javascript'te kullanıcıdan evet veya hayır (yes veya no) şeklinde cevap alan dialog penceresi açmak için kullanılan fonksiyon. result=confirm("tamam mı iptal mi ?") şeklinde kullanılır ve dönen true veya false olur.

Kavram

prompt

Tanım: Javascript'te kullanıcıdan bilgi girişi almak için (yazı alanı gözükmektedir) kullanılan dialog kutusu. result=prompt("Bir şeyler yazın",""); şeklinde kullanılmaktadır ve kullanıcının girdiği yazı result değişkenine atanacaktır

Kavram

opener

Tanım: window.open ile açılan bir pencereden ana pencereye erişmek için kullanılan ifade. Örneğin opener.status="test" şeklinde ana sayfadaki durum çubuğu değiştirilebilir

Veri

Javascript Yazım Kuralları (Syntax) Olarak C, C++ ve Java'ya Benzemektedir

Javascript yazım kuralları(syntax) açısından C, C++ ve Java'ya benzemektedir.
Javascript ile diğer diller arasında sadece yazım benzerliği söz konusudur bunun dışında diğer diller ile hem özellik hem de kullanım yerleri , amacı bakımından bir benzerliği bulunmamaktadır.
Javascript ile Java tamamen farklı iki dildir ve Javascript içinde geçen Java ile nesneye yönelik, çok amaçlı kullanılan Java dilinin bir ilgisi yoktur.

Veri

Javascript'te Basit Tipler

Javascript'te üç temel tip (primitive type) içerir : 

  • String : Karakterlerden oluşmuş değerleri saklamak için kullanılır.  String değerleri "" ile belirtilir ve bir değişkene a="test" şeklinde atanır
  • Number (Sayı) : Sayılar için (tam sayı, kesirli sayı vb..) kullanılır. a=3 , b=5.1 şeklinde atanır. 
  • Boolean : true (doğru) veya false (false) değerleri alabilir. a=true , b=false şeklinde kullanılır


Veri

Javascript'te Değişken

Javascript'te değişkenin yaşam alanı veya tanımlandığı yere göre iki tür değişken vardır : 

  • Local Değişken : Bir fonksiyon içerisinde yaratılan değişken o fonksiyon içinde sadece kullanılabilir
  • Global Değişken : Genel olarak tanımlanmış değişkendir. Script kodunun herhangi bir yerinde kullanılabilir

Javascript'te değişenkler var keyword'ü ile declare edilir (tanımlanır) : 

var a;

tanımlama yapılırken atama yapılabilir : 

var a="test";
var b=1;
var c=true;

Eğer var değeri ile tanımlama yapılmadan atama yapılır ise "Global Değişken" olarak declare (tanımlama) edilmiş gibi kabul edilir

a="test";


Örnek

HTML'de Javascript Örneği

HTMl'de Script ekleme örneği aşağıdaki gibidir : 

 

<html>
<head>
	<script language="javascript">
		...script  buraya yazılır....
	</script>
</head>
<body>
	......
	<script language="javascript">
		...script  buraya yazılır....
	</script>
</body>
</html>

Yukarıdaki örnekte hem head etiketi içerisine , hem de body içerisine javascript kodları yerleştirilebilir. 

 

 


Örnek

HTML'de JavaScript Dosyası Kullanım Örneği

HTML'de bir Javascript dosyası ekleme ve script kullanımı örneği aşağıda görülmektedir : 

 

<html>
<head>
	<script src="test.js" language="javascript">
	</script>
	<script language="javascript">...burada 
		test.js dosyasındaki script kullanılabilir...
	</script>
</head>
<body>
	......
	<script language="javascript">
	...burada test.js dosyasındaki script kullanılabilir...
	</script>
</body>
</html>

Yukarıda test.js dosyası sayfaya eklenmiştir. Bu nedenle test.js içindeki script kodları sayfa boyunca kullanılabilir. 

 

 


Örnek

Java'da Basit Bir Dizi Örneği

Aşağıda basit bir dizi örneği görülmektedir : 

students=new Array("ali","veli","sezai","recai");
first=students[0];
second=students[1];

students adında bir dizi yaratılmış ve 4 eleman verilmiştir. Daha sonra ilk eleman ("ali") first değişkenine, ikinci eleman ("veli") second değişkenine atanmıştır


Örnek

Javascript'te Basit Bir İf-Else Örneği

Aşağıda basit bir if-else örneği görülmektedir : 

//number değişkeni daha önce verilmiş olsun
if(number>3){
	sum=number*number;
}else{
	sum=number+number;
}

number değişkeninin değeri 3'ten büyükse sum değişkenini değeri number değiernin karesi olarak atanmaktadır. Eğer number değeri 3'ten büyük değilse sum değeri number değeirinin iki katı yapılıyor


Örnek

Javascript'te Basit Bir For Örneği

Aşağıda bir for düngü örneği görülmektedir : 

sum=0;
numbers=new Array(1,2,3,4,5);
for(i=0;i<numbers.length;i++){
	sum=sum+numbers[i];
}

numbers dizisi elemanları toplanmakta ve sum değerine atanmaktadır. Döngü bittiği zaman sum değeri toplam değer olacaktır


Örnek

Javascript'te Fonksiyon Örnekleri

Aşağıda iki fonksiyon örneği görülmektedir : 

function makeSum(){
	sumNumber=sum(3,4);
}
function sum(number1,number2){
	return number1+number2;
}

makeSum fonskiyonu sum fonskiyonunu çağırmaktadır. Sum fonksiyonu ise number1 ve number2 olarak gelen parametreyi toplayıp, sonucu geri döndürmektedir. Bu nedenle makeSum fonksiyonu çağrıldığında sumNumber değişkeninin değeri 7 olacaktır


Örnek

Javascript'te Confirm Dialog Örneği

Aşağıda confirm dialog gösteren bir örnek bulunmaktadır : 

 

<html>
<head>
<script language="javascript">
function question(){
	var result=confirm("tamam mı iptal mi ?");
	alert("Cevabın: "+ result);
}
</script>
</head>
<body onLoad="question()">
</body>
</html>

 

Sayfa yüklendiğinde question fonksiyonu çağrılır. question fonskiyonu kullanıcıya "tamam mı iptal mi" yazan bir mesaj penceresi gösterir ve Yes/No (Evet/Hayır) şeçeneklerinden birisini seçmesini ister. Kullanının seçtiği değeri de alert ile gösterir. Kullanıcının seçtiği değer ya true ya da false olacaktır.


Örnek

Javascript'te Prompt Dialog Örneği

Aşağıda prompt dialog örneği görülmektedir : 

<html>
<head>
<script language="javascript">
function question(){
	var result=prompt("Bir şeyler yazın","");
	alert("yazdığın şey: "+ result);
}
</script>
</head>
<body onLoad="question()">
</body>
</html>

Sayfa yüklendiğinde question fonksiyonu çağrılır. question fonskiyonu kullanıcıya "Bir şeyler yazın" yazan bir mesaj penceresi gösterir ve kullanıcıdan bir giriş yapmasını bekler. Kullanının giridiği değeri alert ile gösterir.

 

 


İpucu

Bir Popup Penceresinden Ana Pencereye Erişmek ve Opener Kullanımı

Javascript'te bir sayfa üzerinden açılan bir popup penceresinden (window.open() ile açılan) ana pencereye opener keyword'ü ile erişebilirsiniz. Örneğin açılan pencereden ana pencerenin status bar'ına (durum çubuğu) aşağıdaki gibi değiştirilebilir : 

opener.status="mesaj buraya";

 


İpucu

İki Boyutlu Dizi Kullanımı

Javascript'de iki boyutlu dizi desteği bulunmamaktadır. Aşağıdaki gibi iki boyutlu bir dizi yaratabilir ve veri atayabilirsiniz:
var iMax = 13;
var jMax = 13;
var data = new Array();
for (i=0;i<iMax;i++) {
 data[i]=new Array();
 for (j=0;j<jMax;j++) {
  data[i][j]="";
 }
}
data[1][1]='2X2 eleman';
data[12][12]='13X13 eleman';

Alıntı

IntellijIdea 11 ile NodeJS Kullanımı

Javascript ile geliştirme yapanlar için IntellijIdea 11 ile faydalı bir çalışma ortamı
Sahipleri : Yusuf Boyacıgil
Javascript ile geliştirme yapanlar için faydalı olacağını düşündüğüm bir çalışma ortamını sizlerle paylaşmak istiyorum.
Hazırladığım ortam IntelliJ IDEA 11 + NodeJS Plugin ve NodeJS kurulularından oluşuyor.
IDEA javascript geliştirmek için piyasada olan en başarılı editor’lerden birini sağlıyor. Sadece kodu renklendirme, tamamlama değil bunun yanında JSHint’i de devreye alıp, javascript hatalarını ve doğru yazım kuralları konusunda da sizi uyarıyor.
NodeJS ile konunun ilintisi ise şuradan kaynaklanıyor: Javascript ile kodu yazarken herhangi bir kod parçasını anında çalıştırıp sonucunu görebilmeniz için önemli bir araç. Bunu IDE içerisinden çıkmadan yapabilmek size çok hız kazandıracağı için NodeJS’i IDEA içerisinden çalıştırabilmeniz gerekir. Onun için de Node JS Plugin’ini kurmalısınız.
Path To Node sizin makinenizdeki Node JS’in yerini ve Working Directory üzerinde çalıştığınız javascript dosyalarının olduğu yeri göstermeli. Path to Node App JS File‘ı girmediğiniz için size kızabilir ama dikkate almayın bunu. :)
Bundan sonra IDEA’da hazırladığımız Run/Debug Confguration’u olan NodeJS Interactive Shell’i (yukarıda bu ismi vermiştik) çalıştırıp, Run penceresinde denemelerinizi yapabilirsiniz.
Burada bahsetmem gereken bir konu daha var. Eğer hazırladığınız kodu bir NodeJS modülü haline getirirseniz tüm kodu Node’a yükleyebilir üzerinde oynayabilirsiniz. Node modülü haline getirmek için yapmanız gereken export’ları tanımlamak olacaktır. Buna ilaveten aşağıdaki gibi reload fonksiyonunu da eklerseniz kodu değiştirdikten sonra yeniden yükleyebilecek duruma da geleceksiniz.
script
/*
How to use:
  * Load
  > var mm = require('./my_module.js');
  
  * Reload:
  > mm = mm.relaod();
*/
exports = module.exports = {
  /** module exports **/
  'reload' : function() { 
              delete require.cache[require.resolve('./my_module.js')]; 
              return require('./my_module.js');
            }
};

Umarım yukarıda hızlıca bahsettiğim konfigurasyon başkalarının da işine yarar.

Materyal

Godoro Tanıtım - Görüntülü Eğitim - HTML & CSS

Godoro HTML & CSS görüntülü eğitiminin tanıtımı.

Materyal

Godoro Tanıtım - Görüntülü Eğitim - JavaScript

Godoro JavaScript görüntülü eğitiminin tanıtımı.



Bu Sayfayı Paylaş:

İletişim Bilgileri

Takip Et

Her Hakkı Saklıdır. Bu sitede yayınlanan tüm bilgi ve fikirlerin kullanımından fibiler.com sorumlu değildir. Bu sitede üretilmiş , derlenmiş içerikleri, fibiler.com'u kaynak göstermek koşuluyla kendi sitenizde kullanılabilirsiniz. Ancak telif hakkı olan içeriklerin hakları sahiplerine aittir