multiking

HTML 문서의 구조를 잡아 주는 시맨틱 태그HTML 문서를 작성할 때 모든 영역을 요소만으로 구성할 수도 있다. 그러나 이렇게 작성하면 각 영역이 어떤 의미와 역할을 가지는지 코드를 보고 바로 이해하기 어렵다.예를 들어 다음과 같은 코드를 살펴보자. 로고와 메뉴 주요 콘텐츠 관련 정보 저작권 정보브라우저는 이 코드를 화면에 표시할 수 있지만, 각 가 머리글인지, 본문인지, 메뉴인지, 부가 정보 영역인지 명확하게 알 수 없다.HTML5에서는 이러한 문제를 해결하기 위하여 시맨틱 태그(Semantic Tag)를 제공한다.1. 시맨틱 태그란?시맨틱(Semantic)은 ‘의미가 있는’이라는 뜻이다.따라서 시맨틱 태그(Semantic Tag)란 태그 이름만으로..

학습목표이번 장에서는 여러 개의 데이터를 하나의 단위로 묶어서 관리하는 객체(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..

제9장 자바스크립트 반복문9.1 반복문과 제어 흐름의 이해프로그램은 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 실행된다. 이러한 실행 순서를 제어 흐름(control flow)이라고 한다. 자바스크립트에서 제어 흐름은 조건문(condition statement), 반복문(loop statement), 점프문(jump statement)을 통해 바뀔 수 있다. 조건문은 실행 경로를 선택하고, 반복문은 같은 작업을 여러 번 수행하며, 점프문은 실행 흐름을 중간에 멈추거나 다른 위치로 이동시킨다.반복문(loop)은 같은 코드 블록(code block)을 여러 번 실행하기 위한 문법이다. 웹 페이지에서 목록을 출력하거나, 배열(array)에 저장된 데이터를 하나씩 처리하거나, 특정 조건이 만족될 때까지 작업..

1. 조건문의 의미조건문(conditional statement)은 조건의 참과 거짓에 따라 실행할 코드를 선택하는 문법이다. 프로그램은 기본적으로 위에서 아래로 순서대로 실행되지만, 조건문을 사용하면 특정 상황에서만 코드를 실행하거나, 서로 다른 실행 경로를 선택할 수 있다.예를 들어 사용자의 나이가 18세 이상이면 “성인”을 출력하고, 그렇지 않으면 “미성년자”를 출력할 수 있다.let age = 20;if (age >= 18) { console.log("성인입니다.");} 위 코드에서 age >= 18은 조건식이다. age의 값이 20이므로 20 >= 18은 참이다. 따라서 중괄호 { } 안의 코드가 실행된다.실행 결과는 다음과 같다.성인입니다. 2. Boolean 값조건문을 이해하려면 먼저 불리..