Keep going
자바 스크립트 개요 본문
13-1 자바 스크립트로 무엇을 할까
- 웹의 요소를 제어한다.
- HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정했다. 여기에 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.
- 웹 애플리케이션을 만든다.
- 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작한다. (길 찾기 서비스, 데이터 시각화 라이브러리 등)
- 다양한 라이브러리를 사용할 수 있다.
- 서버에서 했던 일을 클라이언트에서도 할 수 있다.
- 웹 애플리케이션을 개발할 때 사용하는 리액트, 앵귤러, 뷰와 같은 프레임워크와 그래픽 활용을 위한 D3.js나 DOM을 쉽게 조작할 수 잇게 해주는 제이쿼리 같은 라이브러도 있다. 이 밖에도 다양한 자바 스크립트 라이브러리가 계속 등장하고 있어 웹 개발을 도와준다.
- 서버 개발을 할 수 있다.
- Node.js는 자바스크립트를 백엔드 개발에서 사용할 수 있도록 만든 프레임워크다.
13-2 웹 브라우저가 자바스크립트를 만났을 때
- 웹 문서 안에 <script> 태그로 자바스크립트 작성하기
- 웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바 스크립트 소스를 작성한다.
- <script> 태그는 웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행된다.
- 자바 스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다. 그래서 </body> 태그 직전에 자바스크립트 소스를 삽입한다.
- HTML, CSS와 달리 자바스크립트에서는 영어 대소 문자를 구별 한다.
|
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
</body>
|
cs |
- 자바스크립트 소스를 HTML 문서 안에 작성할 때 단점
- HTML 태그와 자바스크립트 소스가 함께 섞여 있어 웹 문서가 복잡해 보인다.
- 웹 문서에서 같은 자바스크립트 소스를 수정해야 한다면 이 소스가 포함된 모든 웹 문서를 찾아다니며 수정해야 한다.
- 외부 스크립트 파일로 연결해서 자바 스크립트 작성하기
- 직접 자바스크립트 소스가 드러나지 않아 소스가 깔끔하다.
- 외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성. 확장자는 *.js파일로 저장
- HTML 문서에서 <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 된다.
|
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script src="js/change-color.js"></script>
</body>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
|
cs |
13-3 자바스크립트 용어와 기본 입출력 방법
- 식과 문
- 자바스크립트 언어의 큰 줄기는 식과 문이다.
- 자바스크립트에서 식은 표현식이라고도 하는데, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 된다.
- 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장된다.
- 알림 창 출력하기
- 알림창은 가장 많이 사용하는 간단한 대화 상자이다.
- 웹 브라우저에서는 작은 알림 창을 열어 메시지를 표시할 수 있다.
|
<body>
<script>
alert("안녕하세요?");
</script>
</body>
|
cs |
- 확인 창 출력하기
- 알림 창은 단순히 메시지를 보여 주는 기능을 하지만 확인 창은 사용자가 확인이나 취소 버튼 중에서 직접 클릭할 수 있다.
- 확인 창은 버튼이 2개 있는데 사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램에서 처리한다.
|
<body>
<script>
var reply = confirm("정말 배경 이미지를 바꾸겠습니까?");
</script>
</body>
|
cs |
- 프롬프트 창에서 입력 받기
- 프롬프트 창은 텍스트 필드가 있는 작은 창이다.
- 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다.
- 프롬프트 창을 만드 대는 기본값을 지정하거나 지정하지 않을 수 있다. 기본값을 지정하면 텍스트 필드 안에 기본값이 표시되고, 기본값을 지정하지 않으면 빈 텍스트 필드로 표시된다.
|
<body>
<script>
var name = prompt("이름을 입력하세요.", "아무개");
</script>
</body>
|
cs |
- 웹 브라우저 화면에 출력을 담당하는 document.write() 문
- 단순히 브라우저 화면에서 결괏값을 확인하는 용도로 많이 사용된다.
- document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결괏값이 저장된 변수를 넣을 수도 있다. 괄호 안에서 큰 따옴표나 작은 따옴표 사이에 입력한 내용은 화면에 그대로 표시된다. 따옴표 안에는 HTML 태그도 함께 사용할 수 있다.
- 웹 브라우저 화면에 표시할 내용과 변수를 섞어서 사용도 가능하다.
|
<script>
document.write("<h1>어서오세요</h1>");
</script>
|
cs |
|
<script>
var name = prompt("이름을 입력하세요.");
document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
</script>
|
cs |
- 콘솔 창에 출력하는 console.log()문
- 콘솔창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다.
- 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.
- console.log( )문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있는데 HTML 태그는 사용할 수 없다.
|
<body>
<h1>어서오세요</h1>
<script>
var name = prompt("이름을 입력하세요.");
console.log(name + "님, 환영합니다.");
</script>
</body>
|
cs |
13-4 자바스크립트 스타일 가이드
- 코드를 보기 좋게 들여쓰기 한다.
- 세미콜론으로 문장을 구분한다.
- 공백을 넣어 읽기 쉽게 작성한다.
- 소스 코드를 잘 설명하는 주석을 작성한다.
- 식별자는 정해진 규칙을 지켜 작성한다.
- 예약어는 식별자로 사용할 수 없다.
출처 : DO it HTML +CSS+ 자바스크립트 웹 표준의 정석 [이지스퍼블리싱 (고경희)]
'Web Project > Java Script' 카테고리의 다른 글
| 이벤트와 이벤트 처리기 (0) | 2021.03.17 |
|---|---|
| 함수와 변수 (0) | 2021.03.17 |
'Web Project/Java Script' Related Articles
more
Comments