Javascript samples

From OriWiki

Jump to: navigation, search

Contents

basic 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript">
      function message() {
      alert("hey dude");
      }
    </script>
  </head>
  <body onload = "message()"> 
    testing javascript.. 
  </body>
</html>

external file 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript" src = "check.js">
    </script>
  </head>
  <body onload = "message()"> 
    testing javascript.. 
  </body>
</html>

using variables 

<html> 
  <head>
    <title> check page </title> 
  </head>
  <body> 
    <script type = "text/javascript">
      x = 7;
      y = "Yosi"
      document.write("Hello"+y+"<br /> your age is <h1>"+x+"</h1>")
    </script>
 
    testing javascript.. 
  </body>
</html>

date, time and a condition 

<html> 
  <head>
    <title> check page </title> 
  </head>
  <body> 
    <script type = "text/javascript">
      d = new Date(); 
      document.write("The date is:"+d+"<br />"); 
      h = d.getHours(); 
      document.write("The hours are:"+h+"<br />"); 
      if (h<6) {
	       document.write("time is earlier than 5AM<br />"); 
      } else {
	       document.write("time is not earlier than 5AM<br />"); 
      }
    </script>
 
    testing javascript.. 
  </body>
</html>

a button 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript">
      function foo() {
      alert("hi"); 
      }
    </script>
  </head>
  <body> 
    <input type = "button" onclick = "foo()" value = "ok"> 
    testing javascript.. 
  </body>
</html>

confirmation box 

<html> 
  <body> 
    <script type = "text/javascript">
    x = confirm("do you realy want to do it?"); 
    if (x == true) {
    document.write("ok, let's go for it! <br />")
    } else {
    document.write("lo rotze lo tzrih <br />")
    }
    </script>
 
 
    testing javascript.. 
  </body>
</html>

prompt 

<html> 
  <body> 
    <script type = "text/javascript">
    x = prompt("please..",7); 
    if (x == null) {
    document.write("did you press cancel? <br />")
    } else if (x == 7) {
    document.write("that's the default value <br />")
    } else {
    document.write("magniv "+x+" <br />")
    }
    </script>
 
 
    testing javascript.. 
  </body>
</html>

onload event 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript" src = "check.js">
    </script>
  </head>
  <body onload = "message()"> 
    testing javascript.. 
  </body>
</html>

simple calculator 

<html> 
  <body> 
    <script type = "text/javascript">
      try {
         x = prompt("what do you want me to calculate?"); 
         result = eval(x);
         document.write("result: "+result); 
      } catch (e) {
        document.write("error: "+e+"<br /> "); 
      }
    </script>
  </body>
</html>

another simple calculator 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript">
      function go() {
      x = document.getElementById("mytext");
      str = x.value; 
      str = str.replace(/cos/g,"Math.cos");
      try {
        str = eval(str); 
      } catch(e) {
        alert (e+" "+str); 
      }
      alert(str);
      }
    </script>
  </head>
  <body> 
    <p> Please enter your caculation here </p>
 
    <input type = "text" id = "mytext" />
    <input type = "submit" value = "=" onclick = "go()" />
 
  </body>
</html>

form submittion 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript">
      function process_form(f) {
       alert(f.mytext.value);
      }
    </script>
  </head>
  <body> 
    <p> Please enter your caculation here </p>
    <form onsubmit = "return process_form(this)"> 
      <input type = "text" id = "mytext" size = "30"/>
      <input type = "submit" value = "=" />
    </form>
 
  </body>
</html>

onmouse image change 

<html> 
<head>
 
<script type = "text/javascript">
  function mouseOnDwarf() {
    document.getElementById("dwarf_img").src = "img/dwarf_angry.png";
  }
 
  function mouseOutOfDwarf() {
    document.getElementById("dwarf_img").src = "img/dwarf_happy.png";
  }
 
</script>
 
</head> 
<body> 
 
<table border = "5" align = "center">
  <tr>
    <td>
      <img src="img/dwarf_happy.png" width="200" id="dwarf_img" onmouseOver="mouseOnDwarf()" onmouseOut = "mouseOutOfDwarf()"/>  
    </td> 
  </tr>
</table>
 
</body> 
</html>

background color change 

<html> 
  <head>
    <title> check page </title> 
    <script type = "text/javascript">
      function changeToYellow() {
       document.body.bgColor = "yellow"; 
      }
      function changeToRed() {
       document.body.bgColor = "red"; 
      }
      function changeToGreen() {
       document.body.bgColor = "green"; 
      }
    </script>
  </head>
  <body> 
    <input type = "button" value = "yellow" onclick = "changeToYellow()"/>
    <input type = "button" value = "red" onclick = "changeToRed()"/>
    <input type = "button" value = "green" onclick = "changeToGreen()"/>
  </body>
</html>

change text's font, color and size 

