728x90 반응형 웹개발109 [자바스크립트] Ajax GET/POST 서버에 데이터를 보내거나(POST) 서버에서 데이터를 읽을 때(GET) 어떻게 GET/POST를 요청하는가? AJAX를 이용해서 get,post요청을 해보자. $.get('https://codingapple1.github.io/price.json').done(function(data){ console.log(data); }).fail(function(){ console.log('실패'); }); $get('url주소').done()으로 get요청할 수 있다. done()에는 콜백함수를 넣는데, done(function(data)){})와 같이 인자를 넣어주면, 해당 변수에 데이터가 담기게 된다. GET을 실패할 경우에는 .fail()이 실행된다. 더보기 버튼 만들기 더보기 버튼을 누르면, 서버에서 물품정.. 2023. 2. 2. [자바스크립트] html생성하기, forEach, for in 반복문 var a=document.createElement('p'); a.innerHTML='ddd'; document.querySelector('#test').appendChild(a); /*---------------------------------------*/ var 템플릿 = '안녕' document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿); $('#test').append(템플릿); document.createElement 메소드를 이용해서 html을 생성, appendChild 메소드를 이용해서 생성한 html을 원하는 요소 안에 넣을 수 있다. 이 방법 말고도, 변수에 html내용을 문자열로 작성해놓은 다음, .html 혹은 .ap.. 2023. 2. 2. [자바스크립트] form-select 상품선택 모자 셔츠 이런 select 폼이 있다. 유저가 select에서 어떤 것을 선택했는지 어떻게 알 수 있을까? $('.form-select').val(); .val()로 알 수 있다. 이제 input 이벤트리스너를 활용해서 상품이 "셔츠" 가 선택될 때, 사이즈 선택 select form이 나오도록 해 보자. 상품선택 모자 셔츠 100 95 우선 셀렉트 폼을 각각 만들어 준다. 사이즈 선택 셀렉트의 경우에는, 상품을 셔츠로 선택했을 때만 보여야 하므로 unshow라는 클래스를 붙여 평상시에는 display:none;이 되도록 하였다. $('.form-select').eq(0).on('input', function () { var value = $('.form-select').eq(0).val();.. 2023. 2. 1. [자바스크립트] Array와 Object 자료형 var car = ['소나타',50000,'white']; //array var car2 ={name:'소나타',price: 50000}; //object array는 배열, object는 맵(key:value)이라고 보면 된다. car[0]; car2.price; 이런식으로 값을 꺼내 사용할 수 있다. Array는 순서가 존재해서 인덱싱, 정렬,삽입등이 가능하고 Object는 key값으로 value를 뽑을 수 있어 데이터를 보기에 편하다. var car2 ={name:'소나타',price: 50000}; $('.card').html(car2.name +'/'+car2.price); 이렇게 Object자료형 변수에서 값을 꺼내서 사용할 수 있다. var car2 ={name:'소나타',price: [50.. 2023. 1. 31. [자바스크립트] 이벤트 버블링 응용과 dataset 저번 시간에 이벤트 버블링에 대해 배웠다. 이러한 탭을 만들 때, Products Information Shipping list라는 요소 안에 tab-button이 존재하기 때문에 이벤트리스너를 list에 하나만 달아서 3개의 버튼을 모두 조작가능하게 할 수 있다. 추가로, data-id="0" 처럼 뒤에 붙여놓은것이 보일 텐데 data-데이터이름="값" 의 형태로 데이터를 저장해둘 수 있다. 나중에 이를 활용하여 이벤트에 써 보자. function tabOpen(i) { $('.tab-button').removeClass('orange'); $('.tab-button').eq(i).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-c.. 2023. 1. 30. [자바스크립트] 이벤트 버블 이런 모달창이 있다. 검은색 배경을 클릭하면 모달창이 꺼지도록 하고싶어서 자바스크립트를 작성했다. 이렇게 작성했다. 그런데 잘 작동될까? 이 black-bg 위에 하얀색 모달 창이 얹혀있는 상태이기 때문에, 하얀색 모달창 부분을 클릭해도 이벤트가 발생하게 된다. 어떠한 요소의 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. $('~~~').on('click',function(e){ e.target;//유저가 실제로 누른거 e.currentTarget; // this e.preventDefault(); //이벤트 기본동작을 막음 submit 등 e.stopPropagation();//내 상위 요소로의 이벤트 버블링을 막음 }) 이벤트리스너의 콜백함수에 파라미터.. 2023. 1. 30. [자바스크립트] for문 이용하여 탭 기능 만들어보기 for문을 써 보자. for(let i=0;i 2023. 1. 30. [자바스크립트] 스크롤 이벤트 스크롤 이벤트 window.addEventListener('scroll',function(){}); $(window).on('scroll',function(){}); 스크롤 이벤트이다. (아래는 jQuery) window.addEventListener('scroll',function(){ window.scrollTo(0,100); //(0,100)으로 강제 스크롤 window.scrollBy(0,100); //현재위치에서부터 (0,100)만큼 스크롤 window.scrollY; //Y축으로 얼마나 스크롤했는지 }) $(window).on('scroll',function(){ $(window).scrollTop(100); //100으로 강제 스크롤 $(window).scrollTop(); //얼마나 스크롤.. 2023. 1. 25. [자바스크립트] 캐러셀 만들기 이런 캐러셀을 만들어 보자. 1 2 3 다음 사진을 담을 slide-container이 있고 그 안에 각각의 사진은 slide-box에 들어있다. slide-container는 사진개수*100vm으로, 총 300vm의 너비로 설정하였고 slide-box는 각각 100vm으로, 가로로 정렬되도록 float: left로 설정하였다. 그리고 이 모든 박스를 둘러싸는 div를 만들고 style=overflow:hidden을 주어 화면 밖으로 튀어나간 부분은 안 보이도록 한다. $('.slide-2').on('click', function() { $('.slide-container').css('transform', 'translateX(-100vw)'); }) $('.slide-3').on('click', fun.. 2023. 1. 25. [자바스크립트] 정규식으로 이메일형식 검증하기 .includes함수로 안에 어떤 문자가 포함되었는지 검사 가능하다 그런데 안에 영어가 포함되었는지, 숫자가 포함되었는지 .. . 이런건 어떻게 할까? 정규식을 사용하면 된다. 'abcde'라는 문자열 안에 [a부터z까지] 포함되어있으면 true, 아니면 false를 출력한다. 한글도 마찬가지이다. 이런식으로 숫자의 경우는 [0-9] 아무런 문자 하나: \S a로 시작하는지: ^a a로 끝나는지: a$ a또는b: a|b 등으로 쓸 수 있다. 이메일은 (간략하게) 이렇게 쓸 수 있다. 아무 문자 여러개 + @ + 아무 문자 여러개 + . + 아무 문자 여러개 라는 뜻이다. 이제 이걸 자바스크립트로 써 보면 이렇게 사용할 수 있다. 정규식에 맞다면 true를 반환하게 되니 앞에 !를 붙여 정규식에 맞지 않는.. 2023. 1. 24. [자바스크립트] 함수 만들기, setTimeout, setInterval function function 함수명(인자){ document.getElementById('alert').style.display = 인자; } 함수 선언 예시이다. 인자를 사용할 때는 따로 $표시 붙일 필요 없이 그냥 쓰면 된다. function printAlert(time){ $('.alert').html( time+ '초 남았어요') ; } 간단하게 +로 인자와 문자열을 붙일수도 있다. setTimeout, setInterval setTimeout(function(){ $('.alert').hide(); },5000); setTimeout(콜백함수,시간(ms단위)) 로 사용할 수 있다. 인자로 넣은 시간만큼 지나면 콜백함수가 실행된다. 위 예시는 5초 후에 .alert 클래스 요소를 hide하게 .. 2023. 1. 21. [자바스크립트] 변수를 이용하여 다크모드 버튼 만들어 보기 다크모드 버튼을 누르면 배경이 검정, 글자가 흰색으로 나오게 만들어 보자. var click_count = 0; $('.badge').on('click',function(){ click_count+=1; if(click_count%2==1){ $('.badge').html('Light'); $('.navbar').addClass('navbar-dark'); $('.navbar').addClass('bg-dark'); $('.navbar').removeClass( 'navbar-light'); $('.navbar').removeClass( 'bg-light'); $('body').addClass('darkmode'); } else{ $('body').removeClass('darkmode'); $('.ba.. 2023. 1. 19. [자바스크립트] 모달창 띄우기와 간단한 애니메이션 여기 있는 로그인 버튼을 누르면 이런 모달창이 나오도록 만들어 보자. 로그인하세요 전송 닫기 이건 미리 만들어놓은 모달창이다. 검은색 배경에 흰색 박스, 흰 박스 안에 form과 버튼이 있는 형태이다. 이 박스가 보일 때는 화면의 맨 앞에 나와야하므로 body태그 맨 위에 넣어주었고 여기서 가장 큰 div박스에는 속성으로 visibility: hidden;을 주어 평소에는 보이지 않도록 하였다. .show { visibility: visible; opacity: 1; top: 0; } 이건 나중에 모달창을 보이게 하기 위해 show라는 클래스를 만들어 둔 것이다. visibility를 visible로 하여 보이게 하고 투명도도 1로 주었다. $('#login').on('click', function() .. 2023. 1. 18. [자바스크립트] 조건문 사용하기 아이디를 입력하는 칸과 전송버튼을 만들고, 아이디칸에 아무것도 입력되지 않았을 때는 경고창이 뜨도록 만들어 보자. 폼에 입력된 값은 $('요소명').value로 알 수 있다. $('.btn-primary').on('click',function(){ if($("#user-id").val().length==0){ alert("아이디를 입력하셔야죠"); return false; } }); btn-primary 클래스를 가진 요소를 클릭했을 때 #user-id의 값의 길이가 0이라면 "아이디를 입력하셔야죠" 알림창 뜨게 하기. if-else문은 우리가 C언어,자바 등등에서 사용하는 그 if문과 같다고 보면 된다. 추가로, form태그에서 submit이벤트가 발생하기 때문에 $('form').on('submit'.. 2023. 1. 18. [자바스크립트] jQuery 라이브러리 사용하기 jQuery라이브러리를 설치해서 자바스크립트를 쉽고 간결하게 사용 해 보자. 우선 이 스크립트 태그를 HTML파일에 붙여넣자. 참고로 이 태그 아래에 스크립트를 작성해야 jQuery가 잘 작동하니 주의하자. jQuery 예시들이다. document.querySelector('요소명')을 간단하게 $('요소명')으로 쓸 수 있다. 2023. 1. 16. [자바스크립트] 서브메뉴 만들기 이런 Navbar가 있다. 오른쪽에 상병마크 버튼을 누르면 이렇게 메뉴리스트가 튀어나오도록 만들어 보자. Navbar An item A second item A third item A fourth item And a fifth one 아래 스크립트태그를 보자. 우선 내브바에 있는 상병마크에 이벤트 리스너를 추가한다.(클릭 시 동작) (여기서 getElementByClassName('클래스명')[0] 이라고 적었는데, 나중에 오류가 발생하지 않도록 인덱스번호를 적어주는 편이 좋다.) 이벤트리스너 function 내부에는 .classList.toggle('클래스명') 이라는 메소드를 사용하였는데, 해당 클래스가 있으면 삭제하고, 없으면 추가하라는 메소드이다. 이것을 이용해서 클래스를 추가하고 뺄 수 있다. .. 2023. 1. 16. [자바스크립트] 알림창 띄우기, 이벤트리스너 자바스크립트로 HTML을 조작할 수 있다. 안녕하세요 안녕하세요 라고 적힌 글을 자바스크립트를 이용해서 조작 해 보자. 안녕하세요 id를 hello로 만들어 준 뒤, 아래에 script 태그를 열어 document.getE... 블라블라 적어주면 된다. innerHTML으로 내용을 안녕안하세요 로 바꾸고, style.background를 red로 설정했더니 잘 적용된 모습이다. 버튼을 누르면 나타나는 알림창 만들기 알림창 닫기 버튼 HTML 삽입 미리보기할 수 없는 소스 버튼을 누르면 알림창이 열리고, 알림창에 있는 버튼을 누르면 다시 알림창이 없어진다. 이번에는 script 태그를 열지 않고, onclick 속성으로 바로 자바스크립트를 작성했다. function 이용하기 버튼 script태그 안에 fu.. 2023. 1. 16. grid 레이아웃 부모 태그에 display: grid속성을 주고, grid-template-columns, rows를 설정 해 준다. 가로가 네 칸이게 하고싶으면 columns: 1fr 1fr 1fr 1fr; 처럼 해 주면 된다. (fr은 비율로 나누는 것인데 그냥 px단위나 %로 써도 된다) 세로는 똑같이 row에 해 주면 된다. 여러 칸을 차지하고 싶을 때 방법 1 grid container 내부에 있는 박스를 하나 선택해서, 새로 클래스를 부여하고 grid-column 속성을 준다. 위 사진에서는 grid-column: 1/3; 으로 되어있는데, 가로줄 첫번째~세번째 줄까지 차지해달라는 말이 된다. 여러 칸을 차지하고 싶을 때 방법2 자식 태그에는 grid-area: 영역이름; 을 설정 해 주고, 부모 태그인 gr.. 2023. 1. 14. transform과 keyframes로 애니메이션 만들기 transform 대상을 변형시킬 수 있다 transform: skew(각도); =>비틀기 transform: rotate(각도); =>회전 이 외에도 scale() => 확대/축소 translate( , ) => 좌표이동 등이 있으니 자동완성으로 확인해 보고 쓰면 된다. @keyframes @keyframes 애니메이션이름{ ...} 으로 작성할 수 있다. 애니메이션이 몇% 진행되었을 때의 모습을 각각 지정 해 주면 된다. 이 애니메이션을 사용할 때는 animation-name: animation-duration: 지정해 주면 된다. 2023. 1. 14. SASS를 알아보자 변수 사용하기 파일명.scss 를 컴파일하면 .css파일이 생성된다. scss파일에서 $변수명: 값; 으로 변수를 사용할 수 있고, 이를 컴파일하면 해당 변수의 값으로 치환되어 css파일이 생성된다. nesting 문법 괄호 안에 또 괄호를 쳐서 내용을 적을 수 있는데, 이 예시는 mydivbox 안에 있는 h4태그는 font-size:16px로 설정, mydivbox 안에 있는 span태그는 color:red로 설정하라고 적은 것이다. css에서는 .mydivbox h4{ . . .} .mydivbox span{ . . .} 와 같이 따로 따로 작성하였는데, mydivbox 하나의 괄호 안에 묶을 수 있어 관리하기 용이하다는 장점이 있다. @extend 문법 @extend 부모클래스; 를 작성하면 부모.. 2023. 1. 13. 이전 1 2 3 4 5 6 다음 728x90 반응형
