썸네일 [JavaScript] 라디오 버튼 클릭시 숨겨진 div창이 나오게하기 문제점 라디오 버튼 클릭시 숨겨진 div창이 나오게끔 하고 싶다. 부끄럽지만 자랑스러운 내코드 나의 로직 * CSS단에 기본적인 속성은 display : none으로 주고, 해당 클릭 이벤트 발생시 요소.style.display = "block"을 활용한다 더보기 모범 답안과 비교했을 때 맞는 코드가 40%정도여서, 변수명, 전체 코드 싹다 수정했다. 따라서 모범답안을 먼저 보는 것을 추천한다. 검색할 항목을 선택하세요 제목 날짜 작성자 검색할 제목을 입력하세요: 검색 검색할 날짜를 입력하세요: - 검색 검색할 작성자 아이디를 입력하세요: 검색 CSS 나의 코드 더보기 css단에 display : none; 으로 기술한 것이 좋은 접근이었다. 1) 하지만 fielset을 가운데 정렬할 수 없었다. 2) ..
썸네일 [JavaScript] 사용자가 입력한 문자열을 배열에서 삭제하기 문제점 사용자가 입력한 문자열을 배열에서 삭제할 수 없다. 나의 코드 더보기 나의 로직 1. 추가 : 배열실습문제3번처럼 push()를 활용하여 추가하면 될 것 같다 1.1 배열을 선언한다 1.2 input 요소 객체를 담을 변수를 셋팅하고 1.2 그 배열에 push()를 사용해서 값들을 담는다. 2. 삭제 : ? : indexOf로 담긴 값들의 인덱스를 몇 번째 인덱스인지 구한다 ? : 그 값들을 splice(시작,제거)로 삭제한다 ? : 조건식을 이용해서 '당근'과 일치하는 인덱스를 삭제한다. => if문으로 먼저 조건검사를 한 뒤에 반복문으로 사용자가 입력한 값과, 배열의 값을 비교해보자. 코드 리모델링 기존 코드 *script단 var data = ["피자","치킨","당근","햄버거","떡볶이"..
썸네일 [JavaScript] 사용자가 입력한 값을 배열에 차곡 차곡 담기 문제점 * 개구리 , ["개구리"] 는 확인이 되지만 뒤이은 바나나 새로운 배열에 담김 (즉, 값들이 연이어 이어지지 않음 ) 나의 로직 1. push()를 이용해 배열의 맨 뒤에 요소를 추가한다 2. toString으로 하나의 문자열로 출력한다. * 값을 입력하고 입력 버튼을 누를 때 배열에 하나씩 담는 구문을 작성해보자 * 값을 입력받는 변수 따로 받아야 할까? 전체코드 소요시간 30m 완성도 60% 입력 입력 이 부분에 정답이 출력 될 수 있도록 하세요 출력 위의 코드의 문제점은 영원히 입력한 그 하나의 값만! 새로이 업데이트 되어서 콘솔창에 출력된다는 점이다. 이것을 보완하기 위해서는 어떻게 해야할까? 바로 전역 변수인 빈 배열을 생성한 뒤, 그 안에 사용자가 입력한 값들을 차곡 차곡 담으면된다...
썸네일 [JavaScript] 문자열을 쪼개고, 역순으로 담기 문제점 split()후 reverse()를 했으나, ","이 포함되어 출력된다. 나의 로직 1. split()으로 조각조각 떼서 2. reverse() 뒤집는다. 느낌은 좋았다.. 하지만.. 전체코드 잘 기술했다고 생각했는데.. 뭐가 문제였을까? console.log(str1)과 console.log(str2)는 각각 원하는 결과값이 나왔다. 그렇다면, area1.innerHTML += str1.reverse() + str2.revers(); 이 구문에서 놓친 게 있는 것 같다. 위의 코드는 str1과 str2를 뒤집은 값들을 area1의 innerHTML에 대입할 목적으로 기술했다. 그렇다면 area1.innerHTML에 직접 기술하는 것이 아닌 각각의 변수를 설정해서 뒤집어 보자. (== 단계를 쪼개..
썸네일 [JavaScript] 배열 | 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다. 문제점 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력됨. 나의 로직 더보기 1. 각각의 la1,la2,la3,la4를 ,를 구분자로 하여 나눈다 1.1 la1을 split(",") 이용하여 쪼갠다. 2. 나눈 조각 조각들을 하나의 배열에 담는다. 3. 사용자에게서 value 값을 입력 받는다 4. 입력 받은 value 값과 하나의 배열을 조건 검사를 한다. 5. 조건식 5.1 -> 있다 -> 몇 번 인덱스에 있는지 alert 창에 알려주기 -> food + "는 배열 index " + i + "에 존재합니다."; 5.1.1 -> arr.indexOf(비교대상) => 인덱스 값을 반환해줌 5.2 -> 없다 -> 마찬가지로 alert 창에 -> "존재하지 않습니다." ..
[JavaScript] 간이 계산기 만들기 * 무난하게 성공했다...ㅠ... 이 로직을 까먹지 않기 위해 포스팅을 작성하였음 나의 로직 1. 계산기 => switch문을 활용한다 2. 인라인 이벤트 방식을 사용하여 this를 전달한다. 이때 this는 버튼 요소 객체이다. 3.javascript단으로 넘어와서 버튼 이벤트 클릭시 호출 될 calculator함수 안에 매개변수를 세팅한다 (이때 매개변수명은 임의로 지어도 무방하다) 4.console.log(매개변수명)으로 전달 받은 값들이 잘 찍히는 지 확인하기 -> 생략가능 5. 결과값을 담을 변수 result를 선언한다. 6..입력된 값들을 div단에 뿌려줘야 하니까 area 변수에 div 요소 객체를 담는다 ( 아이디가 area1인 ) 7.스위치 문을 사용해서 ( 이때 매개변수는 e로 한다. ..
썸네일 [JavaScript] 이가 없으면 잇몸으로 | split 구분자를 이용해서 배열을 생성하고 출력하기 나의 로직 1) , 기준으로 잘라서 => 구분자 활용 2) 하나하나 출력한다 => 배열에 담아 반복문으로 출력 로직은 맞는 것 같은데, 구분자 활용법을 못 찾겠어서 배열 객체를 생성해서 그 값들을 출력하는 방식으로 기술했다. 조금 쫌생이(?) 같은 ( 그러니까 정석적인 방법..ㅎ )이 아닌 것 같은데, 뭐 어때 이가 없으면 잇몸으로 가는 것이다. 전체 코드 문제2. 다음 보기에 있는 문자열을 ,(콤마) 기준으로 잘라내어 하나하나 출력하시오 보기 콜라, 사이다, 햄버거, 피자, 한약 확인하기 결과 는 다음과 같이 잘 출력 되었다. 그럼 이제 모범답안을 알아보자, 모범답안 문제2. 다음 보기에 있는 문자열을 ,(콤마) 기준으로 잘라내어 하나하나 출력하시오 보기 콜라, 사이다, 햄버거, 피자, 한약 확인하기 ..
썸네일 [JavaScript] 어..? 이게 되네..? 구구절절 TMI 더보기 처음에는 var area1 = document.getElementById("area1"); 과 area1.innerHTML 구문 모두를 사용했지만, 모범답안에서는 var area1 = document.getElementById("area1"); 구문이 따로 기술 되어 있지 않다는 걸 알게 되었다. 불필요한 구문인 것 같아서 내 코드에서는 삭제했는데, 한가지 의문점이 들었다. var area1 = document.getElementById("area1"); 기술 하지 않아도, 문제없이 출력된다.. (왜..?)그럼 area1.innerHTML이 있는 구문이 실행되지 않아야 하는 것 아닐까? 하지만 내 코드의 경우 area1.innerHTML만 기술했음에도 불구하고 정상적으로 작동이 된..
썸네일 [JavaScript] HTML 태그에 다양한 방법으로 접근 테스트 하기 ( 태그명, 아이디, 네임 ) 문제점 * div 창에 결과값들이 담기지 않는다. 문제 코드 더보기 HTML 태그에 접근 테스트 단, 구매자는 태그 이름으로 접근, 상품명은 아이디로 접근, 구매가격은 name값으로 접근할 것 구매자 : 상품명 : 가격 : 입력값 출력하기 나의 로직 1) 각각의 input 요소에 태그, 아이디, 네임 속성을 이용해서 문제를 해결한다 2) price는 넘버 타입이기 때문에 강제 형변환을 진행한다. 3) 배열에 담아서 한방에 출력한다 (?) 4) innerHTML을 활용한다. 모범답안 userName을 0번째 인덱스에 담기 위해서 userNameTF라는 변수를 생성해서, userNameTF에 div 요소 객체를 담은 다음. 그 값을 userName의 0번째 인덱스에 담았다. price역시 마찬가지이다. ar..
썸네일 [JavaScript] 원하는 컬러로 배경색 변경하기 나의 로직 1) 컬러를 선택하는 input 요소 => input type = "color" 2) 버튼 클릭시 함수를 호출한다. 2_2) 이 함수내 에서 컬러 변경이 이루어진다. 3) 그 값을 배경색으로 변경한다. => value 이용 모범답안 방법 1) ID로 요소 객체를 가져와서 그 값을 대입하기 방법 2) 한 코드로 기술하기 셀프 피드백 잘했어요 ! 기본적인 로직에 접근했다. (input type ="color", onclick = "colorChange();",value등) 논리적으로 생각한 뒤에 코드를 기술했다. 접근해야하는 요소 객체가 2개 이상이라는 것을 파악했다. 아쉬운 점! 변수명을 혼란스럽게 기술했다. 길더라도 명확한 변수명을 제시하자. value 속성을 사용해야하는 건 알았는데, 정확하..