Java Script
Java Script 는 html 에 동적 기능을 구현한다.
html로 뼈대를 구성한 이후 css를 통해 세련되게 꾸며주고, Java Script 를 통해서 웹 페이지가 동적으로 움직이게(=살아 움직일 수 있게) 만들어주는 것이다.
Java Script 는 html에도 css도 접근할 수 있다는 특징이 있다.
Java Script 특징
- HTML 문서 내의 객체(태그, 속성)를 핸들링할 수 있다.
- HTML 문서 내의 CSS 요소를 핸들링할 수 있다.
- 서버와 통신하여 얻은 respns 를 동적으로 표현해준다. (Ajax)
- 자바스크립트 객체 형태의 데이터를 서버와 주고 받을 수 있다. (Json)
- 자바스크립트를 이용한 라이브러리 들이 계속적으로 나타나고 있다. (node.js, jQuery, Electron..)
적용 방법
1) html 문서 내에 따로 설정 - 웹이 시작하자마자 필요한 요소가 아니면 body 하위에 실행
- head, body 밑에 작성해준다.
- Java Script 는 눈에 보이지 않기 때문에 웹 페이지가 모습을 드러낸 후에 실행한다.
(head에서 실행하면 로딩 시간이 오래걸린다.)
2) js 파일 외부에서 불러온다.
<script src="파일명.js"></script>
변수
변수란 무언가를 담는 컵의 역할을 한다.
Java를 사용해 봤다면 변수에는 변수 이름과 데이터 타입(int, double..)을 선언했을 것이다.
하지만 Java Script 는 데이터 타입이 존재하지 않기 때문에 변수와 변수명만 선언해주면 된다.
var 변수명;
이렇게 만든 변수에는 다양한 타입의 데이터가 들어갈 수 있다.
var a = 123; // int
var b = 3.14; // float
var c = '문자열' // String
var d = false; // boolean우리가 데이터타입을 선언하는 이유는 크기가 정해진 컵에 내가 넣고 싶은 양에 따라서 컵의 크기를 선택하는 과정인데,
Java Script는 데이터 타입이 없기 때문에 매우 큰 바구니에 모든 데이터를 다 넣어버리는 것이다.
그렇기 때문에 효율은 떨어지게 되지만 사용자 입장에서는 아주 편하게 사용할 수 있다.
또한, 위에 코드를 보면 알 수 있듯이 숫자는 그냥 사용하고, 문자열을 '' 싱글쿼터로 감싸서 사용해준다.
console
입력한 값을 볼 수 있도록 해주는 기능이다.
java의 System.out.println 과 같은 기능
사용 방법은 consloe.log() 를 작성해주면 된다.
이후 웹 페이지를 실행해 개발자모드(F12) 를 눌러 console 을 열어주면 실행한 값의 결과를 확인할 수 있다.
문자열을 출력할 때 console 에서 + 를 사용해주면 문자열 형태로 보여주게 되고,
, 를 사용해주면 값 고유의 형태를 보여주게 된다.
*파란색으로 보여주면 문자가 아니라 순수데이터 타입이다.
이러한 console은 디버깅(문제가 있나 없나 확인할 때) 을 위해 주로 사용한다.
함수
Java Script 에서는 함수를 만들 수 있다.
여기에서 사용되는 함수는 만들고 수정해서 재사용하는 orverride 것이 불가능 하기 때문에 만들어진 그대로 사용해야 한다.
함수는 리턴타입과 매개변수 여부에 따라 4가지로 나눌 수 있다.
return 문이 있는지 없는지에 따라 반환타입이 있냐 없냐를 판단할 수 있다.
// 반환 o , 매개변수 o
function 토스트기(빵){
return '구운' + 빵;
}
// 반환 o , 매개변수 x
function 번호표기기(){
return '번호표';
}
// 반환 x , 매개변수 o
function 저금통(돈){
console.log(금액 + ' 저금하다.');
}
// 반환 x , 매개변수 x
function 호출벨(){
console.log('호출!!!');
}