[JavaScript] Chap.2

2021. 11. 25. 17:50

[JavaScript] Chap.2

반복문

- 단순 for문 사용

var = 사이즈 = [26,28,30,32,34,36];

for (var i = 0; i < 사이즈.length; i++) {
  var 템플릿 = `<option>${사이즈.[i]}</option>`;
  $('#option2').append(템플릿);
}

- foreach문 사용

var = 사이즈 = [26,28,30,32,34,36];

사이즈.forEach(function(i){
    // 6번 반복 해줌
    // i 값은 사이즈 안에있는 하나하나의 데이터
    var 템플릿 = `<option>${i}</option>`;
    $('#option2').append(템플릿);
});

sort, filter, map

- sort()

* 기본 sort()는 ㄱ,ㄴ,ㄷ / a,b,c 순으로의 정렬이다.

var arr = [7,3,5,2,40];
arr.sort(function(a,b){
  return a - b // 오름차순 정렬
});

a는 배열의 0번 인덱스, b는 배열의 1번 인덱스 순으로 a와 b가 차례로 (0, 1), (1,2), (2,3).... 순으로 비교하여 양수(+)를 return하면 a를 오른쪽, b를 왼쪽으로 보내고 음수(-)를 return하면 a를 왼쪽, b를 오른쪽으로 보낸다.

** sort() 함수는 기존에 사용한 배열 자체를 변환시킨다. (filter, map은 새로운 배열 만듬)

- filter()

* 자료에서 원하는 부분만 거를 때 사용한다.

var arr = [7,3,5,2,40];
var newArr = arr.filter(function(a){
  return a < 4 // 4 이하인 것만 남김
})

// newArr = [2, 3]

** filter() 함수는 원본 배열을 수정하지 않아서 새로운 변수에 담아서 사용해야한다.

- map()

* 자료들에 똑같은 작업을 할 때 사용한다.

var arr = [7,3,5,2,40];
var newArr = arr.map(function(a){
  return a * 2 // 모든 배열에 x2를 한다.
})

// newArr = [14, 6, 10, 4, 80]

** filter() 함수는 원본 배열을 수정하지 않아서 새로운 변수에 담아서 사용해야한다.

DOM (Document Object Model)

자바스크립트는 HTML문서를 해석할 때, 자바스크립트가 해석할 수 잇는 문법으로 정리를 하는데 Object나 Array형의 자료형에 담아서 정리한다. 때문에 어떤 태그를 찾을 때 document.queryselector('태그') 등의 형식으로 찾을 수 있다. 이런 것을 document object model = DOM이라고 한다.

HTML문서 안에서의 모든 구문은 위에서 아래로 순차적으로 해석을 하게된다. 하여

<script>
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">임시글자</p>

이런식으로 사용하면 에러가 난다. 이유는 ? (<p>태그가 존재하기 전에 미리 자바스크립트에서 <p>태그를 찾았기 때문에 없다고 나옴)

그럼 해결은 ??

<!Doctype>
<html>
<head>
</head>
<body>

<p id="test">임시글자</p>

<script>
  document.getElementById('test').innerHTML = '안녕'
</script>
<script>...</script>
<script>...</script>
<script>...</script>
</body>
</html>

이런식으로 자바스크립트 부분을 body태그 끝나기 직전에 전부 작성하면 위와 같은 에러는 발생하지 않는다.

하지만 이 방법 말고도 또 다른 방법이 있다.

이벤트리스너 ready, load

* ready

- HTML을 다 읽어 들였는지 알려주는 이벤트 리스너가 있다. HTML문서를 먼저 다 읽고난 후에 자바스크립트를 실행 하고 싶을 때 사용한다.

// javascript
document.addEventListener('DOMContentLoaded', function() { // IE9이상 적용
  //DOM생성이 완료되었을 때 실행할 코드 
});

// jquery
$(document).ready(function(){
  //$(document)에 있는 HTML을 다 읽었을 때 실행할 코드 
});

* load

- load라는 이벤트리스너를 사용하면 DOM 뿐만이 아니라 이미지, CSS, JS파일이 로드 됐는지도 확인 할 수 있다. ( * ready는 DOM 생성만 체크, load는 모든 파일과 이미지의 로드상태 체크)

// javascript
document.addEventListener('load', function() {
  //이미지가 다 로드가 되었을 경우 실행할 코드 
});

// jquery
$(document).on('load', function(){
  //이미지가 다 로드가 되었을 경우 실행할 코드 
});

** 주의

$('').load(function(){

});

이런 형태와 같은 load 함수는 jquery 3버전 이상부터는 다른 함수로 사용되기 때문에 완전 다른 함수. (Ajax 용으로 쓰인다.)

