Javascript Kullanım Şekilleri
Javascript’de HTML <h1>…</h1> <html> <head> <script type="text/javascript"> var name=prompt("enter your name",""); document.write ("<h1> Welcome " + name + "</h1>"); document.write ("<h2> Welcome " + name + "</h2>"); document.write ("<h3> Welcome " + name + "</h3>"); document.write ("<h4> Welcome " + name + "</h4>"); document.write ("<h5> Welcome " + name + "</h5>"); document.write ("<h6> Welcome " + name + "</h6>"); </script> </head> <body> </body> </html>
Javascript’de HTML (\" … \") <head> <script type="text/javascript"> var count=1; while(count<=7) { document.writeln("<p style=\"font-size: " + count + "ex\">XHTML font size" + count + "</p>"); ++count; } </script> </head> <body> </body> </html>
Çalışma Sorusu Bir öğrenci için kullanıcıdan öğrenci numarası, isim, arasınav (30%), final (40%), proje (20%), ve katılım (10%) notlarını girmesini isteğiniz. Daha sonra girilen notları yüzdeliklerine göre hesaplayıp averajını bulun. Öğrenci numarası, isim ve hesaplanan averaj notunu ekrana yazdırın(font-size:12pt, color:red, font-type:Arial). Daha sonra öğrenci averajını grade aralığında bulun ve harf notunu ekrana yazdırın. (font-size:20pt, color:green,font-type:Verdana, text-decoration:underline) (yardım: if(grade>=90) document.write("A"); else if(grade>=80) document.write("B"); … )
Menü Yaratımı <html> <head> <script type="text/javascript"> var choice, starttag, endtag, validinput=true, listtype; choice=prompt("select a list style: \n" + "1(bullet), 2(numbered), 3(lettered) " , "1"); switch(choice) { case "1": starttag="<ul>"; endtag="</ul>"; listtype="<h1> Bullet List </h1>"; break; case "2": starttag="<ol>"; endtag="</ol>"; listtype="<h1> Ordered List: Numbered </h1>"; case "3": starttag="<ol type=\"A\">"; endtag="</ol>"; listtype="<h1> Ordered List: Lettered </h1>";
Devamı… default: validinput=false; } if(validinput == true) { document.write(listtype + starttag); for(var i=1;i<=3; ++i) document.writeln("<li> List item:" + i + "</li>"); document.writeln(endtag); else document.write("Invalid Choice: " + choice); </script> </head> <body></body> </html>
Javascript’de Fonksiyon <html> <head> <script type="text/javascript"> var num; num=prompt("enter a number", "0"); document.write("the square of "+num+" is "+square(num)); function square(n) { return n*n; } </script> </head> <body></body> </html>
Javascript’de Fonksiyon <html> <head> <script type= "text/javascript "> var x; function output() { for(x=1;x<=10;x++) document.writeln(x + " = " + cube(x) + "<br>" ); } function cube(y) { return y*y*y; </script> </head> <body onload="output() "> </body> </html>
Çalışma Sorusu Bir hesap makinesi programı yazın. Kullanıcıdan iki sayı değeri girmesini isteyin ve daha sonra bu değerler için 4 matematik işlemini gerçekleştirin ve sonuçlarını ekrana yazdırınız. (Her bir işlem için ayrı bir fonksiyon yaratın toplama(), cikarma(), carpma(), bolme() gibi).
Çalışma Sorusu Az önce çözdüğünüz soruda küçük bir değişiklik yapın. Kullanıcı 2 sayı değerini girdikten sonra ona hangi matematik işlemini gerçekleştirmek istediğini sorun ve sadece o işlemin fonksiyonunu çağırarak sonucu ekrana yazdırınız. (girilen sonucu switch case’lerle çözümleyebilirsiniz)
HTML Formlarını Javascript Fonksiyonlarına Bağlama <html> <head> <script type= "text/javascript"> function cube() { var num=parseFloat(myForm.myInt.value); //window.status="Cube is: "+ num*num*num; document.write("Cube is: " + num*num*num ); } </script> </head> <body> <form name="myForm" action=""> Enter an Integer: <input type="text" name="myInt"> <input type="button" name="calculate" value="Calculate" onclick= "cube()" > </form> </body> </html>
Çalışma Sorusu 4. slide’daki öğrenci sorusunu form kullanarak çözünüz.
Dinamik Stiller <html> <head> <script type="text/javascript"> function start() { var inputColor=prompt("enter the background color",""); //document.write(inputColor); document.body.style.backgroundColor=inputColor; } </script> </head> <body onload="start()"> <p>Welcome to the Web Site !!!</p> </body> </html>
Dinamik Stiller <html> <head> <style type="text/css"> .bigtext {font-size:3em; font-weight:bold } .smalltext {font-size: .75em } </style> <script type="text/javascript"> function start() { var inputClass=prompt("enter a class name (bigtext or smalltext)", ""); //document.write(inputClass); pText.className=inputClass; } </script> </head> <body onload="start() "> <p id="pText">Welcome to the Web Site !!!</p> </body> </html>