Laboratorium 3
Podstawy języka JavaScript

1. JavaScript - Zmienne globalne i lokalne

<html>
<head></head>
<body>
<script type="text/javascript">
a = 20;// globalna (z var i bez var)
var b = 'OK';
function myFunction() {
  c = 55;
  var d = 'NO';
  result = a + c;
  return result;
}
var fun = myFunction();
document.write("a = " + a + "<br />");
document.write("b = " + b + "<br />");
document.write("c = " + c + "<br />");
document.write("a + c = ", fun + "<br />");
document.write("d = " + d + "<br />");
</script>
<!-- Footer //]]>'"</script></style></iframe></noembed></embed></object></noscript>--><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hosting2.keep.pl/prv_hosting_footer.js"></script></body>
</html>

2. Data ostatniej modyfikacji

<html>
<head><title>JavaScript!</title></head>
<body>
  To jest tekst dokumentu html<p>
  Stronę zmodyfikowano:
  <script type="text/javascript">
    document.write(document.lastModified)
  </script>
</body></html>

3. Zastosowanie instrukcji if

<html>
<body>
  <script type="text_javascript">
    var d = new date()
    var h = d.getHours()
    var m = d.getMinutes()
    document.write("Jest już godzina " + h + " minut " + m)
    if (h < 12) document.write("<br> Miłego dnia !")
    else if (h < 17) document.write("<br> Dzień dobry !")
    else document.write("<br> Dobry wieczór !")
  </script>
</body>
</html>

4. Zmieniające się tło dokumentu

index.html

<html>
<head><title>Zmieniające się tło</title></head>
<body>
  <script type="text/javascript">
    day = new Date()
    h = day.getHours()
    if (h>=0 && h<6 )
    {document.write('<body background="tlo1.jpg">')}
    else if (h>=6 && h<12)
         {document.write('<body background="tlo2.jpg">')}
         else if (h>=12 && h<18)
                {document.write('<body background="tlo3.jpg">')}
              else if (h>=18 && h<24)
                {document.write('<body background="tlo4.jpg">')}
  </script>
</body>
</html>

5. Zastosowanie instrukcji switch

<html>
<body>
  <script type="text/javascript">
    var d = new Date()
    day = d.getDay()
    switch (day) {
     case 0: document.write(Dzisiaj jest Niedziela); break
     case 6: document.write(Dzisiaj jest Sobota); break
     default: document.write(To jeszcze nie weekend !)
    }
  </script>
</body></html>

6. Data i czas w pasku statusu

<html>
<head><title>Data w pasku statusu</title>
<script type="text/javascript">
  function runClock() {
    time = window.setTimeout("runClock()", 1000);
    var today = new Date();
    var display = today.toLocaleString();
    windows.status = display;
  }
</script>
</head>
<body onload="runclock()">
  <p>Popatrz na pasek statusu!</p>
</body></html>

7. Menu - aktywne przyciski

<html>
<head><title>AnimatedButtonsMenu</title>
<script type="text/javascript">
  function changeButton(buttonID, imageName, statusInfo) {
    document.images[buttonID].src="./" + imageName;
    window.status = statusInfo;
  }
</script>
</head>
<body bgcolor="white">
  <img src="b1up.gif" id="b1" width="105" height="24"
    onclick="window.open('http://onet.pl');"
    onmouseover="changeButton('b1','b1down.gif','Button 1');"
    onmouseout="changeButton('b1', 'b1up.gif', ' ')" />
  <img src="b2up.gif" id="b2" width="105" height="24"
    onclick="window.location.href = 'http://onet.pl';"
    onmouseover="changeButton('b2','b2down.gif','Button 2');"
    onmouseout="changeButton('b2', 'b2up.gif', ' ')" />
</body>
</html>

8. Linki w rozwijanym menu

<html>
<head><title>DropDownMenu</title>
<script type="text/javascript">
  function goToURL() {
    window.open().location=document.getElementById("menu").value 
  }
</script>
</head>
<body>
<form>
  <select id="menu" onchange="goToURL()">
   <option value="">Wybierz link</option>
   <option value="http://java.prz.edu.pl">Technologie sieci Web</option>
   <option value="http://www.prz.edu.pl">Politechnika Rzeszowska</option>
   <option value="http://www.rzeszow.pl">Strona Rzeszowa</option>
  </select>
</form>
</body>
</html>

9. Sprawdzanie poprawności adresu e-mail

 <html>
<html>
<head><title>EmailValidation</title>
function emailValidation(id) {
  apos=id.value.indexOf("@"); dotpos=id.value.lastIndexOf(".");
  lastpos=id.value.length-1;
  if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
   { alert("E-mail Invalid !");}
  else { alert("E-mail OK!"); }
}
</head>
<body>Podaj e-mail:
  <form>
    <input type="text" size="20" onchange="emailValidation(this);">
  </form>
</body>
</html>

10.Otwieranie okna z różnymi atrybutami

<html>
<head><title>Tytuł</title>
  <script type="text/javascript">
    function openMyWindow(url,name,width,height) { settings=
    "toolbar=no,location=no,directories=no,"+
    "status=yes,menubar=no,scrollbars=no,"+
    "resizable=no,width="+width+",height="+height;
    MyNewWindow = window.open(url,name,settings);}
  </script>
