JavaScript 기본동작
(1) 역사
네스케이프사가 사이트의 처리능력을 높이기 위해 개발한 스크립트 언어
처음엔 Live Script라고 발표되었다가 선마이크로시스템의 자바의 기능을 결합
자바스크립드라 부르게 되었다.
- 스크립트란?
컴파일되지 않고 Application이 실행되는 동안 Line 단위로 해석되는 명령어나 문장들의 집합
(2) 특징
- 브라우저 안에서만 쓰이는 언어
- Html태그로는 부족한 동적인 효과를 내준다.
- Html태그에 쓰이는 명령어를 다시 응용해서 사용하게 된다.
(3) 자바와 자바스크립트의 차이
-
자바스크립트 : 넷스케이프에서 제작. 특별한 개발환경이 없다.
Client-side-script(클라이언트인 브라우저에서 소스 자체가 해석된다.)
객체기반(Based)언어. 단 클래스를 지원하지 않는다.
자료형을 따로 선언할 필요가 없다.
동적Binding, 실행 시 객체 참조가 체크 된다. -
자바 : 선마이크로시스템에서 제작. Visual J++이나 Visual Cafe, Latte의 개발환경
Server-side-script(서버에서 먼저 컴파일되고 그 코드를 클라이언트에서 해석한다.)
객체지향(Orented)언어. 자바애플릿은 클래스의 상속을 지원한다.
자료형을 반드시 선언해야 한다.
정적Binding. 컴파일 시 객체참조가 체크 된다.
(4) 기본구조
<script type="text/javascript"> ----> 스크립트의 종류 표기
소스코드
</script>(5) 주석문 : 프로그램 실행에는 아무런 영향을 미치지 않는다.
// --------------> 한 줄 주석
/* */ --------------> 두 줄 이상의 주석 : debuging의 용도로도 쓰임
(6) HTML문서내에서의 위치
가급적 ... 사이에 위치하는 것이 좋다
그러나, 페이지내 다른 객체와 어울려 작동 시 또는 HEAD에서는 작동하지 않는 경우
BODY의 어떤 곳에도 사용 가능 (body 마지막 부분에)
(7) 스크립트문 작성 시 주의점
- 대소문자를 구분한다.
- 한 line (실행단위)을 끝내려면 ;(세미콜론)으로 닫아준다.
----> 요즘은 ;없이도 enter로 line구분이 가능하게 되었다. - 한 줄에 2문장을 기술할 때는 ;를 생략할 수 없다.
html 결과 출력
HTML 페이지의 태그 안을 document(문서)라고 부른다.
-
안에 새로운 내용을 출력
Document document;
document.write("출력할 내용");
- 태그 안에 출력되는 내용이므로, 다른 HTML 태그를 포함하여 출력할 수 있다.
변수
- 변수의 자료형은 값이 할당될 때 자동으로 결정된다.
- var({}벗어나도 값 바뀜), let({}벗어나면 값 안바뀜), const(맨처음 지정된 값)으로 선언
- 값이 변하고, 메모리 일정한 영역을 할당하여 데이터를 저장
선언 :
var a;
var b;
할당 :
a = 10;
b = 43.5;
Math.ceil() : 소수점 올림, 정수 반환
Math.floor() : 소수점 버림, 정수 반환
Math.round() : 소수점 반올림, 정수 반환
toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환
parseInt() : 문자 -> 정수 "123" -> 123
parseFloat() : 문자 -> 실수 "45.3" -> 45.3
Number() : 문자 -> 정수&실수
함수()
- 어떤 기능을 구현해놓은 명령어들의 집합
- 함수의 사용방법은 "정의"와 "호출"의 두 부분으로 나뉜다.
- 호출한 함수는 반드시 호출한 곳으로 되돌아온다.
(1) 정의
function 함수이름() {
명령문;
}
(2) 호출
함수이름();
내장함수
- eval(문자열) : 문자열을 수식으로 변환
- Number(문자열) : 문자열을 숫자로 변환
- parseInt(문자열) : 문자열을 정수로 변환
- isNaN(문자열) : 문자열이 숫자형식이 아니면 true, 숫자형식이면 false -> Not-A-Number(숫자가 아님)
- alert(문자열) : 문자열을 대화상자로 출력
- confirm(문자열) : 문자열을 확인/취소 대화상자로 출력
- prompt(문자열) : 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화상자 호출
이벤트 처리
- 특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것.
- Javascript를 사용하는 이유는 body 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위함이다.
(1) 이벤트 종류
1. onBlur - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때
2. onClick - 링크, 이미지맵 영역, 폼 요소가 클릭되었을 때
3. onFocus - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때
4. onLoad - 이미지, 문서, 프레임이 로드될 때
5. onMouseOver - 태그의 요소 위로 마우스 커서가 들어갈 때
6. onMouseOut - 태그의 요소 위에서 마우스 커서가 빠져나갈 때
(2) 제어대상 지정
-
태그의 id로 제어할 특정 태그를 지정한다.
document.getElementById("아이디") 로 자바스크립트로 태그를 가져온다. //id = "아이디"값 속성을 가진 태그를 가져와라<body> <h1>10 + 50 = <span id="question">?</span></h1> <input type="button" value="결과보기" onclick="printResult()"> --버튼 누르면 javascript에서 printResult를 호출 <script> function sum(a,b){ return a + b; } function printResult(){ var result = sum(10,50); //span 태그 얻어오기 var myTag = document.getElementById("question"); //alert(myTag); alert(myTag.tagName); myTag.innerText = result; } </script> </body>class 속성 elements얻어 올때는
1) getElementsByClassName()-
HTMLCollection 타입
2) qurySecletor()
-
1개 클래쓰
-파라미터로 CSS 선택자를 넣어줌var myTags = document.querySelector(".myid"); -- . 붙여서 선택자 필수3) qurySecletorAll()
-
여러 클래쓰
-파라미터로 CSS 선택자를 넣어줌 -
NodeList 타입
-
객체
- 변수와 함수의 집합
- Javascript는 Prototype 기반의 객체지향언어이다.
객체를 원형(prototype) 형태로 생성하고, 그 안에 기능을 위한 변수나 함수를 추가하는 방법으로 그룹화 하는 개념객체는 자주 사용하게 될 기능들을 묶어서 외부의 스크립트 파일로 분리해 내는 용도로 주로 사용한다.
이렇게 만든 스크립트 파일은 여러개의 HTML파일에 의해서 참조하여 재사용할 수 있다.
배열
// var myArray1 = ["홍길동", "자바스크립트", "학생"];
var myArray1 = new Array("홍길동", "자바스크립트", "학생")
//자바처럼 {}아님
//빈 배열
// var myArray2 = [];
var myArray2 = new Array();setInterval(printTime,1000) 자주 이용할수도..!
<body onload="startTime()">
<h1 id = "timer">현재시간</h1>
<script>
function startTime(){
//printTime()
setInterval(printTime,1000)
}
function printTime(){
var days = ["일","월","화","수","목","금","토"];
var today = new Date();
var yy = today.getFullYear();
var mm = today.getMonth() + 1;
var dd = today.getDate();
var i = today.getDay();
var day = days[i];
var hh = today.getHours();
var mi = today.getMinutes();
var ss = today.getSeconds();
var result = yy + "-" + mm + "-" + dd + " " + day + "요일" + hh + ":" + mi + ":" + ss;
document.getElementById("timer").innerHTML = result;
}
</script>
</body>window open (팝업창)
1번 - a태그에서 onclick 이 있을 경우에는 onclick를 먼저 수행하고 href로 이동하는 액션을 취한다.
TEST1
2번 - onclick에서 return false가 있을 경우 href로 이동하는 액션을 취하지 않게 된다.
TEST2
3번 - a태그에서 onclick 이 있을 경우에는 onclick를 먼저 수행하고 href로 이동하는 액션을 취하는데
href="#"로 호출 함수를 숨겨버렸기 때문에 페이지가 이동하지 않게 된다.
갈 곳을 잃어버린 브라우저는 페이지의 상단으로 이동해버린다.
TEST1
//function만 요약
<script>
function open1(){
window.open("open.html");
}
function open2(){
//클릭할때마다 새로운 팝업창 열림
window.open("open.html",
"",
"width = 300, height = 500, scrollbars=no, toolbar = no, menubar = no, status = no, location = no")
}
function open3(url){
//한번 생성된 팝업창을 재사용
window.open(url,
"myWindow",
"width = 300, height = 500, scrollbars=no, toolbar = no, menubar = no, status = no, location = no")
}
</script>인증키 받는거 (사용할 가능성 높음)
<body onload="autoNo()">
<p>
고객님의 인증번호는 <strong id="auth">0000</strong>입니다.
</p>
<input type="button" value="인증번호 새로 받기" onclick="refresh()"/>
<input type="button" value="네이버로 이동하기" onclick="goNaver()"/>
<script>
function random(x,y){
return Math.floor(Math.random() * (y-x+1) + x); //난수 만드는 함수
}
function autoNo(){
var value = "";
for(i = 0; i <=5; i++){
value += random(0,9);
}
document.getElementById("auth").innerHTML = value;
}
function refresh(){
// autoNo(); 이거말고 새로고침처럼 현재의 리소스를 다시 부르는거 하고싶을땐
location.reload();
}
function goNaver(){
if(confirm("정말로 네이버로 가겠습니까")){
location.href="https://www.naver.com";
}
}
</script>
</body>history.forward()
- 브라우저가 세션에 저장된 앞 페이지로 이동시켜준다
- 다음 페이지가 없으면 아무것도 하지 않는다.
- history.back(), history.go(-1)
<a href="#" onclick="hostory.back(); return false;">앞 페이지로 이동</a>JSP와 연계(예시코드)
function checkWrite(){
document.getElementById("nameDiv").innerHTML = "" //초기화
document.getElementById("idDiv").innerHTML = "" //초기화
document.getElementById("pwdDiv").innerHTML = "" //초기화
if(document.inputform.name.value=="")
//document.getElementById("name").value=="" 이렇게도 가능
document.getElementById("nameDiv").innerHTML = "이름 입력"
else if(document.inputform.id.value=="")
document.getElementById("idDiv").innerHTML = "아이디 입력"
else if(document.inputform.pwd.value=="")
document.getElementById("pwdDiv").innerHTML = "비밀번호 입력"
else if(document.inputform.pwd.value!=document.inputform.repwd.value)
document.getElementById("repwdDiv").innerHTML = "비밀번호가 틀립니다"
else document.inputform.submit();
}
function checkWrite2(){
var email3 = document.inputform.email3.value;
var email2 = document.inputform.email2.value;
if(document.inputform.email3.value == 0)
document.getElementsByName("email2").focus;
else document.inputform.email2.value = document.inputform.email3.value
}- 아이디 중복체크
function checkId(){ var id =document.writeform.id.value if window.open("http://www.localhost:8080/projectJSP/member/checkId.jsp?id="+id, //이부분 중요 "checkId", "width = 450 height=150 left = 300 top=150")
