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('..
index형식이라 사진이 흘러가는 느낌없이 사진이 전환되는 느낌으로 연출된다 영상 CSS * { box-sizing: border-box } body { font-family: Verdana, sans-serif; margin: 0 } .mySlides { display: none } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: aut..
기본 형식이란 사진을 길게 나열하여 버튼을 누를시 left값을 주어 사진이 부드럽게 흘러가는 효과를 보여 줄 수 있다. 영상 위 동영상 처럼 흘러가는 형식의 이미지슬라이드의 코드는 이러하다 CSS /* 초기화 */ * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style-type: none; } /* 보여줄 구간의 높이와 넓이 설정 */ #slideShow { width: 500px; height: 300px; position: relative; margin: 50px auto; overflow: hidden; /*리스트 형식으로 이미지를 일렬로 정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은 hidden으로 숨겨줘야됨*/ ..
var var 키워드로 선언된 변수는 함수 레벨 스코프(function-level scope)를 가집니다. 즉, 변수는 선언된 함수 내에서, 또는 함수 외부에서 (전역 스코프에서) 접근 가능합니다. 또한 var로 선언된 변수는 재선언 및 재할당이 가능합니다. let let 키워드로 선언된 변수는 블록 레벨 스코프(block-level scope)를 가집니다. 즉, 변수는 선언된 블록 (예: if 문, for 문 등의 중괄호 {} 내부) 내에서만 접근 가능합니다. let으로 선언된 변수는 재할당은 가능하지만 재선언은 불가능합니다. const const 키워드로 선언된 변수도 블록 레벨 스코프(block-level scope)를 가집니다. 하지만 const로 선언된 변수는 재선언 및 재할당이 모두 불가능합니..