var name=prompt("enter your name",""); document.write ("

Welcome " + name + "

"); document.write ("

Welcome " + name + "

"); document.write ("

Welcome " + name + "

"); document.write ("

Welcome " + name + "

"); document.write ("
Welcome " + name + "
"); document.write ("
Welcome " + name + "
"); ">

Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Javascript Kullanım Şekilleri.

Benzer bir sunumlar


... konulu sunumlar: "Javascript Kullanım Şekilleri."— Sunum transkripti:

1 Javascript Kullanım Şekilleri

2 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> ", "width": "800" }

3 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> ", "width": "800" }

4 Ç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"); … )

5 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>";

6 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> ", "width": "800" }

7 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> ", "width": "800" }

8 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> ", "width": "800" }

9 Ç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).

10 Ç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)

11 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>

Enter an Integer:
", "width": "800" }

12 Çalışma Sorusu 4. slide’daki öğrenci sorusunu form kullanarak çözünüz.

13 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>

Welcome to the Web Site !!!

", "width": "800" }

14 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>

Welcome to the Web Site !!!

", "width": "800" }


"Javascript Kullanım Şekilleri." indir ppt

Benzer bir sunumlar


Google Reklamları