javascript 줄임말 jQuery 문법
CSS(꾸미기) 코드를 모아둔 - 부트스트랩
javascript(움직이기) 코드를 모아둔 - 라이브러리
라이브러리( jQuery ) 를 사용하면 짧고 직관적으로 쓸 수 있다.
이렇게 미리 작성된 javascript코드를 가져오려면 ('임포트' 하려면)
<head> 와 </head> 사이에 CDN(Content Delivery Network) 를 넣어두어야 함.
에서 minified 버전의 스크립트 태그 가져오기
jQuery 문법
이름부여는 id 로 한다. 기본적으로 필요!
id = 부여한_이름
class 로도 이름 부여 가능! -> .클래스명
<값 부여하기>
콘솔창에,
$('#부여한_이름') 부여한 id이름에 jQuery를 먹일것이다
$('#부여한_이름').val('어쩌구') 부여한 id이름에 j쿼리를 먹일건데 어쩌구 라는 값을 부여해라(입력해라)
<값 가져오기>
$('#부여한_이름').val() 부여한 id이름에 j쿼리를 먹일건데 거기에 있는 값 가지고와라
<숨기기>
$('#부여한_이름').hide
<보이기>
$('#부여한_이름').show
<구역에 컨텐츠 삭제하기>
$('#부여한 구역 이름').empty()
<구역에 컨텐츠 추가하기>
$('#부여한_구역_이름').append(추가할거)
<html을 jQuery와 같이 쓰고 싶으면>
적용하고 싶은 html코드를 변수(보통 temp_html 이라고 씀.)에 정의한다. (쓰려는 html코드를 백틱 안에 기입함)
let temp_html = `<button>버튼이다</button> ` ` -> (백틱) 작은따옴표 아님
이후에 필요한곳에 정의된 변수(temp_html) 쓰면 html 쓰는 효과가 됨
이 백틱기호를 사용한 문자열을 자바스크립트 ES6에서는 템플릿 리터럴(template literal)이라고 부릅니다.템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Template literals - JavaScript | MDN
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문
developer.mozilla.org
ex) <<어떤 구역<div>에 무언가(button)을 추가하고싶다면,>>
1) 그 구역에 이름부여.
<div id="이구역"> ~~ </div>
2) 적용하고 싶은 `버튼 html 코드` 선언한다.
let temp_html = `<button>버튼이다</button> ` ` -> (백틱) 작은따옴표 아님
3) "이구역"에 선언한거 추가하는 j쿼리문 작성
$('#이구역').append(temp_html)
<변수 출력하기> 표현언어(Expression Language) EL
${ 설정해둔_변수 } '고정 값' 해도 출력이 되지만, 변수 출력시 활용성이 더 좋을듯
<이미지 바꾸기>
$("#부여한_이름").attr("src", 이미지URL) src 값을 url 주소의 이미지로 바꿔주어라
<택스트 바꾸기>
$("#부여한_이름").text("바꾸려는 텍스트") 큰따옴표 유의!
<로딩이 완료되면 자동 실행하기>
$(document).ready(function() {뭘_실행할지_명령}) window.onload = function () { } 와의 차이??
<문자/이미지 반복하기>
'반복할_거'.repeat(몇번_반복할지) -> 변수를 참조하는 변수로 사용 가능. let~~ 해서 쓰기