본문 바로가기

언어/자바스크립트(Java Script)16

[자바스크립트] 예외 처리 예외처리란?프로그램에서 문제가 발생하면, 프로그램이 실행을 멈추기 때문에, 소스를 작성할 때부터 발생할 만한 오류를 미리 고려하고 대비하는 것 * 예외란?- 문법적인 실수로 발생하는 오류→ 문법 오류 뒤에 오는 소스는 실행되지 않아서 프로그램이 중단되기도 함- 프로그램의 작성 의도와 다르게 사용했을 때→ 이런 상황을 미리 예상해서 처리해 줌 try, catch, finallytry : 실행할 코드catch : try블록에서 예외가 발생했을 때 실행할 코드catch(err)의 err는 instanceerr.__proto__ : ReferenceError 등 무언가 나옴err.prototype : undefined err가 어떤 에러인지 받아오기 때문에, catch문을 여러개 쓸 필요가 없음 (문법적으로도 .. 2024. 8. 6.
[자바스크립트] JSON 데이터 교환 방식서버와 클라이언트 간에 자료를 주고받기 위해 양쪽 모두 이해할 수 있는 형식을 사용해야 함1) XML은 컴퓨터에서 처리하는 모든 문서의 표준 형식이기 때문에 웹에서 사용 가능2) 최근에는 JSON 형식을 더 많이 사용함! JSON의 특징텍스트로만 구성되었기 때문에 서버와 클라이언트 사이에 주고 받을 때 전송 속도가 아주 빠름JSON은 프로그래밍 언어나 플랫폼에 대해 독립적, C++, 자바, 자바스크립트, 파이썬 등 많은 언어에서 사용 가능자바스크립트 사용자라면 누구나 알고 있는 표기법 사용, 읽기도 쉽고 자바스크립트 객체로 변환하기도 쉬움JSON의 형식중괄호 { }사이에 ‘이름’과 ‘값'으로 구성됨JSON에서는 ‘이름’ 부분에 반드시 큰따옴표를 붙이는 것이 큰 차이점{ "이름" : .. 2024. 8. 6.
[자바스크립트] HTTP/HTTPS HTTP란?프로토콜(Protocol) : 클라이언트와 서버 간에 자료를 주고 받을 때 미리 약속된 규칙웹에서는 HTTP(Hyper Text Transfer Protocol)라는 프로토콜을 사용함HTTP 요청(HTTP request) : 클라이언트에서 서버로 자료 요청HTTP 응답(HTTP response) : 서버에서 응답해서 클라이언트로 자료를 보냄 요청 헤더와 응답 헤더클라이언트에서 사이트 주소를 입력하고 [Enter]를 누를 때 사이트 주소뿐만 아니라 사용 중인 시스템 정보와 웹 브라우저 정보, 사용한 언어 등 다른 정보까지 함께 전송됨→ 서버로 요청할 때 보내는 헤더를 ‘요청 헤더(request header)’라고 한다.서버에서 입력한 사이트를 찾아서 클라이언트로 보낼 때 ‘응답 헤더(respon.. 2024. 8. 6.
[자바스크립트] 이터레이터 & 제너레이터 이터러블 객체이터러블 객체에서 이터러블(iterable)이란, ‘순서대로 처리할 수 있다’는 뜻예를 들어, 배열은 인덱스와 값을 가지고 있으므로 인덱스 0부터 차례대로 값을 가져와서 처리할 수 있 기 때문에 이터러블 객체이다.문자열과 배열, 맵, 셋이 이터러블 객체이다이터러블 객체에서는 다음과 같은 기능을 사용할 수 있다.  • for...of 반복문  • 전개 연산자(...)  • 구조 분해 할당 이터러블 객체에는 Symbol.iterator 메서드가 포함되어 있다. ( ‘이터러블 프로토콜'이라고 함)Symbol.iterator 메서드를 실행하면 Iterator 객체가 반환된다  이터레이터 객체란 객체의 요소를 순서대로 꺼낼 수 있는 객체 next() 메서드가 있기 때문에 가능 next() 메서드는 v.. 2024. 8. 6.
[자바스크립트] Map & Set Map과 Set이 등장한 이유자바스크립트에서 여러 값을 하나의 변수로 묶어서 처리하기 위해 배열이나 객체 사용배열과 객체로는 부족하다고 생각했던 부분을 보완해 Map과 Set이 도입됨객체에서 ‘키’에는 문자열만 사용할 수 없음→ Map에서는 키에 모든 값을 사용할 수 있음!객체에는 여러 정보를 담을 수 있지만 프로퍼티 간에 순서가 없음→ Map과 Set에는 순서가 있음for 문과 같은 반복문을 사용해서 객체의 프로퍼티를 반복할 수 없음→ Map과 Set에서는 for... of 같은 반복문을 사용할 수 있음객체에는 프로퍼티의 개수를 알려 주는 프로퍼티가 없음→ Map과 Set에는 개수를 알려주는 별도의 프로퍼티가 있음Map과 Set은 배열이나 객체보다 많은 메서드를 가지고 있음 Map‘키’와 ‘값’이 하나.. 2024. 8. 6.
[자바스크립트] 구조 분해 할당 구조 분해 할당이란?주어진 자료의 구조를 분해해서 변수에 할당하는 기능디스트럭팅(destructing)이라고 함배열이나 객체는 하나의 변수에 다양한 값이 들어 있는데, 그 중에서 일부만 꺼내어 다른 변수로 할당할 수 있음// 방법 1let [apple, peach] = ["사과", "복숭아"]// 방법 2const fruits = ["사과", "복숭아"]let [apple, peach] = fruits  일부 값만 구조 분해 할당하기 구조 분해는 값의 일부만 변수에 할당할 때 더욱 편리함let [spring, ,fall, ] = ["봄", "여름", "가을", "겨울"]spring // "봄"fall // "가을 나머지 변수를 사용해 구조 분해 할당하기구조 분해에서 일부 값을 변수로 지정한 후 나머지.. 2024. 8. 6.
[자바스크립트] 내장 객체 내장 객체란?사용자가 가져다 쓸 수 있도록 미리 만들어진 객체웹 브라우저에 웹 문서가 열리면 가장 먼저 window 객체가 만들어지고 하위에 웹 브라우저 요소에 해당하는 객체들이 만들어짐window 객체를 비롯해 하위에 연결된 객체들은 모두 HTML 웹 API에 만들어진 객체들window 객체Window 객체는 웹 브라우저 창의 상태를 제어하는 객체자바스크립트 객체 중 최상위이자 기본이 되는 객체자바스크립트의 모든 객체는 Window 객체에 포함됨Window 객체에는 웹 브라우저 창과 관련된 여러 가지 속성이 있음Window 객체의 속성과 메서드에 접근할땐 마침표(.)를 사용함 window 객체의 주요 프로퍼티(속성)프로퍼티(속성)설명document브라우저 창에 표시된 웹 문서에 접근할 수 있음frame.. 2024. 8. 5.
[자바스크립트] 정규 표현식 정규 표현식이란?특정 패턴을 사용해 문자열을 표현하는 언어‘패턴=규칙’이라고 생각해도 됨문자열을 검색하거나 문자열에서 특정 문자를 치환할 때도 복잡한 조건문 없이 정규 표현식을 사용하면 편리함 정규 표현식 작성하기 RegExp 객체를 사용하거나 슬래시 (/)를 사용해 표현식으로 작성 정규 표현식은 ‘패턴’과 ‘플래그’로 구성 (플래그는 옵션)패턴과 플래그 사이에는 공백이 없음let regexp = /\d{3}/regexp.test("Hello") // falseregexp.test("123")  정규 표현식과 메서드RegExp 객체의 메서드정규 표현식기능정규식.test(문자열)정규 표현식에 일치하는 부분 문자열이 있으면 true 반환, 없으면 false 반환정규식.exec(문자열)정규 표현식에 일치하.. 2024. 8. 2.
[자바스크립트] Event 웹 브라우저나 사용자가 실행하는 어떤 동작사용자가 웹 문서 영역을 벗어나서 클릭하는 행위는 이벤트가 아님 (예시 : 브라우저 창의 제목 표시줄 등) 문서 로딩과 관련된 이벤트이벤트설명abort웹 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때 이벤트 발생error문서가 정확히 로딩되지 않았을 때 이벤트 발생load문서 로딩이 끝나면 이벤트가 발생resize문서 화면의 크기가 바뀌었을 때 이벤트 발생scroll문서 화면이 스크롤되었을 때 이벤트가 발생unload문서를 벗어날 때 이벤트가 발생 마우스와 관련된 이벤트마우스 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트이벤트설명click사용자가 HTML 요소를 클릭했을 때 이벤트가 발생dbclick사용자가 HTML 요소를 더블클릭했을 때 이벤트가 발생mou.. 2024. 7. 31.
[자바스크립트] DOM(문서 객체 모델) DOM이란?자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법웹 문서를 구조화한 DOM tree 와 이벤트 등을 정리한 표준DOM이 필요한 이유?- 웹에서 JS 사용하는 이유 : 어떤 조건이 주어지거나 사용자의 동작이 있을 때 웹 문서를 동적으로 반응하게 하기 위해서- 그리고 그렇게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 함 → 그래서 DOM을 사용!  DOM 트리웹 문서에 있는 요소들 간의 부모 자식 관계를 계층 구조로 표시한 것노드 : DOM 트리에서 가지가 갈라져 나간 항목루트 노드 : DOM 트리의 시작부분(html)  문서의 요소 뿐만 아니라, 각 요소의 내용과 속성도 자식으로 나타냄 DOM 트리와 노드DOM에는 단순히 태.. 2024. 7. 30.