Статистика агенттігінің сайтынан Javascript арқылы танымал есімдер тізімін аламыз

Бұл түн де жұлдызы мол, тып-тыныш қоңыр салқын түн болатын… © G.H.A.D — Түн

Астана уақыты бойынша сағат түнгі екі жарым. Мен КЕНЕТ шабыттанып кетіп, мына постты жазуды бастап кеттім.

Алғы сөз.
Осындан бірнеше ай бұрын, Статистика агенттігінің сайтынан, «танымал есімдер» атты қызық парақшаны көріп қалдым. Ол жерде 1934 жылдан бері, қай жылы, қай айда, қандай есімдер танымал болғанын көрсетіп береді екен. Бұны көре сала, мен бұл мәліметтерді өзіме көшіріп алғым келді. Бірақ әр жылды таңдап, оның ішінен әр айды таңдап, оның ішінен қыздар мен ұлдарды бөлек таңдап, шығарған есімдерді қолмен көшіріп отыруға әрине шыдамым жетпеді. Сосын скрипт арқылы көшіруді жөн көрдім. Бір жағынан осылай тәжірибе жасамағаныма да біраз болып еді.

Тапсырма былай.
Ешқандай php-сіз. Тек фронт-эндте. Тек браузерде. Тек статистика агенттігінің сайтындағы бар элементтерді пайдалана отырып. Қосымша Расширениесіз. Тек Chrome console арқыл, ы сайтта отырып, 1934-2014 жылдар арасындағы әр айдан «танымал есімдер» тізімін массивке көшіріп алу керек. Ал кеттік!

Бірінші күн.
Статистика агенттігінің сайтына кіріп, сайттың html құрылымын зерттей бастадым. Зерттей келе, басты элементтерді идентифицировать етіп, скрипт арқылы таңдап алу жолын тапқаннан кейін алгоритім төмендегі суреттегідей болды.

Жәрәйді, түсінікті. Былай оңай сияқты. Кодын ертең жазармын.

Екінші күн.
Кодын кешегі құрған алгоритм бойынша жазып шыққандай болдым. Цикл арқылы орындалады. Бірінші циклда жылды таңдаймыз, ол циклдың ішінен тағы бір цикл айды таңдайды, айды таңдайтын циклдың ішінде қыздар мен ұлдар есімін таңдап, интервал арқылы тексеріп отырып, жауап келген бойда ол есімдерді массивке көшіретін код болады. Былайша ақылға қонымды код сияқты. Орындалу керек. Chrome console-н ашып (Ctrl+Shift+J), төмендегі кодты орындауға жібердім.


