2. html의 input 요소 활용
HTML 요소를 선택하여 제어하기(변수에 요소 넣기)
DOM (Document Object Model) 활용하기
HTML 요소를 제어하기 위한 (자바스크립트) 객체(실체화된 것) 모델
Document Object : 문서 객체
HTML 요소 = 문서 객체
참고) 요소의 식별이나 분류에 사용하는 속성 - class, id
요소의 이름(태그명) <- 요소를 선택하는 데 사용가능
class - 분류
id - 식별
요소를 선택하는 방법
1. 요소의 id 속성을 사용하는 방법
문형) document.getElementbyId("id 속성값");
특정 html 요소에 출력하기
1) innerHTML : 요소의 내부(컨텐츠)에 출력,
태그 작성 시 태그를 하위 요소로 처리
2) innerText : 요소의 내부에 출력, 태그 작성 시 태그를 글자로 그냥 출력
둘 다 기존의 내용을 지우고 출력(덮어쓴다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 제어하기</title>
</head>
<body>
<button id="btn">버튼</button>
<p id="para1">여기에 다른 문장이 나올까요?</p>
<p id="para2">여기에 다른 문장이 나올까요?</p>
</body>
<script>
// 버튼을 순수하게 자바스크립트만으로 제어하자
var btns = document.getElementById("btn");
console.log(btns);
btns.innerHTML = "<h2>BUTTON</h2>";
var pa1 = document.getElementById("para1");
console.log(pa1);
pa1.innerHTML = "<h2>다음 문장을 입력합니다.</h2>"; //태그를 사용하여 보여준다.
var pa2 = document.getElementById("para2");
pa2.innerText = "<h2>다음 문장을 입력합니다.</h2>"; //태그를 text형식으로 보여준다.
</script>
</html>버튼 이벤트(클릭) 처리 (Event Handling)
1. html 태그의 onclick 속성을 사용
2. addEventListner를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나이계산기2</title>
</head>
<body>
태어난 연도 : <input id="in_year" type="text" value="YYYY"> <br><br>
<!-- value는 보이지 않을 뿐 존재하는 태그 사용자가 입력한 값으로 덮어 씌여진다. -->
<button id="btn">계산</button>
<p id="result"></p>
</body>
<script>
var cuYear = 2023; //현재 년도 지정
var bYear; //태어난 년도 변수선언
var age; //나이 변수 선언
//요소를 저장할 변수
var inYear = document.getElementById("in_year"); // input 태그
var b = document.getElementById("btn"); // 계산
var res = document.getElementById("result"); //결과
b.addEventListener("click", function () {
bYear = inYear.value; //input 태그의 입력 값을 가지고 와서 bYear에 대입(저장)
console.log(bYear);//입력값 확인
age = cuYear - bYear + 1; //나이계산
console.log(age); //나이계산값 확인
//계산 결과를 지정위치(요소)에 출력
res.innerHTML = bYear + "년에 태어난 사람의 나이는 " + age
+ "세입니다.";
//스타일을 바꿔보자. 나이별로 글자색을 변경
//성녀과 미성년 구분(19 이상과 이하)
if (age > 18) {
//글자 색을 파란색
res.style.color = "blue";
res.style.backgroundColor = "yellow";
//background-color를 카멜케이스로 변경
res.style.border = "2px solid green";
}
else {
//글자 색을 빨간색
res.style.color = "red";
res.style.backgroundColor = "black";
}
});
</script>
</html>오타가 나면 다음 것에 영향을 미친다. 빼먹은 부분 없는지 잘 확인하기.
제어문
1. 분기 제어문 if : 만약에... 라면 ~해라. 아니면 하지 마라.
문법 1) if(조건식) {
A 작업 코드
}
조건식이 참(true)이라면 A 작업 코드를 실행하고, 거짓 (false)이라면 실행하지 마라.
조건식에 올 수 있는 것들 :
1) boolean 형태의 변수 한다/안한다
2) true/false로 결과가 나오는 비교식
3) true 또는 false 값 자체 쓸 수는 있으나 사용하지는 않는다.
문법 2)
if(조건식) {
A 작업코드들;
}
else {
B 작업코드들;
}
조건식이 true일 경우 A 작업 코드들을, false일 경우 B 작업 코드들을 선택적으로 실행한다.
연산자 (컴퓨터의 궁극적인 목표 -> 연산) p475
1. 산술연산자 - 수학 계산을 할 때 사용하는 연산자
+ , - , * , /
% : 나머지를 취하는 나누기 연산
나눗셈 공식 : a와 b가 자연수 일 때, a = bq = r
q(quotient)는 몫, r(remainder)은 나머지
참고) 0으로 나눌 수는 없다.(무한대의 값이 나온다.)
나눗셈의 결과는 실수 ( 5 / 2 = 2.5) 피연산자 연산자/ 피연산자 이항연산자
예 ) 사이클 순환 달력 7칸, 암호화
증감 연산자
++ : 증가 연산자, 단항 연산자, 피연산자를 1 증가시킨다.
- - : 감소 연산자, 단항 연산자, 피연산자를 1 감소시킨다.
증감 연산자의 위치에 따른 차이점
전위형 : 피연산자 앞에 연산자가 오는 경우
후위형 : 피연산자 뒤에 연산자가 오는 경우
2. 할당연산자(a.k.a 대입 연산자)
산술 연산자 + '='인 형태 (증감 연산자 제외)
= , +=, -=, *=, /=, %=
3. 연결연산자
+ : 문자열 간의 연결, 문자열과 숫자형의 연결 등, 하나의 문자열로 만듦, 출력 시 많이 사용
4. 비교연산자(두 피연산자를 비교하는 연산자)
결괏값이 논리값으로 나온다(True/False) 2, 4는 자바에는 없는 연산자
== : 두 피연산자가 값이 같은가를 비교하는 연산자, =는 대입 같은면 True
=== : 두 피연산자의 값과 자료형이 같은가? 같은면 True
!= : 두 피연산자가 값이 같지 않은가를 비교하는 연산자 같지 않으면 True
!== : 두 피연산자의 값이나 자료형이 다른가? 같지 않으면 True
< :
<= :
> :
>= :
5. 논리연산자
간단한 계산기
두 수를 입력(<input>) 받아서 덧셈 결과를 <p>에 출력하는 예
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 계산기 만들기</title>
</head>
<body>
<input id="firstnum" type="number"> +
<input id="secondnum" type="number"><br><br>
<button id="btn">계산</button><br>
<p id="result"></p>
</body>
<script>
var firNo; // 첫번째 변수 선언
var secNo; // 두번째 변수 선언
var res; // 결과값 변수 선언
var firNo = document.getElementById("firstnum"); //input 1 연결
var secNo = document.getElementById("secondnum"); //input 2 연결
var b = document.getElementById("btn"); // 버튼 연결
var res = document.getElementById("result"); //p 태그 연결
// 버튼을 클릭 했을 때 함수값 가지고 오기
b.addEventListener("click", function(){
fir = Number(firNo.value); // 첫번째 값 출력
console.log(firNo); // 첫번째 값 출력 확인
sec = Number(secNo.value); // 두번째 값 출력
console.log(secNo); // 두번째 값 출력 확인
re = fir + sec; // 첫번째 값 + 두번째 값 출력
console.log(re); // 첫번째 값 + 두번째 값 출력 확인
res.innerHTML = "두 값의 합은 " + re + "입니다.";
//결과 값 화면에 출력
})
</script>
</html>변수 선언한 공간과 연결하는 곳, 실제로 출력하는 함수의 이름이
모두 다를 수 있으니 헷갈리지 않게 잘 연결하는 것이 필요하고 여러 번 반복해서 연습하자!
오타 주의, 세미콜론 꼭 작성하기
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 (0) | 2023.03.09 |
|---|---|
| 3월 8일 (2) JavaScript - 분기 제어문 switch문 (0) | 2023.03.08 |
| 3월 8일 (1) JavaScript - 연산자2, 분기 제어문 if문 (0) | 2023.03.08 |
| 3월 7일 (1) JavaScript - 변수2 (0) | 2023.03.07 |
| 3월 6일 JavaScript - 변수 (0) | 2023.03.06 |
