JavaScript

JavaScript gerçek adıyla LiveScript, Netscape mühendislerinden Brenden Eich tarafında 1995 yılında geliştirilmiştir.Birden çok platformda ve donanım bağımsız çalışmaktadır. HTML’ ye entegre edilmekte ve statik yapıyı dinamiğe dönüştürmeye yardımcı olmaktadır.

JavaScript’in adında da geçen Java kelimesine aldanmamak gerekir, JavaScript Java degildir. Java Sun Microsystems tarafından geliştirildi, JavaScript ise Netscape tarafından geliştirildi. JavaScript web sayfalarına gömülmektedir ve web browser’da çalışmalıdır. Java kodları derlenmektedir aksine Javascript kodları JavaScript engine’i tarafından yorumlanmaktadır.

JavaScript dili nesne tabanlıdır ama kesin olarak nesne ilişkili değildir, yani miras (inheritance), sınıf (class) kavramları yoktur. JavaScript uygulamalara gömülen tek script dili degildir, örneğin VBScript, Microsoft tarafından geliştirilen JavaScript gibi bir script dilidir fakat sadece Microsoft Internet Explorer tarafından çalıştırılmaktadır.

JavaScript’in temel kavramlarını anlatmadan biraz daha ileri seviyede geliştirilen aşağıdaki kodu incelemeniz JavaScriptle neler yapabileceginizi daha net gorebilmenize yardımcı olacağı kanısındayım. Aşağıda yazılan kodu JavaScript olmadan da, HTML dili ile de kodlayabilirsiniz ama sayfanızda dinamik olarak bir table’e satır ve eklenen satıra sütün eklemek, eklenen sütünlara textfield, button, checkbox yerleştirmek için JavaScript’e ihtiyaç duyacaksınız yani geliştirilen örnek size yardımcı olacaktır.

//maalesef blog html tag lerine izin vermemektedir, kodu oldugu gibi bırakamadım
//html ve body tag ı açılacak
//script tag ı açılacak
function controlSelect(kaynak, hedef){
if(kaynak.checked == true){
hedef.style.visibility = 'visible';
}
else if(kaynak.checked == false){
hedef.style.visibility = 'hidden';
}
}
function doIt(obj){
label.value = obj.value;
}
function changeImage(obj,url){
obj.src = url;
}

//script tag ı kapatılacak
//id si 'deneme' olan bir table açılacak
//script açılacak

var table2 = document.getElementById('deneme');
table2.style.cssText = "cellspacing: 0; cellpadding : 0 ; border:2; width: 400; height: 200";

var tableRow = table2.insertRow(0);
tableRow.style.cssText = 'background-color:red; width:200px; height:200px';

var tableRow2 = table2.insertRow(1);
tableRow2.style.cssText = 'background-color:blue; width:200px; height:200px';

var rowTd = document.createElement('TD');
var rowTd2 = document.createElement('TD');

var img = document.createElement('img');
img.src = 'folder.gif';
img.onmouseover = function() {changeImage(img,"base.gif")};
img.onmouseout = function() {changeImage(img, "folder.gif")};

var textEx = document.createElement('INPUT');
textEx.type = 'TEXT';
textEx.name = 'name';
textEx.size = '15';

var buttonEx = document.createElement('INPUT');
buttonEx.type = 'BUTTON';
buttonEx.value = 'Goster'
buttonEx.size = '5';
buttonEx.onclick = function() {doIt(textEx)};

var label = document.createElement('INPUT');
label.readOnly = 'true';
label.style.cssText = 'background-color:red';

var selectEx = document.createElement('SELECT');
selectEx.name = 'select';
selectEx.options.add(new Option('asin','1'));
selectEx.options.add(new Option('ersin','2'));
selectEx.options.add(new Option('dery','3'));
selectEx.style.visibility = 'hidden';

var checkEx = document.createElement('INPUT');
checkEx.type = 'CHECKBOX';
checkEx.name = 'check';
checkEx.onclick = function() {controlSelect(checkEx,selectEx)};

rowTd.appendChild(img);
rowTd.appendChild(textEx);
rowTd.appendChild(buttonEx);
rowTd.appendChild(label);
rowTd2.appendChild(checkEx);
rowTd2.appendChild(selectEx);

tableRow.appendChild(rowTd);
tableRow2.appendChild(rowTd2);

//script tag'ı kapatılacak
//table,body html tag'ı kapatılacak