본문 바로가기

728x90

Javascript54

내장 함수 ⭐️ 내장 함수 ⭐️ 01. 표준 내장 객체의 종류 : 배열 객체 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 의미합니다. [1] 인코딩, 디코딩 함수 함수명 설명 encodeURIComponent( ) 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent( ) encodeURIComponent( )의 디코딩 함수 [2] 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN( ) 숫자인지 아닌지를 판별하는 함수를 말합니다. 숫자이면 false를 반환하고 숫자가 아니면 true를 반환합니다. NaN (Not a Number) isFinite( ) 유한값인지 무한값인지 판별하는 함수를 말합니다. 유한값이면 true를 반환하고 무한값이.. 2022. 8. 16.

배열 객체 (1) ⭐️ 배열 객체 ( length 속성 , join / push / pop 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 배열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 배열 객체(Array Object)는 연관성 있는 여러 데이터를 하나의 이름으로 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ 1) 배열을 생성할 때는 대괄호[ ]를 활용한 배열 리터럴 표기법을 사용하거.. 2022. 8. 12.

퀴즈 만들기 (4) 객관식 단일 문항 ⭐️ 객관식 단일 문항 (정답 오답 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 01. 출력할 내용이 들어있는 요소 선택하기 (여러개의 출력값이 나오는 부분에만 끝에 All을 붙여줌.) const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = d.. 2022. 8. 9.

요소 선택 방법 (DOM) ⭐️ 요소 선택방법 (DOM) ⭐️ 01. DOM (Document Object Model) 문서 객체 모델 HTML 문서 내의 모든 요소를 각각의 객체로 정의하여, 각각의 요소에 접근하는 방법을 제공하는 인터페이스를 의미합니다. HTML 문서와 자바스크립트를 연결해주는 통역사의 역할을 합니다. 자바스크립트는 DOM 을 통해 HTML 문서의 각 요소에 접근할 수 있고, 이를 통해 HTML 문서의 요소를 생성, 변형, 삭제하는 등의 웹 페이지 제어가 가능합니다. DOM 은 document 객체의 집합이며, 객체의 부자관계를 나타내는 트리 구조로 표현됩니다. ___ 참고하기 ___ 1) 인터페이스 (interface) 는 서로 다른 두 시스템이 정보를 교환하는 경우의 접점 또는 경계면을 의미합니다. 2) '.. 2022. 8. 6.