<html> 
  <head>
    <title> check page </title> 
 
    <script type = "text/javascript">
      function textEnlarge() { <!-- doesn't work yet.. -->
        document.getElementById('p1').style.fontSize += 10; 
      }
    </script>
 
  </head>
  <body> 
    <p id = "p1"> bla bla... </p> 
    <input type = "button" value = "b1" onclick = "document.getElementById('p1').style.color = 'blue';"/>
    <input type = "button" value = "b2" onclick = "document.getElementById('p1').style.fontFamily = 'Arial'"/>
    <input type = "button" value = "b3" onclick = "textEnlarge()"/>
 
  </body>
</html>

messing with DOM's style.. 

<html> 
  <head>
    <title> check page </title> 
 
    <script type = "text/javascript">
      x = 50; 
      function b1Clicked() {
        document.getElementById('p1').style.color = 'blue';
        document.getElementById('p1').style.backgroundColor = "white"; 
        document.body.style.backgroundImage = "";
      }
      function b2Clicked() {
        --x; 
        document.getElementById('p1').style.fontSize = x; 
        document.getElementById('p1').style.backgroundColor = "orange"; 
        document.getElementById('p1').style.fontFamily = 'Arial'
        document.body.style.backgroundImage = "";
        document.body.style.backgroundImage="url(img/ori.jpg)"; 
        document.body.style.backgroundRepeat = "repeat"; 
      }
      function b3Clicked() { 
        ++x; 
        document.getElementById('p1').style.fontSize = x; 
        document.getElementById('p1').style.backgroundColor = "yellow"; 
        document.body.style.bgImage = "img/ori.jpg"
        document.body.style.backgroundImage="url(img/ori.jpg)"; 
        document.body.style.backgroundRepeat = "no-repeat"; 
      }
    </script>
 
  </head>
  <body> 
    <p id = "p1"> Please note how this text's style is changing due to the buttons clicks </p> 
    <input type = "button" value = "b1" onclick = "b1Clicked()"/>
    <input type = "button" value = "b2" onclick = "b2Clicked()"/>
    <input type = "button" value = "b3" onclick = "b3Clicked()"/>
 
  </body>
</html>

instance calculator 

<html> 
  <head>
    <title> check page </title> 
 
    <script type = "text/javascript">
      function processText(event) {
        s = document.getElementById("myinput").value;
        document.getElementById("myresult").value = eval(s); 
      }
    </script>
 
  </head>
  <body> 
    <p> A calculator </p> 
    <input type = "text" id = "myinput" size = "40" onkeyup = "processText(event)"/>
    = 
    <input type = "text" id = "myresult" size = "30" />
 
  </body>
</html>

calculator when <ret> (different for IE and netscape) 

<html> 
  <head>
    <title> check page </title> 
 
    <script type = "text/javascript">
      function processText(e) {
        if ( (e.which && e.which != 13) || (window.event && e.keyCode != 13)) { // other,IE
          return;
        }
        s = document.getElementById("myinput").value;
        document.getElementById("myresult").value = eval(s); 
      }
    </script>
 
  </head>
  <body> 
    <p> A calculator </p> 
    <input type = "text" id = "myinput" size = "40" onkeyup = "processText(event)"/>
    = 
    <input type = "text" id = "myresult" size = "30" />
 
  </body>
</html>

guess my number 

<html> 
  <head>
    <title> A game: guess my number </title> 
    <script type = "text/javascript">
      var num; 
      var isOver = true; 
      function myWrite(msg) {
      document.getElementById("output").innerHTML = msg;
      }
 
      function new_game() {
      num = Math.floor(Math.random()*100)+1;
      isOver = false;
      document.getElementById("input").value = ""; 
      document.getElementById("theimg").src = "img/empty.png"; 
      myWrite("Ok, I thought of a number. Now try to guess it:"); 
      } 	     
 
      function guess(e) {
      if ( (e.which && e.which != 13) || (window.event && e.keyCode != 13)) { // other,IE
          return;
      }
      if (isOver) {
        myWrite("Please press 'new game' to start a new game");
        return;  
      }
      inpO = document.getElementById("input") 
      inp = inpO.value;
      inpO.value = "";
      addMsg = ". Please try again";  
      if (num > inp ) {
         msg = "My number is bigger"+addMsg;
      } else if (num < inp) {
         msg = "My number is smaller"+addMsg;
      } else if (num == inp) {
         msg = "** You're right! "+num+" is my number! **";
         document.getElementById("theimg").src = "img/person4.png";      
         isOver = true; 
      } else {
         msg = "Not a valid input"+addMsg
      }
      myWrite(msg);
      }
    </script>
 
  </head>
  <body>
<p id = "output"> Please press the "new game" button to start a new game </p>
    <input type = "button" onclick = "new_game();" value = "new game" />
    <input type = "text" id = "input" onkeyup = "guess(event);" />  
    <img src = "img/empty.png" id = "theimg" /> 
  </body>
</html>

test yourself game 

