티스토리

celine

검색하기

블로그 홈

celine

celine-e.tistory.com/m

celine_e 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

자바스크립트 개념 정리(4) 함수지향 - 클로저 생활코딩 자바 스크립트 입문 내용 정리 클로저란 ? 내부함수가 외부함수의 맥락에 접근할 수 있는 것- 내부함수와 외부함수에 대해서 알아보기function outer(){ function inner(){ var title = '내부함수' alert(title) }}function outer(){ var title = '내부함수' //외부함수에 선언된 지역변수 function inner(){ alert(title) //내부함수에 선언된 지역변수가 없다면 외부 함수에 있는 변수를 가져옴 }}//즉 내부함수에서 외부함수에 있는 지역변수에 접근 할 수 있다. -> 클로저 클로저란???function outer(){ var title = '내부함수' //외부.. 공감수 1 댓글수 0 2024. 10. 30.
자바스크립트 개념 정리(3) 출처 : 생활코딩 자바스크립트 강의 정리 1. 값으로서의 함수자바스크립트의 특징 : 함수 자체가 값이 될 수 있다.function a() {}var a = function(){} 함수는 값이고, 객체 안에 담길 수 있다.a = { b:function(){ //b는 key,속성(property) //value는 함수, 이것은 메소드(method)라고 한다. }} 1-2. 값으로서의 함수와 콜백function cal(mode){ var funcs = { 'plus' : function(left, right){return left + right}, 'minus' : function(left, right){return left - right} } return fu.. 공감수 2 댓글수 0 2024. 10. 29.
자바스크립트 개념 정리(2) 생활코딩 자바스크립트강의 정리시즌2 - 함수 1-1 Scope (유효범위)var vscope = 'global';function fscope(){ var vscope = 'local'; alert(vscope);}fscope();//결과값 : local 지역변수 : 'local variables' , 함수 안에서 선언 된 변수, 선언된 내부에서만 접근 간으전역변수 : 'global variables', 함수 밖에서 선언된 변수, 애플리케이션 전역에서 접근이 가능한 변수var vscope = 'global';function fscope(){ var vscope = 'local'; var lv = 'local var' alert(lv);}fscope(); //결과값 : local varale.. 공감수 0 댓글수 0 2024. 10. 28.
자바스크립트 개념 정리 1. 객체배열 : 연관 되어 있는 것들을 담아 놓은 그릇객체 : key, value로 구성되어 있는 데이터를 담아 놓은 그릇빈 객체 만들기 var grades= new Object();var grades = {'test': 10, 'test2' : 20};객체에 있는 값 선택하기grades.test === grades['test'] 1-1.객체와 반복문- 객체안에 저장된 값은 순서가 없지만, key와 value가 있음for key in 객체var grades = {'test11': 10, 'k8805': 6, 'sorialgi': 80};for(key in grades) { console.log(key) // test11, k8805, sorialgi 출력 document.write(grads[key].. 공감수 0 댓글수 0 2024. 10. 28.
[jQuery] slick-slide Paging Custom (Counter 표시하기) 구현해야하는 슬라이드의 페이지 네이션 화면 첨부 - 현재 보여지는 슬라이드 페이지 / 총 슬라이드 갯수가 보여져야 합니다. * 사용한 slick-slide의 version은 Version 1.8.0 입니다. 1. 마크업을 해줍니다. 2. slick-slide를 사용하기 위한 script입니다. var $status = $('.pagingInfo'); //paging 이 들어갈 div 혹은 p 혹은 어떠한 영역 var $slickElement = $('.main-slide'); //slide가 되어야하는 div $slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ var i = (currentS.. 공감수 0 댓글수 0 2023. 6. 29.
[mongoose] 스키마 Schemas, 모델 Model 1. 스키마(Schemas) 란 ? 데이터를 매핑하는데 사용되는 하나하나의 정보를 지정해 주는 역할을 합니다. 스키마에서 알 수 있는 정보는 데이터의 형식, 최소 길이, 최대 길이, 공백 등등 데이터의 정보를 알 수 있습니다. const userSchema = mongoose.Schema({ name :{ type : String, maxlength : 50 }, email : { type: String, trim: true, unique :1 }, password : { type: String, maxlength : 70 }, lastname : { type: String, maxlength:50 }, role : { type : Number, default : 0 }, image : String, t.. 공감수 0 댓글수 0 2023. 2. 1.
[jQuery, javaScript] 팝업창 제외 배경 선택 시 팝업 닫기 팝업창 영역을 제외하고 선택 시 팝업창이 닫히는 코드입니다. 팝업입니다 팝업입니다.팝업입니다 팝업입니다. 팝업입니다 팝업입니다.팝업입니다 팝업입니다 .팝업입니다 팝업입니다.팝업입니다 팝업입니다.팝업입 니다 팝업입니다.팝업입니다 팝업입니다. .popup { width: 200px; height: 200px; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); border: 1px solid green; border-radius: 8px; text-align: center; z-index: 99; background: #fff; } .blackBg{ position: fixed; left: 0; top: 0; width: 100.. 공감수 0 댓글수 0 2022. 4. 12.
[jQuery] 소수점 기준 자리수 체크 let priceNum = $("input[name=nftPrice]").val(); let pattern = /^(\d{1,12})([.]\d{0,10}?)?$/; if ( !pattern.test(priceNum) && priceNum != ''){ if( priceNum.indexOf('.') > 0 ) { if( priceNum.toString().split(".")[0].length > 12 && priceNum.toString().split(".")[1].length > 10 ) { $('#integralError').removeClass('hide'); $('#integralError').text('소수점 위로 최대 12자리까지 입력 가능합니다.'); $('#demicalError').rem.. 공감수 0 댓글수 0 2022. 4. 12.
[javaScript] setTimeOut() [javaScript] - setTimeOut() : 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. setTimeout(function() { console.log('Hello World!'); //타이머가 만료된 뒤 실행할 function입니다. }, 500); [조건] 1. 클릭 후 배경색이 변경됩니다. 2. 배경색이 변경 되며, 텍스트가 변경됩니다. Copy .copyTooltip { width: 100px; background:#222; border-radius: 16px; padding:16px 0; box-sizing: border-box; box-shadow: 0px 4px 12px 0px #0000001A; position: rel.. 공감수 0 댓글수 0 2021. 12. 23.
[jQuery]for문을 이용한 Tab-Menu 만들기 [ for 문을 이용한 Tab-menu] 기능 : 메뉴를 클릭하면 메뉴의 스타일이 변경되며, 각각의 내용이 변경됩니다. 조건 : 메뉴의 갯수가 몇개가 되어도 자바스크립트 코드는 수정이 되지 않아야합니다. 다시 말하면, html 내에 있는 tabMenu의 갯수만큼 반복문을 실행시켜야한다는 것 1. html 마크업 회사소개 CEO 인사말 연혁 오시는길 수상내역 회사소개11111 CEO 인사말2222 연혁3333 오시는길4444 수상내역5555 2. css 스타일 menuWrap li { display: inline-block; width: 174px; height: 37px; line-height: 37px; color: #202023; text-align: center; border: solid 1px #.. 공감수 0 댓글수 0 2021. 12. 20.
[javaScript] 인증번호 3분 countdown [문자인증 3분 카운트다운] 1. 인증번호발송 버튼 클릭 후 3분 countdown 시작 2. 3분이 지나면 00:00으로 멈춥니다. See the Pen by 현정 (@Celine__509) on CodePen. 공감수 1 댓글수 0 2021. 9. 21.
[jQuery] 로그인폼 구현하기2 / 이메일, 비밀번호 정규식 검증 [조건] 1. 이메일 형식을 정규식으로 검사합니다. 2. 이메일과 비밀번호가 입력되지 않았다면 "아이디를 입력해주세요" 또는 "비밀번호를 입력해주세요" 안내문구가 나오며, 로그인이 되지 않습니다. 3. 이메일 형식이 맞지 않다면 "이메일형식에 맞게 입력해주세요" 안내문구가 나오고, 로그인이 되지 않습니다. 4. 비밀번호는 대문자가 포함되어야 합니다. 5. 대문자가 포함되지 않았다면 "대문자가 포함 되어야 합니다" 안내문구가 나오고, 로그인이 되지 않습니다. [html] 로그인 아이디 아이디를입력하세요 이메일형식에 맞게 입력해주세요. 비밀번호 비밀번호를입력하세요 대문자가 포함 되어야 합니다. 로그인 취소 [css] - 로그인 폼 구현하기 과 동일 [참고] 2021.08.26 - [프론트엔드/javaScri.. 공감수 1 댓글수 0 2021. 8. 30.
[jQuery] 로그인 Form 구현하기 [조건] 1. 로그인 버튼을 클릭하면 form이 나옵니다. 2. 폼을 전송할 때 이메일 input 안의 값이 공백인 경우, "이메일을 입력하세요" 텍스트가 아래에 나옵니다. 3. 이메일이 입력되면 텍스트가 사라집니다. 4. 이메일이 입력되지 않으면 폼은 전송 되지 않습니다. 5. 패스워드도 동일합니다. [html] 로그인 아이디 아이디를입력하세요 비밀번호 비밀번호를입력하세요 로그인 취소 [css] button { display: inline-block; width: 150px; height: 35px; line-height: 35px; background: #9abdf5; color: #333; font-size: 14px; font-weight: 500; text-align: center; border.. 공감수 1 댓글수 0 2021. 8. 26.
[javaScript] EventListener 이용하여 button 기능 개발 [조건] 1. 버튼2를 클릭하면 '아이디를 입력하세요'의 문구가 '비밀번호를 입력하세요'로 변합니다. 2. 버튼2를 클릭하면 닫기 버튼이 없어집니다. 3. 자바스크립트 eventListener를 이용합니다. [html] 닫기 열기 버튼1 아이디 버튼2 비밀번호 아이디를 입력하세요 EventListener : 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. - addEventListener() 메소드는 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메소드입니다 대상객체.addEventListener(이벤.. 공감수 0 댓글수 0 2021. 8. 25.
[jQuery]버튼 클릭 후 url 복사 / toastPopup [조건] 1. 버튼 클릭 시 url 이 복사됩니다. 2. 버튼 클릭하는동안 버튼의 배경색에 opacity가 들어가야합니다. 3. 복사와 함께 복사되었습니다. 라는 토스트 팝업이 잠시 나왔다가 사라집니다. [html] 1. 링크복사 버튼은 css로 모양을 만들어줄 예정입니다. 2. 토스트 팝업은 잠시 숨겨둘 예정입니다. 링크복사 링크가 복사되었습니다. [css] 1. 버튼에 :active를 활용하여 클릭하는 동안 배경색에 opacity를 적용합니다. * : active :: 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. [참고] https://developer.mozilla.org/ko/docs/Web/CSS/:active :active - CSS: .. 공감수 1 댓글수 1 2021. 8. 24.
[jQuery] 높이에 따른 더보기 버튼 유무 [이슈사항] - 소개하고 싶은 글이 2줄이하일 때는 더보기 버튼이 보이지 않아야합니다. - 2줄이상일 때는 더보기 버튼이 보여야하며, 더보기버튼 옆 화살표가 아래로 내려가 있는 모양이어야합니다. - 더보기 버튼이 펼쳐져있을 때는 화살표가 위로 올라가는 모양이어야합니다. [2줄 이하 일 때 더보기 버튼이 사라지게 하기] 1. 전체를 감싸는 div(infoIntroWrap)의 height를 80px로 설정해줍니다. 2. 소개하는 글의 div ( infoIntro)의 height가 80px보다 작으면 더보기버튼(btnMore)을 지워줍니다. [2줄 이상일 때 더보기 버튼이 보이게 하기] -더보기 버튼 클릭 시 - 1. infoIntroWrap의 height가 80px이 넘어가면 보이지 않게 overflow:h.. 공감수 0 댓글수 2 2021. 8. 17.
[javaScript] javaScript Drawing [조건] 1. 화면 상에 100*100 박스 출력 2. 박스안에 특정 도형을 출력 - 도형 종류 무관 - 예) 네모, 세모, 원, 보노보노 등 3. 화살표로 특정 도형 이동 구현 Javascript Drawing 박스 안에 도형 출력-> 화살표로 이동 구현하기 키보드로 원을 움직여보세요 &#128155 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = canvas.width/2; var y = canvas.height/2; //x와 y의 변수를 이용해서 캔버스 중앙에서 그려지도록 하겠습니다. var ballRadius = 10; // 충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 //.. 공감수 1 댓글수 0 2021. 8. 17.
[javaScript] function의 파라미터 사용하여 button기능 개발 [파라미터 사용하는 이유] 1. 하나의 함수를 여러번 사용할 수 있습니다. -함수 내부의 기능을 항상 똑같은 것만 실행하는게 아니라 다양한 기능을 수행하는 함수를 만들고 싶을 때 씁니다. [버튼기능개발] 1. 버튼1 을 클릭하면 '아이디를 입력하세요' box가 나옵니다. 2. 버튼2 를 클릭하면 '비밀번호를 입력하세요' box가 나옵니다. [코드리뷰] 1. 불필요한 html 코드를 사용하지 않고 변해야하는 텍스트를 확인합니다. - p태그안의 span 만 자바스크립트를 이용하여 바꿔줍니다. 2. 버튼을 클릭했을 때 box가 나오게 합니다 - 버튼 클릭시 display:block이 될 수 있도록 자바스크립를 이용하여 style을 바꿔줍니다. 버튼1 아이디 버튼2 비밀번호 아이디를 입력하세요 function .. 공감수 1 댓글수 0 2021. 8. 17.
[javaScript] function을 활용하여 button기능 개발 [자바스크립트 function을 쓰는 이유] 1. 긴코드를 축약할 수 있습니다. 2. 특정 기능을 다음에도 쓰기 위해 모듈화 해 놓을 수 있습니다. 열기 버튼을 누르면 box가 나옵니다. 닫기 버튼을 누르면 box가 사라집니다 . Alert Box 열기 닫기 공감수 1 댓글수 0 2021. 8. 16.
[javaScript] onclick 속성으로 button 기능 개발 [onclick 속성으로 button 기능 개발] 버튼을 누르면 UI가 보이게 하는 코드입니다. 1. html과 css를 이용하여 UI 디자인을 합니다. 2. css display:none 을 이용하여 UI가 평소엔 보이지 않게 합니다. 3. 자바스크립트를 이용하여 버튼에 기능을 넣습니다. [onclick] 1. html button 태그 내에 'onclick' 이라는 속성을 넣습니다. 2. 버튼 클릭 시 onclick 내부의 자바스크립를 실행하게 됩니다. 3. 열기버튼과 닫기 버튼을 눌렀을 때 css의 변경을 명시해주면 됩니다. 열기 닫기 열기 버튼을 누르면 box가 나옵니다. 닫기 버튼을 누르면 box가 사라집니다 . Alert Box 열기 닫기 .alertBox { display:none; widt.. 공감수 1 댓글수 0 2021. 8. 16.

문의안내

티스토리
로그인
고객센터

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