728x90 반응형 SMALL 분류 전체보기139 [Javascript] Do it! 자바스크립트 입문 - 문서 객체 모델 DOM 공부단 7일차-1입니다. 문서 객체 모델이란? DOM은 Document Object Model의 줄임말 입니다. DOM의 정의는 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. 즉, 웹 문서의 텍스트 / 이미지 / 표 등 모든 요소는 모두 객체라는 것 입니다. document document는 웹 문서 자체를 가리키는 DOM 요소 중 하나입니다. document는 웹 문서 자체를 가리키기 때문에 웹 문서의 요소에 접근해서 수정을 할 수 있습니다. DOM 트리 웹 문서의 태그는 요소 노드로 표현합니다. 태그가 품고있는 텍스트는 해당 요소 노드의 자식 노드인 텍스트 노드로 표현합니다. 태그의 속성은 모두 해당 요소 노드의 자식 노드인 속성 노드로 표.. 2024. 1. 12. [Javascript] Do it! 자바스크립트 입문 - Array 객체 공부단 6일차 입니다. Array 객체 여러 개의 항목을 하나의 변수에 저장하려면 배열을 사용해야 합니다. 자바스크립트에서는 배열을 쉽게 만들고 다를 수 있도록 내장 객체에 Array객체가 만들어져 있습니다. 인스턴스 만들기 var arr = new Array() // 초깃값이 있는 경우 var seasons = ["봄", "여름", "가을", "겨울"] // 리터럴을 사용한 배열 var seasons = new Array("봄", "여름", "가을", "겨울") // Array 객체를 사용한 배열 배열에서 for문 사용 배열에 몇 개의 요소가 있는지 확인하려면 Array객체의 length속성을 사용합니다. for(var i = 0; i < seasons.length; i++) { console.log(.. 2024. 1. 11. [Javascript] Do it! 자바스크립트 입문 - 객체 공부단 5일차 입니다. 객체란? 객체는 복합 자료형입니다. 복합자료형이라고 하는 이유는 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문입니다. 객체는 자료형이기 때문에 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위입니다. 객체의 구조 var book = { title: "자바스크립트", // 제목 author: "홍길동", // 저자 pages: 500, // 쪽수 price: 15000 // 가격 } 객체의 종류 내장 객체 Date, Number, Boolean, Array, Math 등 입니다. 문서 객체 모델(DOM) 웹 문서 자체를 담는 Document 객체, 웹 문서 안의 이미지를 관리하는 Image 객체 등이 있습니다. 브라우저 객체 모델 사용중인 브라우저 종류나 버.. 2024. 1. 10. [Javascript] Do it! 자바스크립트 입문 - 함수 공부단 4일차 입니다. 함수 자주 실행해야 하는 기능에 포함된 명령이 여러 가지일 때 그 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것을 함수라고 합니다. 이전에 했던 3의 배수 구하는 코드를 함수로 만들기 function multi3() { // 함수 선언 var num = prompt("숫자를 입력하세요") // document.write(typeof(num)) // string if(num != null) { num = parseInt(num) if(num % 3 == 0) document.write("3의 배수") else document.write("3의 배수가 아님") } else { alert("취소") } } 3의 배수 구하기 onclick은 버튼을 클릭했을 때 실행대상인 함수를 알.. 2024. 1. 9. [Javascript] Do it! 자바스크립트 입문 - while문, do...while문 공부단 3일차-4입니다. while문과 do while문 이전에 배운 for문은 횟수가 정해져 있을 때 사용하기 좋고 while문은 횟수보다는 특정조건이 만족하는 동안에만 반복할때 사용하기 좋습니다. while문과 do while문의 차이점은 while문 조건을 먼저 확인하고 조건이 참이면 반복문이 실행됩니다. 반면에 do while문은 반복문이 일단은 한번 실행한 후 조건을 확인한다는 점이 다릅니다. var i = 0 while(i < 10) { console.log("true이면 반복") i += 1 } var i = 0 do { console.log("true이면 반복") i += 1 } while(i < 10) 팩토리얼 계산 var n = prompt("숫자를 입력") var nFact = 1 /.. 2024. 1. 8. [Javascript] Do it! 자바스크립트 입문 - for문 공부단 3일차-3입니다. for문 사용법 // 1부터 5까지의 합 var sum = 0 for(let i = 1; i < 6; i++) { sum += i } console.log(sum) - for문의 기본구조 for(카운터 변수; 조건식; 카운터 변수 조절) { 반복문 코드 } - 카운터 변수 : 반복할 횟수의 초깃값입니다. 위의 경우 i = 1이라고 되어있습니다. 이 뜻은 i라는 변수는 반복할 카운터 변수이고 초깃값이 1이라는 뜻입니다. - 조건식 : i가 몇 번 반복할 것인지의 조건식입니다. i < 5 혹은 i < 10 등 i가 어디까지 반복할 것인지에 대한 조건식입니다. - 카운터 변수 조절 : 이전에 배운 증감연산자를 활용해서 카운터 변수를 조절할 수 있습니다. i++이면 i는 반복문이 한번 .. 2024. 1. 8. [Javascript] Do it! 자바스크립트 입문 - switch문 공부단 3일차-2입니다. 조건이 많을 경우 사용하는 switch()문 var session = prompt("관심 세션 선택\n1-마케팅 2-개발 3-디자인", "1") if(session != null) { switch(session) { case "1": document.write("마케팅") case "2": document.write("개발") case "3": document.write("디자인") } } else { alert("취소") } section의 값을 입력 받고 그 값이 '1'일 경우 '마케팅'을 화면에 출력합니다. 그 값이 '2'일 경우 '개발'을 화면에 출력합니다. 그 값이 '3'일 경우 '디자인'을 화면에 출력합니다. 만약 값이 없다면 취소 알림 창을 띄웁니다. 2024. 1. 8. [Javascript] Do it! 자바스크립트 입문 - if문 공부단 3일차-1입니다. if문 사용법 if(조건) { // 조건이 true일 경우 } else { // 조건이 false일 경우 } 3의 배수 구하기 var num = prompt("숫자를 입력하세요") // document.write(typeof(num)) // string if(num != null) { num = parseInt(num) if(num % 3 == 0) document.write("3의 배수") else document.write("3의 배수가 아님") } else { alert("취소") } prompt로 입력받은 것은 string형이기 때문에 parseInt()로 정수형으로 변환해줘야 합니다. 조건연산자 // 조건 ? 조건이 true일 경우 : 조건이 false일 경우 var s.. 2024. 1. 8. [Javascript] Do it! 자바스크립트 입문 - 연산자 공부단 2일차-3입니다. 산술연산자와 할당 연산자 연산자이름 기호 설명 더하기 + c = a + b 빼기 - c = a - b 곱하기 * c = a * b 나누기 / c = a / b 나머지 % c = a % b 증가 ++ a++ 감소 -- a-- += y += x -= y -= x *= y *= x /= y /= x %= y %= x currentYear - birthYear + 1 피연산자 : currentYear, birthYear , 1 연산자 : -, + 할인 가격 계산 프로그램 만들기 원래 가격 원 할인율 % 할인 가격 계산하기 function showPrice() { var originPrice = document.querySelector('#oPrice').value // 입력한 값 받아오.. 2024. 1. 5. 이전 1 2 3 4 5 6 7 8 ··· 16 다음 728x90 반응형 LIST
