Javascript [정리 중]

querySelector()

const tag = document.querySelector("tagname");
const id = document.querySelector("#idname");
const class = document.querySelector(".classname");

• 해당 element 중 맨 처음 것을 가져오고, 없으면 NULL 을 반환한다.
• getElementBy() 보다 효율적이다.

const container = document.querySelector("#title");
const matches = container.querySelectorAll("div.highlighted > p");

• 해당 element 를 모두 가져올 때는 querySelectorAll()을 사용한다.
• id가 test인 곳에서 div의 highlighted 클래스 내 p 태그의 노드 리스트를 반환한다.
• querySelectorAll()[0]처럼 인덱스를 사용하여 접근한다.

<div class="user-panel main">
  <input name="login">
</div>


const element = document.querySelector("div.user-panel.main input[name=login]");

forEach

inputArray.forEach(function(element, index, array) {});

const body = document.querySelector("body");
const title = document.createElement("h1");
body.appendChild(title);
title.innerHTML = "Hello!";
title.style.color = "rgb(255,255,255)"; //"#FFFFFF";

• 태크 body의 내용을 변수 body에 담는다.
• 태크 h1의 내용을 title에 담는다.
• 변수 body에 변수 title의 내용을 추가하고 수정한다.

const title = document.querySelector("h2");
title.innerHTML = "HOLA!";
title.style.color = "green";

• 태크 h2의 내용을 title에 담아 수정한다.

function init() {
}

const init = () => {
}

• 둘의 차이는?

Date 객체

const now = new Data(); // 객체
const now2 = new Date("yyyy-mm-dd:hh:mm:ss+0900"); // +0900:대한민국 표준시

now.getTime(); // 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 millisecond로 표현
now.getDate(); // 1:1일, 2:2일..
now.getDay(); // 0:월요일, 1:화요일..
now.getMonth(); // 0:1월, 1:2월..

Math.floor()

• 소수점 아래 자리를 삭제한다.
• floor()는 Math의 정적 메서드이므로 사용자가 생성한 Math 객체의 메서드로 호출할 수 없다.

setInterval()

setInterval(func, 1000);

func 함수를 1초마다 주기적으로 호출한다.

.value 속성

document.querySelector(".className").value;

className을 갖는 select 태그 내 option의 value를 반환한다.

localStorage.getItem()

localStorage.getItem("keyName");

Local Storage에서 keyName을 갖는 Key의 Value를 반환한다.

.selected 속성

const selected = localStorage.getItem("keyName");
document.querySelector(`option[value="${selected}"]`).selected; // true or false

속성을 명시하면 true, 그렇지 않으면 false

JS 쓰는 이유

• HTML 조작과 변경

Selector

document.getElementByClassName()[0].~

• ClassName()은 Id()와 달리 모든 태그를 찾기 때문에 인덱스를 사용한다.

addEventListener

document.getElementById().addEventListener('click', function(){})

• 'click'하면 selector를 function()한다.
• event : click, keydown, scroll, mouseover

onclick=""

<button onclick=""></buttom>

• click하면 ""안의 JS 실행시킨다.

UI 만드는 방법

• 모달, Alert, Tap, Tool tip, Sub menu
• 미리 디자인 해놓고 숨긴다.
• JS로 원할 때 보여준다.

function

• 긴 코드를 한 단어로 축약 가능하다.

Tip

• JS가 HTML보다 위에 있으면 에러가 발생한다.

JQuery

• Library
• JS와 다르지 않다.
• ReactJS가 JQuery보다 HTML 조작을 더 잘 한다.
• JQuery로 만든 사이트가 많아서 안 배울 수는 없다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
밑에서 부터 구현

• CDN은 다른 사이트가 호스팅해주기 때문에 불안정하다.
• HTML은 위에서 부터 한 줄씩 읽기 때문에 header에서 선언하면 읽기를 멈추고 다운을 받는다.

document.getElementById('id')
document.querySelector('#id').innerHTML = "Hello";
$('#id').html("Hello");
$('#id').css('color','pink');
$('#id').attr('src','');

• querySelector()는 한 개밖에 찾지 못하고 맨 처음 인덱스를 가져온다.

$('.class').on('click', function(){})
$('.class').click(function(){})

• addEventListener('click', funciton(){})
• 이름이 같은 selector를 인덱싱 할 필요없이 한꺼번에 수정할 수 있다.
• toggle()[hide()/show], slideToggle(), fadeToggle()

<input id=test>
$('#test').val() 

• input value

모달

• 팝업은 창을 하나 더 띄었으나 모달은 실제로 더 띄우지 않고 느낌만 준다.

=

1 == '1' // true
1 === '1' // false

preventDefault()

