목표
1. Javascript의 사용방식에 대해 이해하고 문법에 익숙해진다
2. JQuery로 HTML을 조작할 수 있다
3. Fetch로 서버 API에 데이터를 주고, 결과를 받아온다
Javascript
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성한다.
자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기
- 함수를 만들어주기
function hey(){
alert('안녕!');
}- 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불림
<button onclick="hey()">영화 기록하기</button>즉
function hey()라는 규칙으로 hey라는 함수를 만들었고, alert(’안녕’)이라는 작업을 원할 때마다 반복적으로 수행Javascript 기초 문법(1)
1. console.log()
띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구
콘솔 창에 괄호 안의 값을 출력해준다.
2. 변수&기본연산
- 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것"
(2를 a라는 변수에 넣는다) - let으로 변수를 선언
let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!
// 변수는 값을 저장하는 박스예요.
// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.- 사칙연산, 그리고 문자열 더하기가 기본적으로 가능
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국3. 리스트&딕셔너리
- 리스트 : 순서를 지켜서 가지고 있는 형태
리스트에 들어있는 첫 번째 값은 [0]으로 불러옴
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4- 딕셔너리 : 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27- 리스트와 딕셔너리의 조합
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15// 기본 함수들 //
'나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!Javascript 기초 문법(2)
1. forEach 반복문
- forEach ( 배열 메서드 )
forEach 반복문은 오직 배열에서만 사용이 가능하다. forEach의 인자는 callback함수가 들어오고 callback 함수의 매개변수는 index, item이 있다. 둘중 하나만 사용해도 무관하다.
let arr = [ 10, 20, 30 ];
arr.forEach(function(item){
console.log(item);
});
10
20
302. if/else 조건문
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}- 반복문+조건문 합치기
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})JQuery
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리
- jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드다.
- 사용하기 전에 임포트를 해야한다
https://www.w3schools.com/jquery/jquery_get_started.asp
임포트 하는 법 : <head> 와 </head> 사이에 아래를 넣으면 끝
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>1. Jacascript 와 JQuery 비교
Javascript
document.getElementById("element").style.display = "none";JQuery
$('#element').hide();2. JQuery 연습 / 리스트 - 딕셔너리 자료형
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<script>
function checkResult(){
let a = ['사과','배','감','귤']
$('#q1').text(a[1])
let b = {'name':'영수','age':30}
$('#q2').text(b['name'])
let c = [
{'name':'영수','age':30},
{'name':'철수','age':35}
]
$('#q3').text(c[1]['age'])
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1">테스트</div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2">테스트</div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3">테스트</div>
</div>
</body>
</html>3. JQuery 의 .append() / .empty()
.append()
선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다
.empty()
현재 엘리먼트 하위 자식들을 다 삭제한다
Fetch
JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})JQuery, Fetch, 서버-클라이언트 통신 다시 공부하기
