-
코딩애플 JavaScript 입문과 웹 UI개발 Lv1(a)Programming/Web 2022. 11. 23. 21:31
1.
document.getElementById('hello').innerHTML = '안녕';
html 문서 의 id가 hello인 html 요소를 가져와라. 그거의 내부 html 을 안녕으로 바꿔라= 등호 : 오른쪽을 왼쪽에 넣으라는 뜻
document.getElementById('??').??='??';
??
1. 바꿀 html요소 id
2. 무엇을
3. 어떻게getElementById = 셀렉터 : 문서에서 원하는 요소 찾는 것
5분 숙제 : 글자 폰트 사이즈 16px로 줄이기 by JS
document.getElementById('hello').style.font-size=16px; 폰트 변경안됨
>> font-size => fontSizedocument.getElementById('hello').style.fontSize='16px';* 주석처리 : ctrl + /
UI 만드는 step
1. html/css로 미리 디자인
2. 필요할 때 보여달라고 js코드 짠다.1. html/css로 미리 디자인
- main.css 만들고
- html 파일 head에 <link rel="stylesheet" href="main.css"> 추가document.getElementByClassName('alert-box').style.display='block';
*bracket? 에디터 쓰는 경우 클래스명에 커서 놓고 ctrl+e 누르면 에디터 나타난다.
function 작명(){}
코드 축약하고 싶을
긴 코드 재사용 잦을 때 편리error. 함수를 만들어 적용하니 button을 눌렀을 때 모두 다 사라져 빈창이 떴다.
코드를 아무리 뜯어 보았지만 잘못된 곳은 없었고함수 이름을 open() 에서 openAlert()로 바꾸니 해결되었다.
open()함수가 안됐었나보다. 이미 있는 메소드였나?error. document is not defined .. 구글링하니 nodeJS니 뭐니 한 40분을 고민하고 찾아봤는데
document를 documnet로 오타가 나있었다. 자괴감든다. 하지만 해결해서 후련하다.getElementByClassName쓸 때는 [0]과같이 인덱싱 필요
onclick="알림창열기('none')" => addEventListener()과 같이 바꿔쓸 수 있다. 아이디만 태그에다 주고
document.getElementByID('close').addEventListener('click',function(){함수});
여기서 function은 콜백함수 ( 파라미터 자리에 들어가는 함수 ) 순차적으로 실행하고 싶을 때 자주 요구.
여기서 작명은 생략 가능!event : 클릭 키입력 스크롤 드래그 등 유저들이 조작을 가하는 것
addEventListener('event명') keydown, scroll, drag, mouseover: 일종의 유저의 이벤트 감시자 역할class 에 show 탙부착식으로 만들면 다른 스타일 동시에 주고 싶을 때도 유용해서 많이 사용함 ( 확장성
이렇게 먼저 css 스타일 정해주고
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){ document.getElementsByClassName('list-group')[0].classList.add('show'); });여기서 add > toggle로 바꿔주면
.classList.toggle() : 클래스명이 있으면 제거하고, 없으면 붙여주는 기능querySelector() 안에는 css 셀렉터 문법 사용 가능, 다만 맨 위 한개 요소만 선택
querySelectorAll()[] 통해서 다음 것도 사용할 수 있다.html 조작 문법을 쉽게 바꿔주는 라이브러리들 : jQuery , React, Vue 등
jQeury
querySelector = $
addEvenetListener = onjquery cdn 검색해서 3.x버전 minified <script>태그 복붙
거의 모든 라이브러리는 <body>끝나기 전에 넣는 것 권장 : 페이지 로드 성능때문에
설치한 곳 하단에서 jqeury 사용 가능//document.querySelector('.hello').innerHTML='바보';
$('.hello').html('밥');$('.hello').css('color','orange');//클래스 탈부착$('.hello').addClass('show');
제거는 .removeClass()
토글은 .toggleClass()<p> 3개를 전부 같은 내용으로 바꾸려면?
$('.hello').html('바보'); //한 줄만 바꾸면 된다.$('#test-btn').on('click',function(){
$('.hello').hide()
})
.fadeOut();
.slideUp();dot 다음에는 jqeury함수만 붙일 수 있다.
ui에 애니메이션 추가하기!
서서히 등장 fade 애니메이션 fadeIn()도 있음애니메이션은 가능한 css로 처리하는 게 성능상 좋음
애니메이션 법칙
one way ui 애니메이션 ( a상태 > b) 투명도 0>1 글자크기, 이동 등등
1. 시작스타일
2. 최종스타일
3. 원할 때 최종스타일로 변하라고 코드짬
4 transition 추가
css 클래스로 만들면 됨시작스타일 black-bg, 최종스타일 show-modal 로 두고
시작 스타일 display: none, opacity: 0;투명>>
display none 대신 visibility;hidden 쓰는게 애니메이션 줄 때 좋음
최종스타일
visibility:visible; opacity:1;
시작스타일 css에 transition:all 1s; 추가 하면 됨. ( 1초에 걸쳐서 변화해주세요 )접히는 애니메이션 : height , overflow:hidden 등 조절
'Programming > Web' 카테고리의 다른 글
코딩애플 JavaScript 입문과 웹 UI개발 Lv2(a) (1) 2022.11.24 코딩애플 JavaScript 입문과 웹 UI개발 Lv1(b) (0) 2022.11.24 220813 React JS 로 영화 웹 서비스 만들기 (2) (0) 2022.08.15 220812 React JS 로 영화 웹 서비스 만들기 (1) (0) 2022.08.13 7 분 HTML 핵심 feat. 테크보이 워니님 강의 (0) 2021.08.01