[동아리 사이트 제작 - 05] 웹 프론트 개발_04 JS소스파일

구데타마

 

프론트에 들어간 JS 소스파일이 크게 4개가 있다.

 

우클 방지 JS

여러가지로 쉽게 찾아볼 수 있는 형식의 소스코드다.

지금 이 블로그도 17년 겨울쯤에 적용을 했던 기억이 있는데 

옛날에 사용해본 기억이 있기에 쉽게 적용할 수 있었다. 

현재 블로그에는 디자인을 수정하면서 우클방지 소스가 삭제되었다.

(function(){ var cancel=function(e){if(window.event){window.event.cancelBubble=true;window.event.eturnValue=false;}if(e&&e.stopPropagation&&e.preventDefault){e.stopPropagation();e.preventDefault();}return flse;};var block=function(e){e=e||window.event;var t=e.srcElement||e.target;var tag=t.tagName;if(e&&tag==='HTML'||tag==='INPUT'||tag==='TEXTAREA'||tag==='BUTTON'|| tag==='SELECT'||tag==='OPTION'||tag==='EMBED'||tag==='OBJECT'){ return;}if(e.type==='keydown'||e.type=='keyup'){if((e.ctrlKey||e.metaKey)&&(e.keyCode==65||e.keyCode==97||e.keyCode==67||e.keyCode==99)){return cancel(e);}}else if(e.type=="contextmenu"){return cancel(e);}else{return cancel(e);}}
        var addEvent=function(el,type,fn){if(window.addEventListener){el.addEventListener(type,fn,false);}else if(window.attachEvent){el.attachEvent('on'+type,fn);}else{el['on'+type]=fn;}}
        var addBlockEvent=function(){addEvent(document.body,'keydown',block);addEvent(document.body,'keyup',block);addEvent(document.body,'mouseup',block);addEvent(document.body,'mousedown',block);addEvent(document.body,'dragstart',block);addEvent(document.body,'selectstart',block);addEvent(document.body,'copy',block);addEvent(document.body,'contextmenu',block)}
        addEvent(window,'load',addBlockEvent);})();

 

글자수 카운트 JS

자기소개서 신청 페이지에 자소서 카운트를 해주는 소스다.

$('#content').keyup( function (e){
    let content = $(this).val();
    $('#countNumber').html(content.length+" / 1000");
    
    if (content.length > 1000){
        alert("최대 1000자까지 입력 가능합니다.");
        $(this).val(content.substring(0, 1000));
        $('#countNumber').html("1000 / 1000");
    }
});

 

로딩 페이지 JS

사실 로딩이라기엔 일정시간 특정 이미지를 띄주는 소스인데

자소서 신청 사이트에 이 것을 이용해 이스터에그를 숨겼기에 로딩 속도와는 무관한 페이지라 봐도 된다.

setTimeout(function() { $('#loading_page').fadeOut(); }, 1500);

 

아래의 소스가 정말 제작하는데 손을 많이 봤던 소스이다.

네비게이션의 색 변화와 무빙을 자연스럽게 만들어주는 소스.

$(document).ready(function () {
    $(window).scroll(function () {
                if ($(this).scrollTop() >= 400) {
                    $('.top').fadeIn();
                    $('.wrapper').fadeIn().addClass("nav_wrapper_change")
                } else if ($(this).scrollTop() < 400) {
                    $('.top').fadeOut();
                    $('.wrapper').fadeOut().removeClass("nav_wrapper_change")
                }
            });
            if ($('.wrapper').offset().top === 0) {
                $('.wrapper').css({
                    'display': 'none'
                })
            }
            $('.top').click(function () {
                $('html, body').animate({
                    scrollTop: 0
                },
                1000);
                return false
            })
            $('.go_about').click(function () {
                var offset = $("#about").offset();
                $('html, body').animate({
                    scrollTop:offset.top
                },
                1000);
                return false
            })
            $('.go_awards').click(function () {
                var offset = $("#award").offset();
                $('html, body').animate({
                    scrollTop:offset.top
                },
                1000);
                return false
            })
            $('.go_members').click(function () {
                var offset = $("#member").offset();
                $('html, body').animate({
                    scrollTop:offset.top
                },
                1000);
                return false
            })
            $('.go_connection').click(function () {
                var offset = $("#connection").offset();
                $('html, body').animate({
                    scrollTop:offset.top
                },
                1000);
                return false
            })
        }); 

다른 프론트엔드 개발 사진들을 봐보면 일정량만큼 스크롤을 넘겼을 때

네비게이션 바의 색이 변하는 것을 볼 수 있다.

무색 -> ff017acc

이 파란색 계열 컬러코드를 아직도 기억 하고 있는데

너무 색감이 이뻐서 사이트에 적극 적용했다.