일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- Visual Studio Code
- date
- Java
- 인텔리제이
- input
- vscode
- CSS
- Maven
- 자바스크립트
- Files
- javascript
- CMD
- 이클립스
- 문자열
- list
- html
- Array
- 자바
- windows
- table
- js
- Eclipse
- string
- json
- 이탈리아
- 배열
- ArrayList
- IntelliJ
- 테이블
- Button
- Today
- Total
목록js (66)
어제 오늘 내일
이번에는 localStorage 사용법을 정리해보았습니다. localStorage란? localStorage에 아이템 추가, 읽기 localStorage에 객체, 배열 저장하기 localStorage에 값 삭제하기 localStorage에 값 전체 삭제하기 localStorage의 아이템 갯수 구하기 localStorage의 key 이름 찾기 전체 key, value 가져오기 localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. 그럼 이제부터 localStorage를 사용하는 방법을 알아보겠습니다. setItem() - key, value..
이번에는 Javascript를 사용하여 사용자가 버튼 클릭시 특정 노드를 복사하고, 그 노드를 복사하는 방법을 정리하였습니다. cloneNode() Javascript에서 노드를 복사할 때는 cloneNode() 라는 함수를 사용합니다. node.cloneNode(); node.cloneNode(deep); 파라미터 deep : optional. true/false 값을 넣어준다. 해당 노드의 자식 노드까지 복사하려면 true 해당 노드만 복사하려면 false 리턴값 cloneNode 복사한 새로운 노드를 리턴한다. 노드 복사하기 - cloneNode() 만나서 반가워요 .red-border { border : 1px solid red; height : 1em; } function copyDiv() { ..
Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 다음의 함수를 사용합니다. setInterval() clearInterval() setInterval() setInterval() 함수는, 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수입니다. 이 함수는 다음의 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위), 1초=1000밀리세컨드 function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열합니다. ex) param1, param2, param3.... 이 함수는 다음 값을 리턴합니다. intervalID..
Javascript에서 정의한 Object를 그대로 출력하면 아래와 같이 [object Object] 값이 출력됩니다. const obj = { x : 'x', y : 'y', z : { z1: 'z1' } }; document.write(obj); JSON.stringify() 함수 사용하기 만약, 객체(Object)의 값을 출력하고 싶으면, JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환해 주어야 합니다. JSON.stringify() 함수에 대한 자세한 설명은 지난 포스팅을 참조하세요. [Javascript] 객체를 JSON으로 변환하기 [Javascript] 객체를 JSON으로 변환하기 Javascript에서 사용하는 객체(Object)를 네트워크를 통해 전송하려면 어..
지난번에는 div에 onclick 이벤트를 거는 방법, 그리고, div에 마우스 오버되었을 때 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보았습니다. [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. hianna.tistory.com [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기 [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나..
Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textContent 차이점 이번에는 DOM의 CSS Style을 변경하고, 읽어오는 방법을 정리해 보도록 하겠습니다. 1. style 속성값 변경 (1) style 속성 사용하기 - css 속성 하나씩 추가하기 (2) style.cssText 사용하기 - css 속성 한번에 여러개 추가하기 (3) style, style.cssText 사용시 주의할 점 2. style 속성값 읽어오기 (1) styl..
Javascript에서 주석을 다는 방법은 2가지가 있습니다. 한줄 주석 달기 여러줄 주석 달기 한줄 주석 달기 ( // ) // id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. document.getElementById('greeting').innerText += '안녕하세요~'; 간단하게 한줄짜리 주석을 달때 사용합니다. 여러줄 주석 달기 ( /* 주석내용 */ ) /* id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. */ document.getElementById('greeting').innerText += '안녕하세요~'; 여러줄의 주석을 한번에 추가해야 할때 사용합니다. '/*'(주석 시작)와 '*/'(주석 종료) 표시가 항상 대꾸가 ..
React의 개발 환경을 구성하려면, 여러가지 도구들이 필요하고, 이 도구들에 대한 설정을 해 주어야 한다. 대표적으로 webpack + babel 설정을 해 주어야 한다. webpack : JavaScript의 static module bundler babel : JavaScript Compiler (Transpiler) babel babel은 Javascript의 compiler라고 할 수 있다. Java나 C의 컴파일러처럼, 소스코드를 바이너리 파일로 변환하는 것은 아니지만, 아래와 같이 React의 JSX문법을 Vanilla JavaScript로 변경하거나, 최신버전의 문법을 구 버전 문법으로 변환해 준다. JSX 를 Vanilla JavaScript로 변경해 준다. React에서는 JSX라는 R..
정규식을 이용하여 문자열의 마지막에 콤마가 있을 경우, 콤마를 제거하는 방법을 소개합니다. 문자열에서 마지막 콤마 제거하기 const str1 = "apple, banana"; const str2 = "apple, banana,"; const str3 = "apple, banana, "; str1과 같이 문자열의 끝에 콤마가 없을 경우, 문자열을 그대로 유지하고, str2와 같이 문자열의 끝에 콤마가 있을 경우, 문자열에서 콤마를 제거하고, str3과 같이 문자열의 끝에 콤마가 있고, 빈 공백이 이어진 경우, 문자열에서 콤마를 제거하는 방법을 소개합니다. const str1 = "apple, banana"; const str2 = "apple, banana,"; const str3 = "apple, ba..
배열 첫번째 값 가져오기 const arr = [1, 2, 3, 4, 5]; const firstValue = arr[0]; document.writeln(firstValue); const firstValue = arr[0]; 배열의 첫번째 값을 가져오기 위해서 배열의 0번째 index 값을 읽었습니다. (배열의 index는 0부터 시작합니다.) 배열 마지막 값 가져오기 const arr = [1, 2, 3, 4, 5]; const lastValue = arr[arr.length - 1]; document.writeln(lastValue); const lastValue = arr[arr.length - 1]; 배열의 마지막 값을 읽어오기 위해서 (배열의 길이 - 1) 번째 index 값을 읽었습니다. 위..