IT

ALL

자바스크립트 HTML 표시내용 변경 innerHTML 사용 방법

자바스크립트로 무언가 처리를 하고 그 결과에 따라 화면상에 문자열을 변경하고 싶은 경우가 있습니다. 이런 경우에는innerHTML프로퍼티를 사용해 표시하고 싶은 내용으로 변경할 수 있습니다. innerHTML프로퍼티를 사용해 표시내용을 변경하는 방법을 알아보겠습니다. innerHTML 우선innerHTML이 무엇인지 살펴보겠습니다. innerHTML은 HTML요소의 내용을 ㄹ변경하고 싶은 경우에 사용하는Element오브젝트의 프로퍼티입니다. 예를 들어div요소나span요소에 작성한 동적으로 내용을 변경할 때 사용할 수 있습니다. i...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 항목 표시, 비표시 방법 예제

문자열이나 사진을 자바스크립트를 사용해 표시하거나 숨기는 방법을 알아보겠습니다. 우선 표시 또는 비표시를 하는 방법은 2가지가 있습니다. display visibility 2개의 설정 방법의 사용법과 차이점을 확인해 보겠습니다. display 우선 display로 표시, 비표시 하는 샘플을 보겠습니다. display 표시/비표시 테스트 문자 function disControll(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { ...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 람다식(화살표 함수) 사용 방법 주의점

자바스크립트 ES6에서 도입된 화살표(ARROW) 함수가 있습니다. 흔히 람다식이라고 합니다. 람다식 함수를 사용할 때 주의할 점이 있습니다. 일반적인 방법으로 작성한 함수와 람다식으로 작성한 함수를 비교해보면서 주의점을 보겠습니다. 일반 함수와 람다식 함수 람다식을 몰라도 누구나 사용할 수 있는 일반적인 함수와 람다식 함수를 비교해서 작성해보면 다음과 같습니다. // 일반 함수 let normalFunc = function(x){ console.log(x); } // 람다식 함수 let arrowFunc = (y) => { con...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 jQuery Form 데이터 배열, 쿼리 형식으로 전송하기

텍스트 박스에 입력한 값을 jQuery를 사용해 처리할 로직에 전달해야 하는 경우가 많습니다. 또는 체크박스나 라디오 버튼등 입력할 수 있는 항목이 많은 경우도 있습니다. 로직은 자바나 PHP 등등 따로 만들어 놓은 경우가 많기 때문에 POST 또는 GET으로 전송합니다. 이렇게 로직 부분에 입력한 값을 전송할때 항목이 여러 개일 경우 배열로 전송하면 값을 취득하기 편리합니다. serializeArray 배열 형식 serializeArray를 사용하면 데이터를 전송할 때 배열 형태로 전송을 할 수 있습니다. 예제를 보면서 사용방법을...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 문자열 뒤에서부터 자르기 slice

문자열을 자르기 위해 대표적으로 substring 함수를 사용합니다. 앞에서부터 문자열을 자른다면 substring로 충분하지만 뒤에서부터 자르고 싶은 경우에는 slice 함수를 사용해야 합니다. 문자열에서 substring 함수와 slice 함수의 자세한 차이점을 아래를 참조해주세요. 자바스크립트 문자열 자르기 slice와 substring 차이점 링크링크 slice 함수로 문자열을 뒤에서부터 자르는 방법을 보겠습니다. slice 문자열 뒤에서부터 자르기 slice (시작위치, 종료위치) 기본적인 사용방법은 아래 예제처럼 사용합니...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 문자열 자르기 slice와 substring 차이점

slice 함수는 배열을 자를때 많이 사용하지만 문자열을 자를 때도 사용합니다. 그리고 문자열을 자르기 위해 substring 함수를 많이 사용합니다. slice 함수와 substring 함수로 문자열을 자를때 차이점을 보도록 하겠습니다. slice와 substring 차이 substring(시작위치, 종료위치) slice(시작위치, 종료위치) 예제1 var str = "ABCDEFGHIJK"; var subRs = str.substring(0,2); var sliceRs = str.slice(0,2); console.log("su...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 LocalStorage 사용 방법과 쿠기와 차이점

자바스크립트를 사용하면서 값을 저장해야 하는 경우 변수를 사용합니다. 화면 이동이 있거나 영구적으로 저장해야 하는 경우 DB에 저장을 하거나 임시적으로 저장하고 싶은 경우 쿠키(cookie)를 사용하기도 합니다. 이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다. LocalStorage란? ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작....
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 ==와 === 차이점과 Object.is 사용 방법

자바스크립트에서 값을 비교하는 경우 == 또는 === 을 사용해 값을 비교합니다. 비교 연산자인 == 와 === 의 차이점에 대해서 알아보려고 합니다. 이미 알고 계신 내용이라면 끝가지 읽지 않으셔도 괜찮습니다. 그리고 Object.is 대해서도 살펴보도록 하겠습니다. == 와 === 차이 먼저 비교 연산자 == 와 === 에 대해서 살펴보겠습니다. 자바스크립트를 공부하면서 값을 비교하기 위해 사용하는 연산자로 ==를 배우게 됩니다. 하지만 == 보다는 ===를 사용하는 경우가 더욱 많습니다. 이유는 ==에는 형변환 기능이 암묵적으...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 console 사용 방법 크롬 콘솔 출력하기

이번에 소개할 것은 자바 스크립트 console 메서드입니다. 대부분 console.log로 디버그 확인용으로 많이 사용을 합니다. log 외에도 많은 함수들이 있으며 디버깅에 도움이 되는 기능도 많이 있기 때문에 정리를 해보았습니다. 브라우저는 크롬(Chrome)을 사용하도록 하겠습니다. console.log() 〇 문자 리테랄 log메서드 안에서 문자 리테랄을 사용할 수 있습니다. 사용할 수 있는 형식은 다음과 같습니다. ・%o / %O - for objects; ・%d / %i - for integers; ・%s - for s...
2023.08.09
ALLIT자바스크립트
다음 페이지로