JavaScript 개요
- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 실행해야되는 동작들 처리
1. 스크립트 언어란?
: 프로그램의 동작을 사용자(클라이언트)의 요구에 맞게 수행되도록 해주는 용도
매우 빠르게 배우고 짧은 소스코드로 상호작용되도록 고안됨
2. 자바스크립트
: 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어
- 인터프리터 방식 : 컴파일 과정 없이 실행(브라우저에 html문서에 로딩 될 때 코드를 한줄씩 읽어내가면서 바로 실행)
※ 참고
-
자바는 컴파일 방식 + 인터프리터 방식
=> 소스코드를 한번쯤 다 읽어내고 (컴파일) 나서 프로그램 실행 시 한 줄씩 읽어가면서 실행(인터프리터)
(.java => .class => 실행)
=> 코드 작성 중 코드 상에 문법적인 문제가 있다면 바로 빨간줄로 알려줌 -
자바스크립트는 인터프리터 방식
=> 실행되면서 소스 코드를 한 줄씩 한 줄씩 읽어내면서 바로 실행(실시간으로 텍스트 분석해서 실행 됨)
=> 코드 작성 중 코드 상에 문법적인 문제가 있더라도 바로 알려주지 않고 소스코드가 실행 될 때 실행 시점에 알려줌.
3. 장단점
-
장점
- 이벤트가 발생했을 때 코드를 한 줄씩 읽어가면서 수행되기 때문에 수행속도가 빠름
- 간단한 코드 작성으로 초보자가 접하기 쉬운 언어(단순한 구조, 원칙)
ex) 변수 선언시 자료형 지정할 필요 없음, 접근제한자 같은 개념 없음
-
단점
- 웹에 특화된 기술 => 내부에서 제공되는 기능이 제한적임
- html내에 소스코드를 함께 작성하면 외부에 공개됨 => 보안에 취약점이 있음
4. 자바스크립트 사용법
- inline(인라인) : 각 태그마다의 이벤트 속성을 통해 태그 내에 직접적으로 소스코드를 작성해서 실행되게 하는 방법
- internal(내부) : html문서 내에 script태그 영역에 소스코드를 작성해서 실행되게 하는 방법
- external(외부) : 별도의 .js 파일로 작성해서 가져다가 실행되게 하는 방법
1) 인라인(inline)방식
: 태그 내에 직접적으로 간단 소스코드를 작성해서 실행시킴
[표현법] <태그명 on이벤트명="해당 요소에 해당 이벤트가 발생했을 때 실행할 코드" >
<button onclick="window.alert('버튼클릭!');">알림창 출력</button>알림창 출력
2)내부(internal)방식
: script 태그 영역에 함수 단위로 소스코드를 작성해두고
어떤 요소에 어떤 이벤트 발생 시 그 함수 호출함으로써 실행시키는 방식
script 태그는 head태그, body태그 내에 다 작성 가능
<button onclick="btnClick();">알람창 출력</button>
<button id="btnConsole">콘솔창 출력</button>
<script>
// 함수(function)활용법
function btnClick(){
window.alert('버튼클릭!');
}
// 변수에 담고 활용하기
var btn = document.getElementById("btnConsole");
// 선택된 요소에 이벤트 적용
btn.onclick = function(){// 익명함수(이름이 없는 함수)
console.log("zzz");
}
</script>3)외부(external)방식
: 별도의 .js 파일로 소스코드 작성하고 현재 html문서에 연동시켜서 실행하는 방법
[HTML]
<script src = "파일위치" ></script> => 외부 js 문서 연동
<button onclick="test();">알림창 출력</button>
[JS파일]
function test(){
window.alert("외부문서 실행됨!");
}
데이터 입/출력
1. 데이터를 출력하는 기본 구문
1) (window.)alert("알람창에 출력할 문구")
: 자바스크립트 내장 객체로 브라우저 창이 열릴때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체
(즉, 모든 곳에 적용되기 때문에 생략 가능)
<script>
// 브라우저를 통해 해당 html문서가 다 로딩되고 난 직후에 곧바로 알림창 뜨게
window.onload = function(){
alert("알람창 출력!!");
};
</script>2) document.write("화면에 출력할 문구")
: 웹 문서마다 하나씩 만들어지는 객체
body 태그에 의해서 만들어짐(HTML 문서에 대한 정보를 가지고 있음)
<button onclick="documentWrite();">출력</button>
<script>
function documentWrite(){
// document.write("안녕하세요");
document.write("<b>바이바이미아모");
// 기존 HTML 내용 모두 삭제되고 이 문자열이 화면에 출력됨
// 화면에 출력할 문자열에 html태그가 존재할 경우 html태그로 해석되서 화면에 표현됨
document.wirte("<ul><li></li></ul>");
}
</script>3) (window.)console.log("콘솔창에 출력할 문구")
<button onclick="console.log(100)">출력</button>4) innerHTML | innerText
선택한요소.innerHTML | innerText = "선택한 요소에 출력할 문구";
: 자바스크립트에서 어떤 요소(element)안의 값을 가지고 온다거나 변경하고자 할 때
innerHTML, inneText라는 속성에 접근 가능
<button onclick="tagValue();">확인</button>
<script>
function tagValue(){
// 요소를 먼저 선택하기!! -> 이 후 변수만들기
var divEl = document.getElementById("area1");
// 변수 함수화 시키기
console.log(divEl);
console.dir(divEl);
// console.dir은 해당 요소객체의 디렉토리 구조 보고자 할 때(요소객체의 속성들에 대한 정보)
// innerHTML : Text + 태그도 포함
// innerText : Text만 포함
// 선택한 요소내의 속성값들을 알아내고자 한다면 속성에 직접 접근 가능(.을 통해서)
console.log(divEl.id);
console.log(divEl.className);
// 선택한 요소 안에 기술되어 있는 내용에 접근하고자 한다면
console.log(divEl.innerHTML);
console.log(divEl.innerText);
// 해당 요소의 속성에 접근해서 값을 가지고 오는 것도 가능하지만 변경하는 것도 가능함
// 클래스명 변경
divEl.className = "test";
// HTML 내용변경
divEl.innerHTML = "innerHTML로 속성값 변경함."
// Text 내용변경
divEl.innerText = "innerText로 속성값 변경함."
}
</script>2. 데이터를 입력하는 기본구문(변수 대입 가능)
1) 변수 = (window.)confirm("질문내용");
: confirm 함수 호출 시 "질문내용"과 "확인/취소" 버튼이 존재하는 알람창 발생
확인 버튼 클릭시 true, 취소버튼 클릭시 false를 반환함
<button onclick="testConfirm();">클릭</button>
<div class="area" id="area2"></div>
<script>
function testConfirm(){
var result = confirm("졸리면 확인 아니면 취소");
// result 변수에 confirm의 값(확인 또는 취소의 값)이 담긴다!
// result의 값은 true 또는 false로 담기게 된다.
console.log(result);
var divEl = document.getElementById("area2");
// id가 area2인 값을 divEl에 담겠어! (아직 area2의 값은 넣지않음.
// confirm 실행할 때 확인 또는 취소의 값을 넣게 되면 그때 area2에 값이 담기게 된다!
if(result){
divEl.innerHTML ="졸리 졸려";
} else{
divEl.innerHTML ="안졸리";
}
}
</script>
=> 클릭해서 "확인"누르면 "졸리 졸려" 출력, 클릭해서 "취소"누르면 "안졸리" 출력2) 변수 = (window.)prompt("질문내용");
: prompt 함수 호출시 "질문내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소" 버튼이 보여지는 알람창 발생
확인버튼 클릭시 텍스트 상자에 입력되어 있는 값이 반환, 취소버튼 클릭시 null이 반환
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText,...);
4) 변수 = 선택한input요소.value;
아이디 : <input type = "text" id="userId"> <br>
비밀번호 : <input type = "password" id="userPwd"> <br>
<button onclick="testInput()" name="click">클릭</button>
<script>
function testInput(){
var input1 = document.getElementById("userId");
// 여기서 가져온건 input요소의 객체이지, userId값이 아니다!
var input2 = document.getElementById("userPwd");
console.dir(input1);
// 만약 내가 입력한 값을 가져오고 싶다면? value에 담겨있음(console.dir 로 구조 확인함)
console.log(input1.value);
console.log(input2.value);
}
</script>