자바스크립트
클릭함수
--> 한번 클릭하면 홀수, 두번째 클릭하면 짝수
--> 함수(function) 안에 count 두개가 있으면 축적이 안됨
( = 변수를 함수 안에서 선언해서 사용하면 그 함수가 끝나면서 자동으로 사라짐)
그렇기 때문에 함수 밖에 선언해야 함( = 전역변수)
<script>
let count = 1; ---------------> 전역변수
function hey( ) {
let count = 1;
if(count % 2 == 0 ) {
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
count += 1; ------------> count = count + 1 와 동일
}
</script>
JQuery : 미리 작성된 자바스크립트 코드
--> 맨 위에 항상 임포트하고 jQ 사용하기!
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head>
--> id 지정하기★
1) input 박스 값 가져오기 & 입력하기
--> $ ( ' #id ' ) : 지칭
--> .val ( ' ~~ ' ) : 명령, input 박스에서만 쓰임
> $ ( ' #article-url ' ).val ( ) ;
< ' 세종대왕 '
> $ ( ' #article-url ' ).val ( ' 장영실 ' ) ;
< S.fn.init [ input#article-url.form-control ] ------> input 박스 아티클 URL 에 장영실 적힘
2) div 보이기/ 숨기기
> $( '#post-box' ).hide()
< S.fn.init [div#post-box.posting-box] --------> post-box 가 아예 사라짐
> $( '#post-box' ).show()
< S.fn.init [div#post-box.posting-box] ---------> post-box 가 다시 생김
3) 디스플레이 속성(css 값) 가져오기
> $( '#post-box' ).css( ' width ' )
< ' 500px ' ---------------------> 현재 width가 500px로 설정되어있다
> $( '#post-box' ).css('width', '700px') --------> width 700px로 변경을 명령
< S.fn.init [div#post-box.posting-box]
> $( '#post-box' ).css('display') ------> display가 block로 설정되어있음
< 'block'
> $( '#post-box' ).hide() -------> 숨기기
< S.fn.init [div#post-box.posting-box]
> $( '#post-box' ).css('display') ---------> display가 있는데 안보임(숨겨짐)
< 'none'
4) 태그 내 텍스트 입력하기
> $( ' #btn-posting-box ' ).text ( ' 랄라 ' )
< S.fn.init [a#btn-posting-box.btn.btn-primary.btn-lg]
5) 태그 내 html 입력하기
--> ` (백틱) : HTML 처럼 생긴 문자열,
> let temp_html = `<button>나는 버튼이다</button>` -------> 문자열
> let temp_html = ` <div class="card"> <img class="card-img-top" src="이미지 주소 복사" alt="Card image cap"> <div class="card-body"> <a href="http://naver.com/" class="card-title">기사 제목</a> <p class="card-text">기사의 요약 내 용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p> <p class="card-text comment"> 코멘트가 들어갑니다.</p> </div> </div>`
> $( ' #cards-box ' ).append( temp_html ) -------------> 카드 생성
< S.fn.init [div#cards-box.card-columns]
나홀로 링크 메모장 JQuery 설정하기
1) 버튼 반응 확인
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
function openclose() {
alert('잘된다!')
}
******************** let 구문 적고 중괄호{ }가 아니라 땀(;) 적어야함 ********************
2) display의 status 확인 --> 콘솔창에 block 뜸
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
function openclose() {
let status = $('#post-box').css('display');
console.log(status);
}
3) input-box 열고 닫기 완성본
<!-- body 내용 -->
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
<!-- script 내용 -->
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide( );
$('#btn-posting-box').text('포스팅박스 열기');
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
<!-- style 내용 -->
.posting-box {
dispaly : none -----> 숨기기(처음부터 나타나지 않게!!)
}
퀴즈
<script>
function q1() {
let value = $('#input-q1').val();
if(value == '') {
alert('입력하세요!')
} else {
alert(value)
}
}
function q2() {
let email = $('#input-q2').val();
if(email.includes('@')) {
alert(email.split('@')[1].split('.')[0]);
} else {
alert('이메일이 아닙니다.');
}
}
function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}
</script>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<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>
<hr />
<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>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
html 이나 css 은 오류 걱정 안했는데 자바스크립트는 오류가 너무 많이 생긴다ㅠㅠ
문장마다 ; or { } 뭘 써야할지 아직 파악이 덜 된거같다......
내일 다시 연습해보는걸로!!
'Python > Web_log' 카테고리의 다른 글
| 22.06.04 (0) | 2022.06.23 |
|---|---|
| 22.06.22(수) (0) | 2022.06.23 |
| 22.06.20(월) (0) | 2022.06.21 |
| 22.06.16(목) (0) | 2022.06.17 |
| 22.06.15(수) (0) | 2022.06.15 |
