JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법
2022. 9. 30. 10:08ㆍ애플코딩 javascript 강의
반응형
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--
$ 표시는 jquery 관련된것
주석처리는 ctrl + /, command + /
UI 만드는 step
1) html/css 미리 디자인(미리하면 미리 숨김)
2)필요할 때 보여달라고 코드 짬 (자바스크립트로)
-->
<div class="alert-box" id="alert">알림창임<button onclick="close11()">닫기</button></div>
<button onclick="document.getElementById('alert').style.display='block'">버튼1</button>
<button onclick="showbox()">버튼2</button>
<script>
//script태그를 html 밑에 두는 이유는
//html 위에다가 작성하면 작동 안한다.
//위에서 부터 읽기 때문에 html 코드 먼저 읽고 자바스크립트가 작동하게 해줘야 한다.
//
// onclick에 document.getElementById('alert').style.display='block' 와 같이
//길게 쓰면 더럽다 그래서 '작명()' 으로 onclick에 넣어주고 script에서 function을 정의
//해주면 작동이 된다.
//function 작명(){ 코드 작성 } 의 형태로 작성한다
//함수명 작명시에
//1. 소문자로 시작
//2. camelCase
//함수로 정의 해두면 필요한 곳에서 가져다 재사용 할 수 있다<div class=""></div>
function showbox(){
document.getElementById("alert").style.display="block";
};
//(참고)close()라고 함수이름을 close라고 하니 작동 안됐음
function close11() {
document.getElementById("alert").style.display = "none";
}
</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개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(2)-동적 UI 만드는 스텝(Alert 박스 만들기) (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(1)-강의소개와 자바스크립트의 근본 (2) | 2022.09.29 |