** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=ZXUgTQ9gLYQ
1. 자바스크립트(JAVASCRIPT) 소개
1) 웹 개발자가 반드시 알아야 하는 3가지 언어
- 웹 페이지의 내용을 정의하는 HTML
- 웹 페이지의 스타일과 레이아웃을 지정하는 CSS
- 웹 페이지의 동작을 프로그래밍하는 JavaScript
** 웹 페이지는 JavaScript가 사용되는 유일한 장소가 아닙니다. 많은 데스크탑 및 서버 프로그램은 JavaScript를 사용합니다. 그 중 Node.js가 가장 잘 알려져 있습니다. MongoDB 및 CouchDB와 같은 일부 데이터베이스는 JavaScript를 프로그래밍 언어로 사용합니다.
2) JavaScript가 수행 할 수있는 몇 가지 예시
## HTML의 내용을 변경하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 소개</title>
<script>
document.write('안녕하세요! 오쌤의 니가스터디입니다.');
</script>
</head>
<body>
</body>
</html>
## HTML의 내용을 변경한 결과
## CSS 변경한 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 소개</title>
<script>
window.onload = function(){
var title = document.getElementById('title');
title.style.color = 'red';
}
</script>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
</body>
</html>
## CSS 변경한 결과
2. 자바스크립트(JAVASCRIPT) 언어 삽입
1) script언어로 삽입 - <body>안에 자손으로 삽입
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 소개</title>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
<script>
var title = document.getElementById('title');
title.style.color = 'red';
</script>
</body>
</html>
## 결과
2) script언어로 삽입 - <head>안에 자손으로 삽입
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 소개</title>
<script>
window.onload = function(){
var title = document.getElementById('title');
title.style.color = 'red';
}
</script>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
</body>
</html>
## 결과
3) 외부 JS문서를 html에 연결
## HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(JAVASCRIPT) 소개</title>
<script src="test.js"></script>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
</body>
</html>
## JS코드 - test.js
window.onload = function(){
var title = document.getElementById('title');
title.style.color = 'red';
}
## 결과
3. 자바스크립트(JAVASCRIPT) 언어 출력
1) 자바스크립트 데이터 표시 방법
| 데이터 표시 방법 | 설명 |
| innerHTML속성 | 문서객체에 HTML문자열을 속성값으로 삽입하는 방식 |
| document.write() | document(문서영역=body)에 HTML로 작성하는 방식 |
| window.alert() | 창의 경고창으로 띄우는 방식 |
| console.log() | browser console로 표시하는 방식 |
2) innerHTML 예제
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 출력(output)</title>
<script>
window.onload = function(){ //준비구문
//아이디가 demo인 문서객체를 읽은 후 명령을 줘야하므로
//준비구문을 작성한 후 명령 코드 작성
document.getElementById('demo').innerHTML = '테스트';
}
</script>
</head>
<body>
<h1 id="demo"></h1>
</body>
</html>
## 결과
3) document.write()
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 출력(output)</title>
<script>
document.write('<h1>테스트</h1>');
</script>
</head>
<body>
<h1 id="demo"></h1>
</body>
</html>
## 결과
4) alert() - 경고창으로 출력
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 출력(output)</title>
<script>
window.alert('테스트');
alert('테스트');
</script>
</head>
<body>
</body>
</html>
- window를 쓰지 않아도 잘 출력됩니다.
## 결과
5) console.log() - 브라우저 개발자모드 콘솔로 출력
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 출력(output)</title>
<script>
console.log('테스트');
</script>
</head>
<body>
</body>
</html>
## 결과
- [F12]를 누르면 나오는 개발자 모드에서 [console]을 클릭하면 결과를 확인할 수 있습니다.
4. 자바스크립트(JAVASCRIPT) 기본용어
1) ; - 세미콜론
- 식의 종결을 의미하며 구문들을 구분할 때 사용합니다.
- 다른 컴퓨터언어는 생략하면 오류가 발생하지만 자바스크립트는 생략해도 오류가 발생하진 않는다.
## 코드 예시1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
var a, b, c; //변수 3개 선언
a = 10;
b = 5;
c = a + b
</script>
</head>
<body>
</body>
</html>
- 마지막에 [;]을 작성하지 않아도 문제가 되지 않습니다.
## 코드 예시2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
var a, b, c; //변수 3개 선언
a = 10; b = 5; c = a + b;
</script>
</head>
<body>
</body>
</html>- 세미콜론을 적었기 때문에 한줄로 쓸때 문제가 되지 않고 식을 잘 종료합니다.
2) 공백
- 자바스크립는 공백을 무시합니다. 그래서 공백없이 작성해도 오류가 없습니다.
- 하지만 가독성을 위해서 연산자들 사이는 띄어쓰는 것이 관례다.
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
var cup = 'coffee'; //공백적용
var cup='coffee'; //공백미적용
</script>
</head>
<body>
</body>
</html>- 오류는 없지만 가독성을 위해 연산자 사이는 띄어쓰기를 해주세요.
3) 행길이 및 줄바꿈
- 가독성을 극대화하기 위해 프로그래머들은 보통 80 자 이상의 코드 행을 피하기를 원합니다.
- JavaScript 문이 한 줄에 들어 맞지 않는 경우 연산자를 사용한 후에 가장 좋은 구문을 사용할 수 있습니다.
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
document.getElementById('header') =
"Hello OSSAM!";
</script>
</head>
<body>
</body>
</html>- 위와 같이 사용해도 오류는 없습니다.
4) 자바스크립트 오류 확인 - 개발자모드에서 확인
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
var cup:
</script>
</head>
<body>
</body>
</html>- ;(세미콜론)으로 종료가 되어야는데, :(콜론)으로 종료해서 오류가 납니다.
## 결과 - 크롬 개발자 모드 (F12)
5) 자바스크립트 키워드
- 자바스크립트가 구문이 수행되어야 할 때 명령을 식별하는 단어입니다.
- 자바스크립트가 생성될때 미리 예약한 예약어 이므로, 식별자(ex)변수명)에 사용할 수 없습니다.
| 키워드 | 설명 |
| break | 반복문이나 switch문을 종료하기 위해 사용 |
| continue | 현재 반복을 종료하고 다음 반복을 실행하기 위해 사용 |
| debugger | javascript의 실행을 중지하고 디버깅 기능을 호출(사용가능한 경우) |
| do, while | do while반복문을 실행 |
| for | for반복문을 실행 |
| function | 함수를 선언 |
| if, else | if 조건문을 실행 |
| return | 함수를 빠져나가거나, 값을 반환할 때 사용 |
| switch | 경우에 따라 실행될 구문을 표시 |
| try, catch | 명령문의 오류 처리를 구현 |
| var | 변수를 선언 |
6) 자바스크립트 식별자
- 자바스크립트에서 개발자가 지정하는 이름입니다.
- 변수, 함수 등의 이름을 지정할 때 사용합니다.
- 식별자 규칙
① 첫번째 문자는 영문, 밑줄(_), 달러기호($)
② 영어 대소문자 구별 ex) a1 ≠ A1
③ 숫자는 영문 뒤에 사용
④ 공백사용X
⑤ 키워드사용X
7) 주석
- 코드를 설명하고 더 쉽게 읽을 수 있게 사용되는 코멘트입니다.
| 주석 | 설명 |
| // | 한줄 주석, 프로그램의 구역을 나누거나, 코드를 설명하기 위해 사용 |
| /* */ | 여러줄 주석, 코드의 일부분을 무력화시키거나, 공식문서화되는 것을 설명하기 위해 사용 |
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기본용어</title>
<script>
//변수선언
var cup;
/*
1 + 2;
3 + 5;
*/
</script>
</head>
<body>
</body>
</html>- 한줄 주석은 보통 간단한 코멘트를 처리하려고 사용합니다.
- 여러줄 주석은 주석이 길거나 코드를 잠시 실행시키고 싶지 않을 때 사용합니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 6강 자바스크립트 반복문 - 배열과 for in문 - 오쌤의 니가스터디 (2) | 2020.11.27 |
|---|---|
| [JS강좌] 5강 자바스크립트 반복문 - 오쌤의 니가스터디 (0) | 2020.11.26 |
| [JS강좌] 4강 자바스크립트 조건문 switch, 삼항연산자, 짧은 조건문 - 오쌤의 니가스터디 (0) | 2020.11.25 |
| [JS강좌] 3강 자바스크립트 if문 - 오쌤의 니가스터디 (0) | 2020.11.11 |
| [JS강좌] 2강 자바스크립트 연산자와 변수 - 오쌤의 니가스터디 (0) | 2020.11.09 |
