2021. 9. 16. 17:02ㆍFront End
자바스크립트(JavaScript)란?
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
자바스크립트의 역사
자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌습니다.
처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경됩니다.
자바스크립트의 특징
자바스크립트가 가지고 있는 언어적 특징은 다음과 같습니다.
1. 자바스크립트는 객체 기반의 스크립트 언어입니다.
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.
*C언어와 같은 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용합니다.
하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미합니다.
자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줍니다.
자바와 자바스크립트
자바와 자바스크립트는 그 이름만 놓고 보면 서로 관련이 있는 언어로 생각되기 쉽습니다.
하지만 두 언어는 서로 직접적인 관련은 없으며, 비슷한 점보다는 다른 점이 훨씬 많습니다.
문법상 비슷한 부분은 두 언어의 문법이 모두 C언어를 기반으로 만들어졌기 때문입니다.
자바스크립트 소개
자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일은 다음과 같이 매우 다양합니다.
1. 자바스크립트는 HTML의 '내용'을 변경할수 있습니다
2. 자바스크립트는 HTML의 '속성'을 변경할수 있습니다.
3. 자바스크립트는 HTML의 '스타일'을 변경할수 있습니다.
HTML 요소의 내용 변경
자바스크립트를 사용하면 HTML 요소의 내용을 손쉽게 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
<script>
var num = "0"; /*형추론, 자료형을 지정할 필요 없이 뭘 할당하는지에 따라서 다르게 동작*/
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
var num = 1;
document.write("head 태그 내 실행 순서 : " + num + "<br/>");
</script>
</head>
<body>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br/>");
var num = 3;
document.write("body 태그 내 실행 순서 : " + num + "<br/>");
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var num; // 변숫값이 없음
var obj = null; //객체 변수 값이 없음.
//ㅌtypeof 자료형 확인
document.write(typeof 100 + "<br>");
document.write(typeof 10.5 + "<br>");
document.write(typeof "홍길동" + "<br>");
document.write(typeof true + "<br>");
document.write(typeof [1,2,3] + "<br>");
document.write(typeof {name : '홍길동', age : 25} + "<br>");
document.write(typeof num + "<br>");
document.write(typeof obj + "<br>");
</script>
</body>자료형 확인.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
function getGrade(){ //함수 정의
var kor = 95; //지역 변수
} // var 라는 선언부를 지우면 전역 변수 kor 에 값을 재할당 하게됨.
//var 가 있다면, 함수가 끝나는 순간 소멸됨.
var kor = 100; //전역 변수
getGrade(); //함수 호출
document.write("국어 점수 : " + kor + "<br>");
</script>
</body>지역변수와 전역변수.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var x = 5;
var y = "5";
var result;
result = (x > y); // 비교 연산
document.write(" x > y : " + result + "<br>");
result = (x == y); // 두 값이 같은지 비교, 문자지만 숫자값을 가지고 있
document.write(" x == y : " + result + "<br>");
result = (x === y); // 두 값과 타입이 같은지 비교
document.write(" x === y : " + result + " <br>");
result = (x != y); // 두 값이 다른지 비교
document.write(" x != y : " + result + "<br>");
result = (x !== y); // 두 값이 다르거나 또는 타입이 다른지 비교
document.write(" x !== y : " + result + "<br>");
</script>
</body>비교연산 예제.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var x1 = x2 = x3 = x4 = x5 = 10;
var st = "Hello ";
x1 += 1;
document.write("x1 : " + x1 + "<br>");
x2 -= 2;
document.write("x2 : " + x2 + "<br>");
x3 *= 3;
document.write("x3 : " + x3 + "<br>");
x4 /= 4; //숫자 혹은 실수 이므로 실수값 표시.
document.write("x4 : " + x4 + "<br>");
x5 %= 5;
document.write("x5 : " + x5 + "<br>");
st += "Javascript";
document.write("st : " + st + "<br>");
</script>
</body>사칙연산 예제.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
id = prompt('아이디 입력');
// prompt : 사용자 입력창 띄우기
if (id == 'admin') {
password = prompt('비밀번호 입력');
if (password === '123456') {
location.href = "login.html"
//location.href = 페이지 이동.
} else {
location.href = "error.html"
}
} else {
location.href = "error.html"
}
</script>
</body>prompt 와 location.href 사용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var day;
var week = new Date().getDay(); // 0(일요일)~6(토요일)
//객체를 생성하고, 그 객체에서 요일을 가져옴.
switch (week) {
case 0:
day = "일요일";
break;
case 1:
day = "월요일";
break;
case 2:
day = "화요일";
break;
case 3:
day = "수요일";
break;
case 4:
day = "목요일";
break;
case 5:
day = "금요일";
break;
case 6:
day = "토요일";
break;
default:
day = "없는 요일";
}
document.write("오늘은 <b>" + day + "</b>입니다. <p/>");
</script>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var num = prompt('홀짝');
if(parseInt(num)%2==0){
document.write("짝");
}else{
document.write("홀");
}
</script>
</body>prompt 이용해서 홀짝 구분.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
var flag = true;
while(flag){
var num = prompt('원하는 구구단\n입력 :');
console.log(typeof num);// 디버깅용 메세지.
// isNaN : is not a number
if (isNaN(num)) {
alert("숫자를 입력하세요.<br>");
} else {
//document.write("숫자 입니다.");
num = parseInt(num);// 문자를 숫자로 전환하고 처리.
for (var i = 1; i <= 9; i++) {
document.write(num + "*" + i + "=" + (num * i) + "<br/>");
}
break;
}
}
</script>
</body>prompt 이용해서 구구단 출력.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 예제</title>
</head>
<body>
<script>
function printMsg(name, age) { // 함수 선언
document.write("학생 이름 : <b>" + name + "</b><br>");
document.write("학생 나이 : <b>" + age + "</b><br>");
}
</script>
<button type="button" onclick="printMsg('홍길동', 21)">홍길동 학생
정보</button>
<br>
<button type="button" onclick="printMsg('점순이', 3)">점순이 학생
정보</button>
</body>함수 선언 예제.
'Front End' 카테고리의 다른 글
| JavaScript 2. (0) | 2021.09.23 |
|---|---|
| Java Script 실습 예제 (0) | 2021.09.23 |
| HTML & CSS 3일차. (0) | 2021.09.16 |
| HTML & CSS 2일차. (0) | 2021.09.15 |
| HTML & CSS 1일차. (0) | 2021.09.14 |