함수 16

[Do it! 자바스크립트 입문] 20 - 8장 문서 객체 모델(DOM)로 스타일 수정하기, DOM에 요소 추가하기

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

[Do it! 자바스크립트 입문] 19 - 8장 문서 객체 모델(DOM)요소 예제 풀이, 이벤트 처리하기 / addEventLister()

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

[Do it! 자바스크립트 입문] 18 - 8장 문서 객체 모델(DOM)로 요소 접근하기, 태그 속성 가져와서 수정하기 / getElementById(), querySelctor(), getAttribute() 등

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

[Do it! 자바스크립트 입문] 15 - 6장 Date 객체, Date 객체 함수, 기념일 계산기 만드는 방법

오늘은 이제까지 배웠던 객체를 사용하여 간단한 프로그래밍을 해보겠습니다. 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..

[Do it! 자바스크립트 입문] 14 - 6장 사용자 정의 객체 만들기, 리터럴 표기법, 생성자 함수

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

[Do it! 자바스크립트 입문] 12 - 5장 이벤트(event)와 이벤트 처리기(event Handler), click, mouseover, mouseout

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 ..

[Do it! 자바스크립트 입문] 11 - 5장 여러 번 사용할 수 있는 함수 만들기, 매개변수와 인수, return문, 익명 함수와 화살표 함수

이번에는 자바스크립트의 함수 종류를 자세히 알아보겠습니다. 05 - 3 여러 번 사용할 수 있는 함수 만들기 #1 매개변수와 인수 위의 addNumber() 함수는 계산 값 10과 20을 고정해놓아서 몇 번 실행해도 같은 결과가 나옵니다. 그렇다면 addNumber() 함수의 입력값을 바꾸고 여러 번 사용하기 위해서는 어떻게 해야할까요? 이 때 필요한 개념이 '매개변수'와 '인수'입니다. 함수를 실행하기 위해 필요하다고 지정하는 값을 매개변수라고 하며, addNumber(a,b)에서 a,b가 매개변수 입니다. 이렇게 매개변수를 지정하고 addNumber()함수를 호출할 때 넘겨주는 값을 인수라고 합니다. #2 두 수를 더하는 함수 실행하기 ① var num1 = parseInt(prompt("첫번째 숫자..

[Do it! 자바스크립트 입문] 10 - 5장 let과 constant로 변수 선언하기, 자바스크립트 변수 올바르게 사용하는 방법

저번 시간에 배웠던 예약어 var에 이어 ES6에서 새롭게 사용하는 예약어 let과 const를 자세히 알아보겠습니다. 05 - 2 let과 constant로 변수 선언하기 #1 let과 constant 변수 특징 1. 블록 안에서만 쓸 수 있는 변수 var와 let, const의 가장 큰 차이는 스코프(scope)입니다. ( 스코프 : 변수가 적용되는 범위 ) var는 함수 영역의 스코프를 가지지만, let과 const는 블록영역의 스코프를 가집니다. var : 함수 영역(레벨)의 스코프 let , const : 블록 영역의 스코프 let으로 선언한 sum은 calcSum()의 블록{ } 안에서만 사용할 수 있습니다. 2. 재할당은 가능하지만 재선언은 할 수 없는 변수 let sum을 앞에 선언했다가 ..

[Do it! 자바스크립트 입문] 09 - 5장 함수, 예약어 var를 사용한 변수, 지역변수와 전역변수

자바스크립트의 중요한 요소 함수와 변수를 같이 다루어 보겠습니다. 05 - 1 여러 동작을 묶은 덩어리, 함수 #1 함수란 무엇인가? : 자주 실행하는 기능에 포함된 명령이 여러가지일 때 그 명령을 한번에 실행할 수 있게 한 덩어리로 묶은 주머니 #2 함수를 사용하면 왜 좋을까? 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있습니다. #3 함수 정의하고 실행하기 함수 선언 --------------> 함수 실행 (함수 호출) ① 함수 선언 function addNumber(){ var sum = 10 + 20; console.log(sum); } ② 함수 실행 addNumber() #4 버튼으로 함수를 실행하는 프로그램 만들기 ① button 태그에 onclick = "addNumber()..

[Do it! 자바스크립트 입문] 08 - 4장 반복문 while문, do...while문, break문, continue문

자바스크립트 for문에 이어 while문도 자세히 알아보겠습니다. 04 - 5 특정조건에 따라 반복하기 - while문, do...while문 for문은 카운트 변수를 기준으로 명령을 반복하여 정해진 횟수동안 반복 명령문이였다면 while문과 do...while문은 특정조건을 만족하는 동안에만 명령을 반복하는 명령문입니다. #1 while문 * while( i < 10 ) 조건문 검사 후 소괄호 안의 조건이 참이면 중괄호 안에 있는 소스 실행 #2 do...while문 * 문장이 한번 실행 한 후 조건 확인 #3 팩토리얼 계산기 만들기 0단계 팩토리얼 계산식 정리 주어진 수 표현 계산식 1 1! 1 2 2! 1*2 3 3! 1*2*3 1단계 변수 지정 var n → 몇까지 곱할 것인지 프롬프트 창으로 변..

728x90