티스토리

공부정리

검색하기

블로그 홈

공부정리

vhxpffltm.tistory.com/m

vhxpffltm 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

[Javascript]페이지 개발: API를 통한 날씨정보 이전까지 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 .. 공감수 0 댓글수 0 2019. 12. 28.
[JavaScript] 페이지 개발: 배경처리 이전시간까지 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 .. 공감수 0 댓글수 0 2019. 12. 26.
[JavaScript] 페이지개발 : localstorage 변경 이전시간에 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라는 태.. 공감수 0 댓글수 0 2019. 12. 6.
[javascript] 페이지 개발 : localstorage 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 .. 공감수 0 댓글수 0 2019. 11. 18.
[javascript] 페이지 개발 : 타이머제작 자바스크립트로만 간단한 크롬 웹 클론 코딩을 해보자. 타이머제작 우선은 웹 페이지를 만들 기본 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태그의 색이 파란색으로 나타날 것이다. 이.. 공감수 0 댓글수 0 2019. 11. 14.
[JavaScript]참조 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 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 .. 공감수 0 댓글수 0 2019. 6. 2.
[JavaScript]Object 객체 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. Object 객체는 객체의 가장 기본적인 형태를 가지고 있다. 즉 최상위 객체이며 모든 객체들의 부모이다. Object 객체의 프로토타입은 모든 객체들의 프로토타입이다. Object 객체에서 프로토타입을 사용한 경우와 사용하지 않는 경우가 있다. 먼저 사용하지 않으면 생성자 함수와 함께 호출할때, ()안에 인자를 명시하는 특징이있다. 프로토타입을 사용하면 메서드()만으로 호출한다. 프로토타입을 이용하면 모든 객체가 사용할 수 있는 메서드이다. 단, Object.. 공감수 0 댓글수 0 2019. 6. 2.
[JavaScript]표준 내장 객체 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 표준 내장 객체는 자바스크립트에서 기본적으로 가지고 있는 객체를 뜻한다. 기본적으로 프로그래밍 하는데 필요한 도구들이기 때문에 중요하다. JS파일을 보면서 'Object' , 'Array', 'String', 'Function', 'Math' 등의 키워드를 본적이 있다. 이들이 모두 자바스크립트에 기본적으로 가지고있는 객체이다. 이들의 기능을 아는것은 Reference를 참고해서 공부하면 된다. 여기서는 Array객체와 Math객체를 이용하여 간단한 랜덤 함수.. 공감수 0 댓글수 0 2019. 5. 29.
[JavaScript]프로토타입_Prototype 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++에서 포인터를 배우고 클래스를 배우게 된다. 자바스크립트에서 클로저를 알아보고 이후에 알아보는 이 프로토타입을 배우는것은 C++을 배우는 커리큘럼과 비슷하다고 생각하면 좋다. 그만큼, 클로저와 프로토타입이 중요한 내용이라고 생각하면 좋을 것 같다. 참고 및 출처 : http://insanehong.kr/post/javascript-prototype/ http://www.nextree.co.kr/p7323/ 위 링크에서 더 자세하게 프로토타입에 대해 알 수.. 공감수 0 댓글수 0 2019. 5. 29.
[JavaScript]상속 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++에서 상속은 부모 클래스의 내용이 자식 클래스에서 사용할 수 있다고 간단하게 이해할 수 있다. 이와함께 가상함수 오버라이딩, 다형성 등의 개념이 나오게 되며 객체지향 프로그래밍 이라고 한다. 자바스크립트에서 상속또한 비슷한 개념이며 여기서는 사용법만을 확인해보자 우선 상속은 로직의 재활용을 위해 사용한다. 이를 위해 'prototype' 이라는 것을 사용하며 이 내용은 다음 장에서 살펴볼 것이다. 우선은 코드를 보며 어떻게 이루어지고 동작하는지를 확인하자.. 공감수 0 댓글수 0 2019. 5. 29.
[JavaScript]전역객체 와 this 키워드 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //모든 객체는 전역객체의 프로퍼티이다. //함수 앞에 '.'이 있고 그 앞에 객체(window등등)가 있고 '.'뒤의 속성임, 지금은 속성이 함수이다 이를 메소드 function f() { document.write("Hello" + ' '); } window.f(); //함수 앞에 '.'이 있고 그 앞에 객체(window등등)가 있고.. 공감수 0 댓글수 0 2019. 5. 27.
[JavaScript]생성자와 new 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++ 이나 자바를 공부한 사람들이라면 많이 봤을 것이다. C++에서 생성자는 클래스에서 생성자와 소멸자를 접하고 new키워드는 동적 할당을 할때 사용함을 알고 있을것이다. 자바스크립트에서 생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다. *이때까지 배운 자바스크립트에서 함수란 객체이며, 객체를 만들고 '값'임을 잊지말자 객체의 구조를 재활용하기.. 공감수 0 댓글수 0 2019. 5. 27.
[JavaScript] Closure_클로저 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 대부분의 참고자료 및 설명을 참고하면서 클로저는 C언어의 포인터와 같은 맥락이라고 생각하면 좋다. 즉, 클로저는 자바스크립트에서 꽃과 같은 중요한 내용이며 어려울 수 있다. 우선 클로저를 이해하기 위해서 알아야 할 내용으로 변수의 유효범위, 외부함수와 내부함수가 있다. 변수의 유효범위는 전역, 지역으로 나누어지며 이전 게시글을 참고하자. 간단하게, 내부함수는 함수 안에 함수가 있는것이고, 외부함수는 제일 밖에 있는 함수를 말한다. 클로저는 이 내부함수가 외부함.. 공감수 0 댓글수 0 2019. 5. 27.
[Javascript] 함수의 호출(apply) 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 함수는 객체이며 후에 말하겠지만, 자바스크립트에서 불리언, 문자열, 숫자, null, undefined가 아니면 모두 객체이다. 예제에서 함수 sum은 Function 객체의 인스턴스이다. 이 때문에 객체, Function의 메소드 apply를 호출 할 수 있다. 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 2.. 공감수 0 댓글수 0 2019. 5. 27.
[JavaScript] arguments 객체 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. arguments 객체는 모든 함수 내에서 사용할 수 있는 지역변수이다. 보통 함수의 인자로 매개변수가 없음에도 자바 스크립트에서는 매개변수를 포함하여 호출할 수 있다. 이것이 arguments 객체에 들어간다고 생각하면 된다. 그리고 이 argumets객체는 배열은 아니지만 배열과 비슷하다. arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16.. 공감수 0 댓글수 0 2019. 5. 19.
[JavaScript] 변수의 유효범위 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. 보통 변수의 유효범위는 scope를 통해 알 수 있다. C/C++에서 기본적으로 함수 안에있는 것을 지역변수, main함수 밖에 있는 것을 전역변수라 하며 각 변수마다 사용할 수 있는 범위가 존재한다. 자바스크립트에서는 var을 사용하지 않은 변수는 전역변수가 된다. 함수안에서 var을 사용해야 지역변수가 된다. 아래의 예시와 주석을 통해 이해할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2.. 공감수 0 댓글수 0 2019. 5. 19.
[JavaScript] 객체 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. C++에서 객체라 하면 클래스, 인스턴스 그에따른 다형성, 오버라이딩 등의 객체지향적 개념들이 생각날 수 있다. Javascript에서 객체라 하면 C++의 map컨테이너와 비슷하며 더 나아가 클래스라고 생각하면 이해하기 쉬울 수 있다. -실습 코드- 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 grades.. 공감수 0 댓글수 0 2019. 5. 8.
[JavaScript] 함수, 배열 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. Funtion : 함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 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 40 41 42 43 44 function f(num, num2){ // 자바스크립트 함수 모양 - ()안은 매개변수(파라미터)라고 생각하면 된다. r.. 공감수 0 댓글수 0 2019. 5. 8.
[JavaScript] 조건문, 반복문 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. -조건문 if- //조건문은 boolean을 반환한다. if(true){ //if가 true면 if문을 실행하고 아니면 else문을 실행 //현재 if는 무조건 true이기 때문에 if가 실행되고 else는 실행되지 않는다. //C++과 같이 동작함. console.log(100); } else{ console.log(-200); } prompt("당신의 나이는"); //프롬프트 창이 뜨면서 사용자 입력을 받을 수 있다. alert(prompt("시험 몇점??.. 공감수 0 댓글수 0 2019. 4. 28.
[JavaScript] 변수 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. var a = 1,b=3; //자바 스크립트 변수는 var로 시작한다. 생략가능하다. var str = "coding", str2 = "algorithm"; console.log(a + 1 + b); console.log(str + str2); //변수는 재활용성을 높여준다. var num = 100; num = num + 10; console.log(num); num = num/10; console.log(num); num = num * 100; consol.. 공감수 0 댓글수 0 2019. 4. 28.
[Javascript] 숫자, 문자열 이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다. 자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다. 모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다. *실습환경은 메모장이나 sublimetext, visual studio 혹은 구글 크롬 개발자도구를 사용한다.* -숫자- alert(1); alert(1.1); alert(1 + 2.1); alert(1 * 10); // 정수 실수, alert는 그냥 경고창을 뛰움. // alert가 2개 이므로 2번의 경고창이 뜸. // 자바스크립트에서는 *정수, 실수의 구분이 중요하지 않다.* // 에디터가 싫다면 구글 크롬 개발자도구를 이용해 console창에서 실습가능.. 공감수 0 댓글수 0 2019. 4. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.