Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- protected
- append()
- innerclass
- 싱글톤 패턴
- File
- pox.xml 오류
- singleton
- 자바 개발환경준비
- 오라클 데이터베이스
- 톰켓
- 오버로딩
- tomat
- 드림코딩
- DB 설정
- SPRING 특징
- Runnable
- inheritance
- Visuall code
- OuterClass
- spring 페이징
- Spring 구조
- Overloading
- Spring 개념
- Unbox
- Statement
- New Frame
- 접근제한수식어
- java
- JDK 설치
- New Dialog
Archives
- Today
- Total
~홍~
JavaScript 본문
728x90
01_ intro
// 프론트 엔드 개발 언어
// 1. HTML : 웹 페이지의 컨텐트(내용)을 작성
// 2. CSS : 웹 페이지의 스타일(레이아웃)을 작성
// 3. JavaScript : 웹 페이지의 동적인 동작(기능)을 프로그램
// HTML 파일에서 자바스크립트를 사용하는 방법
// 1. script 태그 안에서 자바스크립트 코드를 작성
// 1) head 태그 안에서 script 태그를 포함
// 2) body 태그 안에서 script 태그를 포함
// 2. 자바스크립트 코드만을 포함한 .js 파일을 HTML 파일에서 링크
// => 자바스크립트 코드가 있는 위치에서 실행
test.js 파일
/*
test.js
*/
document.write("<p>반가워요!</p>");
document.write("<p>당신의 첫 번째 \"자바스크립트\" 입니다</p>");<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intro</title>
<script type="text/javascript">
// 자바스크립트 주석
/* 자바스크립트 주석 */
// 프론트 엔드 개발 언어
// 1. HTML : 웹 페이지의 컨텐트(내용)을 작성
// 2. CSS : 웹 페이지의 스타일(레이아웃)을 작성
// 3. JavaScript : 웹 페이지의 동적인 동작(기능)을 프로그램
// HTML 파일에서 자바스크립트를 사용하는 방법
// 1. script 태그 안에서 자바스크립트 코드를 작성
// 1) head 태그 안에서 script 태그를 포함
// 2) body 태그 안에서 script 태그를 포함
// 2. 자바스크립트 코드만을 포함한 .js 파일을 HTML 파일에서 링크
// => 자바스크립트 코드가 있는 위치에서 실행
document.write('Hello, JavaScript');
</script>
</head>
<body>
<h1>JavaScript 소개</h1>
<script type="text/javascript">
document.write('<h2>안녕, 자바스크립트!</h2>');
// write(문자열) : 문자열은 html에서 문장으로 인식(태그가 실행됨)
</script>
<hr>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
02_intro2
* HTML에서 자바스크립트 기능들
1. HTML 요소(element)의 내용(content)을 변경
2. HTML 요소(element)의 속성(attribute)을 변경
3. HTML 요소(element)의 스타일(CSS)를 변경
4. 입력 양식의 데이터 체크
* 자바와 자바스크립트의 차이점
- 자바스크립트는 변수 타입이 없음
- 자바스크립트에서 if문을 사용할 때 true/false 처리 방법 :
0, null, undefined ==> false로 처리
그 외 나머지(값이 있으면) ==> true로 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intro2</title>
</head>
<body>
<!--
* HTML에서 자바스크립트 기능들
1. HTML 요소(element)의 내용(content)을 변경
2. HTML 요소(element)의 속성(attribute)을 변경
3. HTML 요소(element)의 스타일(CSS)를 변경
4. 입력 양식의 데이터 체크
* 자바와 자바스크립트의 차이점
- 자바스크립트는 변수 타입이 없음
- 자바스크립트에서 if문을 사용할 때 true/false 처리 방법 :
0, null, undefined ==> false로 처리
그 외 나머지(값이 있으면) ==> true로 처리
-->
<!-- HTML 페이지 부분 -->
<h1 id="title">자바스크립트가 할 수 있는 일들</h1>
<button onclick="changeCSS()">클릭해주세요!</button>
<!-- 버튼을 클릭하면 changeCSS() 함수를 호출 -->
<p id="output" onclick="changeText()">변경될 텍스트</p>
<!-- 자바스크립트 부분 -->
<script type="text/javascript">
function changeCSS() { // id=title인 태그의 텍스트 CSS를 변경
console.log('changeCSS() 호출');
// document : 현재 html 문서의 정보를 갖고 있는 객체
var title = document.getElementById('title');
// getElementById() : id속성값으로 요소 찾기
title.style.backgroundColor = 'cyan';
title.style.fontSize = '300%';
title.style.color = 'red';
} // end changeCSS()
function changeText() {
console.log('changeText() 호출');
var output = document.getElementById('output');
// innerHTML : 요소의 텍스트 내용을 리턴
if(output.innerHTML.match('변경될 텍스트')) {
output.innerHTML = '변경된 텍스트';
} else {
output.innerHTML = '변경될 텍스트';
}
} // end changeText()
</script>
</body>
</html>
03_output
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<h1>자바스크립트 출력 방법</h1>
<h2>document.write() 함수사용</h2>
<script type="text/javascript">
document.write('<p>안녕하세요</p>');
</script>
<hr>
<button onclick="test1()">Click!</button>
<h2>innerHTML 속성 사용</h2>
<div id="output"></div>
<button onclick="test2()">Click!</button>
<hr>
<h2>다이얼로그(dialog) 사용</h2>
<button onclick="showAlert()">alert</button>
<button onclick="showConfirm()">confirm</button>
<button onclick="showPrompt()">prompt</button>
<hr>
<h2>콘솔 로그 출력</h2>
<button onclick="showLog()">로그 출력</button>
<script type="text/javascript">
/*
JavaScript 디스플레이 속성
- innerHTML : HTML 요소에 작성
- document.write() : HTML 문서에 작성
- window.alert() : 경고 박스에 작성
- console.log() : 브라우저 콘솔창에 작성
*/
function test1() {
document.write('<p>test1() 호출</p>');
// (주의) HTML 문서의 로딩이 끝난 후 document.write()를 호출하면
// 문서 전체의 내용을 덮어쓰게 됨
} // end test1()
function test2() {
var output = document.getElementById('output');
output.innerHTML = 'test2() 출력 완료!';
} // end test2()
function showAlert() {
alert(1 + 2 + '입니다');
} // end showAlert()
function showConfirm() {
var result = confirm('삭제하시겠습니까?');
// confirm의 선택 결과를 리턴 : 확인(true), 취소(false)
document.getElementById('output').innerHTML = result;
} // end showConfirm()
function showPrompt() {
var result = prompt('이름 입력', '이름');
document.getElementById('output').innerHTML = result;
} // end showPrompt()
function showLog() {
console.log('테스트입니다.');
}
</script>
</body>
</html>
04_variable
// * 변수 초기화 방법
// - var 변수이름 = 초기값;
// - var 변수이름;
// 변수이름 = 값;
// * 자바스크립트의 변수 타입
// 1) 숫자(number) 타입 : 정수(-1, 0, 1, 2, 3, ..), 실수(1.2, 3.14)
// 2) 문자열(string) 타입 : '문자열', "문자열"
// 3) 논리형(boolean) 타입 : true, false
// 4) 객체(object) 타입 : 자바 클래스의 인스턴스(객체)
// 5) null 타입
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Variable</title>
</head>
<body>
<h1>자바스크립트 변수 선언과 사용</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
console.log(typeof output); // typeof : 변수 타입 확인
// * 변수 초기화 방법
// - var 변수이름 = 초기값;
// - var 변수이름;
// 변수이름 = 값;
// * 자바스크립트의 변수 타입
// 1) 숫자(number) 타입 : 정수(-1, 0, 1, 2, 3, ..), 실수(1.2, 3.14)
// 2) 문자열(string) 타입 : '문자열', "문자열"
// 3) 논리형(boolean) 타입 : true, false
// 4) 객체(object) 타입 : 자바 클래스의 인스턴스(객체)
// 5) null 타입
var x = 123; // 변수의 선언과 초기화를 동시에
var y; // 변수 선언
y = 456; // 변수 초기화
var sum = x + y;
output.innerHTML += 'sum = ' + sum + '<br>';
// * 중요) 자바스크립트는 타입이 var로 통합된다.
// x 는 숫자 타입의 변수지만, 문자를 저장하면 문자 타입으로 자동 형변환된다.
x = '안녕, '; // 문자열로 자동 형변환
y = '자바스크립트'; // 문자열로 자동 형변환
sum = x + y;
output.innerHTML += 'sum = ' + sum + '<br>';
var check = confirm('?');
if (check) {
output.innerHTML += '참(true)<br>';
} else {
output.innerHTML += '거짓(false)<br>';
}
</script>
</body>
</html>
5_ if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>If</title>
</head>
<body>
<h1>JavaScript if문, 비교연산자, 삼항연산자</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
var x = -1;
if (x > 0) {
output.innerHTML += '양수<br>';
} else if(x == 0) {
output.innerHTML += '0<br>';
} else {
output.innerHTML += '음수<br>';
}
// ==, != : 자동 형변환이 이루어져서 값만 비교
var age = '16'; // 문자열
if (age == 16) {
output.innerHTML += '== 연산자 결과 : 참<br>';
} else {
output.innerHTML += '== 연산자 결과 : 거짓<br>';
}
// === , !== : 타입과 값을 함께 비교
var age = '16'; // 문자열
if (age === 16) {
output.innerHTML += '== 연산자 결과 : 참<br>';
} else {
output.innerHTML += '== 연산자 결과 : 거짓<br>';
}
var x = 100; // 이미 선언된 변수를 다시 선언해도 에러가 발생하지 않음
var msg = (x > 0) ? '양수' : '음수';
output.innerHTML += msg + '<br>';
</script>
</body>
</html>
06_swich
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Switch</title>
</head>
<body>
<h1>자바스크립트 Switch문</h1>
<div id="output"></div>
<script type="text/javascript">
// 자바스크립트의 switch문 사용
// - 자바스크립트는 숫자 타입을 정수/실수로 구분하지 않음
// - 실수 타입도 switch-case 구문에서 사용할 수 있음
// - 자바는 실수 타입을 switch-case 구문에서 사용할 수 없음
var output = document.getElementById('output');
var x = '2';
// switch-case 문에서는 형변환하여 비교하지 않음
switch(x) {
case 1:
output.innerHTML += 'One<br>';
break;
case 2:
output.innerHTML += 'Two<br>';
break;
default:
output.innerHTML += '모르는 값<br>';
}
var x = 1.1;
switch(x) {
case 1.0:
output.innerHTML += '1.0<br>';
break;
case 1.1:
output.innerHTML += '1.1<br>';
break;
default :
output.innerHTML += '모르는 값<br>';
}
</script>
</body>
</html>
07_for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>For</title>
</head>
<body>
<h1>자바스크립트 for문, 전역/지역 변수</h1>
<div id="output"></div>
<script type="text/javascript">
// 자바스크립트의 전역변수, 지역변수 선언
// - 자바스크립트의 전역변수(global variable) :
// <script> 태그 안에서 선언된 변수
// 선언된 위치와 상관 없이 변수 선언부분을 script의 첫 부분으로 이동
// - 자바스크립트의 지역변수(local variable) :
// 함수(fuction) 내부에서 선언된 변수
var output = document.getElementById('output');
output.innerHTML += 'i = ' + i + '<br>';
var i = 1;
// 자바스크립트의 반복문
// - 자바 문법과 동일
for(var x = 1; x <= 6; x++){ // var x : x는 전역변수
output.innerHTML += '<h' + x + '> heading ' + x + '</h' + x + '>';
}
function test() {
var n = 10; // 지역 변수
output.innerHTML += 'test() 내부 : x = ' + x + '<br>';
output.innerHTML += 'test() 내부 : n = ' + n + '<br>';
}
// 함수 호출(call)
test();
/* output.innerHTML += 'test() 외부 : n = ' + n + '<br>'; */
</script>
</body>
</html>
08_while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>While</title>
</head>
<body>
<h1>자바스크립트 while문</h1>
<div id="output"></div>
<script>
var output = document.getElementById('output');
var n = 1;
while (n < 10) { // 구구단 2단 출력
output.innerHTML += '2 x ' + n + ' = ' + (2 * n) + '<br>';
n++;
}
output.innerHTML += '<hr>';
// 구구단 출력
var dan = 2;
while (dan < 10) {
n = 1;
while (n < 10) {
output.innerHTML += dan + ' x ' + n + ' = ' + (dan * n) + '<br>';
if (dan === n) {
break;
}
n++;
}
dan++;
output.innerHTML += '<hr>';
}
</script>
</body>
</html>
09_function1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function1</title>
</head>
<body>
<h1>자바스크립트 함수(function)</h1>
<div id="output"></div>
<script type="text/javascript">
/*
* 자바스크립트에서 함수 작성 방법
- function 함수이름(매개변수1, 매개변수2, ...) {
실행 코드;
}
- 함수의 호출 :
함수이름(매개변수1, 매개변수2, ...);
- 함수의 정의 부분은 script의 상단으로 이동
-> 함수를 정의하기 이전에 호출할 수 있음.
* 자바스크립트 함수의 매개변수 규칙
1. 자바스크립트 함수는 매개변수의 타입을 명시하지 않음
2. 자바스크립트 함수는 전달받는 매개변수의 타입을 체크하지 않음
3. 자바스크립트 함수는 전달받는 매개변수의 개수를 체크하지 않음
*/
var output = document.getElementById('output');
var result = add(1, 2); // 함수 호출
output.innerHTML += 'result = ' + result + '<br>';
function add(x, y) { // 함수 정의
console.log('x : ' + x + ', y : ' + y);
return x + y;
}
result = add('Hello', 'JavaScript');
output.innerHTML += 'result = ' + result + '<br>';
result = add();
output.innerHTML += 'result = ' + result + '<br>';
</script>
</body>
</html>
10_function2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function2</title>
</head>
<body>
<h1>자바스크립트 함수</h1>
<div id="output"></div>
<script type="text/javascript">
// * 자바스크립트의 overloading
// - 자바스크립트 함수는 매개변수의 개수와 타입을 체크하지 않기 때문에
// 함수 overloading을 할 수 없음
// -> 같은 이름으로 함수를 정의하면, 나중에 정의한 함수가 이전 함수의 정의를 덮어씀(overriding)
var output = document.getElementById('output');
function add(x) {
return x + 1;
}
function add(x, y) {
return x + y;
}
var result = add(10, 20);
output.innerHTML += 'result = ' + result + '<br>';
result = add(10);
output.innerHTML += 'result = ' + result + '<br>';
output.innerHTML += '<hr>';
// NaN : Not a Number(숫자가 아님)
// isNaN(a) : a가 숫자가 아니면 true, 숫자이면 false를 리턴하는 함수
function add2(x, y) {
if(isNaN(x) || isNaN(y)) {
return '숫자가 아니므로 덧셈을 할 수 없습니다!';
}
return x + y;
}
result = add2(10, 'hello');
output.innerHTML += 'result = ' + result + '<br>';
result = add2(10, 20);
output.innerHTML += 'result = ' + result + '<br>';
</script>
</body>
</html>
11_function3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function3</title>
</head>
<body>
<h1>자바스크립트 함수 기본 파라미터(default parameter)</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
function sub(x, y = 10){
if (isNaN(x)){
return 'x는 반드시 숫자를 입력하세요!';
}
return x - y;
}
var result = sub(100); // x= 100, y = 10
output.innerHTML += 'result = ' + result + '<br>';
var result = sub(100, 200); // x = 100, y = 200
output.innerHTML += 'result = ' + result + '<br>';
function sub2(x = 1, y){
return x - y;
}
result = sub2(10); // x = 10, y = undefined
output.innerHTML += 'result = ' + result + '<br>';
// 함수를 호출할 때 전달된 매개변수는 정의한 함수의 순서대로 값들을 복사
// -> 함수를 정의할 때 기본 파라미터가 필요하면
// 다른 매개변수들을 먼저 선언하고, 기본 파라미터들을 나중에 선언하는 것을 권장
output.innerHTML += '<hr>';
// 자바스크립트는 변수에 함수를 저장하는 것이 가능
var myFunction = sub;
result = myFunction(10, 5);
output.innerHTML += 'result = ' + result + '<br>';
// 자바스크립트는 변수에 함수를 선언해서 저장하는 것이 가능
var myFunction2 = function(x, y) {
return x + y;
};
result = myFunction2(10, 20);
output.innerHTML += 'result = ' + result + '<br>';
// 중복 함수(Nested function)
// - 함수 안에 함수를 선언할 수 있음
function test() {
output.innerHTML += 'test() 내부 : <br>';
function nested() {
output.innerHTML += 'nested() 내부 : <br>';
}
nested();
}
test();
</script>
</body>
</html>
12_number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number</title>
</head>
<body>
<h1>자바스크립트 Number</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// - 자바스크립트 숫자의 특징
// 1) 지수표기법 사용이 가능하다.
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
output.innerHTML += x + '<br>';
output.innerHTML += y + '<br>';
// 2) 정수는 15자릿수로 표현한다.
x = 999999999999999;
y = 9999999999999999;
output.innerHTML += x + '<br>';
output.innerHTML += y + '<br>';
// 3) 소숫점 연산은 100% 정확하지 않다.
x = 0.1 + 0.2
output.innerHTML += x + '<br>';
var a = 0.1;
var b = 0.2;
// 해결책 : 정수 형태로 연산을 변환한다.
x = (a * 10 + b * 10) / 10;
output.innerHTML += x + '<br>';
// - 문자를 숫자로 변환 가능
// - parseInt : 문자를 정수로 변환
output.innerHTML += parseInt('10 20 30') + '<br>';
output.innerHTML += parseInt('year 2020') + '<br>';
output.innerHTML += parseInt('1.23') + '<br>';
// - parseFloat : 문자를 실수로 변환
output.innerHTML += parseFloat('10 20 30') + '<br>';
output.innerHTML += parseFloat('year 2020') + '<br>';
output.innerHTML += parseFloat('1.23') + '<br>';
</script>
</body>
</html>
13_string
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String</title>
</head>
<body>
<h1>자바스크립트 String</h1>
<!--
* 자바스크립트 String
- 문자열 객체와 문자열 상수가 존재
- 문자열은 내장 메소드를 포함
- 특수기호(Escape Sequence)사용에 유의
-->
<p id="demo"></p>
<div id="output"></div>
<script type="text/javascript">
var x = "";
/* x = "Hello. My name is "Mok". Nice to meet you!"; // 에러 발생 */
// Escape Sequence : 문자열 내에서 특수한 기능을 하는 문자(', ", \)
x = "Hello. My name is \"Mok\". Nice to meet you!"; // 백슬래쉬를 이용하여 해결
var demo = document.getElementById('demo');
demo.innerHTML += x + '<br>';
x = "The character \\ is called backslash";
demo.innerHTML += x + '<br>';
var output = document.getElementById('output');
var str1 = '안녕하세요'; // 문자열 상수(String Literal)
var str2 = '안녕하세요';
if (str1 == str2) {
output.innerHTML += '같은 객체 <br>';
} else {
output.innerHTML += '다른 객체 <br>';
}
var str3 = new String('안녕하세요');
var str4 = new String('안녕하세요');
if(str3 == str4) {
output.innerHTML += '같은 객체 <br>';
} else {
output.innerHTML += '다른 객체 <br>';
}
var str5 = '안녕, 자바스크립트! "자바스크립트"는 쉬워요.';
output.innerHTML += str5 + '<br>';
/* String Method */
// length : 문자열 길이 출력. 메소드가 아니라 property
// indexOf() : 문자열의 시작 위치를 리턴
// lastIndexOf() : 문자열의 끝 위치를 리턴
output.innerHTML += 'length : ' + str5.length + '<br>';
output.innerHTML += 'indexOf() : ' + str5.indexOf('자바스크립트') + '<br>';
output.innerHTML += 'lastIndexOf() : ' + str5.lastIndexOf('자바스크립트') + '<br>';
output.innerHTML += 'search() : ' + str5.search('자바스크립트') + '<br>';
output.innerHTML += 'search() : ' + str5.search(/자바스크립트/) + '<br>';
// match() : 일치하는 문자열을 리턴
output.innerHTML += 'match() : ' + str5.match('자바스크립트') + '<br>';
output.innerHTML += 'match() : ' + str5.match(/자바스크립트/g) + '<br>';
output.innerHTML += '찾은 개수 : ' + str5.match(/자바스크립트/g).length + '<br>';
// JavaScript 정규표현식 : /패턴/옵션
// 옵션 :
// 1) g(global) : 일치하는 모든 패턴을 찾음
// 2) i(case-insensitive) : 대소문자 구분없이 패턴을 찾음
output.innerHTML += '<hr>';
// 문자열 자르기
// - slice(startIndex, endIndex)
// - startIndex는 포함한 위치, endIndex는 위치의 -1까지 문자열 자르기
// - 음수 인덱스 사용 가능
output.innerHTML += 'slice() : ' + str5.slice(4, 10) + '<br>';
output.innerHTML += 'slice() : ' + str5.slice(-13, -7) + '<br>';
// - substring(startIndex, endIndex)
// - 음수 인덱스 사용 불가능
output.innerHTML += 'substring() : ' + str5.substring(4, 10) + '<br>';
// - substr(startIndex, length)
// - startIndex부터, length만큼 문자열 자르기
output.innerHTML += 'substr() : ' + str5.substr(4, 6) + '<br>';
output.innerHTML += '<hr>';
// - replace(originalString, changedString)
// - originalString을 changedString으로 변경
var str6 = 'Hello, javascript. "javascript" is easy.';
output.innerHTML += 'replace() : ' + str6.replace('javascript', 'JAVASCRIPT') + '<br>';
output.innerHTML += 'replace() : ' + str6.replace(/javascript/g, 'JAVASCRIPT') + '<br>';
// 대소문자 변경
// toUpperCase() : 대문자로 변경
// toLowerCase() : 소문자로 변경
var str7 = 'JavaScript';
output.innerHTML += 'toUpperCase() : ' + str7.toUpperCase() + '<br>';
output.innerHTML += 'toLowerCase() : ' + str7.toLowerCase() + '<br>';
// - split(String)
// - String을 기준으로 문자열을 나눠서 배열 형태로 저장
var str8 = "admin,admin123,admin@test.com";
var info = str8.split(',') // 배열로 값 저장
output.innerHTML += 'split lenth : ' + info.length + '<br>';
output.innerHTML += info.toString() + '<br>';
for (x in info) {
output.innerHTML += x + ' 번째 : ' + info[x] + '<br>';
}
</script>
</body>
</html>
14_array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array</title>
</head>
<body>
<h1>자바스크립트 배열(Array)</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// 자바스크립트에서 배열 선언/초기화 방법1:
// var 배열이름 = [원소1, 원소2, ...];
var movies = ['기생충', '어벤져스', '토르'];
for(var i = 0; i < movies.length; i++) {
output.innerHTML += movies[i] + '<br>';
}
for(x in movies) {
output.innerHTML += x + ' : ' + movies[x] + '<br>';
}
// for-in 구문(자바의 for-each 구문)
// - for (String x : movies) {} : 자바 문법
// - 자바스크립트의 for-in 구문에서 x는 배열의 인덱스(배열의 값이 아님!)
// 배열의 선언/초기화 방법 2:
var games = new Array('스타크래프트', '슈퍼마리오');
</script>
</body>
</html>
15_array2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array2</title>
</head>
<body>
<h1>자바스크립트 배열2</h1>
<div id="output"></div>
<button onclick="myFunction()">누르세요!</button>
<p id="demo"></p>
<script type="text/javascript">
var output = document.getElementById('output');
// 자바스크립트의 배열은 서로 다른 타입의 원소를 저장할 수 있음
var person = ['둘리', 1000000, true];
for (x in person) {
output.innerHTML += person[x] + '<br>';
}
output.innerHTML += person + '<br>'; // person.toString()과 동일
output.innerHTML += '<hr>';
// 배열의 원소 추가/삭제
var cities = ['서울', '부산', '대전', '광주'];
// 배열의 추가 - 인덱스 사용
cities[cities.length] = '대구';
cities[10] = '인천';
output.innerHTML += cities + '<br>';
// 배열의 함수
// push(원소) : 배열의 가장 마지막 위치에 새로운 원소를 추가
cities.push('울산');
output.innerHTML += cities + '<br>';
// pop() : 배열의 가장 마지막 원소를 삭제
cities.pop();
output.innerHTML += cities + '<br>';
// shift() : 배열의 첫 번째 원소를 삭제, 배열 원소들의 인덱스를 모두 변경
cities.shift();
output.innerHTML += cities + '<br>';
// unshift() : 배열의 첫 번째 위치에 새로운 원소를 추가. 나머지 원소들은 뒤로 이동
cities.unshift('제주');
output.innerHTML += cities + '<br>';
output.innerHTML += '<hr>';
var points = [40, 100, 1, 5, 25, 10];
// sort() : 배열의 요소들을 정렬
points.sort(); // 문자 사전식으로 정렬
output.innerHTML += points;
// 숫자 오름차순으로 정렬
function myFunction() {
console.log('myFunction');
points.sort(function (a, b){
console.log('test');
return a - b; // b - a는 내림차순
});
document.getElementById('demo').innerHTML = points;
} // end myFunction()
</script>
</body>
</html>
16_object1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object1</title>
</head>
<body>
<h1>자바스크립트 객체(object)</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
/*
* 자바스크립트 객체 표기법 :
{프로퍼티1 : 값, 프로퍼티2 : 값, ...}
ex) {userid : "admin", password : "admin123", email : "admin@test.com"}
*/
var person = {
name : '토르',
age : 400,
email : 'thor@thunder.com'
};
output.innerHTML += person + '<br>';
output.innerHTML += '이름 : ' + person.name + '<br>';
output.innerHTML += '이름 : ' + person[name] + '<br>';
output.innerHTML += '나이 : ' + person.age + '<br>';
output.innerHTML += '이메일 : ' + person.email + '<br>';
output.innerHTML += '<hr>';
// for-in 구문을 사용한 자바스크립트 객체의 프로퍼티 접근
for (x in person) {
output.innerHTML += person[x] + '<br>';
}
// 권장하지 않는 객체 생성 방법
var person2 = new Object();
person2.name = '아이언맨';
person2.age = 40;
person2.email = 'iron@tony.com';
// 생성자 함수를 작성/호출
function Person(name, age, email) {
this.name = name;
this.age = age;
this.email = email;
}
var p1 = new Person('유재석', 49, 'mettook@test.com');
var p2 = new Person('아이유', 28, 'iu@test.com');
for (x in p1) { // 객체의 인덱스는 속성(property)
console.log(x);
output.innerHTML += x + ' : ' + p1[x] + '<br>';
}
output.innerHTML += p1.name + '<br>';
</script>
</body>
</html>
17_object2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object</title>
</head>
<body>
<h1>자바스크립트 객체</h1>
<div id="output"></div>
<script type="text/javascript">
var person = {
name : '유재석',
phone : {
home : '02-1234-5678',
mobile : '010-1234-5678'
}, /* object 객체 */
email : ['test@test.com', 'yoo@test.com'], /* 배열 */
information : function() {
return this.name + ", " + this.phone.home + ", " + this.email[0];
} /* method */
// this : person 객체
};
var output = document.getElementById('output');
output.innerHTML += '이름 : ' + person.name + '<br>';
output.innerHTML += '집전화 : ' + person.phone.home + '<br>';
output.innerHTML += '핸드폰 : ' + person.phone.mobile + '<br>';
output.innerHTML += '이메일1 : ' + person.email[0] + '<br>';
output.innerHTML += '이메일2 : ' + person.email[1] + '<br>';
output.innerHTML += '전체 정보 : ' + person.information() + '<br>';
output.innerHTML += '<hr>';
</script>
</body>
</html>
18_method
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Method</title>
</head>
<body>
<h1>자바스크립트 메소드 : 객체가 가지고 있는 함수</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// 생성자 함수
function Unit(money, gas, hp) {
/* property : 객체 내에 있는 변수 */
this.money = money;
this.gas = gas;
this.hp = hp;
/* method */
this.attack = function(unit) {
unit.hp -= 10;
output.innerHTML += unit.hp + '<br>';
};
this.toString = function() {
// 유닛의 money, gas, hp를 문자열로 리턴
return 'money : ' + this.money + ', gas : ' + this.gas + ', hp : ' + this.hp;
};
} // end Unit()
var zilot = new Unit(100, 0, 60);
var marine = new Unit(50, 0, 40);
zilot.attack(marine);
zilot.attack(marine);
output.innerHTML += '유닛 정보 : ' + marine.toString() + '<br>';
</script>
</body>
</html>
19_property
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Property</title>
</head>
<body>
<h1>자바스크립트 객체의 프로퍼티 추가/삭제</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// 자바스크립트는 객체(object)가 생성된 이후에 프로퍼티를 추가/삭제할 수 있음
var unit1 = {
name : 'scv',
money : 50
};
for (x in unit1){
output.innerHTML += x + ' : ' + unit1[x] + '<br>';
}
output.innerHTML += '<hr>';
unit1.money = 100; // 프로퍼티의 값 변경
unit1.gas = 10; // 새로운 프로퍼티 추가
unit1.power = 50; // 새로운 프로퍼티 추가
// 새로운 메소드 추가
unit1.toString = function() {
return this.name + ', ' + this.money + ', ' + this.gas + ', ' + this.power;
}
output.innerHTML += unit1.toString() + '<br>';
output.innerHTML += '<hr>';
// 프로퍼티 삭제 : delete 객체.프로퍼티;
delete unit1.power;
for (x in unit1){
output.innerHTML += x + ' : ' + unit1[x] + '<br>';
}
</script>
</body>
</html>
20_prototype
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prototype</title>
</head>
<body>
<h1>자바스크립트 생성자 함수 prototype 변경</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// 생성자 함수
function Unit(name, money) {
this.name = name;
this.money = money;
}
// 생성자 함수의 prototype을 변경 :
Unit.prototype.gas = 0;
Unit.prototype.attack = function() {
output.innerHTML += this.name + '가 공격합니다.';
}
var unit1 = new Unit('드론', 50);
for (x in unit1) {
output.innerHTML += x + ' : ' + unit1[x] + '<br>';
}
unit1.attack();
var unit2 = new Unit('프로브', 50);
for (x in unit2){
output.innerHTML += x + ' : ' + unit2[x] + '<br>';
}
unit2.attack();
</script>
</body>
</html>
21_date
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<h1>자바스크립트 Date</h1>
<div id="output"></div>
<script type="text/javascript">
var output = document.getElementById('output');
// 현재 시간
var curDate = new Date();
output.innerHTML += curDate.toString() + '<br>';
output.innerHTML += curDate.toUTCString() + '<br>';
output.innerHTML += curDate.toDateString() + '<br>';
// 특정 시간의 Date 객체 생성
var yesterday = new Date(2020, 10, 3, 12, 59); // 년, 월, 일, 시, 분
output.innerHTML += yesterday + '<br>';
// Date 객체에서 년/월/일/시/분/초 정보 확인
output.innerHTML += curDate.getFullYear() + '<br>';
output.innerHTML += curDate.getMonth() + '<br>'; // 0(1월) ~ 11(12월)
output.innerHTML += curDate.getDate() + '<br>'; // 1 ~ 31
output.innerHTML += curDate.getDay() + '<br>'; // 0(일요일) ~ 6(토요일)
output.innerHTML += curDate.getHours() + '<br>'; // 0 ~ 23
output.innerHTML += curDate.getMinutes() + '<br>'; // 0 ~ 59
output.innerHTML += curDate.getSeconds() + '<br>'; // 0 ~ 59
// 1970년 1월 1일 0시 0분 0초를 기준으로
// milli-second(1/1000초)마다 1씩 증가된 시간
output.innerHTML += curDate.getTime() + '<br>';
</script>
</body>
</html>
22_dom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<h1>자바스크립트 DOM(Document Object Model)</h1>
<input id="input" type="text" value="Hello" >
<p id="para" style="color : white; background-color: pink;">
여기는 <span style="font-weight: hold; color: black;">단락</span>입니다.
</p>
<div id="output" style="border: 1px solid grey"></div>
<script type="text/javascript">
// * HTML DOM(Document Object Model)
// - 표준 객체 모델
// - HTML을 위한 프로그래밍 인터페이스
// - 모든 HTML 요소의 프로퍼티
// - 모든 HTML에 접근하는 메소드
// - 모든 HTML을 위한 이벤트
var output = document.getElementById('output');
var para = document.getElementById('para');
var input = document.getElementById('input');
// HTML 요소가 가지고 있는 content : innerHTML을 사용하여 읽기/쓰기
output.innerHTML += para.innerHTML + '<br>';
// HTML 요소의 속성(attribute) : element.attribute
output.innerHTML += para.id + '<br>';
output.innerHTML += 'input value : ' + input.value + '<br>';
// HTML 요소의 style : element.style.property
output.innerHTML += para.style.color + '<br>';
// HTML 요소 변경하기
input.value = '요소변경됨.';
para.style.color = 'red';
para.style.backgroundColor = 'white';
// HTML DOM을 이용한 요소 접근 방법
output.innerHTML += 'tagName : ' + para.tagName + '<br>';
output.innerHTML += 'parentElement : ' + para.parentElement + '<br>';
para.parentElement.style.backgroundColor = 'lightgrey';
output.innerHTML += 'children : ' + para.children[0] + '<br>';
output.innerHTML += 'firstElementChild : ' + para.firstElementChild + '<br>';
output.innerHTML += para.previousElementSibling + '<br>';
output.innerHTML += para.nextElementSibling + '<br>';
</script>
</body>
</html>
23_getElement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElement</title>
</head>
<body>
<h1>HTML 요소(element)를 찾는 방법</h1>
<p id="p1">단락1</p>
<p id="p1">단락2</p>
<p class="c1">단락3</p>
<p class="c1">단락4</p>
<script type="text/javascript">
// * 자바스크립트를 사용하여 HTML element를 찾는 방법 :
// 1. getElementById('id');
// 2. getElementsByTagName('tagName');
// 3. getElementsByClassName('className');
// 4. CSS 선택자 : querySelectorAll('선택자'), querySelector('선택자')
// 5. HTML object collection : body, form, images
document.getElementById('p1').style.backgroundColor = 'lightgreen';
// p1 아이디가 두 개지만 1개만 적용시킴
// p 태그를 찾아서 배경색 변경
var ps = document.getElementsByTagName('p');
console.log(typeof ps);
for(var i = 0; i < ps.length; i++){ // 여러 개의 태그에 적용
ps[i].style.backgroundColor = 'lightblue';
}
// class 'c1'을 찾아서 배경색 변경
ps = document.getElementsByClassName('c1');
for(var i = 0; i < ps.length; i++){
ps[i].style.backgroundColor = 'cyan';
}
// CSS 선택자를 찾아서 배경색 변경
document.querySelector('.c1').style.backgroundColor = 'yellow' // 하나만
ps = document.querySelectorAll('.c1'); // 모든 c1 클래스 가져오기
for(var i = 0; i < ps.length; i++){
ps[i].innerHTML = '선택자 변경';
}
</script>
</body>
</html>
24_event1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body onload="window.alert('반갑습니다.')">
<h1 id="title" onclick="test1()"
onmouseover="test2()"
onmouseout="test3()">자바스크립트 이벤트 핸들링(Event Handling)</h1>
<script type="text/javascript">
var title = document.getElementById('title');
var toggle = true;
function test1() {
if(toggle) {
title.innerHTML = '자바스크립트 이벤트 처리';
toggle = false;
} else {
title.innerHTML = 'JavaScript Event Handling';
toggle = true;
}
} // end test1()
function test2() {
title.style.backgroundColor = 'hotpink';
title.style.color = 'white';
} // end test2()
function test3() {
title.style.backgroundColor = 'white';
title.style.color = 'black';
} // end test3()
</script>
</body>
</html>
25_event2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body>
<h1>자바스크립트를 사용한 HTML 이벤트 처리</h1>
<p
onclick="this.style.backgroundColor='pink'; this.style.color='green';">
onclick 이벤트에서 코드 작성</p>
<p onclick="alert('hello')">다이얼로그 띄우기</p>
<p onclick="change(this)">onclick 속성에서 JS 함수 호출</p>
<p id="para">script에서 이벤트 리스너를 등록</p>
<script type="text/javascript">
function change(para) { // para(this) : 함수를 호출한 요소(element)의 객체 전달
console.log(para);
para.innerHTML = '안녕?';
para.style.border = '2px solid grey';
para.style.backgroundColor = 'lavender';
para.style.color = 'white';
para.style.fontSize = '2em'; // em : 브라우저에서 설정된 기본 폰트 크기
para.style.margin = '50px';
} // end change()
var para = document.getElementById('para');
// HTML element에 이벤트 핸들러 등록
para.onclick = function() {
para.innerHTML = '변경';
para.style.fontSize = '3em';
para.style.fontWeight = 'bold';
};
</script>
</body>
</html>26_event3
CTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
<style type="text/css">
h1 {
background-color: pink;
color : white;
font-size: 2.5em; /* 250% */
text-align: center;
}
.main-panel {
font-size: 2em;
font-weight: bold;
text-align: center;
background-color: lightgreen;
color : white;
}
.sub-panel {
font-size: 1em;
font-weight: normal;
color : black;
text-align: left;
border-top: 1px solid white;
background-color: lavender;
display: none;
}
ul {
list-style-type: none;
}
</style>
</head>
<body>
<h1 style="visibility: hidden;" id="title">Visibility/Display 속성 변경</h1>
<button type="button" onclick="hide()">Hide</button>
<button type="button" onclick="show()">Show</button>
<button type="button" onclick="none()">Display None</button>
<button type="button" onclick="block()">Display Block</button>
<hr>
<div class="main-panel" onclick="toggleSub(this)">
메인 판넬 - 클릭하세요!
<div class="sub-panel">
<ul>
<li><a href="https://www.google.com">구글</a></li>
<li><a href="https://www.daum.net">다음</a></li>
<li><a href="https://www.naver.com">네이버</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var title = document.getElementById('title');
function hide() {
title.style.visibility = 'hidden';
}
function show() {
title.style.visibility = 'visible';
}
function none() {
title.style.display = 'none';
}
function block() {
title.style.display = 'block';
}
function toggleSub(main) {
// .sub-panel 요소(element)를 찾는 방법
// var sub = document.getElementsByClassName('sub-panel')[0];
// var sub = document.querySelector('.sub-panel');
var sub = main.firstElementChild;
if (sub.style.display === 'none' || sub.style.display === ''){
sub.style.display = 'block';
} else {
sub.style.display = 'none';
}
}
</script>
</body>
</html>27_event4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body>
<h1>자바스크립트 이벤트</h1>
<input type="text" name="userName" id="userName" autofocus="autofocus"
onfocus="changeBgColor(this)" onblur="resetBgColor(this)"
onchange="toUpper(this)">
<select onchange="select(this)">
<option value="1">빨강</option>
<option value="2">녹색</option>
<option value="3">파랑</option>
</select>
<script type="text/javascript">
// onfocus : 포커스를 받았을 때
function changeBgColor(input) { // 배경색을 바꿈
input.style.backgroundColor = 'lightyellow';
}
// onblur : 포커스를 잃었을 때
function resetBgColor(input) { // 배경색을 원래대로 변경
input.style.backgroundColor = 'white';
}
// onchange : 입력된 내용이 바뀌었을 때(입력 후 엔터나 탭키를 입력했을 때)
function toUpper(input) {
input.value = input.value.toUpperCase();
}
function select(sel) {
var color = sel.value; // 선택된 option의 value 저장
switch(color) {
case '1' :
document.body.style.backgroundColor = 'red';
break;
case '2' :
document.body.style.backgroundColor = 'green';
break;
case '3' :
document.body.style.backgroundColor = 'blue';
break;
default :
document.body.style.backgroundColor = 'white';
break;
}
}
</script>
</body>
</html>28_event5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
<style type="text/css">
#para {
border: 1px solid grey;
width: 500px;
height: 100px;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<h1>자바스크립트 마우스 이벤트</h1>
<p id="para" onmouseover="mouseOver(this)"
onmousedown="mouseDown(this)"
onmouseup="mouseUp(this)"
onmouseout="mouseOut(this)">
마우스를 올려주세요!
</p>
<script type="text/javascript">
// onmouseover: 마우스 커서가 영역 위로 올라왔을 때
function mouseOver(para) {
para.style.backgroundColor = 'lightpink';
para.innerHTML = '마우스를 눌러주세요!';
}
// onmousedown: 마우스를 누르고 아직 up이 안된 상태
function mouseDown(para) {
para.style.color = 'white';
para.innerHTML = '마우스 업하세요!';
}
// onmouseup: 마우스를 눌렀다가 땠을 때(down -> up)
function mouseUp(para){
para.style.color = 'green';
para.innerHTML = '마우스를 옮겨주세요!';
}
// onmouseout: 마우스가 해당 영역을 벗어났을 때
function mouseOut(para) {
para.style.color = 'black';
para.style.backgroundColor = 'white';
para.innerHTML = '마우스를 올려보세요!';
}
</script>
</body>
</html>29_event6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event</title>
</head>
<body>
<h1>자바스크립트에서 이벤트 핸들러 등록 방법</h1>
<div id="output"></div>
<button id="btn1" type="button">버튼1</button>
<input id="btn2" type="button" value="버튼2">
<script type="text/javascript">
// 이벤트 핸들러 등록 방법 1 :
// - element.event = function() {};
// 이벤트 핸들러 등록 방법 2 :
// - element.addEventListener(event, function, useCapture);
// - event : 이벤트 이름(click, mouseover, ...)
// - function : 이벤트 핸들러(리스너) -> 필수
// - useCapture : true / false -> 선택(기본값 false)
// - 장점 : 하나의 이벤트에 여러 개의 이벤트 핸들러를 등록할 수 있음
// 등록 방법1
btn1.onclick = function() {
output.innerHTML = new Date().toLocaleString();
};
btn1.onclick = function() {
alert('등록 방법1');
};
// 가장 마지막에 등록한 이벤트 핸들러만 동작
// 등록 방법2
function displayDate() {
output.innerHTML = new Date().toLocaleString();
}
btn2.addEventListener('click', displayDate);
btn2.addEventListener('click', function() {
alert('등록 방법2');
});
</script>
</body>
</html>30_window
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window</title>
<script type="text/javascript">
window.onload = function() {
// window.onload :
// - HTML 문서를 모두 로딩해서 화면(window)의 로딩이 끝났을 때 생성되는 이벤트
// - 모든 자바스크립트 코드는 window.onload 이벤트 리스너(핸들러) 함수 내부에서
// 작성하는 것이 좋음
// 1) 모든 DOM 객체들이 생성된 후 -> getElement를 안심하고 사용
// 2) 모든 변수가 이벤트 리스너의 지역변수가 됨
// -> 의도치 않게 window 객체가 가지고 있는 전역변수(프로퍼티)를
// 변경하는 것을 방지할 수 있음
var output1 = document.getElementById('output1');
var innerWidth = 100;
output1.innerHTML += 'Hello<br>';
output1.innerHTML += 'width : ' + window.innerWidth + '<br>';
output1.innerHTML += 'width : ' + innerWidth + '<br>';
};
</script>
</head>
<body>
<h1>자바스크립트 window 객체</h1>
<div id="output1"></div>
<div id="output2"></div>
<script type="text/javascript">
// DOM(Document Object Model) : html, head, body, ...
// BOM(Browser Object Model) : Window, Screen, Location, History, ...
// window 객체 : 브라우저 창을 의미. HTML 객체의 최상위 객체
// document.getElementById()
// window.document.getElementById() : 위와 같은 코드
var output2 = document.getElementById('output2');
var innerWidth = 100;
output2.innerHTML = 'width : ' + window.innerWidth;
</script>
</body>
</html>
31_location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<h1>자바스크립트 location 객체</h1>
<div id="output"></div>
<select onchange="goToPage(this)">
<option value="https://www.google.com">구글</option>
<option value="https://www.naver.com">네이버</option>
<option value="https://www.daum.net">다음</option>
</select>
<script type="text/javascript">
var output = document.getElementById('output');
output.innerHTML += window.location.href + '<br>';
output.innerHTML += window.location.protocol + '<br>';
output.innerHTML += window.location.hostname + '<br>';
function goToPage(sel) {
var url = sel.value;
// 현재 창에서 페이지 이동
// window.location.assign(url);
// 새창에서 페이지 열기
window.open(url);
}
</script>
</body>
</html>
32_history
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<h1>자바스크립트 history 객체</h1>
<a href="https://www.google.com">구글</a>
<button type="button" onclick="goBack()">Back</button>
<button type="button" onclick="goForward()">Forward</button>
<script type="text/javascript">
function goBack() {
window.history.back(); // 뒤로 가기
}
function goForward() {
window.history.forward(); // 앞으로 가기
}
</script>
</body>
</html>
Comments