이다닷

순서도 프로그래밍에서는 절차가 매우 중요하다. 코드를 에디터에 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 한다. 여기에서는 먼저 끝말잇기가 어떤 식으로 진행되는지 말이나 그림으로 표현해보자. 끝말잇기 게임으로 순서도 작성해보기 1. 세 명의 참가자가 있다고 가정해보기(A, B, C) 2. A가 '자바 스크립트'라는 제시어를 말한다. 3. B가 '트집'이라고 말한다. 4. C가 '집합'이라고 말한다. 5. 다시 A가 '합체'라고 말한다. 6. 무한 반복된다. 프로그래밍적으로 이 순서도를 보았을때는 많은 오류가 있다. 오류 1. 참가자가 3명이 아닐 수도있다. 오류 2. 모든 참가자가 답을 말하는 것이 아니다. 프로그래밍적으로 순서도를 적을때 생각해 보아야 할 규칙 📌 1. 프로..

HTTP HTTP(HyperText Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인 된 통신 규약이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 HTTPS라 한다. => 데이터를 주고 받는다? HTML, 이미지, 영상, 음성 파일 등을 주고 받는다! HTTP 통신 HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다. 이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다. HTTP 요청 HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다. 요청 행 : 요청 메소드, ..

객체 리터럴 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하면 객체를 생성할 수 있다. 이때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라고 한다. const cat = { name : "국희", town : "부천" } => name과 town은 키, "국희"와 "부천"은 밸류! 📌키는 중복될 수 없다. 그러나 밸류는 같은 것이 있어도 상관 없다. 속성 참조하기 객체 안의 속성 값을 참조할 때에는 도트(.) 연산자 또는 대괄호([]) 연산자를 사용할 수 있다. // 도트 연산자 사용 console.log(cat.town) cat.scratch() // 대괄호 연산자 사용 console.log(cat['name']) cat['eat']() 스..

Element.classList 웹 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. 사용방법 const 이름 = document.querySelector('이름') 메소드 종류 메소드 기능 사용 예 add 지정한 클래스 값 추가 add("new_class") remove 지정한 클래스 값 제거 remove("old_class") item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링(=있으면 제거, 없으면 생성) toggle("some_value") contains 지정한 클래스 값 존재 여부 확인 contains("is_contains") replace 기존 클래스를 새 클래스로 대체 replace("old", "new") 배열의 개념과 사용법 배열이란? 배열은 ..

내장 생성자 (= 빌트인 객체) 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공한다. Date Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장 생성자이다. Date를 통한 객체생성은 다음과 같은 형태로 이루어진다. const now = new Date() // 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체 const then = new Date(2005, 5, 10) // 2005년 6월 10일의 날짜와 시간 정보를 담은 객체 Date 객체 주요 메소드 메소드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환 getMonth 월을 뜻하는 숫자 값 반환 0부터 시작하므로 1월이면 0 반환 getDate 날짜를 뜻하는 숫자 값 반환 getDay 요일을 뜻하는 숫자 값..

입력 요소 값 읽기 , 처럼 사용자로부터 입력을 받는데에 사용 되는 요소들이 있다. 여기에서 사용자가 입력한 값을 읽어들일 때에는 요소의 value 속성에 접근하자. 차이점 요소의 텍스트에 접근하고 싶을때 : textContent 또는 innerText 사용자가 요소에 입력한 값에 접근하고 싶을때 : value 입력 요소의 value 값에 접근하여 할 수 있는 일! console.log(target.value) // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하기 // 읽기 target.value = "변경값" // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기 // 쓰기 오늘의 실습 const form = document.querySelector("form") form.addEventListene..

document.createElement document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다. 사용법 document.createElement('div') 하지만! HTML 요소가 만들어지고 또 반환 되었다고 해서, 해당 요소가 곧장 웹 브라우저 화면에 추가되는 것은 아니다. 그럴때 사용방법! appendChild 메소드는 DOM 내 개별요소('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드이다. 사용법 target.appendChild(자식으로_추가할_요소) appendChild .vs append appendChile 메소드와 비슷한 역할을 하는 append 메소드도 있다. 타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한..

addEventListener onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은, addEventListener 메소드를 활용하는 것이다. ex ) 클릭 이벤트 핸들러를 등록하는 경우의 예 target.addEventListener('click', function(){}) addEventListener 함수의 이점 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다. 같은 리스너에 대해 다수의 핸들러를 등록할 수 있다. 추가적인 옵션 사항들이 제공된다. 이벤트 객체 이벤트 객체란 '추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터'이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하..

이벤트 이벤트란 '사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'을 뜻한다. 웹에서도 이벤트가 발생한다. 웹에서 발생하는 이벤트의 예 웹페이지 사용자가 버튼을 클릭했다 -> 클릭 이벤트! 웹페이지 사용자가 키보드를 눌렀다 -> 키다운 이벤트! 웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출 이벤트! 등등 이벤트 핸들러 이벤트 핸들러란 '이벤트가 발생되면 실행될 코드 블록'을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것은 이벤트 핸들러 등록이라고 한다. => event handler register : 이벤트가 발생하면, 이 함수를 호출해라! ex) 웹 사용자가 버튼 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고..

함수 함수란 '호출될 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼, 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다. 📌변수와 비슷한 정의로 데이터 대신 코드에 이름을 붙여주는 것! 함수 선언식 function 함수명() { // 함수의 기능을 표현한 구문 } => 위와 같은 선언 이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다! 함수 표현식 const 함수명 = function() { // 함수의 기능을 표현한 구문 } => 마찬가지로 선언이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다! 함수 사용 함수를 만들고 나면 함수를 사용해야 한다. 위의 두가지 방식으로 함수를 만들고, 함수를 사용하기 위해서는 함수를..