본문 바로가기

STUDY/javascript29

[JavaScript] Switch 문법 if else 문법 대신 쓸 수 있는 switch라는 문법이 있다.if else 문법으로도 모든 걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch 문법을 사용한다. switch 문법 사용법// 문법switch (변수){ case 값1 : 실행문; break; case 값2 : 실행문; break; case default : 실행문;}// 사용법let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break; case 4 : alert('변수가 4네요'); break; case default : alert('아무것도 해당 안 됨'); break; }▲ switch의 소괄호에는 조.. 2024. 10. 24.
[JavaScript] 캐러셀에 스와이프 기능 만들기 & 터치 이벤트 보호되어 있는 글 입니다. 2024. 10. 23.
[JavaScript] 스크롤 위치에 따라 변하는 애니메이션 보호되어 있는 글 입니다. 2024. 10. 22.
[JavaScript] position : sticky 활용하기 보호되어 있는 글 입니다. 2024. 10. 21.
[JavaScript] localStorage 브라우저에는 저장 공간이 여러개 있다.크롬 개발자 도구의 Application 탭에 들어가면 확인할 수 있다.[Local Storage / Session Storage] : key : value 형태로 문자, 숫자 데이터 저장 가능[Indexed DB] : 크고 많은 구조화된 데이터를 DB처럼 저장 가능[Cookies] : 유저 로그인 정보 저장 공간[Cache Storage] : html, css, img 파일 저장해 두는 공간 Local Storage / Session Storage는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB까지만 저장 가능하다.Local Storage는 브라우저에 재접속해도 영구적으로 남아 있어 유저가 브러우저 청소하지 않는 이상 반영구적으로 데이터 저장이 .. 2024. 10. 18.
[JavaScript] DOM 개념 정리 & load 이벤트 보호되어 있는 글 입니다. 2024. 10. 17.
[JavaScript] array에 자주 사용하는 sort, filter, map 함수 sort()- 배열의 요소를 정렬하는 함수.- 배열의 요소들을 문자열로 취급하여 기본적으로 오름차순 정렬을 한다.- 원본 배열을 변경한다.[숫자]var array = [7, 3, 5, 2, 40];array.sort();console.log(array); // [2, 3, 40, 5, 7] 출력▲ 오름차순 정렬인데 위와 같이 결과가 나오는 위유는 sort()는 배열의 요소를 문자로 취급해서 정렬하기 때문이다.var array = [7, 3, 5, 2, 40];// 숫자를 올바르게 정렬하려면 비교 함수를 사용array.sort(function(a, b){ return a - b // 오름차순 console.log(array); // [2, 3, 5, 7, 40] 출력});array.sort(functi.. 2024. 10. 15.
[JavaScript] Ajax 개념 정리 서버란?- 유저가 데이터를 달라고 요청하면 데이터를 보내 주는 간단한 프로그램- 서버 데이터를 요청할 때는어떤 데이터인지 url로 기재하고어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내 준다.  GET/POST 요청하는 법- GET 요청 : 서버에 있던 데이터를 읽고 싶을 때 주로 사용- POST 요청 : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저 데이터를 DB에 저장해 주는 역할도 함)- PUT, DELETE 요청도 있음 GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다. 주소창에 URL 적으면 그곳으로 GET 요청을 날려 준다. POST 요청을 날리는 방법은 태그를 이용하면 된다. 폼이 전송되었을 때 POST 요청을 날려 준다.그런데 이렇게 GET, POST 요.. 2024. 10. 15.
[JavaScript] <select>, 자바스크립트로 html 생성하는 법, forEach, for in 반복문, arrow function - HTML에서 사용 되는 폼 요솔, 드롭다운 리스트 또는 선택 박스를 생성하는 데에 사용된다.- 요소 안에 여러 개의 요소를 포함하여 각 항목을 정의한다.- 선택시 input, change 이벤트가 발생한다.- value로 유저가 입력한 값을 가져올 수 있다. 상품선택 모자 셔츠 (▲ Bootstrap이 설치되어 있으면 예쁘게 나옴)   Q. 사용자가 셔츠를 선택하면 하단에 사이즈를 선택할 수 있는 박스가 나타나게 하려면? 상품선택 모자 셔츠 95 100 미리 를 하나 더 추가하고, .form-hide 클래스에는 display: none을 주었다.그리고 사용자가 선택한 값이 셔츠이면 form-h.. 2024. 10. 10.
[JavaScript] 문자 중간에 변수 집어넣기 보호되어 있는 글 입니다. 2024. 10. 7.
[JavaScript] Array, Object 자료형, 데이터 바인딩 Array 자료형- 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형var fruit = ['사과', 5000, 'apple']; - 대괄호를 열고 자료를 콤마로 구분해서 넣으면 여러 자료를 엑셀처럼 저장 가능하다.var fruit = ['사과', 5000, 'apple'];console.log(fruit[1]);- array 자료에서 데이터를 꺼낼 때는 대괄화 뒤에 [x]를 붙이면 된다. x번째 자료를 출력해 준다.var fruit = ['사과', 5000, 'apple'];fruite[1] = 7000;console.log(fruit[1]);- array 자료를 수정하거나 추가하고 싶으면 등호를 이용하면 된다.- 여러 자료를 하나의 변수에 저장하고 싶을 때 array를 사용하면 편리하다.  .. 2024. 10. 7.
[JavaScript] 이벤트 버블링, 이벤트 관련 함수들, dataset https://heeccup.tistory.com/72 [JavaScript] UI 애니메이션🌱 들어가기 전에버튼을 누르면 모달창을 띄워 보자.로그인 로그인하세요 닫기 .black-bg { display: none; width : 100%; height : 100%; padding: 30px; background : rgba(0,0,0,0.5); position : fixed; top: 0; left: 0; z-index : 5;heeccup.tistory.com이전 포스팅에서 모달창을 하나 만들어서 띄웠었다. 오늘은 모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해 보자.  (생략) ▲ 모달창 HTML 부분이다. 모달창 오픈할 때 show-modal 클래스명을 넣어서.. 2024. 9. 30.