XMLHttpRequest(XHR) : 서버와 상호작용하기 위한 객체 - 전체 페이지를 새로고침 하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있음 - XML데이터 통신으로 오해할 수 있음 - 모든 종류의 데이터를 받아올 수 있음 1. XMLHttpRequest 객체 생성하기 // XMLHttpReques생성자 함수를 호출하여 생성한다. const xhr = new XMLHttpRequest(); 2. 요청 전송하기 1) HTTP메소드와 URL정의 → 클라이언트(브라우저)에서 서버로 요청을 보내기 위해선 HTTP메소드와 URL정의하는 것 부터 시작한다. XMLHttpRequest내장함수인 open()을 사용함 ! xhr.open("GET","/posts"); ☞ open() 함수 : 첫 번째 ..
this 란? : Object(객체)를 참조하는 키워드이다. 1. window객체가 바인딩 된 경우(this는 기본적으로 window를 바라보고 있다.) console.log(this) // window 객체 2. DOM요소가 바인딩 된 경우 → HTML DOM요소에서 onclick, onchange 등의 이벤트가 발생할 때 호출하는 함수의 파라미터로 this를 전달하면이벤트가 발생한 HTML DOM 그 차제가 된다. ❗ 콘솔창을 열어 잘 적용되는지 확인해 보자 ❗ 3. Object(객체)가 바인딩 된 경우 → 함수를 정의할 때 함수 내에서 Object(객체) 내에 정의된 다른 키에 접근하려면 this키워드를 통해 접근할 수 있다. Objec(객체) 내에 이미 키로 선언되어 사용 중인 다른 데이터를 활용..
Rest Parameters (나머지 연산자) : 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 기본 구문 > function sum(a, b, ...rest) { // 넣고 싶은 구문 } ※ 주의할 점 1) 함수 하나에 하나의 나머지 매개변수만 존재해야 한다. function sum(...rest1, ...rest2, ...rest3) ❌ function sum(a, b, ...rest) ⭕ 2) 나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다. function sum(...rest, a, b) ❌ function sum(a, b, ... rest) ⭕ 예제 > function sum(...Arrest) { let total = 0; for (const num of Arrest) ..
Class : 객체를 생성하기 위한 틀 1. Class 기본문법 class MyClass { // constructor() : 생성자 함수 constructor() {} // 여러 메소드들을 지정할 수 있음 method1() {} method2() {} } 클래스명은 대문자로 시작하여야 함 클래스는 constructor()이라는 생성자 함수와 같이 쓰임 ▷ constructor() 생성자 함수 : 생성된 객체를 초기화하기 위한 특수한 메소드 (하나의 클래스 안에 하나만 존재할 수 있음) class User { constructor(name,age) { this.name = name; this.age = age; } } ☞ 생성자 함수를 사용하기 위해 new연산자를 사용하여 호출 (하나의 클래스로 여러 개..
1. 배열 구조 분해 할당 let fruits = ["🍇","🍑","🥝","🍓","🍒"]; let [fruit1, fruit2, ...fruit3] = fruits; console.log(fruit1); // 포도가 출력 console.log(fruit2); // 복숭아가 출력 console.log(fruit3); // 키위부터 체리까지의 배열이 출력 // 배열 구조바꿔치기 let str1 = "green"; let str2 = "blue"; // str2에 str1값이 담기고, str1에 str2값이 담김! [str1, str2] = [str2, str1]; console.log(str1); // blue가 출력 console.log(str2); // green이 출력 let strs = ["a","b..
Window 객체는 전역(Global)객체다 1. alert("내용") : 윈도우 화면에 경고 메세지 출력 alert("이것은 alert 창입니다."); 2. confirm("내용") : 진행할지, 종료할지에 대한 진행 여부를 확인 let cheack = comfirm("정말 삭제하시겠습니까?"); document.write(cheack); ☞ 사용자가 확인 또는 취소를 선택함 (확인 누르면 true / 취소 누르면 false 반환 => 사용자가 무엇을 눌렀는지 알 수 있게 함) 3. prompt("내용") : 문자열을 입력받을 수 있는 함수 let userName = prompt("당신의 이름을 입력하세요."); if(userName == null) { // 취소 버튼을 클릭 했을 때 } else if..
수학적인 상수와 내장 함수를 가진 객체 1. Math.round(숫자) : 숫자가 소수면 반올림 해줌 Math.round(4.9); // 5를 반환 Math.round(4.7); // 5를 반환 Math.round(4.2); // 4를 반환 Math.round(-3.3); // -3을 반환 2. Math.ceil(숫자) : 무조건 올림처리 해줌 Math.ceil(4.9); // 5를 반환 Math.ceil(4.3); // 5를 반환 Math.ceil(3.5); // 4를 반환 Math.ceil(-1.2); // -1를 반환 (소수점만 제거!) 3. Math.floor(숫자) : 무조건 내림처리 해줌 Math.floor(4.9); // 4를 반환 Math.floor(4.2); // 4를 반환 Math.fl..
데이터 타입에 상관없이 유일한 데이터를 저장할 수 있는 객체 Set객체 생성하기 > let mySet = new Set(); Set객체의 중복 데이터 없애주기 > let numArr = [1,2,3,4,5,1,2,6,3,7]; let set = new Set(numArr); let newArr = [...set]; // [1,2,3,4,5]처럼 하나씩 적는 것과 같음 (스프레드 구문) console.log(newArr); // 중복 값을 모두 제외한 후 배열로 출력됨 ! Set객체 메서드 > 1) add() : 데이터 추가 let set = new Set(); let person1 = {name : "green"}; let person2 = {name : "blue"}; let person3 = {nam..
날짜와 시간을 다루는 객체 Date 객체 생성하기 > // 1. new Date(); let now = new Date(); console.log(now); // 대한민국 표준시 기준 현재 날짜,시간 출력 // 2. new Date(year, month, date, hours, minutes, seconds, milliseconds); let d1 = new Date(2022, 11, 1, 8, 30, 10, 0); console.log(d1); // 2022년 12월 1일 08:30:10 출력 // 3. new Date(milliseconds); let d2 = new Date(0); // 1970년 1월 1일 0시 0분 0초 let d3 = new Date(1000); // 1970년 1월 1일 0시..
▷ 배열 요소 변경 - 배열의 요소를 변경할 때, 변경하고자 하는 배열 index로 접근해 새로운 요소를 할당 let fruits = ["Banana","Orange","Apple","Mango"]; fruits[0] = "Kiwi"; 1. toString() : 배열 안의 모든 문자를 쉼표를 이용해 모두 결합해서 문자열로 반환 2. join("") : 파라미터로 지정한 문자를 이용해 모두 결합해서 문자열로 반환 let fruits = ["Banana","Orange","Apple","Mango"]; fruits.join("*"); 3. pop() : 배열에서 맨 끝 요소를 제거 4. push("") : 배열에서 맨 끝 요소 추가 5. shift() : 배열에서 맨 앞 요소를 제거 6. unshift("..