모-코드

I. INTRO : 지난시간 II. 값 변수 컬렉션 : ES6 1. Binary and octal Literals ES6는 몇가지 달라졌다. (1). 2진수와 8진수의 기호를 표현할 수있다. : 기존에 없던 값 표현식으로 이진수(b)와 8진수(o)가 추가되었다 ES6에서 이제 표현하는 방법이 추가되었다 2. let 키워드 (1) 기존 변수의 문제점1 : 변수를 선언하지 않아도 변수?를 사용할수 있다. 기존에는 붙이지 않아도 사용이 가능했다 window로했다 var는 함수 안이 아니면 뭘 해도 window의 속성으로 붙는다. 즉 암묵적 전역변수 양산할 수있다. (2) 문제점2: 변수를 중복해서 선언해도 문제가없다. 의도하지않은 변수값의 변경가능성이 크다. 기존에는 해도 에러가 안났다. 이미 선언한적있다고 ..

I. 영역을 위한 시맨틱 태그(17강) 묶는데 div가 쓰인다 난해한 경우가 생긴다. 1. 시맨틱 태그가 없던 시절 : HTML4까지는 다음과 같은 필수 구조를 설명하는 태그가 없었다. 사람이 만든거 뿐만아니라, 사람이 읽는게 아니라 크롤링할 때 등이있다. API제공안하고 화면만 줄때 다 div라서 main영역 알수가없다 그전에는 식별하기위해서 id를 넣어주었다. 식별자로 영역구분했음 2. 문서의 내용을 식별한는데, 표준방식이 없었던 시절 제각각 필수 구성들 : 이 구성을 식별하기 위해 나름대로 이름을 부여하였다. 누구가 맞고 틀리고가 아닌데, 영역마다 붙일때 통일 필요성이있음 그 결과 head main footer 세가지로 만들어짐 저작자 정보가 위에라도 footer라고 부름? footer로 그대로 하..

1~3회 I. 웹 퍼블리싱 개발환경 준비하기 1. 웹문서 만들기 2. vscode 준비 3. webDeveloper 준비 II. 웹문서와 마크업 도구의 이해 1. 웹문서에 대한 이해 (4) 컨텐트 블럭태그는 5가지로 대별된다. 제목 / 문장 / 목록 / 표 / 폼 html 태그 안 head태그, body태그로 나누어진다. 2. 컨텐츠 작성하기 (5) 태그사이에 쓰면된다 컨텐츠인지 여부에 따라 HTML인지 CSS로 나누어진다. 이는 정보의 목적에 따라 달라진다. 컨텐츠이면 HTML이고 , 꾸미는것에 불과하면 CSS이다 3. 컨텐츠 마크업을 위한 태그들 (6) 는 paragraph를 의미한다. 이때 태그는 방을만들어주는 블럭태그과 컨텐트를 설명해주는 태그(inLine)로 대별된다. III. 제목 컨텐츠 구조..

I. INTRO : 어제것 어제 boy에게 지령을 내렸다. 우리는 창조적인 작업하고 있음, 움직임! 이는 우리가 넘어갈수없는 세상에 객체를 만들었다 boy라는 입주민이다 입주민은 스스로 혹은 내가 지령받은애가 움직이는 애가있다. 우리는 canvas로 window쓴다. canvas는 입력뿐만 아니라 출력도 해준다. 어제 클릭이라는 입력까지 해봤음 이 외에도 스스로 움직이는 캐릭터가 필요하다. 과거 부터 히스토리 남아있는데, 과거 데이터말고 현재 데이터만 보면된다. 이런거 보면 우리가 화면을 다시 그린다. II. 캐틱터 움직이기 위해서 이전 캐틱터 지우기 1. 들어가며 - 클릭할때 마다 이벤트 발생 일단 우리는 애니메이션처럼 내가 멈춰있던 가던 간에 계속 그리게끔 하는데, 몇 프레임 그리는지를 결정하면된다...