<html> 
  <head>
    <title> A test yourself game </title> 
 
    <script type = "text/javascript">
      a1 = 0; 
      a2 = 0; 
      a3 = 0; 
      a4 = 0; 
      a5 = 0; 
      a6 = 0; 
      a7 = 0; 
 
      function calc() {
        sum = a1+a2+a3+a4+a5+a6+a7; 
        if(sum < 10) {
          document.getElementById("result_txt").innerHTML = "איך לאמור זאת..אפשר להגיד שאתה די בלתי נסבל"; 
          document.getElementById("result_img").src = "img/person1.png"; 
        } else if (sum < 14) {
          document.getElementById("result_txt").innerHTML = "נסבל ממש בקושי"; 
          document.getElementById("result_img").src = "img/person2.png"; 
        } else if (sum < 17) {
          document.getElementById("result_txt").innerHTML = "בחור חביב"; 
          document.getElementById("result_img").src = "img/person3.png"; 
        } else {
          document.getElementById("result_txt").innerHTML = "אתה ממש ממש סבבה"; 
          document.getElementById("result_img").src = "img/person4.png"; 
	}
      }
    </script>
 
  </head>
  <body style = "text-align:right"> 
    <p style = "text-align:center; background:yellow">
      ?בחן את עצמך - כמה קל להסתדר איתך 
    </p>
 
    <!-- ############################################# -->
    <p>  ?בשיחה, האם אתה מחכה שהדובר השני יסיים משפט</p>  
לא	
    <input type = "radio" name = "q1" onclick = "a1=1"; />  
    <br/>
לפעמים
    <input type = "radio" name = "q1" onclick = "a1=2"; />  
    <br/>
בטח
    <input type = "radio" name = "q1" onclick = "a1=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
 
    <!-- ############################################# -->
    <p>  ?כשאתה רואה משהו זקוק לעזרה, האם אתה ניגש לעזור</p>  
לא	
    <input type = "radio" name = "q2" onclick = "a2=1"; />  
    <br/>
תלוי אם יש לי חשק
    <input type = "radio" name = "q2" onclick = "a2=2"; />  
    <br/>
תמיד
    <input type = "radio" name = "q2" onclick = "a2=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
    <!-- ############################################# -->
    <p>  ?אם מישהו דורך לך בטעות על הרגל, מה תעשה</p>  
אדרוך עליו חזק יותר, הוא צריך ללמוד לא להתעסק איתי	
    <input type = "radio" name = "q3" onclick = "a3=1"; />  
    <br/>
אצבוט אותו חלש באוזן
    <input type = "radio" name = "q3" onclick = "a3=2"; />  
    <br/>
אותר לו, הוא הרי לא עשה זאת בכוונה רעה
    <input type = "radio" name = "q3" onclick = "a3=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
 
    <!-- ############################################# -->
    <p>  ?אתה מאד ממהר וחבר שהולך איתך מתקדם מאוד לאט כי יש לו גבס. איך תנהג</p>  
אזרז אותו בצעקות	
    <input type = "radio" name = "q4" onclick = "a4=1"; />  
    <br/>
ארמוז לו בעדינות שהוא מעקב אותנו
    <input type = "radio" name = "q4" onclick = "a4=2"; />  
    <br/>
?מסכן, מה הוא יכל לעשות
    <input type = "radio" name = "q4" onclick = "a4=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
    <!-- ############################################# -->
    <p>  ?חברים שלי אומרים עלי שאני...</p>  
אדם קשה ונוקשה	
    <input type = "radio" name = "q5" onclick = "a5=1"; />  
    <br/>
די פרווה
    <input type = "radio" name = "q5" onclick = "a5=2"; />  
    <br/>
סבבה
    <input type = "radio" name = "q5" onclick = "a5=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
    <!-- ############################################# -->
    <p>  ...אתה הולך על מדרכה צרה ומולך מגיעה זקנה חולה</p>  
מי שיותר חזק יעבור קודם	
    <input type = "radio" name = "q6" onclick = "a6=1"; />  
    <br/>
אם יתחשק לי, אתן לה לעבור לפני 
    <input type = "radio" name = "q6" onclick = "a6=2"; />  
    <br/>
אפנה לה את הדרך ואעזור לה לעבור 
    <input type = "radio" name = "q6" onclick = "a6=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
    <!-- ############################################# -->
    <p>  ?כמה ריבים יש לך בשבוע ממוצע</p>  
בערך 14	
    <input type = "radio" name = "q7" onclick = "a7=1"; />  
    <br/>
משהו כמו 3
    <input type = "radio" name = "q7" onclick = "a7=2"; />  
    <br/>
אחד, אולי
    <input type = "radio" name = "q7" onclick = "a7=3"; />  
    <br/>
 
    <br/>
    <hr/>
 
 
    <input type ="button" value = "Submit" onclick = "calc()" />    
    <br />
 
    <p> <b> Result: </b> <p>
    <p id="result_txt"> </p>
    <img src="img/empty.png" id = "result_img">
 
  </body>
</html>
 
 


 

 

 

 

 
Retrieved from "http://www.orimosenzon.com/wiki/index.php/Javascript_samples"
Personal tools