Lumpy Space Princess - Adventure Time

JAVASCRIPT 48

3월 10일 자바스크립트 테스트 오답

틀린 문제를 위주로 풀이를 해설하겠습니다. 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 답 : false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 답 : 1 2 4 5 6 while문을 이용한 식입니다. true일 경우에 출력이 되는 식입니다. 문제 2번처럼 num++;의 위치가 중요합니다. 명령어 console의 위에 있으므로, 1의 값을 넣어줄 범위를 유의해서 풀어야 합니다. num의 값이 0으로 주어졌습니다. if 조건식이 걸려있습니다. 우선 num이 3일 경우에 continue 한다는 식은 3..

JAVASCRIPT 2023.03.10

Quiz Effect 02 - 주관식 확인하기 유형에 대해서 알아보자

지난번 게시글에 이어서 다른 부분을 추가적으로 만들었습니다. 링크: 퀴즈 이펙트 02 (daanbi1345.github.io) Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 daanbi1345@gmail.com 형식은 지난 번과 같습니다. 새로 쓴 식은 textContent와 trim()이 있습니다. 먼저 textContent에 대해서 설명하겠습니다. 지난번에 쓴 innerText 와의 차이점은 크지 않지만, 어떤 식으로 쓰이는 지를 알아보기 위해서 비교해보겠습니다. innerText : innerText는 마크업 언어가 적용된 상태로 읽어옵니다. 즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않습니다. 또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태입니다. ..

JAVASCRIPT 2023.03.09

Quiz Effect 01 - 정답 확인하기 유형에 대해서 알아보자

함수로 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다. 링크: 퀴즈 이펙트 01 body의 main 과 script 부분을 나눠서 설명하겠습니다. . 정답 확인하기 연변대비 main 부분에서는 사이트의 틀을 만들어 준다고 생각하면 됩니다. 우선, quiz__wrap으로 class를 지정해서 묶어주었습니다. script 에서 보면, quizWrap을 document.querySelector()로 선택자를 만들어 줬는데요, 이 querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 그렇기 때문에 그 다음부터는 wrap안에서 값을 찾으면 된다는 의미입니다. 그 다음은, ..

JAVASCRIPT 2023.03.08

함수 유형에 대해서 알아보자

함수function에 대해서 알아보려고 합니다. 함수를 어떻게 사용하는 지를 예제로 들면서 설명하겠습니다. 함수를 변수, 매개변수, 배열, 객체, 객체생성자를 함께 써서 사용하고 프로토타입 함수를 예제로 들겠습니다. 1. 함수 유형 : 함수와 매개변수를 이용한 형태 매개변수를 이용해서 쓴 함수입니다. 매개변수를 지정해줘서 값을 출력할 때 불러주면 되는, 간단하지만 적을 게 많은 식입니다. function func(num, str1, str2){ document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."," "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "리액트", "실행"); // 1. 함수가..

JAVASCRIPT 2023.03.07

데이터 불러오기에 대해서 알아보자

1. 변수 변수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript let으로 변수를 정해주고, 콘솔로 불러오면 됩니다. 2. 상수 상수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. const x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript const로 변수를 정해주고, 콘솔로 불러오면 됩니다. 3. 배열 변수안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200, "javascript"]; conso..

JAVASCRIPT 2023.03.06

if문에 대해서 알아보자

1. if문 if문은 주어진 조건이 참이면 특정 코드 블록을 실행하고, 거짓이면 실행하지 않습니다. 참인 조건은 많지만, 거짓인 조건은 다섯 가지가 있습니다. 따라서, 그 다섯 가지의 조건만 외우면 참과 거짓을 구별해서 쓸 수가 있습니다. 거짓의 조건은 false, null, undefined, 0, "" 입니다. 차례 대로, 거짓, 제로의, 정의되지 않은, 숫자 0, 빈 문자열 을 뜻합니다. if문의 형태는 다음과 같습니다. // false : 0, null, undefined, false, ""(빈 문자열) // true : 1, 2, "0", "1", "abc", [ ], { }, true if(조건식) { document.write("실행되었습니다.(true)"); } else { document..

JAVASCRIPT 2023.03.05

3월 3일 자바스크립트 테스트 오답

