hyejeong 코딩

HTML Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 hyejeong3283@gmail.com quiz 박스를 복사하여 3개를 만들었습니다. 문제 정보(quizInfo)는 배열을 이용하여 작성해주었습니다. dog__wrap라는 클래스명을 가진 태그 안에 true와 false라는 클래스명을 가진 태그를 추가했습니다. 문제 출력 // 문제 종류 quizTitle[0].textContent = quizInfo[0].infoType; quizTitle[1].textContent = quizInfo[1].infoType; quizTitle[2].textContent = qui..

HTML 이전 퀴즈 이펙트에서 기능을 추가하여 업그레이드 해보았습니다. 문제를 바꾸어주고 정답 입력영역과 정답 확인 기능을 넣었습니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 hyejeong3283@gmail.com 정답 확인하기 연변대비 quiz__answer라는 클래스명을 가진 태그 안에 정답을 적을 수 있는 영역을 넣어주었습니다. 정답을 적고 정답 확인하기 버튼을 누르게 되면 quizAnswerInput.style.display = "none"; // 정답 적는 영역에 none 값을 주어 숨김 quizAnswerConfirm.style.display = "none"; // 정답확인하기 버튼에 none 값을 주어 숨김 quizAnswerResult.style.displa..

HTML과 CSS를 이용해 퀴즈 이펙트 사이트를 만들었습니다. HTML Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 hyejeong3283@gmail.com 태그는 동일 혹은 다른 경로에있는 파일을 현재화면에서 사용할 수 있게끔 해주는 태그입니다. link 태그를 통해 reset.css 와 quiz.css 파일을 해당 페이지에 사용할 수 있게 연결해줍니다. html 영역을 header / body / footer 로 나눈 후 각 영역에 클래스명을 부여하여 CSS효과를 적용합니다. //quizWrap 이라는 변수에 quiz__wrap라는 class를 가진 html태그를 담습니다. const quizWrap = document.querySelector(".quiz__wrap"); : quiz__w..

1. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 : 100 200 javascript 2. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 : 100 200 javascript 3. 배열 : 데이터 불러오기 배열 안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200, "javascript"]; console.log(arr[0], arr[1], arr[2]); } 결과 : ..

1. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. { // false : 0, null, undefined, false ""(빈문자열) // true : 1, 2, "0", "1", "ABC", [], {}, true if(조건식){ document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } } 결과값 : 실행되었습니다.(true) 실행되었습니다.(false) 2. if문 생략 코드를 더 간결하고 읽기 쉽게 만들기 위해 괄호를 생략할 수 있다. { const num = 100; // if(num){ // docume..

1. 사용자가 프롬포트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해보세요. let usernumber = prompt("숫자를 입력하세요"); let chkNum = parseInt(usernumber); //1. 화면에서 입력받은 값을 parseInt 함수를 통해 숫자로 변환 후 chkNum 변수에 저장 if(isNaN(chkNum)){ //2. 변환한 변수 chkNum 의 값이 숫자가 아니면 NaN을 반환하므로 NaN 값을 체크 alert("숫자가 아닙니다"); //숫자가 아닌 값이 입력된 경우 }else{ //3. 정상적인 값인 경우 양수,음수,0 인지 확인하는 로직 실행 fnChkNum(ch..

함수 함수는 javascript의 기본 구성 요소 중 하나입니다. 일련의 과정(서비스 로직)을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수를 정의할 때는 function을 사용합니다. 1. 선언적 함수 - 함수의 기본 문법 가장 기본적인 함수의 형식입니다. { function func(){ document.write("실행되었습니다."); } func(); } // 결과값 : 실행되었습니다. 2. 익명 함수 변수의 이름을 함수의 이름으로 쓴 것입니다. 변수 안에 함수를 넣는 방식입니다. { const func = function(){ document.write("실행되었습니다.") } } // 결과값 : 실행되었습니다. 3. 매개변수 함수 함수를 호출할 때 전달하는 변..

01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. { var x = 100; //변수 x에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript" // 변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); } 결과 : 100 200 javascript 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장할 수도 있지만 변경도 가능하다. { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.log(y);..

마무리 문제 1번 : 배열에서 1보다 큰 값을 찾아 화면에 표시하기 const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] for(let i=0; i10){ document.write(arr[i] + ","); } } 길라잡이 배열 요소의 개수만큼 for문을 반복한다. if문을 사용해서 요소의 값과 10을 비교한다. document.write를 사용해서 화면에 표시한다. 마무리 문제 2번 : 1보다 큰 수를 입력하고 입력한 숫자까지 짝수만 더하는 프로그램 만들기 let usernumber = prompt("1보다 큰 숫자를 입력하세요."); let addNum = 0; if (usernumber != null){ if(usernumber >1){ for(let i=1; i

조건문이란? 어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정한 부분만 계속해서 반복하려면 조건문이나 반복문을 사용해야 합니다. 조건문은 명령을 실행하기 위해 조건을 체크하는 문으로, 앞에서 공부한 논릿값, 비교 연산자 등이 중요하게 사용됩니다. 1. if 문 if 문은 if 다음에 소괄호를 사용해서 조건을 표기합니다. 그리고 조건을 체크한 후 결과값이 true이면 if 문에 있는 명령들을, false이면 if 문에 있는 명령은 건너뛰고 그 다음 명령을 실행합니다. if 문이란, if 예약어의 다음에 오는 중괄호({ })로 묶은 명령을 가리킵니다. 만약 조건에 숫자 연산식을 사용했을 경우 결과값이 0이면 false로, 0 이외의 값이면 true로 인식합니다. 기본형 if (조건) { 조건이 true 일 ..