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를 읽을 수 ..

2021. 11. 08 > 실습 코드와 출력 결과 -> 02_기본문법.html 3. 연산자 "==" 연산자와 "===" 연산자 "=="은 값이 일치하는지를 확인하는 연산자이고 "==="은 값과 자료형이 일치하는지를 확인하는 연산자이다. 연산자 테스트 4. 제어문 for in 문 for in 테스트 -> 02_기본문법.js // 연산자 테스트 function opTest2() { let area = document.getElementById('area5'); area.innerHTML = '"==" 연산자 테스트 '; area.innerHTML += `'7' == 7 : ${'7' == 7} `; area.innerHTML += `'7' == 7 : ${'7' == '7'} `; area.innerHTML..

2021. 11. 05 > 01_개요_실습문제.html -> 전체코드 개요 실습 문제 문제 1. 색상 조절하기 색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들기 변경 문제 2. 크기 변경하기 버튼에 따라 크기 조절이 가능하도록 만들기 50X50 원본(100X100) 200X200 문제 3. HTML 태그에 접근 텍스트 박스로 입력받은 데이터를 가져와서 출력하기 (단, 구매자는 태그이름, 상품명은 아이디, 구매가격은 name값으로 접근) 구매자 : 상품명 : 가격 : 입력값 출력하기 문제 4. 테이블 만들기 prompt()로 사용자로부터 행과 열의 개수를 입력받아 테이블 만들기 아래의 div 태그에 innerHTML 속성을 사용해서 만들어진 테이블 포함한다. 테이블 생성 -> 01_개요_실습문제..

2021. 11. 04 > 클라이언트 - 서버 구조 -> 프로토콜 : 인터넷상에서의 규약 -> HTTP : 하이퍼텍스트 전송 규약(웹 통신) -> FTP : 대량의 파일을 전송/수신하기 위한 파일 전송 규약 -> TELNET : 원격지에서 서버 컴퓨터를 원격 제어하기 위한 규약 > 클라이언트 주요 언어 -> HTML : 하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적인 기술 마크업 언어 -> CSS : HTML은 뼈대라면 CSS는 꾸미기 위한 옷의 기능을 한다. -> 자바스크립트(JavaScript) : 기능, 로컬의 브라우저에서 실행되는 인터프리터 방식(별도로 컴파일 과정 X)의 프로그래밍 언어 -> jQuery : 존 레식(John Resig) 창안, JavaScript 기반 라이브러리 중 하나로 자..

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 그 값(..