Архив рубрики: javascript

Jscript Группировка в ассоциативном массиве с подсчетом

Listing jscript группировка

Есть данные: цвет. У каждого цвета свой размер (может повторятся). Необходимо сделать группировку в jscript по цвету и повторяющиеся размеры посчитать.

Вывести все это.

Для начала создадим массив наших данных. Нам для это надо создать массив массивов.

var array_res = new Array();
.....// тут цикл в котором получаю данные
array_res[i]=new Array ();
array_res[i].push(color,fasA+'x'+fasL+';'); //Получается вида [["Красный","716x396"],[....,....]]
....
//запускаем процедуру для группирования
  print_Group(array_res);

Сама функция для группировки с комментариями. Тут используются ассоциативные массивы.

function print_Group(arr_res){
  gr = [];  
   // Для каждого цвета собираем  его размеры 
for (var i = 0; i < arr_res.length; i++) {
  if (gr[arr_res[i][0]]== null ) {gr[arr_res[i][0]]="";}
   gr[arr_res[i][0]] += arr_res[i][1];
  }  

// группируем и считаем элементы
for (var k in gr) {
 // Выводим цвет 
document.write('<tr><td colspan="2"><b>'+ k + '</b></td></tr>');
c = []; 
t_c = gr[k].split(';'); //получаем массив всех размеров 
for (var i = 0; i < t_c.length-1; i++) {
 if (c[t_c[i]]== null) c[t_c[i]] = 0; 
  c[t_c[i]] +=1; // счетчик одинаковых размеров 
}
 //выводим размер и его количество
   for (var t in c) {
 document.write('<tr><td colspan="2">'+t + '= ' + c[t] +' шт'+ '</td></tr>'); 
   }
 }
}

Вот такая группировка получается в итоге.

group_array

Число в строку, строку в число на разных языках.

Преобразование числа в строку и обратной операции на разных языках программирования.

Строку в число

С++

int atoi(const char* str) //для чисел типа integer
long atol(const char* str)//для чисел типа long
double atof(const char* str)//для чисел типа double

 PHP

<?php
$foo = 1 + "10.5";                // $foo это float (11.5)
$foo = 1 + "-1.3e3";              // $foo это float (-1299)
$foo = 1 + "bob-1.3e3";           // $foo это integer (1)
$foo = 1 + "bob3";                // $foo это integer (1)
$foo = 1 + "10 Small Pigs";       // $foo это integer (11)
$foo = 4 + "10.2 Little Piggies"; // $foo это float (14.2)
$foo = "10.0 pigs " + 1;          // $foo это float (11)
$foo = "10.0 pigs " + 1.0;        // $foo это float (11)
?>

C#

m = int32.Parse("123456");//из строки целое число

 Javascript

Для явного преобразования можно использовать 2 способа:

var number = Number(string_value);
var number = string_value - 0;

parseInt("3 blind mice"); // Возвращает 3
parseFloat("3.14 meters"); // Возвращает 3.14
parseInt("12.34"); // Возвращает 12
parseInt("0xFF"); // Возвращает 255

Число в строку

С++

char* itoa(int value, char* string, int radix) //для чисел типа integer
char* itoa(long value, char* string, int radix)//для чисел типа long
char* itoa(double value, char* string, int radix)//для чисел типа double

PHP

$name=5;
$string_name = (string)$name;

C#

int a=5;
string s=a.toString();

 Javascript

var string_value = String(number); // Использование конструктора String()
// в качестве функции
var string_value = number + ""; // Конкатенация с пустой строкой

Еще одну возможность предоставляет метод toString():

var n = 17;
string_value = number.toString();

Заливка текста текстурой в HTML5

Используем Canvas PatternВывод текста с текстурой, используя HTML5 Canvas

Создадим фон текста изображением.

 

Необходимо загрузить изображение-текстуру. после этого с помощью createPattern() создать текстуру. Также при необходимости можно задать, чтобы изображение повторялось либо нет.

 var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern;

Полный листинг примера HTML5 Canvas Pattern

<body>
<canvas id="canvas" width="500" height="300"></canvas>

<script>
var cnvs = document.getElementById('canvas');
var crx = cnvs.getContext("5");
crx.restore();
var img = document.createElement('img');
img.onload = function () {
crx.fillStyle = crx.createPattern(img, 'repeat');
crx.font = 'bold 100px sans-serif';
crx.fillText("Красота", 50, 120);
};
img.src = '1.jpg';
</script>
</body>

