https://www.tutorialspoint.com/javascript/javascript_functions.htm
[ JavaScript – Functions ]
Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty or not), and a statement block surrounded by curly braces.
<Javascript>
-> Java EE로 바꾸기 + 왼쪽의 Servers 폴더 열기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function btn1Clicked(){
alert('버튼 클릭');
}
function btn2Clicked(){
var ps = document.getElementsByTagName("p");
alert(ps.length); // <p> 태그 개수
console.log(ps); // 크롬창에서 F12 누르기 - 상부의 Console 클릭 - 왼쪽 상단의 Show console sidebar 클릭 - 크롬창에서 '버튼 2'클릭 - console창의 info(파란색) 클릭
console.log(ps.length);
for(i=0; i < ps.length; i++){
console.log( ps[i].innerText ); // innerText : 안쪽에 있는 Text를 읽어옴
}
var cs = document.getElementsByClassName("bb");
alert(cs.length); // 클래스 이름 안에 bb가 들어간 태그 개수
console.log(cs);
console.log(cs.length);
var t = document.getElementById("id1"); // ※ (단일 요소) - id1이 2개 이상일 경우, 제일 처음에 나오는 것으로 인식 : <p id="id1" class="aa bb">글씨1</p>
console.log(t);
t.style.color="#ff0000"; // 빨간색으로 변경!
}
</script>
</head>
<body>
<p id="id1" class="aa bb">글씨1</p>
<p id="id1">글씨2</p>
<p>글씨3</p> <!-- P태그 -->
<h1>헤딩1</h1> <!-- 헤딩 태그 -->
<h2>헤딩2</h2>
<input type="text" class="aa bb" value="value를 통해서 처리" />
<button type="button" class="aa" onclick="btn1Clicked()">버튼1</button> <!-- 버튼 1: [ <button></button> ] 으로 생성 -->
<input type="button" value="버튼2" onclick="btn2Clicked()"/> <!-- 버튼 2: [ <input> + type="button" ]으로 생성
이 때, [ type="button" ]이 있기 때문에, 클릭창이 된 거임. 없으면, 단순 입력창이 됨 -->
<input type="checkbox" class="aa"/>동의
</body>
</html>