자바 스크립트

이성준·2022년 4월 9일

Javascript

목록 보기

1/1

웹 환경에서의 javaScript의 목적
1. HTML 조작과 변경

셀렉터

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2 id="hello">안녕하세요</h2>

<script>
    document.getElementById('hello').innerHTML = '안녕';
  	document.getElementById('???').???='???';
</script>
</body>
</html>

문서의 아이디를 찾아서 바꾼다.

Alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  	<link rel="stylesheet" href="main.css">
</head>
<body>

  <div class ="alert-box" id="alert">alert 박스</div>
  <buttontoken tag"></button>
<script>
    
</script>
</body>
</html>

UI 만드는법
1. 미리 디자인 해놓고 숨김
2. 버튼 누르거나 하면 보여줌

.alert-box {
background: #aba8f4;
padding : 20px;
border-radius: 5px;
display : none;

버튼을 누르면 id="alert" 요소 가져와서 display를 block으로 바꿔

함수

닫기버튼을 함수를 써서 만들어보기

funtion 알림창 열기(){
  document.getElementById('alert').style.display= 'block';
  funtion 알림창 닫기(){
  document.getElementById('alert').style.display= 'none';
}

onclick="알림창열기()"로 사용이 가능하다

변경할 html이 있으면 그거 하단에 js 코딩을 해야한다.
위에서부터 아래로 읽기 때문

파라미터

알림창 열기 닫기를 두개 만들지말고 하나로 만들어보자

funtion 알림창(a){
  document.getElementById('alert').style.display= 'a';
}

알림창(none) 해주면 알림창 닫기가 된다.

이벤트리스너

document.getElementById('close').addEventListener('click',funtion(){
       document.getElementById('alert').style.display= 'none'});;

이벤트가 발생하면 함수를 실행한다.

Jquery

document.getElementById('test').innerHTMl= '???';
$('.test1')  클래스명이 test1인거
$('#test') id가 test인거
$('#test').html('안녕');

이성준