JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법
2022. 9. 30. 10:30ㆍ애플코딩 javascript 강의
반응형
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="hi">알림창임</p>
<button onclick="showbox('none')">닫기</button>
</div>
<!-- function 적용으로 깨끗이 쓴 경우 -->
<button onclick="showbox('block',1)">버튼1</button>
<button onclick="showbox('block',2)">버튼2</button>
<!-- 더럽게 쓴 경우 -->
<button onclick="document.getElementById('alert').style.display='block'">버튼3</button>
<script>
// function 함수명( 구멍1, 구멍2 ){
// document.getElementById("alert").style.display=구멍;
// };
//위와 같이 ()안에 넣은 구멍은 {}안에서 원하는 곳에 사용할 수 있다.
//저 구멍을 어디가서 구멍이라고 하지말아라 쪽파리니까
//파라미터라고 말해라!!
// 파라미터 작명은 아무렇게나 가능
//파라미터 여러개 가능
//아까는 none과 block을 위해 두개의 함수를 만들었지만 파라미터를 넣어
//하나의 함수로 해결했다.
function showbox(aa,bb){
document.getElementById("alert").style.display=aa;
if(bb==1){
document.getElementById("hi").innerHTML="아이디를 입력해주세요";
}else if(bb==2){
document.getElementById("hi").innerHTML="비번 입력하세요";
}
};
//숙제
//버튼 1을 눌렀을때 아이디입력하세요
//버튼 2를 누르면 비번입력하세요
//뜨도록 해라
//위에 showbox에 내가 푼걸 적용해뒀음
</script>
</body>
</html>main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}알림창임
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
|---|---|
| JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(2)-동적 UI 만드는 스텝(Alert 박스 만들기) (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(1)-강의소개와 자바스크립트의 근본 (2) | 2022.09.29 |