Pull to refresh

Играем в страны и немного JavaScript

Reading time4 min
Views626
Где-то пару недель назад, я бродил по просторам необъятного интернета и наткнулся вот на такую интересную «игру» ссылка. Посредством этой странички можно проверить сколько стран вы многоуважаемый %username% в состоянии вспомнить.Но один момент меня существенно насторожил и озадачил. Первая страна пришедшая мне на ум была Канада, она успешно добавилась в список стран, которые я вспомнил. Затем еще несколько. Когда же я ввёл Австралия, то скрипт явно дал сбой. Ничего не происходило. «Австралия» так и весела в текстовом поле для ввода стран. Я усомнился в написании страны и залез в вики, что бы уточнить. Но никакой ошибки в написании не было. Уж не ваших ли это рук Девид Блэйн дело? Но залез в FireBug обнаружил следующую интересную вещь
var countries = new Array('Австралия', 'Австрия', 'Азербайджан', ...);
// функция проверяющия является ли введенное слово страной
function isCountry©
{
for(var i=0; i<countries.length; i++){
  if (c.toLowerCase() == countries[i].toLowerCase())
  {
   return i;
  }
}
 return false;
}
//непосредсвенно сама проверка

if (i = isCountry(v) )
   {
      found.innerHTML += countries[i] + ', ';
      countC++;
      countries.splice(i,1);
      if (countC == 0) count.innerHTML = 'Вы вспомнили ВСЕ страны!!!';
      else       count.innerHTML = 'Осталось ' + countries.length;
      t.value = '';
   }
* This source code was highlighted with Source Code Highlighter.


итак «Австралия» в массиве стран с индексом «0». Функция isCountry отработает штатно и вернёт индекс вхождения Австралии — 0.
Следующая функция выводящая найденные страны в блок , при проверки условия if (i = isCountry(v) ), получит i = 0
то есть if ( 0 ) и в результате чего вариант с Австралией будет «считаться ложным». В JS как и в PHP false эквивалентен 0.
Если же вспомнить такой курс как «тестирование ПО» то наиболее критично программа работает на границах допустимого интервала и при составлении тестовых вариантов необходимо учитывать в первую очередь, крайние варианты.
Ч тож спасибо всем кто дочитал до этой строки. А теперь позвольте предложить решение этой же задачи но уже средствами Jquery

var countries = new Array('Австралия', 'Австрия',… 'Япония');

var count = 0;
//функция осуществляющая поиск в массиве по значеню (аналаг php функции)
function array_search( needle, haystack, strict ) {  // Searches the array for a given value and returns the corresponding key if
  // successful
  //
  // +  original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

  var strict = !!strict;

  for(var key in haystack){
    if( (strict && haystack[key].toLowerCase() === needle) || (!strict && haystack[key].toLowerCase() == needle) ){
      return key;
    }
  }

  return false;
}
//переменные таймера
    var minutes = 4;
    var seconds =59;

$(document).ready( function(){
//стартуем таймер
var timer = window.setInterval(function()
{   var timeStr = '';
if (seconds < 0) minutes--;
if (minutes <= 0 && seconds <= 0 )
  {
       $('#result').empty().append(«Вы вспомнили „ + count + “ стран» );
       $('#clock').empty().val();
     window.clearInterval(timer);
  }
   if(seconds == -1){
      seconds = 59;
   }
    timeStr += «0» + minutes;
   timeStr += ((seconds < 10)? ":0": ":") + seconds;
  $('#clock').empty().val(timeStr);
  seconds--;
}, 1000);

// непосредсвенная проверка введенного на страну
   $('#text').keyup( function() {
   var result = array_search($('#text').val().toLowerCase(),countries);
   if ( result !== false ) {
      count++;
      seconds += 3;
      $('#found').append(countries[result]+", ");
      $('#again').show();
      countries.splice(result,1);   
      $('#text').val("");
      $('#count').empty().append(«Осталось :» + countries.length);
   }
    } );
   

});
* This source code was highlighted with Source Code Highlighter.

Вообщем-то всё тоже самое, но на Jquery. Это приятней и понятней выглядит. Решить проблемы с нулевым идексом Австралии можно было двумя путями введением фиктивного нулевого элемента в список стран ( но зачем хранить избыточные данные, да и это больше напоминает латание, а не устраниение ошибки ) или же поступить по другому. Как было сказанно выше 0 и false в JS эквивалентны ( и функции IsNaN, IsFinite их не различают. Вспомним про конструкцию вида === которая не только проверяет, на совпадение значений, но и совпадение типов
таким образом функция array_search() точно также возвращяет вхождение конкретного элемента

var result = array_search($('#text').val().toLowerCase(),countries);
   if ( result !== false )
* This source code was highlighted with Source Code Highlighter.

для Австралии вернёться 0, но 0 отличен по типу, от значения false и таким образом блок кода отвечающий за вывод найденых стран сработает в штатном режиме. =)

Всем спасибо. Надеюсь эта статья хоть, чем нибудь вам помогла, или заставила призадуматься. А и это мой ППНХ, не судите строго я же всё же есчё не волшебник, я только учусь
Долго не мог выложить, то что написал, не хватало кармы
Tags:
Hubs:
Total votes 25: ↑17 and ↓8+9
Comments17

Articles