Тема: Мій JavaScript. Вивчення напрямку

Привіт форумчанам.
Заведу собі тут теж місце, планую вивчати javascript. Звичайно будуть питання, можливо добрі люди підкажуть, як краще реалізовувати проекти.

2 Востаннє редагувалося Анатолій (15.08.2014 15:37:41)

Re: Мій JavaScript. Вивчення напрямку

Перше ж питання виложу на розгляд студії
Розробляю сторінку http://best-team.biz/
Окремо сторінка під реалізацію задумки http://не-дійсний-домен/pages/change_bckground.html

Виконав ось такий дизайнерський хід, де автоматично змінюється фон слоганів

Код скрипта, що я накрапив сам має вигляд,  Може хто скаже наскільки код толково реалізований, чи можна краще, чи навпаки є баги в кодові?
Наразі те що я написав свою функцію виконує, але раптом можна краще

<script>
var show=1;
var timeout;
$("#info_01").css( "background-color", "#FF69B4");
var ChangeBcgColor = function(index_show)
   {    
if (index_show=='1'){ 
    $("#info_05").css( "background-color", "transparent");
    $("#info_01").css( "background-color", "#FF69B4"); 
       }
if (index_show=='2'){ 
    $("#info_01").css( "background-color", "transparent");
    $("#info_02").css( "background-color", "#FF8C00");
         }
if (index_show=='3'){ 
    $("#info_02").css( "background-color", "transparent");
    $("#info_03").css( "background-color", "#FFFF00"); 
        }
if (index_show=='4'){ 
    $("#info_03").css( "background-color", "transparent");
    $("#info_04").css( "background-color", "#7CFC00"); 
         }
if (index_show=='5'){ 
    $("#info_04").css( "background-color", "transparent");
    $("#info_05").css( "background-color", "#1E90FF"); 
     show=0; 
     }
 show=show+1;
}
timeout = setInterval("ChangeBcgColor(show)",4000);

 </script>

3 Востаннє редагувалося mike (15.08.2014 16:03:09)

Re: Мій JavaScript. Вивчення напрямку

ну для початку
для чого timeout, він ж тут ніде не юзається, тільки оголошення, можливо в іншій частині коду, за допомогою неї інтервал зупиняється
а взагалі краще так писати

setInterval(function(){
   ChangeBcgColor(show);
},4000);

передаєте int а перевіряєте як string

if(index_show =='1')// трохи погано
if(index_show == 1)// цей
if(index_show === 1)//або цей по вибору

а якщо просто викликати ChangeBcgColor() - це також можливо, тоді index_show буде мати тип "undefined", потрібно робити перевірку вхідних даних на тип, ну як кажуть "захист від дурака" типу:

if(typeof index_show =="undefined"){
 index_show = 1;// наприклад
}

ну і

show = show+1 //is the 
show++;          // same
Подякували: Анатолій1

4

Re: Мій JavaScript. Вивчення напрямку

і мені не дуже подобається js обгорнутий в HTML код, якось воно не гарно дивиться, краще все робити в окремому файлі і потім його підключити в сторінку.
Тоді буде можливість підключати один і той самий код на різні сторінки не копіюючи його.

Подякували: Анатолій1

5

Re: Мій JavaScript. Вивчення напрямку

muhasjo написав:

і мені не дуже подобається js обгорнутий в HTML код, якось воно не гарно дивиться, краще все робити в окремому файлі і потім його підключити в сторінку.
Тоді буде можливість підключати один і той самий код на різні сторінки не копіюючи його.

дякую, я знаю що воно дещо не правильно все в одному файлику, я пізніше рознесу,- зараз все разом щоб, швидше відлагоджувати було.

Все інше підкоректував

