[JS] 13_자바스크립트와 첫 만남
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
1. 자바스크립트의 기능
1) 웹의 요소 제어
2) 웹 어플리케이션을 만듬
3) 다양한 라이브러리 사용가능
4) 서버 개발 가능
2. <script> 태그 사용
1) 웹 문서 내부에서 자바스크립트 작성
- <body>태그 안에 <script>태그를 작성한다.
...
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
</script>
</body>
...
2) 웹 문서 외부에서 자바스크립트 작성
- 새로운 js파일을 작성한 후 확장자를 .js 로 저장한다.
- js파일을 웹문서로 불러올 때는 html파일안에서 아래와 같이 작성한다.
<script src = "외부 스크립트 파일 경로"></scirpt>3. 자바스크립트 용어와 기본 입출력 방법
1) 식과 문
- 식 : 표현식이라고 하며, 어떤 값을 만들어 낼 수 있으면 모두 식이다.
- 문 : 명령문이라고 하며, 문의 끝엔 세미콜론(;)을 붙여서 구분한다.
2) 기본 입출력
ⓐ alert() : 알림창 출력하기
- alert안에 출력하고 싶은 메시지를 따옴표와 함께 넣어주면 출력이 된다.
alert("안녕하세요")
ⓑ confirm() : 확인 창 출력하기
- 확인 창은 사용자가 [확인]과 [취소] 버튼 중에서 직접 클릭이 가능하다.
var reply = confirm("배경 이미지를 바꾸시겠습니까?")
ⓒ prompt() : 프롬프트 창에서 입력받기
- 프롬프트 창 : 텍스트 필드가 있는 작은창
var name = prompt("이름을 입력하세요.", "기본값");
ⓓ document.write() : 웹 브라우저 화면에 출력
- 웹 문서에서 괄호 안의 내용을 표시하는 명령문
document.write("<h1>어서오세요</h1>");
ex) 이름을 받아서 화면에 표시하기
<script>
var name = prompt("이름을 입력하세요");
document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
</script>
ⓔ console.log() : 콘솔 창에 출력
- 콘솔문은 괄호 안의 내용을 콘솔 창에 표시한다.
- 콘솔창은 ctrl + shift + j 나 개발자도구(f11)에 들어가 콘솔탭을 클릭하면 된다.
ex) 이름을 받아서 콘솔 창에 표시하기
var name = prompt("이름을 입력하세요.");
console.log(name + "님, 환영합니다.");* 프롬프트 창에 이름을 입력하면 아래와 같이 뜬다.
+ js 파일 오류는 콘솔창을 열어서 확인이 가능하다.