letsgoddud

안녕하세요! 오늘은 저번에 배워본 DOM 요소에 노드 추가하는 방법으로 참가자 신청 명단 프로그램을 만들고, 노드 순서 변경 및 삭제하는 방법을 배워보겠습니다. 1. 참가자 신청 명단 프로그램 만들기 참가자 신청 명단 프로그램 만들기 순서 1. [신청] 버튼에 이벤트 함수 지정하기 2. 이벤트 함수 정의하기 3. 화면에 나타내기 0단계 HTML, CSS 기본세팅 HTML 삽입 미리보기할 수 없는 소스 1단계 [신청] 버튼에 이벤트 함수 지정하기 신청 button 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. * return false는 입력 내용을 서버로 전송하는 기능을 사용하지 않겠다는 뜻입니다. 2단계 이벤트 함수 정의하기 function newRegist..

안녕하세요! 오늘은 DOM으로 스타일 수정하는 방법과 DOM에 요소 추가하는 방법을 배워보겠습니다. 1. 웹 요소의 스타일 가져와서 수정하기 자바스크립트를 사용하여 스타일 속성 값을 가져오거나 원하는 값으로 수정할 수 있습니다. 그 중에서도 화면에 표시하고 감추는 방법을 풀어보겠습니다. [완성본 미리보기] 웹 요소를 화면에 표시하기 / 감추기 1. [상세 설명 보기] 버튼 만들기 2. [상세 설명 닫기] 버튼 만들기 0단계 HTML, CSS 기본 세팅 1단계 [상세 설명 보기] 버튼 만들기 #view는 [상세 설명 보기] 링크 부분이고, #detail은 상품 상세 정보 입니다. 상품 상세 정보는 처음부터 화면에 가려져 있는 display = none 상태 입니다. view.addEventListener(..

안녕하세요! 오늘은 DOM 요소 예제 문제 풀이와 이벤트 처리하는 방법을 배워보겠습니다. 1. DOM 요소 예제 풀이 - 선택한 상품 이미지 표시하기 선택한 상품 이미지 표시하기 예제 풀이 순서 1. querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 2. for문을 사용하여 작은 이미지를 클릭할 때 큰 이미지로 나타나게 실행하기 3. 큰 이미지의 파일 경로 바꾸기 0단계 HTML, CSS 기본 셋팅 1단계 querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 큰 이미지는 id="cup", 작은 이미지는 class="small"의 값을 주었습니다. bigPic이라는 변수에 querySe..

문서 객체 모델(DOM) 정의 및 DOM 트리 설명과 DOM 요소 접근 방법 및 수정 방법, 이벤트 처리방법을 배워보겠습니다. 1. 문서 객체 모델(DOM) 이란? 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하기 때문에 이 구조 모습이 나무처럼 생겼다고 해서 DOM 트리라고 불립니다. DOM 트리는 가지와 노드로 표현합니다. 노드(Node)는 그림에서 body, div와 같은 네모상자를 가르키고, 가지는 말 그대로 그림에 보여지는 얇은 선을 가리키며 노드와 노드 사이의 연결 관계를 나타냅니다. div는 h1의 부모 노드이고, h1은 body의 자식 노드 입니다. DOM 트리..

Array 객체를 활용하여 여행 준비물 프로그램을 만들어보겠습니다. 여행 준비물 프로그램 프로그래밍 과정 1단계 화면상에 입력 필드 만들기 2단계 배열을 만들어 챙길 물건 배열에 추가하기 3단계 추가한 내용 화면에 표시하기 4단계 챙긴 물건은 목록에서 삭제하기 1단계 입력 필드(input) 만들기 2단계 배열을 만들어 챙길 물건 배열에 추가하기 #1 텍스트 필드에 입력한 값이 배열에 추가 되도록 만들기 1) 배열 만들기 2) 추가버튼 활성화 하기 위해 이벤트 연결하기 addBtn을 클릭하면 addList 함수가 실행되게 만들었으니 addList 함수를 만들어 보겠습니다. 3) addList에 텍스트 필드에 입력한 값이 배열에 추가 되게 하는 함수 만들기 텍스트 필드의 값을 가져오는 변수 item을 만들었..

