본문 바로가기

IT_Developers/Javascript79

JavaScript - 3자리 마다 콤마 적용 쉬운방법 / toLocaleString 자바스크립트 3자리 콤마 안녕하세요. 고코더 입니다. 3자리마다 콤마는 많은 숫자를 한눈에 보기 쉽게 만들어주는 양식입니다. 그래서 실무 프론트엔드에서는 숫자는 기본적으로 콤마를 찍어 노출하는데요. 자바스크립트로 이 콤마를 작성하는 가장 쉬운 방법을 소개할려고 합니다. ● 1. 우선 정답은 해당 함수를 이용 합니다. 해당 함수가 아니면 문자열을 세어서 콤마를 찍어주는 함수를 사용할텐데요 이 한줄이면 해결 됩니다. 1toLocaleString() // 특정 언어에 맞는 형식으로 반환cs ● 2. 해당 함수로 간단하게 적용해보았습니다. 해당 함수를 숫자를 표현하니 자연스럽게 콤마가 붙습니다. 123456789 document.write(Number(3000).toLocaleString('en')); docu.. 2019. 10. 24.
jQuery - ajax sync 옵션 동기, 비동기 동작 방식은? ajax 동기식은 진정한 동기 방식이 아니다 안녕하세요.고코더 입니다. 요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요. ● 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다. ->코딩 이론 - 동기(synchronous) , 비동기(Asynchronous )의 차이점 ● 2. 우선 사용법은 아래와 같습니다.1234567891.. 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 - select 선택 값 변경시 trigger(), prop() 차이는? trigger() vs prop() ? select 안녕하세요.고코더 입니다. 자바스크립트로 셀렉트 박스를 선택을 변경하는 개발을 할때 유의할 점이 있습니다. 지난 시간에 prop()과 trigger()을 각각 이용하여 셀렉트 박스의 옵션을 변경하는 방법을 배워 봤는데요. jQuery - trigger()로 select 박스 선택 값 변경하기jQuery - prop()으로 select 상태 값 변경이번 시간에는 이 두개의 차이점을 설명하려고 합니다. ● 1. trigger vs prop 각 함수로 select 박스 옵션을 변경할때 용도를 정리해보겠습니다. tirigger() : 사용자가 셀렉트 박스를 변경할때와 같이 이벤트를 발생시키고 싶을때 prop() : 사용자에게 화면에만 해당 옵션을 보여줄때 이벤.. 2019. 10. 17.
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 - trigger()로 select 박스 선택 값 변경하기 자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경 안녕하세요.고코더 입니다. 자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. ● 1.우선 아래 예제를 함께 살펴보겠습니다.1234567891011121314151617function triggerChagne(){ $("#gocoder").val('g').trigger('change');} 셀렉트박스 선택 Go Coder Colored by Color Scriptercs ● 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면 ● 2.왼쪽 select box 가 변경 됩니다. $("#gocoder").val('g')... 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.

티스토리툴바