지역 / 전역 변수 지역 변수와 전역 변수 변수는 '함수 블록 { }'을 기준으로, 변수의 선언 위치에 따라 '지역 변수'와 '전역 변수'로 나뉩니다. 01. 지역 변수 지역 변수는 하나의 지역 내에서만 사용할 수 있는 변수를 뜻하며, 여기서 지역이란 '함수 블록 { }'에 의해 만들어지는 영역을 말합니다. function 함수 ( ) { var 변수 ; // { } 안에서 var로 지역함수 선언 } 지역 변수의 변수 선언은 함수 블록 { } 안에서 이루어집니다. 함수의 지역 변수는 함수 블록 { } 안에서만 사용할 수 있습니다. 지역 변수는 함수가 실행되면 만들어지고 함수가 종료되면 소멸합니다. 함수의 외부에서는 지역 변수에 접근할 수 없습니다. 지역 변수는 함수 블록 { } 밖의 함수와는 다른, 별도의 변수가 됩니다. .. 2022. 8. 6.

퀴즈 만들기 (3) 주관식 다수 문항 ⭐️ Javascript ☛ Quiz Effect ⭐️ 자바스크립트를 활용하여 퀴즈를 만들어보자. 퀴즈의 구성 퀴즈를 만들기 위해 필요한 정보로는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다. 에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다. [3] 주관식 유형 ☛ 다수의 퀴즈 (정답 오답 확인하기) 여러 개의 질문 내용과 답변 입력창 및 답이 있으며, 클릭하면 정답 확인 및 강아지의 표정이 변화하는 퀴즈 문항을 만들어봅니다. // 01. 선택자 : 요소를 선택하는 방법 (출력값이 여러 개이므로 querySelector 끝에 'All'을 붙여줌.) const quizType = document.querySelectorAll(".quiz__type"); // 퀴즈 종.. 2022. 8. 5.

퀴즈 만들기 (2) 주관식 단일 문항 ⭐️ Javascript ☛ Quiz Effect ⭐️ 자바스크립트를 활용하여 퀴즈를 만들어보자. 퀴즈의 구성 퀴즈를 만들기 위해 필요한 정보로는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다. 에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다. [2] 주관식 유형 ☛ 단일 퀴즈 (정답 오답 확인하기) 하나의 질문 내용과 답변 입력창 및 답이 있으며, 클릭하면 정답 확인 및 강아지의 표정이 변화하는 퀴즈 문항을 만들어봅니다. // 01. 선택자 : 퀴즈 내용의 종류를 지정합니다. const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumer = document.querySelector(".. 2022. 8. 4.

퀴즈 만들기 (1) 정답 확인형 ⭐️ Javascript ☛ Quiz Effect ⭐️ 자바스크립트를 활용하여 퀴즈를 만들어보자. 퀴즈의 구성 퀴즈를 만들기 위해 필요한 정보는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다. 에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다. [1] 정답 확인만 하는 유형 질문 내용과 답이 있고, 클릭하면 정답을 확인할 수 있는 퀴즈 문항을 만들어봅니다. // 01. 선택자 : 표현할 대상이 되는 부분을 지정합니다. const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번.. 2022. 8. 4.

함수 함수 함수(Function)는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합을 나타내는 자료형 입니다. 함수를 사용하는 것을 '함수를 호출한다'라고 표현하며, 함수를 호출할 때 전달하는 자료를 '매개변수', 함수를 호출해서 최종적으로 나오는 결과를 '리턴값'이라고 합니다. 함수를 사용하면, 반복되는 코드를 함 번 정의해놓고 필요할 때마 호출하하여 반복 작업을 최소화 할 수 있습니다. 또한 기능에 따라 수정이 가능하므로 유지 보수가 용이하며, 긴 프로그램을 여러 함수의 작성을 통해 모듈화하여 가독성이 좋습니다. 함수의 종류 01. 선언적 함수 이름을 선언한 함수를 말합니다. 선언적 함수식 function func(){ document.write("함수 실행 01 "); /* 함수 .. 2022. 7. 27.

데이터 유형 데이터 타입 (자료형) 데이터 타입(Data Type)은 변수에 저장되는 데이터의 유형을 의미합니다. 01. 숫자 데이터 숫자(number) 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10,5; var num3 = 1e+2; 02. 문자 데이터 문자(string) 데이터는 '' 또는 ""으로 표현할 수 있습니다. 보통 문자 데이터는 작은 따옴표로 표현합니다. 문자 안에 문자가 들어갈 경우, 바깥쪽을 작은 따옴표로 표현하였다면 안쪽을 큰 따옴표로 표현합니다. var str1 = '문자'; var str2 = "문자"; var str3 = ' 문자는 "문자" '; // 문자 안에 문자가 들어갈 경우 var str4 = " 문자는 '문자' "; var .. 2022. 7. 27.

반복문 반복문 반복문은 프로그램에서 필요한 결과값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에서 while문, do while문, for문을 가장 많이 사용합니다. 01. 'while문'의 형식 초기값 while (조건식) { 실행문; 증감값; // 특정 조건을 만족할 때까지 계속해서 주어진 명령문을 반복 } 02. 'do while문'의 형식 초기값 do { 실행문; 증감값; } while (조건식) 03. 'for문'의 형식 for ( 초기값; 조건식; 증감값 ) { 실행문; } 1부터 100까지 출력하기 (5의 배수) 5로 나눠서 나머지가 0인 숫자를 찾습니다. for( let i=1; i 2022. 7. 27.

for문 for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for ( 초기값; 조건식; 증감값 ) 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for ( let i=0; i 2022. 7. 27.

연산자 자바스크립트 연산자 연산자는 프로그램에 필요한 수식을 만들 때 필요합니다. 자바스크립트의 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 중 + 연산자는 좌변과 우변에 문자나 변수 등이 오면 연결 연산을 합니다. 산술 연산자의 종류 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자의 오른쪽에 있는.. 2022. 7. 27.

기본 규칙 표준 웹 기술의 3가지 표준 웹 기술은 크게 3가지로 나눌 수 있습니다. HTML 은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어를 말하며, 정보가 어느 부분에 어떤 데이터로 들어가는지를 정의합니다. CSS 는 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어이며, 디자인 서식을 작성합니다. Javascript 는 콘텐츠를 동적으로 바꾸고 멀티미디어를 제어하거나 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어 입니다. 이 3가지 기술을 서로 유기적으로 결합되어 있습니다. HTML 가 정적인 레이아웃을 표현한다면, 자바스크립트는 표현한다고 말할 수 있습니다. 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법을 알아야 합니다. 자바스크립트란? 자바스크립트는 웹.. 2022. 7. 27.

이전 1 2 3 다음

728x90

티스토리툴바