본문 바로가기

자바스크립트49

JavaScript - 3자리 마다 콤마 적용 쉬운방법 / toLocaleString 자바스크립트 3자리 콤마 안녕하세요. 고코더 입니다. 3자리마다 콤마는 많은 숫자를 한눈에 보기 쉽게 만들어주는 양식입니다. 그래서 실무 프론트엔드에서는 숫자는 기본적으로 콤마를 찍어 노출하는데요. 자바스크립트로 이 콤마를 작성하는 가장 쉬운 방법을 소개할려고 합니다. ● 1. 우선 정답은 해당 함수를 이용 합니다. 해당 함수가 아니면 문자열을 세어서 콤마를 찍어주는 함수를 사용할텐데요 이 한줄이면 해결 됩니다. 1toLocaleString() // 특정 언어에 맞는 형식으로 반환cs ● 2. 해당 함수로 간단하게 적용해보았습니다. 해당 함수를 숫자를 표현하니 자연스럽게 콤마가 붙습니다. 123456789 document.write(Number(3000).toLocaleString('en')); docu.. 2019. 10. 24.
코딩이론 - 동기(synchronous) , 비동기(Asynchronous )의 차이점 동기식 비동기식 뭐가 다를까? 안녕하세요.고코더 입니다. 동기, 비동기 단어 자체가 영어로 보면 머리속에 들어오는데 번역된 한글로 보면 조금 헷갈린 구석이 있습니다. 동기(synchronous) - 응답을 받아야만 다음 동작을 실행 비동기는 (Asynchronous) - 응답에 상관 없이 바로 다음 프로세스를 진행 ● 1. 동기방식 우리가 많이 사용하는 ajax는 보통 동기식을 많이 사용합니다. 해당 데이터를 모두 가져와서 다음 프로세스에서 함께 사용하는 경우가 많기 때문입니다. 동기는 하수도관이 하나 입니다. 물길이 하나여서 하나가 다 된 다음 다음 프로스세를 순차적으로 실행합니다. 프로세스적 절차가 중요한 사이트 관리자 페이지라던가 금융 업무와 같은 곳에서는 동기식인 경우가 많습니다. 특징 - 한번에.. 2019. 10. 21.
JavaScript - 배열에 값을 추가/ unshift(), push() array 에 데이터를 추가 하는 방법 안녕하세요.고코더 입니다. 자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다. ● 1. push() : 배열 뒤에 값을 입력한다. push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 123456 jvar arryData = []; //배열을 선언 arry = { "name" : 'gocoder', "url" : 'g.. 2019. 10. 21.
JavaScript - 문자열 맨 뒷자리 잘라내기 / slice를 이용한 쉬운 방법 자바스크립트로 문자 뒤에서부터 제거하기 안녕하세요.고코더 입니다. ● 1. 프론트엔드 개발을 하다보면 꼭 끝에 한 글자가 문제입니다.이 글자를 짤라내려면 많이 사용하는 방법은 이렇게 하셨을텐데요 1. 문자열 길이를 잰다2. -1를 한다3. -1한 길이만큼 가져온다 ● 2. 그 보다 더 쉬운 방법이 있습니다. 내장 객체인 배열을 다루는 slice()를 이용하는 방법입니다. var text = "http://gocoder.net/"; textSlice = text.slice(0,-1); // http://gocoder.net ● 3. 예제 소스로 다시 한번 살펴보겠습니다.1234567891011 var text = "http://gocoder.net/"; textSlice = text.slice(0,-1);.. 2019. 10. 21.
jQuery - prop()으로 select 상태 값 변경 prop()을 사용해 select 상태만 변경하기 안녕하세요.고코더 입니다. 이번 시간에는 prop으로 셀렉트 박스의 상태 값을 변경하는 방법을 알아보겠습니다.트리거는 사용자의 이벤트를 대신하는 느낌이라면 prop은 현재의 화면에 보여주는 옵션 상태 값을 변경 합니다. 가장 큰 차이는 change() 값에 바인딩 되지 않습니다 ● 1. 아래 소스를 한번 웹에서 보겠습니다. 12345678910111213141516171819202122function propChagne(){ $("#gocoder").val("c").prop("selected", true);} 셀렉트박스 선택 Go Coder Colored by Color Scriptercs ● 2. 해당 파일을 웹에서 실행하신 다음 버튼을 클릭 합니다. .. 2019. 10. 17.
jQuery - 가장 간단한 슬라이드 HTML / Coin Slider 슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 안녕하세요. 고코더 입니다. 슬라드 쇼를 하는 기능에 플러그인은 참 많습니다. 많은 개발자들이 저마다에 방식으로 만들어 놓았습니다. ● 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은 가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 바로 COIN SLIDER 입니다. http://workshop.rs/projects/coin-slider/ ● 2. 얼마나 간단한지 제가 예제를 한번 만들어 보았습니다. 아래 코드를 참조해주세요. 1234567891011121314151617181920212223242526272829 $(document).ready(function() { coinslider({width:260,height:146,navigati.. 2019. 7. 17.
자바스크립트 - location.href 와 location.replace 차이점 javascript location.href, location.replace 가장 큰 차이 안녕하세요. 고코더 입니다. ● 1. 가장 큰 차이점은 뒤로 가기시에 페이지 기억 여부 입니다. ● 2. 해당 기능을 표로 만들어 비교 해보았습니다. 함수명 location.href location.replace 기능 페이지로 이동 페이지 변경 뒤로가기 가능 불가능 사용방법 location.href='gocoder.php' location.replace('gocoder.php') ● 3. 보통 다시 돌아가면 안되는 페이지 로그인 후라던가 프로세스를 로직을 완료한 후에는 replace로 페이지를 사용합니다. 저는 홈페이지 아래 링크에서 replace를 사용하였습니다. -> XE - 특정 URL 접속시 다른 페이지로 .. 2019. 7. 15.
jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht(); 디자인 요소의 크기 변경 안녕하세요. 고코더 입니다. jQuery에서는 선택한 요소의 크기의 값을 알거나 변화 시킬 수 있습니다. ● 1. 바로 width()와 height() 메서드 입니다. width() - 선택요소의 가로 크기를 가져오거나 변경한다. height() - 선택요소의 세로 크기를 가져오거나 변경한다. style 속성에 접근하지 않아도 간단한 명령어로 크기를 조절 가능 합니다. ● 2. 예제를 한번 살펴보세요. 12345678910111213141516171819202122 $(document).ready( function() { //해당 DIV 사이즈 조정 $('#gocoder_size').width('300'); $('#gocoder_size').height('300'); alert(.. 2019. 6. 19.
JavaScript - setTimeout(), setInterval() 차이점 예제 몇 초후에 한번 실행 , 초 마다 반복 실행 안녕하세요. 고코더 입니다. 제 홈페이지 고코더넷(http://gocoder.net)에 학생분이 질문을 남기셔서 열코딩 하다 강의 작성 모드로 스위치를 바꿨습니다. 문의한 사항은 이렇습니다. 요즘 학생분들이 코딩 많이 하시네요. (덕분에 선생님 소리도 들어보네요) 좋은 현상입니다. 차이점 이론 ● 1. setTimeout() 이 메서드는 일정 시간 후에 함수를 한번! 실행합니다. setTimeout(function(){alert('gocoder.net')}, 1000); // 1초 후에 스크립트 실행 ● 2. setInterval() 이 메서드는 해당 시간마다 반복해서 함수를 실행합니다. setInterval(function(){alert('반복 gocoder.. 2019. 6. 17.

티스토리툴바