문자열
function account(userId){
let savedUser='이은성';
if(userId==savedUser){
console.log('반갑습니다 ', savedUser, '님');
} else{
console.log('fail');
}
}
account('이은성');- 여기에서 userId와 savedUser는 완전히 같은 내용
- 문자열은 따로 객체를 생성하고 그 주소를 가리키도록 하게됨
- String Literal Pool에 있는 c-value 엔진으로 같은 내용이 있는지 확인
- 같은 내용의 객체를 중복으로 생성하지 않고 저장공간 효율적으로 사용 가능
- String Literal Pool은 Method area(구조)에 존재하여 프로그램이 종료될 때까지 상주하게 됨
-> 많이 사용되면 안된다 (static도) - edan은 Instance atrea에 존재하여 지워질 수 있음
String s1='java'; // String Literal Pool에 생성
String s2 = new String('java'); // edan에 생성
s1+='study' // edan에 새로 생성이벤트
1. onclick 사용
<body>
<script>
function msg(no){
alert(no);
}
</script>
<button onclick="msg('이지우')">전송</button>
</body>button>전송</button>에서 msg()는 호출이 아니라 연결- 호출은 버튼이 눌렸을 때 발생
- 이벤트 하나만 적용 가능
2. 자바 스크립트로 onclick 속성 추가
<body>
<script>
btn.onclick= // btn이 정의되지 않아서 실행 안됨
function msg(no){
alert(no);
}
</script>
<button id="btn">전송</button> <!-- 이 라인이 script 위에 있어야 함 -->
</body>3. addEventListener 사용
<body>
<button id="btn">전송</button>
<script>
function first(){
alert('첫 번째 메세지');
}
// 이벤트 이름, 이벤트 핸들러 연결
btn.addEventListener('click', first);
btn.addEventListener('click', function(){
alert('두 번째 메세지');
});
</script>
</body><input type="button" id="btn" value="전송">
<!-- input으로 작성하기 -->
<script>
btn.addEventListener('click', function(){
alert(this.value); // this로 value 가져오기 가능
});
</script>- 이벤트가 발생(호출)했을 때 이벤트는 엔진으로 실행되고 그때 정보를 매개변수로 전달해줌
콜백 함수
function order(callback){ // callback은 function code
callback(); // 나중에 호출됨
}
const coffe = function(){
console.log('주문하신 아메리카노 나왔습니다');
};
setTimeout(coffe, 5000); // 5초 뒤 실행setTimeout 형태
function setTime(f, time){
time delay
f(); // call back
}html과 연결하기
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>
</head>
<body>
<input type="button" id="btn" value="주문">
<script src = "evtcallback.js">
</script>
</body>
</html>js
const coffe = function(){
alert('주문하신 아메리카노 나왔습니다');
};
function order(){
setTimeout(coffe, 5000);
}
btn.addEventListener('click', order);// 콜백 안에 콜백 넣기 가능
btn.addEventListener('click', function (){
setTimeout(function(){
alert('주문하신 아메리카노 나왔습니다');
}, 5000);
});백틱(`)
const name = '이지우';
const age = '25';
const height = 178.5;
// 템플릿 문자열
console.log(`My name is ${name}, My age is ${age}, My height is ${height}`);
// 백틱 안에서 엔터로 줄바꿈 가능
console.log(`My name is ${name}
My age is ${age}
My height is ${height}`);실습
test.js
let q1Answer = 'ISTJ';
function checkQ1(){
if(a1.value == q1Answer)
alert('정답입니다.');
else
alert(`틀렸습니다. 정답은 '${q1Answer}'입니다.`);
}test.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>
</head>
<body>
<p>이지우님의 MBTI는?</p>
<input type="text" id="a1" value="">
<button onclick="checkQ1()">제출</button>
<script src="test.js"></script>
</body>
</html>
노력형 인간