10/20 알고보면 쉬운 jQuery
10/20 오늘은 jQuery가 시작되는날이다
jQ 는 JS의 긴코드를 사용하기 편하게 미리 지정을해놓고
라이브러리를 끌어다 쓰는 용도라고 보면된다
JQ를 사용할때에는 $(`#`) 이 기본적으로 붙고 아래에는
if문이나 for문을 이용하여 조금더 다체로운 동작이가능하다
중요!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
구글 jQuery 폼을 넣지않으면 jQuery는 동작하지않는다 꼭빼먹지말고 넣어주자
먼저 input 박스의 값을 가져오는방법을 알아보자
url의 값을 가져올려면 url에있는 요소를 지정해줘야한다
css에서는 class로 지정했던것을 JQ에서는 id로 지정해준다
functon open_box(){
$(`#postbox`).show();
}
function으로 opne_box라는 함수를 지정해주고
그안에는 html로 지저한 post_box를 .show()JQ에서 보이게하는기능
을 실행하게된다
postbox는 html상에서 id로 지정을해주어야하며
script안에서는 백틱``으로 감싸줘서 사용해야한다
보여주는건 .show() 라면 숨기는기능은 .hide()이다
조금더 심도있게 알아보자
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
위문제를풀어보자 id값은 input-q1 이고 버튼에지정된 함수는q1 이다
입력된값을 얼럿으로 보내고 입력이되지않았다면 얼럿으로 입력하라고 를 출력하자
function q1 (){ alert(1); }
먼저 q1에 함수가 잘들어가는지확인
function q1 (){ // onclick으로 지정해준 q1에 함수를 지정한다
let a = $(`#input-q1`).val(); //id값 a = inupt으로 들어오는값이다
if( a == ''){ //만약에 a에 입력되는값이없으면
alert("입력해야지!") //입력해야지!를 얼럿으로표기
} else { //그렇지않다면
alert(a); //a에 입력된값을 표기!
}
}
이런식으로 해석이되겠다 조금더 응용해서
다른 문제를 한개더 풀어보자
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
function q2() { // onclick으로 지정해준 q2함수를 지정한다
let mail = $(`#input-q2`).val(); // id값 mail =input으로 들어오는 값이다
if (mail.includes('@')){ // mail 로들어온 input값안에 .includes로 '@' 가 들어있는지검사
let dot = mail.split('@')[1]; // dot = 메일에서 .split('@') 으로 분리된부분(12123)(gmail.com)중 [1]번을선택
let domain = dot.split('.')[0]; // domain = dot으로 선언된 gmail.com 에서 .split('.')으로 분리된(gmail)(com)중 [0]번을선택
alert(domain); // 얼럿창으로 (domain) 을 출력
} else { // 그렇지않다면
alert("이메일이아니야!"); // 얼럿창으로 ("이메일이아니야!") 출력
}
가되겠다 앞서배운 JS내용을 조금이해했더라면 처음푸는데 시간은걸리겠지만
못풀정도의 문제는 아닌거같았다
내일은 ajax를 다룬다 실제로 계속 업데이트 되는 정보를
실시간으로 가져오는것을 배워볼예정이다
그럼 오늘의 포스팅은 여기서 마치겠다