🏃♀목표🏃♀
항해99 7기 시작전 최종 테스트를 앞두고 항해에서 제공하는 강의 2회 완강하기!
총 5주치 분량으로 기초적인 html, css부터 javscript, 파이썬 등의 강의를 제공한다.
이거 다 듣는다고 js부터 파이썬까지 마스터 할 수 있는건 절.대. 아니고,
"우리 앞으로 이런거 할거니까~ 이거 다 할 줄 알아야해 ~?🤡" 정도의 느낌..?
별도로 제공해주는 js, 파이썬, JAVA 문법 강의를 달달 외워야할거같다.!
[1주차 주요 내용]
javascript와 jqery 함께 사용해보기
1번)
function q1() {
let txt = $('#input-q1').val();
if( txt == '') {
alert ('빈칸입니다!')
} else {
alert(txt)
}
}-val() : 텍스트 등 html에 입력된 값을 가져온다
2번)
function q2() {
let txt = $('#input-q2').val()
if (txt.includes('@') == true) {
alert(txt.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다')
}
}
-includes('') : 특정 문자열을 포함하는지 확인해줌
-split : 문자열을 특정 구분자로 잘라줌
위 예제에선 split('.')[0] 로 되어있으니 '.'기준으로 나오는 문자의 0번째가 보여진다!
3번)
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}-백틱(``)을 활용하여 원하는 정보를 append로 넣고 html 태그 안에 바로 ${}함수 정보 넣을 수 있게 해줌!
[2주차 주요 내용]
ajax를 통해 api 호출하기
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function(response){
let temp = response['temp']
$('#temp').text(temp)
}
})
});API 클라이언트 → 서버 : GET 요청방식 이해하기
*GET : 데이터 조회(Read)를 요청할때 ! (대부분 제일 많이 쓰임)
*POST : 데이터 생성(Create), 변경(Update), 삭제(Delet) 요청할 때!(회원가입, 탈퇴, 비번수정 등)
AJAX코드 이해하기
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둘 것!)
- success : 성공하면 (consol.log로 확인)
- response 값에 서버 결과 값 담아서 javascript 함수 실행
실습 중에 서울시 따릉이 API불러와서 페이지에 띄우는게 있었는데
업데이트 하는 도중 실시간으로 누군가 빌려가서 차감되는게 신기했다 ㅋㅋㅋㅋ....
(나도 따릉이나 타고 싶다.....)
부트캠프한다는 소식을 들은 친구의 따뜻한 응원으로 오늘 벨로그 마무리🔥
