Урок номер 5

Написать функцию преобразования цвета из 10-ного представления в 16-ный. Функция должна принимать 3 числа от 0 до 255 и возвращать строковый хеш.

Результат:

function parseColor(C) {
    
    C = parseInt(C,10);

    if(isNaN(C)) {
      return "00";
    }

    if(C >=0 && C<256) {
     return C.toString(16);
    }

    return "255";
}

function RGBtoHex(R,G,B) {
  return (parseColor(R)+parseColor(G)+parseColor(B));
}

function RGBtoHexConvert() {

  var R = document.getElementById("R").value;
  var G = document.getElementById("G").value;
  var B = document.getElementById("B").value;

 document.getElementById("hexDIV").innerHTML =  "Hex: #"+RGBtoHex(R,G,B); 
}


      

Написать функцию, преобразующую число в объект. Передавая на вход число от 0 до 999, мыдолжны получить на выходе объект, в котором в соответствующих свойствах описаны единицы, десятки и сотни. Например для числа 245 мы должны получить следующий объект:{‘единицы’: 5, ‘десятки’: 4, 'сотни’: 2}. Если число превышает 999, необходимо выдать соответствующее сообщение с помощью console.log и вернуть пустой объект.

Решение:

  function CutNumber(Number) {

    this.init = function(Num) {
        if( 0 < parseInt(Num) && parseInt(Num)< 1000) {
            this.сотни = parseInt(Num/100);
            this.десятки = parseInt((Num - this.сотни*100)/10);
            this.единицы = parseInt(Num-this.десятки*10 - this.сотни*100);
        } else {
          if(typeof(this.единицы) != "undefined") {
            delete this.сотни;
            delete this.десятки;
            delete this.единицы;
          }
        }
      }

    this.init(Number);
  }


  var testNum = new CutNumber(256);
  console.log(testNum); 
  testNum.init(543);
  console.log(testNum); 
  testNum.init(232432);
  console.log(testNum);

  var testNum2 = new CutNumber(2526);
  console.log(testNum2);
      

* Реализовать функцию objectToQueryString(object), которая принимает аргументом объект, возвращает строку. Примеры работы:

console.log(objectToQueryString({user: 'Dmitry'})); 
//user=Dmitry
console.log(objectToQueryString({user: 'Dmitry', password: 'pass'})); 
//user=Dmitry&password=pass
console.log(objectToQueryString({user: 'Dmitry', password:'pass', id=1})); 
// user=Dmitry&password=pass&id=1
      

Решение:

function objectToQueryString(object) {
  var params = "";
  for (var key in object) {
    if (object.hasOwnProperty(key)) {
      params += key + "=" + object[key]+ "&";
    }
  }
 
  if(params !="") {
   params = params.substring(0, params.length-1);;
  }

  return params;

}

console.log(objectToQueryString({user: 'Dmitry'})); 
console.log(objectToQueryString({user: 'Dmitry', password: 'pass'})); 
console.log(objectToQueryString({user: 'Dmitry', password: 'pass', id: 1}));


      

Объекты могут быть использованы для построения различных структур данных. Часто встречающаяся структура – список (не путайте с массивом). Список – связанный набор объектов, где первый объект содержит ссылку на второй, второй – на третий, и т.п.

var list = { value: 1, rest: { value: 2, rest: { value: 3, rest: null } } };

Списки удобны тем, что они могут делиться частью своей структуры. Например, можно сделать два списка, {value: 0, rest: list} и {value: -1, rest: list}, где list – это ссылка на ранее объявленную переменную. Это два независимых списка, при этом у них есть общая структура list, которая включает три последних элемента каждого из них. Кроме того, оригинальный список также сохраняет свои свойства как отдельный список из трёх элементов. Напишите функцию arrayToList, которая строит такую структуру, получая в качестве аргумента [1, 2, 3], а также функцию listToArray, которая создаёт массив из списка. Также напишите вспомогательную функцию prepend, которая получает элемент и создаёт новый список, где этот элемент добавлен спереди к первоначальному списку, и функцию nth, которая в качестве аргументов принимает список и число, а возвращает элемент на заданной позиции в списке, или же undefined в случае отсутствия такого элемента.

Решение:

//
// Преобразуем массив в список
//
//

function arrayToList(arr) {
  
  var list = { 
    value: arr[0], 
    rest: null
  }
  
  var list0 = list;
    
  for (i=1; i<arr.length; i++) {
    list.rest = new Object();
    list.rest.value = arr[i];
    list.rest.rest = null;  
    list = list.rest ;
  }
  
  return list0;

}

//
// Преобразуем список в массив
//


function listToArray(list) {
  var arr = [];

  arr.push (list.value);
  while (list.rest != null) {
    list = list.rest;
    arr.push(list.value);
  }

  return arr;
}

// 
// Добавляем элемент item вначале
// списка list
//
function prepend(list, item) {

  item.rest = list;
  return item;

}

//
// Из списка list берем элемент N
// Нумерация начинается с 0
//
//

function nth(list, N) {

  var i=0;

  while (i<N && list.rest != null) {
    list = list.rest;
    i++;
  }
  
  if(N > i)
    return "undefined";
  
  return list;
}

l = arrayToList([1,21,34,4]);

console.log(listToArray(l));
console.log(l.value ,l.rest.value, l.rest.rest.value, l.rest.rest.rest.value);
console.log(nth(l, 4));

var item = { 
    value: 23, 
    rest: null
}

l=prepend(l, item);
console.log(listToArray(l));

console.log(nth(l, 4));

       

Напишите две функции, reverseArray и reverseArrayInPlace. Первая получает массив как аргумент и выдаёт новый массив, с обратным порядком элементов. Вторая работает как оригинальный метод reverse – она меняет порядок элементов на обратный в том массиве, который был ей передан в качестве аргумента. Не используйте стандартный метод reverse.

Решение:

function reverseArray(arr) {
  var arr_out = [];
  for (var i = 0; i < arr.length; i++) {
   arr_out[arr.length-i-1] = arr[i];
  }
  return arr_out;
}

function reverseArrayInPlace(arr) {
  for (var i = 0; i < parseInt(arr.length/2) ; i++) {
    var temp = arr[i];
    arr[i] = arr[arr.length - i - 1];
    arr[arr.length - i - 1] = temp ;
  }
}

var arr2 = [2,3,4,5,6,7,8];
console.log(reverseArray(arr2));
reverseArrayInPlace(arr2);
console.log(arr2);
       

* Реализовать функцию pick(obj, keys), которая принимает аргументами объект и массив строк (названия ключей). Возвращает новый объект, куда вошли все ключи, указанные в массиве keys, и соответствующие значения из объекта obj. Если в объекте obj, нет ключа, указанного в массиве keys, в результирующем объекте этот ключ не должен присутствовать.

var user = {
 name: 'Sergey',
 age: 30,
 email: 'sergey@gmail.com',
 friends: ['Sveta', 'Artem']
}

pick(user, ['name']); // {name: 'Sergey'}
pick(user, ['name', 'second-name']); // {name: 'Sergey'}
pick(user, ['name', 'friends']); 
// {name: 'Sergey', friends:['Sveta','Artem']}
      

Решение:

function pick(list, keys) {
  var newlist = new Object();
    for(var key in keys) {
      var val = keys[key];

      if(list[val] !== undefined) {
       newlist[val]  = list[val] ;
      }
    }
  return newlist;
}

var user = {
 name: 'Sergey',
 age: 30,
 email: 'sergey@gmail.com',
 friends: ['Sveta', 'Artem']
}

console.log(pick(user, ['name'])); // {name: 'Sergey'}
console.log(pick(user, ['name', 'second-name','wewewew'])); // {name: 'Sergey'}
console.log(pick(user, ['name', 'friends']));          

       

Реализованна анимация при загрузке страницы. Если обновить страницу, то видно. Код находится сразу после body. В функции window.onload можно использовать либо drawSpiral() (стирается по спирали), либо drawArc() (стирается кругами)

var canvas;
var context;
var radius = 0;

window.onload = function() {

    canvas = document.createElement('canvas'); 
    context = canvas.getContext("2d");  
    canvas.style.position = 'fixed'; 
    canvas.style.top = '0px'; 
    canvas.style.left = '0px'; 
    canvas.style.zIndex = '100'; 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    document.body.insertBefore(canvas, document.body.firstChild);

    setTimeout("drawSpiral()", 5);

} 

function drawArc() {

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.lineWidth = canvas.width - radius;
    context.strokeStyle = "rgba(255,255,255,0.8)";
    context.arc(canvas.width/2,canvas.height/2,canvas.width/2 + radius,0,Math.PI*2,true); 
    context.stroke();
    radius += 1;
    if(radius > canvas.width/2){
      canvas.style.zIndex = '-100';
      return 0;
    }
    setTimeout("drawArc()", 5);
}

function drawSpiral() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = canvas.width/4;
    context.moveTo(canvas.width/2,canvas.height/2);
    context.beginPath();
    for (i = radius; i < 720; i++) {
        angle = 0.1 * i;
        x = canvas.width/2 + (20 * angle) * Math.cos(angle);
        y = canvas.height/2 + (20 * angle) * Math.sin(angle);

        context.lineTo(x, y);
    }
    context.strokeStyle = "rgba(255,255,255,0.8)";
    context.stroke();
    radius += 1;
    if(radius > canvas.width/2){
      canvas.style.zIndex = '-100';
      return 0;
    }
    setTimeout("drawSpiral()", 5);
}