Düğüm ( Node ) Düğüm ( Node )
|
|
- Esen Yağmur
- 7 yıl önce
- İzleme sayısı:
Transkript
1 Düğüm ( Node ) Düğüm, dom içindeki en temel nesne tipidir. Aslında, bu makalenin sonraki kısımlarında da göreceğiniz gibi, dom ile tanımlanan neredeyse her nesne düğüm nesnesini genişletir. Ancak, semantikle ilgili daha ileri aşamalara geçmeden önce, bir düğümün temsil ettiği kavramı anlamanız gerekir; daha sonra, düğümün gerçek özelliklerini ve yöntemlerini öğrenmek sizin için çok kolay olacaktır. Bir DOM ağacında, karşılaşacağınız hemen hemen her şey bir düğümdür. DOM ağacındaki her öğe, en temel düzeyinde bir düğümdür. Her öznitelik bir düğümdür. Her metin parçası bir düğümdür. Açıklamalar, özel karakterler (telif hakkı simgesini temsil eden gibi) ve DOCTYPE bildirimi (HTML ya da XHTML'nizde varsa) bile birer düğümdür. Bu tiplerin ayrı ayrı özelliklerine girmeden önce, düğümün ne anlama geldiğini gerçekten kavramanız gerekir. En basit anlatımla düğüm, bir DOM ağacındaki tek bir şeydir. "Şey" sözcüğü, belirsizliği nedeniyle özellikle kullanılmıştır, çünkü bu olabilecek en belirgin terimdir. Örneğin, HTML'nizdeki bir öğe (img gibi) ile HTML'nizdeki bir metin parçasının ("Scroll down for more details" gibi) birçok ortak özelliğe sahip oldukları yeterince açık olmayabilir. Ancak bunun nedeni, bu ayrı tiplere işlevleri açısından bakmanız ve birbirlerinden ne kadar farklı olduklarını düşünmenizdir. Düğüm ( Node ) 1
2 Bunun yerine, DOM ağacındaki her bir öğenin ve metin parçasının bir üst öğesinin olduğunu; bu üst öğenin de, başka bir öğenin alt öğesi (img öğesinin p öğesine yerleştirilmesi gibi) ya da DOM ağacındaki en üst öğe olduğunu (her belge için bir defalık özel bir durumdur ve html öğesini kullandığınız yerdir) düşünün. Ayrıca, hem öğelerin hem de metnin bir tipinin olduğunu dikkate alın. Bir öğeye ilişkin tip, gayet açık olarak öğedir; metne ilişkin tip de metindir. Her bir düğümün oldukça iyi tanımlanmış bir yapısı da vardır: kendi altında, alt öğeler gibi düğümleri var mı? Kardeş düğümleri (öğe ya da metnin "yanındaki" düğümler) var mı? Her bir düğüm hangi belgeye ait? Açıkçası, bunların çoğu oldukça soyut görünür. Aslında, bir öğe tipinin öğe olduğunu söylemek biraz saçma görünebilir. Ancak, ortak bir nesne tipi olarak düğümün sahip olduğu değeri anlamanız için biraz soyut düşünmeniz gerekir. DOM kodunuzun içinde en çok gerçekleştireceğiniz tek görev bir sayfanın DOM ağacında gezinmek olacaktır. Örneğin, "id" özniteliğine göre bir formu bulabilir ve bu formun içindeki iç içe geçmiş öğelerle ve metinle çalışmaya başlayabilirsiniz. Metin yönergeleri, giriş alanlarına ilişkin etiketler, gerçek inputöğeleri ve büyük olasılıkla diğer HTML öğeleri (img öğeleri gibi) ve bağlantılar (a öğeleri) olacaktır. Öğeler ve metin tamamen farklı tiplerdeyse, bir tipten diğerine geçmek için tamamen farklı kod parçaları yazmanız gerekir. Bir ortak düğüm tipi kullanırsanız her şey farklılaşır. Böyle bir durumda, basit bir şekilde düğümden düğüme geçer ve düğümün tipiyle, yalnızca bir öğe ya da metinle ilgili özel bir şey yapmak istediğinizde ilgilenirsiniz. DOM ağacında dolaşırken, bir öğenin üst öğesine -- ya da alt öğelerine -- geçmek için, diğer düğüm tiplerinde gerçekleştireceğiniz işlemleri kullanırsınız. Bir düğüm tipiyle, yalnızca belirli bir düğüm tipine özgü (öğenin öznitelikleri gibi) bir şeyler yapmanız gerektiğinde özel olarak çalışmanız gerekir. DOM ağacındaki her bir nesneyi bir düğüm olarak düşünmek, çalışmanızı çok basitleştirir. Aklınızdan bunu çıkarmadan, bir sonraki bölümde, özellikler ve yöntemlerden başlayarak DOM Düğüm yapısının tam olarak neler sunduğuna bakacağım. DOM düğümleriyle çalışırken bazı özellikleri ve yöntemleri kullanmak isteyeceksiniz; o zaman önce bunları gözden geçirelim. Bir DOM düğümünün temel özellikleri şunlardır: nodename nodevalue parentnode childnodes firstchild lastchild previoussibling nextsibling attributes düğümün adını bildirir (ek bilgi için aşağıya bakın). düğümün "değerini" verir (ek bilgi için aşağıya bakın). düğümün üst öğesini verir. Her öğenin, özniteliğin ve metnin bir üst öğesinin olduğunu unutmayın. bir düğümün alt öğelerinin listesidir. HTML ile çalışırken, bu liste yalnızca bir öğe üzerinde çalışırken işe yarar; metin düğümlerinin ve öznitelik düğümlerinin alt düğümleri yoktur. childnodes listesindeki birinci düğüme giden bir kısayoldur. childnodes listesindeki son düğüme giden bir kısayoldur. geçerli düğümden önceki düğümü verir. Diğer bir deyişle, bu düğümün üst öğesinin childnodes listesinde, geçerli düğümden bir önceki düğümü verir (kafanız karıştıysa, son cümleyi yeniden okuyun). previoussibling özelliğine benzer; üst öğenin childnodes listesindeki bir sonraki düğümü verir. yalnızca bir öğe düğümünde yararlı olur; bir öğenin özniteliklerinin listesini verir. Diğer birkaç özellik, daha soysal XML belgeleri için geçerlidir ve HTML tabanlı Web sayfalarıyla çalıştığınızda pek de işinize yaramazlar. nodename ve nodevalue özelliklerinin dışında, yukarıda tanımlanan özelliklerin çoğu kendi kendini anlatmaktadır. Bu özellikleri yalnızca açıklamak yerine birkaç garip soruyu düşünün: Bir metin düğümü için nodename (düğümadı) değeri ne olurdu? Benzer bir şekilde, Bir öğeye ilişkin nodevalue (düğümdeğeri) ne olurdu? Bu sorular sizi şaşırttıysa, bu özelliklerin doğasında varolan karışıklık olasılığını da anlamışsınızdır. nodename ve nodevalue, gerçekte tüm düğüm tipleri için geçerli değildir (bu, bir düğümdeki diğer özelliklerin birkaçı için de geçerlidir). Bu, bir anahtar kavramı da şekillendirir: Bu değerlerin herhangi biri boş bir değer verebilir (bazen JavaScript içinde "undefined" [tanımlanmamış] olarak görünür). Örneğin, bir metin düğümüne ilişkin nodename özelliği boş bir değerdir (ya da bazı tarayıcılarda metin düğümlerinin bir adı olmadığı için "undefined" [tanımlanmamış] olur). nodevalue, bekleyeceğiniz üzere düğümün metnini döndürür. Benzer şekilde, öğelerin bir nodename özelliği vardır (öğenin adı), ancak bir öğe nodevalue özelliğinin değeri her zaman boştur. Özniteliklerin, hem nodename hem de nodevalue özellikleri için değerleri vardır. Bir sonraki bölümde bu ayrı tiplerle ilgili biraz daha ayrıntıya gireceğim, ancak bu özellikler her düğümün parçası olduğu için, burada bunlardan söz etmekte fayda var. Aşağıdaki javascript ve HTML kodlarını inceleyin. <script type="text/javascript"> <!-- function TabaGit(TiklananTab){ Düğüm ( Node ) 2
3 Tablar=document.getElementById("gezbar2").getElementsByTagName("div").item(); for (j=; j<tablar.childnodes.length; j++){ if(tablar.childnodes[j]==tiklanantab){ TiklananTabNo=j; break; //--> </script> <div id="gezbar2"> <div style="clear:both"> <div class="bar ust_logo"></div> <div class="bar ust_menu_boyut ust_menu1" onmouseover="tabagit(this)"></div> <div class="bar ust_menu_boyut ust_menu2" onmouseover="tabagit(this)"></div> <div class="bar ust_menu_boyut ust_menu3" onmouseover="tabagit(this)"></div> <div class="bar ust_menu_boyut ust_menu4" onmouseover="tabagit(this)"></div> <div class="bar ust_menu_boyut ust_menu5" onmouseover="tabagit(this)"></div> <div class="bar ust_menu_son"></div> </div> </div> Şimdi, çalışan düğüm özelliklerinin birkaçını gösteren Liste 1'e bakın. // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var mydocument = document; var htmlelement = mydocument.documentelement; // What's the name of the <html> element? "html" alert("the root element of the page is " + htmlelement.nodename); // Look for the <head> element var headelement = htmlelement.getelementsbytagname("head")[]; if (headelement!= null) { alert("we found the head element, named " + headelement.nodename); // Print out the title of the page var titleelement = headelement.getelementsbytagname("title")[]; Düğüm ( Node ) 3
4 if (titleelement!= null) { // The text will be the first child node of the <title> element var titletext = titleelement.firstchild; // We can get the text of the text node with nodevalue alert("the page title is '" + titletext.nodevalue + "'"); // After <head> is <body> var bodyelement = headelement.nextsibling; while (bodyelement.nodename.tolowercase()!= "body") { bodyelement = bodyelement.nextsibling; // We found the <body> element... // We'll do more when we know some methods on the nodes. Sırada tüm düğümlerle kullanılabilen yöntemler var (düğüm özelliklerinde olduğu gibi, çoğu HTML DOM işlemleri için gerçekten geçerli olmayan birkaç yöntemi atladım): insertbefore(newchild, referencenode), referencenode değerinden önce newchild düğümünü yerleştirir. Bu kodu, istediğiniz newchild düğümünün üst öğesinde çağıracağınızı unutmayın. replacechild(newchild, oldchild), oldchild düğümünü newchild düğümüyle değiştirir. removechild(oldchild), işlevin çalıştırıldığı düğümden oldchild düğümünü kaldırır. appendchild(newchild), bu işlevin çalıştırıldığı düğüme newchild düğümünü ekler. newchild, hedef düğümün alt öğelerinin sonuna eklenir. haschildnodes(), çağrıldığı düğümün alt öğeleri varsa doğru, yoksa yanlış değerini döndürür. hasattributes(), çağrıldığı düğümün öznitelikleri varsa doğru, özniteliği yoksa yanlış değerini döndürür. Çoğu bölümde, bu yöntemlerin tümünün, büyük ölçüde bir düğümün alt öğeleriyle ilgili olduğunu fark etmişsinizdir. Bu, onların birincil amacıdır. Yalnızca bir metin düğümünün değerini ya da bir öğenin adını kavramaya çalışıyorsanız, basit bir şekilde düğümün özelliklerini kullanabileceğiniz için yöntemleri çok sık çağırmazsınız. Liste 2, yukarıdaki yöntemlerin bazılarını kullanarak Liste 1'deki kod üzerine kurulur. // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var mydocument = document; var htmlelement = mydocument.documentelement; // What's the name of the <html> element? "html" alert("the root element of the page is " + htmlelement.nodename); // Look for the <head> element var headelement = htmlelement.getelementsbytagname("head")[]; if (headelement!= null) { alert("we found the head element, named " + headelement.nodename); // Print out the title of the page var titleelement = headelement.getelementsbytagname("title")[]; if (titleelement!= null) { // The text will be the first child node of the <title> element var titletext = titleelement.firstchild; // We can get the text of the text node with nodevalue alert("the page title is '" + titletext.nodevalue + "'"); Düğüm ( Node ) 4
5 // After <head> is <body> var bodyelement = headelement.nextsibling; while (bodyelement.nodename.tolowercase()!= "body") { bodyelement = bodyelement.nextsibling; // We found the <body> element... // Remove all the top-level <img> elements in the body if (bodyelement.haschildnodes()) { for (i=; i<bodyelement.childnodes.length; i++) { var currentnode = bodyelement.childnodes[i]; if (currentnode.nodename.tolowercase() == "img") { bodyelement.removechild(currentnode); Şimdiye kadar Liste 1 ve 2'de yalnızca iki örnek gördünüz, ancak bunlar bile DOM ağacını kullanmaya başladığınızda yapabileceklerinize ilişkin her tür fikri vermiş olmalı. Buraya kadar gösterildiği biçimde kodu denemek isterseniz, Liste 3'ü bir HTML dosyasına aktarın, kaydedin ve Web tarayıcınıza yükleyin. <html> <head> <title>javascript and the DOM</title> <script language="javascript"> function test() { // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var mydocument = document; var htmlelement = mydocument.documentelement; // What's the name of the <html> element? "html" alert("the root element of the page is " + htmlelement.nodename); // Look for the <head> element var headelement = htmlelement.getelementsbytagname("head")[]; if (headelement!= null) { alert("we found the head element, named " + headelement.nodename); // Print out the title of the page var titleelement = headelement.getelementsbytagname("title")[]; if (titleelement!= null) { // The text will be the first child node of the <title> element var titletext = titleelement.firstchild; // We can get the text of the text node with nodevalue alert("the page title is '" + titletext.nodevalue + "'"); // After <head> is <body> var bodyelement = headelement.nextsibling; Düğüm ( Node ) 5
6 while (bodyelement.nodename.tolowercase()!= "body") { bodyelement = bodyelement.nextsibling; // We found the <body> element... // Remove all the top-level <img> elements in the body if (bodyelement.haschildnodes()) { for (i=; i<bodyelement.childnodes.length; i++) { var currentnode = bodyelement.childnodes[i]; if (currentnode.nodename.tolowercase() == "img") { bodyelement.removechild(currentnode); </script> </head> <body> <p>javascript and DOM are a perfect match. You can read more in <i>head Rush Ajax</i>.</p> <img src=" /> <input type="button" value="test me!" onclick="test();" /> </body> </html> Bu sayfayı tarayıcınıza yüklediğinizde, Şekil 1'dekine benzer bir sayfa görmeniz gerekir. Test me! (Beni sına!) düğmesini tıklattığınızda Şekil 2'deki gibi uyarı kutuları görüntülenmeye başlar. Düğüm ( Node ) 6
7 Kod çalışmayı tamamladığında, resimler Şekil 3'te gösterildiği gibi gerçek zamanlı olarak sayfadan kaldırılır. Her bir düğümdeki kullanılabilir özelliklere ve yöntemlere yeniden bakın. Bunlar, nesne odaklı (OO) programlama kullananlar için DOM'ye ilişkin bir temel noktayı açıklar: DOM çok da nesne odaklı bir API değildir. Birincisi, birçok durumda bir düğüm nesnesinde yöntem çağırmak yerine, nesnenin özelliklerini doğrudan kullanırsınız. getnodename() yöntemi yoktur; örneğin, nodename özelliğini doğrudan kullanırsınız. Dolayısıyla düğüm nesneleri (ve diğer DOM nesneleri), özellikleri aracılığıyla, yalnızca işlevleri değil, birçok veriyi de gösterir. İkincisi, özellikle Java ya da C++ gibi dillerde aşırı yüklü nesnelerle ve nesne odaklı API'lerle çalışmaya alıştıysanız, DOM içindeki nesnelerin ve yöntemlerin adlandırılması biraz garip görünebilir. DOM'nin, birkaç dil belirtmek gerekirse, C, Java ve JavaScript içinde çalışması gerekir; bu yüzden, API tasarımından bazı ödünler verilmiştir. Örneğin, aşağıdaki gibi görünen NamedNodeMap yöntemlerinde iki farklı yöntem görürsünüz: getnameditem(string name) getnameditemns(node node) Düğüm ( Node ) 7
8 OO programcıları için bu oldukça garip görünür. İki yöntemin amacı aynıdır, ancak biri bir dizeyi (String) alırken, diğeri bir düğümü (Node) alır. OO API'lerinin çoğunda, her iki sürüm için de aynı yöntem adını kullanırdınız. Kodunuzu çalıştıran sanal makine, yönteme geçirilen nesne tipine dayalı olarak çalıştırılacak yöntemi belirlerdi. Buradaki sorun, JavaScript'in yöntem aşırı yüklemesi adı verilen bu tekniği desteklememesidir. Diğer bir deyişle, JavaScript belirli bir adda tek bir yöntem ya da işlevin olmasına izin verir. Bir dizeyi alan getnameditem() adlı bir yönteminiz varsa, ikinci sürüm farklı tipte bir bağımsız değişken (ya da tamamen farklı bir bağımsız değişkenler kümesi) alsa bile getnameditem() adlı başka bir yönteminiz ya da işleviniz olamaz. Bunu yaparsanız JavaScript bir hata bildirir ve kodunuz, çalışmasını beklediğiniz gibi çalışmaz. Özünde, DOM bilinçli olarak yöntem aşırı yüklemesinden ve diğer OO programlama tekniklerinden kaçınır. Bunu, API'nin OO programlama tekniklerini desteklemeyenler de dahil olmak üzere birden çok dil üzerinde çalıştığından emin olmak için yapar. Sonuçta fazladan birkaç yöntem adı öğrenmeniz gerekir. İyi tarafı da DOM'yi herhangi bir dilde öğrenebileceğiniz -- Java gibi -- ve aynı yöntem adlarının ve kodlama yapısının DOM uygulaması olan diğer dillerde de -- JavaScript gibi -- çalışacağını bilmektir. API tasarımıyla uğraşıyorsanız -- ya da yalnızca yakından ilgileniyorsanız -- bir şeyi merak edebilirsiniz: "Düğüm tipine ilişkin özellikler neden tüm düğümler için ortak değil?" Bu güzel bir sorudur ve yanıtı, teknik nedenlerden çok politika ve karar almayla ilgilidir. Kısacası, yanıt "Kim bilir! Ama bu biraz can sıkıcı, değil mi?" olur. nodename özelliği her tipin bir adı olması için tasarlanmıştır; ancak birçok durumda, ad tanımlanmamıştır ya da programcılar için değer taşımayan garip bir iç addır (örneğin, Java'da bir metin düğümünün nodename özelliği, birçok durumda "#text" olarak bildirilir). Aslında, hata işlemenin size bırakıldığını varsaymanız gerekir. Hemen mynode.nodename değerine erişmek ve bu değeri kullanmak güvenli değildir; birçok durumda, değer boş olacaktır. Bu yüzden, programlama söz konusu olduğunda bu durumlarda programcıların dikkat etmesi gerekir. Bir DOM düğümünün belirleyici niteliklerinin ve özelliklerinin bazılarını (ve bazı garipliklerini) gördüğünüze göre, birlikte çalışacağınız düğümlerin belirli tiplerinden bazılarıyla ilgili bilgileri öğrenmeye hazırsınız demektir. Web uygulamalarının çoğunda, yalnızca dört düğüm tipiyle çalışırsınız: Belge düğümü, tüm HTML belgesini belirtir. Öğe düğümleri, a ya da img gibi HTML öğelerini belirtir. Öznitelik düğümleri, HTML öğelerindeki href (a öğesinde) ya da src (img öğesinde) gibi öznitelikleri gösterir. Metin düğümleri, HTML belgesindeki "Click on the link below for a complete set list" gibi metinleri belirtir. Bu, p, a ya da h2 gibi öğelerin içinde görünen metindir. HTML ile uğraşırken, zamanınızın yaklaşık %95'ini bu düğüm tipleriyle çalışarak geçirirsiniz. Bu nedenle, bu ayki makalenin geri kalan kısmını bu konuda daha ayrıntılı bilgi vermek için kullanacağım. (İleride yazacağım bir makalede XML konusunu anlatırken, diğer düğüm tiplerinden bazılarını da tanıtacağım.) Birinci düğüm tipi, yazdığınız DOM tabanlı hemen her kodda kullanacağınız belge düğümüdür. Belge düğümü, aslında HTML (ya da XML) sayfasının bir öğesi değil, sayfanın kendisidir. Dolayısıyla HTML Web sayfasında, belge düğümü tüm DOM ağacıdır. JavaScript'te, document anahtar sözcüğünü kullanarak belge düğümüne erişebilirsiniz: // These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var mydocument = document; var htmlelement = mydocument.documentelement; JavaScript'teki document anahtar sözcüğü, geçerli Web sayfasına ilişkin DOM ağacını gösterir. Buradan, ağaçtaki tüm düğümlerle çalışabilirsiniz. Aşağıdaki yöntemlere benzer yöntemleri kullanarak yeni düğümler yaratmak için document belgesini de kullanabilirsiniz: createelement(elementname), sağlanan adla bir öğe oluşturur. createtextnode(text), sağlanan metinle yeni bir metin düğümü oluşturur. createattribute(attributename), sağlanan adla yeni bir öznitelik oluşturur. Dikkat edilmesi gereken temel nokta, bu yöntemlerin düğümleri yarattığı, ancak bunları herhangi bir belirli belgeye bağlamadığı ya da yerleştirmediğidir. Bunun için, insertbefore() ya da appendchild() gibi önceden gördüğünüz yöntemlerden birini kullanmanız gerekir. Aşağıdakine benzer bir kod kullanarak yeni bir öğe oluşturabilir ve bunu, bir belgeye ekleyebilirsiniz: var pelement = mydocument.createelement("p"); var text = mydocument.createtextnode("here's some text in a p element."); Düğüm ( Node ) 8
9 pelement.appendchild(text); bodyelement.appendchild(pelement); Bir Web sayfasının DOM ağacına erişmek için document öğesini kullandıktan sonra, öğelerle, özniteliklerle ve metinle doğrudan çalışmaya başlayabilirsiniz. Öğe düğümleriyle çok çalışacaksınız, ancak öğeler üzerinde gerçekleştirmeniz gereken birçok işlem, yalnızca öğelere özel yöntemler ve özellikler yerine, tüm düğümler için geçerli yöntemleri ve özellikleri içerir. Yalnızca iki yöntem takımı öğelere özeldir: Özniteliklerle çalışmaya ilişkin yöntemler: getattribute(name), name adlı özniteliğin değerini döndürür. removeattribute(name), name adlı özniteliği kaldırır. setattribute(name, value), name adlı bir öznitelik oluşturur ve değerini value değerine ayarlar. getattributenode(name), name adlı öznitelik düğümünü verir (öznitelik düğümleri aşağıda ele alınmıştır). removeattributenode(node), sağlanan düğümle eşleşen öznitelik düğümünü kaldırır. İç içe geçmiş öğeleri bulmaya ilişkin yöntemler: getelementsbytagname(elementname), sağlanan adın bulunduğu öğe düğümleri listesini verir. Bunların tümü büyük ölçüde kendi kendilerini açıklar niteliktedir, ancak yine de aşağıdaki örneklere bakmanızda yarar vardır. Özniteliklerle çalışmak oldukça kolaydır; örneğin, document nesnesiyle ve öğesiyle ve yukarıdaki yöntemlerin bazılarıyla yeni bir img öğesi oluşturabilirsiniz: var imgelement = document.createelement("img"); imgelement.setattribute("src", " imgelement.setattribute("width", "130"); imgelement.setattribute("height", "150"); bodyelement.appendchild(imgelement); Bu, şimdiye kadar oldukça rutin görünmüş olabilir. Aslında, bir düğüm kavramını anlamaya başladıktan ve kullanılabilir yöntemleri bildikten sonra Web sayfalarınızda ve JavaScript kodunuzda DOM ile çalışmanın basit olduğunu görmeye başlamanız gerekir. Yukarıdaki kodda, JavaScript yeni bir img öğesi oluşturur, bazı öznitelikleri ayarlar ve bunu daha sonra HTML sayfasının gövdesine ekler. İç içe geçmiş öğeleri bulmak da kolaydır. Örneğin, Liste 3'teki HTML sayfasında bulunan tüm img öğelerini bulmak ve kaldırmak için aşağıdaki kodu kullandım: // Remove all the top-level <img> elements in the body if (bodyelement.haschildnodes()) { for (i=; i<bodyelement.childnodes.length; i++) { var currentnode = bodyelement.childnodes[i]; if (currentnode.nodename.tolowercase() == "img") { bodyelement.removechild(currentnode); getelementsbytagname() yöntemini kullanarak da benzer bir etki elde edebilirdiniz: Düğüm ( Node ) 9
10 // Remove all the top-level <img> elements in the body var imgelements = bodyelement.getelementsbytagname("img"); for (i=; i<imgelements.length; i++) { var imgelement = imgelements.item[i]; bodyelement.removechild(imgelement); DOM, öznitelikleri düğüm olarak gösterir ve bir öğenin attributes özelliğini kullanarak her zaman bir öğenin özniteliklerini aşağıda gösterildiği gibi alabilirsiniz: // Remove all the top-level <img> elements in the body var imgelements = bodyelement.getelementsbytagname("img"); for (i=; i<imgelements.length; i++) { var imgelement = imgelements.item[i]; // Print out some information about this element var msg = "Found an img element!"; var atts = imgelement.attributes; for (j=; j<atts.length; j++) { var att = atts.item(j); msg = msg + "n " + att.nodename + ": '" + att.nodevalue + "'"; alert(msg); bodyelement.removechild(imgelement); Özniteliklerin garip durumu DOM söz konusu olduğunda, özniteliklerin biraz özel bir durumu vardır. Bir yandan, öznitelikler diğer öğeler ya da metinler gibi, gerçekte öğelerin alt öğeleri değildir; diğer bir deyişle bir öğenin "altında" görünmezler. Aynı zamanda, bir öğeyle kesinlikle bir ilişkileri vardır; bir öğe özniteliklere "sahiptir". DOM, öznitelikleri göstermek için düğümleri kullanır ve bunları özel bir listeyle bir öğe üzerinde kullanımına sunar. Bu nedenle, öznitelikler DOM ağacının bir parçasıdır, ancak genellikle ağaçta görünmezler. Özniteliklerin, DOM ağacı yapısının geri kalanıyla olan ilişkisinin biraz belirsiz olduğunu söylemek yeterlidir. attributes özelliğinin aslında düğüm tipi üzerinde olduğunu ve özellikle öğe tipi üzerinde olmadığını belirtelim. Bu biraz gariptir ve kodlamanızı etkilemez, ancak bilinmesi yararlıdır. Öznitelik düğümleriyle çalışmak kesinlikle mümkündür, ancak özniteliklerle çalışmak için öğede bulunan yöntemlerin kullanılması genellikle daha kolay olur. Yöntemler aşağıdaki gibidir: getattribute(name), name adlı özniteliğin değerini döndürür. removeattribute(name), name adlı özniteliği kaldırır. setattribute(name, value), name adlı bir öznitelik oluşturur ve değerini value değerine ayarlar. Bu üç yöntem, öznitelik düğümleriyle doğrudan çalışmayı gerektirmez. Bunun yerine, öznitelikleri ve değerlerini yalnızca basit dize özellikleriyle ayarlayabilir ve kaldırabilirsiniz. Düşünmeniz gereken son düğüm tipi -- en azından HTML DOM ağaçlarıyla çalışırken -- metin düğümleridir. Metin düğümleriyle çalışmak için yaygın olarak kullanacağınız özelliklerin neredeyse tümü, gerçekte düğüm nesnesinde bulunur. Aslında, aşağıda Düğüm ( Node ) 10
11 gösterildiği gibi metin düğümünden metin almak için genellikle nodevalue özelliğini kullanacaksınız: var pelements = bodyelement.getelementsbytagname("p"); for (i=; i<pelements.length; i++) { var pelement = pelements.item(i); var text = pelement.firstchild.nodevalue; alert(text); Diğer birkaç yöntem, metin düğümlerine özeldir. Bunlar, bir düğümdeki verilere ekleme yapma ya da verileri bölmeyle uğraşırlar: appenddata(text), sağladığınız metni, metin düğümünün var olan metninin sonuna ekler. insertdata(position, text), metin düğümünün ortasına veri yerleştirmenizi sağlar. Sağladığınız metni, belirtilen konuma yerleştirir. replacedata(position, length, text), belirtilen konumdan başlayarak, belirtilen uzunlukta karakterleri kaldırır ve yönteme sağladığınız metni kaldırılan metnin yerine yerleştirir. Şimdiye kadar gördüklerinizin çoğu, çalıştığınız düğüm tipini bildiğiniz varsayımına dayanır, ancak durum her zaman böyle değildir. Örneğin, bir DOM ağacında geziniyorsanız ve ortak düğüm tipleriyle çalışıyorsanız, bir öğeye ya da metne geçtiğinizi fark etmeyebilirsiniz. Bir p öğesinin tüm alt öğelerini alabilir ve metinle mi, bir b öğesiyle mi, yoksa bir img öğesiyle mi çalıştığınızdan emin olamayabilirsiniz. Böyle durumlarda, bir düğümle çalışmaya başlamadan önce ne tip bir düğümle çalıştığınızı anlamanız gerekecektir. Neyse ki bunu anlamak oldukça basittir. DOM düğüm tipi, aşağıdakilere benzer birkaç değişmez değeri tanımlar: Node.ELEMENT_NODE, öğe düğüm tipine ilişkin değişmezdir. Node.ATTRIBUTE_NODE, öznitelik düğüm tipine ilişkin değişmezdir. Node.TEXT_NODE, metin düğüm tipine ilişkin değişmezdir. Node.DOCUMENT_NODE, belge düğüm tipine ilişkin değişmezdir. Başka birkaç düğüm tipi daha vardır, ancak HTML işlemlerinde, bu dördünün dışındakiler çok seyrek olarak kullanılır. Bu değişmezlerin her birine ilişkin değerlerin DOM belirtiminde tanımlanmasına rağmen ben, bilerek bunları atladım; değerle hiçbir zaman doğrudan çalışmamalısınız, değişmezlerin amacı budur! Bir düğümü yukarıdaki değişmezlerle karşılaştırmak için nodetype özelliğini dekullanabilirsiniz -- bu özellik DOM düğüm tipinde tanımlanır ve tüm düğümler tarafından kullanılabilir: var somenode = document.documentelement.firstchild; if (somenode.nodetype == Node.ELEMENT_NODE) { alert("we've found an element node named " + somenode.nodename); else if (somenode.nodetype == Node.TEXT_NODE) { alert("it's a text node; the text is " + somenode.nodevalue); else if (somenode.nodetype == Node.ATTRIBUTE_NODE) { alert("it's an attribute named " + somenode.nodename + " with a value of '" + somenode.nodevalue + "'"); Bu oldukça basit bir örnektir, ancak asıl nokta da budur: bir düğüm tipinin alınması basittir. Daha zor olan konu, düğümün tipini öğrendikten sonra düğümle ne yapacağınızı bilmektir; ancak düğüm, metin, öznitelik ve öğe tipleri konusunda sağlam bir bilgiyle, DOM programlamasını kendi başınıza üstlenmeye hazırsınız. Ya da neredeyse hazırsınız diyelim. nodetype özelliği, düğümlerle çalışmanız için gereken bileti size sağlayacakmış gibi görünüyor -- ne tip bir düğümle çalıştığınızı anlamanıza ve daha sonra, bu düğümle ilgili kodu yazmanıza olanak tanıyor. Buradaki sorun, yukarıda tanımlanan Node değişmezlerinin Internet Explorer üzerinde düzgün çalışmamasıdır. Bu nedenle, Node.ELEMENT_NODE, Node.TEXT_NODE ya da diğer değişmezleri kodunuzda kullanırsanız, Internet Explorer Şekil 4'te gördüğünüze benzer bir hata verir. Düğüm ( Node ) 11
12 Internet Explorer, JavaScript'inizde Node değişmezini her kullanışınızda bu hatayı bildirir. Dünyadaki kullanıcıların büyük çoğunluğu hala Internet Explorer kullandığı için kodunuzda Node.ELEMENT_NODE ya da Node.TEXT_NODE gibi yapıları kullanmaktan kaçınabilirsiniz. Internet Explorer programının gelecek sürümü olan Internet Explorer 7.0'da bu sorunun düzeltilmesi beklense de, Internet Explorer 6.x sürümünün yoğun olarak kullanımdan kalkması birkaç yıl sürebilir. Dolayısıyla Node değişmezini kullanmaktan kaçının; DOM kodunuzun (ve Ajax uygulamalarınızın) tüm ana tarayıcılarda çalışması önemlidir. DOM'yi gerçekten anlamaya çalışır ve sonunda bu konuda uzmanlaşırsanız, en üst Web programlama beceri düzeyine erişirsiniz. Web programcılarının çoğu kayan resimler yazmak ya da bir formdan değerleri almak için JavaScript'i nasıl kullanacağını bilir; hatta bazıları, sunucuya istek göndermeyi ve sunucudan nasıl yanıt alınacağını da bilir (bu dizinin ilk birkaç makalesinden sonra sizin de bunu yapıyor olmanız gerekir). Ancak, bir Web sayfasının yapısını hızla değiştirmek cesaretsiz ya da deneyimsiz programcılara göre değildir. Bu dizinin son birkaç makalesinde birçok şey öğrendiniz. Bu noktada, oturup bir sonraki makalede DOM ağacının tüm akıllı kullanım çeşitlerini ele almamı beklememelisiniz. Şimdiki ev ödeviniz DOM ile hoş etkileri ya da parlak arabirimleri nasıl yaratacağınızı keşfetmek. Bu son iki makalede öğrendiklerinizi gözden geçirin ve deney yapıp kodlarla biraz oynamaya başlayın. Bir masaüstü uygulamasını andıran, bir kullanıcı işlemine yanıt olarak nesnelerin ekranda hareket ettiği bir Web sitesi oluşturup oluşturamayacağınızı görün. Daha da iyisi, ekrandaki her nesnenin çevresine bir sınır çizin ve nesnelerin DOM ağacındaki yerlerini görün ve nesneleri hareket ettirmeye başlayın. Düğümler oluşturun ve bunları var olan alt öğe listelerine ekleyin; iç içe geçmiş birçok düğümden oluşan düğümleri kaldırın; bir düğümün CSS stilini değiştirin ve bu değişikliklerin alt düğümler tarafından alınıp alınmadıklarına bakın. Olasılıklar sınırsızdır ve yeni bir şeyi her deneyişinizde yeni bir şey öğrenirsiniz. Web sayfalarınızla oynamanın tadını çıkarın. Daha sonra, DOM'ye özel bu üçlemenin son parçasında DOM'nin bazı havalı ve ilginç uygulamalarını programlamanızla nasıl birleştireceğinizi göstereceğim. Kavramsal olarak konuşmayı ve API'yi anlatmayı bırakıp size biraz kod göstereceğim. O zamana kadar, kendinize ait birkaç parlak fikir bulun ve kendi başınıza nelergerçekleştirebileceğinizi görün. Kaynak Düğüm ( Node ) 12
JavaScript & DOM XML & JSON
JavaScript & DOM XML & JSON Ele alınacak başlıklar JavaScript Dili DOM (Document Object Model) JavaScript ve OO Programlama XML ve JSON JavaScript Kısım 1 Gelişim JavaScript, 1995 yılında Netscape tarafından
DetaylıÖğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte
DetaylıWeb sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.
Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.
DetaylıJAVASCRIPT JAVASCRIPT DİLİ
JAVASCRIPT JAVASCRIPT DİLİ Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim
DetaylıAşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.
12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için
DetaylıBMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı
DetaylıInternet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
Detaylıjquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme
az kod, çok iş! jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız
DetaylıÇ NDEK LER 1 XML E G R fi 1 XML Nedir? 1 XML in Avantajlar 3 HTML ve XML Aras ndaki Farklar 4 XML Dosyalar n Görüntülemek 6 XML Dosyas Oluflturmak 9
++XML-ILERI XML-icindeki 9/7/10 5:49 PM Page vii Ç NDEK LER 1 XML E G R fi 1 XML Nedir? 1 XML in Avantajlar 3 HTML ve XML Aras ndaki Farklar 4 XML Dosyalar n Görüntülemek 6 XML Dosyas Oluflturmak 9 XML
DetaylıCss Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin
Detaylı2-Hafta Temel İşlemler
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının
DetaylıAtatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:
Detaylı4 Front Page Sayfası Özellikleri
4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak
Detaylı4. Bağlantı (Köprü) Oluşturma
4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara
Detaylı2. HTML Temel Etiketleri
2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,
Detaylı12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar
DetaylıArama Sonuçlarında Üst Sıralarda Olmak. Temel SEO Çalışması
Arama Sonuçlarında Üst Sıralarda Olmak Temel SEO Çalışması 2 SEO (Search engine optimization), kısaltmasıdır. Arama motorları SEO işlemleri ile web sitelerini daha kolay bir şekilde taraması için yapılan
DetaylıJSON Korsanlığı. Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı
JSON Korsanlığı Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı İnternetin gün geçtikçe hayatımızdaki önemi arttı ve web siteleri milyonlarca insan tarafından girilen yerler haline geldi. Artık çevremizden
DetaylıFireBug eklentisini eklentiyi yazan sitesinden veya FireFox un eklentiler indirebilirsiniz.
Firebug Hakkında Firebug hakkında... Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasa da bu işin olmazsa olmazıdır. Kod yazarken muhakkak bazı sorunlarla karşılaşacağız,
DetaylıElbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU
Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları
DetaylıWeb Programlama. JavaScript (3)
Web Programlama JavaScript (3) Döküman Nesne Modeli (1/4) Document Object Model (DOM) DOM web tarayıcı tarafından, web sayfası yüklendiğinde otomatik oluşturulan bir organizasyon şemasıdır Web sayfasında
Detaylı2. Belgeye Metin Ekleme
METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya
DetaylıWeb Önyüzü Nasıl Olmalı? <Markup> : İskelet {css} : Görünüm JavaScript() : Etkileşim
Web Önyüzü Nasıl Olmalı? : İskelet {css} : Görünüm JavaScript() : Etkileşim Bu üç öğe olabildiğince esnek bağlı olmalı Kötü Örnek / İyi Örnek Standartlara uygun olmalı! Standartlara uygun
DetaylıMicrosoft Office Publisher 2016
Microsoft Office Publisher 2016 Publisher 2016 Publisher görsel açıdan zengin, profesyonel görünümlü yayınlar oluşturmanıza yardımcı olan bir masaüstü yayımcılık uygulamasıdır. Bilgisayarınızda Publisher'la
DetaylıÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını
DetaylıInternet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları
DetaylıDIV KAVRAMI <style> position: absolute
DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde
Detaylı1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.
1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html
DetaylıSeçenekler Menüsünden Genel Sekmesi
Seçenekler Menüsünden Genel Sekmesi Word 2003 açtıktan sonra ARAÇLAR>SEÇENEKLER tıklanır. Karşımıza bu tür ekran çıkar. İlk komut Arka planda yeniden sayfalandır ; Siz çalışırken belgeleri otomatik olarak
DetaylıWEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)
WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page) WEB KULLANICI KONTROLLERİ Kullanıcı kontrolleri bir içeriğin birden fazla sayfada kullanılmasına olanak sağlar. Bir web sayfasına eklenerek içerik
Detaylı1 JAVASCRIPT NEDİR? 1
İÇİNDEKİLER IX İÇİNDEKİLER 1 JAVASCRIPT NEDİR? 1 2 TEST ORTAMINI TANIMAK (FİREFOX VE FİREBUG) 5 Firefox 6 Firebug 8 CSS Sekmesi 10 DOM Sekmesi 11 Net ve Çerezler Sekmeleri 11 Script Sekmesi 11 Konsol Sekmesi
DetaylıYrd. Doç. Dr. Caner ÖZCAN
Yrd. Doç. Dr. Caner ÖZCAN Fonksiyonu Referans ile Çağırma (Call by Reference) Bir fonksiyona gönderilen parametrenin normalde değeri değişmez. Fonksiyon içinde yapılan işlemlerin hiçbiri argüman değişkeni
DetaylıHTML Sayfaları. Bütün html sayfaları
HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde
Detaylı<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>
HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber
DetaylıJavaScript Örnekleri PDF
5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript
DetaylıAMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1
AMACSEO TEMASI KULLANIM KILAVUZU AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 TEMANIN ÖZELLİKLERİ - Wordpress 3.1.1 sürümü için hazırlanmıştır. - Basit kontrol paneli
DetaylıZaman Değişkeni Tanımlama ve Yürürlükteki Zaman Değerini İfade Etme
Tarih-saat İşlemleri Bu sayfada zaman yöntem kodları üzerinde duracağız. Bu kodlar zaman birimlerini ifade etmekte, nesneleri zamana göre sıralamakta ve sorgulamakta kullanılır Zaman Değişkeni Tanımlama
DetaylıBİLGİSAYAR BİLİMİ DERSİ (KUR 1) PYTHON PROGRAMLAMA DİLİ ÇALIŞMA KÂĞIDI - 1
BİLGİSAYAR BİLİMİ DERSİ (KUR 1) PYTHON PROGRAMLAMA DİLİ ÇALIŞMA KÂĞIDI - 1 Ekrana Metin Yazdırmak Ekranda metin yazdırmak istendiğinde print komutu kullanılır. Kullanımı aşağıda verilmiştir. Parantez içinde
Detaylı1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ
1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ 6 1.1 Frontpage 2003 ün açılması Frontpage 2003 ü çalıştırabilmek için Başlat/Programlar/ Microsoft Office Microsoft Office Frontpage 2003 yolu izlenir. FrontPage 2003,
DetaylıProgramlama Yazılımı ile Web Sitesi Oluşturma
Hafta- 2 Programlama Yazılımı ile Web Sitesi Oluşturma Programlama yazılımı, bir web projesi oluşturmak için alternatif birkaç yol sunar. Buyollardan bir tanesi ihtiyaca uygun olarak seçilebilir. Programlama
DetaylıHTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
DetaylıGenel görevleri kullanmaya başlamanıza yardımcı olacak bazı ipuçları şunlardır: Kullanmaya Başlama Serisi
Genel görevleri kullanmaya başlamanıza yardımcı olacak bazı ipuçları şunlardır: Kullanmaya Başlama Serisi 2 Microsoft Dynamics CRM 2013 ve Microsoft Dynamics CRM Online Sonbahar 13 Öncelikle, gördüğünüz
DetaylıAğaç (Tree) Veri Modeli
Ağaç (Tree) Veri Modeli 1 2 Ağaç Veri Modeli Temel Kavramları Ağaç, bir kök işaretçisi, sonlu sayıda düğümleri ve onları birbirine bağlayan dalları olan bir veri modelidir; aynı aile soyağacında olduğu
DetaylıHızlı Başlangıç Kılavuzu
Hızlı Başlangıç Kılavuzu Microsoft Excel 2013 önceki sürümlerden farklı görünüyor, bu nedenle öğrenmenizi kolaylaştırmak için bu kılavuzu oluşturduk. Hızlı Erişim Araç Çubuğu'na komutlar ekleme Şeridi
DetaylıNote: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.
FRAME Tagı Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç
DetaylıAJAX nedir? AJAX nasıl çalışır? AJAX. Tahir Emre KALAYCI. Sunucu Yazılım Teknolojileri
nedir? Sunucu Yazılım Teknolojileri nedir? Gündem 1 nedir? 2 XML 3 nedir? nedir? : Asynchronous JavaScript and XML Yeni bir teknoloji değil, daha çok bir yöntembilim, teknik, tasarım deseni. RIA = Zengin
DetaylıMIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler
MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,
DetaylıHTML Bloklar. CSS Display özelliği
HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün
DetaylıHTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek
STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web
DetaylıHızlı Başlangıç Kılavuzu
Hızlı Başlangıç Kılavuzu Microsoft Access 2013 önceki sürümlerden farklı görünmektedir, dolayısıyla öğrenme eğrisini en aza indirmenize yardımcı olmak üzere bu kılavuzu hazırladık. Ekran boyutunu değiştirme
DetaylıBLM 112- Programlama Dilleri II. Hafta 5 İşaretçiler (Pointers)
1 BLM 112- Programlama Dilleri II Hafta 5 İşaretçiler (Pointers) Dr. Öğr. Üyesi Caner Özcan Hiç hata yapmayan insan, hiçbir şey yapmayan insandır. Ve hayatta en büyük hata, kendini hatasız sanmaktır. ~Y.
Detaylı1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ
1 MİCROSOFT FRONTPAGE 2003 E GİRİŞ 6 1.1 Frontpage 2003 ün açılması Frontpage 2003 ü çalıştırabilmek için Başlat/Programlar/ Microsoft Office Microsoft Office Frontpage 2003 yolu izlenir. FrontPage 2003,
DetaylıBİL-142 Bilgisayar Programlama II
BİL-142 Bilgisayar Programlama II (C/C++) Hazırlayan: M.Ali Akcayol Gazi Üniversitesi Bilgisayar Mühendisliği Bölümü Konular Giriş Sınıflar, Nesneler, Fonksiyon ve Veri Üyeleri Sınıf ve Fonksiyon Üyeleri
DetaylıİNTERNET PROGRAMLAMA II. Tanımlar
İNTERNET PROGRAMLAMA II Tanımlar WWW( World Wide Web) Dünya üzerindeki bütün bilgisayarların bağlı olduğu bir ağdır. Çoğunlukla Web olarak adlandırılır. Web üzerindeki bilgisayarlar standart protokolleri
DetaylıProgramlama Nedir? Bir bilgisayar bilimcisi gibi düşünmek ve programlama ne demektir?
2.1.1. PROGRAMLAMA NEDIR? Programlama Nedir? Bir bilgisayar bilimcisi gibi düşünmek ve programlama ne demektir? Bu düşünme şekli matematiğin, mühendisliğin ve doğa bilimlerinin bazı özelliklerini birleştirmektedir.
DetaylıYrd. Doç. Dr. Caner ÖZCAN
Yrd. Doç. Dr. Caner ÖZCAN Diziler ile Pointer Arası İlişki Bir dizi adı sabit bir pointer gibi düşünülebilir. Diziler ile pointer lar yakından ilişkilidir. Pointer lar değişkenleri gösterdikleri gibi,
DetaylıBTP 207 İNTERNET PROGRAMCILIĞI I. Ders 9
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 9 Dizi Değişkenler (Array) 2 Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1, eleman2,, elemann)
DetaylıRetargeting. MediaMind Turkey
Retargeting MediaMind Turkey Retargeting Retargeting Reklamverenlerin, belirlenen hedef kitleye yayın yapması için kullanılır. Retargeting İşleyişi 1. Kullanıcı, retargeting kodu bulunan sayfaya gider.
DetaylıMetin İşlemleri, Semboller
Ankara Üniversitesi Nallıhan Meslek Yüksekokulu Metin İşlemleri, Semboller NBP108 - GRAFİK ANİMASYON il Öğr.Gör. Salih ERDURUCAN 1 / 13 3. METİN İŞLEMLERİ 3.1. Metin Aracı Animasyon yazılımı yazı yazmak
DetaylıAndroid Ders Notları
Android Ders Notları 1. Yeni Bir Proje Başlatma Android Studio programında yeni bir proje başlatıyoruz. İlk olarak karşımıza resim 1 deki gibi bir pencere gelecek. Burada Application name kısmına proje
DetaylıInternet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2013 2014 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 26 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
DetaylıGoogle Scripts. Neticaret Sistemine Google Analytics ve AdWords sistemleriyle ilgili 3 yeni parametre eklenmiştir.
Google Scripts Neticaret Sistemine Google Analytics ve AdWords sistemleriyle ilgili 3 yeni parametre eklenmiştir. Yeni eklenen paremetrelere Neticaret Sistemi Yönetimi Paneli > Tanımlar bölümü altında
DetaylıWeb Tasarımı - Yrd. Doç. Devkan Kaleci 1
. onclick 2. onmouseover ve OnMouseOut 3. onload ve onunload 4. onsubmit 5. onreset 6. onfocus ve onblur 7. onchange 8. onabort, onerror 2 Bir olayın oluşması, mevcut durumda bir değişiklik olması anlamına
DetaylıMetin Editörleri YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ. ALINTI:
1 Metin Editörleri YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ ALINTI: https://webmaster.kitchen Metin Editörleri 2 Bir web sitesi geliştirmek istiyorsanız, bir HTML düzenleyicisine ihtiyacınız olacaktır. Elbette
DetaylıKopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd
Tüm haklar mahfuzdur. Bu yayının hiçbir kısmı ECDL Kuruluşundan izin almadan hiçbir şekilde çoğaltılamaz. Çoğaltım talepleri yayıncıya yapılmalıdır. The European Computer Driving Licence Foundation Ltd
DetaylıÜst Düzey Programlama
Üst Düzey Programlama Servlet Üst Düzey Programlama-ders01/ 1 Servlet Nedir? Web sayfaları ilk başlarda durağan bir yapıya sahipti ve kullanıcıdan bilgi alarak işlemler yapmıyordu. Zamanın geçmesiyle kullanıcıya
DetaylıAkdeniz Üniversitesi
F. Ders Tanıtım Formu Dersin Adı Öğretim Dili Akdeniz Üniversitesi Bilgi Teknolojileri Kullanımı Türkçe Dersin Verildiği Düzey Ön Lisans ( ) Lisans (x) Yüksek Lisans( ) Doktora( ) Eğitim Öğretim Sistemi
DetaylıBİLGİSAYAR MÜHENDİSLİĞİ BÖLÜM BAŞKANLIĞI DERS TANITIM BİLGİLERİ
BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜM BAŞKANLIĞI DERS TANITIM BİLGİLERİ Dersin Adı Kodu Sınıf / Y.Y. Ders Saati (T+U+L) Kredi AKTS İNTERNET TEKNOLOJİLERİ BG-412 4/1 2+2+0 2+2 6 Dersin Dili : TÜRKÇE Dersin Seviyesi
DetaylıJavascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.
Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html
DetaylıBİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011
BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.
DetaylıGenel Programlama II
Genel Programlama II 22.03.2011 1 Yapılar ( Structures ) Yapılar ( structures ); tam sayı, karakter vb. veri tiplerini gruplayıp, tek bir çatı altında toplar. Bu gruplandırma içinde aynı ya da farklı veri
DetaylıİNTERNET PROGRAMCILIĞI - II
0 İÇİNDEKİLER Bölüm 1 PHP İle Web Programlamaya Giriş 1 Bölüm 2 PHP Kodlama Standartları 5 Bölüm 3 PHP Değişken Kullanımı 17 Bölüm 4 IF Yapısı 32 Bölüm 5 Döngüler ve Diziler 64 1 BÖLÜM 1 PHP İLE WEB PROGRAMLAMAYA
DetaylıASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM
YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...
Detaylı5S4 NESNELER KONUŞUYOR
GENEL BAKIŞ ÖĞRENME ÇIKTILARI Blok temelli programlama ortamında sunulan hedeflere ulaşmak için doğru algoritmayı oluşturur. Doğrusal mantık yapısını uygular. Döngü mantık yapısını uygular. MATERYALLER
DetaylıJava JDK (Java Development Kit) Kurulumu:
Java JDK ve Eclipse Kurulumu Öncelikle java ile program geliştirmeye başlamak istiyorsanız iki şeye ihtiyacınız olacak; 1-Java JDK (Java Development Kit) : Java ile yazdığımız kodları derleyip çalıştırmak
DetaylıSite Temizlik Projesi Kodları
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu
DetaylıDaha önce bu işlemin iki tane dosya oluşturduğunu gördük. GecDenTest.aspx dosyasının source kısmında içeriğini inceleyecek olursanız en başta
Bu gün dersimizde Validation Geçerlik Dentimi Kontrollerine değineceğiz. Önce adı GecerlikDeneme isimli bir yeni site oluşturalım. Burada programın otomatik olarak oluşturacağı Default.aspx dosyasını ve
DetaylıAJAX TEKNİĞİ KULLANILARAK ÇOKTAN SEÇMELİ SINAV SİSTEMİ UYGULAMASI
T.C. BEYKENT ÜNİVERSİTESİ FEN BİLİMLERİ ENSTİTÜSÜ BİLGİSAYAR MÜHENDİSLİĞİ ANABİLİM DALI BİLGİSAYAR MÜHENDİSLİĞİ BİLİM DALI AJAX TEKNİĞİ KULLANILARAK ÇOKTAN SEÇMELİ SINAV SİSTEMİ UYGULAMASI YÜKSEK LİSANS
DetaylıPHP 1. Hafta 2.Sunum
PHP 1. Hafta 2.Sunum Hello World Bu derste görülecekler WAMP ve PHP Hosting kavramı ve bizi neden ilgilendirmediği Domain ve localhost kavramları www klasörü İlk PHP kodunun
DetaylıASP.NET ile Bir Web Sitesi Oluşturma
29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site
DetaylıBMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda
DetaylıWeb Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1
Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre
DetaylıHızlı Başlangıç Kılavuzu
Hızlı Başlangıç Kılavuzu Güvenli erişim, paylaşım ve dosya depolama sayesinde her yerde daha fazlasını yapın. Office 365 aboneliğinizde oturum açın ve uygulama başlatıcıdan SharePoint'i seçin. Arama Siteler,
DetaylıWEB TASARIM I. Öğr. Gör. M. Mutlu YAPICI. Ankara Üniversitesi Elmadağ Meslek Yüksekokulu
WEB TASARIM I Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta PHP Tanımı ve Sunucu Kurulumları 2. Hafta PHP Yazım Notasyonu
DetaylıKurulum ve Başlangıç Kılavuzu. DataPage+ 2013 için
DataPage+ 2013 için En Son Güncellenme Tarihi: 25 Temmuz 2013 İçindekiler Tablosu Önkoşul Olan Bileşenleri Yükleme... 1 Genel Bakış... 1 Adım 1: Setup.exe'yi Çalıştırın ve Sihirbazı Başlatın... 1 Adım
DetaylıAjax kullanımı oldukça yaygınlaşmaktadır. Web tabanlı uygulamalar Ajax desteği ile çok daha esnek kullanışlı, performanslı bir yapıya kavuşmaktadır.
Ajax'a Giriş Ajax (asynchronous javascript and xml); web tabanlı uygulamalarda, zengin kullanıcı arayüzü ve güçlü arka plan uygulamaları bütünleştiren bir yaklaşım ve geliştirme ortamıdır. Ajax Bu yöntemde
DetaylıArayüz Geliştirme Dokümantasyonu
Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive
DetaylıÖrnek bir kullanım ve bilgisayar ağlarını oluşturan bileşenlerin özeti
Bu sayfaları okuduğunuza göre bir şekilde bilgisayarlar ve bilgisayar ağlarıyla ilişkiniz olduğunu biliyorum. Ancak yine de en başta niçin bilgisayar ağı kullanıyoruz sorusunun cevabını vermekle işe başlayabiliriz.
Detaylı11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ
11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,
DetaylıHTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) Ele Alınacak Başlıklar HTML tarihçesi Bir HTML dökümanın genel görünümü HTML ve tarayıcı etkileşimi Tarihçe Internet The World Wide Web (www) HTML URI/URL HTTP Tim Berners-Lee
DetaylıELN1002 BİLGİSAYAR PROGRAMLAMA 2
ELN1002 BİLGİSAYAR PROGRAMLAMA 2 VERİ YAPILARI Sunu Planı Kendini-gösteren Yapılar Dinamik Bellek Tahsisi Bağlı Listeler Yığınlar Kuyruklar Ağaçlar 1 Veri Yapıları Şu ana kadar, diziler, matrisler ve yapılar
DetaylıWeb 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr
Web 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr Javascript 1995 Netscape, Brendan Eich tarafından geliştirildi. Dinamik olmasının yanında en önemli iki özelliği; Lambda Closure Javascript -
Detaylıİçindekiler 1. ConnectProf a Geçiş Entegrasyon Adımları... 3 a. Paket Seçimi... 3 b. Link Ekleme ve Analiz... 4 c. Analiz Sonucu ve Alan
1 İçindekiler 1. ConnectProf a Geçiş... 3 2. Entegrasyon Adımları... 3 a. Paket Seçimi... 3 b. Link Ekleme ve Analiz... 4 c. Analiz Sonucu ve Alan Kontrolü... 4 d. Hedef Seçimi... 5 e. API Hesabı Seçimi...
DetaylıB03.10 Algoritmalari Uygulamak : Durum 3 (Yuvalı Kontrol Yapıları) Şimdi başka bir problem üzerinde çalışalım.
85 Yrd. Doç. Dr. Yakup EMÜL, Bilgisayar Programlama Ders Notları (B03) Şimdi başka bir problem üzerinde çalışalım. Algoritmamızı yine sahte kod ve yukarıdan aşağıya adımsal iyileştirmeyle oluşturacağız
Detaylı1.1. Yazılım Geliştirme Süreci
Kazanımlar Bu bolümde; Yazılım geliştirme sureci konusunda bilgi sahibi olacak, Yazılım geliştirme surecinde gerekli olan araçları tanıyacak, Python dilinde program geliştirme ortamlarını inceleyebileceksiniz.
Detaylıwww.wikispaces.com Kullanım Kılavuzu
www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz
DetaylıCambridge LMS e Başlama- Öğrenciler
Cambridge LMS e Başlama- Öğrenciler 1. Başlamadan önce LMS i kullanamaya başlamadan önce bilgisayarınızın minimum sistem gereklerine sahip olup olmadığını ve internet bağlantınızın kabul edilebilir bir
DetaylıHer bir ofis programının olduğu gibi FrontPage inde bir dosya uzantısı vardır. Bunlar *.html veya *.htm dosya uzantılarıdır.
FrontPage Nasıl Kullanılır? 1 Giriş FrontPage programı kolay şekilde web siteler hazırlayabileceğiniz ofis yazılımlarından birisidir. Hiçbir kod bilgisi gerektirmeden tasarımlarını kolay şekilde yapabileceğini
DetaylıC#(Sharp) Programlama Dili
Değişkenler C#(Sharp) Programlama Dili Program yazarken her zaman sabit verilerle çalışmayız, çoğu zaman programımızda bir verinin kullanıcının davranışına göre değişmesi gerekir. Kullanıcıdan bir metin
DetaylıWeb Programlama Kursu
Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler
Detaylı