letsgoddud

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

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

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

저번 시간에 배웠던 예약어 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을 앞에 선언했다가 ..

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

자바스크립트 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 → 몇까지 곱할 것인지 프롬프트 창으로 변..

자주 사용하지만 너무나 헷갈리는 자바스크립트 for문 자세히 파헤쳐 봅시다! 04 - 3 명령 반복 실행하기 - for문 #1 for문 for문은 어떤 동작을 여러 번 실행하는데 사용합니다. 반복문을 사용하면 여러 명령을 늘어놓지 않고 소스를 간단하게 작성할 수 있습니다. #2 1부터 15까지 더하는 반복문 만들기 ① var sum = 0 ; → 변수 sum 선언 ② for ( var i = 1; → 카운트 변수 i 선언 및 1로 초기화 i < 6; → for문의 조건식 i++) → i는 1부터 5까지 5번 반복 ③ sum += i; → 반복 실행할 문(sum = sum + i;) 04 - 4 for문 반복하기 - 중첩 for문 #1 구구단 프로그램 만들기 1단계 for문 중첩하기 먼저 각 단에서 1부터..

자바스크립트 함수에서 중요한 제어문을 한번 배워보겠습니다. 04 - 1 조건에 따라 흐름 조절하기 - if문, if...else문과 조건 연산자 #1 if문 if(true){ } if문은 소괄호 안의 조건이 true면 중괄호 안의 자바스크립트 소스를 실행하고, false면 중괄호 안의 자바스크립트를 무시합니다. #2 if ... else문 if (true) { } else { } if ... else문은 실행할 명령이 둘 이상일 경우 중괄호에 묶고 실행 순서대로 나열합니다. #3 조건 연산자 - ?(물음표)와 :(콜론) var score = 75; (score >= 60) ? alert("통과") : alert ("실패"); 조건 ? 조건이 true일 때 명령 : 조건이 false일 때 명령 #4 3의 ..