JavaScript
-HTML조작하기 위함
JS로 HTML 다루기
.getElementById()
셀렉터
(문서 안에서 원하는 요소를 찾아서 바꾸기)
<h1 id="hello">안녕하세요</h1>
<script>
document.getElementById('hello').innerHTML='안녕';
//html문서의.html요소를하나를 가져와주세요(아이디가 hello인것을)='안녕'으로 바꿔주세요.
document.getElementById('바꾸고싶은요소아이디').무엇을='어떻게';바꿔주세요
</script>document.getElementsByClassName('클래스명').무엇을 = '어떻게'; 바꿔주세요
//id 대신 클래스명으로도 셀렉트할 수 있다.
//id와 달리 클래스는 중복될 수 있기 때문에 뒤에 인덱싱 해줘야한다.
//('클래스명')[0]'어떻게' 부분은 메소드라고 하며 html 요소의 어떤 속성을 변경할지 결정하기 위해 사용한다.
다 외울 필요 없이 검색해서 사용하면 된다.
예) javascript how to change txet red
기본적인 UI 만드는 법(Alert 박스 만들기)
1. 먼저 HTML CSS로 UI 디자인을 한다
css 파일은 따로 빼서 링크로 넣어준다.
(<head></head>안에)
<link rel="stylesheet" href="main.css">
.alert-box{
background-color: plum;
padding: 20px;
color: azure;
border-radius: 5px;
/* border-radius 테두리를 둥글게 */
display: none;
/* 평소엔 보이지 않게 숨김 */
/* display: block;
평소에도 보이게 함 */
}따로 만들어준 css파일
2. 자바스크립트로 추가 기능(버튼을 누르거나할 경우 UI를 보여줌)을 만든다.
<body>
<div class="alert-box" id="alert">알림창</div>
<!-- <button onclick="버튼클릭시 이 자바스크립트 코드 실행">알림창을 보여주세요.</button> -->
<button onclick=
"document.getElementById('alert').style.display ='block';">알림창을 보여주세요.</button>
</body>JS로 버튼을 눌렀을때 알림창이 보이도록 하기
<div class="alert-box" id="alert">알림창
<button onclick="document.getElementById('alert').style.display = 'none';">x</button>
</div>닫힘 버튼 추가
function
코드 길이를 줄일 수 있다.
코드를 재사용하기 좋다.
<body>
<div class="alert-box" id="alert">알림창
<button onclick="알림창닫기()">x</button>
</div>
<button onclick=
"document.getElementById('alert').style.display ='block';">알림창을 보여주세요.</button>
<script>
function 알림창닫기 () {
document.getElementById('alert').style.display = 'none';
}
</script>
</body>
파라미터
파라미터는 funtion을 가변적으로 만들 수 있다.
구멍 = 파라미터
<script>
function 알림창열기(구멍) {
document.getElementById('alert').style.display =구멍;
}
// 알림창열기('block');
// 알림창열기('none');
</script>.addEventListener()
onclick=" "대신
스크립트창에서 바로 클릭-실행 코드 작성하는 법
<script>
document.getElementById('대상id') //id를
.addEventListener('이벤트명', //'이벤트'행동할 때
function(){ 실행할 코드 }) //이 코드를 실행한다. => '콜백함수'라고 부름
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
});
</script>
event란?
클릭, 키, 입력, 스크롤, 드래그 (click, keydown, mouseover..)등의 유저가 실시하는 것들..
일종의 감시해주는 역할.