728x90
a태그는 클릭해서 링크를 통해 페이지 이동은 가능하나 내용을 가져오는데는 한계가 있다.
자바스크립트와 밀접한 관련이 있는 input태그는 사용자가 데이터를 입력할 수 있는 입력필드를 정의할 때 사용한다.
input태그의 type속성 변경으로 여러가지 모양을 표현할 수 있다. (button, file, submit, password 등)
자바스크립트로 HTML 요소를 제어하려면 제어하고자하는 엘리먼트(DOM객체, 태그+컨텐츠)를 먼저 가져와야한다.
자바스크립트는 보다 편하게 요소객체를 가져올 수 있는 메서드가 있다.
자바스크립트로 태그를 선택하는 방법 3가지 (css식별자와 비슷한 느낌)
id속성으로 가져오기
var 변수 = document.getElementById(id값);
요소이름으로 가져오기 : HTML에서 태그는 여러개가 사용될 수 있기 때문에 배열형태로 반환
var 변수 = document.getElementsByTagName(요소의 태그이름);
class속성으로 가져오기
document.getElementsByClassName(class값);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function function01(){
alert("메서드 정상호출됨");
}
</script>
</head>
<body>
<input type="button" value="버튼1" onclick="function01();"> <!-- 버튼을 누르면 function01함수가 실행됨 -->
<input type="button" value="파라미터 버튼"> <!-- button은 인라인요소 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function function02(){
var res = document.getElementById("name");
var value = res.value;
alert(value);
}
</script>
</head>
<body>
<input type="text" value="연습" id="name"><!-- type=text는 텍스트필드임 -->
<input type="button" value="버튼2" onclick="function02();">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function function03(){
var res = document.getElementById("res").value; //입력필드에 쓰여지는 값을 res에 저장
var m_div = document.getElementById("m_div"); //결과를 표시할 <div>요소를 찾아 m_div에 저장
m_div.innerHTML = res; //m_div요소의 내용을 res변수의 값으로 설정해 표시
}
</script>
</head>
<body>
<input id="res"><!-- type안쓰면 디폴트는 텍스트임! -->
<input type="button" value="버튼3" onclick="function03()">
<div id="m_div"></div>
</body>
</html>
728x90
'JavaScript' 카테고리의 다른 글
| [JS] 계산기 만들기 (0) | 2023.10.10 |
|---|---|
| [JS] 구구단 만들기 (1) | 2023.10.10 |
| [JS] 함수 선언과 호출 (0) | 2023.10.09 |
| [JS] Object (0) | 2023.10.09 |
| [JS] 배열 (0) | 2023.10.09 |