🔖01. Javascript 복습
jQuery를 이용해 Javascript로 HTML을 쉽게 제어
Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보기
🔎짝/홀수 onclick 함수
<head>
<script>
let count = 0;
function hey(){
count++;
if(count % 2 == 0)
alert('짝수입니다')
else{
alert('홀수입니다')
}
}
</script>
</head>
<body>
<div class="mytitle">
<button onclick="hey()">영화 기록하기🔥</button>
</div>
</body>🔎짝수
2로 나눴을 때, 나머지가 0이면 짝수
count % 2 == 0
🔎홀수
2로 나눴을 때, 나머지가 1이면 짝수
count % 2 == 1🔖02. JQuery
🔎JQuery란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
객관적이고 짧음.
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
🔎JQuery Import
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
🔎이름표 붙이기
JQuery에서는 id로 이름을 붙임!
CSS에 class와 동일한 의미
🔎input 박스의 값을 입력해보기
$('#id').val('문자열')
🔎input 박스의 값을 가져와 보기
$('#id').val()
🔎div 보이기
$('#id').show()🔎div 숨기기
$('#id').hide()
🔎태그 내 html 입력하기
let temp_html = `html`
$('#id').append(temp_html)
🔖04. 포스팅박스 열기/닫기
🔎head
alert로 버튼 누르면 알람 뜨는지 확인 후, jQuery 적용
postcard는 처음에 안보이게 설정하기 위해 display : none 으로 스타일태그 변경!
<script>
function open_box(){
// alert('박스 열기')
$('#post-box').show()
}
function close_box(){
// alert('박스 닫기')
$('#post-box').hide()
}
</script>
<style>
.mypost{
display: none;
}
</style>
🔎body
원하는 버튼에 함수 주기
<button onclick="open_box()">영화 기록하기🔥</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>☀️ 느낀점
jQuery 코드가 짧고 간단해서 편하다. 다만, 자꾸 id 앞에 #을 입력해야하는걸 깜박해서 버벅거린다. 이 점을 유의해야 겠다.
코딩은 생각한 코드가 구현되면 너무 재미있는 것 같다. 더욱 실력을 키워 구현하고 싶은 웹사이트를 만들어보고 싶다.
'풀스택 개발일지' 카테고리의 다른 글
| [웹개발 종합반 2주차] Ajax 연습하기 (0) | 2022.10.21 |
|---|---|
| [웹개발 종합반 2주차] JQuery 연습하기 (0) | 2022.10.21 |
| [웹개발 종합반 1주차] 1주차 숙제 (0) | 2022.10.20 |
| [웹개발 종합반 1주차] Javascript (0) | 2022.10.20 |
| [웹개발 종합반 1주차] CSS 응용 (0) | 2022.10.19 |
댓글