728x90 반응형 웹개발/JavaScript24 OpenAI API를 이용하여 채팅 웹페이지를 만들다 이렇게 AI와 대화를 할 수 있다. openAI API를 사용해서 채팅 웹을 만드는 방법은 이 영상을 참고했다. 아직 제대로 공부하지 못해서 잘은 모르지만 따라 만들기에 너무 재밌을 것 같아서 만들어 봤다. 기본적으로 openAI 사용하는 방법은 영상을 따라했고 내가 할줄아는 HTML CSS JS로 채팅화면 꾸미기를 조금 해봤다. 아이폰 메세지 앱을 참고해서 비슷한 느낌으로 만들어보고자 했다. 색입히기, 마진, 패딩넣기는 그냥 하나씩 해보면서 맞췄다. 만들면서 몇 가지 신경 쓴 것들 배경 블러처리하기 아이폰 메세지 앱을 보면, 화면의 상단부분에는 메세지 내용이 블러처리가 돼서 보이고 상대방의 프로필이 나온다. (메세지들을 스크롤하면 블러부분에도 메세지가 올라가는 것이 흐리지만 보여야한다.) 이를 구현하기.. 2023. 2. 8. [자바스크립트] 스와이프 기능과 터치 var 시작좌표 = 0; var 눌렀음 = false; $('.slide-box').on('mousedown', function(e) { 시작좌표 = e.clientX; 눌렀음 = true; }); $('.slide-box').on('mousemove', function(e) { if (눌렀음 == true) { $('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px -${지금사진}00vw)`); } }); $('.slide-box').on('mouseup', function(e) { 눌렀음 = false; console.log(e.clientX - 시작좌표); if (e.clientX - 시작좌표 < -100) { $('.sli.. 2023. 2. 6. 슈팅게임 페이지 가꿔보기 전혀 꾸미지 않았었던 페이지를 부트스트랩을 이용해서 아주 기본적인 것만 만들어 주었다. title을 토리 슈팅게임으로 바꾸었다. 내브바에 "토리 슈팅게임" 제목을 적어주었고, 내 블로그 주소와 깃허브 주소 링크를 넣어두었다. 게임 설명을 alert창 파란색에 적어두고, 난이도를 선택할 수 있게 하였다. 비둘기가 떨어지는 속도를 level이라는 변수로 바꾸고, select form에서 난이도를 선택하면 그에 맞는 속도로 비둘기가 떨어지게 하였다. select form에서 input 이벤트가 발생하면 main(), createEnemy()가 실행되도록 하였다. 그래서 난이도를 선택해야 게임이 실행된다. (처음에는 createEnemy()는 원래대로 두었었는데, 그렇게 했더니 페이지가 로드되고 시간이 조금 지.. 2023. 2. 5. 자바스크립트로 슈팅게임을 만들다 어제 자기전에 유튜브 보다가 자바스크립트로 슈팅게임 만들기 영상을 봤는데 생각보다 따라해볼만 한 난이도라서 영상보면서 똑같이 만들어봤다. 더보기 '코딩알려주는누나'라는 유튜버께서 알려주는 슈팅게임 만드는 방법. 하나부터 열까지 다 알려주기때문에 나같은 초보자들도 잘 이해하면서 할 수 있다. https://yeomdonghwan.github.io/슈팅게임 tori-game 슈팅게임을 해보세요. 좌우 화살표로 움직이고 스페이스바를 눌러 토끼똥을 발사해보세요. ~토리가 비둘기를 무찌를 수 있게 도와주세요~ 블로그 깃허브 배경 이미지 출처 Freepik yeomdonghwan.github.io 영상에서 알려준 것 그대로 만들었기 때문에 내가 만든것이 아니라서 큰 의미는 없지만 자바스크립트로 이런것도 할 수 있구.. 2023. 2. 4. [자바스크립트] sticky 활용하기 position: sticky; sticky를 이용해 보자. sfjeifjwiflwejewljwelfjwelfwje fejwfljw wejfewjflwel fewj lwejfw wejflwejfkljl wejflkwejflk wejfklwj image는 float:right, position: sticky가 설정되어있고 text는 float:left가 설정되어 있다. text가 왼쪽, image가 오른쪽으로 배치되었다 image는 sticky, top:100px로 설정을 해놓았기 때문에 스크롤해도 위에서 100px만큼 떨어진 위치에 고정되어있다. 이렇게 고정된 image는 부모태그 안에서 고정되어있게 된다. (부모태그가 끝나면 같이 스크롤되어 올라감) 애플 홈페이지를 구경하다 보면 스크롤 이벤트를 정말 .. 2023. 2. 3. [자바스크립트] 브라우저 로컬 스토리지(localStorage)사용하기 브라우저에 데이터를 저장하는 방법을 알아보자. localStorage.setItem('ㅇㅇ','kkk'); localStorage.setItem('name',[1,2,3]);//안됨 var arr=[1,2,3]; var newArr=JSON.stringify(arr); localStorage.setItem('name',newArr); var 꺼낸거=localStorage.getItem('name'); var newArr=JSON.parse(꺼낸거); console.log(newArr[0]); 로컬스토리지는 key:value의 형태로 저장할 수 있다. 문자나 숫자만 넣을 수 있어서, Array, Object자료형은 저장을 할 수 없다. 이때는 JSON.stringify() 메소드를 이용해서 문자열의 형태로.. 2023. 2. 2. [자바스크립트] sort,map,filter var arr=[4,203,44,3,29]; arr.sort(); 이런 array를 정렬하기 위한 sort메소드가 있다. 과연 잘 정렬되었을까? 정렬이 되긴 되었지만 우리가 기대하는 값이 나오지 않았다. 아마 맨 앞 문자 기준으로 정렬이 되지 않았나 싶다. 그럼 숫자순으로 정렬하려면 어떻게 해야할까? arr.sort(function(a,b){ return a - b; }); 이렇게 sort안에 콜백함수를 넣어주면 된다. 이 콜백함수는 자바에서 쓰던 compareTo와 비슷하다고 보면 될 것 같다. 리턴값이 음수인지, 양수인지에 따라 위치가 바뀌는데, a-b를 리턴하면 오름차순 정렬이 된다. var c_arr=['a','c','d','b']; c_arr.sort(function(o1,o2){ if(o1o2.. 2023. 2. 2. [자바스크립트] 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. 이전 1 2 다음 728x90 반응형