<script>
var show=1;
$("#info_01").css( "background-color", "#FF69B4");
var ChangeBcgColor = function(index_show)
   {  
if(typeof index_show =="undefined"){
     index_show = 1;}  
if (index_show==1){ 
    $("#info_05").css( "background-color", "transparent");
    $("#info_01").css( "background-color", "#FF69B4"); 
       }
if (index_show==2){ 
    $("#info_01").css( "background-color", "transparent");
    $("#info_02").css( "background-color", "#FF8C00");
         }
if (index_show==3){ 
    $("#info_02").css( "background-color", "transparent");
    $("#info_03").css( "background-color", "#FFFF00"); 
        }
if (index_show==4){ 
    $("#info_03").css( "background-color", "transparent");
    $("#info_04").css( "background-color", "#7CFC00"); 
         }
if (index_show==5){ 
    $("#info_04").css( "background-color", "transparent");
    $("#info_05").css( "background-color", "#1E90FF"); 
     show=0; 
     }
 show++;;
}
setInterval(function(){
   ChangeBcgColor(show);
},4000);;
</script>

6

Re: Мій JavaScript. Вивчення напрямку

Анатолій написав:

Все інше підкоректував

Ще одне. Варто це все обгорнути в

window.onload= function(){
// TODO here
}

або

$(document).ready(function(){
// TODO here
});

для того щоб почати працювати із DOM дійсно тоді коли він весь загрузився, бо у вашому випадку не ясно, коли скрипт підгружається, чи в кінці сторінки чи на початку.

Подякували: koala, Анатолій2

7

Re: Мій JavaScript. Вивчення напрямку

1. Всі стилі краще робити класами.
2. Краще нумерувати з 0, тоді не доведеться купу ±1 ставити.
3. DRY, DRY і ще раз DRY!
Ось мій варіант.

Подякували: Анатолій, mike2

8

Re: Мій JavaScript. Вивчення напрямку

koala написав:

1. Всі стилі краще робити класами.
2. Краще нумерувати з 0, тоді не доведеться купу ±1 ставити.
3. DRY, DRY і ще раз DRY!
Ось мій варіант.

ну то ти напевно народився в родині хакерів :)
все змінив,- розроблено стильно
добре буду виконувати твої рекомендації, like learn learn and learn again, not dry dry dry :)
чи можливо try try try

9 Востаннє редагувалося koala (16.08.2014 05:47:27)

Re: Мій JavaScript. Вивчення напрямку

Хотів ще кілька порад дати, але панібратство якось відбиває бажання допомагати. Так що, пане, іншим разом щось, може, вам і підкажу.

10

Re: Мій JavaScript. Вивчення напрямку

koala написав:

Хотів ще кілька порад дати, але панібратство якось відбиває бажання допомагати. Так що, пане, іншим разом щось, може, вам і підкажу.

Та й на цьому дякую, що коли-небудь щось підкажеш, я ж розумію щоб добре писати коди потрібно навчатися самому. Я так собі планую за певний період сам освою кодування.

11

Re: Мій JavaScript. Вивчення напрямку

Реалізував вертикальне зміщення заднього фону сайту, в мене зміщення працює.
http://не-дійсний-домен/pages/3d_site_vertical_02.html

Можливо будуть рекомендації побажання

12 Востаннє редагувалося Анатолій (20.08.2014 14:13:19)

Re: Мій JavaScript. Вивчення напрямку

jQuery код, я реалізував так:

<script>
$(document).ready(function(){
$( document ).mousemove(function( event ) 
  {
    var Height_Docum = $( document ).height();
    var PageCoordsY = event.pageY;
    var hscrll=document.body.scrollTop;

    var New_position_divers = Math.round(400 - (0.12*hscrll));
    var New_position_fishs_01_in = Math.round(1100 - (0.25*hscrll));
    var New_position_fishs_02_in = Math.round(1350 - (0.3*hscrll));
    var New_position_fishs_03_in = Math.round(1900 - (0.15*hscrll));
    var New_position_alien_tube_in = Math.round(2400 - (0.1*hscrll));

    $( ".msg_01" ).text( "Висота документа = " + Height_Docum );
    $( ".msg_02" ).text( "Висота курсора Y = " + PageCoordsY );
    $( ".msg_03" ).text( "Прокрутка Y = " + hscrll );

    $( ".divers" ).css( "top",New_position_divers);
    $( ".fishs_01_in" ).css( "top",New_position_fishs_01_in);
    $( ".fishs_02_in" ).css( "top",New_position_fishs_02_in);
    $( ".fishs_03_in" ).css( "top",New_position_fishs_03_in);
    $( ".alien_tube_in" ).css( "top",New_position_alien_tube_in);

});
});
</script>

