티스토리

하루의 일상💜

검색하기

블로그 홈

하루의 일상💜

happyeunji-1009.tistory.com/m

도하루박 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[자바스크립트] 슬라이드배너 화면이동 버튼 적용하기 prev, next, btns HTML 작성과 슬라이드 이미지 만들기 이전버튼, 다음버튼 적용하기 const arrows = document.querySelectorAll("div.arrow"); //arrow의 모든 항목을 가져오기 위해서 ★ querySelectorAll를 선택해야한다. arrows.forEach(arrow => { arrow.addEventListener("click", function(){ //click할때마다 function 실행 함수 let arrowType = arrow.classList[1]; //이전, 다음 버튼을 구분해야하기 때문에 type를 한번더 나눠준다. //arrow의 타입을 각각의 classList의 1번쨰 방에 있는게 어떤 type인지 알게하기 위해서 if(arrowType=="prev").. 공감수 0 댓글수 0 2022. 10. 17.
[자바스크립트] 첨부파일 누르면 원하는 사진 썸네일로 만들기 이미지 파일을 첨부할 때 원본사이즈를 올리게 되면 용량때문에 로딩시간이 길어지게 된다. 그렇기 때문에 이미지 사이즈를 조절하여 올리게 되는 것을 썸네일이라고 하는데 첨부파일을 통해서 원하는 이미지로 설정하는 방법에 대해서 알아보겠다. 주로 사이트에서 프로필사진 설정같은 곳에서 주로 쓰이게 된다. 첨부파일 클립이미지 넣기 먼저 HTML 에서 input 첨부파일 버튼을 만들어 줘야 한다. 내가 원하는 이미지르 넣기 위해서 display를 none으로 설정 해줘야 기존의 버튼이 사라지고 이미지를 넣을 수 있다. CSS 스타일 주기 CSS 에서 label의 div 를 불러온 후 설정한다. background 이미지를 넣을 때에는 무조건 사이즈를 정해줘야하고 해당 div요소에 맞게 100%를 준다. backgro.. 공감수 0 댓글수 0 2022. 10. 7.
[자바스크립트] 한글을 숫자로 변경, 숫자를 한글로 변경 한글을 숫자로 변경 var hangle = "공일이삼사오육칠팔구"; var input ="일공공구".split(""); console.log(input.map(v=> hangle.indexOf(v)).join("")); 사용자가 입력한 input 값을 검사하려면 hangle의 값을 하나씩 검사해야 할 것이다. 그렇기 위해서는 input을 Array로 변경하여 사용할 수 있다. split("")을 사용하여 변경해준다. https://happyeunji-1009.tistory.com/46?category=1102790 그리고 검사하려는 "일공공구" -> "1009" 로 출력하고 싶으니까 기존값을 원하는 값으로 변경할 수 있는 map() 을 사용한다. map에서 value 값을 받아서 "공일이삼사오육칠팔구"를.. 공감수 1 댓글수 1 2022. 10. 7.
[자바스크립트] 1~100까지 객체에 담은 후 짝수만 출력 var datas = Array(100).fill(); datas.forEach(function(v,i,ar){ ar[i]=i+1; }) console.log(datas.filter(function(v){ return v%2==0 })); index 칸을 먼저 설정 해줄 경우엔 undefined로 변경해주는 fill을 사용해준다. datas.forEach(function(v,i,ar){ ar[i]=i+1; }) 1~100까지의 값을 반복문인 forEach를 사용하여 채워준다. datas의 index 값에 1씩 더해준다. 리턴값이 true 인 값만 추출해주는 filter()를 사용하여 2의 배수 짝수를 검사해준다. console.log(datas.filter(function(v){ return v%2==0.. 공감수 0 댓글수 0 2022. 10. 6.
[자바스크립트] 문자열 함수, 포함여부 includes(), split(), substring(), === includes() 메소드에 조회할 값을 전달할 때 포함이면 true, 아니면 false가 나온다. console.log("자바스크립트".includes("바")); split() 구분점을 전달하면 구분점을 기준으로 각 값을 분리해준다. console.log("자바스크립트".split("")); substring() 원하는 index로 문자열 분리한다. index = 자[0] 바[1] 스[2] 크[3] 립[4] 트[5] 뒤에 index 번호는 제외 되므로 참고하여 사용해야 한다. console.log("자바스크립트".substring(2)); console.log("자바스크립트".substring(2,4)); console.log("자바스크립트".substring(2,6)); === 값을 비교하는 경우에.. 공감수 2 댓글수 1 2022. 10. 6.
[자바스크립트] forEach(), indexOf(), map(), filter() forEach() Array에서 사용할수 있는 반복문이며 callback 함수를 반드시 전달해야한다. value값을 callback 함수에 넣어 출력이 가능하다. var datas = [10,20,54,66,22,80] datas.forEach(function(v){ console.log(v) }); indexOf() 값을 해당 Array에서 찾은뒤 인덱스 번호로 리턴할 수 있고 그 값을 찾지 못하면 -1로 리턴한다. var datas = [10,20,54,66,22,80] console.log(datas); console.log(datas.indexOf(66)); console.log(datas.indexOf(50)); indexOf로 66의 위치는 3번째 index에 위치하는 결과가 나왔고 50이라는.. 공감수 1 댓글수 0 2022. 10. 6.
[자바스크립트] Array 선언과 push(), join(), slice() Array 선언 var datas = []; datas[0] = 10; datas[4] = 50; console.log(datas); 자바스크립트의 Array 객체는 길이를 설정하지 않아도 원하는 인덱스에 원하는 값을 바로 추가할 수 있다. 또한 타입이 지정되어 있지 않기 때문에 다양한 타입도 동시에 담을 수 있다. 위와 같은 값을 node에서 출력해보면 아래와 같은 값을 확인할 수 있고 10과 50 사이에는 3칸이 비어있다. index값을 지정해주는 Array 선언 처음부터 10이라는 index값을 지정하여 10칸짜리 Array를 만들 수 있다. var datas = new Array(10); console.log(datas.length); 처음부터 값을 지정하여 칸을 지정해 만들 수 있다. 아래와 같.. 공감수 0 댓글수 0 2022. 10. 6.
[자바스크립트] math를 이용한 구구단 연습 만들기 math() 는 주로 페이징 처리를 할 때 쓰인다. 올림, 반올림, 내림, 난수를 가지고 있는 객체이다. Math.floor(Math.random() * n) : 0 ~ n-1의 난수 function getRandomInt(range) 랜덤한 int 값을 받아서 리턴 해야 하기 때문에 getRandomInt() 를 사용하고 외부에서 범위를 받아주는 range를 넣어준다. 곱셈 식은 2 x 6 처럼 앞의 수는 2~9 의 수가 들어가야 하고 뒤의 수는 1~9가 곱해져야 곱셈식이 완성이 된다. 하지만 math 는 -1의 난수를 리턴하기 때문에 앞의 수의 범위는 8을 전달 해야만 0~7의 범위가 된다. 그러므로 앞의 수는 8을 전달하여 0~7의 범위가 되고 각 +2를 해줘야한다. result += range =.. 공감수 2 댓글수 0 2022. 10. 6.
[자바스크립트] HTML 요소 입 출력 /prompt, confirm, alert 자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 출력할 수 있다. 웹 브라우저 화면에서 출력을 담당하는 document.write()문이 있다. 항상 HTML의 태그 안에서 출력을 하며 눈으로 확인했었지만 사용자에게 메세지를 출력하거나 입력을 받을 수 있는 다이얼로그에 대해 알아보겠다. 프롬프트 다이얼로그 prompt() 텍스트필드가 있는 작은 창이다. 입력 메세지와 디폴드값을 설정할 수 있다. 메세지 : "이름을 입력하세요." 디폴드값 : "한글로만 작성" //디폴트값은 생략이 가능하며 작성하지 않을 시에는 " " 빈 문자를 리턴한다. 확인 다이얼로그 confirm() 확인/취소 버튼을 가진 다이얼로그이다. 확인은 true, 취소나 강제로 닫을 시에는 false를 리턴한다. 선택한 결과에.. 공감수 0 댓글수 0 2022. 10. 2.
[JS] 마우스 올렸다 뗐을 때 이미지 바꾸기 html 태그 안에서 스크립트 언어를 사용해 보았다. 처음 이미지는 별에서 마우스는 하트로 변하는 효과를 주었다. 또 마우스는 뗄 때에는 별 이미지를 다시 주었다. 여기서 onmouseover : 마우스를 올릴 때 onmouseout : 마우스를 뗄 때 마우스를 올려보세요. 이것을 응용하여 배경색 변경의 효과도 줄 수 있다. 초반 배경색은 흰색이지만 마우스를 올렸을 때 색을 바꿀수도 있다. 마우스를 올려주세요 클릭! 공감수 0 댓글수 0 2022. 9. 29.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.