꾸생의 DevLog

[JS] 자바스크립트 랜덤

자바스크립트 랜덤 0부터 10까지 랜덤 숫자 구하기 var random = (Math.random() *11) ; console.log(random.toFixed(0)); 5부터 20까지 랜덤 숫자 구하기 var random = Math.floor((Math.random() * 20 - 5) + 5 ); // * 최대값-시작값 ) + 시작값 console.log(random); parseInt() 또는 toFixed()를 사용해 정수로 표현

2021.03.05  

[JS] 자바스크립트 천단위 콤마(,) 찍기

자바스크립트 천단위 콤마 var number = 12345678901234567890; console.log(number.toLocaleString()); 굳이 정규식을 사용하지 않아도 편리하게 천단위 구분 콤마를 찍을 수 있다! Number.prototype.toLocaleString() - JavaScript | MDN Number.prototype.toLocaleString() The toLocaleString() method returns a string with a language-sensitive representation of this number. The source for this interactive example is stored in a GitHub repository. If you..

2021.03.04  

[JS] 자바스크립트 객체와 배열 다루기

자바스크립트 객체(Object) var person = { //person 객체 생성 name : '꾸생', age : 27, blog_url : 'https://juni-official.tistory.com/', print : function() { console.log(this); } } person.print(); 객체에는 각각의 속성이 있고 속성에는 키와 값으로 이루어져 있다. 자바스크립트 객체 접근 방법 person['name'] + '\n' + person['age'] + '\n' + person['blog_url'] 자바스크립트 객체 접근 방법으로는 이와같이 사용하는데, 키 값을 문자형식으로 입력하여 해당 값을 찾는다. 물론 키 값이 숫자일 경우 숫자를 이용하여 접근이 가능하다. 하지만 배열..

2021.03.04  

[JavaScript] 원하는 문자열 추출하기

자바스크립트 원하는 문자열 추출 1. charAt() 함수 let String = "원하는 문자열 추출하기"; console.log(String.CharAt(0)); // 결과 : '원' console.log(String.charAt(String.length-1)); // 결과 : '기' 문자열에서 첫번째와 마지막 문자열을 추출하거나 원하는 index에 위치한 문자를 추출한다면 charAt() 함수를 이용하면 된다. charAt() 함수의 파라미터는 index의 위치 값을 사용한다. 하지만 문자열 하나가 아닌 원하는 위치에서 여러 문자열을 가져와야 한다면 substr() 함수를 이용해야한다. 2. substr() 함수 let String = "원하는 문자열 추출하기"; console.log(String...

2021.03.04  

[JS/JQ] 자바스크립트 배열

자바스크립트 배열 자바스크립트 배열(Array) x x x x x x x

2021.01.12  

[JS/JQ] 티스토리 스크롤 상태 표시바 구현하기

스크롤 상태 표시 바 구현 웹사이트 스크롤 상태바를 구현해보려 합니다. 웹사이트를 돌아다니다가 스크롤 시 상단에 상태바가 표시되더라고요. 티스토리의 유명한 스킨에도 있는 것 같아 간단하게 HTML과 CSS, 자바스크립트를 사용하여 제 블로그에 구현해보려 합니다. 작업 순서는 아래와 같습니다. HTML 태그 삽입 태그 CSS속성 적용하기 자바스크립트로 기능 구현하기 1. HTML태그 삽입 태그 안에 상단의 태그 코드를 넣어주세요. 클래스는 'bar'로 지정했습니다. 잘 모르시는 분들은 저와 똑같이 위에 그대로 복붙 해주세요. 2. CSS속성 적용 .bar{ position: fixed; top: 0px; left: 0px; width: 0%; height: 5px; background: #98acf8; z..

2020.12.20  

자바스크립트 날짜, 시간 표현하기

자바스크립트 날짜/시간 표현 자바스크립트와 제이쿼리로 Date객체를 사용해 날짜를 표현하는 방법입니다. See the Pen NWrdYro by junheeleeme (@junheeleeme) on CodePen. //Variables const time_txt = document.querySelector('.time'); //functions init(); function init(){ setInterval(()=>{ cnt_time(); }, 1000); } function cnt_time(){ const time = new Date(); const year = time.getFullYear(); const month = time.getMonth()+1; const date = time.getDate..

2020.10.24  

CSS의 transition과 JQuery의 Animate 차이점

transition과 JQuery의 Animate 차이점 CSS - transition transition은 CSS 속성값으로 애니메이션 효과를 발생시킵니다 transition-property : 어떤 속성에 적용할지 transition-duration : 얼마동안 지속할지 transition-timing-function : 시간 함수, 효과 transition-delay : 얼마 후에 시작할지(딜레이) ------------------------------------------------- transition-property: left; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0.7s; 다음과 같이 한줄로..

2020.10.23