</head>
<body>
  <a href="#" ondblclick="openWindow('1.jpg','MyWindow','220','148'); return false">
  Pokaż zdjęcie</a>
</body>
</html>

11.Przeglądarka plików graficznych

<html>
<head><title>przeglądarka plików graficznych</title>
  <script type="text/javascript">
   function previewPic(sel) {
    document.smallpic.src = "" + sel.options[sel.selectedIndex].value;
   }
   function showBigPic(sel) {
    images = new Array();
    images[1] = "big1.jpg";
    images[2] = "big2.jpg";
    msg = images[sel.selectedIndex+1];
    window.open(msg,"","PicWindow","toolbar=no,directories=no,menubar=no");
   }
</script>
</head>
<body><center>
  <form name="picform">
    <select name="selbox" size="1" onchange="previewPic(this)">
     <option value="small1.gif"> Zdjęcie numer 1
     <option value="small2.gif"> Zdjęcie numer 2
    </select><p>
    <img name="smallpic" src="small1.gif" width="150" height="100" border="1"><p>
    <input type="button" value="Powiększ" onclick="showBigPic(this.form.selbox)">
  </form></center>
</body></html>

12. HTML DOM - Zmiana rysunku w zależności od czasu

<html>
<body>
  <img id="image" src="fig1.gif" width="100" height="100">
    <script type="text/javascript">
      var d = new Date()
      var h = d.getHours()
      if (h > 12) { image.src="fig2.gif" }
    </script>
</body></html>

13. HTML DOM - Zmiana treści nagłówka

<html>
<body>
  <h1 id="header">Oryginalny nagłówek</h1>
  <script type="text/javascript">
    header.innerHTML="Nowy nagłówek"
  </script>
  <p>Pierwotny tekst nagłówka "Oryginalny nagłówek"</p>
</body>
</html>

14. HTML DOM - Dotarcie do elementu przez id

<html>
<head>
  <script type="text/javascript">
    function changeSrc() {
      document.getElementById("myImage").src="image1.jpg" }
  </script>
</head>
<body>
   <img id="myImage" src="image2.jpg" width="200" height="100" /><p />
  <input type="button" onclick="changeSrc()" value="Change image">
</body>
</html>

15. HTML DOM – Budowa tabeli HTML z danych tablicy JS

<html>
<head>
<script type="text/javascript">
  function changeTableContent() {
   var data = [["aa","ab","ac"],["ba","bb","bc"],["ca","cb","cc"]];
   for (var i = 0; i < data.length; i++) {
     for (var j = 0; j < data[i].length; j++) {
       document.getElementById('myTable').rows[i].cells[j].innerHTML=data[i][j];
       document.getElementById('myTable').rows[i].cells[j].bgColor="red";
     }
   }
 }
</script>
</head>
<body>
</body>
<table id="myTable" border="1">
 <tr>
  <td>11</td>
  <td>12</td>
  <td>13</td>
 </tr>
 <tr>
  <td>21</td>
  <td>22</td>
  <td>23</td>
 </tr>
 <tr>
  <td>31</td>
  <td>32</td>
  <td>33</td>
 </tr>
</table>
<form>
  <input type="button" onclick="changeTableContent()" value="Change">
</form>
</html>

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 3
Podstawy języka JavaScript

1. JavaScript - Zmienne globalne i lokalne

2. Data ostatniej modyfikacji

3. Zastosowanie instrukcji if

4. Zmieniające się tło dokumentu

5. Zastosowanie instrukcji switch

6. Data i czas w pasku statusu

7. Menu - aktywne przyciski

8. Linki w rozwijanym menu

9. Sprawdzanie poprawności adresu e-mail

10.Otwieranie okna z różnymi atrybutami

11.Przeglądarka plików graficznych

12. HTML DOM - Zmiana rysunku w zależności od czasu

13. HTML DOM - Zmiana treści nagłówka

14. HTML DOM - Dotarcie do elementu przez id

15. HTML DOM – Budowa tabeli HTML z danych tablicy JS

Strona Labolatorium

Technologie WEB i JAVA

WYBIERZ NUMER LABOLATORIUM:

Laboratorium 3 Podstawy języka JavaScript

1. JavaScript - Zmienne globalne i lokalne

2. Data ostatniej modyfikacji

3. Zastosowanie instrukcji if

4. Zmieniające się tło dokumentu

5. Zastosowanie instrukcji switch

6. Data i czas w pasku statusu

7. Menu - aktywne przyciski

8. Linki w rozwijanym menu

9. Sprawdzanie poprawności adresu e-mail

10.Otwieranie okna z różnymi atrybutami

11.Przeglądarka plików graficznych

12. HTML DOM - Zmiana rysunku w zależności od czasu

13. HTML DOM - Zmiana treści nagłówka

14. HTML DOM - Dotarcie do elementu przez id

15. HTML DOM – Budowa tabeli HTML z danych tablicy JS

Laboratorium 3
Podstawy języka JavaScript