$('.form').on('submit', function(e) {
    e.preventDefault();
}

• form의 submit, 전송을 막는다.

var

• undefined (Not error)
• 생존범위 function
• for문 범위 이상으로 넓어진다.

let

• 재선언 불가
• uninitialized (Error)
• 생존범위 {}
• for문 범위 내에서 참조 가능하다.

const

• 재할당 불가

typeof()

• number
• string
• string이 적어도 하나 있으면 number와 연산해도 string 연산을 한다.

Array, Object

let arr = ['BMW', 520]; // 여러가지 자료형 저장
console.log(arr[0]);

let obj = { brand : "BMW", model : 520 }; // key : value
console.log(obj.brand);
console.log(obj.['brand']);

• 인덱스 범위를 넘어가면 undefined
• arr.push()

form, input, change event

• input event : input값이 바뀔 때
• change event : input값이 바뀌고 focus를 잃을 때

$('#option1').on('change', function () {
    if ($('#option1').val() == '셔츠')
        $('.size-select').show();
});

Grave accent

• ` (역따옴표)

let temp = `<option>${size[i]}</option>`;


let temp1 = "<option>S</option><option>M</option><option>L</option>"
let temp2 = `<option>S</option>
             <option>M</option>
             <option>L</option>`             

Hoisting

• 변수, 함수 선언을 항상 위로 올려서 해석한다.

test

/abc/.test('abcdef')
/[A-z]/.test('a')
/\S+@\S+\.\S+/.test('email') // 특수문자 포함 모든 문자 1개, + 붙으면 여러 문자

• true

Event Bubbling

• 이벤트가 상위 요소로 퍼지는 현상이다.
• 자식 태그를 누르면 그 위의 모든 부모 태그를 누른 것과 같다.
• eventListener를 만들 때 주의한다.

$('.black-bg').click(function (event) {
      // event.target; // 지금 실제 클릭한 요소
      // event.currentTarget; // 지금 이벤트리스너가 있는 곳, $(this);
      //if (event.target == event.currentTarget)
      if (event.target == this)
        $('.black-bg').hide();
    })

Data Binding

• 데이터를 JS로 HTML에 넣는 작업

Array.forEach(function(element){});

let size = [85, 90, 95, 100, 105, 110, 115];

size.forEach(function(e){
    let temp = `<option>${e}</option>`;
    $('#option2').append(temp);
});

• 배열 개수만큼 반복한다.
• 콜백함수의 매개변수는 배열의 각 원소이다.

웹 개발 방식

1. 서버가 HTML을 완성해서 사용자에게 보내는 방식
2. 서버가 빈 HTML과 데이터를 보내고, 브라우저에서 JS를 이용해서 채우는 방식

• AJAX를 통해 서버에서 데이터를 가져온다.

sort

let a = [20, 3, 1];
a.sort(); // 1, 20, 30


a.sort(function(a, b) { // a, b는 배열의 원소
    return a - b; // 1, 3, 20
    // +를 반환하면 a를 오른쪽, b를 왼쪽으로 보낸다
})

• 오름차순 : a - b;
• 내림차순 : b - a;
• 기존 배열을 변형시킨다.

a.sort(function (a, b) {
    let result = a.title > b.title;
    if (result == true) {
        return 1;
    } else {
        return -1;
    }
})

• 문자 비교는 boolean과 양수, 음수를 활용한다.

filter

let a = [7, 3, 5];
let a2 = a.filter(function(e) {
    return e < 6; // 3, 5
}

• 기존 배열을 변형시키지 않기 때문에 새로운 변수를 만들어야 한다.

map

let a = [7, 3, 5];
let a2 = a.map(function(e) {
    return e * 2; // 14, 6, 10
}

spread operator

let b = [3, 9, 1, 7, 5];
let c = [...b]; // 3, 9, 1, 7, 5

DOM

• Document Object Model
• JS가 HTML을 조작하기 위해 해석할 수 있는 문법으로 정리한 것을 의미한다.
• Object 자료형을 사용한다.
• 브라우저는 JS로 HTML을 조작하기 위해 HTML을 읽을 때 DOM을 만든다.

<script> //ERROR : p태그에 대한 DOM이 생성되기 전
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">Hello</p>

• JS는 DOM이 생성되어 있어야 HTML을 변경할 수 있다.

<script>
  $(document).ready(function(){
    document.getElementById('test').innerHTML = '안녕'
  });
</script>

<p id="test">Hello</p>

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

AJAX

• 서버에 데이터를 요청(GET, POST)해서 새로고침 없이 받아온다.
• 프론트엔드 개발자
• 상품 더보기, 댓글 더보기 등

    <script>
        $('.btn-primary').click(function () {
            $.ajax({
            url: "",
            type: "GET",
            }).done(function (data) {
            $('#id').html(data);
            }).fail(function(){
            
            }).always(function(){
            
            });
        });
    </script>

GET

• URL을 입력해서 요청, 읽기

POST

• URL 변경 없이 정보를 숨겨 전달 또는 요청, 쓰기

JSON

{"brand" : "Hyundai", "model" : "Kona", "price" : 30000, "img" : "https://codingapple1.github.io/kona.jpg"}

• 데이터를 주고 받을 때 텍스트 형식이 아니면 중간에 깨질 수 있기 때문에 object형의 key값에 따옴표를 붙인다.

let obj = JSON.parse(json);
let json = JSON.stringfy(obj);

• object처럼 .을 찍어 원하는 자료를 가져올 수 없기 때문에 변환 과정이 필요하다.
• jQuery의 ajax함수를 사용하면 JSON을 자동으로 object로 변환해준다.

Hammer.js

<script>
    let img1 = document.querySelectorAll('.slide-box>img')[0];

    let manager = new Hammer.Manager(img1);
    manager.add(new Hammer.Pan({
      threshold: 0
    }));

    // pan event
    manager.on('pan', function (event) {

      if (event.deltaX < 0) {
        $('.slide-container').css('transform', `translateX(${event.deltaX}px)`);
        
        if (event.isFinal) { // 마우스를 놓으면

          $('.slide-container').addClass('transforming');
          $('.slide-container').css('transform', `translateX(-100vw)`);
          setTimeout(function () {
            $('.slide-container').removeClass('transforming');
          }, 500);
        }
      }
    });
</script>

• 터치 기능이 있는 슬라이드