Web programing/Javascript

Javascript와 HTML 연동

sosal 2014. 7. 25. 23:45
반응형

/*

 * http://sosal.kr/

 * made by so_Sal

 */



<html>
<head>
<title>자바스크립트 연습1</title>
</head>
<body>
</body>
</html>

브라우저의 창 제목이 자바스크립트 연습1인 html을 만들어
원하는 태그를 script 문법으로 구현하려 합니다.

script 태그 :: 일반적으로 <Head> 부분에 삽입을 하고, (문서 전체에 영향을 미치고자 할 때)
특별한 경우에 <body>에 삽입을 합니다.
     (문서 전체에 영향을 미치기는 하지만 일정한 순서에 따라 특정한 위치에서 표현 하고자 할때)
-> 인터프리터 언어인걸 한번더 생각해 보게되는 내용이네요 (한줄한줄씩 해석)

헤더부분만 떼어 내용을 진행하겠습니다.

<head>
<title> 자바스크립트 연습 1</title>
<script>
<!--
자바스크립트 소스 코딩
//-->
</script>

</head>

추가된 내용은 스크립트를 열고 닫고, 안에 모든 내용을 HTML 주석처리로 묶습니다.
:: 왜 묶느냐? ::
브라우저들은 자바스크립트 소스 코드를 인식할 수 있는것과
그렇지 않은것이 있습니다.
만약 소스코드를 인식하지 못할 경우, 소스를 문자열처럼 출력되는걸 방지하기 위해서
HTML의 주석처리를 넣어주는 것입니다.

그럼 일단 원하는 내용을 출력해볼까요?
~
<head>
<title> 자바스크립트 연습 1</title>
<script>
<!--
document.write("안녕하세요");
//-->
</script>
</head>
~
document :: 현재 화면이란 뜻입니다. (body 태그 안에 글을 쓴다.)
write라는 메소드:: () 안에 글을 쓴다.
// 안녕하세요 라는 내용을 브라우저에 띄우는 자바스크립트 코드입니다.
; <-- 세미콜론은 문단의 끝을 의미합니다.

따라서 위 코드는 document.write("안녕하세요") :: body태그 안에 안녕하세요를 쓴다.
결국 <body>테그에 안녕하세요를 적은것과 같은 결과로 나오게 되는것입니다.


<html>
<head>
<title>자바스크립트 연습1</title>
<script>
<!--
document.write("안녕하세요");
//-->
</script>
</head>
<body>
안녕하세요
</body>
</html>

-> 출력문
안녕하세요 안녕하세요

앞의 내용은 자바스크립트, 뒤에 내용은 HTML의 body에 적힌 안녕하세요 입니다.

'Web programing > Javascript' 카테고리의 다른 글

Javascript 연산자 사용법  (0) 2014.07.26
Javascript 변수의 선언, 초기화, 사용  (0) 2014.07.26
Javascript와 HTML 연동(2)  (0) 2014.07.26
Javascript 객체란?  (0) 2014.07.25
프로그래밍 Javascript 개념  (0) 2014.07.25