Front-end/Vanilla JS24 JS 근본 공부 - 연산자 1. 사칙연산 - 다른 프로그래밍 언어의 사칙연산과 동일하게 +(덧셈), -(뺄셈), /(나누기), %(나머지), *(곱셈)가 존재한다. - 제곱 연산자는 ** 이다. - 문자열 합병의 경우 +를 사용한다. 2. Increment & decrement operator (증감연산) a) pre-increment/decrement - 변수명 앞에 ++ 또는 -- 기호를 붙여주면 +1 또는 -1이 된 값이 적용된다. let counter = 2; const preIncrement = ++counter; // 위의 코드는 preIncrement = counter + 1; 과 동일하다. // 이 경우, preIncrement는 3이 되고 counter도 3이 된다. let counter = 2; const pre.. 2020. 10. 25. JS 근본 공부 - 데이터 타입 1. 변수 선언문 - 변수란, 메모리에 값을 할당하여 읽고 쓰는 것(read & write)이 가능하게 하는 작업이다. - 변수를 선언할 때 사용하는 선언문에 따라 읽기와 쓰기를 개발자가 조정할 수 있다. 그 차이를 알아보자. a) let (mutable type) - read & write ES6에서 추가된 데이터 타입으로, 변수를 선언할 때 사용된다. let으로 선언된 변수는 저장된 값을 바꿀 수 있다. 그러므로 메모리에 값을 읽고 쓰는것이 가능하다. let variable1 = 123; variable1 = "abc"; 위의 코드에서 처럼, variable1이 갖고있는 값이 선언시에는 123(정수)였으나 "abc"라는 값으로 바꾼 것을 확인할 수 있다. 이처럼, 갖고있는 값을 변경할 수 있는 변수를.. 2020. 10. 24. JS 근본공부 - JS의 동작원리 1. JavaScript를 사용하는 이유 - JavaScript를 사용하는 이유는 정적인 웹사이트를 동적으로 만들기 위해서다. 그렇다면 정적, 동적의 차이는 무엇일까? - 정적인 웹사이트는 링크를 이용한 페이지 이동만이 구현된 웹사이트를 의미한다. - 동적인 웹사이트는 JavaScript를 이용하여 HTML 엘리먼트를 객체화 시킴으로써, 사용자에 의한 입력에 따라 특정 event가 발생하게 되면 지정된 DOM조작을 하여 페이지를 이동하지 않고 현재 페이지의 동적인 변화를 주는 것을 말한다. 예를들어, 사진을 클릭하면 모달창이 생성되면서 더 큰 사진으로 볼 수 있는 기능 같은 것들이 여기에 해당된다. 2. JavaScript는 어떻게 동작되는 것이며, 웹사이트에서 어떻게 읽히는가? - JavaScript가.. 2020. 10. 23. JS 근본공부 - 자바스크립트의 역사 Vanilla JS를 공부하면서 JS의 근본에 대해 궁금증이 생겼다. 이를 시작으로, 앞으로 JS의 기본이 되는 여러 개념과 정보들을 하나씩 정리해보려 한다. 1. 1993년 MOSAIC 웹 브라우저 MOSAIC은 UI가 적용된 최초의 웹 브라우저로 기본적인 HTML의 형식을 갖추고 있다. MOSAIC 브라우저를 만든 Marc Andreessen은 후에 Netscape의 창업주가 되어 간단한 HTML 형식과 CSS를 갖춘 Netscape Navigator라는 브라우저를 출시하게 된다. 당시 80%의 시작점유율을 갖고 있던 Netscape Navigator는 정적인 웹사이트였고 이를 동적으로 구현하여 사용자에게 dynamic한 경험을 선사하기위해 많은 고민 끝에 scripting언어를 추가하기로 한다. 새.. 2020. 10. 23. Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) - 이전 포스팅에서 지역저장소에 데이터를 저장하여 toDoList를 생성하는 방법까지 알아보았다. - 오늘은 삭제하는 기능을 구현해보자. 1. 삭제기능 - 아래의 사진처럼, 할일을 작성하면 li태그에 입력값이 하나씩 저장되고 x버튼을 눌러 삭제하는 방식이다. - 삭제를 위해 x버튼을 눌렀을 때, HTML상에서 어떤 x버튼이 어떤 li태그에 존재하는지 구분할 수 있어야 한다. 어떻게 할 수 있을까? a) event.target - event.target은 해당 event가 발생한 엘리먼트를 가리키는 기능이다. - eventHandler 함수를 작성할 때, 매개변수로 선언되어야지 사용할 수 있다. [구현내용] 1) x버튼이 눌렸을 때, event.target을 이용하여 어떤 엘리먼트에서 이벤트가 발생했는지 .. 2020. 10. 16. Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) 1. 복기 - 지난 시간에 간단하게 지역저장소(Local Storage)에 대해서 알아보았다. - 지역저장소란, 브라우저가 제공하는 일종의 DB이며, JS를 이용해 접근 및 통제하여 브라우저를 운영하는데 필요한 정보를 사용자 측에 저장하는 것을 의미한다. - 이번 포스팅에서는 지역저장소에 정보를 저장하고 저장된 정보를 활용하는 방법을 다루려고한다. - 이를 위해, 저장 및 삭제 기능을 갖는 간단한 toDoList를 만들어보자. 2. 기본코드 - 지난 포스팅에서 사용했던 코드를 그대로 이어서 사용해보자. - 추가된 사항은 다음과 같다. toDoList를 만들기 위해, 입력란이 필요하다. → input태그 input태그에 입력된 정보를 활용해야 한다. → form태그 toDoList는 여러개의 입력을 받을 .. 2020. 10. 12. Vanilla JS - 지역 저장소(Local Storage) 1. 지역 저장소(Local Storage)란? - 브라우저를 운영하는데 필요한 정보를 사용자의 컴퓨터에 저장하는 것을 말한다. - 다시 말해, 브라우저가 제공하는 일종의 DB이다. 이를 이용해 필요한 정보를 저장 및 사용할 수 있다. - 모든 웹사이트에서 사용할 수 있으며, JS를 이용해 통제할 수 있다. - 크롬의 개발자 도구를 사용하면 Application탭에서 쉽게 찾아볼 수 있다. [예시화면] - momentum extension에서 사용하는 local storage의 모습이다. - 현재까지 ToDoList에 기록했던 모든 정보들이 들어 있다. - 스크린샷에서 확인할 수 있듯이, key와 value 형식으로 정보가 저장된다. 2. 어떻게 사용하는가? - 직접 예제를 만들어 보면서 Local St.. 2020. 10. 10. Vanilla JS - 시계 만들기 1. Date() 객체 생성 - Date는 시간정보를 담고있는 클래스다. 이를 이용해서 시간정보를 갖는 객체를 생성할 수 있다. const date = new Date(); // 시간정보를 담고있는 객체를 생성 - Date 클래스를 이용하면 해당 클래스가 갖고있는 메소드를 이용해서 다양한 정보를 알아낼 수 있다. console.log(date); // 현재 시간정보를 출력 console.log(date.getDay()); // 1 = 월요일 console.log(date.getDate()); // 일자를 가져옴 console.log(date.getHours()); // 시간 console.log(date.getMinutes()); // 분 console.log(date.getSeconds()); // 초.. 2020. 10. 10. Vanilla JS - 조건문(if~else) 1. if 조건문 사용 형식 - JS에서 if 조건문을 사용하는 방식은 다음과 같다. if (condition) { // 해당 조건에 수행할 명령문 } else if (condition){ // 해당 조건에 수행할 명령문 } else { // 위의 2가지 조건에 해당하지 않는 경우, 수행할 명령문 } 기본적인 비교/논리 연산자 - 앞으로 조건문을 사용할 때, 비교와 논리연산자를 통해 표현을 많이 하게 될 것이다. - JS에서는 어떻게 표현하는지 아래의 사진을 참고하여 알아두자. 2. 조건문을 사용한 JS - 이번에는 조건문을 사용하여 JS 적용하는 예제를 만들어보자. - 예제) h1태그를 클릭하면 글자색이 변하도록 만드는 이벤트를 조건문을 이용해서 구현한다. [기본 HTML] Hello, JavaScri.. 2020. 10. 8. 이전 1 2 3 다음
