'자바스크립트' 카테고리의 글 목록 (10 Page)

자바스크립트

생각하는자 2013. 12. 20. 04:42

2013. 12. 20. 04:42

이번 글에서는 onclick 이벤트에 대해서 알아보도록 하겠습니다. 사용자와

소통하는 웹페이지를 만들기 위해서는 onclick( ) 이벤트를 적절하게 사용

하여야 합니다.

웹페이지에 있는 엘리먼트를 마우스로 클릭을 할때마다 해당 코드가 실행이

되게 됩니다. 각각의 엘리먼트는 자만만의 고유한 onclick( )이벤트 코드를

가질수가 있습니다.

특정 사진을 클릭을 하면 다른 사진으로 변화를 하거나 또는 사용자가 특정

값을 입력을 하였을때 서버로 보내기전에 검증을 하는 함수를 연결을

해서 사용을 하던지 응용하는 방법은 여러가지가 있습니다.

오늘은 간단한 자바스크립트 코드를 알아보도록 하겠습니다. 테스트 html

페이지를 만들고 현재 접속한 사람의 이름을 입력을 받고 받은 이름을

가지고 인사를 하는 사용자 함수 코드를 만들어 보도록 하겠습니다.

전 알려 드렸지만 가급적 자바스크립트 코드는 <head> 태그 사이에 위치를 하는것이 좋습니다.

<head>
<title>자바스크립트 공부하기</title>
<script >
function whoName()
{
var Name = prompt("당신의 이름은?","당신의 이름을 입력하여 주세요");

if(Name)
{
alert("만나서 반갑습니다" + Name +"씨");

}
}
</script>
</head>

위의 코드를 살펴보면 whoName() 이라는 사용자 함수를 만들었습니다. whoName()
함수를 호출 하게 되면 prompt( ) 라는 빌트인 함수가 호출이 됩니다.

옆의 사진에서 처럼 사용자에게

데이터를 입력을 받는 박스를 표시를

하여 줍니다.

prompt("박스의 이름" , "텍스트박스안에 들어가는 글자") 이렇게 되어 있습니다. 옆의 사진을 보고 위의 코드를 보시면 이해가 될것이라고 생각이 됩니다,

그러고 나서 사용자에게 받은 값을 Name 이라는 변수에 넣습니다. 그러고 나서 if 문을 이용해서 Name 이라는 변수에 내용이 있다면 if문을 실행을 하여 줍니다.

if 문의 내용을 살표보면 alert( )함수를 이용을해서 Name 변수안에 들어 있는 내용을 보여 주는것을 볼수가 있습니다.