삼항연산자
이름 그대로 항이 세 개로 나뉘어진 형태의 식을 말하며, 작성한 true 또는 false 의 값을 반환한다. (if-else 문을 간단하게 활용 가능함)
- 기본형식
조건식 ? true일때 결과 : false일때 결과;
연습예제 1 : 기본형식
<script>
100>50 ? console.log("true") : console.log("false"); //true 출력
</script> 연습예제 2 : 변수의 활용
<script>
let score = 100;
let who = ""; //빈문자열
who=(score>90) ? "상위권" : "중하위권";
console.log("who = "+who); //출력 'who = 상위권'
</script> 인라인 방식의 이벤트(함수) 처리
HTML과 자바스크립의 만남 💜
event
대표적으로 onclick같은 경우, 사용자가 해당 태그의 영역을 클릭했을 때 어떠한 사건이 일어나도록 코드를 실행하는데, 이러한 것을 이벤트(event)라고 한다. onclick 외에 onchange, onload, onmouseover 등 'on-'으로 시작하는 다양한 이벤트들이 있다.
onclick
해당 태그를 클릭했을 때 실행될 이벤트핸들러(함수)를 별도의 script 태그 없이 html 태그 안에 onclick 속성을 추가해서 작성해준다. onclick의 속성값으로는 반드시 자바스크립트 코드가 와야 한다.
알림창으로 출력할 메세지를 msgFn 함수로 전달받아 alert 로 출력해보자.
<script>
function msgFn(msg){
alert(msg);
}
</script>
<body>
<img onclick='msgFn("반갑습니다")' src="./images/1.jpg" alt="#">
<button onclick='alert("안녕하세요");'>
</body>- day & night 모드 버튼만들기 > input태그의 onclick 속성 참고
의미와 가치를 쫓는 개발자 ✨