<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Object자료형</title>
</head>
<body>
<h2>JavaScript functions</h2>
<p>버튼을 클릭해보세요.</p>
<p id="demo"></p>
<button onclick="person.fullName()">클릭</button>
<script>
/*
javascript object = java Map = json방식
형식 : {키 : 값 , 키 : 값, ....}
*/
// this키워드 : 함수의 소유자를 의미함.
// 이 스크립트 에서는 this가 person객체가 됨.
// object객체의 키와 요소값에 접근하는 방법
// Object.keys(오브젝트객체명) 키명만 가져오기 => 키만 배열형식으로 반환
// 요소값 가져오기
// 1. 오브젝트객체명.키명
// 2. 오브젝트객체명['키명'] => 키명은 반드시 문자열값으로 기술할 것
const person = { //(key, value) object형식으로 가져옴 java-map 유사
firstName: "John",
lastName: "Doe",
id: 5566,
// object객체의 값으로 존재하는 함수
fullName: function () {
document.getElementById("demo").innerHTML =
this.firstName + " " + this.lastName;
},
};
document.write(person["firstName"], ", ", person.lastName);
</script>
</body>
</html>
function - event handler
- 웹문서내에서 어떠한 행위가 일어날 때 발생되는 기능을 제어하는 함수. - 해당 이벤트가 발생일 될때 함수를 실행시킨다.
onload : 페이지가 로딩될 때, 즉시실행
[window].onload = function (){
~~~~;
};
onchange : 값이 변경되었을 때
[값이변경되는대상태그].onchange = function (){
~~~~;
};
onclick : 페이지 내 마우스를 클릭했을 때
window.onclick = function (){
~~~~;
};
<태그onclick="">
onsubmit : submit실행할 때 <formonsubmit=""
event handler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script>
/*
이벤트핸들러 함수란 :
웹문서내에서 어떠한 행위가 일어날 때 발생되는 기능을 제어하는 함수.
-- 해당 이벤트가 발생일 될때 함수를 실행시킨다.
onload : 페이지가 로딩될 때
onchange : 값이 변경되었을 때
onclick : 마우스를 클릭했을 때
[window].onload = function (){
~~~~;
};
[값이 변경되는 대상 태그].onchange = function (){
~~~~;
};
*/
// window.onload = function() {자바스크립트 코드들; ...;}
// 웹 페이지가 로딩되자마자 실행
// 즉시실행함수
window.onload = function () {
//이벤트 핸들러 함수 선언(정의)
var i = 3;
document.write(i + "의 제곱은 " + (i * i));
};
//이벤트(load)에 의해 호출(실행)
</script>
</head>
<body></body>
</html>
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select{padding:2px;}
</style>
<script>
window.onload = function() {
alert('즉시실행');
// HTML엘리먼트에 이벤트 핸들러 지정
// onclick: 해당 input버튼 요소에 onclick속성 및
// 연결될 test()함수 지정하기
document.getElementById("btn").onclick=test;
// document.getElementById("btn").onclick=test(); //test(); 바로 실행됨
// onchange : 해당 select요소에 onchange속성 및 연결될 test2()함수 지정하기
document.getElementById("sel").onchange = function (){
console.log('this', this);
test2(this.value);
};
};
function test() {alert("사용자 정의 함수");}
function test2(email) {
// HTML의 특정 엘리먼트를 객체로 접근
var text = document.getElementById("email2");
// 특정 객체의 value속성에 값을 지정
text.value=email;
}
</script>
</head>
<body>
<p><input type="button" value="테스트" id="btn"></p>
<form>
<!-- <form action="function12_event02.html" method="get">
default값으로 action, method 생략가능-->
<p>이메일 <input type="text" id="email1" name="email1">@
<input type="text" id="email2" name="email2">
<select id="sel" name="sel">
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="gmail.com">구글</option>
<option value="daum.net">다음</option>
</select>
</p>
<input type="submit" value="전송" >
</form>
</body>
</html>
