multiking

학습목표이번 장에서는 여러 개의 데이터를 하나의 단위로 묶어서 관리하는 객체(Object)의 개념과 사용 방법을 학습한다. 객체는 실제 웹 프로그램에서 사용자 정보, 상품 정보, 게시글, 게임 캐릭터, 설정값 등 다양한 데이터를 표현하는 데 활용된다.JavaScript 객체의 개념을 설명할 수 있다.객체를 생성하고 속성(Property)을 정의할 수 있다.점 표기법과 대괄호 표기법으로 객체의 값에 접근할 수 있다.객체의 속성을 추가·수정·삭제할 수 있다.객체 안에 메서드(Method)를 작성할 수 있다.this를 사용하여 객체 자신의 속성에 접근할 수 있다.객체를 활용하여 간단한 웹 프로그램을 구현할 수 있다.1. 개념1.1 객체란 무엇인가?지금까지 변수는 일반적으로 하나의 값을 저장하는 용도로 사용하였..

기분에 따라 바뀌는 응원 카드사용자가 자신의 기분에 해당하는 버튼을 클릭하면 배경색과 응원 문구가 변경되는 웹페이지를 만든다.1. 완성 화면의 기능웹페이지에는 다음 세 개의 버튼이 있다.😊 기분 좋아요😢 조금 힘들어요😴 피곤해요버튼을 클릭하면 다음 내용이 변경된다.응원 문구카드의 배경색이모지2. 사용 문법학습 내용적용함수기분별 화면 변경 작업을 함수로 작성한다.이벤트버튼을 클릭하였을 때 함수를 실행한다.DOM 선택getElementById()로 HTML 요소를 가져온다.내용 변경textContent로 문구를 변경한다.스타일 변경style.backgroundColor로 색상을 변경한다.3. HTML 작성하기 🙂 오늘 기분은 어떤가요? ..

1. 학습 목표이 장을 학습하면 다음 내용을 이해할 수 있다.함수가 필요한 이유를 설명할 수 있다.함수를 선언하고 호출할 수 있다.매개변수와 반환값을 사용할 수 있다.이벤트의 의미를 설명할 수 있다.버튼 클릭과 같은 이벤트가 발생하였을 때 함수를 실행할 수 있다.HTML 요소와 JavaScript 함수를 연결할 수 있다.2. 함수란 무엇인가2.1 함수의 기본 개념함수는 특정 작업을 수행하도록 여러 명령문을 하나로 묶은 코드 블록이다.예를 들어 자판기의 버튼을 누르면 다음 과정이 실행된다.사용자가 음료 버튼을 누른다.자판기가 돈이 충분한지 확인한다.선택한 음료를 내보낸다.필요한 경우 거스름돈을 반환한다.이러한 일련의 작업을 하나로 묶어 놓은 것이 함수와 비슷하다.function 음료꺼내기() { co..

1. 변수의 의미변수(variable)는 데이터를 저장하는 공간이다. 자바스크립트에서 변수는 숫자, 문자열, 계산 결과와 같은 값을 담아 두었다가 나중에 다시 사용하기 위하여 사용한다. 변수는 값에 붙이는 이름이며, 프로그램 안에서 데이터를 기억하고 처리하는 기본 단위이다.let x = 5;let y = 6;let z = x + y; 위 코드는 세 개의 변수를 사용한다.x에는 숫자 5가 저장된다.y에는 숫자 6이 저장된다.z에는 x + y의 계산 결과가 저장된다.따라서 z의 값은 11이 된다.2. 변수를 선언하는 방법자바스크립트에서 변수는 여러 방식으로 만들 수 있다. 현대 자바스크립트에서는 주로 let과 const를 사용한다. 과거에는 var를 많이 사용하였지만, 현재는 특별한 이유가 없으면 사용하지 ..

1. 주석의 의미주석(comment)은 코드 안에 작성하지만 프로그램 실행에는 영향을 주지 않는 문장이다. 자바스크립트는 주석으로 작성된 부분을 실행하지 않고 무시한다. 주석은 코드의 의미를 정리하거나, 특정 코드의 목적을 기록하거나, 테스트 과정에서 일부 코드를 잠시 실행하지 않도록 만들 때 사용한다.// 총 금액을 계산한다.let price = 10000;let count = 3;let total = price * count;console.log(total); 위 코드에서 // 총 금액을 계산한다.는 주석이다. 이 문장은 사람이 코드를 이해하기 위한 메모이며, 자바스크립트 실행 결과에는 영향을 주지 않는다.실행 결과는 다음과 같다.300002. 한 줄 주석한 줄 주석(single-line commen..

1. 문법의 의미프로그래밍 언어에서 문법(syntax)은 프로그램을 어떤 규칙에 따라 작성하여야 하는지를 정한 약속이다. 자바스크립트(JavaScript)도 정해진 문법에 맞게 작성하여야 브라우저가 코드를 올바르게 해석하고 실행할 수 있다.다음 코드는 자바스크립트 문법의 기본 형태를 보여준다. 변수(variable)를 만들고, 값을 저장하고, 계산 결과를 새로운 변수에 넣는 구조이다.let x = 5;let y = 6;let z = x + y;위 코드의 의미는 다음과 같다.x라는 변수에 숫자 5를 저장한다.y라는 변수에 숫자 6을 저장한다.x + y의 계산 결과를 z라는 변수에 저장한다.따라서 z의 값은 11이 된다.2. 자바스크립트 값자바스크립트에서 사용하는 값(value)은 크게 두 가지로 나눌 수 ..