JS 쓰는 이유
→ HTML 조작이 목적
JS 기초
document.getElementById('hello').innerHTML = "안녕";
document.getElementById('??').innerHTML = "??";
- document : 문서
- . : 의
- getElementById : Id가 hello인 html 요소를 가지고 와라
- innerHTML : 그거의 내부 HTML
- 등호(=) : 오른쪽을 왼쪽에 넣어주세요.
document.getElementById('??').??? = "????";
- ??→ getElementByID → 바꿀 html 요소 id(셀렉터)
- ??? : 무엇을(.innerHTML / .style / .color ) → 메소드(또는 함수)
- → html 요소의 어떤 속성을 변경할 지 결정하기 위함
- ???? : 어떻게
UI 만들기
- HTML / CSS로 미리 디자인(필요하면 숨김)
- 필요할 때 보여달라고 코드 짬(자바스크립트)
CSS 에서 숨길 때
display: none;
긴 코드 짧은 단어로 축약하는 법
→ function 문법 사용
→ 명시적으로 작성
<body>
<div class="alert-box" id="alert">알림창임
<button class="close-box" onclick="alertClose()">
닫기 </button></div>
<button onclick="alertOpen()">버튼</button>
<script>
// function
function alertOpen() {
document.getElementById('alert').style.display = 'block';
}
function alertClose() {
document.getElementById('alert').style.display = 'none';
}
</script>
→ function 작명은 구체적으로
→ 보통 영어 소문자로 시작
→ camelCase(alertCase 등)
에러 안 생기게 하는 법
- 조작할 html의 하단에 코드 짜야함 → 자바스크립트
- 셀렉터 오타 확인
- 기본 문법 오타
function에 구멍(파라미터) 뚫기
function alertOpen(구멍) {
document.getElementById('alert').style.display = 구멍;
}
알림창열기('안녕');
알림창열기('바보');
→ 구멍에 ‘바보’ 넣어서 alertOpen 안의 코드 실행
여러개도 가능
function alertOpen(구멍, 구멍2) {
document.getElementById(구멍2).style.display = 구멍;
}
alert('abc','123')
파라미터 예시 2
function plus(구멍) {
2 + 구멍
}
plus(1); -> 2 + 1
plus(2); -> 2 + 2
plus(3); -> 2 + 3
클래스명으로도 찾기 가능
getElementsByClassName()[0]
→ 찾는 것 중에 위에서 몇 번째
addEventListener()
<body>
<div class="alert-box" id="alert">
<p id="title">알림창임</p>
<button id="close">닫기</button>
</div>
<button onclick="아이디알림창()">버튼 1</button>
<button onclick="비번알림창()">버튼 2</button>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
})
event 감지하고 싶으면
addEventListener(”이벤트명”) → 입력
document.getElementById('close').addEventListener('mouseover', function()
콜백함수 → 코드를 순차적으로 실행할 때 보임
<script>
document.getElementById('close').addEventListener('mouseover',
function(){}) -> 콜백함수
class 부착식으로 개발하면 좋은점
- 애니메이션 추가 쉬움
- 나중에 재사용이 편리하다.
JS 원하는 요소에 클래스 추가하는 법
document.getElementsByClassName('list-group')[0].classList.add('show');
자바스크립트 라이브러리는 보통 바디태그 끝나기 전에 넣어두는게 좋음
one-way UI 애니메이션 만드는 법
- 시작스타일
- 최종스타일
- 원할 때 최종 스타일로 변하라고 코드
- transition 추가
조건문 쓰는 법
if (조건) {
조건이 참일 때 실행할 코드
} else {
위 조건이 참이 아닐 때 실행할 코드
}
예전에 JavaScript를 배운 적이 있지만, 다 까먹은 것 같다 ㅠㅠ 그래도 다시 보니깐 어느정도 기억이 나는거 같기도하고, 역시 조건문은 어려운 것 같다. 본 과정 들어가기전까지 심화까지 공부 해놔야 할 거 같다. 오늘도 화이팅이다.
ps.사실 이 내용은 어제 작성한 내용인데, 올리는걸 깜빡해버렸다.. 그래서 이제야 올린다.
'JavaScript' 카테고리의 다른 글
| 2023.05.30 JS 기본개념 (1) | 2023.05.30 |
|---|---|
| 2023.05.25 JS 기본개념 (0) | 2023.05.26 |
| 2023.05.19 JS 기본개념 (0) | 2023.05.19 |
| 2023.05.15 JS 기본개념 (0) | 2023.05.16 |
| 2023.04.08 JS 기본 개념(1) (1) | 2023.04.09 |