01. 다음의 출력값을 보고 빈칸을 채우시오 { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 변수가 주어져 있고, 그 값을 불러오는 과정입니다. x는 100, y는 200, z는 javascript의 값이기 때문에, 출력값이 각 100, 200, 300이 나오려면, 빈 칸에 들어갈 답은 x, y, x+y 입니다. 04. 다음의 출력값을 보고 빈칸을 채우시오 { const arr = ________(); arr[0] = 100; arr[1] = 200; arr[2] = "javascript"; console.log(arr[0]); conso..

JAVASCRIPT 2023.03.04

for in 문과 for of문 그리고 map()에 대해서 알아보자

1. for in문 for in문은 자릿수 값 즉, 인덱스 값이 나옵니다. 객체(키와 값) 때문에 만들졌기 때문에 객체에 사용할 수 있습니다. 객체의 key값과 value 값을 뽑아내는데 유용합니다. 객체의 키값의 갯수만큼 반복하여 첫 번 째 키값부터 마지막 키값까지 반복합니다. const arr = [100,200,300,400,500]; for(let i in arr) { document.write(arr[i]); } //100200300400500 이 나옴 식은 어렵지 않습니다. 배열 array의 약자 arr로 이름을 정하고, i의 값을 구한다고 쓰면 됩니다. i는 배열 안의 데이터 값이기 때문에 대괄호 안에 넣어서 써주면 됩니다. 2. for of문 for of문을 써서 배열에서 데이터를 불러올 ..

JAVASCRIPT 2023.03.02

forEach문에 대해서 알아보자

배열 안의 데이터를 불러오는 방법입니다. for문과 forEach문을 써서 점점 더 간략하게 쓰는 표현 방법들에 대해서 알아보려고 합니다. 1. for문 const num = [100, 200, 300, 400, 500]; document.write(num[0]); document.write(num[1]); document.write(num[2]); document.write(num[3]); document.write(num[4]); // 100200300400500 이 나옵니다. 기본적인 배열에서 데이터를 불러오는 방법입니다. 반복적으로 불러와야 하기 때문에 번거롭습니다. for문을 써서 좀 더 간략하게 써보겠습니다. const num = [100, 200, 300, 400, 500]; for(let ..

JAVASCRIPT 2023.03.02

화살표 함수에 대해서 알아보자

1. 화살표 함수 : 선언적 함수 화살표 함수는 함수를 선언하는 새로운 방식 중 하나입니다. 함수를 더 간결하게 표현할 수 있으며, 코드의 가독성을 높여줍니다. func = ( ) => { document.write("실행되었습니다 "); } func( ); // 실행되었습니다 2. 화살표 함수 : 익명 함수 화살표 함수를 사용하면 기존의 함수 선언 방식에 비해 코드 길이가 짧아지는 장점이 있습니다. const func = ( ) => { document.write("실행되었습니다 "); } func( ); // 실행되었습니다 3. 화살표 함수 : 매개변수 함수 화살표 함수에서는 함수 이름 대신 화살표를 사용하여 함수를 선언합니다. 매개 변수가 하나인 경우 괄호를 생략할 수 있으며, 함수 내부에서 한 줄..

JAVASCRIPT 2023.03.02

Quiz

1.마무리 문제 1 사용자가 프롬트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창을 보여 주는 프로그램을 작성해 보겠습니다. See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. 숫자를 받아서 양수, 음수, 0을 판단하고 알침 창에 표시하는 함수를 선언합니다.parseInt( ) 함수를 사용해 프롬츠 창에 입력한 내용을 숫자로 변환합니다. 프롬트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 반환합니다.반환값이 숫자일 경우에만 함수를 실행합니다. 2. 마무리 문제 2 2개의 숫자를 입력받아 두 수의 최대공약수를 구하는 함수를 작성하고 테스트해..

JAVASCRIPT 2023.02.28

데이터 제어하기를 정리해보자

01. if문 if 문은 주어진 조건이 참(true)이면 특정 코드 블록을 실행하고, 조건이 거짓(false)이면 실행하지 않습니다. // false : 0, null, undefined, false, ""(빈 문자열) // true : 1, 2, "0", "1", "abc", [ ], { }, true if(조건식) { document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } // 실행되었습니다.(true) 나 // 실행되었습니다.(false)의 결과가 나온다. 02. if문 생략 if문을 생략해서 쓸 수 있습니다. const num = 100; if(num) { document.write("실행되었습니다.(true)..

JAVASCRIPT 2023.02.28

선언적 함수, 익명 함수, 매개변수 함수, 리턴값 함수에 대해서 알아보자

01. 선언적 함수 선언적 함수는 함수를 선언하는 방식으로 함수를 선언할 때 함수 이름과 매개변수, 반환 값 등을 명시해주는 것입니다. 이 방식으로 함수를 선언하면, 함수가 호출되기 이전에 미리 함수가 메모리에 할당되어 있기 때문에, 함수를 호출하기 전에도 함수를 사용할 수 있습니다. function func( ){ document.write("실행되었습니다! "); } func( ); // 실행되었습니다! 02. 익명 함수 익명 함수란, 함수 이름을 지정하지 않고 함수를 선언하는 방식입니다. 변수에 함수를 할당하거나 함수의 매개변수로 함수를 전달할 때 사용됩니다. 이 방식으로 함수를 선언하면, 함수가 호출되기 이전에는 함수가 메모리에 할당되어 있지 않기 때문에 함수를 호출하기 전에는 함수를 사용할 수 ..

JAVASCRIPT 2023.02.27

데이터 저장하기를 정리해보자

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); conso..

JAVASCRIPT 2023.02.26

Quiz

마무리 문제 1 10보다 큰 숫자 찾기 배열 [1,3,5,7,9,11,13,15,17,19]에서 10보다 큰 숫자들을 찾는 법입니다. 주어진 배열 안의 숫자들을 i로 정하고, 그 값이 10보다 크면 "숫자,"의 형태로 출력한다는 식을 썼습니다. i의 초깃값은 0으로, arr.length 라는 조건식을 써서 배열 값의 갯수를 for문의 범위로 정했습니다. if문을 써서 배열 안의 값이 10보다 크면 출력한다는 식을 써서 마무리 했습니다. See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. 마무리 문제 2 주어진 수에서 짝수만 더하기 입력하는 숫자가 짝수일 경우에 더하는 식을 만들었습니다. 짝수이면 결과에 나오면서, "숫자 ----- 숫자"의 ..

JAVASCRIPT 2023.02.25

반복문에 대해서 알아보자

반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 그 중에서 for 문, forEach 문, for in 문 그리고 for of 문에 대해서 알아보려고 합니다. for 문 자바스크립트에서 가장 많이 사용하는 반복문입니다. 기본형은, for (초깃값; 조건; 증가식) {...} 입니다. 초깃값은 0이나 1부터 시작합니다. 몇 번을 반복할지 지정하기 위해서 카운터 변수를 사용하는데 이 항목에서 카운터 변수를 선언합니다. 조건은 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시틸 때 사용합니다. 증가식은 문장 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다. 실행 순서가 헷갈..

JAVASCRIPT 2023.02.23

자바스크립트의 연산자의 종류에 대해서 알아보자

자바스크립트의 4가지 연산자 산술 연산자 산술 연산자는 7가지의 종류가 있습니다. + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. 산술 연산자 중 '+' 연산자는 '+'를 기준으로 좌변과 우변에 숫자가 아닌 문자나 변수 등이 오면 더하기 연산이 아닌 연결 연산을 합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. '반복적인 숫자 구간의 패턴', 조건문을 이용한 '짝,홀수 판단, 배수 판단' 등의 식을 만드는데 사용합니다. ++,-- 1씩 증가시킬 때 사용하고,1씩 감소시킬 때 사용합니다. ++, -- 연산자는 변수의 값을 1씩 증가 시키거나 감소시키는데 사용하는 연..

JAVASCRIPT 2023.02.21

자바스크립트의 자료형에 대해서 알아보자

자료형이란? 컴퓨터는 숫자와 문자의 구분을 자체적으로 할 수 없기 때문에 구분을 해서 입력해주어야 합니다. 숫자나 문자열처럼 프로그램에서 처리할 유형을 지정해야 하는데, 이 형태를 '자료형'이라고 합니다. 자료형은 '데이터 유형' 혹은 '데이터 타입' 이라고도 합니다. 자료형은 크게 '원시 유형(private type)'과 '객체(object)'로 나뉘어 집니다. 원시 유형은 하나의 값만 저장하는 자료형으로, 숫자형과 문자열, 논리형, undefined, null, symbol 유형이 있습니다. 원시 유형 외에는 모두 객체 입니다. 숫자형 모든 프로그램의 가장 기본이 되는 자료형입니다. C나 자바 같은 프로그래밍 언어에서는 정수와 실수를 명확히 구별하고, 정수도 크기에 따라 다른 자료형을 사용합니다. 하..

JAVASCRIPT 2023.02.20