1. 자바스크립트 기본 문법
자바스크립트 학습 내용에 대해 정리하고자 한다.
기존 직접 화면 구성을 하면서 알던 부분도 있기 때문에 헷갈리는 부분과 모르는 부분을 위주로 기록하려고 합낟.
1.getElementByClassName
getElementByClassName(‘title1’)[x] = 찾은것 중 위에서 x번째 찾기
2.이벤트 리스너 = 감시자 역할(keydown, mouseover 등)
document.getElementById("close").addEventListener('click', function() {
document.getElementById("alert-box").style.display = "none";
});
function은 콜백함수(파라미터 자리에 들어가는 함수)
3.토글 함수: 클래스명을 붙였다 뗐다 해줌
document.getElementById("navButton").addEventListener("click", function() {
document.getElementsByClassName("list-group")[0].classList.toggle('show');
})
4.쿼리셀렉터
document.querySelector('.list-group') // . -> css 요소 맨 위에 것을 찾아줌
document.querySelector('#list-example') // # -> id 요소 맨 위에 것을 찾아줌
document.querySelectorAll('.list-group')[3] // 모든 css 요소 중 4번째 것을 찾아줌
5.JQuery
document.querySelector('#list-example').addEventListener
=> $(‘#list-example’).on
querySelectorAll 과 동일해서 일치하는 모든 내용 수정함
JQuery cdn 가서 minified 버전 붙여넣기
거의 모든 라이브러리는 <body> 끝나기 전에 넣는거 권장
<예시>
$('.hello').html('바보');
$('.hello').css('color', 'red');
$('.hello').addClass('show'); // removeClass(), toggleClass() 등
document.getElementById("test-btn").addEventListener()
->
$('#test-btn').on('click', function() {
$('.hello').fadeOut(); // slideUp 등 애니메이션 사용 가능
})
$('셀렉터')로 찾으면 JQuery 함수만 붙일 수 있음
6. 부트스트랩
부트스트랩 starter template 사용하면 편하게 양식 설정 가능