본문 바로가기

전체 글

[TIL-112] Javascript 클래스 객체지향 언어: 클래스 객체지향 클래스를 이용하여 사물/물체(object)들을 객체(object)로 정의해서 프로그래밍하는 것이 자연스럽다. 더 편하고 유연한 프로그래밍을 할 수 있다. 개념 클래스는 연관 있는 데이터를 묶어놓는 컨테이너라고 생각하면 된다. 데이터가 들어있지는 않고 데이터를 받을 수 있는 템플릿이다. 즉, 클래스는 객체의 틀만 만들어둔 것이고, 이 틀에 데이터를 넣어 찍어낸 객체가 인스턴스이다. 클래스는 정의만 한 것이라 메모리에 올라가지 않는다. 반면, 실제 데이터가 들어간 객체는 메모리에 올라간다. 구성 : 속성(field), 함수(method). 데이터 클래스 : fields로만 구성된 클래스. 캡슐화 : 클래스 안에 내부에서만 보이는 변수와 외부에서도 보이는 변수로 나눔. 사용법 .. 더보기
[TIL-111] 노마드코더 그림판(JS) 클론코딩 #2.4~#2.7 (완강) #2 자바스크립트 브러시 사이즈 range 에 "input" 이벤트 event.target.value로 input의 range 값 구함. ctx.lineWidth 값을 range 값으로 override. filling mode mode 버튼 fill : 전체 캔버스에 색상 채움. paint : 캔버스에 선 그림. "fill"이라 써있는 버튼 클릭하면 "paint"로 바뀌게 함. filling 변수 만들어, false/true 껐다켰다 함. fill 실행 fillRect(x, y, w, h) : width와 height로 결정된 사이즈로 (x, y) 위치에 색칠된 사각형 그림. fillStyle : line을 위한 strokeStyle로는 사각형의 색깔을 바꾸지 못함. 이미지 저장 캔버스 > 우클릭 : ".. 더보기
[TIL-110] 노마드코더 그림판(JS) 클론코딩 #1.0~#2.3 #1 셋업 + 스타일 레포지토리 만들기 README 파일 추가 .gitignore는 node로 추가 내 pc에 복제 : git clone https://github.com/JUNSEULGI/paintjs (레포지토리 주소) 꼭 명령어로 안 해도 됨. 프로젝트 셋업 index.html에 app.js(에 로)와 styles.css(에 로) 연결. 깃 커밋하기 git add . git commit -m "Initial Commit" [에러] 깃헙 계정이 연결되어있지 않은 듯... 더보기 더보기 *** Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your N.. 더보기
[TIL-109] 위코드 8일차: JS replit 27~33 "ES6 추가 기능", "DOM" Javascript 화살표 함수 개념 arrow function은 function이라는 키워드 대신 => 를 사용하여 함수를 표현하는 방식이다. ES6에서 새로 나온 함수 표현법이다. 사용법 1. 함수명이 없는 함수 //ES5 function() {} //ES6 () => {}​ 2. 함수명이 있는 함수 //ES5 //함수 선언식(Function Declaration) function getName() {} //함수 표현식(Function Expression) const getName = function() {} //ES6 const getName = () => {}​ 화살표 함수에서 인자가 하나일 때는 소괄호를 생략할 수 있다. 예) const getName = (name) => { }; 만약 함수에 .. 더보기
[TIL-108] 위코드 7일차: JS replit 23~26 Javascript 스코프 개념 스코프는 변수가 쓰일 수 있는 범위를 의미한다. 종류로는 블록 스코프와 함수 스코프가 있다. 블록(block)은 { } (중괄호)로 감싸인 영역이다. function이나 for문, if문 등에서 { }가 하나의 블록인 셈이다. 이 블록 내부에서 정의된 const, let 변수는 블록 내부에서만 사용할 수 있는 블록 스코프에 해당하며, 이 변수를 지역변수(local variable)라고 부른다. 블록 밖은 global scope로, 이 영역에서 정의된 전역변수(global variable)는 코드 어디서든 접근 가능하다. namespace는 변수의 이름을 사용할 수 있는 범위이다. scope이기도 하지만 변수의 이름에 대해서 namespace라고 부른다. 전역변수를 남용하면.. 더보기
[TIL-107] 위코드 6일차: JS replit 22 Javascript Math 객체 개념 Math 안에 다양한 수학 계산 메서드가 담겨있다. 예를 들어 Math.random()은 0 이상 1 미만의 소수를 랜덤으로 만들어준다. (이때까지 1도 포함되는 줄 알았는데 0.999999999까지만 나온다고 한다.) 보통 이 값을 그대로 사용하기보단, 원하는 범위가 있을 때 그 최대값을 이 값에 곱하고 다시 Math 객체 안의 메서드를 이용해서 정수로 만든다. 참고) JavaScript Math Object https://www.w3schools.com/js/js_math.asp 사용법 예) 최소값(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수 function getRandomNumber (min, max) { const rando.. 더보기
[TIL-106] 위코드 5일차: JS replit 21 / 자바스크립트 세션 / 개발자 도구 Javascript new Date() 개념 new 연산자에 Date 생성자를 사용하여 날짜 객체를 생성할 수 있다. 그럼 컴퓨터는 GMT 기준으로 현재 시간을 알려준다. (한국 표준시는 GMT+0900이다.) 이 값을 그대로 사용하기보단, 이 값에 메서드를 사용해서 년/월/일/시/분 등 필요한 정보를 받아서 쓴다. 특정 날짜를 인자로 보내주면 해당 날짜의 Date 값을 받을 수 있다. 사용법 let rightNow = new Date(); let year = rightNow.getFullYear(); let month = rightNow.getMonth()+1; let date = rightNow.getDate(); let day = rightNow.getDay(); let currentHour = r.. 더보기
[TIL-105] 위코드 4일차: JS replit 8~20 Javascript 비교 연산자 개념 연산자 양쪽의 두 값을 비교한다. 비교 연산자에는 동치 연산자와 관계 연산자가 있다. 동치 연산자 : 같다는 의미의 ==, ===, 같지 않다는 의미의 !=, !== 가 있다. "=="는 느슨한 동등 비교 연산자로, 데이터 타입은 달라도(예. "3"과 3) 값이 같으면 성립한다. "==="는 좌항과 우항의 값이 데이터 타입까지 완벽히 같을 때 성립하는 일치 연산자이다. 보다 엄격하게 비교한다. 관계 연산자 : 숫자에 대해 크기를, 문자열에 대해 사전순을 비교하는 >, =, 더보기

티스토리툴바