JavaScript 썸네일형 리스트형 [JavaScript] ES6 문법 - 모듈 임포트/ 엑스포트 ⭐ 모듈 임포트 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있다. ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능하다! 모듈을 내보내는 방법은 named export방식과 default export방식 2개가 있다. 여러 값을 내보낼 때 named export방식 단일 값을 내보낼 때 default export방식 여러 값 내보내기 👉 named export 모듈 Export하기 //1번 방법 export const name = "이순신"; export const age = 20; export const info = () => { console.log("이름:" + name + ", 나이:" + age); } export를 하기 .. 더보기 [JavaScript] ES6문법 - 클래스, 클래스 상속 Class ✅ 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 X class Person { // 멤버변수 - 변수 키워드 쓰지 않음 name = "홍길동"; age = 20; state = {subject : "JS"}; } ✅ 생성자는 1개이다 (생성자 중복 불가) ✅ 멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성 //생성자는 자바스크립트에서 반드시 1개이다(중복 불가) constructor(addr) { //선언한 적 없지만 자동으로 addr이라는 멤버변수로 지칭 this.addr = addr; } 클래스 내부에서의 함수 //함수 func = () => { console.log("func실행"); } 기본 생성자가 없더라도 허용된다 (매개변수가 있는 생성자만 있어도 허용) //.. 더보기 [JavaScript] 여러 태그에 한번에 이벤트 걸기 가능...? 다중 이벤트 여러 이벤트를 한번에 걸어주기/h3> 환혼 주인공들: 1.장욱 2.서율 3.당구 4.낙수 5.진초연 선택한 태그의 값: HTML 삽입 미리보기할 수 없는 소스 위의 코드처럼 이벤트 실행 함수에 반복문을 걸어서 한 번에 다중으로 이벤트를 걸 수 있지만, 이는 매우 비효율적이라서 다음 코드처럼 이벤트 전파를 이용해 이벤트를 걸어주는 것이 좋다 이벤트 전파를 하기 위해서는 이벤트 객체에 대해 먼저 알아야 한다 이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어 이벤트 핸들러에 암묵적으로 전달된다 이벤트 전파 특성 활용하기⭐⭐⭐ 환혼 주인공들: 1.장욱 2.서율 3.당구 4.낙수 5.진초연 선택한 태그의 값:.. 더보기 [JavaScript] 노드 보러 왔다가 클래스 속성 제어도 배우고 갑니다 노드 이동 부모 노드, 자식 노드 선택 기능 설명 childNodes 모든 자식 노드 선택 (단, 노드에 생략된 text도 포함) children 모든 자식 노드 선택 parentElement 부모 노드 선택 nextElementSibling 다음 형제 노드 선택 previousElementSibling 이전 형제 노드 선택 firstChild 첫번째 자식 노드 선택 lastChild 마지막 자식 노드 선택 부모, 자식 노드 선택을 다음의 웹 화면을 기준으로 해보자! HTML 삽입 미리보기할 수 없는 소스 ✅ parentElement ↓↑ 1 홍길자 안녕! 2019-01-01 ↓↑ 2 이순신 반가워 2019-02-01 ....중략 ✅ nextElementSibling & previousElementSib.. 더보기 [JavaScript] this 연산자 정복해보자 this 연산자 this가 어느 문맥에 있느냐에 따라 가리키는 값이 다르게 나타난다 전역문맥 전역 실행 맥락에서 this는 전역 객체를 참조한다 // 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "MDN"; console.log(window.b) // "MDN" console.log(b) // "MDN" 함수 문맥 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우된다 단순 호출 다음 예제는 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조한다 function f1(){ return th.. 더보기 [JavaScript] 자바스크립트 이벤트핸들러 JSON 형변환 🙋♀️ : 너는 JSON이 뭔지 알아? 👩💻 : 당연하지! 컴퓨터와 웹 서버 간의 데이터를 전달 받을 때 자바스크립트 객체를 JSON형식으로 문자열로 바꾸어주는 걸 말해 JSON ➡️ 문자열 JSON.stringify (data); 문자열 ➡️ JSON JSON.parse (문자열); ⭐ key, value가 모두 (" ")로 묶여야 한다 (반.드.시) 코드의 실행 결과 ⭐ 문자열을 객체로 변경할 때 반드시 지켜야 할 규칙이 있다 JSON.parse("{id: 'aaa123'}"); ⚠️ key와 value값을 ( " " )로 묶지 않는다면 위와 같이 오류가 발생하니 반드시 규칙을 지켜야 한다 //단, 문자열을 객체로 변경할 때 엄격한 규칙 있음 //key와 value를 쌍따옴표로 감.. 더보기 [JavaScript] 자바스크립트를 시작하며.. 자바 스크립트 자바 스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다 스크립트 언어란? 어플리케이션이 실행되는 동안 라인 단위로 해서(인터프리터)되어 실행되는 언어 HTML 문서 내에서 스크립트 언어는 사이에 작성하며 별도의 컴파일 과정이 없다 자바스크립트를 외부 파일로 사용하는 경우(CSS의 외부스타일 시트방법과 동일) 외부 파일 자바 스크립트의 확장자는 "js"이고 파일을 불러오는 방법은 태그 부분이나 기능을 구현할 곳에 삽입 ( ✅ 링크가 삽입된 순서로 .. 더보기 이전 1 다음
