자바스크립트 이벤트 함수 선언
이벤트란 웹브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 이야기한다.
이벤트 종류애 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있다.
마우스 이벤트
- onclick (클릭했을때)
- ondbclick (더블클릭했을때)
- onmouseover (올려놨을때)
- on mouseout (커서가 떠날때)
-onmousemove (커서가 움직일때)
키보드 이벤트
- onkeypress
- onkeydown
- onkeyup
인라인 방식으로 이벤트 등록하기
<body>
<button onclick="clickTheButton()">click me!</button>
<script>
function clickTheButton(){
alert("버튼이 눌렸습니다")
console("버튼이 눌렸습니다")
}객체 리터럴로 콘솔에 표시하기
<script>
function me(){
return{
name:'윤경',
age:26,
job:'student'
}
}
const myInfo = me();
console.log(myInfo.name)
console.log(myInfo.age)
console.log(myInfo.job)
</script>
```
``` javascript
// 사용자 정보를 담은 객체 리터럴
const user = {
id: 1,
username: 'john_doe',
email: 'john@example.com',
isAdmin: false
};
// 배열을 포함한 객체 리터럴
const product = {
id: 101,
name: 'Laptop',
price: 1200,
specifications: ['8GB RAM', '256GB SSD', 'Full HD Display']
};
// 함수와 함께 사용하는 객체 리터럴
const person = {
firstName: 'Jane',
lastName: 'Doe',
getFullName: function() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(user);
console.log(product);
console.log(person.getFullName())return 문이 없는 경우 함수는 undefined를 반환합니다.
템플릿리터럴
템플릿 리터럴 (Template Literal):
템플릿 리터럴은 문자열을 좀 더 편리하게 표현할 수 있도록 도와주는 ES6(ECMAScript 2015)부터 도입된 문법입니다.
백틱 (``)으로 문자열을 감싸고, ${} 구문을 사용하여 변수나 표현식을 문자열에 삽입할 수 있습니다.
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 출력: Hello, John!객체리터럴
객체 리터럴은 객체를 간단하게 표현하기 위한 문법입니다. 중괄호 {}를 사용하여 객체를 만들고, 속성-값 쌍을 정의합니다.
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30
};
개발운영팀