자바스크립트의 기본 출력문

Programming/Javascript | 2012. 12. 15. 00:35
Posted by 오요미

문서에 출력 : document.write()메서드

메시지박스(경고 대화 상자) 출력 : window.alert()메서드

===============================================================

<script language = "javascript" type="text/javascript">

//[1]

document.write("여기에 결과 값 출력<br />");

//document : html body와 같은 영역이다. 따라서 html태크, css소스를 출력할 수 있다.

window.document.write("window 객체는 생략 가능하다<br />");

//원칙적으로 write메서드는 위의 형태이며 모든 객체의 최상위 조상은 window이다.

//[2]

window.alert("메시지박스 결과 값 출력");

alert("역시 window 객체는 생략 가능");

</script>

'Programming > Javascript' 카테고리의 다른 글

변수와 연산자  (0) 2012.12.15
복습(DHTML)  (0) 2012.12.15
객체, 속성, 메서드, 이벤트 용어 설명  (0) 2012.12.14
javascript 작성시 주의점  (0) 2012.12.13
3.자바스크립트삽입방법  (0) 2012.12.13
 


-이해해야 할 개념

객체(object) : 데이터를 지닐 수 있음, 어떤 동작을 수행할 수 있는 하나의 단위

속성(property) : 객체가 지니는 성질, 특성, 색상 등의 표현

메서드(method) : 객체의 동작 수행 능력(자동차의 기어변속, 좌회전, 우회전, 후진)

이벤트(event) : 객체의 동작 수행의 결과/신호(자동차가 전진하다 전신주를 받았을 때 어떤 결과 : 사고발생=이벤트)


<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script language = "javascript" type="text/javascript">

document.write("1. 객체.메서드()");

document.title = "2. 객체.속성"; //title이 수정됨

//이벤트는 스크립트 블럭에서 작성 불가능, html과 함께 이벤트핸들러로만 사용가능 on~

</script>

</head>

<body>

<input type = "button" value="클릭" onclick="window.alert('안녕');"/>

</body>

'Programming > Javascript' 카테고리의 다른 글

복습(DHTML)  (0) 2012.12.15
자바스크립트의 기본 출력문  (0) 2012.12.15
javascript 작성시 주의점  (0) 2012.12.13
3.자바스크립트삽입방법  (0) 2012.12.13
2. 자바스크립트 삽입방법  (0) 2012.12.13
 

javascript 작성시 주의점

Programming/Javascript | 2012. 12. 13. 23:37
Posted by 오요미

<!-- javascript의 기본형태 -->

<script language="javascript" type="text/javascript">

//스크립트 블럭이 많이 들어가도 상관없다, 버전도 상관없다.

document.write("마지막 버전");

</script>


<br />

<script language = "javascript1.3" type = "text/javascript">

docment.write("1.3버전");

</script>

<br />


<script language = "javascript" type="text/javascript">

//넷스케이프 이외의 브라우저 중에서 script 태그를 지원하지 않을 수 있다.

//모바일웹브라우저의 경우 javascript를 해석할 수 없는 경우도 있기 때문에 html주석으로 하도록 한다.

<!--

document.write("자바스크립트를 알지 못하는 웹브라우저를 위해서");

-->

</script>

<script language="javascirpt" type="text/javascript">

<!--

//여기에 경고 대화상자를 하나 출력 

/*

메시지박스를 출력하고자 할때는 window.alert() 명령어를 사용한다.

*/

window.alert("경고 대화상자 출력");

-->

</script>


 

3.자바스크립트삽입방법

Programming/Javascript | 2012. 12. 13. 23:10
Posted by 오요미

<body>

<!-- 3. on~ 속성에다 javascript명령을 직접삽입하는 방법 -->

<input type = "button" value="버튼" style = "background-color:Yellow; border:solid 1px red;"

onclick="window.alert('클릭');"onmouseover="this.style.backgroundColor='green';"/>

</body>


=> 버튼을 마우스로 클릭하면 alert창이 뜨고 버튼 위에 마우스를 갖다대면 버튼 색이 녹색으로 변한다.

(backgroundColor:대소문자주의)

 

2. 자바스크립트 삽입방법

Programming/Javascript | 2012. 12. 13. 22:43
Posted by 오요미

html파일

<body>
<!-- javascript와 html코드를 분리 -->
<script language = "text/javascript" type = "text/javascript" src="js/Alert.js"></script>
<body></body>
</html>
====================================================================================
ALert.js파일
window.alert("외부에 자바스크립트 코드 사용");
document.write("메시지박스 출력 후 문서 영역에 출력");


 

1. 자바스크립트 삽입 방법

Programming/Javascript | 2012. 12. 13. 22:24
Posted by 오요미


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<style type = "text/css">

body{

color:blue;

}

</style>


<!-- 1. script block을 사용해서 자바스크립트 작성 -->

<script language="Javascript" type = "text/javascript">

//head에 있으므로 html 생성전에 수행

//document객체의 write메서드로 화면에 출력

//javascript 대,소문자구문

document.write("안녕하세요.<br />");

document.write("반갑습니다.<br />");

window.alert("또 만나요.\n 낼봐요.~");

</script>

</head>

<body>


</body>

</html>

 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Ajax (0)
Jquery (6)
PHP (3)
Javascript (36)
DOM (0)
HTML (2)
CSS (1)
Linux (5)
postgreSQL (5)
Regex (0)
기타 (7)
보안 (1)
Python (0)
Matlab (1)
OrCad (1)
LTSpice (4)
Machine learning (0)
Deep learning (0)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)