전체 글 400

[JavaScript] 정규 표현식

정규 표현식정규 표현식(regular expression)문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴모든 종류의 문자열 검색이나 교체 등의 작업에서 사용정규 표현식의 생성정규 표현식 리터럴을 이용한 생성/검색패턴/플래그RegExp 객체를 이용한 생성new RegExp(”검색패턴”)예시var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성regStr; // /a+bc/regObj; // /a+bc/단순한 패턴 검색은 문자열 직접 나열var strReg1 = /abc/;targetStr.search(strReg1); ⇒ 해당 위치의 첫번째 인덱스 반환, 목찾으면 -..

JS & TS/JavaScript 2025.03.22

[JavaScript] 예외처리

예외처리예외 exception예외란 프로그램이 실행 중에 발생하는 런타임 오류 의미예외 발생throw 키워드throw 표현식;표현식에는 예외코드를 나타내는 숫자, 오류 메시지를 담고 있는 문자열, Error 객체 등이 올 수 있다.예외 처리try - catch - finally 문형식try { 예외를 처리하길 원하는 실행 코드;} catch (ex) { 예외가 발생할 경우에 실행될 코드;} finally { try 블록이 종료되면 무조건 실행될 코드; // 예외가 발생하건 안하건 가장 마지막에 무조건 실행 }그 외try - catchtry - finallyError 객체런타임 오류가 발생할 때마다 Error 객체의 인스턴스가 만들어져 해당 오류의 정보를 저장한다.ex.name, e..

JS & TS/JavaScript 2025.03.22

[JavaScript] 이벤트

이벤트이벤트(event)웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미이벤트 타입 event type이벤트의 종류를 나타내는 문자열로 event name 이라고도 한다.키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트이벤트 리스너(event listener)이벤트가 발생했을 때 그 처리를 담당하는 함수, event handler 라고도 한다.이벤트가 특정 요소에서 발생시, 그 요소에 등록된 이벤트 리스너 실행이벤트 리스너 등록객체나 요소에 프로퍼티로 등록하는 방법자바스크립트 코드에서 프로퍼티로 등록이벤트 타입별로 하나의 이벤트 리스너만 등록 가능window.onload = function() { … }HTML 태그에 속성으로 등록객체나 요소의 메소드에 이벤트 리스너..

JS & TS/JavaScript 2025.03.22

[JavaScript] 노드, 브라우저 객체 모델(BOM)

노드nodeHTML DOM은 node라고 불리는 계층적 단위에 정보를 저장하고 있다.노드 트리는 최상위 레벨인 루트 노드부터 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.노드의 종류문서 노드(document node)HTML 문서 전체를 나타내는 노드요소 노드(element node)모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드속성 노드(attribute node)모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음해당 요소 노드의 자식 노드에는 포함되지 않음텍스트 노드(text node)HTML 문서의 모든 텍스트는 텍스트 노드주석 노드(comment node)HTML 문서의 모든 주석은 주석 노드노드 접근 방법getElementsByTag..

JS & TS/JavaScript 2025.03.22

[JavaScript] 객체

객체객체객체란 name과 value로 구성된 프로퍼티의 정렬되지 않은 집합객체 property 참조객체명.프로퍼티명객체명[”프로퍼티명”]객체 메소드 참조객체명.메소드명()예시var person = { name: "홍길동", // 이름 프로퍼티를 정의함. birthday: "030219", // 생년월일 프로퍼티를 정의함. pId: "1234567", // 개인 id 프로퍼티를 정의함. fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함. return this.birthday + this.pId; }};person.name; // 홍길동person["name"]; // 홍길동person.fullId(..

JS & TS/JavaScript 2025.03.22

[JavaScript] 함수, 변수/함수 범위, 매개변수/인수

함수함수 정의 - function 키워드function 함수명(매개변수1, 매개변수2, …) { 실행문 };함수명(매개변수1, 매개변수2); ⇒ 함수호출반환문 - returnfunction 함수명(매개변수1, 매개변수2, …) { … return ㅁㅁㅁ; };var 변수명 = 함수명(매개변수1, 매개변수2); ⇒ return 값 변수에 저장정의되어 있는 전역 함수 종류eval() - 문자열로 표현된 식이나 코드 실행ex) var x = 10, y = 20;var a = eval("x + y"); // 30isNaN() - NaN인지 검사하여 결과 반환NaN은 Not A Number이라는 숫자가 아니라는 의미로 정의되지 않은 값이나 표현할 수 없는 값을 가리킨다.0 / 0도 NaNex) 문자열, undef..

JS & TS/JavaScript 2025.03.22

[JavaScript] 배열

배열JS 배열의 특징배열 요소의 타입이 고정되어 있지 않아서, 같은 배열에 있는 요소끼리 타입이 서로 다를 수 있다.인덱스가 연속적이지 않아도 된다특정 배열 요소가 비어있을 수 있다Array 객체배열 생성 3가지 방법var arr = [요소1, 요소2, …]; var arr2 = Array(요소1, 요소2, …);var arr3 = new Array(요소1, 요소2, …);예시var arrLit = [1, true, "JavaScript"]; // 배열 리터럴var arrObj = Array(1, true, "JavaScript"); // Array 객체의 생성자var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자 document.write(arrL..

JS & TS/JavaScript 2025.03.22

[JavaScript] 조건문, 반복문, 기타 제어문

조건문if문if (표현식) { 참일때 실행문 }if - else 문if (표현식) { 참일때 실행문 } else { 거짓일때 실행문 }if - else if - else 문if (표현식1) { 표현식1이 참일때 실행문 } else if (표현식2) { 표현식2가 참일때 실행문 } … else { 다 아닐때 실행문 }switch 문default 문은 필요할 때만 선언각 case 절과 default 절은 반드시 break 키워드를 포함하고 있어야 한다.문법switch (조건 값) { case 값1: 조건 값이 값1일 때 실행하고자 하는 실행문; break; case 값2: 조건 값이 값2일 때 실행하고자 하는 실행문; break; ... ..

JS & TS/JavaScript 2025.03.22

[JavaScript] 변수, 연산자

변수var변수 선언var 변수명;선언 및 초기화var date = 25;다중 선언, 초기화 가능같은 변수에 다른 타입 다시 대입 가능 (재할당 가능)let중복 선언 불가재할당 가능const중복 선언 불가재할당 불가 연산자산술 연산자+, -, *, /, %대입 연산자=, +=, -=, *=, /=, %=증감 연산자++변수변수++--변수변수--비교 연산자==, !=, >, >=, ===값과 타입까지 같을 때 참!==값이 같지 않거나 타입이 다르면 참논리 연산자&& (AND)|| (OR)! (NOT)비트 연산자&, |^ (XOR)~ (NOT)>지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨기타 연산자문자열 결합 연산자 삼항 연산자(표현식) ? 참일시반환값 : 거짓일시반환값쉼표 연..

JS & TS/JavaScript 2025.03.22

[JavaScript] 기본 타입, 타입변환 메소드

출력 방법window.alert() 메소드 - 대화상자HTML DOM 요소를 이용한 innerHTML 프로퍼티document 객체의 getElementByID() 나 getElementsByTagName() 메소드 등을 사용하여 HTML 요소 선택innerHTML 프로퍼티 이용하여 선택된 내용(content)이나 속성(attribute)값 변경예시 document.write() 메소드웹페이지 실행시 가장 먼저 데이터 출력대부분 테스트나 디버깅 위해 사용console.log() 메소드 등등기본 타입원시 타입(primitive type)숫자 Number문자열 StringBooleanSymbol유일하고 변경할 수 없는 타입ex) var sym = Symbol(”javascript”);undefined과 nul..

JS & TS/JavaScript 2025.03.22
728x90