Function, Parameter
- 함수를 쓰는 이유: 코드축약, 파라미터 사용
- 파라미터: 비슷한 함수를 반복적으로 작성하지 않고, 하나의 함수로 돌려쓰기
함수와 파라미터
함수: 반복되는 코드를 한번만 적고 반복적으로 쓰이는 자리에 넣어서 씀
파라미터: 위에 씀
파라미터
function(a) 에서 a
function(a, b, c) 등으로 쓸 수 있다
함수 내에서 변할 수 있는 요소에 대입해서 사용한다.
함수 하나를 만들어서 비슷한 기능에 반복 사용
"구멍 자리에 값을 넣으면, 그 값을 넣어서 함수를 실행해줘!"
getElementByClassName(class 이름)[순서(0부터)]
클래스 이름으로 요소를 찾는다
이벤트 리스너
이벤트 발생으로 변경이 발생하는 코드의 경우,
함수를 쓰지 않고 변경을 일으키는 문법
마치며
중복을 제거할 수 있는 문법이라는게 마음에 든다.
역시 머리에 쏙쏙 박아주는 강의이다.
짧지만 임팩트 있게 이해됨.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--CSS파일 첨부-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- UI 만드는 법: 1) 미리 디자인해놓고 숨긴 2) 버튼 누르거나 하면 보여줌-->
<div class="alert-box" id="alert">
<p id="text">Alert 박스</p>
<button id="close">X</button>
</div>
<button onclick="unfold('block', '아이디를 입력하셈')">버튼1</button>
<button onclick="unfold('block', '비번을 입력하셈')">버튼2</button>
<script>
<!--이벤트리스너-->
// 이벤트 자리에 click, mouseover, scroll 등 사용 가능
document.getElementById('close').addEventListener('click', function () {
document.getElementById('alert').style.display = 'none';
});
<!-- 함수와 파라미터-->
// 구멍 자리에 값을 넣으면, 그 값을 넣어서 함수를 실행해줘!
// 함수 하나를 만들어서 비슷한 기능에 반복 사용
function unfold(구멍, 구멍2){
document.getElementById('alert').style.display = 구멍;
document.getElementById('text').innerText = 구멍2;
}
</script>
</body>
</html>
시작은 창대하나 끝은 미약하리라