자바스크립트 (JavaScrip) 기초
자바스크립트 작성 방법
- html 파일 생성 및 기본 틀
- 파일 생성시 파일명.html로 생성하면 됩니다.
- 밑에 코드를 입력하고 body 태그 안에 여러 태그들을 이용하여 틀을 잡고 script 태그 안에 효과를 주면 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>alert</title>
</head>
<body>
<script>
</script>
</body>
</html>
- body 태그와 script 태그에 간단한 코드를 작성해 보겠습니다.
- body에 h1 태그를 이용하여 글자를 입력하고 h1 태그에 id를 부여해 보겠습니다.
- 이후 script 태그 안에 h1 태그의 글자를 바꿀 수 있는 코드를 작성해 보겠습니다.
- innerHTML은 내가 선택한 id의 HTML안의 내용을 변경하겠다는 의미입니다.
- style.color는 글자색을 변경하겠다, style.fontSize는 글자 크기를 변경하겠다는 의미입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>alert</title>
</head>
<body>
<h1 id="hello">
안녕하세요
</h1>
<h1 id="hi">JS 초보에요</h1>
<script>
document.getElementById('hello').innerHTML = '안녕';
document.getElementById('hi').style.color = 'blue';
document.getElementById('hi').style.fontSize = '16px';
/*
document : 문서
. : ~의
getElementById : id를 가져와라 - 셀렉터라고 부른다.
. : ~의
innerHTML : HTML 안의 내용을
= 오른쪽 내용을 왼쪽에 담는다
*/
</script>
</body>
</html>
자바스크립트 활용 alert창
- alert창 만들기
- alert 창을 만들기 위한 html 파일 생성
- body 태그 안에 alert 창의 틀을 만들어 둡니다.
- script 태그 안에 alert을 보이게 하고 숨기게 할 수 있게 style의 display를 작성합니다.
- css 파일을 만들고 alert을 스타일링 하기 위해 class명을 부여하고 그 class명을 이용하여 css를 작성합니다.
class명을 이용하여 css는 .클래스명 id를 이용한 css는 #아이디명 이렇게 작성하시면 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>alert</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">알림창 입니다.</div>
<button onclick="alertOpen()">알림창 열림</button>
<button onclick="alertClose()">알림창 닫기</button>
<script>
function alertOpen() {
document.getElementById('alert').style.display = 'block';
}
function alertClose() {
document.getElementById('alert').style.display = 'none';
}
/*
function 작명 () {
}
이런식으로 작성
*/
</script>
</body>
</html>
----------------------------------css---------------------------------------
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
- 파라미터를 이용한 alert
- 이번에는 파라미터를 이용한 alert창을 만들어 보겠습니다.
- 위와 똑같이 코드를 작성하고 몇가지만 바꿔 alert창을 만들어 보겠습니다.
- function 작명 () {} 여기서 ()여기 안에 들어가는 값이 파라미터이고 onclick 이벤트에 작명(원하는 style이벤트)를 작성하면 내가 지정한 function으로 파라미터가 들어가면서 스크립트가 동작합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>alert1</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- <div class="alert-box" id="alert">알림창 입니다.</div>
<button onclick="alertButton('block');">알림창 열림</button>
<button onclick="alertButton('none');">알림창 닫기</button> -->
<div class="alert-box" id="alert">
<p id="name">알림창 입니다.</p>
<button onclick="alertClose('none');">닫기</button>
</div>
<button onclick="alertid('block');">아이디 버튼</button>
<button onclick="alertpw('block');">비밀번호 버튼</button>
<script>
function alertClose(parameter) {
document.getElementById('alert').style.display = parameter;
}
function alertid(parameter) {
document.getElementById('name').innerHTML = "아이디를 입력하세요";
document.getElementById('alert').style.display = parameter;
}
function alertpw(parameter) {
document.getElementById('name').innerHTML = "비밀번호를 입력하세요";
document.getElementById('alert').style.display = parameter;
}
// function alertButton(parameter) {
// document.getElementById('alert').style.display = parameter;
// }
</script>
</body>
</html>
------------------------------------------------css------------------------------------------------
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
이벤트리스너
- 이벤트리스너를 이용하여 마우스로 버튼 클릭시 변화를 줄 수 있게 해보겠습니다.
- alert창을 만들었을 때의 코드를 이용하여 아이디버튼을 클릭하면 아이디를 입력하라는 알림창이 뜨고,
비밀번호 버튼을 클릭하면 비밀번호 알림창이 뜨고,
닫기 버튼을 누르면 알림창을 닫을 수 있게 해보겠습니다.
- 그러기 위해 각 버튼에 id를 부여하고 그 아이디를 찾을 수 있게 getElementById를 이용합니다.
- 후에 클릭 이벤트를 사용하기 위해 addEventListener를 사용합니다.
- addEventListener(이벤트, function() {} 이런식으로 작성합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>eventlistener</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="name">알림창 입니다.</p>
<button id="close">닫기</button>
</div>
<button id="alertOpen">아이디 버튼</button>
<button id="alertClose">비밀번호 버튼</button>
<script>
document.getElementById('close').addEventListener('click', function() {
document.getElementById('alert').style.display = 'none';
});
document.getElementById('alertOpen').addEventListener('click', function() {
document.getElementById('alert').style.display = 'block';
document.getElementById('name').innerHTML = '아이디를 입력하세요';
});
document.getElementById('alertClose').addEventListener('click', function() {
document.getElementById('alert').style.display = 'block';
document.getElementById('name').innerHTML = '비밀번호를 입력하세요';
});
/*
여기서 function()을 콜백함수라고 부르고,
자바스크립트에서는 순차적으로 실행하고 싶을 때 자주 사용
*/
</script>
</body>
</html>
-------------------------------------------css---------------------------------------------
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
클래스네임 사용법
- 클래스네임
- 클래스네임은 아이디를 부여하는 방법과 동일합니다.
- 원하는 태그에 class="작명" 이렇게 하면 클래스네임이 지정됩니다.
- 아이디와 다른점이 있다면 아이디는 동일한 이름을 부여할 수 없지만 클래스네임은 동일한 이름을 부여할 수 있기 때문에 getElementsByClassName('작명')[내가 선택하고자 하는 태그의 순서] 이렇게 작성해야 합니다. 컴퓨터는 처음 시작이 0이기 때문에 첫번째 클래스네임을 가져오고 싶다면 getElementsByClassName('작명')[0] 이렇게 작성하면 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>className</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p class="name">알림창 입니다.</p>
<button id="close">닫기</button>
</div>
<button id="alertOpen">아이디 버튼</button>
<button id="alertClose">비밀번호 버튼</button>
<script>
document.getElementById('close').addEventListener('click', function() {
document.getElementById('alert').style.display = 'none';
});
document.getElementById('alertOpen').addEventListener('click', function() {
document.getElementById('alert').style.display = 'block';
document.getElementsByClassName('name')[0].innerHTML = '아이디를 입력하세요';
});
document.getElementById('alertClose').addEventListener('click', function() {
document.getElementById('alert').style.display = 'block';
document.getElementsByClassName('name')[0].innerHTML = '비밀번호를 입력하세요';
});
</script>
</body>
</html>
-----------------------------------------------------css-----------------------------------------------------------------
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
Jquery
- html문서 안의 태그들을 가져와서 동적으로 동작하게 하기 위해 id와 class를 부여합니다.
지금까지의 코드를 조금 더 간단하게 작성하기 위해 document.querySelector를 사용하는데 여기서 더 간단하게 작성하기 위해 Jquery를 사용합니다.
- 사용 방법은 Jquery cdn 사이트에 들어가 script태그 하나를 복사해 옵니다.
이 코드를 head 또는 body태그에 넣어서 사용하면 됩니다.
- jquey는 document.querySelector를 $로 축약하여 사용합니다.
id를 불러올 때는 #아이디명, class를 불러올 때는 .클래스명으로 작성하면 됩니다.
$(#아이디명), $(.클래스명) 뒤에 오는 이벤트들은 지금까지 작성한 방법과 다르니 검색해서 사용해야 합니다.
jquery 사용 예시로 네비게이션바의 코드를 보여드리겠습니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<title>BootStrap&Navbar</title>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<!-- <p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<button id="test-btn">버튼</button> -->
<button id="login-modal">로그인</button>
<script>
$('#close').on('click', function() {
$('.black-bg').fadeToggle('show');
});
$('#login-modal').on('click', function() {
$('.black-bg').fadeToggle('show');
});
// document.querySelector('#test-btn').addEventListener()
// $('#test-btn').on('이벤트', function() {
// "이런식으로 사용"
// });
// document.querySelector('.hello').innerHTML= '바보';
// $('.hello').html('바보');
// document.querySelector('.navbar-toggler').addEventListener('click', function() {
// document.querySelectorAll('.list-group')[0].classList.toggle('show');
// });
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('.list-group').classList.toggle('show');
});
// document.querySelector('.list-group')/
// document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
// document.getElementsByClassName('list-group')[0].classList.toggle('show');
// });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
---------------------------------------------------------css------------------------------------------------------------
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
.list-group {
display: none;
}
.show {
display: block;
}
if문
- 자바스크립트로 if문을 사용해 보겠습니다.
- if문은 기본적으로 다른 언어와 똑같이 사용하면 됩니다.
if(조건문1) {
조건문1이 true면 실행
} else if (조건문2) {
조건문1일 false이고 조건문2가 true면 실행
} else {
조건문1과 조건문2 둘 다 false면 실행
}
- if문 예시는 모달창을 통해 보여드리겠습니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<title>if문</title>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="id">
</div>
<div class="my-3">
<input type="password" class="form-control" id="pw">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<script>
// if문의 조건 안에서 사용하는 몇가지 == <= < > >= != && ||
document.getElementById('id').addEventListener('input', function() {
console.log("id변화감지");
});
document.getElementById('pw').addEventListener('change', function() {
console.log("pw변화감지");
});
$('#send').on('click', function() {
if($('#id').val() == "") {
alert("아이디를 입력해 주세요");
} else if ($('#pw').val() == "") {
alert("비밀번호를 입력해 주세요.");
} else if ($('#pw').val().length <= 6) {
alert("비밀번호가 너무 짧습니다.");
}
});
// form 태그로 이벤트 발생하게 하는 방법
// $('form').on('submit', function() {
// if(document.getElementById('id').value == '') {
// alert("아이디를 입력해 주세요");
// } else if (document.getElementById('pw').value == '') {
// alert("비밀번호를 입력해 주세요.")
// }
// });
</script>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<div class="main-bg">
<h3>Shirts on Sale</h3>
<button id="login-modal">로그인</button>
</div>
<script>
$('#close').on('click', function() {
$('.black-bg').addClass('close-modal');
});
$('#login-modal').on('click', function() {
$('.black-bg').addClass('show-modal');
});
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('.list-group').classList.toggle('show');
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
-----------------------------------------------css-----------------------------------------------------
.list-group {
display: none;
}
.show {
display: block;
}
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 1s;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
visibility: visible;
opacity: 1;
}
.close-modal {
visibility: visible;
opacity: 0;
}