Жо жоқ! Былай болуы мүмкін емес! over1000 қате дейді ((( Не дұрыс емес?


Қай жерден қате болуы мүмкін? Әрі ойландым, бері ойландым. Шешімін таппағасын, жарайды ертең қарармын деп жауып тастадым.

Үшінші күн.
Үшінші күн гуглдан жауап іздеумен өтті. Кодыма қараймын, миымда компиляция жасаймын, бәрі дұрыс орындалу керек сияқты. Мүмкін setInterval() дұрыс жасамай тұрған шығар? setTimeout мен setInterval туралы тереңірек оқып келдім. Сонда да қате неден екенін таба алмадым. Мүмкін цикл дұрыс жүрмей тұрған шығар? Қате болса да, программам қайтарған жауаптарды қараймын, массивті дұрыс құрып тұр, бірақ ішінде мәндері жоқ екен. Неден болуы мүмкін, НЕДЕЕЕН?! Мүмкін интервалым орындалмай жатып, цикл орындалып кетіп жатқан болар? Ия ия! Дәл солай! Енді қалай циклды тоқтата тұрамыз? Маған серверден жауап келмейінше, келесі циклға өтіп кетпей, циклды тоқтата тұру керек. Гуглдан сұрап келіп едім, ол тіпті басқа «цикл» туралы жауап берді :D


Ия, қате неден екені түсінікті болды. Циклды қалай тоқтата тұрудың ақылға қонымды жолып таппағасын, тапсырмамды одан әрі қиындата түстіп. Енді скриптымда цикл болмауы керек. Циклсыз қалай жасаймын бірақ? Мммм цикл дегеніміз жалпы не ол? Қарапайым тілмей айтқанда Цикл дегеніміз белгілі бір мәні жалған болмайынша қайталап орындала беретін командалар жиынтығы. Мммммм. Мүмкін функциялар арқылы орындалар? Мүмкін өзін өзі шақырып тұратын функция арқылы? Оооо оо, міне міне жақындап келе жатырмын, ойланамыз ойланамыз. Мүмкін белгілі бір мәнге жетпейінше бірін-бірі шақырып тұратын функциялар тірбезі бойынша? БИНГО! Дәл осылай жасаймын. Бірақ ертең!

Төртінші күн.
Төртінші күні бұл код туралы тіпті ұмытып кетіппін, арқаэээн жұмыстан үйге келіп, интернетті шұқылап, енді не істеймін деп отырғанда, түнгі он екіде есіме түсті. Код жазуды бастадым. Бірақ ішінде цикл болмауы керек.

Айнымалылардан бастайық
var tanymalEsimder = []; //мынау біздің массивіміз
var jyl = 1934; // мынау жыл
var ai = 1; // мынау ай
var n = 0; // мынау принцесса Диана


Бірінші циклды қалай жоямын? Ол циклдың орнына жылды таңдайтын функция жазамын.

function jylTagdau(){ // жылды таңдайтын функция
	$('select[name=pt1:lovt1] option:selected').removeAttr("selected"); // қандай да бір жыл таңдалған болса, оны алып тастаймыз
	$("select[name=pt1:lovt1] :contains('"+jyl+"')").attr("selected", "selected"); // өзімізге керек жылды таңдаймыз
	tanymalEsimder[jyl] = []; // массивіміздің ішінде массив құрамыз
	if(jyl == 2014){ // егер жыл 2014 болса
		console.log(tanymalEsimder); // массивті console-ге шығарамыз
		return; // циклды тоқтатамыз
	}else{ // әйтпесе
		aiTandau(); // айды таңдаймыз
	}
}


Жылды таңдадық, енді айды таңдаймыз, бұл та циклсыз болуы керек. Функция
function aiTandau(){ // айды таңдайтын функция
	$('select[name=pt1:lovt2] option:selected').removeAttr("selected"); // қандай да бір ай таңдалған болса, оны алып тастаймыз
	$("select[name=pt1:lovt2] option[value='"+ai+"']").attr("selected", "selected"); //өзімізге қажет айды таңдаймыз
	tanymalEsimder[jyl][ai] = []; // массивтің ішіндегі массивке массви құрамыз
	kyzdar(); // жыл таңдалды, ай таңдалды, енді сол уақыттағы танымал қыздар есімін шығаратын функцияны шақырамыз
}


Қыздардың есімін шығаратын функция
function kyzdar(){ // Қыздардың есімін шығаратын функция
	document.getElementById('pt1:cb1').click(); // қыздардың есімін шақыру үшін сол элементті таңдап алып, клик оқиғасын шақырамыз (ары қарата сайттағы функция өзі жұмыс жасайды)
	tanymalEsimder[jyl][ai]['aiel'] = []; // массивтегі массивтің ішіндегі массивтің ішіне массви құрамыз :)
	var intervalID1 = setInterval(function(){ // интервалды бастаймыз
		if($('.girls_center div').length != 0){ //тексереміз, егер жауап келген болса ғана
			$('.girls_center div').each(function(){ // қыздардың есімі жазылған блокты таңдап алым, ішіндегі мәндерін массивімізге көшіреміз
				tanymalEsimder[jyl][ai]['aiel'][n++] = $(this).text(); //мәндерін көшіреміз
			});
			n = 0;// счетчигімізді қалпына келтіреміз
			clearInterval(intervalID1); // интервалды тоқтатамыз
			uldar(); // келесі функция, ұлдардың есімін шығарып аламыз
		}
	}, 1000); // интервал жиілігі секунд сайын
}


Ұлдардың есімін шығаратын функция
function uldar(){  //Ұлдардың есімін шығаратын функция
	document.getElementById('pt1:cb2').click(); //клик оқиғасын шақыру арқылы функцияны жүргіземіз
	tanymalEsimder[jyl][ai]['er'] = []; // ...... массив
	var intervalID2 = setInterval(function(){ // интервал
		if($('.boys_center div').length != 0){ //егер бос болмаса
			$('.boys_center div').each(function(){ // көшіреміз
				tanymalEsimder[jyl][ai]['er'][n++] = $(this).text();// көшіреміз
			});
			clearInterval(intervalID2); // интервал тоқтатамыз
			n = 0; // счетчикті қалпына келтіреміз
			ai++; // келесі айға өтеміз
			if(ai == 13){ //егер ай 13 болса, онда
				jyl++; // келесі жылға өтеміз де
				ai = 1; // айды басынан бастаймыз
				jylTagdau(); // жыл таңдау функциясын қайта шақырамыз
			}else{ // әйтпесе
				aiTandau(); // келесі айды таңдау функциясын шақырамыз
			}
		}
	}, 1000); // интервал жиілігі
}


Осы төрт функцияны жазып, бір біріне жақсылап тұрып байлап, тізбектейміз. Бірін бірі шақыратындай етіп. Циклсыз. Мынау точно орындалуы керек!

Функциямызды шақырамыз.
jylTagdau();


АААААААА! УРАААА! Скриптім жүріп жатыр! Не ддеген бақыт мынау! :) Сағат түнгі біржарым. Қуанышым қойныма сыймай твиттерге бір мақтанып келдім. Сосын Ербол осында жазшейші дегесін мында тағы жазып жатырмын :)

Өздеріңіз тексеріп көруіңізге болады. Мына адреске кіріп, браузер console-на, мына сілтемедегі кодты көшіріп, Enter батырмасын басамыз.


Енді ары қарата не істейміз? Мен бұл скрипт орындалып болғасын, массивиті аякс арқылы php скриптыма жіберемін, ол скриптім бұл массивтерді базаға жазады да, кейін мен сол базадан осы мәліметтерді алып, бірдеңе мутить етемін. Әзірге не екені белгісіз. Бірақ бастысы менде БАЗА бар! Уууууу! Кейін ерініп қалмасам, жалғасын жазып қалармын.

Қорытынды.
Сонымен біз бұл посттан не үйрендік?
— Браузердің console арқылы біраз нәрсе жасауға болатынын
— Цикл ішіндегі интервалының аяқталғанын күтпейтінін
— Функция құруды :)
— Әлі Джаваскрипттен көп нәрсе үйрену керек!

