1cm

2021. 11. 11   > 자바스크립트 내장객체 : Date 객체   -> 날짜를 관리하는 객체var date = new Date(); // 현재 날짜 시간var date = new Date(‘월 일‘);var date = new Date(‘월 일, 년도‘);var date = new Date(‘월 일, 년도 시간(시:분:초)’); 메소드내용get/setFullYear()년도 반환 / 년도 저장get/setMonth()월 (0:1월 ~ 11:12월)get/setDate()일(1일 ~ 31일)get/setDay()요일(0:일요일 ~ 6:토요일)get/setHours()시간(0~23시)get/setMinutes()분(0~59분)get/setSeconds()초get/setMilliseconds()밀리세컨초..

2021. 11. 10 > 객체 배열 활용 -> 생성된 객체를 배열에 넣어 활용 가능 var 변수 명 = [ ]; // 배열 생성 데이터 대입 : 변수 명.push({속성 명: “값“, 속성 명: “값”, ...}); > 실습 코드와 출력 결과 -> 05_객체.html 객체 배열 객체와 배열을 사용해서 데이터를 관리할 수 있다. 실행 확인 -> 05_객체.js // 객체 배열 let btn5 = window.document.getElementById('btn5'); btn5.addEventListener('click', () => { let area = document.getElementById('area2'); // 배열을 사용하지 않았을 경우 let student1 = {name: '홍길동', jav..

2021. 11. 09 > 실습 코드와 출력 결과 -> 04_함수.html 화살표 함수(Arrow Function) ES6에 도입된 함수 선언 방법으로 function 키워드 대신 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. [표현법] - 매개 변수가 없을 때 : () => { ... } - 매개 변수가 하나 일 때 : x => { ... } - 매개 변수가 두 개 이상일 때 : (x, y) => { ... } - 리턴 처리 - 처리할 라인이 여러 개라면 {}로 감싸서 처리해야 한다. (x, y) => { 실행 구문; return x * y; } - 처리할 라인이 하나라면 {}와 return 문을 생략할 수 있다. (x, y) => x * y; * 기존 function과 this가 가..

문제상황 익명 함수를 리턴하는 함수 실습 과정에서 value값으로 userName을 입력 받아 alert창으로 출력해줘야 하는데 입력 후 -> 데이터를 전달하지 못하는 상황 발생 Console창에 뜬 Error Message는 아래와 같다. Uncaught TypeError: Cannot read properties of null (reading 'value') at returnTest2 (04_함수.js:104:55) at HTMLButtonElement. (04_함수.js:98:5) 104번째 55자리에 봤을 때 value에 빨간 x표가 되어 있고, 마우스를 올려보면 'cannot read properties of null' : null값의 properties를 읽을 수 없다. value를 읽을 수 ..

UI vs API UI (User Interface) ->사용자가 시스템을 제어하기 위해서 사용하는 조작장치 API (Application Programming Interface) -> 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치 경고창은 우리가 만든 것이기도, 만들지 않은 것이기도 하다. why? 경고창이 실행되는 타이밍이나 경고창에 표시되는 text는 우리의 의도가 반영된것이기 때문에 우리가 만들었다고 할 수 있음. 한 줄짜리 코드안에는 기능, 모양 등이 설명되어 있지않음. -> 웹브라우저를 만드는 사람들이 대신 만들어줌 -> alert라는 함수를 사용하면 경고창을 띄워주겠다는 약속을 한 것임. API는 순서와 단어와 문법처럼, 부품과 부품의 결합방법처럼 뗄레야 뗄 수 없는 관계..

객체(object) 예고 코드가 많아지면 정리정돈 하기 위한 도구 -> 함수 복잡도의 한계에서 서로 연관된 함수와 서로 연관된 변수를 같은이름으로 그룹핑 하는 도구 -> 객체 서로 연관된 함수와 변수들을 그룹핑해서 정리정돈하기 위한 수납상자 - 객체 (폴더라는 관점으로 봐도 된다.) -> body.setBackgroundColor ~ 등으로 만들어주는 걸 보면 body라는 객체가 생기는 것을 확인할 수 있다. => body(객체).setColor(객체에 속해있는 함수)('color_name'); 객체에 속해있는 함수 -> 매소드(method) * alist[i].style.color = color; -> ='color';로 적혀있을 시 실행이 안되는 것을 볼 수 있었다. -> 따옴표 확인하기. 객체 쓰기..

함수 (Function) 함수의 기본 문법 function 뒤에 함수 이름을 붙여준다-> ex) two(){ 함수 내용 } 컴퓨터는 two라는 함수를 만들려고 하고(function), {}안의 내용은 two함수의 내용이구나-. 하고 기억한 뒤, 그 아래 어디든 two(); 라는 함수를 붙여주면 {}안에 있는 함수를 실행시키고자 하는구나-. 하고 실행시킨다. 함수 : 매개변수와 인자 프로그래밍 상에서의 함수 입력(Parameter, 매개변수 / Argument 인자) - 출력 (Return) 2가 해당되는 자리(left), 3이 해당되는 자리 (right) ->매개하는 변수 (parameter) -> 이제 left = 2, right=3으로 약속한다. 2,3이라는 값 -> 인자 = Argument 그 값(..

리팩토링 중복의 제거 리팩토링 : 코딩을 하고 나면 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수에 편리하도록 개선하는 작업. documnet.querySelector('#night_day') 를 -> this 로 바꿔줌으로써 훨씬 간결하고 깔끔한 태그로 정리 되었다. document.querySelector('body') -> var target = document.querySelector('body') 코드를 추가해준 뒤, 기존 자리에 target으로 넣어주면 훨씬 간결해진 것을 확인할 수 있다. -> 코드의 양이 줄었고, target으로 되어있는 부분은 'body' 부분만 바뀌는 경우, target이 전부 바뀔 수 있다. 배열 :Array 배열은 대괄호부터 시작해서 대괄호로 끝난다 ..

조건문 예고 : (if) 하나의 프로그램이 하나의 흐름으로 가는 것이아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것. 비교 연산자와 블리언 Comparison operators & Boolean === -> 동등 비교 연산자 / 이항 연산자(좌항 우항을 결합해서 어떠한 데이터를 만든다.) 왼쪽의 값과 오른쪽 값이 같냐 묻는 연산자 -> 참이면 true, 거짓이면 false -> 두 가지를 묶어서 Boolean이라고 부름. 숫자 (Number) - 多 (무한) 문자열 (String) - 多 (무한) 불리언 (Boolean) - true / false 비교 연산자 ampersand less than -> (>, 보다 큰) 수업은 를 ..

JavaScript : 사용자와 상호작용하여 반응하는 동적인 언어다. onclick = "" -> 자바스크립트 코드를 onclick했을 때 ""안에 있는 내용들을 작동시키게 한다. JavaScript : HTML위에서 동작하는 언어. : 스크립트 내에 있는 코드를 자바스크립트로 해석한다. 자바스크립트 : 계산기 기능처럼 동적으로 효과를 냄. HTML : 문자 그대로 출력 document.write(); -> 웹페이지 상에서 글자를 출력하기 위해서 쓰는 태그이고, 태그를 통해 감싸주면 자바스크립트 코드라고 알려줄 수 있다. 이벤트 onclick="" -> onclick속성의 속성 값은 반드시 자바스크립트가 와야 한다. -> onclick 속성 값은 웹 브라우저가 기억하고 있다가 onclick 속성이 위치하..