JS
JS 02/28
SangssI
2023. 3. 1. 18:41
자바스크립트와 HTML의 연동
1. js_method.html : 자바스크립트를 이용한 함수 만들기
JS 코드
<script>
let aa = "결과: "; /* 일반적인 전역변수 설정은 문제가 되지 않는다 */
/*let a2 = document.getElementById("res2");*/ // 태그를 검색하는 코드는 '절대' 전역으로 지정할 수 없다.
function test1() { /* 자바 스크립트의 함수, 반환형을 가지고 있지 않음 */
/* function 키워드로 시작하는 js의 메서드는 반환형을 가지고 있지 않다 */
let res = document.getElementById('res2'); // id가 res2인 요소의 정보를 res에 저장하여 객체의 속성 변경 가능
alert(aa + res.value); // 전역변수 aa와 res.value의 값을 받아 경고창의 메시지 출력
}
function test2(n) {
//js의 메서드는 파라미터 타입을 따로 지정하지 않는다
//alert(n);
//id가 res1인 객체를 검색
let res = document.getElementById('res1');
res.value = n;
}
function test3() {
let h_tag = document.getElementById('h'); // h1태그의 id인 h의 요소의 정보를 h_tag에 저장하여 h1태그에 내용추가
h_tag.textContent = '반갑습니다.'; // <h1>반갑습니다.</h1> 이러한 형태로 만들어 주는 메서드. innerHTML은 보안에 취약하여 textContent를 사용하지만 추가적인 태그를 넣기 위해선 innerHTML을 사용하여야 함
}
</script>HTML 코드
<body>
<!-- value는 text상자의 값이 저장됨, placeholder : 커서를 놓으면 사라지는 텍스트 -->
<!--input태그 : 사용자로부터 정보를 받기 위한 태그 이며 여러 종류가 있다.-->
<input id="res1" type="text" value="" placeholder="이름을 입력하세요"><br> // id 지정
<input id="res2" placeholder="값을 넣는 가이드라인"><br> <!-- type="text"속성이 없으면 일반적인 입력상자가 된다-->
<!-- 버튼1을 클릭하면 test1()메서드가 호출된다 -->
<input type="button" value="버튼1" onclick="test1();"> //onclick 속성을 통해 자바스크립트의 함수를 지정
<input type="button" value="버튼2" onclick="test2('안녕');"> // 자바스크립트 함수에 '안녕'이라는 문자열 매개변수 전달
<input type="button" value="버튼3" onclick="test3();">
<h1 id="h">안녕하세요</h1>
</body>2. js_gallery.html : 자바스크립트를 이용한 간단한 사진첩 만들기
JS코드
<script>
let num = 1; //전역변수
let path = "image/img"; // 전역변수
function next() {
num++;
if( num == 8 ){
num = 1;
}
//gallery라는 id를 가진 요소로 접근하여 src경로를 변경
document.getElementById('gallery').src = path + num + ".jpg";
}
function prev() {
num--;
if( num == 0 ){
num = 7;
}
//gallery라는 id를 가진 요소로 접근하여 src경로를 변경
let gallery = document.getElementById('gallery');
gallery.src = path + num + ".jpg";
}
</script>HTML코드
<body>
<div>
<a href="#" onclick="prev()";>
<img src="image/left_btn.png">
</a>
<a>
<img id="gallery" src="image/img1.jpg" width="300" height="150">
</a>
<a href="#" onclick="next()";>
<img src="image/right_btn.png">
</a>
</div>
</body>3. js_gugudan.html : 자바스크립트를 이용한 간단한 구구단 만들기
CSS코드
<style>
hr { width: 300px;
margin: 10px 0;
border: aquamarine 5px ridge;}
#disp { width: 300px;
height: 300px;
background: black;
color: white;
text-align: center;
font: 20px none sans-serif;
}
</style>JS코드
<script>
function start() {
let dan = document.getElementById("dan").value;
//input의 value는 기본적으로 문자열 구조이므로 +를 사용하면 이어붙어서 표기된다.
//단 -,/,*,>,< 등은 따로 Number()형태로 변환하지 않아도 연산이 가능
//유효성 체크(무결성 체크)
//정규식 사용
let num_check = /^[0-9]+$/;
if ( !num_check.test(dan) ) {
alert("2 ~ 9 사이의 값만 입력하세요");
return; // 아래의 코드를 실행하지 않고 다시 함수를 실행
}
/* if( dan.trim() == ''){
alert("값을 입력해야 합니다");
return; // 아래의 코드를 실행하지 않고 다시 함수를 실행
} */
if( dan.trim() < 2 || dan.trim() > 9) {
alert("2 ~ 9 사이의 값을 입력하세요");
return; // 아래의 코드를 실행하지 않고 다시 함수를 실행 Ex) 10단을 입력하고 경고창이 뜬 후 구구단이 출력되지 않아야 함
}
//구구단 생성
let str = "";
for (let i=1; i<10; i++) {
str += dan + " * " + i + " = " + (dan * i) + "<br>";
}
let div = document.getElementById('disp');
div.innerHTML = str;
}
let b_show = true;
function show() {
b_show = !b_show;
let btn = document.getElementById('btn_show');
b_show ? btn.value = "숨기기" : btn.value = "보이기";
//div 검색 및 숨기기 처리
let div = document.getElementById("disp");
b_show ? div.style.display = 'block' : div.style.display = 'none' // style속성의 display를 이용
}
</script>HTML코드
<body>
<div>
단 : <input id="dan">
<input type="button" value="결과보기" onclick="start();">
<input type="button" value="숨기기" id="btn_show" onclick="show();">
</div>
<hr>
<div id="disp"></div>
</body>4. form태그.html : HTML에서의 form태그와 자바스크립트의 파라미터 전달
JS코드
<script>
function check1() {
//f1이라는 id를가진 form태그를 검색
let f = document.getElementById("f1");
//검색한 form태그인 f를 통해 id,pwd,age라는 name속성을 가진 태그로 접근
//form태그를 이용하면 id가 아닌 name을 통해 form의 내부 태그들의 요소의 정보에 접근이 가능
// document.getElementById("");를 이용하지 않아도 바로 접근이 가능하다
let id = f.id.value; //form태그 내부의 name = "id"인 요소의 value
let pwd = f.pwd.value; //form태그 내부의 name = "pwd"인 요소의 value
let age = f.age.value; //form태그 내부의 name = "age"인 요소의 value
//유효성 체크
if( id == '' ) {
alert("아이디는 반드시 입력해야 합니다.");
return;
}
if( pwd == '' ){
alert("비밀번호는 필수입니다.");
return;
}
let age_check = /^[0-9]+$/;
if ( !age_check.test(age) ) {
alert("나이는 정수로 입력하세요");
return;
}
//전송방식
// get : 파라미터를 url에 노출, 보안성이 떨어지지만 속도가 빠른 편
// post : 파라미터가 url에 노출되지 않음. 속도가 느린편이지만 보안성이 높아진다.
f.method = "post";
f.action = "login.jsp"; // login.jsp의 페이지로 이동하면서 form태그의 name으로 지정된 속성들만(파라미터)를 같이 전달한다.
// id의 value는 넘어가지 않는다.
//입력된 데이터(form안에 name으로 설정된 요소)을 서버측(외부)으로 전송 // 파라미터로 만들기위한 이동장치
f.submit(); //http://localhost:63342/pss_html/Ex_0228/login.jsp?id=123&pwd=14124&age=1515 홈페이지의 파라미터에 name으로 설정된 값을 전송
} //check1()
function check2() {
//name이 fff로 지정되어 있는 form태그 가져오기
let f = document.getElementsByName('fff'); // getElementsByName은 'fff' name을 가지는 요소를
//배열형태로 반환
alert(f.length); // f배열의 길이를 확인하기 위한 경고창 결과 : 1
let id = f[0].id.value; // 'fff'을 name으로 가지는 요소는 form 하나이므로 f[0]을 통해 접근
let pwd = f[0].pwd.value;
//유효성 체크 했다치고
// f.method = "get";
// f.action = "login.jsp";
f[0].submit();
} //check2()
</script>HTML 코드
<body>
<!-- 서버로 값을 전송하기 위해 데이터를 스크립트 영역으로 옮겨주기 위한 태그 -->
<form id="f1">
<table border="1">
<tr>
<th>아이디</th>
<!-- name 속성은 id와 비슷하지만, input,textArea태그등의 정해진
일부 태그에서만 사용이 가능하며, form태그 밖에서 name속성을 정의하는 것은 의미가 없다! -->
<td><input name="id"></td>
</tr>
<tr>
<th>비밀번호</th>
<!-- name 속성은 id와 비슷하지만, input,textArea태그에서만 사용이 가능-->
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>나이</th>
<!-- name 속성은 id와 비슷하지만, input,textArea태그에서만 사용이 가능-->
<td><input name="age"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="폼체크1" onclick="check1();">
</td>
</tr>
</table>
</form>
<hr>
<form name="fff" method="get" action="login.jsp">
id : <input name = "id"><br>
pwd : <input name = "pwd"><br>
<input type="button" value="폼체크2" onclick="check2();">
</form>
<hr>
</body>