▶현재 시간 : 2022년 10월 14일 9시 47 P.M.
2주차 배우는 중..쉽지는 않지만 막상 해보면 엄청 어렵지는 않다.
왠지 익숙해지면 괜찮아 질 거 같은 느낌이 든다. 많이 익숙해 지기 위해서 강의 실습 따라 해봐야될 것 같다.
▶단축기 모음
- 새로고침
- F5
- 저장
- Windows: Ctrl + S
- macOS: command + S
- 전체선택
- Windows: Ctrl + A
- macOS: command + A
- 잘라내기
- Windows: Ctrl + X
- macOS: command + X
- 콘솔창 줄바꿈
- shift + enter
- 코드정렬
- Windows: Ctrl + Alt + L
- macOS: option + command + L
- 들여쓰기
- Tab
- 들여쓰기 취소 : Shift + Tab
- 주석
- Windows: Ctrl + /
- macOS: command + /
[2주차 수업 목표]
- Javascript 문법에 익숙해진다.
- jQuery로 간단한 HTML을 조작할 수 있다.
- Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
▶1) jQuery 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트(미리 작성된 Javascript 코드를 가져오는 것)"를 해야합니다!)
1. jQuery CDN 부분을 참고해서 임포트하기 : https://www.w3schools.com/jquery/jquery_get_started.as
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
2.<head> 와 </head> 사이에 아래를 넣기
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
3. id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키기.
- input 박스의 값을 가져와보기
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');
- div 보이기 / 숨기기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
- 태그 내 html 입력하기
- 카드가 붙는 div 에 id를 추가해주는 것이 핵심!
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
</div>
</div>- 카드를 넣어보기 : let temp_html = `` → backtick 으로 넣어야 합니다. 타자기 !표 옆에 있음!!
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>`;
$('#cards-box').append(temp_html);'Web development (2)' 카테고리의 다른 글
| 웹개발 2주차 (6) -JQuery+Ajax 연습 (0) | 2022.10.17 |
|---|---|
| 웹개발 2주차 (5) - Ajax (0) | 2022.10.17 |
| 웹개발 2주차 (4) - JSON, GET (0) | 2022.10.17 |
| 웹개발 2주차 (3) - jQuery + Javascript의 조합을 연습 (0) | 2022.10.17 |
| 웹개발 2주차 (2) - JQuery 연습 (0) | 2022.10.17 |
