JAVASCRIPT - 중급 2편

* sort()

배열을 정렬하는 함수

ex ) 오름차순

javascript

var arr1 = [7,3,5,2,40];
        arr1.sort(function(a,b) {
            return a - b // 오름차순 정렬
          // 결과값이 양수면 a 를 오른쪽으로 음수면 b를 오른쪽으로
          // ex ) 7 - 3 = 4(양수) >> 3 , 7 로 배열이 정렬
        });

ex ) 내림차순 : 숫자

javascript

var arr2 = [7,3,5,2,40];
        arr2.sort(function(a,b) {
            return b - a // 내림차순 정렬
          // 결과값이 양수면 b 를 오른쪽으로 음수면 a를 오른쪽으로
          // ex ) 3 - 7 = -4(음수) >> 7 , 3 로 배열이 정렬
        });

ex ) 내림차순 : 문자

javascript

var arr3 = [ 'a', 'c', 'b' ]; // 문자는 뒤에있는 글자가 더욱 큰 수를 가진다
// ex) 'a' > 'c' 의 값은 false 가 된다
        arr3.sort(function(a,b) {
            if ( a > b ) return -1; 
            else if ( b > a ) return 1;
            else return 0;
        })
        console.log(arr3); // result : 'c', 'b', 'a'
var arr4 = [ 'a', 'c', 'b' ];
        arr4.sort().reverse(); // 오름차순으로 정렬 후 거꾸로 배치
        console.log(arr4); // result : 'c', 'b', 'a'

* filter()

원하는 자료만 필터링하는 함수

filter()는 반드시 "새로운 변수에 담아서" 사용or출력 해야한다

ex )

javascript

var arr5 = [7,3,5,2,40];
var newArr5 = arr5.filter(function(a) {
  return a < 5 // 배열에서 5보다 작은 요소만 필터링
})
console.log(newArr5); // result : [3,2]

* map()

모든 자료를 변형하는 함수

ex )

javascript

var arr6 = [7,3,5,2,40];
var newArr6 = arr6.map((a) => {
  return a * 4 
})
console.log(newArr6); // result : [28, 12, 20, 8, 160]

* DOM ( Document Object Model )

자바스크립트가 HTML에 대한 정보들(id, class, name , style, inenrHTML...)을 object 자료로 정리한 Model

특징 1. 브라우저는 HTML 문서를 위에서부터 읽으며 DOM을 생성한다

* DOMContentLoaded 이벤트 리스너 (.ready)

HTML을 다 읽은 후에 js를 실행

ex )

document.addEventListener('DOMContentLoaded', function() { 실행할 코드 }) // javascript
$(document).ready(function(){ 실행할 코드 }) // jqeury

javascript 스크립트를 body 내에 가장 하단에 놓는 방법 존재

* load 이벤트 리스너

DOM 생성, img, css js파일 등이 로드됬는지 체크 가능

ex )

셀렉터로 찾은 이미지.addEventListener('load', function() {
//이미지가 로드되면 실행할 코드
} )
window.addEventListener('load', function(){ // javascript (window)
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
})
$(window).on('load', function(){ // jquery (window)
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 
});