- C언어를 기반으로 만들어짐
- 모든 웹 브라우저가 인식 가능
- 웹이 인터프리터(별도의 컴파일 필요없이 업로드)함
- 동적 타이핑(변수의 자료형 변경 가능) <-> 정적 타이핑(변수의 자료형 변경 불가)
- 객체기반
- 함수형 프로그래밍 지원 (like 람다식)
[1] JS 기본 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS variable</title>
</head>
<script>
//자료형의 종류
//1. 수치형 : number - 정수 , 실수
//2. 문자형 : string - 한문자, 문자열 - '',""
//3. 논리형 : boolean - true, false
//4. 객체형 : object - 내장, 함수, new
//5. nudefined : 값이 없는 변수 - 자료형이면서 값임
//변수 만들기
var a;
a = 10;
document.write(a+'<br>');
document.write(typeof(a)+'<br>');
document.write('<hr>');
var b = "Hello";
document.write(b+'<br>');
document.write(typeof(b)+'<br>');
document.write('<hr>');
var c = true;
document.write(c+'<br>');
document.write(typeof(c)+'<br>');
document.write('<hr>');
//객체 만들기
var d = new Date();
document.write(d+'<br>');
document.write(typeof(d)+'<br>');
document.write('<hr>');
var e;
document.write(e+'<br>');
document.write(typeof(e)+'<br>');
document.write('<hr>');
//JS는 동적 타이핑(자료형) 언어이기에
//변수에 값이 대입될 때 자료형이 결정됨
//그렇기에 변수릐 자료형 변경도 가능함
var f = 10;
document.write(f+' - '+ typeof(f)+'<br>');
f = "kim";
document.write(f+' - '+ typeof(f)+'<br>');
document.write('<hr>');
//JS응 함수형 언어이기에 함수를 객체처럼 변수에 대입할 수도 있음
var h = function(){
document.write("hhh...<br>");
};
document.write(h+'<br>'); //변수의 겂.. 즉, 함수 코드가 출력됨
document.write(typeof(h)+'<br>');
document.write('<hr>');
//함수를 가지는 변수의 이름을 함수명으로 호출 할 수 있음 - 익명함수
h();
//문자열은 string객체로 자동 wrapping 되기에 객체처럼 사용 가능함
var s = "Hello";
document.write(s.length + '<br>');
document.write(s.charAt(2)+ '<br>');
document.write(s.toUpperCase);
document.write('<hr>');
// 변수 사용할때 특이한 점.
// 같은 변수를 또 만들어도 에러 아님. 그냥 var 키워드가 무시함.
var a=10;
var a; //a 으로 보임
document.write(a);
document.write("<br>");
var a=20; //a=20 으로 보임
document.write(a);
document.write("<br>");
//수치형 변수값 표현법
var b= 3.14;
document.write(b);
document.write("<br>");
b = 123.5e3
document.write(b);
document.write("<br>");
b = 123.5e-3
document.write(b);
document.write("<br>");
document.write('<hr>');
//연산자
//비교 연산의 특이한 점
var c= 1; //number
var d="1"; //string
var e= 1.0; //number
// == 비교연산자 : 자료형은 구분하지 않고 비교
document.write( c == d ); //true
document.write("<br>");
document.write( c == e ); //true
document.write("<br>");
// === 비교 연산자 : 자료형과 값 모두 비교
document.write( c === d ); //false
document.write("<br>");
document.write( c === e ); //true
document.write("<br>");
document.write('<hr>');
// 0 나눗셈 - 에러 아니고 무한대..
document.write( 10/0 );
document.write("<br>");
//비트연산자 중에서 >>> : 부호 비트까지 포함하여 시프트
var f=10;
document.write( f >> 2 ); // 2
document.write("<br>");
f=-16;
document.write( f >>> 2 ); // 1073741820
document.write("<br>");
document.write('<hr>');
//표현가능한 수치값 확인
document.write(Number.MAX_VALUE);
document.write("<br>");
//in, delete, instanceof 연산자도 존재 (객체 수업시간에 소개)
document.write('<hr>');
//중요!!
//수치형과 문자형의 변환 : GUI 프로그래밍에서 가장 기본
var h = 1;
document.write(typeof(h)+"<br>");
h = String(h); //number --> stirng
h= h+ ""; //이방식을 더 선호
document.write( typeof(h) +"<br>");
document.write('<hr>');
//문자형을 수치형으로 변환 (parseInt , parseFloat 만 있음)
h= parseInt("4");
document.write( typeof(h) +"<br>");
document.write('<hr>');
h= parseFloat("3.14"); //내부적으론 다 double형임
document.write( typeof(h) +"<br>");
//수치형 <--> 문자형 변환이 왜 필요?
//GUI에서는 모든 사용자 입출력이 문자형이기에
var age= prompt("input your age", "0"); //사용자 입력을 받아주는 다이얼로그
document.write( age + 3); // 203으로 나옴 age를 문자열로 인식해서 결합이 되어버림
document.write("<br>")
age = parseInt(age);
document.write( age + 3); // 23
document.write("<br>")
//다이얼로그로 사용자 입력받으려니 짜증
//HTML 입력 요소를 이용하여 사용자 입력 받아 계산
//JS로 HTML 요소를 직접 제어 해보기..
</script>
<body>
</body>
</html>
[2] JS로 HTML 제어
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element control</title>
<script>
function aaa(){
// 두 수를 입력하는 입력요소 찾아오기
var e1= document.getElementById("in1");
var e2= document.getElementById("in2");
//두 요소에 써 있는 글씨 얻어오기
var a= e1.value;
var b= e2.value;
// a, b는 기본적으로 string 임. 산술연산을 하려면..수치형으로 변환
var c= parseInt(a)+parseInt(b);
var e3= document.getElementById("result");
e3.value= c;
}
function changeColor(){
var e = document.getElementById('aa');
e.style.backgroundColor = "red";
e.style.color = "blue";
}
function changeImg(){
var es = document.getElementsByTagName("img"); //배열로 찾아서 리턴해줌
es[0].src = "./ms21.png";
}
</script>
</head>
<body>
<input type="text" id="in1"><br>
<input type="text" id="in2"><br>
<button onclick="aaa()">계산</button> <br>
<input type="text" id="result" readonly><br>
<hr>
<!-- HTML 요소의 특정 스타일 변경해보기 -->
<h2 id="aa">This is Heading</h2>
<button onclick="changeColor()">change background color</button> <br>
<hr>
<!-- 이미지 변경하기 -->
<img src="./ms20.png" alt="ms20" width="30%">
<button onclick="changeImg()">change image</button>
<hr>
<!-- <script>와 HTML 요소를 혼합하여 사용하는 경우도 있다 -->
<table border="1" style="text-align: center;">
<tr>
<th>Number</th>
</tr>
<script>
for(var i=0; i<10; i++) {
document.write('<tr><th>' + i + '</th></tr>')
}
</script>
</table>
</body>
</html>
[3] 배열과 함수
3-1) 배열
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Array</title>
<script>
// 배열의 2가지 생성 방법
//1. 리터럴 배열
var aaa= [10,20,30];
document.write(aaa[0] +"<br>");
document.write(aaa[1] +"<br>");
document.write(aaa[2] +"<br>");
//배열 이름을 출력하면? [요소값들이 자동 출력됨]
document.write(aaa +"<br>");
//JS는 동적타이핑 언어여서 배열요소의 자료형이 달라도 됨
var bbb= [10, "aaa", true];
document.write(bbb +"<br>");
//배열 요소 인덱스 번호가 틀리면?
document.write(bbb[3] +"<br>"); //undefined : 얘도 값 (like] null)
//배열의 길이가 동적으로 변경될 수 있음
document.write("배열 길이 :"+bbb.length+"<br>");
bbb[5] = 100; //bbb 배열의 [5]번 인덱스 위치에 100대입
//자동으로 사이 요소인 3번 4번 방도 생김 값이 undefined인..
document.write("배열 길이 :"+bbb.length+"<br>");
document.write(bbb +"<br>"); // 10,aaa,true,,,100
document.write("<hr>");
//2. Array 객체로 배열 생성
var ccc = new Array(10,"sam", true);
//반복문을 이용한 요소값 출력
for(var i=0; i < ccc.length; i++){
document.write(ccc[i]+"<br>");
}
document.write("<br>");
//for - each 문법 - in 키워드 연산자
for(var indenx in ccc){ //배열의 인덱스 번호가 자동 증가
document.write(ccc[indenx]+"<br>");
}
document.write("<br>");
//배열 객체를 먼저 만들고 요소를 나중에 추가할 수 있음
var ddd = new Array();
ddd[0] = "apple";
ddd[1] = "banana";
ddd[2] = "orange";
for(var i=0; i < ddd.length; i++) document.write(ddd[i]+"<br>");
document.write("<br>");
// 연관배열 - 배열요소 식별값을 인덱스번호가 아닌 문자열로 지정
var eee= new Array();
eee['aa'] = 10;
eee['bb'] = 20;
eee['cc'] = 30;
document.write(eee['aa'] +"<br>");
document.write(eee['bb'] +"<br>");
document.write(eee['cc'] +"<br>");
document.write("<br>");
// 리터럴배열도 가능함
var fff= [];
fff['id'] ="abcd";
fff['pw'] ="1234";
//document.write(fff +"<br>"); //인덱스 배열이 아니기 때문에 자동출력 불가
document.write(fff['id'] +"<br>");
document.write(fff['pw'] +"<br>");
//요소값 지정하며 연관배열 생성 가능
var ggg= {'aa':10, 'bb':20};
document.write(ggg['aa'] +"<br>");
document.write(ggg['bb'] +"<br>");
document.write("<br>");
//연관배열의 요소배치 방식이 JS객체멤버와 비슷하기에..
//이런 문법으로도 요소 접근이 가능함(마치 객체처럼)
document.write(ggg.aa +"<br>");
document.write(ggg.bb +"<br>");
document.write("<br>");
//실제 실무에서 이 특징을 이용하여 <form>요소 안에 있는
//input 요소들을 참조할 때 연관배열의 특징 활용
</script>
</head>
<body>
<hr>
<form name="mm">
<input type="text" name="in1">
<input type="text" name="in2">
<input type="text" name="in3">
</form>
<script>
// input요소를 참조하여 제어하려면..
//var e= document.getElementsByName('in1')
// 일일이 찾아서 참조하지 않고.. form요소를 참조하는
// 기본 배열객체를 이용
// 그 form배열안에 있는 input요소들도 배열로 참조가능
document.forms[0][0].value= 10;
document.forms['mm'][1].value= 200; //form에 name을 줘서 제어
document.forms['mm']['in3'].value= 300;
document.mm['in1'].value = "aaa";
document.mm.in2.value="bbb";
</script>
<hr>
<!-- 2차원 배열은 1차원 배열을 요소로 가지는 배열 -->
<script>
// var arr = new Array();
var aa = [10,20,30];
var bb = ["aa","bb","cc"];
var cc = [true,true,false];
var arr = new Array();
arr[0] = aa;
arr[1] = bb;
arr[2] = cc;
document.write( arr[0][0] +",");
document.write( arr[0][1] +",");
document.write( arr[0][2] +"<br>");
document.write( arr[1][0] +",");
document.write( arr[1][1] +",");
document.write( arr[1][2] +"<br>");
document.write( arr[2][0] +",");
document.write( arr[2][1] +",");
document.write( arr[2][2] +"<br>");
document.write("<br>");
//반복문
for(var i=0; i<arr.length; i++){
for(var k=0; k<arr[i].length; k++){
document.write(arr[i][k] +",");
}
document.write("<br>");
}
document.write("<br>");
</script>
</body>
</html>
3-2) 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Function</title>
<script>
// 함수 선언 및 호출 [선언적 함수라고 부름]
function aaa(){
document.write("aaa<br>");
}
aaa(); //JS 함수호출
aaa();
//특이한 점. 함수선언과 호출의 순서가 크게 영향받지 않음
bbb();
function bbb(){
document.write('bbb<br>');
}
//JS는 코드를 실행하기 전에 <script>안에 있는
//선언적 함수부터 모두 읽어들임.
ccc(); //아래 스트립트에서 선언한 함수 호출! - 에러
</script>
<!-- 또 다른 스크립트 -->
<script>
//위 스크립트에서 만든 함수를 호출할 수 있음.
bbb();
function ccc(){
document.write('ccc<br>');
}
</script>
<!-- 파라미터 있는 함수 -->
<script>
document.write('<hr>');
document.write('<h4>파라미터 전달</h4>');
function ddd(a){
document.write("ddd : " + a);
document.write("<br>");
}
ddd(10);
ddd(20);
ddd("kim");
ddd(new Date());
ddd(); //전달 안하면..? undefined
//매개변수 여러개...
function eee(a,b){
document.write(a + " , " + b +"<br>");
if(a == undefined || b == undefined) {
document.write("2개의 수를 모두 전달해주세요");
return;
}
var c= a+b;
document.write("덧셈결과 : " + c +"<br>");
}
eee(5, 3);
eee(5); // 덧셈결과 : NaN(Not a Number) - undefined와 산술덧셈을 하면..발생
document.write("<br>");
// 혹시 똑같은 함수를 또 선언하면?? 에러??
// 오버라이드 (덮어 쓰기)
function ddd(a) {
document.write("새로 만든 ddd 함수 : " + a + "<br>");
}
ddd(10);
// 함수의 오버로딩 [ 함수이름은 같고 매개변수가 다른 함수]
// JS는 C언어 기반이기 때문에 오버로딩 개념 없음
// 무조건 덮어쓰기 (오버라이드)
function ddd(a,b){
document.write("함수 오버로딩을 희망..<br>");
}
ddd(5,3);
</script>
<!-- 리턴 -->
<script>
document.write("<hr>");
document.write("<h4>함수의 리턴</h4>");
function ggg(){
//return 10;
//return "aaa";
//return true;
//return 5>2;
//return new Date();
return [10,20,30];
//여러개의 값을 리턴 할 수는 없음
// return 50, "aa", true;
}
var g = ggg();
document.write(g+"<br>");
</script>
<!-- 지역변수와 전역변수 -->
<script>
document.write("<hr>");
document.write("<h4>지역변수와 전역변수</h4>");
//함수 밖에 있는 변수 -일종의 전역변수
var b= 100;
function mmm(){
var a=20; //지역변수
document.write("a : " + a +"<br>");
b= 300;
document.write("b : " + b +" <br>");
//JS의 특별한 전역변수 선언 방법!
//var 키워드 없이 변수 사용
//var 키워드 사용하지 않으면 전역변수로 취급함
c= 1000;
document.write("c : " + c +" <br>");
}
mmm();
// document.write("함수 밖 a : " + a +"<br>");
document.write("함수 밖 b : " + b +"<br>");
document.write("함수 밖 c : " + c +"<br>");
</script>
<!-- 익명함수 -->
<script>
document.write("<hr>");
document.write("<h4>익명함수</h4>");
//함수 이름을 명시하는 대신
//변수가 함수를 가지고 있는 것
var show = function(){
document.write('익명함수!!!!<br>');
}
//변수의 이름을 함수호출에 사용함
show();
//변수에 함수를 대입하였기에... 다른 변수에고 저장시킬 수 있음
var out = show;
out();
//즉, 함수를 값처럼 다른 변수에 전달할 수 있음.
//이렇다는 것은 함수를 다른 함수의 매개변수나
//리턴값으로도 사용할 수 있다는 뜻임.
function kkk(g){
//전달받은 함수를 g라는 매개변수명으로 호출 가능
g()
}
kkk(show);
kkk( function(a){document.write('my 익명함수!!!!<br>');} );
//익명함수를 매개변수로 전달하는 사례
//이벤트 처리용 함수
function setOnClickEvent(g){
g();
}
//이벤트 처리 함수
setOnClickEvent(function(){
document.write("click button 1<br>");
})
setOnClickEvent(function(){
document.write("click button 2<br>");
})
//당연히 리턴에도 사용가능
function hhh(){
var ppp= function(){
document.write('ppp<br>');
};
return ppp;
}
var sss= hhh();
sss();
hhh()(); //이렇게 호출도 가능
//주의!!!!!
//익명 함수는 코드 실행보다 먼저 읽지않음
//값을 대입하는 연산이기 때문에
// xxx(); //error
// var xxx= function(){
// document.write('xxx<br>');
// };
</script>
<script>
document.write('<hr>');
document.write("<h4>arguments</h4>");
//arguments 라는 특별한 매개변수(배열)
//파라미터 개수를 자동 카운트 해주는 매게변수 arguments가 있다
function add(){
document.write("파라미터개수 : "+ arguments.length +"<br>");
var sum=0;
for(var i=0; i<arguments.length; i++){
sum += arguments[i];
}
document.write("총 합 : " + sum +"<br>");
}
add();
add(10);
add(10,20);
add(10,20,30);
</script>
</head>
<body>
<hr>
<script>
aaa();
</script>
</body>
</html>
[4] dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Dialog</title>
<script>
//다이얼로그 3종류
//1. 일반 경고창 - 확인버튼 1개짜리..
alert();
alert("알림");
//2. 사용자에게 확인/취소를 선택하게 하는 다이얼로그
var answer= confirm('종료하시겠습니까?');
document.write("선택결과 : " + answer+"<br>");
//3. 사용자의 글씨 입력. - 리턴은 문자열(string) - 취소는 null
var age= prompt("당신의 나이를 입력하세요.", "0");
document.write(age +"<br>");
document.write(typeof(age) +"<br>");
document.write("<br>다이얼로그...<br>");
</script>
</head>
<body>
</body>
</html>
보조기억장치