js i UserForm na WebBrowser   strona główna:
A po co ten Excel ;-)
 
 
 
Stara zabawka :-) oj stara.. Ale ile razy na nią trafię to wywołuje uśmiech na mojej twarzy :-)  
    Pamiętam że powstała: raz - chęci powtórzenia nie dawno zdobytej przeze mnie wiedzy, dwa - "prztyczek w noś" dla kogoś  
kto nie chciał kiwnąć palcem w temacie a oczekiwał gotowca ;-P  
 
Na czym polegało zadanie??   
Obrazek wyjaśni wszystko :-)  
Trzeba podać sumę z trzech liczb w jak najkrótszym czasie :-)  
 
Mo i moje rozwiązanie:  
 
 - struktura w HTML, a oprogramowanie w js  
 - plik wyświetlę na WebBrowser w Arkuszu.  
 
start.htm  
 
<head>  
   <title>Sprawdzanie umiejętności dodawania</title>  
</head>  
 
<body frameborder="no"  
      Scroll = "no"  
      TopMargin = "0"  
      leftmargin="0">  
   <center>  
      Sprawdzanie umiejętności dodawania ;-) <BR> JavaScript v1 <BR><BR>  
   </center>  
     
   <table>  
      <tr>  
     <th id="czas" colspan="7">&nbsp;</th>  
      </tr>  
      <tr>  
     <td id="A1">&nbsp;</td>  
     <td> + </td>  
     <td id="A2">&nbsp;</td>  
     <td> + </td>  
     <td id="A3">&nbsp;</td>  
     <td> = </td>  
     <td><input type="text"  
                Size = "10"  
                Name = "AS"  
                onChange="check(this.name, this.value)"/></td>  
     <td id="ACheck">&nbsp;</td>  
      </tr>  
      <tr>  
         <td id="B1">&nbsp;</td>  
     <td> + </td>  
     <td id="B2">&nbsp;</td>  
     <td> + </td>  
     <td id="B3">&nbsp;</td>  
     <td> = </td>  
     <td><input type="text"  
                Size = "10"  
                Name = "BS"  
                onChange="check(this.name, this.value)"/></td>  
     <td id="BCheck">&nbsp;</td>  
      </tr>  
      <tr>  
         <td id="C1">&nbsp;</td>  
     <td> + </td>  
     <td id="C2">&nbsp;</td>  
     <td> + </td>  
     <td id="C3">&nbsp;</td>  
     <td> = </td>  
     <td><input type="text"  
                Size = "10"  
                Name = "CS"  
                onChange="check(this.name, this.value)"/></td>  
     <td id="CCheck">&nbsp;</td>  
      </tr>  
   </table>  
 
   <script type="text/javascript">  
                 (skrypt oddzielnie)  
   </script>  
</body>  
 
 
Wymyśliłem sobie taką strukturę:
 
 
 
 
 
dla A:  
 
      <tr>  
     <td id="A1">&nbsp;</td>  
     <td> + </td>  
     <td id="A2">&nbsp;</td>  
     <td> + </td>  
     <td id="A3">&nbsp;</td>  
     <td> = </td>  
     <td><input type="text"  
                Size = "10"  
                Name = "AS"  
                onChange="check(this.name, this.value)"/></td>  
     <td id="ACheck">&nbsp;</td>  
      </tr>  
 
pola A1, A2, A3, ACheck są puste, w polu AS znajdzie się TextBox do wpisania wyniku. Po wpisaniu czegoś w TextBox nastąpi  
jego zdarzenie onChange które wywoła Funkcję check z argumentami (this.name - nazwa TextBox'a  - w kodzie Name = "AS",  
this.Value - wpisana wartość)  
 
elementy B* i C* analogicznie…  
 
No i co ciekawsze.. Oprogramowanie takiego formularza.  
 
      window.onload = initTextBoxs;  
 
      var iTime = 0; var bKoniec = false;  
      var arr = new Array ("A", "B", "C");  
 
      function initTextBoxs() {  
         for (var i=1; i<4; i++) {  
           for (var j=0; j<arr.length ;j++) {  
               var newNum = Math.floor(Math.random()*100)+1;  
               document.getElementById(arr[j] + i).innerHTML = newNum;  
            }  
         }  
         countSec()  
      }  
 
     function countSec() {  
       if (bKoniec == false) {  
         document.getElementById("czas").innerHTML = iTime + " sekund";  
         iTime += 1;  
         setTimeout("countSec()",1000);  
       }else{  
         alert ("Koniec!! :-) Czas: " + iTime + " Sekund");  
       }  
     }  
 
     function check(strID, vVal) {  
       alert ("strID: " + strID + " vVal:" + vVal);  
         Var lngSum = 0  
         for (var i=1; i<4; i++) {  
            lngSum += parseFloat(document.getElementById(strID.slice(0,1) + i).innerHTML)  
       }  
       document.getElementById(strID.slice(0,1) + "check").innerHTML = (lngSum == vVal);  
       bKoniec = czyKoniec();  
     }  
 
     function czyKoniec() {  
       Var iOK = 0  
         for (var j=0; j<arr.length; j++) {  
           iOK += (document.getElementById(arr[j] + "check").innerHTML === 'true')  
         }  
         return (iOK == arr.length);  
      }  
        