13

Re: Мій JavaScript. Вивчення напрямку

не працює зміщення в мене.
Один глюк, коли прокручую мишкою сторінку, висота курсора по Y не міняється. На це треба звернути увагу. Ця висота міняється тільки тоді коли рухати мишкою.

14 Востаннє редагувалося Анатолій (20.08.2014 20:59:27)

Re: Мій JavaScript. Вивчення напрямку

muhasjo написав:

не працює зміщення в мене.
Один глюк, коли прокручую мишкою сторінку, висота курсора по Y не міняється. На це треба звернути увагу. Ця висота міняється тільки тоді коли рухати мишкою.

Н-да, получивсь упс, я тестував лише на Google Chrome. А на опері і firefox справді не працює, а якщо і працює то з тормозами :(
напевно для них потрібно буде дописувати якісь буковки

15

Re: Мій JavaScript. Вивчення напрямку

*WALL**FACEPALM* *WALL**FACEPALM* *WALL**FACEPALM*

window.onscroll

Подякували: Replace1

16

Re: Мій JavaScript. Вивчення напрямку

Да ладно... якщо навіть так не толково написаний, це перші роботи, а в гугл хром задумка в мене працює, так що не так вже всебезнадійно.
Але можу заново написати скрипт з урахуванням роботи скрипта в різних браузерах.
А алгоритмом роботи скрипта хоча б правильний? Чи теж по іншому реалізується вертикальне зміщення заднього фону.
Зараз алгоритм вирішив реалізувати таким чином.
1. Кожен шар, що по-різному рухається це - div position:absolute з z-index(1....4,скільки рухомих шарів)
2. Визначаю наскільки веб-глядач прокрутив сторінку scrollTop
3. Призначаю нові координати для div, через формулу залежно від того наскільки хочу щоб прокручувався задній фон
Все ніби все просто :)
koala можливо хоча б не кодом,  так  словами підкажеш на що потрібно звернути увагу. Звичайно при наявності вільного часу, я не поспішаю, є що поки що вчити.

17

Re: Мій JavaScript. Вивчення напрямку

Чергова тема для розгляду, не знаю як цей хід називається нехай "боковий індикатор проктутки сторінки".
Правда ще попередню тему до кінця не розібрав, але при нагоді сподіваюсь закінчу.
Є чотири сайти
1. http://www.oneiota.com/espl
2. http://zurb.com/manifesto
3. http://www.evanshalshaw.com/bondcars/
4. http://flipp.ca/

Можливо хто знає, який вже оптимізований алгоритм виконання такого ефекту ?
Я то розпочну колесо видумувати :) . Правда я в любому випадку проексперементую, можливо що цікаве вийде.

18

Re: Мій JavaScript. Вивчення напрямку

Такий функціонал називається scrollspy і є досить багато плагінів, які його реалізовують.

Я заради інтересу зробив такий, але все це з використанням технологій, які я зараз використовую на фронтенді (CoffeeScript замість JS та SCSS замість CSS). Але, можливо, все одно буде корисним, тим більше, що на CodePen можна побачити і скомпільований код (іконка ока у відповідному вікні) -

http://codepen.io/anon/pen/yacFh

Подякували: Анатолій1

19

Re: Мій JavaScript. Вивчення напрямку

Перший паровоз, сам знаю що тяжкий, :)

http://не-дійсний-домен/pages/article_page_list.html