AJAX & JSON

* AJAX

서버와의 통신을 비동기로 처리할 수 있게 해주는 것. (GET, POST, PUT, PATCH, DELETE)

$('.btn').on('click', function(){
	$.ajax({
    	url: "url",
    	type: 'GET'
    	}).done(function(data){
    	console.log(data);
    	
    	}).fail(function(error){
    
        }).always(function(){
});

새로고침 없이 데이터 전달 가능.

* JSON

자바스크립트에선 자료를 Object나 Array 형식으로 관리를 하는데, 서버에서 데이터를 전달 할 때, Object와 유사한 JSON이라는 것을 사용한다. JSON은 Object와 비슷하지만 key값에 쌍따옴표를 쳐서 전달한다. 이유는, 데이터를 통신할 때 텍스트 형식이 아니라면 데이터가 중간에 깨질 수 있기 때문...!

{
  "key": "value", 
  "data": "data", 
  "object": "object", 
  "url": "https://www.naver.com",
  "number": 24200
}

하지만, 여기선 문제가 있다.

JSON은 Object처럼 '.'을 통해서 원하는 자료를 꺼낼 수 없다.

그렇기 때문에 변환 작업이 필요하다.

JSON.parse(JSON 데이터)

해당 함수 안에 담긴 데이터는 쌍따옴표가 제거된다.

JSON.stringify(여러분의 오브젝트데이터)

반대로, 해당 함수 안에 담긴 데이터는 Object 자료형에 따옴표를 쳐서 JSON 데이터가 된다.

Hammer.js 이미지 슬라이드

터치해서 이동하는 이미지 슬라이드를 바닐라 자바스크립트로 구현하지 않는 이유

이미지에 touch에 관련된 이벤트리스너를 각각 만들어야 함.
터치 시 X축 좌표를 저장
터시 시작과 끝의 좌표를 연산하여 양수면 오른쪽 음수면 왼쪽 이런식으로 판단
등등

호환성 잡기 또한 매우 귀찮다. (안드로이드, ios 버전 마다 다 다름)

* Hammer.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>

라이브러리 추가한다.

- 처음 도입부

var image = document.querySelectorAll('.slide-box img')[0];
    
var manager = new Hammer.Manager(image);
manager.add(new Hammer.Pan({ threshold: 0 })); // 이벤트가 발동되기 전까지의 값
    
manager.on('pan', function(e){
  //image가 pan 되었을 때 실행할 코드 (터치 후 슬라이드 하는 것, rotate 등 여러가지 있음)
})

- 실행부

manager.on('pan', function(e){
  console.log(e.deltaX) // x 축으로 드래그한 거리
  
  if ( e.deltaX < -1 ){ // 왼쪽으로 드래그 (오른쪽 사진을 볼 때)
      $('.slide-container').css('transform', 'translateX('+ e.deltaX +'px)');      
      if (e.isFinal) { //터치가 끝났을 때
        console.log(e.isFinal)
      }
    }
})

Typewriting (setTimeout)

setTimeout(function(){ 실행할 코드 }, 1000)

<div>
    <button>버튼</button>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam praesentium, voluptate iusto sint atque officiis maxime vel id molestiae velit ullam deleniti ad, vero libero maiores tempora, quasi aspernatur voluptas.</h1>
</div>

<script>

    var h1태그 = document.querySelector('h1');
    var 원래글씨 = document.querySelector('h1').innerHTML;

    $('button').click(function(){
    	애니메이션(h1태그, 원래글씨);
    })

    function 애니메이션(h1태그, 원래글씨){
        h1태그.innerHTML = '';
        for(let i=0; i<원래글씨.length; i++){
            setTimeout(function(){                
                h1태그.innerHTML += 원래글씨[i];
            }, (100 * i));            
        }
    }

    </script>

** 유의

한글처럼 IME입력기를 사용해 타이핑하는 언어를 위해 타이핑 애니메이션을 구현하는 라이브러리도 있으니 그것을 이용하길 권장

canvas

이미지처럼 만들어서 사용할 수 있음.

<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas'); // 캔버스 그리기
var c = canvas.getContext('2d'); // 캔버스 작업하기
ctx.fillText('영수증', 10, 20); // 캔버스 안에 글쓰기

'JavaScript' 카테고리의 다른 글

[JavaScript] 함수형 프로그래밍 (일급함수, 고차함수) (0)	2022.03.29
[JavaScript] ES6 chap.3 (0)	2021.12.02
[JavaScript] ES6 chap.2 (0)	2021.11.30
[JavaScript] ES6 chap.1 (0)	2021.11.29
[JavaScript] Chap.1 (0)	2021.11.19

기억보다 기록을