JavaScript 란?
HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어 따로 C, C++처럼 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 ( 마우스 클릭, 키보드 입력 등 )에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.
JavaScript 사용 방법
1. 내부 스크립트
자바스크립트 코드는 ＜script＞태그를 HTML문서안에 넣어서 사용 가능하다. HTML문서의 어느위치에서나 사용 가능한데 보통 HTML문서가 전부 로드 되고 나서인 ＜body＞ 아래에 사용한다. ( 주로 간단한 스크립트나 테스트용으로 사용한다. )
2. 외부 스크립트
자바스크립트 파일을 HTML과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있다. 외부 자바스크립트를 사용하려면 ＜script＞의 src 속성으로 HTML 문서 위치의 기준 파일 경로를 입력해주면 된다.
내부 스크립트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
자바 스크립트 코드
</script>
</html>외부 스크립트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>JavaScript에서 선택자
1. 태그 선택자
document.getElementsByTagName(태그명)[순서];태그는 같은 이름으로 여러개를 생성 할 수 있다.
그래서 getElement가 아닌 getElements로 복수로 써준다.
태그명을 넣을때는 ('div') 이런식으로 넣어주면 된다.
여기서 마지막[순서]는 index 0번부터 시작이다 만약에 형제가 3개가 있을경우 3번째를 선택해줄때는 2를 넣으면 된다.2. 클래스 선택자
document.getElementsByClassName(클래스명)[순서];클래스도 태그와 마찬가지로 같은 이름으로 여러개를 생성 할 수 있다.
그러므로 위 코드에서 복수인 getelements를 사용한다.
클래스명을 넣을때는 ('logo') 이런식으로 넣어주면 된다.
그리고 여러개 이기때문에 맨 뒤에 [순서] 즉 index번호를 적어준다. index는 0부터 시작이다.3. 아이디 선택자
document.getElementById(아이디명);아이디는 특성상 같은 아이디명을 사용하지 않는것이 규칙이기 때문에
getElements 복수형이 아닌 getElement를 써주고 뒤에 순서도 사용하지 않는다.
JavaScript에서 간단한 선택자
제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어도 전체를 선택하는 경우.
document.querySelector('div');queryselector만 쓸경우 순서를 지정할수 없다. 뒤에 All을 넣어줘야 가능하다.
제이쿼리 파일을 넣지 않은경우에서 스크립트에서 쿼리셀렉터를 사용할 때 형제가 있어서 해당 형제를 선택하는 경우.
document.querySelectorAll('div')[순서];
// [순서]는 자바스크립트와 마찬가지로 index 0 부터 시작.만약에 한 클래스에서 같은형제가 있을 경우
document.querySelectorAll('.hello > p')[2];
<div class="hello">
<p>안녕하세요</p>
<p>안녕하세요</p>
<p>안녕하세요</p>
</div>
// hello 클래스안에서 3번째 p가 해당한 아이디에서 같은형제가 있을 경우
document.querySelectorAll('#hello')[1];
// hello 아이디안에서 2번째 형제가 해당또 부모가 있을경우에 document대신 부모 변수명.querySelector으로도 자식 선택자를 잡을 수 있다.
<div id="login-form">
<input type="text" placeholder="What is your name?" />
<button type="button">Log In</button>
</div>const loginForm = document.querySelector('#login-form');
const loginInput = loginForm.querySelector('input');
const loginButton = loginForm.querySelector('button');
or
const loginInput = document.querySelector('#login-form input');
const loginButton = document.querySelector('#login-form button');출력문 ( output )
자바스크립트는 여러 방법을 통해 결과물을 웹 브라우저에 출력가능하다. 자바스크립트에서 사용할 수 있는 출력 방법은 여러가지가 있다.
- window.alert() 메소드
- document.write() 메소드
- console.log() 메소드
- HTML DOM 요소를 이용한 innerHTML 프로퍼티
window.alert() 메서드
브라우저 api 메서드 경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메세지를 전달할 때 사용
별도의 대화 상자를 띄워 사용자에게 데이터를 전달.
그냥 다른거 다 필요없이 alert(내용); 써주면 끝이다. 내용안에 문자열 / 변수명 / 숫자형 뭐 여러가지를 넣을수 있다.
document.write() 메서드
웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력.
대부분 테스트나 디버깅을 위해 사용한다.
.png)
라고 써주게 되면,
그냥 HTML에 텍스트를 넣어준거 처럼 웹 페이지에 보여지게 된다.
console.log() 메서드
웹 페이지의 콘솔을 통해 데이터를 출력해준다.
대부분의 주요 웹 브라우저에서는 F12 (개발자 도구)를 누른 후 메뉴에서 콘솔을 클릭하면 볼 수 있다. 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되서 디버깅하는데 많은 도움을 준다.
.png)
라고 써주게 되면,
_.png)
이렇게 웹 페이지의 개발자 도구를 통해 확인할 수 있다.
또한 출력문 안에는
String (문자열)을 표시하는 방법이 3가지가 있는데,
첫 번째는 작은 따옴표('') 두번째는 큰 따옴표("") 세번째는 백틱(``)이 있다.
작은 따옴표와 큰 따옴표는 사용법이 같다.
'로 시작하면 '로 끝나야하고, "로 시작하면 "로 끝나면된다.
따라서 +를 써줄때는
맨 아래줄처럼 변수의 앞과 뒤 문자열을 띄어쓰기로 처리를 해줘야 띄어쓰기 되서 출력된다.
또 `는 백틱이라고 하는데 이건 작은 따옴표랑 큰 따옴표와는 다르게 양 끝에만 써주면 되고 안에 변수를 넣어줄때는 ${변수명}을 써주면 된다.
백틱대신 '' ""안에 ${}를 써주게되면 오류가 뜨고 출력되지 않는다.
백틱은 문자열 리터럴 기법이다 뒤에서 더 자세하게 다루겠다.
JavaScript 주석
JavaScript 주석은 JavaScript 코드를 설명하고 더 읽기 쉽게 만드는 데 사용한다. 또 대체 코드를 테스트 할 때 실행을 방지하는 데 사용할 수 도 있다. 주석은 오류 검색을 위한 디버깅에 아주 좋다.
// 한줄 주석
/* 여러줄
주석
*/