Javascript Kullanm ekilleri Javascriptde HTML h 1h 1
- Slides: 14
Javascript Kullanım Şekilleri
Javascript’de HTML <h 1>…</h 1> <html> <head> <script type="text/javascript"> var name=prompt("enter your name", ""); document. write ("<h 1> Welcome " + name + "</h 1>"); document. write ("<h 2> Welcome " + name + "</h 2>"); document. write ("<h 3> Welcome " + name + "</h 3>"); document. write ("<h 4> Welcome " + name + "</h 4>"); document. write ("<h 5> Welcome " + name + "</h 5>"); document. write ("<h 6> Welcome " + name + "</h 6>"); </script> </head> <body> </html>
Javascript’de HTML (" … ") <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> </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: 12 pt, color: red, fonttype: Arial). • Daha sonra öğrenci averajını grade aralığında bulun ve harf notunu ekrana yazdırın. (font-size: 20 pt, color: green, font-type: Verdana, textdecoration: 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="<h 1> Bullet List </h 1>"; break; case "2": starttag="<ol>"; endtag="</ol>"; listtype="<h 1> Ordered List: Numbered </h 1>"; break; case "3": starttag="<ol type="A">"; endtag="</ol>"; listtype="<h 1> Ordered List: Lettered </h 1>"; break;
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) + " " ); } 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=parse. Float(my. Form. my. Int. value); //window. status="Cube is: "+ num*num; document. write("Cube is: " + num*num ); } </script> </head> <body> <form name="my. Form" action=""> Enter an Integer: <input type="text" name="my. Int"> <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 input. Color=prompt("enter the background color", ""); //document. write(input. Color); document. body. style. background. Color=input. Color; } </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: 3 em; font-weight: bold }. smalltext {font-size: . 75 em } </style> <script type="text/javascript"> function start() { var input. Class=prompt("enter a class name (bigtext or smalltext)", ""); //document. write(input. Class); p. Text. class. Name=input. Class; } </script> </head> <body onload="start() "> <p id="p. Text">Welcome to the Web Site !!!</p> </body> </html>
