공부정리

이전까지 localstorage 사용과 배경화면을 처리하는 과정을 거쳤다. 마지막으로 날씨 정보를 불러와 웹 페이지에 표시해보도록 한다. 여기서는 데이터만 가져와 한번 만들어본다. 코드먼저 살펴보자 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 123 00:00 http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter weather.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

이전시간까지 localstorage를 이용한 내부 데이터를 처리하여 페이지를 조작해보았다. 이번에는 웹 페이지의 꽃인 UI를 만들텐데 배경화면으로 이쁘게 만들어 본다. 우선 전체코드는 아래와 같다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 123 00:00 http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter background.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ..

이전시간에 localstorage가 무엇인지 어떻게 만들고 작용하는지 알아보았다. 이번에는 새 localstorage안에 여러 값을 넣고 삭제해보는 작업을 해보자. 우선 코드는 아래와 같다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 123 00:00 http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter 추가된 코드를 보면 우리는 form태그를 바탕으로 text를 넣는 페이지를 구성한다. 클래스 이름이 todoform과 todolist라는 태..

localStorage 크롬 개발자도구의 다음과 같은 장소에 localstorage가 있다. 이것은 간단하게 말해 '새로고침을 하여도 기존의 데이터가 이곳에 보관되어 있어 계속 사용할 수 있다' 라고 이해하면 편하다. 현재 여기에는 아무것도 저장되어 있지 않다. 이제 이것을 이용하는 페이지를 제작해보자. 먼저 CSS와 HTML이다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 123 00:00 http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter index.css 1 2 3 ..

자바스크립트로만 간단한 크롬 웹 클론 코딩을 해보자. 타이머제작 우선은 웹 페이지를 만들 기본 html이 필요하다. 폴더에 html파일과 css 그리고 시계를 만들 js파일을 만들어준다. html파일 1 2 3 4 5 6 7 8 9 10 11 12 13 14 123 00:00 http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter js파일은 로 적용하고 태그안에 h1태그가 있다. 각 태그의 클래스 이름이 명시되어 있다. css파일 1 2 3 h1{ color:blue; } css파일은 h1태그에만 설정한다. h1태그의 색이 파란색으로 나타날 것이다. 이..

이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 참조, 복사 의 개념은 프로그래밍 언어에서 많이 사용된다. 복사는 말 그대로 복제한다고 생각하면 되고, 참조는 가리키는 것 이라고 이해할 수 있다. 변수의 데이터가 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다. 코드를 통해 이해해보자 -소스 코드- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 var a ..

이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. Object 객체는 객체의 가장 기본적인 형태를 가지고 있다. 즉 최상위 객체이며 모든 객체들의 부모이다. Object 객체의 프로토타입은 모든 객체들의 프로토타입이다. Object 객체에서 프로토타입을 사용한 경우와 사용하지 않는 경우가 있다. 먼저 사용하지 않으면 생성자 함수와 함께 호출할때, ()안에 인자를 명시하는 특징이있다. 프로토타입을 사용하면 메서드()만으로 호출한다. 프로토타입을 이용하면 모든 객체가 사용할 수 있는 메서드이다. 단, Object..

이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 표준 내장 객체는 자바스크립트에서 기본적으로 가지고 있는 객체를 뜻한다. 기본적으로 프로그래밍 하는데 필요한 도구들이기 때문에 중요하다. JS파일을 보면서 'Object' , 'Array', 'String', 'Function', 'Math' 등의 키워드를 본적이 있다. 이들이 모두 자바스크립트에 기본적으로 가지고있는 객체이다. 이들의 기능을 아는것은 Reference를 참고해서 공부하면 된다. 여기서는 Array객체와 Math객체를 이용하여 간단한 랜덤 함수..

이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++에서 포인터를 배우고 클래스를 배우게 된다. 자바스크립트에서 클로저를 알아보고 이후에 알아보는 이 프로토타입을 배우는것은 C++을 배우는 커리큘럼과 비슷하다고 생각하면 좋다. 그만큼, 클로저와 프로토타입이 중요한 내용이라고 생각하면 좋을 것 같다. 참고 및 출처 : http://insanehong.kr/post/javascript-prototype/ http://www.nextree.co.kr/p7323/ 위 링크에서 더 자세하게 프로토타입에 대해 알 수..

이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++에서 상속은 부모 클래스의 내용이 자식 클래스에서 사용할 수 있다고 간단하게 이해할 수 있다. 이와함께 가상함수 오버라이딩, 다형성 등의 개념이 나오게 되며 객체지향 프로그래밍 이라고 한다. 자바스크립트에서 상속또한 비슷한 개념이며 여기서는 사용법만을 확인해보자 우선 상속은 로직의 재활용을 위해 사용한다. 이를 위해 'prototype' 이라는 것을 사용하며 이 내용은 다음 장에서 살펴볼 것이다. 우선은 코드를 보며 어떻게 이루어지고 동작하는지를 확인하자..