{"id":155093,"date":"2012-10-17T15:20:03","date_gmt":"2012-10-17T11:20:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=155093"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=155093","title":{"rendered":"10 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 JavaScript \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430<\/span>"},"content":{"rendered":"
\t\u0412 \u044d\u0442\u043e\u043c \u0442\u043e\u043f\u0438\u043a\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b 10 JavaScript \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0441 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443.<\/p>\n

<\/a><\/p>\n

1. \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n

\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u0438\u043b\u0438 \u0441\u0440\u043e\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b.<\/p>\n

var getMaxHeight = function ($elms) {   var maxHeight = 0;   $elms.each(function () {     \/\/ In some cases you may want to use outerHeight() instead     var height = $(this).height();     if (height > maxHeight) {       maxHeight = height;     }   });   return maxHeight; }; <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
$(elements).height( getMaxHeight($(elements)) ); <\/code><\/pre>\n
2. \u0423\u0434\u043e\u0431\u043d\u044b\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u0434\u0430\u0442\u044b (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function isValidDate(value, userFormat) {     \/\/ Set default format if format is not provided   userFormat = userFormat || 'mm\/dd\/yyyy';     \/\/ Find custom delimiter by excluding   \/\/ month, day and year characters   var delimiter = \/[^mdy]\/.exec(userFormat)[0];     \/\/ Create an array with month, day and year   \/\/ so we know the format order by index   var theFormat = userFormat.split(delimiter);     \/\/ Create array from user date   var theDate = value.split(delimiter);     function isDate(date, format) {     var m, d, y, i = 0, len = format.length, f;     for (i; i < len; i++) {       f = format[i];       if (\/m\/.test(f)) m = date[i];       if (\/d\/.test(f)) d = date[i];       if (\/y\/.test(f)) y = date[i];     }     return (       m > 0 && m < 13 &&       y && y.length === 4 &&       d > 0 &&       \/\/ Check if it's a valid day of the month       d <= (new Date(y, m, 0)).getDate()     );   }     return isDate(theDate, theFormat); } <\/code><\/pre>\n
  \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 false, \u0442.\u043a. \u0432 \u043d\u043e\u044f\u0431\u0440\u0435 20 \u0434\u043d\u0435\u0439:  <\/p>\n
isValidDate('dd-mm-yyyy', '31\/11\/2012') <\/code><\/pre>\n
3. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 breakpoint’\u043e\u0432 \u0432 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function isBreakPoint(bp) {   \/\/ The breakpoints that you set in your css   var bps = [320, 480, 768, 1024];   var w = $(window).width();   var min, max;   for (var i = 0, l = bps.length; i < l; i++) {     if (bps[i] === bp) {       min = bps[i-1] || 0;       max = bps[i];       break;     }   }   return w > min && w <= max; } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
if ( isBreakPoint(320) ) {    \/\/ breakpoint at 320 or less } if ( isBreakPoint(480) ) {    \/\/ breakpoint between 320 and 480 } \u2026 <\/code><\/pre>\n
4. \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function highlight(text, words, tag) {     \/\/ Default tag if no tag is provided   tag = tag || 'span';     var i, len = words.length, re;   for (i = 0; i < len; i++) {     \/\/ Global regex to highlight all matches     re = new RegExp(words[i], 'g');     if (re.test(text)) {       text = text.replace(re, '<'+ tag +' class="highlight">$&<\/'+ tag +'>');     }   }     return text; } <\/code><\/pre>\n
  \u0414\u043b\u044f \u0441\u043d\u044f\u0442\u0438\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u043d\u0438\u044f:  <\/p>\n
function unhighlight(text, tag) {   \/\/ Default tag if no tag is provided   tag = tag || 'span';   var re = new RegExp('(<'+ tag +'.+?>|<\\\/'+ tag +'>)', 'g');   return text.replace(re, ''); } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
$('p').html( highlight(     $('p').html(), \/\/ the text     ['foo', 'bar', 'baz', 'hello world'], \/\/ list of words or phrases to highlight     'strong' \/\/ custom tag )); <\/code><\/pre>\n
5. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
$.fn.animateText = function(delay, klass) {      var text = this.text();   var letters = text.split('');      return this.each(function(){     var $this = $(this);     $this.html(text.replace(\/.\/g, '<span class="letter">$&<\/span>'));     $this.find('span.letter').each(function(i, el){       setTimeout(function(){ $(el).addClass(klass); }, delay * i);     });   });    }; <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
$('p').animateText(15, 'foo'); <\/code><\/pre>\n
6. \u041f\u043b\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
$.fn.fadeAll = function (ops) {   var o = $.extend({     delay: 500, \/\/ delay between elements     speed: 500, \/\/ animation speed     ease: 'swing' \/\/ other require easing plugin   }, ops);   var $el = this;   for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) {     $el.eq(i).delay(d).fadeIn(o.speed, o.ease);   }   return $el; } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
$(elements).fadeAll({ delay: 300, speed: 300 }); <\/code><\/pre>\n
7. \u041f\u043e\u0434\u0441\u0447\u0435\u0442 \u043a\u043b\u0438\u043a\u043e\u0432 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
$(element)     .data('counter', 0) \/\/ begin counter at zero     .click(function() {         var counter = $(this).data('counter'); \/\/ get         $(this).data('counter', counter + 1); \/\/ set         \/\/ do something else...     }); <\/code><\/pre>\n
8. \u0412\u0441\u0442\u0430\u0432\u043a\u0430 Youtube-\u0432\u0438\u0434\u0435\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function embedYoutube(link, ops) {     var o = $.extend({     width: 480,     height: 320,     params: ''   }, ops);     var id = \/\\?v\\=(\\w+)\/.exec(link)[1];     return '<iframe style="display: block;"'+     ' class="youtube-video" type="text\/html"'+     ' width="' + o.width + '" height="' + o.height +     ' "src="http:\/\/www.youtube.com\/embed\/' + id + '?' + o.params +     '&wmode=transparent" frameborder="0" \/>'; } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
embedYoutube(   'https:\/\/www.youtube.com\/watch?v=JaAWdljhD5o',    { params: 'theme=light&fs=0' } ); <\/code><\/pre>\n
  \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c Youtube API parameters<\/a>.<\/p>\n
9. \u041e\u0431\u0440\u0435\u0437\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e \u043b\u0438\u043c\u0438\u0442\u0443 (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function excerpt(str, nwords) {   var words = str.split(' ');   words.splice(nwords, words.length-1);   return words.join(' ') +      (words.length !== str.split(' ').length ? '…' : ''); } <\/code><\/pre>\n
10. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0435\u043d\u044e (\u0434\u0435\u043c\u043e<\/a>)<\/h4>\n
  <\/p>\n
function makeMenu(items, tags) {     tags = tags || ['ul', 'li']; \/\/ default tags   var parent = tags[0];   var child = tags[1];     var item, value = '';   for (var i = 0, l = items.length; i < l; i++) {     item = items[i];     \/\/ Separate item and value if value is present     if (\/:\/.test(item)) {       item = items[i].split(':')[0];       value = items[i].split(':')[1];     }     \/\/ Wrap the item in tag     items[i] = '<'+ child +' '+        (value && 'value="'+value+'"') +'>'+ \/\/ add value if present         item +'<\/'+ child +'>';   }     return '<'+ parent +'>'+ items.join('') +'<\/'+ parent +'>'; } <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:  <\/p>\n
\/\/ Dropdown select month makeMenu(   ['January:JAN', 'February:FEB', 'March:MAR'], \/\/ item:value   ['select', 'option'] );   \/\/ List of groceries makeMenu(   ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],   ['ol', 'li'] ); <\/code><\/pre>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/155093\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
   \t\u0412 \u044d\u0442\u043e\u043c \u0442\u043e\u043f\u0438\u043a\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b 10 JavaScript \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0441 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443.<\/p>\n
  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-155093","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/155093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=155093"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/155093\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=155093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=155093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=155093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}