2023.05.30 JS 기본개념

서버

GET - 데이터 읽을 때

POST - 데이터 보낼 때

POST 요청

<form action="/adfadsf(링크)" method="post">
        </form>

ajax

→ 새로고침 없이 GET, POST 요청하는 기능

json

object, array 보내고 싶으면 따옴표해서 문차처럼 만들어야함

→ “{”price”: 5000}” → json

ajax로 GET 요청하는 법

<script>

  $.get('url~~~').done(function(){
    ajax get요청 되었을 때 실행할 코드
  })
</script>

ajax로 POST 요청하는 법

<script>

  $.post('url~~~', {name:'kim'}).done(function(){
    ajax post요청 되었을 때 실행할 코드
  })
</script>

ajax 실패시 특정 코드실행

<script>

  $.get('url~~~').done(function(){
    ajax get요청 되었을 때 실행할 코드
  })
.fail(function(){
		ajax 실패시 실행할 특정코드 입력
})
</script>

오류

404 → 실행 url이 잘 못될 경우

fetch 함수로 get 요청

fetch('<https://codingapple1.github.io/price.json>')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

json

object, array 보내고 싶으면 따옴표해서 문차처럼 만들어야함

→ “{”price”: 5000}” → json

받아온 JSON을 object로 바꿔주는 기능

.then(res => res.json())

array 숫자정렬

오름차순

1. a, b는 array 안의 자료
2. return 오른쪽이 양수면 a를 오른쪽으로
3. return 오른쪽이 음수면 b를 오른쪽으로

let arr = [4, 3, 5, 2, 10];
  arr.sort(function(a, b){
    return a - b
  });
  console.log(arr);

array 자료 원하는 거만 필터

.filter()

.filter() 결과는 변수에 저장해서 써야함

.filter()는 원본 변형 x

let arr = [4, 3, 5, 2, 10];
  let 변수저장 = arr.filter(function(a){
    return a < 4
  });
  console.log(arr);

array 자료 전부 변형하려면

.map()

let arr = [7, 3, 5, 2, 10];

let arr2 = arr.map(function(a){
  return a * 4
});
console.log(arr2);

DOM (Document Object Model)

→ 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을

object 자료로 정리하는 것

아래와 같이 코드를 짜면 오류가 걸린다.

→ 그 이유는 <p id="test">임시글자</p>를 읽기 전에 DOM이 생성되지 않았다.

그래서 자바스크립트는 DOM이 생성된 경우 HTML로 변경이 가능함

(html 파일)

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

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

하지만 자바스크립트 실행을 미루는 방법이 있다.

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

위와 같이 제이쿼리로도 작성이 가능하다.

load 이벤트리스너

load 이벤트리스터를 사용하면 DOM 생성뿐만 아니라 이미지, CSS, JS파일이 로드가 되었는지 체크가 가능

셀렉터로찾은이미지.addEventListener('load', function(){
  //이미지 로드되면 실행할 코드 
})

window도 가능

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

window.addEventListener('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
})

위 코드와 ready의 차이점은

ready()는 DOM생성만 체크하는 함수

위 코드는 모든 파일과 이미지 로드 상태를 체크함. 그래서 오래걸림

Storage

1. localStorage / sessionStorge→ 용량은 5MB / 문자, 숫자만 저장가능→ sessionStorge : 사이트나가면 자동삭제
2. → localStorage : 사이트 재접속해도 유지
3. → 이름 : 값 형태로 저장가능
4. IndexdDB

→ 구조화된 대용량데이터 저장

1. Cookies

→ 보통 로그인 정보 저장

1. Cache Storage

→ html css js 파일 저장하는 곳

저장하려면 localStorage.setItem()

localStorage.setItem('이름', '값');

출력하려면 localStorage.getItem()

localStorage.getItem('이름');

삭제하려면 localStorage.removeItem()

localStorage.removeItem('이름');

localStorage에 array, object를 저장하려면

array/object → JSON으로 바꾸면 저장가능

let arr = [1, 2, 3];
  let newArr = JSON.stringify(arr);

  localStorage.setItem('num', newArr);

JSON → array/object

→ JSON.parse()

let arr = [1, 2, 3];
  let newArr = JSON.stringify(arr);

  localStorage.setItem('num', newArr);
  let 꺼낸거 = localStorage.getItem('num');
  
  console.log(JSON.parse(꺼낸거)[0]);

sessionStorage 사용법

let arr = [1, 2, 3];
  let newArr = JSON.stringify(arr);

  sessionStorage.setItem('num', newArr);
  let 꺼낸거 = sessionStorage.getItem('num');
  
  console.log(JSON.parse(꺼낸거)[0]);

localStorage 수정하려면

1. 자료꺼냄
2. 꺼낸 거 수정함
3. 다시 넣음

스크롤 돠면 이미지는 화면에 고정

→ position: sticky

1. fixed와 유사
2. 조건부 fixed
3. 스크롤을 할만한 부모 박스가 있어야 함
4. top등 좌표속성과 함께 사용해야 보임

mousedown

mouseup

mousemove

마우스 좌표