HTML로 간단한 버튼을 생성하고
버튼에 onclick 이벤트 속성을 넣은 뒤 간단한 Javascript 함수를 할당해서 아래 테스트 작동 여부를 확인했다.
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
JavaScript
복사
버튼 클릭 시 '안녕하세요'라는 알림 팝업
function checkResult() {
// ** 클릭 시 onclick ** 해당 함수 실행!!
alert('안녕하세요')
}
JavaScript
복사
전에 배운 Dictionary부분이다. 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인
//id가 q1인 div에 a로 선언된 값을 텍스트로 입력
// let a = '사과'
// $('#q1').text(a)
//id가 q1인 div에 해당 배열의 값을 텍스트로 입력
let a = ['사과', '배', '감', '귤']
$('#q1').text(a[3])
//id가 q1인 div에 텍스트 스타일 색상을 빨간색으로 변경
$('#q1').css('color', 'red')
//id가 q1인 div에 텍스트 스타일 폰트 사이즈를 40px으로 변경
$('#q1').css('font-size', '40px')
JavaScript
복사
배열 형태로 선언된 값들도 정상적으로 출력 되는지 테스트했다.
let b = {'name' : '영수', 'age' : 30}
$('#q2').text(b['name'])
let c = [
{'name' : '영철', 'age' : 34},
{'name' : '철희', 'age' : 23}
]
$('#q3').text(c[1]['age'])
JavaScript
복사
다음엔 jQuery에 대해서 학습 예정
Javascript로 길게 복잡하게 써야하는 것
document.getElementById("element").style.display = "none";
//다음과 같은 코드를
$('#element').hide();
JavaScript
복사
jQuery로 보다 직관적으로, 간편하게 작성 할 수 있다.