💡script 태그 defer, asyncscript와 html아래 예시와 함께 script 파일을 효과적으로 불러오는 방법에 대해 알아보겠습니다.첫번째 예시head 태그 안에 삽입 버튼 ➡️ html 파싱은 순차적으로 진행되기 때문에 DOM이 생성되기 전에 script가 실행되어 #btn을 불러올 수 없어 null이 발생합니다.두번째 예시body 태그의 마지막에 삽입 버튼 let btn = document.querySelector('#btn');console.log('btn : ', btn); // 버튼세번째 예시window.onload 함수HTML파싱, DOM생성 그리고 외부 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트 ..

JavaScript 탄생배경웹문서를 제어하기 위해 만들어짐.즉, html 문서를 제어 및 조작하기 위해 만들어진 언어html 문서를 javaScript로 제어할 수 있는 이유는 브라우저 안에 웹 문서를 해석할 수 있는 렌더링 엔진이 있기 때문!크롬 : 블링크렌더링시 한 줄 한 줄 해석 후 문서를 객체화 하여 javaScript로 접근할 수 있도록 함.이처럼 문서를 객체화 했다고 해서 문서 객체 모델(Document Object Model)은 웹문서를 script로 제어할 수 있도록 한 모델이다~DOM이란?Document Object Model로 문서 객체 모델Tree구조로 되어있음각각의 요소를 node라고 함.script는 node에 접근하여 제어할 수 있게 됨접근한다 → 제어한다. 끝!document객..

ES5(ECMAScript 5) 자바스크립트의 5번째 버전으로, 2009년에 발표되었습니다. ES5는 새로운 기능을 추가하는 것 보다는 기존의 기능을 개선하는데 초점을 맞췄습니다. 개선된 기능은 아래와 같습니다. JSON 객체 JSON(JavaScript Object Notation)은 데이터를 교환하는데 사용되는 경량 데이터 형식 입니다. ES5에서는 JSON.parse() 와 JSON.stringify() 메소드를 사용하여 JSON 데이터를 다룰 수 있습니다. let data = '{"name":"John", "age":30}'; let obj = JSON.parse(data); console.log(obj.name); // "John" console.log(JSON.stringify(obj)); /..

HTTP(HyperText Transfer Protocol) 인터넷에서 데이터를 전송하는 프로토콜 클라이언트와 서버간에 데이터를 주고받기 위해 사용되며, 주로 HTML, CSS, JavaScript, 이미지, 동영상 등의 리소스를 전송하는데 사용 HTTP는 요청(Request)과 응답(Response)의 구조로 이루어져 있습니다. 클라이언트는 HTTP 요청 메시지를 서버에 전송하고, 서버는 이에 대한 응답 메시지를 클라이언트에 전송합니다. 요청과 응답 메시지는 헤더와 바디로 이루어져 있습니다. 헤더에는 요청 혹은 응답에 대한 정보가 포함되어 있고, 바디에는 요청 또는 응답에 대한 데이터가 포함되어 있습니다. 서버는 클라이언트로부터 요청을 받아야만 응답할 수 있습니다. HTTP는 보안적인 이유로 HTTPS..

JSON(JavaScript Object Notation) 자바스크립트 객체를 문자열로 표현하는 데이터 포맷 JSON을 사용하면 다른 프로그래밍 언어와의 데이터 송수신이 간단해집니다. 서버와 웹 클라이언트가 데이터를 주고 받을 때 자주 사용 합니다. 특징 JSON을 사용하면 객체를 '직렬화' 할 수 있습니다. ✏️ 직렬화란? 기본 데이터는 1바이트, 2바이트 4바이트 등 타입 별로 크기가 다르기 때문에 받는 입장에서 해석하기가 어렵습니다. 이를 보완하기 위해 문자열로 변환하여 공백 없이 연달아 붙여서 전달하는 것을 의미 합니다. 원래는 자바스크립트 언어로부터 파생되었지만 현재는 언어에 독립적으로 사용 됩니다. ✏️자바 직렬화는 자바끼리만 가능함. JSON은 두 가지 기본 자료구조인 '배열'과 '객체'를 ..

정규 표현식(regExp) 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴 입니다. 기본 형태 const regexp = /World/; const regexp = new RegExp("World"); 예제 let str = "Hello World! World!"; const re = /World/; console.log(re.test(str)); // 해당 문자열의 포함 여부 확인 console.log(str.search(re)); // 해당 문자열의 시작 위치 반환 exec() : 패턴과 일치하는 문자열 반환 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열 반환 만약, 패턴과 일치하는 문자열이 없으면 null 반환 let targetStr = "가장 큰 실수는 포기,..

PointerEvent 속성 KeyboardEvent 객체 확인 keyCode => key const btnEl = document.querySelector("button"); btnEl.addEventListener("click", function(e) { console.log("버튼이 눌려졌습니다." + e); console.log("x좌표 : " + e.clientX); console.log("y좌표 : " + e.clientY); console.log("마우스가 클릭된 x 좌표 : " + e.pageX); console.log("마우스가 클릭된 y 좌표 : " + e.pageY); console.log("모니터의 왼쪽 모서리 기준으로 마우스가 클릭된 x 좌표 : " + e.screenX); con..

이벤트는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미 합니다. 이벤트가 발생하면 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있습니다. 이벤트 종류 1. 인라인 방식 인라인 방식 // 1. 인라인 방식 function clickEvent() { alert("인라인 방식으로 구현된 함수가 호출 되었습니다!"); } 2. 이벤트 등록 메소드(addEventListener()) DOM에서 제공하는 addEventListener() 메소드를 사용해 이벤트를 등록할 수 있습니다. 가장 권장하는 방식입니다. .addEventListener("", ); // ⭐️ 2. 이벤트 등록 메소드 방식 function eventFunc() { ..

HTML 문법으로 작성한 태그, 주석, 텍스트와 같은 구성 요소들은 웹브라우저에서 각각 하나의 객체로 인식 합니다. 이러한 HTML 구성 요소들을 다루는 객체를 문서 객체 모델(DOM)이라고 합니다. header link DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 '트리' 형태로 구성되는데, 이들을 각각 '노드'라고 합니다. document는 노드가 아니라 객체이므로 여기서는 html이 루트 노드가 됩니다. 메소드로 노드 선택하기 일반적으로 요소 노드를 바로 선택할 수 있는 메소드를 이용한 노드 선택 방법이 많이 쓰입니다. 속성값과 태그명 사용 - get 메소드 getElementById("id명") getElementById() 메소드로 선택하는 요소 노..

자바스크립트에서의 class와 자바의 class는 유사한 점이 많습니다. 공통사항은 따로 다루지 않고, 차이점에 대해서만 다루겠습니다. 차이점 ☕ 자바 클래스는 인터페이스를 사용하여 다중 상속을 모방할 수 있습니다만, 🍦 자바스크립트에서는 인터페이스 개념이 없으므로 다른 방법을 사용해야 합니다. ☕ 자바 클래스에서는 super 키워드를 사용하여 상위 클래스의 생성자를 명시적으로 호출해야 합니다. 🍦자바스크립트 클래스에서는 super 키워드를 사용하여 상위 클래스의 '생성자'를 호출하는 것 이외에도, super 키워드를 사용하여 상위 클래스의 '메소드'를 호출할 수 있습니다. ☕자바 클래스에서는 상위 클래스의 메소드를 super 키워드를 사용하여 오버라이딩을 방지할 수 있습니다만, 🍦자바스크립트에서는 오버..