ㅁ 복습1
<button onclick="fnRemind1();">복습1</button>
<script>
function fnRemind1(){
console.log(name); // 오류 안 나고 undefined 출력된다.
var name = "홍길동" ; // (1) 선언 var name; (2) 대입 name='홍길동';
var name = "강개순"; // var는 재선언 가능 (동일한 이름의 변수)
name = "김말순"; // var는 재할당 가능
console.log(name);
let age = 20;
// let age = 30; // let은 재선언 불가능
age = 30; // let은 재할당 가능
console.log(age);
const academy = "구디아카데미"; // const는 반드시 초기화까지
// const academy = "KH정보교육원"; // const는 재선언 불가능
// academy = "KH정보교육원"; // const는 재할당 불가능
console.log(academy);
if(age < 40) {
var score = 100;
let grade = 'A';
const className = '빨간반';
}
console.log(score); // var는 함수스코프
// console.log(grade); // let은 블럭스코프
// console.log(className); // const는 블럭스코프
}
</script>
- var로 선언된 변수는 해당 영역 내에서 hoisting된다.
선언과 초기화가 같이 이루어지는 구문은 선언 부분만 호이스팅된다.
- 만약 var name = "홍길동" 이 구문 자체가 없다면(name이라는 변수 자체가 선언되지 않으면),
콘솔창에 오류는 나지 않고 그냥 빈 문자열 출력된다.
- 블럭 내에서 var로 선언된 변수만이 블럭 바깥쪽에서 쓸 수 있다.
let, const로 선언된 변수는 그 블럭 내에서만 사용할 수 있다. 이게 scope의 차이다.
ㅁ 복습2
<button onclick="fnRemind2();">복습2</button>
<div id="result1"></div>
<script>
function fnRemind2(){
let name = prompt("이름 입력");
let age = prompt("나이 입력");
if(name && age){ // 둘 다 데이터가 입력되었을 경우
if(confirm("20살 이상이면 확인 아니면 취소 누르삼")) {
document.getElementById("result1").innerHTML = "<b>통과</b>";
}
else {
document.querySelector("#result1").innerHTML = "<b>실패</b>";
}
}
else{
document.getElementsByTagName("div")[0].innerHTML = "<b>값이 누락되었습니다. 다시입력해주세요</b>";
}
}
</script>
ㅁ 복습 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
이름 : <input type="text" id="userId"> <br>
나이 : <input type="number" id="userAge"> <br> <!-- 나이는 숫자만 입력 가능한 number타입 텍스트 상자 -->
성별 :
<input type="radio" name="gender" value="M" checked> 남
<input type="radio" name="gender" value="F"> 여
<br>
<button onclick="fnRemind3();">복습3</button>
<div id="result2"></div>
<script>
function fnRemind3() {
// 사용자가 입력한 이름, 나이, 사용자가 선택한 성별값을 id가 result2인 영역에 출력.
// 단, 성별이 M일 경우 남자, F일 경우 여자로 출력.
let idInput = document.getElementById("userId"); // input 요소 객체다. value값을 가져온건 아님.
let ageInput = document.getElementById("userAge");
let genCheckedInput = document.querySelector("input[name=gender]:checked")
// checked 되어있는 input 요소 선택. 속성 선택자 + 상태 선택자
let resultDiv = document.getElementById("result2"); // div 요소 객체
resultDiv.innerHTML = "이름: " + idInput.value +
", 나이: " + ageInput.value + // 숫자만 기술되어있어도 문자열데이터다
", 성별: " + (genCheckedInput.value == "M" ? "남자" : "여자");
// 화면 초기 상태로 만들기 (이름, 나이 텍스트창 비우고, 성별도 다시 남자 선택으로)
// value에 빈문자열 대입해주면 된다.
idInput.value = "";
ageInput.value = "";
document.querySelectorAll("input[name=gender]")[0].checked = true;
}
</script>
</body>
</html>
- let genCheckedInput = document.querySelector("input[name=gender]:checked")
checked 되어있는 input 요소 선택. 속성 선택자 + 상태 선택자
- 사용자가 입력한 데이터는 숫자만 기술했어도 문자열 데이터다.
ㅁ 복습 3 - (2) 화면을 초기 상태로 만드는 2번째 방법. form을 활용한 초기화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<form action="" id="form">
이름 : <input type="text" id="userId"> <br>
나이 : <input type="number" id="userAge"> <br> <!-- 나이는 숫자만 입력 가능한 number타입 텍스트 상자 -->
성별 :
<input type="radio" name="gender" value="M" checked> 남
<input type="radio" name="gender" value="F"> 여
<br>
<button type="button" onclick="fnRemind3();">복습3</button>
<!-- form안의 button은 자동으로 submit이 되어버려서 일반버튼으로 지정 -->
</form>
<div id="result2"></div>
<script>
function fnRemind3() {
// 사용자가 입력한 이름, 나이, 사용자가 선택한 성별값을 id가 result2인 영역에 출력.
// 단, 성별이 M일 경우 남자, F일 경우 여자로 출력.
let idInput = document.getElementById("userId"); // input 요소 객체다. value값을 가져온건 아님.
let ageInput = document.getElementById("userAge");
let genCheckedInput = document.querySelector("input[name=gender]:checked") // checked 되어있는 input 요소 선택. 속성 선택자 + 상태 선택자
let resultDiv = document.getElementById("result2"); // div 요소 객체
resultDiv.innerHTML = "이름: " + idInput.value +
", 나이: " + ageInput.value + // 숫자만 기술되어있어도 문자열데이터다
", 성별: " + (genCheckedInput.value == "M" ? "남자" : "여자");
// 화면 초기 상태로 만들기 (이름, 나이 텍스트창 비우고, 성별도 다시 남자 선택으로)
// 화면 초기 상태로 만들기 2번째 방법. form으로 묶기
document.getElementById("form").reset();
}
</script>
</body>
</html>
- form 안의 버튼은 type을 지정하지 않으면 기본값이 submit이다.
- 사실 (3)-1 에서 form으로 묶지 않았지만 웹개발을 하면 저것들은 form으로 묶여있을 것이다.
form 요소를 이용해서 좀 더 편하게 초기화를 시킬 수 있다.
- form으로 묶게 되면 기본적으로 이 폼 안에서 제출(submit)과 초기화(reset) 행위를 진행할 수 있다.
submit 타입의 버튼을 두면 서버측으로 제출이 진행된다.
reset 타입의 버튼을르 두면 초기화가 진행된다.
- form을 활용한 초기화.
데이터를 출력한 이후에 아이디가 form인 요소를 선택해서 reset을 진행시키고자 한다면, form 요소를 선택한다.
form 요소 객체는 기본적으로 reset() 메소드를 가지고 있다.
객체들은 속성이나 메소드를 가지고 있다.
이 reset()메소드를 호출하면 폼 요소 내에 있는 것들이 초기화된다.
- submit()메소드를 사용해서 강제로 제출시킬 수도 있다.
ㅁ 복습 4. 지금까지 만든 버튼 1, 2, 3의 스타일을 바꾸는 버튼 4 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
<form action="" id="form">
이름 : <input type="text" id="userId"> <br>
나이 : <input type="number" id="userAge"> <br> <!-- 나이는 숫자만 입력 가능한 number타입 텍스트 상자 -->
성별 :
<input type="radio" name="gender" value="M" checked> 남
<input type="radio" name="gender" value="F"> 여
<br>
<button type="button" onclick="fnRemind3();">복습3</button>
<!-- form안의 button은 자동으로 submit이 되어버려서 일반버튼으로 지정 -->
</form>
<div id="result2"></div>
<script>
function fnRemind3() {
// 사용자가 입력한 이름, 나이, 사용자가 선택한 성별값을 id가 result2인 영역에 출력.
// 단, 성별이 M일 경우 남자, F일 경우 여자로 출력.
let idInput = document.getElementById("userId"); // input 요소 객체다. value값을 가져온건 아님.
let ageInput = document.getElementById("userAge");
let genCheckedInput = document.querySelector("input[name=gender]:checked") // checked 되어있는 input 요소 선택. 속성 선택자 + 상태 선택자
let resultDiv = document.getElementById("result2"); // div 요소 객체
resultDiv.innerHTML = "이름: " + idInput.value +
", 나이: " + ageInput.value + // 숫자만 기술되어있어도 문자열데이터다
", 성별: " + (genCheckedInput.value == "M" ? "남자" : "여자");
// 화면 초기 상태로 만들기 2번째 방법. form으로 묶기
document.getElementById("form").reset(); // 10시 30분쯤. form의 메소드 submit, reset 있다.
}
</script>
<!-- 복습4. 위의 복습1, 복습2, 복습3에서 만든 버튼의 스타일 조작 (한 문서에 다 담겨있다고 가정)-->
<hr>
<button onclick="fnRemind4();">복습4</button>
<script>
function fnRemind4() {
let btnList = document.getElementsByTagName("button"); // [button, button, ...]
btnList[0].style.fontSize = "32px"; // fontSize라는 CSS속성이 있다.
btnList[1].style.backgroundColor = "red";
btnList[2].style.border = "3px dashed blue";
btnList[3].style.width = "100px";
}
</script>
</body>
</html>
- 첫번째 버튼 요소 객체의 폰트 사이즈를 조작하고자 한다면 우선은 style 속성에 접근한다.
그 style 속성 안에는 또 다른 css 속성들이 엄청 많다. 그 css 속성들에 접근한다.
- style 정보를 수정하고자 한다면, 그 요소 객체의 style 속성의 css속성까지 접근해야 한다.
- property는 낙타 표기법. attribute였으면 background-color.
ㅁ DOM 객체로 선택했어도(property 지만)
~.style.width로 접근했을 때는 ~.style.width = "500px"이고,
~.width로 접근했을 때는 ~.width = 500;이다.
'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 06. 배열 (객체), 배열 관련 속성 및 메소드 (0) | 2024.08.12 |
|---|---|
| [자바스크립트] 05. 문자열, 수학, 형변환 관련 메소드 (0) | 2024.08.12 |
| [자바스크립트] 실습문제2 - DOM 관련문제 (0) | 2024.08.09 |
| [자바스크립트] 04. DOM - (2) 동적인 효과 주기 (0) | 2024.08.09 |
| [자바스크립트] 04. DOM (0) | 2024.08.09 |
