JAVASCRIPT js파일 및 css파일을 나눠서 관리
나눠서 파일 관리 방법 : <script src="js파일"></script>
* window.onload는 한번만 실행된다.
* 실행되는 파일의 onload가 우선순위이다.
* 그 다음 우선순위는 나중에 호출되는 js파일이 우선순이이다.
실행 결과
JAVASCRIPT 기능 (1)
.focus() : 해당하는곳에 초점을 맞춰준다
type="password" : 한글 입력 불가
onchange="" : 커서가 다른곳으로 이동 할 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function myFocus() {
let pwd = document.getElementById("pwd");
console.log(pwd.value);
if (pwd.value == "") {
alert("password는 필수 항목 입니다");
pwd.focus();
} else {
document.getElementById("copy").value = pwd.value;
}
}
const pwdChk = () => {
let pwd = document.getElementById("pwd");
let pwdC = document.getElementById("pwdCheck");
if (pwd.value != pwdC.value) {
alert("일치하지 않습니다!!");
pwd.value = "";
pwdC.value = "";
pwd.focus();
}
};
</script>
</head>
<body>
<!--
<form action="ex29.html" method="get">
<input type="text" id="txt" required /><br />
<input type="text" id="pwd" /><br />
<input type="text" id="copy" /><br />
<input type="submit" value="클릭" onclick="myFocus()" /><br />
</form>
-->
<input type="text" id="txt" /><br />
<input type="password" id="pwd" /><br />
<input type="password" id="pwdCheck" onchange="pwdChk()" /><br />
<input type="text" id="copy" /><br />
<input type="button" value="클릭" onclick="myFocus()" /><br />
</body>
</html>
실행 결과
JAVASCRIPT 기능(2)
confirm() : '확인', '취소' 문구를 띄어줌
addEventListener(기능, 함수) : 기능을 실행했을 때 함수로 이동
window.open() : 새 창 열기 (_self : 창 그대로 유지, default = 새창)
실행 결과
JAVASCRIPT 기능 (3)
submit : 무조건 action에 있는 파일로 이동 (검증할때는 사용 X)
* button을 활용하려면 submit을 따로 호출해야 한다
* form태그에 있는 input태그만 불러올 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
test = () => {
let txt = document.getElementById("txt");
if (txt.value == "") {
alert("갑 입력 하세요");
return;
}
//fo.submit();
console.log(fo);
console.log(fo.txt);
console.log(fo.add);
let f = document.getElementById("fo");
console.log(f.querySelector(".div"));
//console.log(f.getElementById("ddd"));
f.querySelector(".div").innerHTML = "다른값 변경";
};
</script>
</head>
<body>
<form id="fo" action="ex31.html">
<div id="ddd" class="div">aaaa</div>
<input type="text" id="txt" /><br />
<input type="submit" onclick="test()" value="submit전송" />
<input type="button" onclick="test()" value="btn전송" />
</form>
</body>
</html>
실행 결과
JAVASCRIPT
.setAttribute(타입명, 타입이름) : 해당하는 이름의 타입을 생성 ex) 'a'라는 클래스 생성
.removeAttribute() : 해당하는 타입 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#remove {
display: none;
}
#remove.a {
display: block;
background: green;
}
</style>
<script>
function rmBlock() {
let remove = document.getElementById("remove");
remove.setAttribute("class", "a");
}
function rmNone() {
let remove = document.getElementById("remove");
remove.removeAttribute("class");
}
</script>
</head>
<body>
<input type="button" value="클릭" onclick="rmBlock()" />
<div id="remove">
<h3>안녕하세요</h3>
<input type="button" value="rmNone" onclick="rmNone()" />
</div>
</body>
</html>
실행 결과
Quiz01
풀이과정(1)
<!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>
<form action="register.html">
<input type="submit" value="가입" />
</form>
</body>
</html>풀이과정(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
input {
display: flex;
}
</style>
<script>
function register() {
let id = document.getElementById("id");
let pwd = document.getElementById("pwd");
let pwdChk = document.getElementById("pwdChk");
let name = document.getElementById("name");
let fo = document.getElementById("fo");
if (id.value == "") {
alert("아이디는 필수사항입니다.");
return;
} else {
if (pwd.value == "") {
alert("비밀번호는 필수사항입니다.");
return;
} else {
if (pwdChk.value == "") {
alert("비밀번호 확인은 필수사항입니다.");
return;
} else {
fo.submit();
}
}
}
}
const pwdChk = () => {
let pwd = document.getElementById("pwd");
let pwdChk = document.getElementById("pwdChk");
if (pwd.value != pwdChk.value) {
alert("일치하지 않습니다!!");
pwd.value = "";
pwdChk.value = "";
pwd.focus();
}
};
</script>
</head>
<body>
<input id="id" type="text" placeholder="아이디" />
<input id="pwd" type="text" placeholder="비밀번호" />
<input
id="pwdChk"
type="text"
placeholder="비밀번호 확인"
onchange="pwdChk()"
/>
<input id="name" type="text" placeholder="이름" />
<hr />
<form id="fo" action="success.html">
<input type="button" onclick="register()" value="등록" />
</form>
</body>
</html>풀이과정(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>
<script>
function load() {
alert("가입을 축하 합니다.");
}
</script>
</head>
<body onload="load()"></body>
</html>
실행 결과
'javaScript' 카테고리의 다른 글
| JAVASCRIPT 활용 (2) (0) | 2024.03.26 |
|---|---|
| JAVASCRIPT 활용 (0) | 2024.03.25 |
| JAVASCRIPT 기초 (0) | 2024.03.22 |