자바스크립트로 뭘할까
- 웹요소 제어
- 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게할 수 있음
- 웹 사이트 UI 부분에 많이 활용
- 예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠
- 웹 애플리케이션을 만듭니다
- 최근의 웹 사이트는 사용자와 실시갂으로 정보를 주고 받으며 애플리케이션처럼 동작
- 예) 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스, 공개된 API를 활용한 다양한 서비스
- 다양한 라이브러리를 사용할 수 있습니다
- 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남
- 라이브러리와 프레임워크가 계속 등장
- 예) 시각화를 위한 d3.js, 머싞러닝을 위한 tensorflow.js
- 예) 웹 애플리케이션 개발을 위한 React, Angular, Vue 등
- 서버를 구성하고 서버용 프로그램을 만들 수 있습니다
- node.js : 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크
자바스크립트 실행구조
자바스크립트 예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function check(type,name) {
var hObj = window.document.getElementById("result")
hObj.innerHTML = "결과:type="+type+", name="+name;
hObj.style.color = 'red';
var h2Obj = window.document.getElementById("params")
for(var idx in arguments){
h2Obj.innerHTML = h2Obj.innerHTML + "," + arguments[idx];
}
return;
}
</script>
</head>
<body>
<h1 id="result">결과:</h1>
<h1 id="params"></h1>
<form>
<input type="button" value="눌러보세요~~~"
onclick="check(50, '홍길동', true);">
</form>
</body>
</html>
- 변수 설정
var로 모든 변수 선언 가능, 웹 자체가 시시각각으로 바뀌기 때문에, 유지보수할 일이 많아서 느슨하게 적용함
- fucntion
함수 형태
- getElementById
HTML 내 ID를 통해서 해당 오브젝트를 받아옴
- innerHTML
내부 INNERHTML을 변경할 수 있음
