* JavaScript : 웹 브라우저에서 동작하는 경량 프로그램 언어
> 개발자 도구를 찍어봐야 javascript가 반영된 내용이 보임
- var 변수명
var a = 10; ==> a라는 변수에 10의 값을 대입해 > 자료형은 안써도 됨
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><javascript01 class="html"></javascript01></title>
<script>
// 자바 스크립트 : 웹 브라우저에서 동작하는 경량 프로그램 언어
// var 변수명
var a = 10; // a라는 변수에 10의 값을 대입해 > 자료형은 안써도 됨
var b;
b = "안녕";
document.write("Hello Javascript : " + a)
</script>
</head>
<body>
<!-- "Hello Javascript : 10"과 똑같은 명령이 위에서 실행됨 -->
</body>
</html>
|
cs |
* 자바스크립트란?
script 태그는 다른 위치에도 올 수 있지만 주로 head에 옴
java 와 javascript의 차이는? > 이름만 비슷함
java : 사자 > 컴파일용 언어
javascript : 바다사자 > 웹브라우저가 파싱 과정을 통해 해석해서 실행
자바스크립트 <==> MS : JSCRIPT
- 컴파일 언어 : C, C++, java, ...
- 비컴파일 언어 : SQL, HTML, javascript
- prompt : 사용자에게 값을 입력받게 하는 함수
- n1 : xxx n2 : xxx 형식으로 브라우저 화면에 출력
- document.write("n1 : "+n1+ ", n2 : "+n2);
1. 화면에 출력
document.write("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
태그 <h1>을 활용해서 화면에 크게 띄울 수 있음
2. alert(); ==> 경고창 형식으로 출력
alert("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
반복문 ==> 10번 실행
for(var i = 0; i<10; i++) {
alert("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
}
3. console.log() ==> 콘솔에서 로그 기록 확인 가능
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript02.html</title>
<script>
// script 태그는 다른 위치에도 올 수 있지만 주로 head에 옴
// java 와 javascript의 차이는? > 이름만 비슷함
// java : 사자 > 컴파일용 언어
// javascript : 바다사자 > 웹브라우저가 파싱 과정을 통해 해석해서 실행
// 자바스크립트 <==> MS : JSCRIPT
// 컴파일 언어 : C, C++, java, ...
// 비컴파일 언어 : SQL, HTML, javascript
var a = 10;
var n1 = prompt("첫번째 입력값");
var n2 = prompt("두번째 입력값");
var n3 = parseInt(n1) + parseInt(n2); // 정수형으로 형변환
// prompt : 사용자에게 값을 입력받게 하는 함수
// n1 : xxx n2 : xxx 형식으로 브라우저 화면에 출력
// document.write("n1 : "+n1+ ", n2 : "+n2);
// 1. 화면에 출력
// document.write("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
// 태그 <h1>을 활용해서 화면에 크게 띄울 수 있음
// 2. alert(); ==> 경고창 형식으로 출력
// alert("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
// 반복문 ==> 10번 실행
// for(var i = 0; i<10; i++) {
// alert("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
// }
// 3. console.log() ==> 콘솔에서 로그 기록 확인 가능
for(var i = 0; i<10; i++) {
console.log("<h1>" + n1 + " + " + n2 + " = " + n3 + "</h1>");
}
</script>
</head>
<body>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript03.html</title>
<script>
// 사용자로부터 이름을 입력받아
var name = prompt("이름을 입력하세요.");
// 화면에 xxx님 환영합니다. h1태그로 출력
document.write("<h1>"+name+"님 환영합니다."+"</h1>"); // 바디에 바로 출력
// 경고창에 출력
// alert("<h1>"+name+"님 환영합니다."+"</h1>");
console.log("<h1>"+name+"님 환영합니다."+"</h1>");
</script>
</head>
<body>
</body>
</html>
|
cs |
* 자바스크립트에서 사용자정의 함수 만들기 ==> 메서드와 같음..
function 함수명(매개변수) {
처리할 코드;
}
- button : 버튼을 누르면 어떤 행위가 이루어지도록
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript04.html</title>
<script>
// 자바스크립트에서 사용자정의 함수 만들기 ==> 메서드와 같음..
// function 함수명(매개변수) {
// 처리할 코드;
// }
function printMsg() {
console.log("하하하");
console.log("호호호");
}
</script>
</head>
<body>
<!-- 버튼을 눌렀을 때 어떤 행위를 이루어지게 하는 것이 '자스'가 하는 일 -->
<input type="button" value="출력1" onclick="alert('메롱~~')">
<!-- ""와 '' 모두 자스에서는 문자열이지만 시각적으로 구분 -->
<!-- <input type="button" value="출력2" onclick="함수명(매개변수)">
==> 클릭하면 매개변수를 전달해서 함수를 실행
alert, document 등은 내장함수-->
<input type="button" value="출력2" onclick="printMsg();">
</body>
</html>
|
cs |
- 구구단 3단 버튼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript05.html</title>
<script>
function print3Dan() {
for(var i=1; i<=9; i++) {
console.log(" 3 * "+ i + " = "+(3 * i));
document.write(" 3 * "+ i + " = "+(3 * i)+"<br>");
// document.write("<br>");
}
}
</script>
</head>
<body>
<!--
3단 출력 버튼을 누르면 print3Dan() 를 호출하고
콘솔에 구구단 3단을 출력하게 하려고 한다.
-->
<input type="button" value="3단 출력" onclick="print3Dan();">
</body>
</html>
|
cs |
- 버튼을 클릭할 때마다 콘솔에 클릭 횟수가 출력되도록
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript06.html</title>
<script>
// 전역변수
var cnt = 0;
function run() {
// 지역변수
// cnt ++; => 변수 사용하고 증가
console.log(++cnt); // 증가하고 변수 사용
}
</script>
</head>
<body>
<!-- 버튼을 클릭할 때마다 콘솔에 클릭 횟수가 출력되도록 코드를 작성하세요 -->
<input type="button" value="클릭" onclick="run();">
</body>
</html>
|
cs |
* 누적합 구하기(콘솔) => 사용자가 입력한 숫자까지!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript07.html</title>
<script>
// 1. 사용자로부터 숫자 입력받기 (100) 변수명 n
// var n = prompt("숫자입력:");
// 2. 문자를 숫자로 변환 ==> 변수 재활용 가능!(자료형 상관 없어서..)
// n = parseInt(n);
// 자스는 동적 타이핑 : 변수 자료형을 처음부터 선언하지 않음 > 대입되는 순간 자료형 결정
// 자바는 정적 타이핑
// 3. 1 증가한 값을 콘솔에 출력 n:101
// console.log("n : "+ ++n);
function cum() {
var n = prompt("숫자입력:");
parseInt(n);
// 4. 1부터 입력한 값까지 누적합 구하기 : 함수를 정의
var hap = 0;
for(var i = 1; i<=n; i++) {
hap += i;
}
console.log("1부터 " + n + "까지 누적합 : " + hap);
}
// 5. 함수를 실행
// cum();
</script>
</head>
<body>
<input type="button" value="누적합 구하기" onclick="cum();">
<!-- 클릭이 일어나야 cum이라는 함수가 수행됨 -->
</body>
</html>
|
cs |
* 누적합 구하기(콘솔) => 내가 매개변수로 전달한 값까지
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript08.html</title>
<script>
function cum(a) {
a = parseInt(a);
var hap = 0;
for(var i=1; i<=a; i++){
hap += i;
}
console.log(hap);
}
</script>
</head>
<body>
<input type="button" value="출력" onclick="cum(50);">
<!-- 콘솔에 내가 전달해준 숫자를 출력 -->
</body>
</html>
|
cs |
* eval()
eval ==> 내장함수
변수를 javascript의 함수나 연산자처럼 사용하는 함수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript09.html</title>
<script>
// eval() ==> 내장함수
// 변수를 javascript의 함수나 연산자처럼 사용하는 함수
var msg = "3*2";
var data = eval(msg);
console.log(data);
// ==> 이러한 방법으로 해킹에 많이 사용되기도 함
</script>
</head>
<body>
</body>
</html>
|
cs |
- 텍스트열에 입력된 텍스트를 콘솔에 출력(value)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript10.html</title>
<script>
// cal() 함수를 정의하고
function cal() {
// 함수 호출 시 콘솔에 hello 메세지를 출력
console.log("hello"); // = System.out.println("문자열");
// 자바스크립트는 모든 요소를 객체로 생각함..
// document ==> 현재의 '나'를 가리키는 객체(this 정도..)
var txtEle = document.getElementById("txt"); // Id로 Element를 가져와라
console.log(txtEle); // <input type="text" name="" id="txt"> 출력
console.dir(txtEle);
console.log(txtEle.value); // dir에 저장된 value 값 가져오기
}
</script>
</head>
<body>
<input type="text" name="" id="txt">
<!-- 전송 버튼을 클릭하면 cal() 호출 -->
<input type="button" value="전송" onclick="cal();">
</body>
</html>
|
cs |
- 텍스트 입력값끼리 빼기 연산 > 콘솔 / 화면 출력
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript12.html</title>
<script>
// 버튼을 누르면 앞에 입력한 값에서 뒤에 입력한 값을 뺀 값을 콘솔에 출력하세요
function cal() {
// 1. ID가 TXT1인 엘리먼트 객체 가져오기
var txt1Ele = document.getElementById("txt1");
// 2. ID가 TXT2인 엘리먼트 객체 가져오기
var txt2Ele = document.getElementById("txt2");
// 멤버변수 접근
// console.dir(txt1Ele);
// console.dir(txt2Ele);
// 3. 두 객체로부터 값(value) 가져오기
var num1 = txt1Ele.value;
var num2 = txt2Ele.value;
// console.log("num1 : " + num1);
// console.log("num2 : " + num2);
// 4. 두 변수를 숫자로 형변환
num1 = parseInt(num1);
num2 = parseInt(num2);
// 5. 연산하기
var result = (num1-num2);
// 6. 연산된 결과를 콘솔에 출력하기
console.log(num1 + " - " + num2 + " = " + result);
// 계산 결과를 화면에 출력하기 위해 (2)
var resultEle = document.getElementById("result");
resultEle.value = result;
}
</script>
</head>
<body>
<input type="text" name="" id="txt1" size="5"> -
<input type="text" name="" id="txt2" size="5">
<input type="button" value="=" onclick="cal();">
<!-- 계산 결과를 화면에 출력하기 위해 (1) -->
<input type="text" name="" id="result">
</body>
</html>
|
cs |
- 텍스트 입력값 계산(연산자도 입력) > 콘솔/화면 출력
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript12.html</title>
<script>
function cal() {
// 객체 가져오기
var txt1Ele = document.getElementById("txt1");
var txt2Ele = document.getElementById("txt2");
var operEle = document.getElementById("oper");
// console.log(txt1Ele);
// console.log(txt1Ele.value);
// 객체로부터 값(value) 가져오기
var num1 = txt1Ele.value;
var num2 = txt2Ele.value;
var oper = operEle.value;
var msg = num1 + oper + num2;
// console.log(msg);
var num3 = eval(msg); // 3*2 ==> 6 1+5 ==> 6
var resultEle = document.getElementById("result");
resultEle.value = num3;
console.log(num1 + " " + oper + " " + num2 + " = " + num3);
}
</script>
</head>
<body>
<input type="text" name="" id="txt1" size="5">
<input type="text" name="" id="oper" size="3">
<input type="text" name="" id="txt2" size="5">
<input type="button" value="=" onclick="cal();">
<input type="text" name="" id="result">
</body>
</html>
|
cs |