본문 바로가기
728x90
반응형

JavaScript15

19.12.16 개발기록 -[Javascript] switch 조건문을 이용하던 중 오늘 내가 한 실수 기록. 자 오늘 포스팅할 내용은 무엇이냐~ 오늘 switch 조건문을 이용하던 중 내가 했던 굉장히 어이없고 쪽팔리는 실수를 기록해두려고 한다. 다시는 그러지말자 루크야..허허 우선 내가 구현하려고 했던 것을 보여주자면, 요로코롬 각 버튼을 눌렀을 때 안에 있는 class들의 색깔을 바꾸는 것 + 안에 input (이미지 상 1 적혀 있는 곳이 input 태그로, 숫자를 입력할 수 있는 곳이다) 태그의 onkeyup 이벤트로 숫자를 입력할 때에도 자신의 색깔을 유지하며, 내용이 바뀌는 것이다. 위 사진 처럼 switch 문을 사용할 때 실수를 하여 색깔이 맞지 않게 표현되었다. 내가 한 실수를 캡쳐해서 보여주자면, 여기서 i 는 각 보기를 불러오는 index가 되겠다. 아주 멋지게 switch 문을 이용하였고,.. 2019. 12. 17.
19.12.13 개발기록 -[Javascript] 반복문을 이용하여 버튼 3개에 각각의 id 부여, onclick 이벤트 발생 시 어떤 버튼을 클릭했는 지 구분 가능하게 하기. 오늘은 반복문을 이용하여 버튼 3개를 만들고, 각 버튼에 id를 부여하여 3개중 어느 하나를 클릭 했을 때 자신에게 맞는 이벤트가 발생하게 하는 프로그래밍을 해보자. 말로 설명하기 디게 어려우니, 사진으로 하나씩 차근차근 설명해보자. 위 사진에서, 아래의 사진과 같이 구현하고 싶다는 뜻이다. 1. 첫 번째 버튼을 클릭했을 때, 2. 두 번째 버튼 클릭 시, 3. 세 번째 버튼 클릭 시, 요렇게 말이다. 우선 첫 번째로 할 일은, 각 버튼을 for 반목문을 이용하여 만들면서, 각각에 id를 줄 수 있어야 한다. 나 같은 경우는, for 문을 돌면서 버튼을 생성하면서, 'btn' + i 라는 id를 부여했다. 1 2 3 4 5 6 7 8 9 for (var i in prediction) { var predi.. 2019. 12. 14.
19.12.12 개발기록 -[Javascript] 게시물 상황에 맞는 class 부여하기. 게시물이나 다른 업로드 된 컨텐츠 등이 D-Day가 정해져 있다던지, 내가 이미 확인한 게시물이라던지, 어떤 상황에 따라 색상을 바꾸어 주는 등의 변화를 줘야할 때가 있다. 그럴 때, 함수로 각 상황에 맞는 status를 지정하여 반환하여 주고, 게시물을 그려낼 때 switch 조건문을 이용하여 각 class를 부여하면 된다. 우선, 나 같은 경우 var status = active 로 기본 status를 선언해주고, 아래 사진과 같이 각 상황에 따라 status의 값을 변경해주었다. 그리고, return 값으로 status 값을 내보내주어, switch 문을 이용하여 각 status에 따라 class를 다르게 맥였다 !! 이렇게 코드를 구현하니 되게 코드가 깔끔하고 이쁘고, 사랑스럽고 막 그렇게 구현할.. 2019. 12. 13.
19.12.11 개발기록 -[Javascript] 화면 전환 버튼 구현하기 오늘은 저번에 포스팅했던 화면전환에서, 버튼을 클릭하면 다음페이지 및 이전 페이지로 넘어가도록 구현해보도록 하겠다. 전체 화면을 보면 디-게 간지지만, 혹여나 문제가 될까 버튼부분만 캡쳐하여 올리도록 한다. 위 사진 오른쪽 하단의 왼쪽, 오른쪽 버튼을 누르면 해당 페이지로 넘어가도록 구현해본다. 이렇게 말이다. 위와 같이 구현하기 위해서는 아주아주 간단한 알고리즘을 생각해내면 된다. 1. 각 페이지 마다 index를 부여한다. -> 첫 번째 페이지의 index = 0, 두 번째 페이지 index = 1, 세 번째 페이지는 index = 2, 이런식으로 말이다. 1 2 3 4 03/ 03 2. 그리고 우선 html 파일에 있는 각 오른쪽 왼쪽의 버튼 이미지에 onclick 이벤트를 부여한다. 저기 보이는 .. 2019. 12. 11.
19.12.09 개발기록 -[CSS] text가 width를 넘어가면 말 줄임표(...) 으로 표현되게 하기 오늘은 CSS를 이용하여 원하는 text가 할당된 div 나 span 태그의 width를 넘어서 길어지게 되면 말줄임표(...) 으로 표현되게 하는 CSS 문법을 포스팅하도록 한다. 두 번째 사진과 같은 경우에 자동으로 말 줄임표(...) 으로 표현되도록하는 CSS 문법을 소개한다. 바로, 1 2 3 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 요 삼형제이다. 1. overflow: hidden 에서 overflow는 요소의 박스에 내용이 더 길 때 어떻게 보이게 할 지 선택하는 속성이다. 여기서 사용한 hidden은 내용이 길면 자른다. 이 외에도, visible : 기본 값이며, 내용이 더 길어도 그대로 보이게 하는 속성, scro.. 2019. 12. 9.
728x90
반응형

티스토리툴바