스크립트가 어렵지 않다.
재밌게 해보자.
지식을 배우는게 아니라, 엔지니어이면서 만들어내야하는 사람이다.
활용 배우는거 많이 나간다.
node설치
aptana studio 설치
설치는 어렵지 않음... 저장경로, next
화면디자인 설정
preference -> Themes ->Dark Studio, Monokai Dark 선택
파일을 생성해주기
new -> html -> html5 template
변수(variable)
임의의 데이터값을 특정 변수에 저장하여 그 데이터값을 수시로 바꿔가면서 쓸 수 있는 수
변수는 숫자로 시작할수 없음.
.... 너무 쉽다....
document.write 변수 넣은 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var address = "서울시 마포구 노고산동 12345";
document.write(address);
</script>
</head>
<body>
</body>
</html>
숫자 + 숫자 결과값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var a = "AptanaStudio";
var b = 4;
var c = 10;
var result = b*c;
document.write(result);
</script>
</head>
<body>
</body>
</html>
문자 + 숫자 결과값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var a = "AptanaStudio";
var b = 4;
var c = 10;
var result = a+c;
document.write(result);
</script>
</head>
<body>
</body>
</html>
문자-문자 결과값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var a = "AptanaStudio";
var b = 4;
var c = 10;
var result = a+c;
document.write(result);
</script>
</head>
<body>
</body>
</html>
객체속성
배열형태로 담을 수 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var dog = {
"age": 8,
"name": "dog1"
}
document.write("강아지 나이는 " + dog.age + "살 입니다.");
document.write("강아지 이름은 " + dog.name + "입니다.");
</script>
</head>
<body>
</body>
</html>
Alert, Confirm
if구문
if(조건1){
조건1에 해당될때 실행할 명령
}else if(조건2){
조건2에 해당될때 실행할 명령
}else{
아무 조건에 해당되지 않을때 실행할 명령
}
기본연산이해
a=b
a 라는 변수에 b값을 대입
a==b
a값과 b값이 서로 같다.
확인 클릭시
취소클릭시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
var result = confirm("코딩이 재밌나요?");
if(result == true){
alert("나두 재밌어요.");
}else if(result == false){
alert("난 재밌는데~");
}
</script>
</head>
<body>
</body>
</html>
주석처리
/*
* 여러행주석처리
*/
//한줄주석처리
//주석처리
/*
* 여러행주석처리
*/
//한줄주석처리
if문 실습
문제
영어점수와 국어점수 모두 90점 이상이면 A학점
영어점수와 국어점수의 합이 170점 이상이면 B학점
영어점수 또는 국어점수가 90점 이상이면 C학점
나머지 모두는 D학점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
/*
* 영어점수와 국어점수 모두 90점 이상이면 A학점
* 영어점수와 국어점수의 합이 170점 이상이면 B학점
* 영어점수 또는 국어점수가 90점 이하이면 C학점
* 나머지 모두는 D학점
*/
var engScore = prompt("영어점수를 기입해주세요.");
var korScore = prompt("국어점수를 기입해주세요.");
if(engScore >=90 && korScore >= 90){
document.write("학점은 A입니다.");
}else if(engScore + korScore >=170){
document.write("학점은 B입니다.");
}else if(engScore >=90 || korScore >= 90){
document.write("학점은 C입니다.");
}else{
document.write("학점은 D입니다.");
}
</script>
</head>
<body>
</body>
</html>
노하우 TIP
위의 if문은일반적 학점계산법이 적용되지 않았지만, 계산결과값은 A~D에서 정해짐.
그 이유는 첫번째 if가 아닌 것 중에서 2번째 else if가 아닌것 중에서 3번째 else if가 아닌 것 중에서 else임.
즉, if에는 순서가 적용되어서 걸러짐.
switch하고는 다른점이 논리적용 순서가 있다는 것이다.
for구문(반복구문)
특정한 규칙에 따라 실행할 명령을 반복해 주는 구문
형식
for(초기값; 조건식; 증감식){
반복할 명령
}
초기값: ~~부터
조건식: ~~할때까지
증감식: ~~하면서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>자바스크립트 수업</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
for(var i = 0; i<=100; i++){
document.write(i+"
");
}
</script>
</head>
<body>
</body>
</html>