[JavaScript] 사용 기초-1

우선 JavaScript의 Dictionary 복습부터 진행

 

 

-----------

 

 

HTML로 간단한 버튼을 생성하고

버튼에 onclick 이벤트 속성을 넣은 뒤 간단한 Javascript 함수를 할당해서 아래 테스트 작동 여부를 확인했다.

<div class="button-part">

<button onclick="checkResult()">결과 확인하기!</button>

</div>

버튼 클릭 시 '안녕하세요'라는 알림 팝업

function checkResult() {

// ** 클릭 시 onclick ** 해당 함수 실행!!

alert('안녕하세요')

}

전에 배운 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')

 

배열 형태로 선언된 값들도 정상적으로 출력 되는지 테스트했다.

let b = {'name' : '영수', 'age' : 30}

$('#q2').text(b['name'])

let c = [

{'name' : '영철', 'age' : 34},

{'name' : '철희', 'age' : 23}

]

$('#q3').text(c[1]['age'])

 

 

다음엔 jQuery에 대해서 학습 예정

Javascript로 길게 복잡하게 써야하는 것

document.getElementById("element").style.display = "none";

다음과 같은 코드를

$('#element').hide();

jQuery로 보다 직관적으로, 간편하게 작성 할 수 있다.

 

 

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

GitHub - yzpocket/Sparta99training