모든 document 출력 후 코드 실행하기
window.onload=function(){
}수식 (숫자수식 / date수식)
변수이름.toLocaleString()함수 선언 방법
- function aa() { }
- const aa = function(){ }
- const aa =() => { } // 화살표 함수
스크립트( javascript )에서 html요소로 접근하기
document객체 변환 ( String name)
값을 가져오기 전에 객체로 먼저 가져와야한다
내장 객체 - 문서 - 실행하면 body태그에 코딩된 html요소들이
document객체의 하위 객체로 변환
실행된 문서를 document라고 함
id 이름을 이용한 접근
document.getElementById('id이름');
document.querySelector('#id이름');
class이름을 이용한 접근
변수list = document.getElementByClassName('class이름');
변수 = document.querySelector( '.class이름' );
변수list = document.querySelectorAll( '.class이름' );
tag이름을 이용한 접근
변수list = document.getElementVtTagName('태그 이름');
변수list = document.querySelectorAll('태그 이름');
변수 = document.querySelector('태그 이름');
(form) name이름을 이용한 접근
document.form이름.name;
변수 = document.form이름.name;
document객체로 가져온 값을 값을 가져오거나 출력하는법 ( name = "이름")
****해당요소에서 값을 가져온다 - get
document(변수).innerHTML --input이 아닌 요소 - div, td, a, span, p
document (변수).innerText --input이 아닌 요소 - div, td, a, span, p
document (변수).value --input요소
****해당요소에서 값을 출력한다 (변경한다) - set
document (변수).innerHTML = 값 --input이 아닌 요소 - div, td, a, span, p (태그 포함)
document (변수).innerText = 값 --input이 아닌 요소 - div, td, a, span, p (글자로만 출력 태그를 쓰면 텍스트로 입력됨)
document (변수).value = 값 --input요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/public.css">
<style>
form{
border : 10px inset purple;
margin: 20px auto;
padding: 20px;
width: 50%
}
label{
display : inline-block; /*block은 블럭 요소로 변경*/
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<pre>
<input type="button" value="확인">
원래 고유 기능은 없다
새로운 기능을 부여한다
javascript가 필요하다
onclick="함수()" 호출이 필요하다
</pre>
<form name="ff" action="typebutton.jsp" method="post">
<label>아이디</label>
<input type="text" id="id" name="id" class="txt"> <br>
<label>이름</label>
<input type="text" id="name" name="name" class="txt"> <br>
<label>이메일</label>
<input type="text" id="email" name="email" class="txt"> <br>
<label>전화번호</label>
<input type="text" id="tel" name="tel" class="txt"> <br>
<br>
<input type="button" value="확인" onclick="show()"><!-- 함수호출 -->
</form>
<div id="result">결과출력</div>
<script type="text/javascript">
// 함수 정의
function show() { // 내가 정의한 함수
//alert("hello~~"); // 내장 함수 (팝업창)
// 입력한 값을 가져온다 (id 이름으로 접근)
// 변수 선언 var 안써도됨
// 객체를 가져옴
// String id;
idEle = document.getElementById('id');
nameEle = document.getElementById('name');
emailEle = document.getElementById('email');
telEle = document.getElementById('tel');
// // 재선언 가능
// idEle = document.querySelector('#id');
// nameEle = document.querySelector('#name');
// emailEle = document.querySelector('#email');
// telEle = document.querySelector('#tel');
// 전송할 데이터를 가공한다
// 값이 반환 get
// id = "id";
idvalue = idEle.value; //input 요소이므로 value
namevalue = nameEle.value;
emailvalue = emailEle.value;
telvalue = telEle.value;
// 한줄로도 입력이 가능하다
// String id = "id";
idvalue = document.querySelector('#id').value;
// 전송하기를 한다
alert("아이디 : "+idvalue+"\n이름 : "+namevalue+"\n이메일 : "+emailvalue+"\n전화번호 : "+telvalue);
code = "<table border='1'>",
code += "<tr><td>아이디</td><td>" + idvalue + "</td></tr>"
code += "<tr><td>이름</td><td>" + namevalue + "</td></tr>"
code += "<tr><td>이메일</td><td>" + emailvalue + "</td></tr>"
code += "<tr><td>전화번호</td><td>" + telvalue + "</td></tr>"
code +="</table>";
//id="result"인 요소를 검색 - code변수의 내용을 출력
vres = document.getElementById('result');
vres = document.querySelector('#result')
// div요소 안에 넣기
vres.innerHTML = code;
}
</script>
</body>
</html>es 표준
es2
es4
es6(2015) - 기반으로 코딩
- document.querySelector
- let
- const
- 백틱(`)을 이용한 문자열만들기 (templet문자열)
`문자열 문자열 ${변수} 문자열`
'문자열 문자열'+변수+'문자열'
alert(`${name}의 총합${res}원`);
alert(name+"의 총합"+res+"원");es8
변수
- var : 중복 선언
- let : 중복 선언 불가
- const : 중복 선언 불가, 반드시 초기값이 할당, 참조 값 변경 불가( 배열의 값은 바꿀 수 있음 )
생략할 수도 있다
'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [CSS] CSS박스모델 (0) | 2024.04.30 |
|---|---|
| [CSS] 선택자/ 클래스/폰트 등등 (0) | 2024.04.29 |
| [HTML/CSS] form/input (여러 속성), button, textarea, select, field, color 변경 등 (0) | 2024.04.25 |
| [HTML/CSS] 멀티미디어(audio/viedo) / 스타일태그 / 특수문자 (1) | 2024.04.24 |
| [HTML/CSS] 테이블/iframe/div와 span (0) | 2024.04.23 |
