자바스크립트
HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정한다. 여기에 자바스크립트를 추가하여 웹 문서의 각 요소를 가져와서 스타일을 변경하거나, 움직이게 할 수 있다.
과거에 웹은 단순히 정보를 나열하고 검색했다면, 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작한다.
Node.js를 통하여 프론트엔드 개발에서 사용하던 JavaScript를 사용하여 백엔드 개발을 할 수 있게 해주는 프레임워크이다. (Node.js 중요)
자바 스크립트 소스 코드가 짧을 경우
<script>
var hedading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>와 같이 HTML문서 안에 script태그를 활용하여 사용할 수도 있다. 하지만 코드가 지저분해지기에
따로 .js 파일을 만들어 사용하는게 좋다.
외부에서 .js 파일을 제작하여 문서에 연결하는 코드는 아래와 같은 코드를 사용하여 적용시킨다.
<head>
<meta charset="UTF-8">
<title>JavaScript Use</title>
<script src="자바 스크립트의 경로"></script>
</head>alert (알림 창)
가장 많이 사용하는 간단한 대화 상자로서 웹 브라우저에서 작은 알림창을 열어 메시지를 표현한다.
""사이에 표시할 메시지를 적어 사용한다.
<script>
alert("안녕하세요.")
</script>confirm (확인 창)
알림 창은 단순히 메시지를 보여 주는 기능만 하지만 확인 창 은 사용자가 [확인]이나 [취소] 버튼중에서 직접 클릭할 수 있고, 선택한 결과에 맞게 프로그램이 동작한다.
<script>
var reply_announce = confirm("정말로 모드를 다크모드로 바꾸시겠습니까?");
</script>prompt (프롬프트 창)
프롬프트 창 은 텍스트 필드가 있는 작은 창이다. 텍스트 필드에 값을 입력할 수 있고, 그 내용을 가져와 프로그램에서 사용할 수 있다.
prompt(메시지) | prompt(메시지, 기본값)
ex) '이름을 입력하세요'라는 메시지가 출력되고 입력창이 나오는 프롬프트 창
<script>
var prompt_name = propmpt("이름을 입력하세요.");
</script>
ex) '이름을 입력하세요'라는 메시지가 출력되고 입력창에 기본값으로 '홍길동'이 입력되어 있는 프롬프트 창
<script>
var prompt_name = propmpt("이름을 입력하세요.", "홍길동");
</script>자바스크립트 소스 작성 규칙
구글이나 에어비엔비에서 배포한것을 기준으로 하고, 회사 프로젝트마다 자바스크립트 스타일 가이드가 다를 수 있다.
간단한 자바스크립트 소스 작성 규칙
- 코드를 보기 좋게 들여쓰기
- 세미콜론으로 문장을 구분
- 공백을 넣어 읽기 쉽게 작성
- 소스 코드를 잘 설명하는 주석 작성
한 줄 주석 <script> // 한줄 주석 사용시 "//" 뒤에 사용 </script> 여러 줄 주석 <script> /* 사이에 여러줄 주석을 사용한다. 주석 사이에 또 다른 주석을 넣을 수 없다.*/ </script>
- 식별자는 정해진 규칙을 지켜 작성한다.
ex) var는 변수를 선언할 때 쓰는 예약어로서 식별자 이름으로는 사용할 수 없다.
