자바스크립트 언어는 html과 css와 함께 사용된다.
<html>
콘텐츠 계층
.html 파일
페이지의 구조를 만들고 의미를 부여한다.
{css}
콘텐츠가 보여지는 방법을 서술한다.(배경, 테두리, 글꼴, 색상 등)
javascript()
페이지의 동작을 변경하며 역동성을 부여한다.
* 기본적인 자바스크립트 코드 작성하기
<!DOCTYPE html>
<html>
<head>
<title>인사</title>
</head>
<body>
<h1> 지금은 몇시?</h1>
<script>
var today =new Date();
var hourNow=today.getHours();
var greeting;
if(hourNow>18){
greeting= "굿밤";
}else if(hourNow>12){
greeting= "열일";
}else if(hourNow>0){
greeting= "좋은 아침";
}else{
greeting= "welcome!";
}
document.write('<h3>'+today+'</h3>');
//Wed Feb 15 2017 19:49:02 GMT+0900 (대한민국 표준시)
document.write('<h3>'+hourNow+'</h3>');
//19
document.write('<h3>'+greeting+'</h3>');
//굿밤
</script>
</body>
</html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html> <html> <head> <title>인사</title> </head> <body> <h1> 지금은 몇시?</h1> <script> var today =new Date(); var hourNow=today.getHours(); var greeting; if(hourNow>18){ greeting= "굿밤"; }else if(hourNow>12){ greeting= "열일"; }else if(hourNow>0){ greeting= "좋은 아침"; }else{ greeting= "welcome!"; } document.write('<h3>'+today+'</h3>'); //Wed Feb 15 2017 19:49:02 GMT+0900 (대한민국 표준시) document.write('<h3>'+hourNow+'</h3>'); //19 document.write('<h3>'+greeting+'</h3>'); //굿밤 </script> </body> </html> | cs |
<출력결과>
객체와 메서드를 사용하는 법
이 한줄의 자바스크립트 코드는 객체와 메서드를 사용하는 방법을 보여준다. 개발자는 이와 같은 기법을 객체의 메서드를 호출 한다고 표현한다.
document.write(‘nice’);
document : 이 객체는 전체 웹페이지를 표현한다. 모든 브라우저는 이 객체를 구현하고 있으므로 우리는 객체의 이름만으로 해당 객체를 사용할 수 있다.
. : 맴버접근 연산자. document객체는 여러개의 메서드와 속성을 가지고 있다. 이들의 객체를 맴버라고 부른다.
객체의 맴버를 사용할 때 객체의 이름과 사용할 맴버의 이름을 마침표로 연결한다.
write(‘nice’) : 메서드. write(‘nice’) 매서드는 페이지에서 <script> 요소가 작성된 부분에 새로운 콘텐츠를 출력한다.
nice : 매개변수. 매서드가 올바로 동작하기 위해 어떤 정보를 필요로 하면 그 정보를 괄호로 둘러싸서 제공해야 한다.
요약
- html의 <script>요소는 html 페이지를 로드하는 브라우저가 필요한 자바스크립트 파일을 로드하는데 사용된다. (css파일을 로드하기 위해 <link>요소를 사용하는 것과 동일하다.)
브라우저가 로드한 페이지의 소스코드를 살펴보면 자바스크립트 때문에 html 코드가 바뀌지 않는 것을 알 수 있다. 그 이유는 자바스크립트가 브라우저가 만든 웹 페이지의 모델을 이용해 동작하기 때문이다.
'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글
| [자바스크립트 기초]DOM 문서객체모델의 이해 2 (2) | 2017.02.25 |
|---|---|
| [자바스크립트 기초]DOM 문서객체모델의 이해1 (4) | 2017.02.24 |
| [자바스크립트 기초]함수 메서드 객체 (2) | 2017.02.23 |
| [자바스크립트 기초] 자바스크립트의 기본 명령어 (2) | 2017.02.18 |
| [자바스크립트 기초] 스크립트 왕기초 개념 1 (2) | 2017.02.16 |
댓글