우리가 어떤 홈페이지를 가입할 때 다음과 같은 현상을 본 적이 있을 것이다.
[아이디를 입력해주세요.]
[비밀번호가 일치하지 않습니다.]
[이메일을 형식에 맞게 입력해주세요.] 위와 같은 경우로 경고문구 혹은 경고창이 뜨는 경우와 더불어, 어떠한 이미지 위에 마우스 포인터를 올리면 다른 이미지로 변경되거나 더 강조하는 이미지로 변경되는 작업에 쓰이는 것이 바로 자바스크립트이다.
지금은 HTML5, CSS3을 통하여 홈페이지에 넣는 동적 효과들도 HTML5, CSS3이 나오기 전에는 자바스크립트로 여러가지 다양한 효과를 구현했다.
웹 개발자가 반드시 알아야 하는 3가지 언어,
HTML / CSS / JAVASCRIPT의 설명을 하자면 아래와 같다.
HTML은 웹 컨텐츠를 담아주고 페이지를 연결해주는 언어.
CSS은 웹 컨텐츠를 꾸며주는 언어.
JAVASCRIPT는 웹 컨텐츠를 동적으로 만드는 언어.
html의 body 부분에 글을 작성하면 정적으로 생성되는데
그것을 동적으로 만들어주는게 자바스크립트다.
( 자바스크립트의 기본 문서는 HTML 문서의 head 태그 안에 작성한다. )
1) 외부-내부 자바스크립트
CSS가 title 아래에 style태그를 사용하듯이 JS는 script태그를 사용한다.
@ 외부 자바스크립트 : html 문서 외부에 js 언어를 작성
<script src="common.js"></script>
@ 내부 자바스크립트 : html문서 내부에 js언어를 작성
<script>
alert('여러분~~~많이 보고 싶었어요~~!!!')
</script>2) 주석
자바스크립트의 주석은 HTML, CSS의 주석과는 다른식으로 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주석</title>
<style>
> /* CSS 주석 */
</style>
<script>
> // 한 줄 주석
> /* 여러줄 주석 */
</script>
</head>
<body>
> <!-- HTML 주석 -->
</body>
</html>한 눈에 보이도록 정리하자면 아래와 같다.
HTML : <!-- -->
CSS : /* */
JS : // 혹은 /* */3) 출력
자바스크립트 출력 방법에은 세가지가 있다.
1. 경고창에 값을 출력
alert('test');
2. 문서(body)에 출력
document.write('hello?');
3. 콘솔(console)창에 출력 - [F12]를 누르면 나오는 개발자 모드에서 [console]을 클릭하면 결과 확인 가능
console.log('testing~~~~');4) 자바스크립트 데이터의 종류
1. 숫자 - 컴퓨터가 인식하는 문자, 연산이 됨
alert(100); /* 그냥 작성 */
2. 문자열 - 컴퓨터가 직접 인식 못함, 따옴표 내부에 작성
alert('100'); /* 숫자가 아닌 문자 */
alert("안녕하세요");
document.write('<a href="#">링크태그</a>');
3. 불(Boolean) : 결과값이 true 혹은 false로 이루어진 식
alert(true); /* 맞다라는 키워드 */
alert('true'); /* 아무 의미 없는 그저 문자 */
alert(false);
alert(10 > 5); /* true */
4. 함수 : 코드의 집합
5. 객체 : 자바스크립트가 명령 가능한 모든 대상
6. undefined : 변수가 값을 할당받지 못한 상태
기억하면 좋을 자바스크립트 용어
1. 식(표현식) : 값을 표현하는 코드
2. 세미콜론(;) : 식이 끝날 때 종결을 의미하는 부호
- 자바스크립트는 다른 컴퓨터 언어와 달리 세미콜론 안써도 안틀림자바스크립트 키워드
자바스크립트가 구문이 수행되어야 할 때, 명령을 식별하는 단어
중국어랑 코딩하기 (❛ ֊ ❛„)