이번에는 자바스크립트 코드로 간단하게 웹페이지에 시간을 출력하는 방법을 알아보겠습니다 1. 사용할 객체와 메서드 Date() : 시간을 표현할 때 쓰는 객체 Date().getHours() : 시를 출력 Date().getMinutes() : 분을 출력 Date().getSeconds() : 초를 출력 "String". padStart(문자열 길이, 추가할 문자열) : 문자열의 기본 길이를 설정하고 기본 길이보다 짧으면 맨 앞에 지정한 문자를 추가해줌 예) "1".padStart(3,"0") => "001"을 리턴 getInterval(함수, ms단위초) : 함수를 입력한 시간 주기에 한 번씩 실행 2. 사용 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on..

이벤트 리스너와 몇 가지 예시, html 클래스 변경 방법에 대해서 정리해보겠습니다. 1. 이벤트 리스너(EventListener)란? - 특정 이벤트가 발생할 시 자바스크립트 객체에서 이를 감지하는 것 - 이러한 감지한 이벤트에 따라 특정 함수를 호출하거나 값을 변경하는 것을 이벤트 처리라고 한다. 2. 이벤트 리스너 및 처리 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen. h1.addEventListener("처리할 이벤트", 실행할 함수); click : 클릭시, mouseenter : 마우스가 들어올 시, mouseleave : 마우스가 나갈 시 기타 여러 이벤트들이 있음. 아래 링크 참조 https://developer.mozill..

자바스크립트로 html 태그를 변경하고 텍스트를 넣는 innerText와 innerHTML에 대해서 정리해보겠습니다! 1. innerText vs innerHTML innerText : 태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 텍스트만 바뀜) innerHTML : 태그 자체를 가져오거나 바꾸는 기능 (바뀌는 범위 : (텍스트) => 전체 다 바뀜) 2. innerText 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen. - tmp.innerText = '텍스트'를 사용하면 텍스트 자체가 바뀐다. - 위의 예는 tmp.innerText += '텍스트'를 이용하여 계속해서 텍스트를 추가해준 예시 3. inner..

JSON에 대해서 정리해보겠습니다! 1. JSON이란? - JSON(javascript Object Notation)라는 의미의 축약어 - Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷 중요 특징 - 생긴 게 JavaScript 같음, JavaScript 객체 표기와 유사 - 그냥 데이터 포맷이지 문법이 아니다. - 그래서 다른 프로그래밍 환경(다른 언어 등)에도 사용할 수 있다. - key: value의 형태를 가지고 있다. 2. 사용법(JSON.stringify(object)) - 기본 JSON 선언 방법 let json = JSON.stringify(true); console.log(json); //출력 //true - 배열을 넣었을 때 json = JSON.stringify(['..

이번에는 자바스크립트에서 사용되는 객체에 대해서 알아보겠습니다. 저는 자바를 위주로 해서 클래스와 객체에 대해서 익숙한 편인데 자바스크립트에서는 조금 달라서 헷갈리는 부분이 있더라고요. 그 부분 위주로 정리해보겠습니다! 1. 객체 생성 방법 //기본적인 세가지 생성 방법 let obj1 ={}; let obj2 = new Object(); let obj3 = {key1: value1, key2: value2}; 2. 객체에 property(프로퍼티)를 추가 또는 제거 - *추천하지 않음* let obj1 ={}; obj1.key = value; console.log(obj1.key); //출력됨 delete obj1.key; console.log(obj1.key); //출력안됨 - 이미 선언된 객체를 바..

자바스크립트의 함수에 대해서 정리해보겠습니다! 1. 기본 사용법 //함수를 선언 function A(str){ console.log(str); } //함수를 호출 A('Hello'); 2. 객체(주소)를 매개변수로 //함수를 선언 function B(object){ object.name = 'abc'; } //함수를 호출 let object1 = {name: 'qwe'}; B(object1); console.log(object1); // name: 'abc'로 바뀜 - 객체(주소)를 매개변수로 사용가능 3. default 디폴트 값 추가하기 //함수를 선언 function C(a,b ='default 값'){ console.log{`${a}, ${b}`}; } //함수를 호출 C('str'); //a에만..

이번에는 제가 개인적으로 자주 헷갈려하는 = 연산자 대해서 정리해보겠습니다! ==, === 연산자 == : 데이터 타입에 상관없이 비교한다. === : 데이터 타입까지 고려해서 비교한다. let a = '1'; let b = 1; //데이터타입에 상관없이 내용이 같으면 같다! console.log(a == b); //true console.log(a != b); //false //데이터타입까지 검사해서 같아야 같다! console.log(a === b); //false console.log(a !== b); //true object에 주의! let a = {name: 'a'}; let b = {name: 'a'}; let c = a; //1번 console.log{a == b}; //false //2번 ..

처음으로 적는 자바스크립트 정리입니다. 가장 먼저 다른 프로그래밍 언어와 차별화가 되는 변수형과 데이터 타입에 대해서 정리해보겠습니다! 1. let vs var - let과 var은 모두 자바스크립트 변수 선언 방식이다. - 원래는 var만 썻었음 - 이번에 ES6로 넘어오면서 추가된 것이 let 근데 이 var가 굉장히 위험한 놈이다.... *다른 프로그래밍 언어를 배우고 오면 이해가 안 되는 var에서만 되는 것* 선언하기 전에 값을 할당하는 것이 가능하다 num = 1; var num; //아니 이게 에러가 아니라고??? 이것을 var hoisting(호이스팅)이라고 한다 hoisting(끌어올리다)이란 어디에 선언했는지 상관없이 선언한 것을 모두 다 제일 위로 올려주는 것 => 근데 let은 안됨..