I. INTRO 지금은 언어만 배우는 것이여 게임 구현능력은 부족하지만 구조는 가능함 만들고자 하는것을 생각하고, 게임은 못만들지만 구조는 만들기가능 how? 말하는것으로 지난시간 이미지 그리기로 함수를 이용했음 II. drawImage 이용하기 1. 이미지 이해하기 var img = this.document.querySelector("img"); var img = new Image(); img.src = "./image/boy.png"; img.onload = function(){ ctx.drawImage(img,0,300,105,148.24, 100,300,105,148.24) //위가 이미지, 아래가 캔버스 위치두기 } 위의 경우 img에서 위 4개는 img에 대한 설정이다. 좌측 상단부터 x,y축..

I. 브라우저 플랫폼 1. 브라우저 플랫폼 (1) 브라우저 플랫폼 언어는 플랫폼으로 프로그램 만들기 -> 플랫폼은 브라우저 -> 브라우저 직접 이용할수 없어서, 이용 도와주는 API를 이용한다 -> DOM BOM CSSOM 을 이용함 [하단 보충 참고] 언어(JavaScript) -> API(DOM) -> 플랫폼(브라우저) 이 중 DO CSS가 UI(동적문서)이다. 어떤 프로그램도 사용자와 상호작용위한 인터페이스가 중요 이것이 GUI다 브라우저는 윈도우 형태 어플만들수 잇는 GUI제공해주는것임 (과거 윈도우 시스템) 사용자 입출력 처리하기위해 DO CSS가 존재한다. 틀을 제공해주는 객체가 window객체이다. window는 다양한 것들이 있는데, 그 중에서 화면에 사용자에게 입출력 받을수있는것이 doc..

I. INTRO : 프로젝트 관련 목표 코딩연습임 기한내 완수하겠다가 바람직하지 않음, 기한 내 어떻게 만들어지긴 하나 오만가지 쓰레기통이 존재함 자기가만든거 설명도, 오류원인도 모르고 목표를 작게 여러개 (이거하나만 만들더라도 완성도있게) 자랑할만한 작은거 만드는게 코딩습관에 좋은 방향 완성도라 함은 자존심이 높아지는것이다. 앞으로 이론 + 프젝 + 실습 동시에 간다. II. 객체 1 Top -down 설계 (1) 시나리오에서 개체 식별하기 각각 개체가 무엇인지 생각해보기 슈팅게이 : 빌런 / 전투기 (2)객체분석과 개체분석 JS는 클래스가 없어서 개체는 function 객체로 만든다. (3) 캡슐화 시나리오에서 전투기에 행동 체크하기 => 개체마다 역할 정리 시나리오 => 실체객체(개체 객체분석)는 ..

I. INTRO : 지난시간 복습 1) 지난 시간 new안쓰고 하기와 / new 쓰기 new 쓰면 일반함수가 아니라 new한 객체 초기화임 어떤 용도로 할것인지 미리 염두해두고 정의해야한다. 대문자 함수명은 얘는 객체를 생성하고 초기화할때 써야겠다는 의미 이름부터 목적어나 주체(데이터)같은 느낌이다. 2) 문제시 됨 왜? function Exam(){ this.kor = 30; this.eng = 20; this.math = 40; this.total = function(){ return this.kor + this.eng + this.math; } } var exam = new Exam(); console.log(exam.total()); var exam1 = new Exam(); console.log..

I. 자바스크립트 : 함수 1. 함수?? 대입?? 객체?? JS는 함수를 정의 하는 일이 없다. 내가 쓰면서 정의를 한다. int add(int x, int y){ return x + y; } ↑이거를 var add = new Function("x, y", "return x+ y"); 함수객체로서 이렇게 할 수있다. (이 경우 new 'F'unction 으로 해야한다 ) 함수객체 이름은 그냥 var add로 바로 된다. add 호출 시 console.log(add(3,4))로 호출이 가능하다. var add = new Function("x,y", "return x+y;"); console.log(add(3,4)); JS는 정의한다고 하고 쓸 수있다 아래와 같이 var add =function(x,y){ ..

I. INTRO : 시작하며 이때까지 백단으로했고, 이제 프론트 단으로 유용하게 가능하다. II. Wrapper 클래스 지난시간 이어서... 1. 2. Boxing에 사용되는 Wrapper 클래스 이제 자바스크립트로 III. JavaScript [데이터, 컬랙션] 1. 값과 Wrapeer 클래스 (1) JS의 데이터 특징 JS는 넣는 형태가 아님 100% 참조하는 형태이다. 값변수 형식이 없어서 모든것은 객체화 되어있음 참조형식도 언급하지 않는다. 그래서 컴파일러에 의한 오류확인 불가능하고, 실행환경에 의한 오류를 확인할 수 있다. (2) 참조변수의 기본값? 이 경우 참조가 가진 기본값은? 자바는 null / JS 는 undefined이다. JS는 기본형이 wrapper이다. undefine은 타입이다...