AJAX란? AJAX는 Asynchronous JavaScript And XML의 약자로, 웹 페이지를 새로 고치지 않고도 서버에 데이터를 비동기적으로 요청하거나 전송할 수 있는 웹 개발 기술이며 XML이 들어가 있지만, 현대 웹에서는 JSON 형식의 데이터를 주고받는 데 더 많이 사용됩니다. // html을 추가할 root 불러오기 const root = document.getElementById('root') // fetch에 들어갈 주소 지정과 method설정 const url = '데이터를 받아올 요청주소' const opt = { method: 'GET' } fetch(url, opt) // 주소를 요청하면 // resp Response 형태로 오게되는데 // resp는 응답상태,헤더,본문등을 ..
JAVASCRIPT html코드를 가져와 객체로만들고 리스트화하기
먼저 nodeList 와 Array의 차이를 알아보자 nodeList html태그를 불러오기 위해 document.querySelectAll로 가져오면 배열형식으로 값이 반환되는데 이 배열이 nodeList라고 한다 console.log(document.querySelectorAll('.human')) 출력결과를 보자 노란 형광팬 친곳을 펼쳐보면 nodeList가 가지고 있는 함수들이 보인다 forEach등 보이는 함수 안에서만 사용이 가능한 반면 array는 많은 함수를 가지고 있고 범용성이 좋아 querySelectorAll로 가져오게되면 Array로 형변환 해주는것도 좋아보인다. Array 기본적으로 스크립트에서 배열을 만들거나 querySelectorAll로 가져온 nodeList를 Array.f..
비교 정의 script에서의 비교 연산자는 java와는 다른점이 많다 script에서는 자료형이 명확하지 않기도하고 빈문자열이면 0과 같은 취급을 받는다 예시코드로 말하자면 이러하다 // 1) 타입이 다르지만 비교가 가능하다 const s1 = '' const s2 = 0 const s3 = [] const s4 = '0' console.log(s1 == s2) // 빈 문자열과 0은 같다 console.log(s2 == s3) // 0과 빈 배열은 같다 console.log(s1 == s3) // 빈 문자열과 빈 배열은 같다 console.log('======') console.log(s2 == s3) // 0과 빈 배열은 같다 console.log(s2 == s4) // 0과 '0'은 같다 conso..
객채 java의 객채와 같으며 key갑과 value값을 가진다 생성 코드는 이러하다 const s5 = { name: '이지은', age: 31 }; const s6 = { name: '여진구', age: 29 }; 앞의 name이 key값 : 뒤의 값이 value값이 된다 리스트 이렇게 만들어진 객체들을 리스트에 담고 싶다면 아래의 코드를 보자 const s4 = [s5, s6]; 리스트는 [ ] 를 사용하고 객채는 { } 사용하는걸 잊지말자. 함수 함수만드는 방법은 3가지이다 1. arrow function 2. 객채에 함수입력 3. function arrow function () –> { } 는 lambda in JAVA이므로 햇갈리지 말자 const s8 = () => { console.log('..