- html문서에 자바스크립트 작성하는 방법
- <script> 태그 안에 자바스크립트 소스 작성
- ※ 주의할 점
- <script>태그는 html문서 어디에든 사용 가능 (보통 주로 </body> 태그 앞에 삽입함)
- <script>태그는 여러 개 사용해도 괜찮음
- <script>태그가 삽입된 위치에서 소스 실행됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>클릭하여 글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</head>
<body>
<h1 id="heading">기록기록</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "blue";
}
</script>
</body>
</html>실행 결과
2. 외부 스크립트 파일 연결하는 방법
- js폴더 생성 후 Ctrl+N 눌러 새 문서 만들기
- Ctrl+S 눌러 제목을 gifok.js로 설정 후 js폴더 안에 저장
- 색깔 바꾸기 html 파일에서 <script>태그 안에 들어있는 자바스크립트 소스를 복사해둔 후 지우고 저장한다.
- girok.js파일로 가서 복사해 둔 소스를 붙여넣기한 후 저장한다.
- 다시 색깔 바꾸기 html 파일로 돌아가 </body>태그 앞에 아래와 같이 작성해준다.
<script src="/js/girok.js"></script>실행해보면 처음과 같이 기록기록을 클릭하면 색이 변하게 된다.
3. 자바스크립트의 입력과 출력
☆ 크롬 부라우저의 콘솔 도구 (콘솔은 자바스크립트 소스를 간편하기 연습해 볼 수 있는 도구이다.)
- 크롬 브라우저를 실행하여 주소 표시줄에 about:blank라고 입력하면 빈 창이 나타난다.
- Ctrl + Shift + J 를 누르면 화면 아래에 콘솔 창이 열린다.
- 사용자 입력값 받기
- 콘솔 창에 떠있는 > 기호 오른쪽 부분을 마우스로 누른 다음 아래 소스를 입력해보자.
prompt();prompt()함수를 실행하면 사용자가 값을 입력할 수 있도록 프롬프트 창을 만들어 준다.
자유롭게 내용을 작성하고 확인 버튼을 누르면
> prompt();
< "기록기록"이렇게 콘솔 창에서 입력한 값을 확인할 수 있다.
prompt() 함수를 사용할 떄 소괄호 안에 큰따옴표(" ")나 직은따옴표(' ')로 원하는 문장을 적어 넣으면 프롬프트 창에 문장을 표시할 수도 있다.
> prompt("이름을 입력하세요");이렇게 하면 프롬프트 창에 내가 적은 문장까지 함께 표시될 것이다.
- 알림 창으로 출력
- 웹브라우저 화면에서 간단한 알림 내용을 표시하려고 할 떄 아래 함수를 사용한다.
> alert();소괄호 안에 큰따옴표나 작은따옴표로 원하는 문장을 집어넣으면 알림창이 나타나면서 괄호 안에 넣은 내용이 알림창에 표시된다.
- 웹 브라우저 화면에 출력
var name = prompt("이름을 입력하세요");
document.write(name + "님, 안녕하세요.");var name = prompt로 사용자에게 내용을 입력받고
document.write()로 웹 브라우저 화면에 출력한다.
- 콘솔에 출력
var name = prompt("이름을 입력하세요.");
console.log(name + "님, 안녕하세요.");console.log()함수로 관호안에 내용을 콘솔 창에 출력한다.
- 크롬으로 오류 찾아내기
- 비주얼 스튜디오 코드에서 작성한 폴더를 크롬 브라우저로 열었을 때 오류가 발생하여 아무것도 뜨지 않을 때.
- ctrl+shift+j를 눌러 콘솔창을 열면 빨간 글자로 오류 내용과 오류 개수가 표시된다.
- 오류 내용을 잘 해석하지 못하겠다면 오류 내용 오른쪽에 있는 (파일 이름:오류발생 줄 번호)를 눌러보면 오류가 발생된 위치로 이동되어 어떤 부분이 잘못되어있는지 알 수 있게 해준다.
- 오류를 발견했다면 비쥬얼 스튜디오로 돌아가 오류난 부분을 수정하면 된다.
※ 자바스크립트 작성 시 유의해야 하는 점
1. 자바스크립트는 대소문자를 구별한다.
Kang kang KANG 이 모두를 다르게 인식하기 때문에 유의해야한다.
2. 들여 쓰는 습관 들이기
자바스크립트는 들여쓰기를 신경쓰지 않고 해석하지만 오류 발생 시 수정해야 할 때를 대비하여 들여쓰는 습관을 들여야한다.
3. 세미콜론으로 문장 구분하기
자바스크립트는 줄 바꿈으로 문장을 구분하여 세미콜론을 붙이지 않아도 실행되지만 실수로 줄을 바꾸지 않았을 경우를 대비하여 문장 끝에는 세미콜론을 붙여 구분하는 것이 좋다.
4. 메모를 하려면 주석을 이용하기
이게 어떤 문장인지 설명을 붙이고 싶을 떄 주석을 사용하면 된다.
//주석은 2가지 방법이 있는데
//한 줄 주석은 이렇게 사용한다.
/* 여러 줄 주석
여러줄을 한꺼번에 주석으로 쓸때는
이렇게 사용할 수도있다.*/5. 식별자는 정해진 규칙을 지켜 사용하기
- 식별자는 반드시 영문자나 밑줄(_), 달러 기호($)로 시작해야한다.
- 그 뒤엔 영문자, 빝줄, 달러기호, 숫자 사용 가능
- 단어와 단어 사이에 공백을 둘 수 없고 하이픈(-)이나 밑줄(_)로 이어서 사용해야 한다.
- 일반적으론 두 단어를 사용할 땐 첫번째 단어는 소문자로 쓰고 두번째 오는 단어를 대문자로 시작한다.
6. 예약어는 식별자로 사용할 수 없다.
'JavaScript' 카테고리의 다른 글
| 3-2 if문, if · · · else문 (0) | 2023.07.16 |
|---|---|
| 3-1 연산자 (0) | 2023.07.16 |
| 2-2 자료형 (6) | 2023.06.30 |
| 2-1 변수 (1) | 2023.06.10 |
| 1-0 자바스크립트란? (0) | 2023.06.09 |
