1. Array와 Object
Array : 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형
var array = ['A',520,'white'];
Array에서 자료를 뽑는 법 : [] 안에 자료번호를 넣음
console.log(array[1]);
Object : 마찬가지로 여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형. 자료 왼쪽에 자료의 이름과 콜론을 붙여서 저장.
즉, key와 value 형태로 저장한다.var obj = {brand : 'BMW', model : 520};
Object에서 자료를 뽑는 법 : object이름.key이름
console.log(obj.brand);
Array안에 Object 담기
var arrayObject = [{brand:'BMW'},{model:520}]; // arrayObject[0] = {brand:'BMW'}; // arrayObject[0].brand = 'BMW';
데이터 바인딩 : 자바스크립트로 데이터를 HTML 안에 넣는 작업.
2. Form - input, change 이벤트
<input><select><textarea>태그는 form 안에서 사용자가 값을 입력할 수 있는 공간을 제공하는 input 역할을 한다. 이러한 태그들에 사용자가 값을 입력하거나 변경했을 때 체크할 수 있는 이벤트가 change 와 input 이벤트이다.$('input').on('change',function(){ //input 값이 변경되었을 때 실행할 코드 }); $('input').on('input', function(){ //input값이 변경되었을 때 실행될 코드 });
change : change는
<input>태그인 경우에, 값을 변경 후 입력란 바깥을 클릭할 때 실행된다. 또한<select>태그인 경우엔 값이 변경될 때 실행된다.input : input은 값잉 변경될 때마다 실행된다.(타이핑 하는 도중에도 실행됨)
3. HTML 동적 생성
javascript로 HTML을 만드는 법
append()
var template = '<p>추가할 HTML</p>'; $('div').append(template); //div 내부에 template을 추가
html()
$('div').html(template); // html() 사용시 내부를 통째로 template으로 바꿈.append는 추가시, html은 교체용으로 사용
javascript로 HTML 작성 시 활용할 수 있는
역따옴표(Backquote)문법var text = '원래 문자안에 엔터키 사용 불가'; var text2 = `역따옴표를 사용하면 문자안에 엔터키 사용 가능`; // ES6 신문법이므로 브라우저 호환성을 생각한다면 Bable 등을 이용하여 옛날 문법으로 바꾸는 과정을 거쳐야 함.
역따옴표 안에 변수를 집어넣고 싶다면?
${} 기호를 사용하여 집어 넣기.var template = `<option>${size[i]}</option>`;
4. forEach 반복문
비슷한 형태의 HTML이 많이 필요한 경우 반복문 사용.
array 안에 있는 자료들을 하나씩 뽑아내고 싶은 경우 forEach 사용하면 좋다.
forEach 왼쪽에 있는 자료에 저장된 데이터 개수만큼 function 내부의 코드를 반복해준다.
var size = [26,28,30,32,34,36]; size.forEach(function(i){ console.log(i); //i는 size 라는 array 안에 저장된 각각의 데이터. });
Arrow Function
function이라는 키워드 대신, => 화살표 이용하는 법.
파라미터가 하나면 소괄호 생략 가능.
함수의 중괄호 내에 return 한 줄 밖에 없다면 중괄호도 생략 가능.
function 문법 내에선 this라는 키워드의 값이 새롭게 변한다. 하지만 arrow function 의 경우, 그냥 함수 바깥에 있던 this를 그대로 사용함.
따라서 function 내에서 this값을 쓰고 싶을 때, arrow function 을 쓸지 고려해보자.size.forEach((i)=>{ console.log(i); });
5. sort,map,filter (정렬 기능)
sort() : 자료가 Array 형태일 때, 정렬하는 함수.
var array = [7,4,5,2,40]; array.sort(); // array가 문자순으로 정렬 됨 [2,3,40,5,7];
sort 함수를 숫자 오름차순 정렬에 사용하려면?
array.sort(function(a,b){ return a-b; });
- 참고)
sort 함수는 양수를 return 하면 a를 오른쪽, b를 왼쪽으로 보내고, 음수를 return 할 땐 a를 왼쪽, b를 오른쪽으로 보낸다.
filter() : 자료가 Array일 때, 원하는 것만 거르고 싶을 때 filter 함수
var array = [7,3,5,2,40]; var newArray = array.filter(function(a){ return a<4; }); // array 중에서 4이하인 수만 거르고 싶을 때
- 참고)
filter 함수 안의 a라는 파라미터는 array 자료 안에 있던 하나하나의 데이터.
return 오른쪽에 조건식을 적으면 조건식이 참인 경우에만 자료를 return함.
filter 함수의 결과는 새로운 변수에 담아서 써야 함.(newArray)
filter 함수는 sort() 함수와 다르게 원본을 수정하지 않아 새로운 변수에 담는 것.map() : array 자료들에 똑같은 작업을 시킬 때, map 함수
var array = [7,3,5,2,40]; //각각의 데이터에 전부 2를 곱해주고 싶다면? var newArray = array.map(function(a){ return a*2; });
- 참고)
map 함수 안의 파라미터 a는 array 자료 안에 있던 하나하나의 데이터.
return 오른쪽에 array 자료에 적용하고 싶은 수식을 씀.
map 함수의 결과는 filter 함수 처럼 새로운 변수에 값을 담아줘야 함.
보통 기존 array를 조작한 새로운 array를 만들 때 사용함.
6.DOM & ready, load 이벤트 리스너
DOM
DOM = Document Object Model
Javascript가 HTML에 대한 정보들을 Object 자료형으로 정리해서 사용.
따라서 브라우저는 HTML 문서를 읽을 때 DOM을 생성한다.
Javascript는 DOM이 생성되어야 HTML을 변경할 수 있다.
DOM이 생성되기 전에 HTML을 변경하려고 하면 에러가 나는데, 이를 해결하기 위해 jQuery 에서는 ready 라는 이벤트 리스너를 사용함.ready()
ready 이벤트 리스너는 HTML을 다 읽어들였는지를 알려줌.
현재 페이지에 있는 HTML을 다 읽고 DOM을 만든 후 내부 코드를 실행함.$(document).ready(function(){ //$(document) 에 있는 HTML 을 다 읽었을 때 실행할 코드 });
- 참고)
<script>태그를<body>태그가 끝나기 전에 전부 작성하면 굳이 ready 이벤트 태그를 작성하지 않아도 에러가 나지 않음.즉, 자바스크립트 위치를 내가 정할 수 없을 경우에만 유용함.load()
load 이벤트 리스너는 DOM 생성 뿐 아니라, 이미지,CSS,JS파일이 로드가 되었는지도 전부 체크함.$('img').on('load',function(){ //이미지가 다 로드되었을 경우, 실행할 코드 });
- 참고) ready() 이벤트 리스너는 DOM 생성만 체크. 모든 파일과 이미지의 로드상태를 체크하고 싶을 때는 load() 이벤트 리스너를 사용하자.
이미지 등 로딩이 완료되면 동작시켜주는 UI를 만들고 싶을 때 사용.
$('').load(function(){});이렇게는 쓸 수 없음. jQuery 3버전 이상에서는 load() 함수는 Ajax 용으로 쓰이기 때문이다.참고) ready 이벤트 리스너의 자바스크립트 버전
document.addEventListener('DOMContentLoaded',function(){});
7. Ajax 요청
Ajax란?
서버에 요청 하여 데이터를 가져오거나 내보내고 싶을 때, 새로고침 없이 데이터를 주고받을 수 있게 도와주는 것.- GET 요청 : URL에 여러가지 정보를 추가하여 서버로 데이터 요청.보통 웹페이지를 읽거나 데이터를 받아올 때 많이 사용.
- POST 요청 : 원하는 데이터를 서버로 전송할 수 있음. 로그인, 블로그 발행처럼 정보를 전송할 때 많이 사용. GET과 달리 정보를 다른 곳에 숨겨서 전달함.
jQuery로 Ajax 요청
{} Object 안에 url, type 두개가 필수로 들어감.
url : 데이터 요청할 서버 URL
type : 요청의 종류(GET or POST)$.ajax({ url : 'https://naver.com', type : 'GET' });
요청결과(DATA)를 출력해보기
ajax 뒤에 .done() 함수를 붙인 뒤, 콜백함수를 추가함.
콜백함수에 파라미터를 넣은 후 출력하면, 그것이 바당온 데이터임.$.ajax({ url : 'url주소', type:'GET', }).done(function(data){ console.log(data); });
fail, always 함수
$.ajax({ url : ' ', type : 'GET', }).fail(function(jqXHR,textStatus,errorThrown){ //요청 실패시 실행할 코드 }).always(function(){ //실패하든 성공하든 실행할 코드 })
JSON 자료형
JSON은 object의 키 값에 전부 따옴표를 쳐서 만들어낸 자료형.
보통 서버에서 데이터를 보내줄 때, object,array 대신 자주 활용하는 자료형임.
데이터를 주고 받을 때, 텍스트형식이 아니면 데이터가 중간에 깨질 수 있다. 따라서 object 에 따옴표를 쳐서 텍스트 비슷하게 만들어서 보내는 것.
그런데 JSON은 object처럼 점을 찍어서 원하는 자료를 꺼내올 수 없다.
따라서 JSON 자료를 받아오면 object로 변환하는 과정이 필요함.
단, jQuery ajax 함수를 쓰면 JSON을 가져와도 알아서 object로 변환해준다.
var object = JSON.parse(json data);
이렇게 하면 따옴표가 제거된 object가 생성됨.
var json = JSON.stringify(object data);
이렇게 하면 반대로 objecet 자료형에 따옴표가 생성되어 json 데이터가 됨.
8. 애니메이션
스크롤 위치에 따라 opacity가 변하는 애니메이션 만들기
$(window).scroll(function(){ var height =$(window).scrollTop(); // 현재 창의 스크롤 높이를 알려줌. // height가 650~1150까지 스크롤바를 내리면 // 첫째 카드의 opacity를 1~0으로 서서히 변경하기 // y는 스크롤바가 움직일 때 1~0이 되는 가변적인 opacity 값 // 1차함수 수식을 이용하여 구함. 높이가 650일 때 opacity=1, 1150일 때 opacity=0 var y =-1/500*height + 115/50; $('.card-box').eq(0).css('opacity',y); });
스크롤 위치에 따라 카드 사이즈가 0.9배 정도로 서서히 작아지는 애니메이션 만들기
$(window).scroll(function(){ var height =$(window).scrollTop(); //마찬가지로, height=650일 때는 transform:scale(1.0), height=1150일 때는 transform:scale(0.9) 를 1차함수 수식에 이용하여 z 구함 var z = (-1/5000)*height + 565/500; $('.card-box').eq(0).css('transform',`scale(${z})`); });
더 부드러운 애니메이션 동작을 원한다면?
.card-box{ transition:all 0.2s };
Hammer.js 이용한 슬라이드 터치 기능
var image1 = document.querySelectorAll('.slide-box img')[0]; //터치를 구현할 HTML 요소를 찾아줌. var manager = new Hammer.Manager(image1); //new Hammer.Manager() 함수에 그 HTML 요소 담기 manager.add(new Hammer.pan({threshold:0})); //내가 사용할 이벤트를 add 함수로 등록하고, threshold 값을 셋팅. // threshold : 이벤트 발동되기 까지의 역치 값. manager.on('pan',function(e){ //image1이 pan 되었을 때 실행할 코드 //pan : Hammer.js가 제공하는 '터치 후 슬라이드 했을 때'를 체크해주는 이벤트. if(e.deltaX<-1){ $('.slide-container').css('transform','translateX('+e.deltaX+')'); //e.deltaX는 X축 드래그한 거리를 나타냄 //e.deltaX가 -1 보다 작다는 것은 왼쪽으로 드래그했다는 것. //따라서 이미지를 왼쪽으로 슬라이드 시, //이미지 담고 있는 container를 deltaX 만큼 왼쪽으로 이동시킨다는 것. if(e.isFinal){ //터치가 끝날 때(마우스를 놓으면),이미지2로 서서히 변하게. //'transforming' 클래스는 transition : transform 0.5s $('.slide-container').addClass('transforming'); $('.slide-container').css('transform','translateX(-100vw)'); //transition이 0.5초 간 작동된 뒤 transforming 클래스 제거 //setTimeout 사용. setTimeout(function(){ $('.slide-container').removeClass('transforming'); },500); } } });
한글자씩 출현하는 typewriting 애니메이션
버튼을 누르면h1태그 안 원래 내용을 삭제 후 0.5초마다 한글자씩 출현하게 함.var h1tag = document.querySelector('h1'); var original = document.querySelector('h1').innerHTML; //원래글씨 : original $('button').click(function(){ $('h1').html(''); //h1 안에 있던 내용 지우기 for(let i = 0;i<original.length;i++){ setTimeout(function(){ h1tag.innerHTML = h1tag.innerHTML+original[i] },i*500); } });주의! for문 안에 변수 i를 var 형태로 쓰면 undefined 에러가 남. let으로 써주어야 한다.