지난번에 내장 객체 Date( )와 Date( ) 함수를 활용한 프로그램을 만들었습니다. 이번에는 내장 객체 Array( )와 Array( ) 함수를 자세히 알아보겠습니다. 07 - 1 Array 객체란? #1 Array 객체로 배열 만들기 자바스크립트에서는 여러 개의 항목을 하나의 변수에 저장해야 할 때 배열(Array)를 사용합니다. var myArray = new Array(); var numbers = ["one","two","three","four"]; // 리터럴을 사용한 배열 var numbers = new Array.("one","two","three","four"); // Array 객체를 사용한 배열 Array 객체 인스턴스를 만든 후 myArray변수에 저장하여 리터럴을 사용한 배열과..

오늘은 이제까지 배웠던 객체를 사용하여 간단한 프로그래밍을 해보겠습니다. 06 - 3 Date 객체를 활용해 기념일 계산기 만들기 [결과 미리보기] 기념일 계산기 #1 Date 객체 Date 객체를 사용하면 현재 날짜와 시간, 특정 날짜와 시간 등을 알 수 있습니다. 시간은 지정하지 않으면 오전 9시로 기본 설정이 됩니다. new Date() // 현재 날짜와 시간 new Date("yyyy-mm-dd") // 특정 날짜와 시간 new Date("yyyy-mm") // 특정 연,월 new Date("yyyy-mm-ddThh:mm:ss") // 특정 날짜와 특정 시간 #2 Date 객체의 주요 함수 함수 이름 앞에 get 또는 set이 붙어있는데, 각 사용하는 의미가 다릅니다. get => "가져온다" s..

06 - 2 사용자 정의 객체 만들기 자바스크립트에는 이미 여러 객체가 만들어져 있지만 필요하다면 사용자가 직접 객체를 만들어서 사용할 수 있습니다. 이렇게 사용자가 직접 만들 객체를 사용자 정의 객체라고 합니다. #1 리터럴 표기법 리터럴(Literal)이란 프로그래밍에서 자료를 표기하는 방식을 말합니다. 리터럴을 사용해서 표기한다는 것은 변수를 선언함을 동시에 값을 지정해 주는 표기 방식을 말합니다. //객체 리터럴 표기법 var 변수 이름 = { 속성이름 : 값, 속성이름 : 값, 속성이름 : 값 함수이름 : function(){ ... } } //속성 값 불러오는 법 변수이름.속성이름 //함수 값 불러오는 법 변수이름.함수이름() //새로운 속성 추가하는 법 변수이름.새로운 속성이름 = 값 #2 ..

자바스크립트 자료형 객체에 대해 자세히 알아보겠습니다. 06 - 1 객체란? var book = { title : "자바스크립트", //제목 author : "홍길동", //저자 pages : 500, //쪽수 price : 15000 //가격 } 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위 입니다. 자바스크립트의 자료형을 설명할 때 복합 자료형이라는 객체로 설명을 합니다. 여기서 복합 자료형이라 부르는 이유는 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문입니다. 위에 예시처럼 book이라는 객체 안에 문자, 숫자 등 여러 가지 정보가 들어가기 때문에 웹 사이트나 애플리케이션 안에서 여러 자료를 다룰 때 사용합니다. #1 객체의 종류 1. 내장 객체 자바스크립트에서 자주 사용하는 요소..

05 - 5 이벤트 다루기 #1 이벤트(event) 자바스크립트에서 이벤트란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. ↓↓↓ 이벤트 목록 모음 ↓↓↓ https://developer.mozilla.org/en-US/docs/Web/Events Event reference | MDN Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low ..