JAVASCRIPT
-
array와 object 자료형, 데이터바인딩JAVASCRIPT 2022. 2. 10. 15:51
어레이(array) var 어레이 = [ 'BMW', 520 ]; 보통 변수에 담아서 사용하며 ,대괄호 안에 자료를 집어넣고, 자료들을 콤마로 구분한다. 사용할 땐 console.log(어레이[1]); 이렇게 대괄호 안에 숫자를 넣어서 몇 번째 자료를 사용할건지 정한다. (0부터 시작) 오브젝트(object) var 오브젝트 = { brand : 'BMW', model : 520 }; 중괄호 안에 집어넣고, key : value 형태로 자료의 이름을 붙여 값과 저장해서 사용한다. 사용할 땐 console.log(오브젝트.brand); //또는 오브젝트.['brand'] 이렇게 .사용할key이름을 붙여 사용한다. 만약, 어레이와 오브젝트가 섞이면 var 자료 = [ { brand : 'BMW' }, { m..
-
이벤트 버블링 응용과 dataset 으로 탭기능 만들기JAVASCRIPT 2022. 2. 10. 14:51
저번에 사용한 html, css를 계속해서 이용해보자 Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 여기서 이벤트 버블링을 써보면 ul태그에 이벤트리스너 하나만 달면 버블링현상 때문에 어떤 버튼을 누르던 버튼1->list 버튼2->list 이런 식으로 클릭이 된다. 코드를 짜보면 $('.list').on('click', function(e) { if ( e.target == document.querySelectorAll('.tab-button')[0] ){ 탭열기(0) }; if ( e.target == document.querySelectorAll('.tab-button')[1] ){ 탭열기(1) }; if ..
-
이벤트버블링, 이벤트함수JAVASCRIPT 2022. 2. 10. 14:20
이벤트버블링이란 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 모두 실행되는 현상을 뜻한다. 예를 들면, 모달창 내용 이런 검정색 배경안에 흰색 배경이 있고, 그 안에 모달창 내용이 있을 때, 검정색 배경을 누르면 모달창이 꺼지게 코드를 짰다. $('.black-background').click(function(){ $('.black-background').hide() }); 하지만 실행해보면 흰색배경을 눌러도 모달창 내용을 눌러도 다 닫히는 버그가 생긴다. 이런걸 이벤트 버블링때문에 생기는 현상이라고 한다. 이유는 흰색배경을 눌러도 상위요소인 검정배경까지 눌리기 때문이다. 먼저, 이벤트 함수에 대해 알고 해결해보자. e.target; //실제 클릭한 요소 e.currentTarget; //지금 e..
-
Tab기능 만들기JAVASCRIPT 2022. 2. 10. 14:00
tab기능을 만들기전에 UI를 인강에서 먼저 만들어주셔서 기능개발만 해보자 Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping HTML을 간단히 설명하면 container안에 list들 상단 버튼들과 버튼을 누르면 나올 tab-content들을 div박스로 하나씩 만들어 놓았다. ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10..
-
스크롤 애니메이션JAVASCRIPT 2022. 2. 9. 16:36
자바스크립트로 스크롤시 변하는 애니메이션을 만들 수 있다. 기본적인 UI는 navbar을 만들어 놓고 css로 class를 미리 만들고 스크롤시 미리 만들어놓은 클래스를 부착하는 식으로 만들 수 있다. $(window).on('scroll',function(){ $('.nav-menu').addClass('nav-black'); }); $(window)라는 우리가 보는 화면을 scroll이라는 이벤트로 조정할 수 있다. 셀렉터에 미리 만들어놓은 nav-black이라는 클래스를 스크롤을 내리면 붙여주세요 할 수 있다. 어느정도 스크롤을 내리면 뭐하게 해주세요를 원할 수 있다. 이럴땐 먼저, 스크롤 높이를 측정해야 한다. $(window).scrollTop() 이렇게 써주면 스크롤이 위에서부터 얼마나 내려갔..
-
캐러셀(Carousel) 이미지슬라이드 만들기JAVASCRIPT 2022. 2. 9. 15:25
⟨ ⟩ 이런 식으로, 전체 컨테이너에 overflow: hidden 을 주고 슬라이드에 사용할 이미지를 HTML에 넣던, css에 배경으로 넣든 넣어서 슬라이드container엔 300vw라는 뷰포트의 300%를 주고 개별 슬라이드box엔 100vw를 주고 float로 가로배치하면 이렇게 되며, overflow에 의해 나머지 2개가 화면에서 보이지 않게 된다. 앞으로 뒤로 버튼을 만든 후, position: absolute를 이용해 right: 0; left: 0;을 각각 주어 양옆에 배치시킨다. .slide-box { width: 100vw; height: 600px; float: left; } .img1 { background-image: url(/img/product1-1.jpg); backgrou..
-
정규식JAVASCRIPT 2022. 2. 9. 14:26
정규식이란 문자를 검사하고 싶을 때 사용하는 식이다. 대표적으로 이메일이나 비밀번호를 입력할 때 몇 자리 이상 혹은 대문자 소문자 이렇게 문자들을 검사할 때 사용한다. 문자를 검사할 때 includes를 사용할 수 있는데, 'abc'.includes('a') 위 처럼, 사용하면 abc에 a라는 글자가 있냐 true, false로 알 수 있다. 하지만, 한글이 들어있나 영어가 들어있나 이렇게 구체적인 검사는 할 수 없다. 따라서 test란 함수와 정규식을 사용해서 검사한다. 기본적으로 정규식은 /abc/ 이렇게 슬래시 기호를 사용한다. 그리곤 test라는 함수로 이 문장에 abc라는 단어가 있나요 하고 물어볼 수 있다. /abc/.test('abcdef') 이렇게 사용하면 abcdef라는 문장에 abc가 ..
-
제이쿼리 애니메이션 UIJAVASCRIPT 2022. 2. 9. 13:05
제이쿼리에선 animate라는 함수가 있다. $('.box').animate({ marginLeft : '100px', marginTop : '90px' }, 1000); 이런 식으로, 셀렉터에 .animate({ })를 붙이는 게 기본 형태이고 { }는 object자료형이라고 하는데 이 자료형 안에서 애니메이션에 줄 속성을 ,(콤마)로 나열하면 된다. 이때 우측엔 문자 형태로 '100px' 이렇게 준다. 그리고 뒤에 1000은 1초를 뜻하며 ms단위이다. animate 함수를 이용해 간단한 애니메이션을 만들어보자 Menu Title 버튼 이렇게 옆에서 나올 메뉴바와 버튼을 만들어 준 후, .left-menu { width : 150px; height : 100%; background : black; c..