Бітті!

  • +6
15 пікір
Abylai_adil
Оқымай тұра тұрыңдар, өңдейтін жерлері бар екен әлі
kamyrov
Абылай, базар жоқ жаздың), өңдегеннен кейін айт, тағы бір оқып шығамын)))
Abylai_adil
Өңдегенде, тек қателерін жөндеп, артық мылжың сөздерді алып тастадым. Сосын бір видео қостым :)
abzalsariyev
Не айтып жатсыңдар?
Мен қайда тап болдым өзі???
kamyrov
Сәлем Абзал), біздің сайтқа қош келіпсің,
сайт туралы білгің келсе, міне шағын ақпарат -> codeo.kz/blog/Codeo/44.html
raimbek
Не айтып жатсыңдар?
javascript жайлы
Мен қайда тап болдым өзі???
codeo.kz

(қалжың)
raimbek
Кейін ерініп қалмасам, жалғасын жазып қалармын.
Соңғы жүзжылдықтағы ең танымал есімді білеміз деген үміттеміз ))

P.S. О, тағы бір ой, есімдердің танымалдылық графигін тұрғызуға болады
raimbek
А, иә, график жайлы қатты қиялдап кетіппін, оған статистика аздық қылады екен.
Abylai_adil
Уот, уот брат, сондай бірдеңе мутить еткім келеді. График, диаграмма, инфографика… Осы демалыста көремін
kamyrov
Абылай, өтініш мысал ретінде Ерлан есімінің танымалдылық графигін есептеп берші)
kamyrov
мүмкін болса, соңғы 100 жылғы статистикаға жүгініп)
Abylai_adil
Ок, күт :)
raimbek
Әр адам өз атының статистикасын көре алатындай етіп скрипт жаза салу керек.
anonym
Жақсы, бір кемшілігі керегінен көп уақыт жұмсапсың )
Abylai_adil
әр күн асып кетсе бір сағат уақыт жұмсалды, одан көп уақыт жұмсасам жалығып кетер едім
Тек тіркелген қолданушылар ғана пікір қалдыра алады.