JavaScript
web document 행위를 담당한다.
자바스크립트는 ECMAScript 표준을 준수하는 스크립트 언어이다.
(ECMA 인터내셔널 : 정보 통신 표준을 제정하는 표준화 기구)
ES5 (ECMA5, 2009) : 변수 선언 var -> 중복 선언 가능, Function-level scope
ES6 (ECMA6, 2015) : 변수 선언 let -> 중복 선언 불가, Block-level scope
const 상수, arrow function (화살표 함수) 등이 새롭게 추가되었다.
변수 예제1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 변수 var, let</title>
</head>
<body>
<script type="text/javascript">
//ECMA5 변수선언 var을 이용
var a=1;
var a=2; //중복 선언이 가능
alert(a);
//ECMA6 변수선언 let을 이용 -> 중복 선언 불가
let b=1;
//let b=2; let은 중복 선언이 불가
b=3; //재할당은 가능
alert(b);
//ECMA6 상수 const 활용
const c = 1;
c=2; //const 상수이므로 재할당 불가
alert(c);
</script>
</body>
</html>함수 예제1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step3-function</title>
</head>
<body>
javascript function 함수 테스트
<br>
<button type="button" onclick="hello()">버튼</button>
<button type="button" onclick="bye(2)">버튼2</button>
<button type="button" onclick="test('아이유')">버튼3</button>
<button type="button" onclick="paramTest('개죽이',3)">버튼4</button>
<script type="text/javascript">
function hello() {
alert("점심시간");
}
function bye(count) {
alert(count);
}
function test(name) {
alert(name);
}
function paramTest(nick, num){
alert(nick + " " + num);
}
</script>
</body>
</html>button을 만들어 클릭했을때 해당되는 함수를 실행하도록 구현했다.
각 버튼을 누를 때 alert 창의 내부가 뜬다.
함수에 다양한 데이터 타입의 매개변수를 전달하고 출력할 수 있다.
변수 + 함수 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript variable : var 와 let</title>
</head>
<body>
ES5 : var 중복선언가능 function level scope <br>
ES6 : let 중복선언불가 block level scope, 상수 const 등이 추가 <br>
<button type="button" onclick="varTest(7)">var 버튼1</button>
<button type="button" onclick="letTest(7)">let 버튼2</button>
<script type="text/javascript">
function varTest(num){
if (num>1){
var a = 1;
}
alert(a); //if문 내에 선언된 var a 변수 사용 가능 => function level scope
}
function letTest(num){
if (num>1){
let b = 1;
}
alert(b);//if문 내에 선언된 let b 변수 사용 불가 => block level scope
}
</script>
</body>
</html>함수를 통해서 var와 let의 차이를 알 수 있다.
매개변수로 값을 받아와 조건에 맞으면 내부를 처리해 alert창내에 뜰 수 있도록 했다.
varTest() 메소드 실행시 조건문이 true로 a라는 변수에 1를 할당해 alert창에 1을 띄울 수 있다.
var는 function level scope으로 if문 내에 선언된 var a 변수를 사용 가능하다.
letTest() 메소드 실행시 조건문 내부가 실행되지만 alert 창은 뜨지않는다.let은 block lever scope으로 조건문을 벗어나면 b가 정의되지 않은 입장이기 때문이다.
외부 자바스크립트 파일 이용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>별도의 javascript 파일의 기능을 이용하기</title>
<script type="text/javascript" src="script/home.js"></script>
</head>
<body onload="hello()">
외부 자바스크립트 파일 이용하기
<button type="button" onclick="bye()">src test</button>
</body>
</html>별도의 javascript 파일을 생성해 이용할 수 있다.
script/home.js파일을 만들고 실행시키면 home.js에 선언된 hello() 메소드가 실행된다.
alert창이 닫히고 생성한 버튼을 누르면 bye() 메소드가 실행된다.
function hello(){
alert("hello javascript");
}
function bye(){
alert("bye javascript");
}내장함수 테스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript confirm</title>
</head>
<body>
<button type="button" onclick="confirmTest()">내장함수테스트</button>
<script type="text/javascript">
function confirmTest(){
let result = window.confirm("막국수 좋아하세요?");
//alert(result);
if(result){
alert("우리 결혼해요")
location.href="http://www.pororopark.com/";
}else{
alert("헤어져요")
}
}</script>
</body>
</html>
하나의 버튼을 생성하고 click시 confirmTest() 메소드가 실행된다.
window.confirm() 이라는 내장함수를 이용해서 결과값을 true, false로 받을 수 있다. 이 때 window는 생략 가능해 confirm()으로 쓸 수 있다.
if(result){
alert("우리 결혼해요")
location.href="http://www.pororopark.com/";
}else{
alert("헤어져요")
}
}result가 true이면 alert창이 뜨고 location.href() 내장함수로 작성해놓은 링크로 연결되도록 한다.
