본문 바로가기

JavaScript

 (52)
[Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기 Step 3. 동적인 부분에 대해서 사용자 경험 높이기Step 2 에서 멈추면 사용자에 대해 너무 야박한 서비스이다. 왜냐하면, 입력하기 위해서 커서를 input 태그에 찍어야 하고, 입력을 하기 위해 다시 손을 마우스로 옮겨서 New item 이라는 버튼을 클릭해야하니 말이다! 또 새로운 값을 입력하려고 이전에 입력했던 것을 다 지워야 한다. 이를 위해 다음 세 가지를 추가로 설정해보자. 1> Enter키를 통해 값을 입력하자. 2> 웹 애플리케이션을 시작했을때 자동으로 input 태그로 커서를 위치시키자. 3> 입력을 하고 나서는 백스페이스를 입력할 필요가 없도록 입력한 값을 블록설정해주자. 이렇게 기능을 추가하는 과정에서는 코드가 추가도 되겠지만 삭제될 수도 있다. 엔터키로 입력할 것이니 더이상 버..
[Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 기본적인 틀을 어느 정도 잡았으니,input 태그로부터 값을 받아 append로 달아보자.그러기 위해서는 input 태그를 추가해야 한다. index.html code>12345678910111213 To do List New Item Colored by Color Scriptercs 그리고 이제 자바스크립트 코드를 보자. listItem.innerText 값에 Hello 대신에, input 태그로부터 들어온 값을 주면 될 것 같지 않은가? 일단 input 태그를 잡자. var inputText = document.getElementById(‘inputText’); 그리고 input 태그로부터 들어온 값을 받는다. 이때는 .value를 사용한다. ..
[Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기. Step 1. 기본적인 HTML/CSS/Javascript 구조 갖추기 우선, 웹 페이지 구성의 기초가 되는 html code를 구성해보자. index.html code>123456789 To do List New Item Write First item Colored by Color Scriptercs 현재는 체크 박스를 할 수 있고 없고 정도만 웹 페이지에서 우리가 할 수 있다. HTML 코드를 간략히 설명하면, To do List 라는 제목이 있고, 버튼을 추가했다. (id = “btnAdd”) 그리고 앞으로 li 태그를 추가해나갈, ul 태그를 삽입하고 id를 todolist라고 했다. 약간의 CSS를 입히고 시작하자. 그래야 진행되는 맛이 있으니까. style.css code>12345678910..
TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) 자바스크립트 연습 프로젝트 자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,가장 유명한 것이 To do list를 만드는 것이다.검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)심지어 코드를 그대로 입력했는데 동작하지 않았다.그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다. 이 포스팅은 그 프로젝트를 정리한 내용이다.정말 기초적인 내용을 연습하는 프로젝트이다. 프로젝트 대상은 누구인가?HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람 준비해야할 사항| Chrome Browser 프로젝트가 크롬을 기준으로 진행되기 때문..
8. 자바스크립트의 프로토타입(Prototype) Chapter 8. 자바스크립트의 프로토타입 자바스크립트에는 클래스라는 개념이 없다. (ECMA 2016부터 정식적으로 등장하긴 했다.)그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어인 것이다. 그만큼 프로토타입의 이해에 대해서는 필수적이다. 프로토타입이란 무엇인가 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다. Java에서의 class가 바로 자바스크립트에서의 프로토타입이다. 프로토타입은 두가지로 해석될 수 있다. 하나는 프로토타입 객체를 참조하는 prototype 속성이고 다른 하나는 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크를 말한다. JavaScript에서 함수를 정의하고 파싱단계에 들어가면 내부적으로 수행되는 작업이 있다..
7. 자바스크립트의 객체와 객체 멤버 Chapter 7. 자바스크립트의 객체와 객체 멤버자바스크립트에서는 기본적으로 모든 메소드, 속성은 공개(public)으로 정의된다.비공개(private)특징을 구현할 수는 있다. 자바스크립트에서는 객체를 만들어내는 방법이 3가지 존재한다.1. new와 Object 생성자 이용 - new Object( ) 2. 객체 리터럴 이용 - { } 이 방법은 1과 비교했을 때, 내부적인 절차는 동일하다. 즉, Object 생성자를 이용해 객체가 생성되고 { }에서 정의한 멤버를 동적으로 추가하는 것이다. 12var obj = { };var obj = new Object;cs위 두 코드는 동일하다. 이렇게 정의된 멤버는 모두 외부에서 접근할 수 있는 공개 멤버이다. 3. new와 사용자 정의 생성자 이용 - new..
6. 자바스크립트의 클로저(Closure)에 대해서 Chapter 6. 자바스크립트의 클로저(Closure)자바스크립트에는 없는 class역할을 대신해 비공개 속성/메소드, 공개 속성/메소드를 구현할 수 있는 방안을 마련한다.따라서 캡슐화와 정보 은닉을 이해하기 위해 클로저를 알아야 한다.아직 클로저가 무엇인지도 모르는데, 그렇다고 한다. 클로저클로저는 두 개의 것(함수, 그 함수가 만들어진 환경)으로 이루어진 특별한 객체의 한 종류이다.환경이라 함은 클로저가 생성될 때 그 범위 안에 있던 여러 지역 변수들로 이루어진다.이 말 역시 무슨말인지 잘 모르겠다. 그렇다고 한다. 다음은 클로저가 생성되는 조건이다. 1) 내부 함수가 익명 함수로 되어 outer 함수의 반환값으로 사용된다. 2) inner 함수는 outer 함수의 실행 환경(execution en..
5. 자바스크립트 호이스팅(Hoisting) Chapter 5. 자바스크립트의 호이스팅(Hoisting)Hoist란?hoist 라는 단어의 사전적 정의는 끌어올리기 라는 뜻이다. 자바스크립트에서 끌어올려지는 것은 변수이다. 모든 변수 선언은 호이스트된다. 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다. 선언(Declaration)과 할당(Assignment)을 이해해야 한다. 끌어올려지는 것은 선언이다. 코드를 통해 살펴보자123456function getX(){ console.log(x); // undefined var x = 100; console.log(x); // 100..

티스토리툴바