자바스크립트 개요
2021. 10. 29. 22:01ㆍStudy/JavaScript
자바스크립트
웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어
* 웹 삼총사
- HTML : 모델 담당
- CSS : 뷰 담당
- Javascript : 제어 담당
자바스크립트의 역할
1. 요소의 추가 및 삭제
2. CSS 및 HTML 요소의 스타일 변경
3. 사용자와의 상호작용
4. 폼의 유효성 검증
5. 마우스와 키보드 이벤트에 대한 스크립트 실행
6. 웹 브라우저 제어 및 쿠키 등의 설정과 조회
7. AJAX 기술을 이용한 웹 서버와 통신
자바스크립트 작성 방법
01. 대소문자를 구분하여 작성
02. 문장은 세미콜론 (;) 으로 구분
// 바른 예
var age=25
document.write("당신의 나이는"+ age +"입니다.")
var age=25;
document.write("당신의 나이는"+ age +"입니다.")
var age=25; document.write("당신의 나이는"+ age +"입니다.");
// 잘못된 예
var age=25 document.write("당신의 나이는"+ age +"입니다.")
03. 큰 따옴표 ( " " )와 작은 따옴표 ( ' ' )를 구분하여 사용
//바른 예
document.write("<div style='color:red;'>자바스크립트 학습</div>");
document.write('<div style="color:red;">자바스크립트 학습</div>');
//잘못된 예
documet.write("<div style="color: red;">자바스크립트 학습</div>")
04. HTML 문서 내부에 코드를 작성하는 방법
<head> 태그 또는 <body> 태그 내에 코드 작성
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 예제</title>
<script>
//자바스크립트 코드 작성
</script>
</head>
<body>
<script>
// 자바스크립트 코드 작성
</script>
</body>
</html>
05. HTML 문서 내부에 코드를 작성하는 방법
HTML 태그 안에 속성값으로 정의
<button type="button" onclick="alert('자바스크립트파일')">버튼 클릭</button>
06. 별도로 작성한 후 HTML 문서에 참조하는 방법
외부 자바스크립트 파일을 만든 후 HTML 문서의 <script> 태그에 src 속성을 추가하여 참조
<!-- HTML 문서와 같은 디렉터리에 있는 경우 -->
<script src="myscript.js"></script>
<!-- HTML 문서와 다른 디렉터리에 있는 경우 -->
<script src="js/myscript.js"></script>
<!-- HTML 문서와 다른 서버 디렉터리에 있는 경우 -->
<script src="http://address.co.kr/js/myscript.js"></script>* 자바스크립트 파일을 외부에서 작성했을 때의 장점
- 자바스크립트 파일을 HTML 문서와 분리하여 관리할 수 있음
- 자바스크립트 코드를 관리, 유지보수, 디버깅하기 쉬움
- 자바스크립트 코드의 보안성과 안전성을 높일 수 있음
자바스크립트의 데이터 타입
* 기본형 타입의 종류
| 종류 | 설명 | 사용 예 |
| number | 정수 혹은 실수 | 100, 10.5, 10e+3 |
| string | 문자 혹은 문자열 | "홍길동", '홍길동' |
| boolean | 참 혹은 거짓 | true, false |
| array | 데이터의 집합(배열, 객체로 취급) | ["서울", "부산", "인천"] |
| object | 데이터 속성과 값으로 이루어진 집합 | {name: '홍길동, age: 25} |
| null | 객체 값이 없음 | null |
| undefined | 데이터 값이 정해지지 않음 | undefined |
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var num; // 변수 값이 없음
var obj=null; // 객체 변수 값이 없음
document.write(typeof 100+"<br>"); // number
document.write(typeof 10.5+"<br>"); // number
document.write(typeof "홍길동"+"<br>"); // string
document.write(typeof true+"<br>"); // boolean
document.write(typeof [1,2,3]+"<br>"); // object
document.write(typeof {name:'홍길동', age:25}+"<br>"); // object
document.write(typeof num+"<br>"); // undefined
document.write(typeof obj+"<br>"); // object
</script>
</body>
</html>
변수명 작성 규칙
- 문자, 밑줄( _ ), 달러 기호( $ ) 로 시작
- 대소문자 구별 ( '변수 A'와 '변수 a'는 서로 다른 변수)
- 한글은 사용 가능하나 영문자 사용 권장
- 자바스크립트에서 정한 예약어는 변수명으로 사용 불가능
var x; // 변수 x 선언
var y=10; // 변수 y 선언 및 초기값 할당
var x=y; // 변수 y의 값을 변수 x에 저장
var a, b, c; // 변수 a, b, c 선언
var a=, b=11, c=12 // 변수 a, b, c 선언 및 각각 다른 초기값 할당
var a=b=c=; // 변수 a, b, c 선언 및 같은 초기값 할당
var name="홍길동", age=25; // 변수 name, age 선언 및 각각 다른 초기값 할당
var total=a+b+c; // 변수 a, b, c 값을 더한 결과를 변수 total에 저장
변수 사용 시 문법적으로 오류가 발생한 사례
var 7num=100; // 숫자로 시작하는 변수명 잘못 사용
var &num=100; // 특수 문자로 시작하는 변수명 잘못 사용
var true=1; // 예약어를 변수명으로 잘못 사용
var 10=x; // 좌변에 상수값 잘못 선언
var a+b=20; // 좌변에 연산식 잘못 선언
var "홍길동"=name; // 좌변에 문자열값 잘못 선언
var get number=100; // 변수명 사이에 공백 잘못 선언
var a, b, c=100; // 콤마로 구분한 변수명 잘못 선언
전역변수와 지역변수
- 전역변수 : 코드 내 언 위치에서든 선언하여 전영역에서 사용할 수 있는 함수
- 지역변수 : 변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용할 수 있는 변수
function getGrade(){ // 함수 정의
var kor=95; // 지역변수
}
var kor=100; // 전역변수
getGrade(); // 함수호출
document.write("국어 점수 : "+ kor +"<br>"); // 국어 점수 : 100
'Study > JavaScript' 카테고리의 다른 글
| 문서에 객체, 속성값 설정 (0) | 2021.11.22 |
|---|---|
| 객체 Object (0) | 2021.11.02 |
| 함수 Function (0) | 2021.11.02 |
| 제어문 (0) | 2021.11.01 |
| 연산자 (0) | 2021.10.29 |
