JAVASCRIPT 47

퀴즈 이펙트4 객관식 확인하기 유형

객관식 확인하기 유형 Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 ghkddn132@naver.com 우선 css에 quiz__choice 에있는 radio타입의 버튼을 없애주고, 새로운 버튼 만들어 주었습니다. .quiz__choice { padding: 20px; border-bottom: 6px ridge #cacaca; font-family: "SCoreDream"; } .quiz__choice label { display: flex; } .quiz__choice label input { position: absolute; //블라인드 처리 clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow..

JAVASCRIPT 2023.03.18

퀴즈 이펙트3 주관식(여러문제) 확인하기 유형

주관식 (여러문제) 확인하기 유형 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 ghkddn132@naver.com 우선 선택자를 만들어 줍니다. (변수 변수이름 = document.querySelector("지정위치") (변수 변수이름 = 특정변수가 실행 됐을때 같이 실행 하도록 하는 특정변수이름.querySelector("지정위치") //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험 종목 ..

JAVASCRIPT 2023.03.14

기본 함수 와 함수 유형 정리

기본 함수 선언적 함수 ·직접 선언 하는 방식입니다. ·함수를 호출하기 이전에 먼저 정의해야 합니다. 함수 정의가 코드의 상단으로 호이스팅(hoisting)되기 때문입니다. 호이스팅이란, 변수나 함수를 코드의 상단으로 끌어올리는 작업을 말합니다. { function add(){ document.write("선언적 함수"); } add();//선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생 시키징 않습니다. 이러한 자바스크립트 성질을 호이스팅(Hoistion) 이라고 합니다. } //결과:선언적 함수 ※선언적 함수 화살표 함수로 만들기 { func = () => { //function을 없애고 =과 =>를 넣어 간략하게하였습니다. document.write("선언적 함수"); } func()..

JAVASCRIPT 2023.03.12

퀴즈 이펙트2 주관식 확인하기 유형

주관식 확인하기 유형 퀴즈 이펙트1 에서 배운 것을 토대로 이번엔 주관식 확인하기 유형을 만들어 봅니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 ghkddn132@naver.com 1.저번 처럼 똑같이 변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 를 이용해 지정해 줍니다. //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__tiile span"); const quizTime = quizWrap.querySelector(".quiz__tiile em"); const quizQuestion..

JAVASCRIPT 2023.03.09

퀴즈 이펙트1 정답 확인하기 유형

정답 확인하기 유형 CSS를 이용해 사이트 하나를 꾸며 줍니다. javascript를 이용해 정답 확인하기 유형을 알아 보겠습니다. Quiz 정답 확인하기 유형 . 정답 확인하기 ghkddn132@naver.com 1.변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 이용해 지정하여 줍니다. ('quizWrap'만 'document'인 이유: 전체를 'document'로 하면 데이터가 많을때 가져와야하는 데이터 외에 또 다른 데이터까지 읽고나서 가져오기 때문에 불러오는 속도에 영향을 끼쳐 느려 지는 것을 방지 하기 위해 'quizWrap'로 바꾸어 이와 관련된 데이터만을 읽고 가져오라고 하고있습니다.) //선택자 const quizWrap = docu..

JAVASCRIPT 2023.03.08

데이터를 불러오는 21가지 방법

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

JAVASCRIPT 2023.03.06

배열 데이터를 불러오는 forEach(), for...of, for...in, map()

forEach( ) 배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다. { const num = [100, 200, 300, 400, 500]; num.forEach(function(el){ //el=element 배열의 값을 순서대로 반복 합니다. document.write(el," "); }); } //결과 100 200 300 400 500 ※화살표 함수로 표현하기 { const num = [100, 200, 300, 400, 500]; //forEach :화살표 함수 num.forEach((el)=>{ document.write(el," "); }); //forEach :화살표 함수 : 괄호 생략 num.forEach(el=>{ document.write(el," "); }); //forEa..

JAVASCRIPT 2023.03.05

함수 문제 1 , 2

※문제1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서 숫자가 양수인지, 음수인지, 도는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성 하시오. 길라잡이 ·숫자를 받아서 양수, 음수 0을 판단 하고 알림 창에 표시하는 함수를 선언 합니다. ·parseInt( ) 함수를 사용해 프롬프트 창에 입력한 내용을숫자로 변환 합니다. ·(프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수sms NaN을 반환합니다.) ·반환값이 숫자일 경우에만 함수를 실행합니다. function func (num){ //3. if(num>=1){ //4. document.write("양수입니다."); } else if(num num ? sum : num; //삼항연산자 표현 ..

JAVASCRIPT 2023.03.01

데이터 제어하는 12가지 방법을 알아보자!

제어문 제어문이란 프로그램에서 필요한 결과 값을 도출 하기 위해 실행문의 순서를 제어 하거나 반복 시키는 문장을 말합니다. 조건문 if,switch 반복문 while.do while, for 중지,건너뛰기 break, continue 조건문 1.if문 조건이 참(True)인 경우에만 실행 합니다. 만약 조건이 거짓(False)이라면 else가 실행됩니다. if(""){ document.write("실행 되었습니다.(true)") }else { document.write("실행되었습니다.(false)"); } // 조건식 flase: 0, null, undefined ,flase, ""(빈문자열) // 조건식 true: 1, 2, "0", "1", "ABC", [], {}, true, ... //결과 실행..

JAVASCRIPT 2023.02.28