Archiwum tagów: JavaScript

Could not find a JavaScript runtime

Witam,

Tworząc nowy projekt w railsach 3.1 podczas wywołania

rake db:create

Pojawił mi się taki oto błąd:

Rake aborted!
Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.

(See full trace by running task with --trace)

Aby pozbyć się tego błędu należy dodać do pliku Gemfile dwa gemy:

gem 'execjs'
gem 'therubyracer'

Oczywiście jeszcze:

bundle install

I wszystko działa jak należy :)

Pozdrawiam

Javascript i checkbox

Witam,

Dzisiaj napiszę o tym jak sprawdzić za pomocą czystego JavaScriptu czy pole input typu checkbox jest zaznaczone.

Tak więc mając:

<input type="checkbox" name="name_checkbox" value="yes">

aby sprawdzić czy checkbox jest zaznaczony należy napisać:

if(document.nazwa_formularza.name_checkbox.checked == true)
    alert('yes');
else
    alert('no');

Jak widać na obiekcie document odwołujemy się do własności checked naszego elementu checkbox podając nazwę formularza w którym się znajduje oraz nazwę checkboxa. Następnie sprawdzamy czy zwrocona zostanie wartość true;

Pola input można również grupować ze sobą w ten sposób:

<p>Checkbox1<input type="checkbox" name="nazwa_checkbox"></p>
<p>Checkbox2<input type="checkbox" name="nazwa_checkbox"></p>
<p>Checkbox3<input type="checkbox" name="nazwa_checkbox"></p>

Własność name każdego checkboxa jest taka sama. Dzięki takiemu grupowaniu można w JavaScripcie np. kontrolować czy chociaż jedno z tych pól zostało zaznaczone itp. Ale to za chwile.

Tymczasem dokonamy sprawdzenia, które pola zostały zaznaczone i po kliknięciu przycisku wyświetlimy ich indeksy:

for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
    if (document.nazwa_formularza.nazwa_checkbox[i].checked == true)
        alert("Checkbox o indeksie "+i+" jest zaznaczony!");
}

1. Aby sprawdzić ile mamy checkboxów odnosimy się do własności length

2. Sprawdzamy w pętli własność checked każdego elementu naszej tablicy z checkboxami

Uwaga! Należy pamiętać oczywiście, iż indeksowanie tablicy zaczyna się od 0!

Napiszemy teraz praktyczniejszy skrypt sprawdzający czy chociaż jeden checkbox został zaznaczony:

Plik html:

<form method="post" name="nazwa_formularza" action="index.php">
    <p>Checkbox1<input type="checkbox" name="name_checkbox" value="1"></p>
    <p>Checkbox2<input type="checkbox"name="name_checkbox" value="2"></p>
    <p>Checkbox3<input type="checkbox" name="name_checkbox" value="3"></p>
    <p><input type="submit" value="Wyślij"></p>
</form>

JavaScript:

window.onload = load;

function load(){
    document.forms['nazwa_formularza'].onsubmit = check;
}

function check(){
    var zaznaczony = false;
    for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
        if (document.nazwa_formularza.name_checkbox[i].checked == true)
            zaznaczony = true;
    }
    if(zaznaczony == false){
        alert("Zaznacz chociaż jeden!");
        return false;
    }
    else
        return true;
}

Zdarzeniem onload uruchamiamy funkcję load(). Ta zaś przy zdarzeniu onsubmit naszego formularza uruchomi funkcję check(), która sprawdza czy chociaż jedno pole zostało zaznaczone.

Do własności checked można również przypisać wartość true lub false. Wykorzystamy to do zaznaczenia wszystkich pól typu checkbox za pomocą jednego buttona.

Do naszego formularza dodajemy przycisk i nadajemy mu id:

<p><input type="button" id="zaznacz_id" value="Zaznacz wszystkie"></p>

Do funkcji load() dopisujemy

document.getElementById('zaznacz_id').onclick = checkAll;

I teraz w momencie wystąpienia zdarzenia onclick uruchomi się funkcja checkAll();

Następnie utwórzymy taką oto metodę:

function checkAll(){
    for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
        document.nazwa_formularza.name_checkbox[i].checked = true;
    }
}

Ale co ona robi to chyba każdy już wie? :)

Tutaj możecie  zobaczyć sobie DEMO tego co teraz robiliśmy. Dopisałem jeszcze funkcję uncheckAll(), która odznacza wszystkie pola.

W najbliższej przyszłości zrobię wpis jak to samo zrobić używając bilbioteki jQuery.

Pozdrawiam

Hello world!

Witam,

W pewnym momencie nauki programowania (tj. dzisiaj) naszła mnie potrzeba i chęć założenia własnego bloga. Będzie to dla mnie pewnego rodzaju archiwum tego co zrobiłem i z jakimi problemami się zmagałem.

Jakie tematy będę omawiał? PHP, bazy danych, jQuery (biblioteka dla języka JavaScript), CSS, może trochę o wzorcach projektowych… No, może tyle na początek, reszta wyjdzie w praniu.

Tak więc na początek powiem gromkie ‘HELLO WORLD’ i do przodu.

PHP

<?php

echo 'Hello world';

?>

JavaScript

<script type="text/javascript">

      $(document).ready(function(){

           alert('Hello world!');

      });

</script>

HTML

<html>
      <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html;
                  charset=UTF-8">
      </head>
      <body>
            <p>Hello world!</p>
      </body>
</html>

Pozdrawiam