1. jQuery란? Javascript로 충분할까?
- 버튼의 색깔을 바꾸고 싶다면? div 박스를 하나 감추고 싶다면? 이런 것들을 쉽게 해주는 것이 바로 jQuery!
- jQuery가 할 수 있는 일은 엄청 많기에 외우지 않으며 필요할 때 구글링해서 쓰자👊
- HTML의 요소들을 조직하는 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
Javascript로도 모든 기능을 구현할 수는 있지만 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서 jQuery라는 라이브러리가 등장. jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억하자.(그렇기 때문에 쓰기 전에 '임포트'를 해야 함)
2. jQuery 사용하기
- jQuery Get Started
- head 태그 사이에 아래를 넣으면 끝!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼지요?
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.
3. jQuery 퀴즈 맞추기
- 연습 코딩
function q1() {
let input_q1 = $('#input-q1').val()
if(input_q1 = true){
alert(input_q1)
} else {
alert('입력하세요')
}
}- 정답 코딩
function q1() {
let input_q1 = $('#input-q1').val()
if(input_q1 == ''){
alert('입력하세요')
} else {
alert(input_q1)
}
}❗️처음에 정답 코딩처럼 써서 잘 작동했는데 아래 문제 풀다보니 동작하지 않음. 그래서 내가 잘 못 썼나 해서 위처럼 바꿔본건데 아닌 것 같다. 처음 생각이 맞았다!
- 연습 코딩
function q2() {
let input_q2 = $('#input-q2').val()
if (input_q2.includes("@")==true){
let result = input_q2.split('@')
let result2 = result[1].split['.']
alert(result2[0])
} else {
alert("이메일이 아닙니다!")
}
}- 정답 코딩(1)
function q2() {
let input_q2 = $('#input-q2').val()
if (input_q2.includes('@')==true){
alert(input_q2.split('@')[1].split('.')[0])
} else {
alert("이메일이 아닙니다!")
}
}❗️split로 나눠서 list 이용하는 원리는 알았는데 쭉 길게 쓰는게 어려워 보여서서 나눠서 써봤는데 작동 안 된다. 왜 그럴까?
- 정답 코딩(2)
function q2() {
let email = $('#input-q2').val();
if (email.includes('@')) {
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
alert('이메일이 아닙니다.');
}
}❗️정답코딩(2)랑 비교해 보니 나는 2번째 split에서 () 대신 []를 써서 오류가 났다. 그 부분 하나만 수정하니까 된다. 그리고 split 뒤에 [] 넣어서 바로 순서 지정할 수 있으니 참고!
- 연습 코딩
function q3() {
let input_q3 = $('#input-q3').val()
let temp_html = '<li>${input-q3}</li>'
&('#names-q3').append('temp_html')
}
function q3_remove() {
&('#names-q3').empty()
}- 정답 코딩
function q3() {
let input_q3 = $('#input-q3').val()
let temp_html = `<li>${input_q3}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}❗️위 아래를 살펴보니 함수 이름도 제대로 안 썼고(input_q3), append 할 때 따옴표도 추가 했고 수정할 부분이 많다. 그리고 정답 코딩을 써도 왜 작동이 안 되는건지는....잘 모르겠다. 3번째 문제를 주석 처리하면 1,2번도 잘 되는데 해제하면 다 같이 안 됨
<해결> 일단 '&' 대신 '$'로 변경해야 함. 기본적인 부분부터 틀렸음! 그리고 li 태그를 감싼게 따옴표('')가 아니라 자세히 보면 살짝 기울어져 있는데 백틱(backtick)이라고 한다. 이 부분을 백틱으로 해줘야 함
🔥맥에서 백틱 입력하기
맥에서 백틱을 입력하려고 하니까 원화표시(₩)만 입력된다면 키보드가 한글로 설정되어 있어서 그렇다. 영어로 바꾸면 백틱(`)이 잘 나올 거임. 만약 한글에서도 백틱을 입력하고 싶다면 option + ₩ 을 눌러보자!
☘️백틱 사용하기
원래 변수와 문자열을 함께 표현하기 위해서는 중간에 +로 이어주면서 따옴표 안에 띄어쓰기도 일일히 생각하면서 써야 했다.
const case2 = 24; //변수 선언
console.log("Hello, world! I'm " + case2 + "year's old") //변수와 문자열 함께 출력
// Hello, world! I'm 24year's old 출력
const case2 = 24; //변수 선언
console.log(`Hello, world! I'm ${case2} year's old`) //백틱 기호로 변수와 문자열 함께 출력
// Hello, world! I'm 24year's old 출력그러나 백틱이 생기면서 문자열 전체를 백틱로 감싸주고 변수는 (${}) 안에 입력해주면 문자열과 함께 바로 쓸 수 있다. 또한 띄어쓰기도 그대로 반영되기 때문에 사용하기에 간편하다.
