본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

 (226)
[Javascript] 문서 객체 문서 객체 문서 객체 모델(Document Object Model)은 자바스크립트를 통해 브라우저에서 동작하는 형태를 접근하는 방식이며, 문서와 관력된 객체입니다. 문서 객체 문서 객체 속성 종류 설명 createElement() 요소 노드를 생성합니다. createTextNode() 텍스트 노드를 생성합니다. appendChild() 객체에 노드를 추가합니다. setAttribute() 객체의 속성을 설정합니다. getAttribute() 객체의 속성을 가져옵니다. getElementById() ID 속성을 가져옵니다. getElementsByName() 객체의 속성 이름을 가져옵니다. getElementsByTagName() 태그를 선택합니다. removeChild() 객체의 자식 노드를 제거합니다...
[Javascript] location 객체 location 객체 location 객체는 현재 사용 중인 URL에 대한 정보를 제공하는 객체입니다. location 객체 location 객체는 브라우저 주소 창에 대한 속성과 메서드를 제공하는 객체입니다. location.속성 location 객체 메서드 종류 설명 location.assign() 새로운 문서를 로드합니다. location.reload() 현재 문서를 새로 고침합니다. location.replace() 현재 문서를 새로운 것으로 변경합니다. location 객체 속성 종류 설명 location.hash() URL의 해시값(#값)을 반환합니다. location.host() URL에 호스트 이름과 포트 번호를 반환합니다. location.hostname() URL에 포함된 호스트 이름을..
[Javascript] history 객체 history 객체 history 객체는 사용자가 방문한 사이트 정보를 제공하는 객체입니다. history 객체 history 객체는 사용자가 방문한 사이트 정보를 제공하는 객체입니다. history.속성 history 객체 속성 종류 설명 length history 기능으로 이동 가능한 URL 개수를 반환합니다. history 객체 메서드 종류 설명 history.back() 이전 방문한 페이지로 이동합니다. history.forward() 다음 방문한 페이지로 이동합니다. history.go(숫자) history에 저장되어 있는 페이지 중 숫자 페이지로 이동합니다 Sample1 브라우저 주소와 관련된 예제입니다. 결과 이전페이지 다음페이지 1단계 이전페이지 2단계 이전페이지 html 이전페이지 다음페..
[Javascript] screen 객체 screen 객체 screen 객체는 사용자의 화면과 관련된 정보를 제공하는 객체입니다. screen 객체 screen 객체는 사용자의 화면과 관련된 정보를 제공하는 객체입니다. screen.속성 screen 객체 속성 종류 설명 screen.availHeight() 작업표시줄을 제외한 화면의 사용 가능한 높이 값을 반환합니다. screen.availWidth() 작업표시줄을 제외한 화면의 사용 가능한 너비 값을 반환합니다. screen.colorDepth() 화면의 표현 가능한 컬러 색상 수를 반환합니다. screen.pixelDepth() 화면의 픽셀당 비트 수를 반환합니다. screen.height() 화면의 높이 값을 반환합니다. screen.width() 화면의 너비 값을 반환합니다. Sampl..
[Javascript] navigator 객체 navigator 객체 navigator 객체는 브라우저에 대한 정보를 가지고 있는 객체입니다. navigator 객체 navigator 객체는 브라우저와 관련된 정보를 컨트롤 합니다. 브라우저에 대한 버전, 정보, 종류 등 관련된 정보를 제공합니다. navigator.속성 navigator 객체 속성 종류 설명 navigator.appCodeName 브라우저의 코드명을 반환합니다. navigator.appName 브라우저의 이름을 반환합니다. navigator.appVersion 브라우저의 버전을 반환합니다. navigator.cookieEnabled 브라우저의 쿠키 사용 가능 여부를 반환합니다. navigator.language 브라우저에서 사용되는 언어를 반환합니다. navigator.onLine ..
[Javascript] window 객체 window 객체 브라우저 객체는 브라우저에 내장된 객체를 말하며, window 객체는 브라우저 객체의 최상위 객체입니다. window 객체에는 document, screen, location, history, navigator 객체를 포함하고 있으며, 이를 브라우저 객체 모델(BOM: Browser Object Model)이라고 합니다. window 객체 window 객체 속성(Properties) 종류 설명 closed 브라우저 창이 열려 있는지 닫혀 있는지에 대한 정보의 값을 불린값으로 반환합니다. console 디버깅을 목적으로 브라우저에서 객체의 정보를 반환합니다. document 브라우저에 대한 문서 정보를 표현합니다. event 브라우저에 이벤트 정보를 표현합니다. frames 브라우저에 구..
[Javascript] 정규 표현 객체 정규 표현 객체 정규 표현 객체(RegExp)는 입력 요소에 테이터를 규칙에 맞게 작성했는지 판단해서 알려주는 객체입니다. 정규 표현식(RegExp) 객체 var 변수 = / 패턴 / 플래그; var 변수 = new RegExp("패턴","플래그"); 정규 표현 메서드 종류 설명 search() String 객체의 메서드 항목을 검색하고 위치를 반환합니다. replace() String 객체의 메서드 항목을 검색하고 해당 문자를 바꿉니다. test() 정규 표현식과 일치한 문자열이 있으면 true를 반환합니다. exec() 정규 표현식과 일치하는 문자열을 반환합니다. match() 정규 표현식과 일치하는 문자열을 반환합니다. 정구 표현 검색 옵션 종류 설명 * 0회 이상 일치하는 문자를 검사할 때 사용합..
[Javascript] 수학 객체 수학 객체 수학 객체(Math Object)는 수학과 관련된 기능과 속성을 제공하는 객체입니다. 수학 객체 자바스크립트에서는 수학과 과련된 객체를 제공합니다. 수학 관련 객체 메서드를 이용하면 수학과 관련된 작업들을 처리 할 수 있습니다. Math 객체 속성 종류 설명 Math.E 오일러의 상수, 2.718281828459045 Math.LN2 2의 자연로그, 0.6931471805599453 Math.LN10 10의 자연로그, 2.302585092994046. Math.LOG2E 밑이 2인 로그 E, 1.4426950408889634 Math.LOG10E 밑이 10인 로그 E, 0.4342944819032518 Math.PI 원의 둘레와 지름의 비율, 3.141592653589793 Math.SQRT1..
[Javascript] 배열 객체 Array 객체 배열 객체(Array Object)는 여러 개의 데이터를 저장하기 위한 객체입니다. Array 객체 생성 var 변수 = new Array(); Array 객체 속성 속성 설명 length 배열 요소의 개수를 알아냅니다. Array 객체 메서드 함수 설명 concat() 여러 개의 배열을 새 배열로 반환합니다. copyWithin() 두 배열의 조합으로 구성된 새 배열을 반환합니다. entries() 배열의 각 인덱스에 대한 키와 값을 반환합니다. every() 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. fill() 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 채웁니다. filter() 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합..
[Javascript] 날짜 객체 날짜 객체 날짜 객체(Data Object)는 날짜와 관련된 객체입니다. 날짜 객체 생성 var 참조 변수 = new Data(); UTC(협정 세계표준시)와 GMT(그리니치 표준시) UTC(협정 세계표준시)는 1972년 1월 1일부터 시행된 국제 표준시이며, GMT(그리니치 표준시)는 런던을 기점으로 하고, 웰링턴에 종점으로 설정되는 협정 세계시의 기준시간대입니다. UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용되며, 기술적인 표기에서는 UTC가 사용됩니다. 초 계산 1분 = 1000(msc) 1분(60초) = 1000 * 60 //60,000(msc) 1시간(60분) = 1000 * 60 * 60 //3,600,000(msc) 1일(60분*24) = 1000 * ..
[Javascript] 숫자 객체 숫자 객체 숫자 객체(Number Object)는 숫자와 관련된 객체입니다. 자바스크립트를 이용하여 숫자를 표시하거나, 표현 가능한 수의 속성과 표기법에 대한 메서드를 제공합니다. 숫자 객체 생성 var 변수 = new Number; 숫자 객체 속성 종류 설명 MAX_SAFE_INTEGER 표현할 수 있는 안전한 최대 정수값을 나타냅니다. MAX_VALUE 표현할 수 있는 가장 큰 수를 나타냅니다. MIN_SAFE_INTEGER 표현할 수 있는 안전한 최소 정수값을 나타냅니다. MIN_VALUE 표현할 수 있는 가장 작은 수를 나타냅니다. NEGATIVE_INFINITY 음의 무한대 수를 나타냅니다. NaN 숫자가 아닌 경우를 나타냅니다. POSITIVE_INFINITY 양의 무한대 수를 나타냅니다. 숫..
[Javascript] 문서 객체 문자 객체 문자객체(String Object)는 문자와 관련된 객체입니다. 문자 객체 생성 var 변수 = new String(문자형 데이터) String 객체의 속성 종류 설명 length 문자열의 길이를 가져옵니다. String 객체의 메서드 종류 설명 charAt() 문자열에서 인덱스 번호에 해당하는 문자를 반환합니다. charCodeAt() 문자열에서 인덱스에 대한 유니코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. codePointAt() 문자열에서 인덱스에 대한 유니코드 포인트 값인 아닌 정수를 반환합니다. concat() 여러 개의 문자열을 새 문자열로 반환합니다. endsWith() 문자열에서 특정 문자열로 끝나는지를 확인합니다. includes() 하나의 문자열이 다른 문자열..
[Javascript] 객체 객체 자바스크립트는 객체 기반 언어입니다. 객체는 데이터와 연산 작업을 담고 있는 기본적인 기능이라고 생각하면 됩니다. 객체는 기능 또는 속성을 가지고 있으며, 우리 주변의 모든 사물들을 객체라고 표현 할 수 있습니다. 객체 객체(object)란 데이터와 연산 작업을 담고 있는 기본적인 기능이며, 메서드(Method)와 속성(Attribute)으로 이루어져 있습니다. 객체.메서드(); 객체가 할 수 있는 동작 값 객체.속성; 객체의 기본 데이터 값 Sample1 객체를 생성하는 방법 예제입니다. 결과 100 200 100 200 100 200 100 200 100 200 100 200 100 200 100 200 자바스크립트 100 200 자바스크립트 자바스크립트가 실행되었습니다. 자바스크립트가 실행되었..
[Javascript] 내장 함수 내장 함수 자바스크립트에서 기본적으로 제공하는 함수입니다. 내장 함수 함수 설명 eval() 문자형 데이터를 큰따옴표가 없는 스크립트 코드로 처리합니다. isFinite() 유한수인지 체크해서 논리값으로 돌려줍니다. isNaN() 데이터에 숫자가 아닌 문자를 포함하면 true를 반환합니다. parseFloat() 문자형 데이터를 실수형 데이터로 바꿉니다. parseInt() 문자형 데이터를 정수형 데이터로 바꿉니다. String() 문자형 데이터로 바꿉니다. Number() 숫자형 데이터로 바꿉니다. Boolean() 논리형 데이터로 바꿉니다. Sample1 내장 함수를 사용하는 기본 예제입니다. 결과 변수 값 1.23456 정수형 데이터[parseInt()] : 1 실수형 데이터[parseFloat()..
[Javascript] 함수의 사용형태 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 기본적인 함수 함수를 사용하는 가장 기본적인 형태입니다. 익명 함수 익명 함수는 변수에 함수를 선언하는 방법입니다. 매개변수가 있는 함수 변수를 통해 함수의 값을 전달하는 함수입니다. 리턴값이 있는 함수 결과 값이 있는 함수입니다. 재귀 함수 함수 정의문 내에 함수를 다시 호출하여 실행하는 함수입니다. 콜백 함수 함수를 변수에 저장하고 변수를 함수의 인수로 사용하여 매개변수에 전달하는 함수입니다. 내부 함수 내부 함수는 함수 안에 함수를 선언하는 함수를 말합..
[Javascript] 함수 함수 함수는 프로그램이 있어 가장 중요한 영역입니다. 함수는 실행문을 저장하여 사용할 수 있으며, 함수의 형태는 다양하기 때문에 다양한 함수의 사용방법을 익히고 해석 할 수 있어야 합니다. 함수 함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다. 함수에서 쓰는 용어 매개변수 : 함수에 자료를 넘기기 위한 변수 리턴 값 : 함수를 실행하고 나오는 결과 값 콜백함수 : 함수에 매개변수로 함수를 전달할 때 사용하는 함수 호출 : 함수 내부를 실행시킬 때 호출이라고 표현 Sample1 함수를 사용하는 이유에 관한 예제입니다. html
[Javascript] continue문 continue문 break문과 continue문은 반복문을 제어하는 명령어입니다. continue문 코드 실행 중에 continue을 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다. for(초깃값; 조건식; 증감식){ continue; 실행문 } var 변수 = 초깃값; while(조건식){ continue; 실행문; 증감식; } Sample1 break문와 continue문을 이용한 예제입니다. html
[Javascript] break문과 continue문 break문 break문과 continue문은 반복문을 제어하는 명령어입니다. break문 break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다. for(초깃값; 조건식; 증감식){ break; 실행문 } var 변수 = 초깃값; while(조건식){ break; 실행문; 증감식; } Sample1 break문와 continue문을 이용한 예제입니다. html
[Javascript] 중첩 for문 중첩 for문 for문 안에 for문이 있는 형태입니다. 중첩 for문 for(var i=0; i Sample2 중첩 for문을 이용한 구구단 출력하기 예제입니다. 결과 2X1=2 2X2=4 2X3=6 2X4=8 2X5=10 2X6=12 ....... 9X5=45 9X6=54 9X7=63 9X8=72 9X9=81 html Sample3 중첩 for문을 이용한 테이블 만들기 예제입니다. 결과 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939..
[Javascript] for문 for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for문 for(초깃값; 조건식; 증감값){ //반복 코드 } for(var i=0; i
[Javascript] do while문 do while문 while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행문을 실행하고 조건식을 검사합니다. do while문 while문은 조건을 검사하고 코드를 반복적으로 실행합니다. 첫 조건이 거짓이라면 코드를 실행하지 않을 수 있습니다. 하지만 do while문은 조건이 참, 거짓과 상관없이 최소한 한 번은 실행합니다. var 변수 = 초깃값; do { 실행문; 증감식; } while (조건식) Sample1 do while문을 이용한 예제입니다. html
[Javascript] while문 while문 반복되는 부분을 실행할 때 사용하는 제어문입니다. while문 while문은 조건식에 만족할 때까지 반복적으로 실행하는 반복문입니다. 조건식을 검사하고 만족하면 실행문을 실행하고 증감식을 실행합니다. var 변수 = 초깃값; while (조건식){ 실행문; 증감식; } Sample1 while문을 이용한 예제입니다. html
[Javascript] 조건부 연산자 조건부 연산자 조건부 연산자는 조건을 처리하는 다른 형태의 제어문입니다. 조건부 연산자(삼항 연산자) (조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드); Sample1 if문을 삼항 연산자로 변경하는 예제입니다. html
[Javascript] switch문 switch문 해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다. switch문 var 변수 = 초깃값; switch (조건을 체크할 변수) { csae 값1 : //조건을 체크할 변수가 값1을 가지면 실행 break; csae 값2 : //조건을 체크할 변수가 값2을 가지면 실행 break; csae 값3 : //조건을 체크할 변수가 값3을 가지면 실행 break; default : //해당되는 값을 가지고 있지 않을 경우 실행 break; } Sample1 switch문을 이용한 예제입니다. html Sample2 switch문과 if문을 이용한 학점 예제입니다. html Sample3 switch문을 이용한 사이트 이동 예제입니다. html Sample4 switch문을 if문으로 변..
[Javascript] 다중 if문 다중 if문 여러가지 조건에 따라 조건문을 설정합니다. 조건에 계속 설정할 수 있으며 마지막에는 조건식을 쓰지 않습니다. 다중 if문 if (조건식1) { //참일 때 실행 코드 } else if (조건식2) { //앞 조건이 거짓일 때 실행 코드 } else if (조건식2) { //앞 조건이 거짓일 때 실행 코드 } else if (조건식3) { //앞 조건이 거짓일 때 실행 코드 } else { //앞의 모든 조건이 거짓일 때 실행 코드 } Sample1 다중 if문을 이용한 심리테스트 예제입니다. html Sample2 다중 if문을 예제입니다. html
[Javascript] if~else문 if ~ else문 두개의 값을 비교하여 코드를 별개로 실행합니다. if ~ else문 if ~ else문은 두개의 조건이 있을 때 사용하는 조건문입니다. if (조건식) { //참(true)일 때 실행 코드 } else { //거짓(false)일 때 실행 코드 } Sample1 if문을 이용한 다양한 예제입니다. html
[Javascript] if문 if문 if문 단독으로 사용하는 형태입니다. if문 자바스크립트에서 가장 많이 사용하는 if문입니다. if문은 조건식을 사용할 때 많이 씁니다. if (조건식) { //실행코드 } Sample1 if문을 이용한 다양한 예제입니다. html
[Javascript] 연산자 우선순위 연산자 우선순위 모든 연산자에는 우선순위가 있습니다. 연산자 우선순위 우선순위 연산자 설명 1 괄호/대괄호 ()[] 2 단항 연산자 !, ++, -- 3 곱셈/나눔셈 연산자 *, /, % 4 덧셈/뺄셈 연산자 +, - 5 비교 연산자 >, >=,
[Javascript] 문자열 결합 연산자 문자열 결합 연산자 문자열과 연산자를 결합해서 사용할 수 있습니다. 문자열 결합 연산자 x 변수 y 변수 x + y 숫자 숫자 숫자 문자열 문자열 문자열 숫자 문자열 문자열 문자열 숫자 문자열 Sample1 논리 연산자를 이용한 예제입니다. 결과 number 200 100javascript 100200 101 100 2 1 1 100 string html
[Javascript] 비트 연산자 비트 연산자 비트 연산자는 2진수 형태로 연산을 수행합니다. 비트 연산자 연산자 예시 설명 & x & y x와 y의 비트 단위 AND | x | y x와 y의 비트 단위 OR ^ x ^ y x와 y의 비트 단위 XOR ~ x ~ y x를 비트 단위로 NOT >> x >> 2 x를 2비트만큼 왼쪽으로 이동
1 ··· 4 5 6 7 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바