-
코딩애플 실용 JavaScript 1강 - 6강 ( 무료파트 정주행 )카테고리 없음 2021. 12. 23. 03:06
먼저 ! 를 통해 html 자동완성해주고
- 웹환경에서 JS의 목적 : HTML 조작, 변경
if for var function array object class 등 조작하려고 씀
이쁜 웹UI 만들기 가능
< 첫번째 프로젝트 >
Alert 창 띄우고 닫기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2 id="hello">안녕하세요</h2> <script> document.getElementById('hello').innerHTML ='안녕'; </script> </body> </html>수정 : document.getElementById('hello').innerHTML='안녕'; >> 요런건 이해보다 외워서 쓰는 것
해석 >> 문서의 / 'hello'라는 아이디의 html 요소의 안의 글자 = '안녕'
바꾸고 싶은 요소의 ID 무엇을 바꿀지 변경내용
innerHTML은 style.color 와 같이 바꿀 수 있음 ( html의 모든 것 바꿀 수 있음 ex> 사이즈, 마진, 패딩 등 )
이 부분은 외우는 것이 아닌 구글링 통해 찾아서 쓰면 되는 것 ( JS how to change margin 과 같이 영어로 차증면 더 잘나옴)
* 코드의 '='은 대입연산자 : 오른쪽 것을 왼쪽에 집어넣는 것
* '안녕'과 같이 따옴표(') : 모든 문자는 따옴표 안에
*document.getElementById('hello'): selector 셀렉터
Q 글자 사이즈를 30px로 바꾸려면 ?
document.getElementById('hello').style.fontSize="30px";
UI 만드는 법
1. 미리 디자인해놓고 숨김
2. 원할 때 JS 이용해서 보여줌
<div class="alert-box" id="alert">Alert박스</div>
<button onclick="document.getElementById('').style.display='block';> 버튼 </button>
하지만 위에서처럼 html 태그 안에 JS 길게 작성안함. 가시성이 안좋아서.
숙제 : 닫기버튼 기능 개발하기
<div class="alert-box" id="alert"> Alert박스 <button onclick="document.getElementById('').style.display='none';">닫기</button> </div> <button onclick="document.getElementById('').style.display='block';"> 버튼 </button>- JS 즉 <script>는 html코드 아래에 있어야 함.
- console창에서 버그, 확인가능
- x of null 이라는 에러은 x값의 왼쪽값이 null이라는 에러
< 함수 >
함수 사용하는 이유
1. 긴 코드 짧게 축약
2. 함수의 파라미터 > 함수의 개수 줄이기
- 파라미터 여러개 쓸 때는
1) 콤마로 구분
2) 자유 작명
숙제 : ALERT 창 2개 만들기
- document.getElementByClassName('alert-box')[0].innerHTML << 순서를 나타냄
< EventListener >
<button onclick=""> 여기서 onclick 안쓰고도 script 에서 기능개발 가능
>>>
<script>
document.getElementById('close').addEventListner('click' , function(){
});
* click : event ( keydown, scroll, mouseover 등등 )
JS 조금 더 짧게 쓸 수 없을까?? >> jQuery 라이브러리 사용
최근에는 jQuery 보다 React 많이씀
이유는
1. HTML 조작 더 잘함
2. 앱처럼 스무스하게 동작하는 웹
3. HTML 재활용 편리
But jQuery 로 이미 만들어진 사이트들이 너무 많기 때문에 알아야 함.
jQuery 사용법 !
- jQeury 다운로드
jQeury CDN으로 다운 > minified 버전 다운. script 태그 뭉텅이 src에 복붙. 사이트에서 호스팅된 jQeury파일
- 첨부하기
< script src="제이쿼리파일.js"> </script>
<script>
제이쿼리 문법 ~어쩌구
웹브라우저에서 불러오는 속도를 위해
body의 제일 아래쪽에 쓰는 것이 제일 좋음 !
html 조작이 js의 목적이기 때문에 html먼저 보여주기
<h4 id="test" class="test1"> 안녕하세요 </h4>
<script>
document.getElementById('test').innerHTML ='???'; 얘를
$('#test') 이렇게 바꿔 써줌. $('CSS 셀렉터')형식으로 , 그리고 innerHTML은 쌩자바스크립트 문법이기에 그대로 쓰면 안됨. jQueryy에 맞게 써야함.
$('.test1').htmㅣ('안녕');
유사= $('.test1').text('안녕');
document.querySelector('#test') 와 같은 방법도 있음.
document.querySelectorAll('#test'[0] 근데 얘는 여러개 중에 쓰려면 , All을 붙여줘야함. ByClassName과 다른점
</script>
$('.test1').html(); // 얘는 그냥 출력
* jQeury css
$('.test1').css('color','red'); // 형식 봐두기
* jQeury HTML스타일 변경 : $('CSS셀렉터').css(이걸, 이렇게)
* jQeury 속성
$('.test1').attr('src','어쩌구');