티스토리 뷰
◎ JQuery
-웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집
-장점
① 코드의 가독성이 좋다.
② 자바스크립트를 모두 알지않아도 웹 사이트 제작을 용이하게 해준다.
● 사용방법
① JQuery 사용을 선언한다 → ② 이름표를 붙인다 → ③ 이름을 가리키고, 원하는 동작을 입력한다
① 사용 선언하기
<head>안에 CDN 코드를 가져와 붙여준다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
② 이름표 붙여주기
실행하고자 하는 위치의 코드에 id값을 준다. (css의 class와 같다)
③ 이름표를 불러주고, 원하는 동작 말하기
<script>
$('#지칭할 id값').원하는 동작;
</script>원하는 동작은 외우지 않고, "구글링"하면서 찾아가기
● JQuery 맛보기
(뼈대코드는 코드스니펫을 사용했다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>띵동코딩-제이쿼리 연습</title>
<style>
.wrap{
margin:auto;
}
.peopleInSeoul{
margin-top:20px
}
</style>
<script>
function addPerson() {
alert('안녕!');
}
</script>
</head>
<body>
<div>
<div class="wrap">
<input id="name" type="text" placeholder="이름을 입력해 주세요">
</div>
<button onclick="addPerson()">입력</button>
<div class="peopleInSeoul">입력한 이름</div>
<ul id="names">
<li>홍길동</li>
</ul>
</div>
</body>
</html>(1) 값 받아서 띄우기
입력칸에 값을 넣고 버튼을 누르면 그 값이 메세지창으로 띄워지게 하자.
코드를 살펴보면 버튼에 동작이 걸려있고 버튼을 누르면 메세지창이 뜨게 입력되있다.
여기서 입력된 값을 가져오려면?
<input>태그의 id값을 가져와 값을 가져오는 동작인 (.val())을 입력해주자.
<script>
function addPerson() {
let name = $('#name').val();
alert(name);
}
</script>
(2) 숨기기 / 보이기
숨기는(없애는) 동작은 .hide()
보이게하는 동작은 .show()
먼저 페이지에 떠있는 '홍길동'을 숨겨보자.
콘솔창에 $('#names').hide()를 입력하면 없어지고, 다시 $('#names').show()를 입력하면 나타난다.
(3) html붙이기
입력창에 입력한 값을 페이지의 '홍길동'아래에 붙여보자.
먼저 값을 받아올 변수(temp_html)를 설정한다.(실제html이 아닌 변수임)
받을 값은 ``(백틱) 안에 들어오는데, 안에는 붙이고자 하는 html처럼 생긴 문자열을 가지고온다.
let temp_html = `<li>홍길동</li>`;
$('#names').append(temp_html)붙일 위치의 id값을 가져와 붙여주면 된다.
여기서 입력받은 값을 붙여지게 하려면?
입력값을 받아서 띄우는 변수를 세운 후에 ``안에 변수를 넣어주면 된다.
function addPerson() {
let name = $('#name').val()
let temp_html = `<li>${name}</li>`;
$('#names').append(temp_html)
}
이번엔 로그인페이지에서 연습해보자.
로그인 페이지는 지난 시간 만들어본 코드를 활용했다.
(2022.09.29 - [코딩/띵동코딩] - 띵동코딩 5주차 - 스스로 해보기)
(1) 하단의 이메일 박스를 안보이도록 숨긴후 '이메일로 시작하기'를 누르면 나오게 하기
먼저 css설정으로 안보이게 해준다.
.email {
display: none;
}이제 동작을 실행시킬 <span>에 동작을 설정하자.
클릭을 하면 창이 나오게해야하므로 'onclick="함수"' 를 입력한다.
<span onclick="openEmail()">이메일로 시작하기</span>이제 자바스크립트를 입력하자.
동작을 행하는 함수를 입력해야하는데 우선 연결이 되있는지 알아보기 위해 테스트를 해보자.
<script>
function openEmail() {
alert('안녕')
}
</script>
연결이 잘 되었다.
그럼 이제 동작을 입력하자.
클릭이 되면 이메일박스가 나타나는 동작이 행해져야하기 때문에
이메일박스의 내용물이 묶여있는 <div>에 id값을 넣어준다.
이제 함수 안에 동작을 넣어준다. (보여주는 동작은 .show() )
function openEmail() {
$('#emailBox').show()
}해당 글자를 누르면 이메일박스가 나타난다.
(2) 입력창 값 가져오기
이메일 입력 창에 값을 입력하고 콘솔 창으로 그 값을 가져와보자.
우선 입력창인 <input>에 id값을 준다.
<input id="emailLogin" type="text" placeholder="이메일 주소를 입력해주세요">이제 페이지에 가서 이메일을 입력 후 콘솔창으로 가져오자.
값을 가져오려면?
.val()을 사용한다.
반대로 콘솔창에서 값을 입력하면 입력창에 띄울수 있다.
(3) 버튼 붙이기
박스의 하단에 로그인하기 버튼을 붙여보자.
html가져오기 방법을 사용하면 간단하다.
let temp_html = `<button>로그인하기</button>`;코드를 입력한 후 콘솔창에 가서 버튼을 붙일 위치에 temp_html을 붙여보자.
입력을 할 때마다 버튼이 하나씩 아래에 붙는다.
<Javascript와 함께 연습하기>
1) 이메일을 올바르게 입력했는지 알아보기
- 입력란이 비워져있으면?
→ '이메일을 입력해주세요' 메세지창 뜨기
- 이메일 형식이 아니라면?
→ '이메일 형식이 아닙니다' 메세지창 뜨기
.
.
먼저 입력창에 값을 입력한 후 버튼을 누르면 동작이 실행되어야 하기 때문에
버튼에 동작을 달아준다.
<button onclick="login()">로그인하기</button>javascript를 작성하자.
먼저, 이메일 입력 창에 들어오는 값을 가져와야한다.
function login() {
let email = $('emailLogin').val();
}입력창에 값이 있는지 아닌지를 확인하는 함수를 만들어보자.
입력창에 값이 없다면? email == ' '(공백)을 이용한다.
function login() {
let email = $('#emailLogin').val()
if (email == '') {
alert('이메일을 입력해주세요')
} else {
alert('이메일인지 판단해보자..')
}
}
이제 입력된 값이 이메일인지 아닌지 판단해보자.
이메일 판단하기는 '@'의 유무로 판단한다.
function login() {
let email = $('#emailLogin').val()
if (email == '') {
alert('이메일을 입력해주세요')
} else {
if (email.includes('@') == true) {
alert('로그인을 시도합니다')
} else {
alert('이메일 형식이 아닙니다')
}
}
}
if문 안의 if문을 활용하자!
◎구글링으로 문법을 배워보자
문법을 외우려하지 말고 필요한 문법을 구글링으로 가져오자.
1) 텍스트 바꾸기
구글 검색창에 'jquery 텍스트 바꾸기'이라고 검색해보자.
검색 결과 중 페이지를 골라 들어가면 텍스트 변경에 대한 여러 문법이 나온다.
(아래 페이지는 예시임)
https://www.thewordcracker.com/jquery-examples/change-content-using-jquery/
jQuery를 사용하여 텍스트 변경하기 - 워드프레스 정보꾸러미
이 글에서는 CSS를 사용하여 텍스트를 다른 문구로 바꾸는 방법을 살펴보았습니다. CSS 대신 jQuery를 사용하면 보다 수월하게 텍스트를 원하는 대로 바꿀 수 있습니다. jQuery를 사용하여 텍스트
www.thewordcracker.com
위의 블로그에서 나온 .text(' ')로 텍스트를 변경해보자.
이메일 형식이 맞다면 버튼의 텍스트가 '로그인 중입니다..'로 바뀌도록 한다.
우선 버튼에 id값을 주고 동작을 넣어준다.
function login() {
let email = $('#emailLogin').val()
if (email == '') {
alert('이메일을 입력해주세요')
} else {
if (email.includes('@') == true) {
$('#btnLogin').text('로그인 중입니다..')
} else {
alert('이메일 형식이 아닙니다')
}
}
}
2) 색 바꾸기
구글링을 통해 색 바꾸기 동작을 하는 법을 알아보자.
.css('background-color', '색상') ← 배경색 바꾸기
.css('color', '색상') ← 글자색 바꾸기
위 문법을 보면 알 수 있듯이 .css('속성', '변경할 값')의 형식으로 css요소를 바꿀 수 있다.
이번엔 이메일 입력시 버튼의 배경색을 회색으로 바꾸어보자
if (email.includes('@') == true) {
$('#btnLogin').text('로그인 중입니다..')
$('#btnLogin').css('background-color', 'gray')
} else {
alert('이메일 형식이 아닙니다')
}
3) 로그인 버튼을 누르면 입력창 사라지게 하기
위에도 나왔지만, 숨기는 동작은 .hide를 입력한다.
$('#emailLogin').hide();
'코딩 > 띵동코딩' 카테고리의 다른 글
| 띵동코딩 12주차 - 통신하기(fetch) (0) | 2022.10.01 |
|---|---|
| 띵동코딩 5주차 - 스스로 해보기 (0) | 2022.09.29 |
| 띵동코딩 10주차 - Javascript (2) | 2022.09.29 |
| 띵동코딩 9주차 - Javascript (0) | 2022.09.27 |
| 띵동코딩 8주차 - 부트스트랩 (0) | 2022.09.27 |