개발 일기

DataType 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등) 의 종류를 말한다. 1. 데이터 타입의 종류 원시 타입 (Primitive data type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다. Number String null undefined symbol (ES6에서 추가) 객체 타입 (Object / Reference type) 2) Number (숫자형) 2-1) 숫자형 데이터의 타입 출력 10과 10.7 모두 데이터 타입이 number로 출력되었다. 2-2) 정수, 실수형 데이터 값이 일정 이상 커지거나 작아지면 지수형태로 표현한다. 지수형태는 직접 작성할 수 도 있다. 지..

실습 공공데이터포털에서 대구광역시_맛집 API에서 제공하는 데이터를 data.js에 저장시켰다. 이 데이터를 바탕으로 실습을 진행한다. 1. 데이터 유형 주 데이터는 키(Key)가 data인 배열에 담겨 있다. 2. 데이터 추출 및 가공 객체에서 키가 data인 프로퍼티를 추출한다. 여기서 관심있는 데이터는 "FD_CS": 음식 종류, "BZ_NM": 식당 이름, "MNU": 메뉴표 이다. 2-1) 데이터 필터링 먼저, 한식 종류의 데이터만 필터링 작업을 한다. 배열에 filter 메서드를 사용하여 FD_CS가 한식인 데이터를 필터링하였다. 2_2) 배열의 첫 번째 요소만 출력해보기 필터링 했던 배열의 첫 번째 요소의 정보이다. 원하는 데이터였던 가게 이름과 메뉴표를 추출한 결과이다. 메뉴표에는 태그 정..

Object 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 "프로토타입(prototype)"이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 1. 객체 tory 만들어보기 객체 tory는..

String 전역 객체로 문자열(문자의 나열)의 생성자이다. 1. String + String 문자열이 합쳐진다. 2. 보간법 변수, 함수 호출 및 산술 표현식을 문자열에 직접 삽입할 수 있는 기능이다. ${value} 형식을 사용을 사용하며 백틱(``)에만 사용가능하다. 변수와 상수를 사용한 산술 표현식이 연산되어 출력되었다. 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org

console console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공한다. 동작 방식은 브라우저마다 다를 수 있다. 1. console.log() - 콘솔 출력 1) 문자열 출력 2) 연산 출력 3) Boolean 출력 연산에서 true 는 1, false는 0으로 변환되어 연산되었다. 4) undefined 출력 undefined는 선언만 하고 정의되지 않아 공간이 할당되지 않은 상태이다. 위 변수처럼 선언만 된 상태로 출력을 하면 undefined로 출력된다. 5) null 출력 null은 정의되지 않은게 아니라 비어 있는 값 그 자체를 의미한다.

문서 내 요소 탐색 요소내 컨텐츠의 추가, 삭제, 업데이트 작업을 위해 문서 내 특정 요소 탐색 방법이 필요하다. 하나의 요소 또는 여러 요소들을 그룹으로 선택할 수 있다. 1. document.getElementById() button의 onclick 에서 id가 d1인 요소를 찾아 innerHTML을 통해 컨텐츠를 업데이트시켜준다. 2. document.querySelector() 선택자를 통해 요소를 탐색한다. 해당 javascript의 동작은 위와 동일하다.

Document Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 1. document 객체 출력 document 객체를 출력 시, 문서의 html이 출력된다. 문서 내 요소를 추가 하여 다시 document 객체를 출력하니 추가한 요소가 출력에 반영되었다. 2. document.write() HTML 문서에 document.write()로 작성한 html이 추가되었다. 주의점 기존에 있던 문서 내용을 덮어서 작성 할 수 있다. 버튼을 누르면 기존에 작성되었던 내용들이 덮어져 사라졌다. 출처 https://www.tcpschool.com/javascript/js_dom_document 코딩교육 ..

Javascript 자바스크립트(JavaScript)는 Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다 Java와는 별 관계가 없는 언어이다 간단한 사용실습 01. button - onclick HTML 문서에서 onclick 속성 값으로 javascript 코드를 작성할 수 있다. onclick 값은 클릭 이벤트가 발생했을때 수행할 작업을 작성한다. 02. Javascript의 연산 03. Escape 문자 04. 속성값 내 "javascript: ..." 작성 1) alert 작성 2) 선언 및 정의 되어있는 Object를 ..

인터넷 프로그래밍 HTML, CSS, JS Bootstrap 프레임워크 jQuery 라이브러리 인터넷 프로그래밍 : 하이퍼텍스트(HyperText) 프로토콜(Protocol)을 활용하여, 월드 와이드 웹(WWW: World Wide Web)을 통해 정보를 공유하는 환경을 구현하는 것 HTML5 : 문서의 구성과 뼈대 CSS3 : 문서의 디자인 요소 JavaScript : 문서의 동적 기능 하이퍼텍스트 : 링크가 걸려있는 무언가 (다른 정보로 이동할 수 있게 구성된 문서) 인터넷 프로그래밍 = 웹 프로그래밍 사용자가 웹 브라우저/모바일을 통하여 원하는 정보 요청 -> 서버에서 (파일서버, 데이터베이스)로부터 정보를 가져와 가공하여 사용자에게 제공 프론트 엔드(Front End)란? 사용자 입장에서 보았을 ..