AJAX и PHP — работа с базой данных

Задача:

Динамический показ данных (товар) в зависимости от выбора элемента (категория) в выпадающем списке , используя AJAX.

Решение (Пример):

Шаг 1

Создать файл index.php, в котором

  • подключаемся к базе данных для получения списка категории

Листинг файла подключения к БД auth.php

<?
$hostname = "localhost"; // название/путь сервера, с MySQL
$username = "root"; // имя пользователя (в Denwer`е по умолчанию "root")
$password = ""; // пароль пользователя (в Denwer`е по умолчанию пароль отсутствует, этот параметр можно оставить пустым)
$dbName = "test"; // название базы данных

/* Создаем соединение */
mysql_connect($hostname, $username, $password) or die ("Не могу создать соединение");
mysql_query('SET NAMES utf8') or header('Location: Error');

/* Выбираем базу данных. Если произойдет ошибка - вывести ее */
mysql_select_db($dbName) or die (mysql_error());
?>
  •  выводим форму с выпадающим списком из этих категорий

Выпадающий список

  • пишем AJAX запрос на обработку выбранного элемента

Листинг файла с AJAX запросом index.php

<?php
include "auth.php";//Подключаем БД
//делаем запрос на категории
$query = "select * from allcat where Id_parent=0 ";
$result = mysql_query($query) or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
Выберите Категорию:<br/>
<select id="idcat">
<?php
//Выводим категории и ее ID
while ($row=mysql_fetch_array($result))
{
print "<option value=".$row['Id_cat'].">";
print $row['Name'];
echo("</option>");
}
?>
</select>
</form>

<div id="content"></div>

<script>
$(document).ready(function(){

$('#idcat').change(function(){
$.ajax({
type: "POST",
url: "show.php",
data: "idcat="+$("#idcat").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});

});
</script>

</body>
</html>

Шаг 2

Создать файл show.php, в котором обрабатываем AJAX запрос

  • подключаемся к базе данных для получения списка товаров по ID категории
  • выводим полученные товары

Листинг файла для обработки запроса show.php

<?php
include "auth.php"; //Подключаем БД
//делаем запрос на товары этой категории
$query = "select * from allcat where Id_parent=".$_REQUEST['idcat']."";
$result = mysql_query($query) or die(mysql_error());
// выводим товары полученные по запросу
while ($row=mysql_fetch_array($result))
{
print $row['Name']."<br>";
}
?>

 

Поиск и показ полей по введенному значению

Реализация поиска и показа значения наподобие автодополнения.

Например необходимо реализовать поиск строчек стихотворения, в котором есть введенное слово или его часть.

Стих Пушкина для поиска строк

Если введем слово в списке должны отобразиться только те строчки в которых присутствуют данное слово. И все это по мере ввода искомого слова.

Результат поиска строчек в реальном времени

Создадим поле для ввода текста и сам список полей в которых необходимо искать информацию или данные в режиме реального времени этакий автопоиск:

Добавим для наглядности css:

input, select {
width: 300px;
margin: 10px auto;
display: block;
}

При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.

Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода не постоянно, лучше использовать объектную запись регулярных выражений RegExp() вместо литеральной:

var field = $('#list').find('option');

// собственно поиск
$('#searching').bind('keyup', function() {
    var q = new RegExp($(this).val(), 'ig'),
        bol = true;

    for (var i = 0, l = field.length; i < l; i += 1) {
        var option = $(field[i]),
            parent = option.parent();

        if ($(field[i]).text().match(q)) {
            if (parent.is('span')) {
                option.show();
                parent.replaceWith(option);
            }
        } else {
            if (option.is('option') && (!parent.is('span'))) {
                option.wrap('').hide() } } } });

Видно, что непосредственно поиск не представляет ничего сложного: весь интерес в отображении найденных результатов. Дело в том, что простое применение свойств, скрывающих элементы списка, невсегда приводит к ожидаемому результату. Например, в некоторых браузерах (Chrome, Internet Explorer) если просто добавить display:none к тегу option, последний всё равно останется видимым.

Однако этот же тег option, обернутый тегом span, понимает display:none, и ведёт себя корректно.