JavaScript ile sayfada HTML içerikleri de biçimlendirebiliriz. Çok kullanılan bir yöntem olmasa da bilmekte fayda var.
<script>
var deneme00 = "Bu bir deneme yazısıdır.";
var deneme01 = "Bu da kalın yazılmış bir deneme yazısıdır.";
document.write(deneme00 + "<br />" + "<strong>" + deneme01 + "</strong>");
</script>
Burada yaptığımız deneme00 değişkeninden sonra yeni bir satıra geçtik ve deneme01 değişkenini kalın harfle yazdık. Eğer <br/> ve <strong> etiketlerinin ne işe yaradığını bilmiyorsanız HTML5 derslerine dönmelisiniz.
Bu bir deneme yazısıdır.
Bu da kalın yazılmış bir deneme yazısıdır.
Çıktımız ise bu şekilde olacaktır.
<body>
<p>Bu ilk satır.</p>
<p>Bu ikinci satır.</p>
<script>
document.write("<p>" + "Bu da üçüncü satır." + "</p>");
</script>
<p>Bu da dördüncü satır.</p>
</body>
Burada yaptğımız olay ise oldukça basit. Bu sefer script'imizi <body> içerisinde kullandık. Üçüncü satırı JavaScript ile yazdırdık.
Bu ilk satır.
Bu ikinci satır.
Bu da dördüncü satır.
Çıktımız ise bu şekilde olacaktır.
JavaScript'te metod, fonksiyon ile eş anlamlıdır. write( ) fonksiyonunu öğrenmiştik. Şimdi de string fonksiyonları öğreneceğiz.
sub( ): HTML'deki <sub> ile aynı işlevi görmektedir. Metinleri alt metin hâline getirir.
<script>
var deneme02 = "zibidi";
document.write("zinzin" + deneme02.sub());
</script>
İlk önce "zinzin" yazdırdık. Daha sonra "zibidi" sözcüğünü alt metin olarak yazdırdık.
zinzinzibidi
Çıktımız ise bu şekilde olacaktır.
sup( ): HTML'deki <sup> ile aynı işlevi görmektedir. Metinleri üst metin hâline getirir.
<script>
var deneme03 = "zinzin";
document.write(deneme03.sup() + "zibidi");
</script>
Bu sefer ilk önce "zinzin"i üst metin haline getirdik ve ardından "zibidi" yazdırdık.
zinzinzibidi
Çıktımız ise bu şekilde olacaktır.
bold( ): HTML'deki <strong> ile aynı işlevi görmektedir. Metinleri kalın harfle yazdırır.
italics( ): HTML'deki <em> ile aynı işlevi görmektedir. Metinleri italik harflerle yazdırır.
strike( ): HTML'deki <strike> ile aynı işlevi görmektedir. Metinlerin üzerini çizili hâle getirir.
toLowerCase( ): CSS'teki text-transform: lowercase; özelliği ile aynı işlevi görmektedir. Metindeki tüm harfleri küçük harfle yazar.
<script>
var deneme04 = "ZİNZİN";
document.write(deneme04.toLowerCase() + "zibidi");
</script>
"ZİNZİN" kelimesini küçük harflerle yazdırıyoruz.
zinzinzibidi
Çıktımız bu şekilde olacaktır.
toUpperCase( ): CSS'teki text-transform: uppercase; özelliği ile aynı işlevi görmektedir. Metindeki tüm harfleri büyük harfle yazar.
<script>
var deneme05 = "zinzin";
document.write(deneme04.toUpperCase() + "zibidi");
</script>
Bu sefer "zinzin" kelimesini büyük harfle yazdırdık.
ZİNZİNzibidi
Çıktımız ise bu şekilde olacaktır.
fontcolor( ): CSS'teki color özelliği ile aynı işlevi görmektedir. Metnin rengini değiştirmeye yarar.
<script>
var deneme06 = "zinzin";
document.write(deneme06.fontcolor("#666") + "zibidi");
</script>
"zinzin" harflerini gri renkte yazdırdık. #666 yerine blue, red, #009c16 gibi değerler de verebilirsiniz.
zinzinzibidi
Çıktımız ise bu şekilde olacaktır.
fontsize( ): CSS'teki font-size özelliği ile aynı işlevi görmektedir. Metnin boyutunu değiştirmek için kullanılır.
<script>
var deneme07 = "zinzin";
document.write(deneme07.fontsize("16px") + "zibidi");
</script>
"zinzin" kelimesinin boyutunu 16px olarak belirledim.
zinzinzibidi
Çıktımız ise bu şekilde olacaktır.
concat( ): Bir değişken içerisine başka bir değişken eklemek için kullanılır.
<script>
var deneme08 = "zinzin";
var deneme09 = "zomzom";
document.write(deneme08.concat(deneme09));
</script>
"zinzin" kelimesine "zomzom" kelimesini ekledim.
zinzinzomzom
Çıktımız ise bu şekilde olacaktır.
replace( ): Bir değişken içerisindeki harfleri ya da kelimeyi değiştirmeye yarar.
<script>
var deneme10 = "zinzinzomzomzupzup";
document.write(deneme10.replace("zupzup", "zepzep"));
</script>
"zinzinzomzomzupzup" kelimesindeki "zupzup" yerine "zepzep" yazdırdım.
zinzinzomzomzepzep
Çıktımız ise bu şekilde olacaktır.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde JavaScript'te diziler konusuna değineceğiz.