728x90
반응형
자바 스크립트란 ? 동적인 웹 페이지를 작성하기 위해 사용되는 언어
컴파일러를 별도로 설정하지 않아도 된다. → 브라우저가 번역해준다.
오개념 : 자바를 쉽게 쓴게 자바스크립트? 아니다.
| 자바 | 자바스크립트 | |
| 언어 종류 | 소스파일을 컴파일하여 실행하는 컴파일 언어이다. | 브라우저가 소스코드를 직접해석하여 실행하는 인터프리터 언어이다. |
| 실행 방식 | 자바 가상 기계 위에서 실행한다. | 브라우저 위에서 실행된다. |
| 작성 위치 | 별도의 소스 파일에 작성 | HTML, 파일안에 삽입가능 |
| 변수 사용 | 변수의 타입을 반드시 선언해야함 | 변수의 타입을 반드시 선언하지 않아도 사용가능(php와 같은 동적변수) |
ECMA6를 기준으로 완전히 달라졌다. 이 이후로 동적 페이지 작성위한 언어는 자바 스크립트로 통일되었다.
자바스크립트의 특징
- 인터프리터언어
- 동적 타이핑(변수의 자료형을 명시하지 않고, 자료형을 바꿀수있다. ↔ 코틀린은 자동추론일뿐, 자료형을 바꿀순없다. )
- 구조적 프로그래밍 지원
- 객체 기반
- 함수형 프로그래밍 지원( 함수를 변수나 객체로 인식한다. 파라미터에 함수를 넣을수도 있다는 뜻. 코틀린 람다식 같은 느낌)
- 프로토타입
자바스크립트의 용도
- 이벤트에 반응하는 동작을 구현
- AJAX (Retrofit같은 녀석. form요소들은 페이지가 바뀌는데 이걸 방어해주는게 AJAX이다.)
- HTML 요소들의 크기나 색상을 동적으로 변경
- 게임이나 애니메이션
- 사용자가 입력한 값들을 검증
자바 스크립트의 위치
- 내부 자바스크립트
- 외부 자바스크립트
- 인라인 자바스크립트
HTML로 되어있는 파일을 제어하는 자바스크립트.
HTML에 자바스크립트를 연결해줘야하는데, css와 마찬가지로 별도 파일을 만들거나 or 그 요소안에 직접 넣거나 해서 동작을 제어한다.
document 내장객체. 이미 갖고있는 객체이다.
이제 세미클론을 안찍어도 된다.
<html문서>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Java script</title>
<!-- 브라우저가 interprete(통역)해서 실행하는 프로그래밍 코드 작성 -->
<!-- 1. 내부스크립트 - HTML안에 스크립트를 작성 -->
<script>
// 이 스크립트 영역 안에서는 java script 문법 체계를 따른다.
// HTML에서 body안에 했던 모든 작업을 스크립트로 처리하는게 가능.
//화면에 출력 . document는 내장객체
document.write("Hello world");
// 자동 줄바꿈되지 않음
document.write("안녕");
//자바 스크립트와 자바의 차이점
//자바스크립트는 한문자와 문자열의 구분이 없다.
document.write('자동 줄바꿈안됨.. <br>태그를 써야한다.');
//HTML의 태그문을 직접 작성할수도 있다.
document.write('<hr>');
//앵커 요소에 반드시 속성이있어야 앵커가 적용된다.
//겉이 작은 따옴표니까 안에는 큰 따옴표로 적는다. 둘다 같은 따옴표면 에러
document.write('<a href="">google</a>')
document.write('<hr>');
//JS는 프로그래밍 언어이기에..
//변수, 객체, 연산자, 제어문 등이 가능함
var a=10;
document.write(a+"<br>");
//br태그를 이렇게 결합으로 사용가능하다.
//객체 toString 자동발동
var b=new Date();
document.write(b);
//이벤트에 의해 자동 발동하는 함수 만들기 aaa()
function aaa(){
//alert('clicked button')
//이렇게 하면 기존 글씨를 날려버린다. 이어붙이기 해주는 녀석이 아님.
//화면을 다시 그리기때문에 주의해서 써야한다.
//body영역이 모두 그려진후에 document.write()하면 화면이 새로 갱신됨.
document.write('clicked button');
}
//js가 버전업이 되면서 문자의 끝을 나타내는 ;은 생략해도됨
document.write('<hr>')
document.write('안녕하세요.')
</script>
<!-- 2. 외부 스크립트 연결 : 만든 파일에서 가져온다 css는 link를 쓰고 자바스크립트는 script로 쓴다-->
<script src="./01_ex.js"></script>
</head>
<body>
<!-- JS와 함께 HTMl 요소가 존재해도 됨 -->
<h2>Hello Java Script</h2>
<!-- JS의 존재 이유는 요소의 이벤트 처리 -->
<!-- 요소 안에다가 함수를 썼으므로 인라인 스크립트이다. -->
<button onclick="aaa()">버튼</button>
</body>
</html><자바스크립트>
var s="Hello"
document.write('s:'+s);
변수
첫글자가 다 소문자이다.
정수와 더블형, 플롯형의 구분이 없다. number로 통일한다.
문자 타입이 없고 다 String이다.
자료형 내용
| 1 | 수치형 : number | 정수, 실수 |
| 2 | 문자형 : string | 한문자, 문자열 - ‘ ’ , “ ” |
| 3 | 논리형 : boolean | true , false |
| 4 | 객체형 : object | 내장, 함수, new |
| 5 | undefined | 값이 없는 변수 |
<script>
//자료형의 종류 5개
//변수만들기
var a; //이때까지는 undefined자료형
a=10;
document.write(a+"<br>");
document.write(typeof(a)+"<br>");
var b; //이때까지는 undefined자료형
b="hello";
document.write(b+"<br>");
document.write(typeof(b)+"<br>");
var d = new Date()// 자바스크립트에서는 객체라고하지 않고 생성자함수라한다.
document.write(d+"<br>")
document.write(typeof(d)+"<br>")
var e;
document.write(e+"<br>")
document.write(typeof(e))
</script>
다 소문자로 나오는게 특징이다! typeof가 소문자로 나온다.
객체의 자료형은 object로 나온다.
<script>
var f= 10;
document.write(f+" - "+typeof(f)+"<br>")
f="kim"
document.write(f+" - "+typeof(f)+"<br>")
</script>
이렇게 변수의 자료형을 바꿀수있으므로 사용에 주의해야한다.
<자바스크립트의 변수>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js variable</title>
<script>
//자료형의 종류 5개
//변수만들기
var a; //이때까지는 undefined자료형
a=10;
document.write(a+"<br>");
document.write(typeof(a)+"<br>");
var b; //이때까지는 undefined자료형
b="hello";
document.write(b+"<br>");
document.write(typeof(b)+"<br>");
var d = new Date()// 자바스크립트에서는 객체라고하지 않고 생성자함수라한다.
document.write(d+"<br>")
document.write(typeof(d)+"<br>")
var e;
document.write(e+"<br>")
document.write(typeof(e))
document.write("<hr>")
//JS는 동적 타이핑(자료형) 언어이기에 변수에 값이 대입될때 자료형이 결정됨
//그렇기에 변수의 자료형 변경도 가능함
var f= 10;
document.write(f+" - "+typeof(f)+"<br>")
f="kim"
document.write(f+" - "+typeof(f)+"<br>")
//JS는 함수형 언어이기에 함수를 객체처럼 변수에 대입할 수도 있음.
var h=function(){
document.write("hhhh....<br>")
}; //익명함수
document.write(h); //변수의 값.. 즉 함수코드가 출력됨
document.write(typeof(h)) //자료형은 function
//함수를 가지는 변수의 이름을 함수명으로 호출할 수 있음. = 익명함수
h(); //변수이지만 함수 호출하듯이 쓸수있다.
//문자열은 String 객체로 자동 wrapping 되기에 객체처럼 사용가능함.
//기본형 자료형 : 데이터를 갖고있음
//참조형 자료형 : 참조하는 주소를 갖고있음.
var s = "Hello"; //얘는 기본자료형이지만 wrapping되기 때문에 s.찍으면 안에 쓸수있는 기능이 쭉 나온다
document.write(s.length);
document.write(s.charAt(1));
document.write(s.toUpperCase());
document.write("<br>")
document.write("<hr>")
//변수 사용할때 특이한 점
//같은 변수를 또 만들어도 에러 아님 . 그냥 var 키워드가 무시함.
var a=10;
var a;
document.write(a);
var a=20 //스크립트 입장에서는 var 키워드를 무시하고 값 새로 대입으로 인식한다.
//변수를 새로 만드는 느낌이 아님! 제일최악인 상태는 변수를 중복해서 쓰는것!
//처음에 쓴 변수가 날아가버린다.
document.write(a)
//수치형 변수값 표현법
var b=3.14;
document.write(b)
document.write("<br>")
b=123.5e3; //e는 지수함수를 뜻함. 10의 3승을 뜻한다.
document.write(b+'<br>')
b=123.5e-3;
document.write(b)
document.write("<hr>")
//연산자는 특별하게 다른 점은 없음.
//비교 연산의 특이한 점
var c=1 //number타입
var d="1" //string
var e=1.0 //number타입
//==비교연산자 : 자료형은 구분하지 않고 비교
document.write(c==d) //true이다. 원래 다른언어 였으면 false임
document.write("<br>")
document.write(c==e) //true이다. 원래 다른언어 였으면 false임
document.write("<br>")
// === 비교연산자 : 자료형과 값 모두 비교
document.write(c===d)
document.write("<br>")
document.write(c===e)
document.write("<br>")
document.write("<hr>")
//0 나눗셈 - 에러 아니고 무한대
document.write(10/0);
document.write("<br>")
document.write("<hr>")
//비트 연산자 중에서 >>> (시프트연산자 밀어버린다. 부호 비트까지 포함하여 시프트 )
//양수값일때는 >>와 차이가 없음
var f=10;
document.write(f>>2)
document.write("<br>")
document.write(f>>>2)
document.write("<br>")
//음수일때 부호비트 1까지도 밀어버리기에
//부호비트 자리가 0으로 바뀌어 양수가 되버린다.
var f=-16;
document.write(f>>2) //부호는 안바꾸니까 음수유지
document.write("<br>")
document.write(f>>>2) //부호까지밀리니까 숫자가 완전히 달라진다. 음수->양수로 바뀐다.
document.write("<br>")
document.write("<hr>")
//표현가능한 수치값 확인
document.write(Number.MAX_VALUE)
document.write("<br>") //e+308는 2의 1024승
// 1.7976931348623157e+308 가 최대 수치값이다.
document.write(Number.MIN_VALUE)
document.write("<br>") //최소 수치값 5e-324
//in, delete, instanceof(어떤 객체가 이 자료형이 맞아요?라는걸 알려주는 연산자)라는 연산자도 있음 (객체 수업시간에 소개)
document.write("<hr>")
//수치형 <--> 문자형의 변환이 왜 필요할까?
//GUI에서는 모든 사용자 입출력이 문자형이기에 ...
var age = prompt("input your age", "0");//사용자 입력을 받아주는 다이얼로그
document.write(age+3) //age를 문자열로 인식하기에 결합연산되어버림
document.write("<br>")
age=parseInt(age)
document.write(age+3)
</script>
</head>
<body>
</body>
</html>
요소 컨트롤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Element control</title>
<!-- 가급적 스크립트는 헤드영역에다가 만든다 -->
<script>
function aaa(){
//두수를 입력하는 입력요소 찾아오기
var e1 = document.getElementsById("in1"); //edittext 참조변수 만들기
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.getElementsById("aa");
e.style.backgroundColor="yellow"
e.style.changeColor="red"
e.style.border="1px solid blue"
}
</script>
</head>
<!-- //다이얼로그로 사용자 입력받으려니 짜증
//HTML 입력 요소를 이용하여 사용자 입력 받기
//JS로 HTML 요소를 직접 제어해보기 -->
<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 backgroun color</button>
<hr>
<!-- 이미지 변경하기 -->
<img src="./ms20.png" alt="ms20" width="30%">
<button onclick="changeImage()">change image</button>
<script>
function changeImage(){
var es= document.getElementsByTagName("img"); // 배열로 찾아서 리턴해줌
es[0].src= "./ms21.png";
}
</script>
<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><td>' + i +'</td></tr>');
}
</script>
</table>
</html>
배열
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 배열</title>
<script>
//배열의 두가지 생성 방법
//1. 리터럴 배열
var aaa = [10,20,30];
document.write(aaa[0]+"<br>");
document.write(aaa[1]+"<br>");
document.write(aaa[2]+"<br>");
//배열의 이름을 출력하면
//배열의 toString이 발동
document.write(aaa+"<br>"); //10,20,30
//JS는 동적 타이핑 언어여서 배열 요소의 자료형이 달라도 됨
var bbb=[10,"aaa",true];
document.write(bbb+"<br>");
//배열 요소의 인덱스 번호가 틀리면? undefined
document.write(bbb[3]+"<br>"); //undefined
//배열의 길이가 동적으로 변경될 수 있음
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 객체로 배열 생성
//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 index in ccc){ //배열의 인덱스 번호가 자동 증가
document.write( ccc[index] +"<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]+",");
document.write("<br>");
//연관배열 - 배열요소 식별값을 인덱스번호가 아닌 문자열로지정
var eee= new Array(); //여기까지는 0개짜리 배열
eee['aa'] = 10;
eee['bb'] = 20;
eee['cc'] = 30;
document.write(eee['aa']);
document.write(eee['bb']);
document.write(eee['cc']);
document.write("<br>");
//리터럴 배열도 가능함
var fff=[]; //빈 리터럴
fff['id'] = "abcd";
fff['pw'] = "1234";
//document.write(fff+"<br>")
document.write(fff['id'+"<br>"]);
document.write(fff['id'+"<br>"]);
//요소값을 지정하면서 연관 배열생성도 가능
var ggg = {'aa':10,'bb':20}; //json과 아주 비슷함 자바스크립트오브젝트
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>
<!-- name은 서버로 날아갈때 확인하는 식별자 -->
<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 //한 화면 안에 폼요소가 여러개 있을 수도 있다.
//<input type="text" name="in1">이거말하는거임
document.forms['mm'][1].value=20
document.forms['mm']['in3'].value=30 //이렇게 찾으면 식별성이 높아짐.
document.mm['in1'].value="aaa" //in1의 밸류값을 aaa로 바꿔보자
document.mm.in2.value = "bbb"
</script>
<!-- 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>");
//반복문으로 해보기
for (var i=0; i<arr.length; i++){
//크게 3번 돈다
for(var k=0; k<arr[i].length; k++){
document.write(arr[i][k]+",");
}
document.write("<br>");
}
</script>
</body>
</html>함수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트 함수</title>
<script>
//함수선언 및 호출 [선언적 함수라고 부름]
function aaa(){
document.write("aaa"+"<br>");
}
//스크립트 안에서 호출한다.
aaa();
//특이한 점 . 함수선언과 호출의 순서가 크게 영향받지 않음.
bbb(); //이런 함수를 안만들면 에러! 인터프리터언어라서 번역안되면 에러 그 다음에 쓴 영역은 안나온다
function bbb(){
document.write('bbb<br>');
//이 스크립트안에 선언적 코드가 있는지 보고 판단함
//JS는 코드를실행하기전에 스크립트안에 있는 선언적 함수부터 모두 읽어들임.
}
</script>
<!-- /////////////////////////////////////////////////////////////// -->
<!-- 또 다른 스크립트 중괄호가 쳐져있는건아니다. -->
<script>
//위 스크립트에서 만든 함수를 호출 할 수 있음.
bbb();
function ccc(){
document.write('ccc<br>');
}
ccc();
</script>
<script>
// 파라미터가 있는 함수
//위에서 에러가 있든 없든 실행된다.
document.write('<hr>');
document.write('<h4>파라미터 전달</h4>');
function ddd(a){ //동적 타입이다. 자료형은 상관없다.
document.write("ddd : "+a );
document.write("<br>");
}
ddd("하잉");
ddd(10);
ddd(new Date()); //객체를 통으로 전달하는것도 가능하다 값이 toString되서 나온다.
ddd();
//매개변수 여러개
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); // 5+undefined의 결과--> NaN : Not a Number
//이러면 안되지만.. 혹시 똑같은 함수를 또 선언하면 ??? 에러일까요??????????
function ddd(a){
document.write("새로 만든 ddd()함수 <br>")
}
ddd(10); //원래 있던 ddd도 덮어써진다. - 덮어쓰기 ..
//하나의 스크립트안에 선언적 함수가 먼저 읽어진다.
//함수(function)를 먼저 읽고 ddd()를 인식한다.
// 함수의 오버로딩 [함수 이름은 같고 매개변수는 다른 함수]
function ddd(a,b){
document.write("함수 오버로딩을 희망...<br>");
}
ddd(5,3); //자바 스크립트는 오버로딩이라는 개념이 없다. 선언적 함수를 먼저 읽어서
//마지막 함수만 인식한다. 바꿔치기한거로 인식됨.
</script>
<!-- 리턴 -->
<script>
//하나의 스크립트안에 선언적 함수가 먼저 읽어진다.
//함수(function)를 먼저 읽고 ddd()를 인식한다.
document.write("<hr>");
document.write("<h4>함수의 리턴</h4>");
function ggg(){ //리턴타입을 명시하지 않는다. 동적 타이핑이니까 자료형을 명시하지 않아도 된다.
//return 10;
//return new Date(); //객체 리턴도 가능하다.
return [10,20,30];
//여러개의 값을 리턴할 수 는 없다.
//return 50, "aaa" 이런건 안된다. 리턴값은 1개이다.
}
var g = ggg(); //리턴값은 대입연산자로 받는다.
document.write(g);
</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 키워드 없이 변수 사용
c=1000; //이렇게 전역변수를 만들수도 있다. var을 사용하지 않으면 전역변수가 된다.
document.write("C : "+c+"<br>");
}
mmm();
//함수밖에서 써보면 안나온다.
//document.write("함수 밖: "+a+"<br>"); 에러
document.write("함수 밖: "+b+"<br>");
document.write("함수 밖: "+c+"<br>");
</script>
<!-- 익명함수 : 이름없는 함수 -->
<script>
document.write("<hr>");
document.write("<h4>익명함수</h4>");
//익명함수는 반드시 변수를 만들어서 선언해야함
//이름이 없는 함수이지만 변수를 만들어서 선언해야지
var show = function(){
document.write('익명함수<br>');
}
//변수의 이름을 함수 호출에 사용함.
show();
show();
//변수에 함수를 대입하였기에.. 다른 변수에도 저장시킬수있다.
var out = show;
out();
//즉 함수를 값처럼 다른변수에 전달 할 수 있음.
//이렇다는 것은 함수를 다른 함수의 매개변수나 리턴값으로 사용할 수 있다는 뜻임.
function kkk(g){
//전달받은 함수를 g라는 매개변수명으로 호출가능
g();
}
kkk(show);
kkk(function(){
document.write("내가만든 익명함수")
})
//익명함수를 매개변수로 전달하는 사례..
//이벤트 처리용함수
function setOnClickEvent(g){
g();
}
setOnClickEvent(function(){
document.write("1번클릭<br>")
})
setOnClickEvent(function(){
document.write("2번클릭<br>")
})
//당연히 리턴에도 사용가능
function hhh(){
var ppp = function(){
document.write("ppp<br>");
}
return ppp;
}
var sss = hhh()
sss();
hhh()(); //sss()와 같은말이다
//하지만 익명함수는 코드 실행보다 먼저 읽어지지 않음.
// xxx();
// var xxx= function(){ //이런 선언적 함수가 아니다. 대입연산자이다. 헷갈린다.
// }
//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>
</body>
</html>
얼럿
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>얼럿창</title>
<script>
//다이얼로그 세종류
//1. 일반 경고창 - 확인버튼 1개짜리
alert("경고입"); //동기식
//2. 사용자에게 확인/취소를 선택하게 하는 다이얼로그
var anwser=confirm('종료하시겠습니까?');
document.write(" 선택결과 : " + anwser+ "<br>");
//3. 사용자의 글씨입력 - 리턴은 무조건 string으로 받는다.
//null의 자료형은 object이다. 빈글씨가 아니다(undefined가 아니다 헷갈리기쉽다. )
var age = prompt("당신의 나이를 입력하세요.","0");
document.write(age+"<br>");
document.write(typeof(age)+"<br>");
document.write("<br>다이얼로그...<br>");
</script>
</head>
<body>
</body>
</html>
728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| JavaScript DOM과 이벤트처리, 유효성 검증 (0) | 2023.05.10 |
|---|---|
| JavaScript Object (0) | 2023.05.09 |
| CSS3 부트스트랩 (0) | 2023.05.04 |
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
| CSS 레이아웃2 (0) | 2023.05.03 |