Fragmentami:  
 
      window.onload = initTextBoxs;  
 
Podczas ładowania się strony nastąpi zdarzenie window.onload które wywoła funkcję initTextBoxs  
 
      var iTime = 0; var bKoniec = false;  
      var arr = new Array ("A", "B", "C");  
 
Zmienne globalne. iTime do zliczania czasu trwania naszego myślenia nad sumami, bKoniec - czy już podaliśmy wszystkie dobre  
sumy. arr - tablica żebym mógł w pętli sprawdzać elementy tabeli/formularza HTML  
 
      function initTextBoxs() {  
         for (var i=1; i<4; i++) {  
           for (var j=0; j<arr.length ;j++) {   JavaScript random() Method
               var newNum = Math.floor(Math.random()*100)+1;   JavaScript floor() Method
               document.getElementById(arr[j] + i).innerHTML = newNum;   Document getElementById() Method
            }  
         }  
         countSec()  
      }  
 
Zadanie polega na wylosowaniu dla elementów formularza A1, A2, A3, B1, B2, B3, C1, C2, C3 liczb całkowitych z zakresu 1 - 100.  
Po wylosowaniu liczb i umieszczeniu ich w polach trzeba rozpocząć naliczanie czasu.  
 
     function countSec() {  
       if (bKoniec == false) {  
            document.getElementById("czas").innerHTML = iTime + " sekund";  
            iTime += 1;  
            setTimeout("countSec()",1000);  
         }else{  
        alert ("Koniec!! :-) Czas: " + iTime + " Sekund");  
       }  
     }  
 
a więc:  
       iTime += 1;  
zwiększam zmienną iTime o 1.  
 
       if (bKoniec == false) {  
jeżeli jeszcze nie udzielono wszystkich odpowiedzi…  
 
        document.getElementById("czas").innerHTML = iTime + " sekund";  
element formularza o id czas (nad tabelą z liczbami) odświeżam - podając iTime  
 
            setTimeout("countSec()",1000);  
planuję ponowne wywołanie funkcji countSec za 1sekundę  
 
Teraz przejdźmy do zdarzeń TextBox'ów - co gdy podamy jakąś odpowiedź??  
 
     function check(strID, vVal) {  
       //alert ("strID: " + strID + " vVal:" + vVal);  
         Var lngSum = 0  
         for (var i=1; i<4; i++) {  
            lngSum += parseFloat(document.getElementById(strID.slice(0,1) + i).innerHTML)   JavaScript String slice() method
         }   JavaScript parseFloat() Function
         document.getElementById(strID.slice(0,1) + "check").innerHTML = (lngSum == vVal);  
         bKoniec = czyKoniec();  
     }  
 
niby skomplikowane ale po kolei:  
 
    strID.slice(0,1)  
w js stringi mają metody. Metoda slice wyciąga fragment tekstu z poprzedzającego ją stringu. A więc:  
strID to nazwa TextBoxa np.: AS .  slice(0,1) zwróci A  
 
    strID.slice(0,1) + i  
to złączenie: A & i dla i = <1,3> a więc: A1, A2, A3 :-)  
 
    document.getElementById(strID.slice(0,1) + i).innerHTML  
pobierze w pętli wartości elementów A1, A2, A3   
 
    parseFloat(document.getElementById(strID.slice(0,1) + i).innerHTML)  
wartości te to jednak teksty więc trzeba je przerobić na liczby  
 
    lngSum += parseFloat(document.getElementById(strID.slice(0,1) + i).innerHTML)  
sumowane w zmiennej lngSum :-)  
 
za pętlą:  
 
    lngSum == vVal  
vVal to wartość wpisana przez użytkownika jako wynik, lngSum to prawidłowa wartość. Czy te wartości są równe??  
 
    strID.slice(0,1) + "check"  
to element np.: ACheck  
 
    document.getElementById(strID.slice(0,1) + "check").innerHTML = (lngSum == vVal);  
W element np.: ACheck podawana jest informacja: czy podana wartość jest prawidłowa..  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
         bKoniec = czyKoniec();  
 
 
 
     function czyKoniec() {  
       Var iOK = 0  
         for (var j=0; j<arr.length; j++) {  
           iOK += (document.getElementById(arr[j] + "check").innerHTML === 'true')  
         }  
         return (iOK == arr.length);  
      }  
 
Tu w pętli są sprawdzane elementy *Check. Jeżeli w każdym jest 'true' to w zmiennej iOK będzie wartość równa liczbie elementów  
w tablicy arr :-)  
 i jeżeli wszystko jest OK :-)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Ha.. Fart miałem :-)  
 
Teraz jak to wykorzystać w Excelu??
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
i pod przycisk w Arkuszu:  
 
Option Explicit  
 
Private Sub CommandButton1_Click()   Przykład do pobrania
    With Me.WebBrowser1   jsdodawanie.zip
        .Navigate ThisWorkbook.Path & "\start.htm"  
    End With  
End Sub