Javascript
2주차 수업 목표
- Javascript의 사용 방식에 대해 이해하고 문법에 익숙해지기
- JQuery로 HTML 조작하기
- Fetch로 서버 API에 데이터 전송하고 결과 받아오기
이번주차 배울 내용
1 ) 움직이는 웹 만들기 (html은 뼈대, css는 꾸미기, javascript는 움직이기)
클릭해서 사진을 넘어가게 한다거나, 스크롤 시 배경 바꾸기 등등
2 ) Javascript, jQuery, Fetch
Javascript는 웹을 움직이게 하는 코드
자바스크립트로 코드 작성시 복잡하기 때문에 제이쿼리 사용해서 코드 작성할 예정
Fetch는 짧은 코드로 요청을 보내고 받아올 수 있음
자바스크립트란 ?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
- < head> ~ < /head> 안에 < script> ~ < /script> 로 공간을 만들어 작성 (script 태그 내에 작성)
-형태
function name(){
}함수 만들어서 alert 창 띄우기
<script>
function btn() {
alert('Hi')
}
</script>
</head>
<body>
<div class="title">
<h1>내가 애정하는 영화들</h1>
<button onclick="btn()">영화 기록하기</button>
</div>1주차에 완성했던 코드에서 head 안에 script 태그 생성해서 btn()이라는 함수를 만들어줬다. 이 함수를 body 부분의 button을 클릭하면 Hi 라는 알림창이 뜨게 만든 코드다. 버튼을 누르면 아래 사진처럼 Hi라는 alert가 뜬다.
console 창에서 확인하기
console.log('Hola todos');btn 함수 대신 console.log();를 작성했다. (버튼을 눌러야만 볼 수 있는게 넘 귀찮아서 첨부터 지워버림 ㅎ;) F12 키를 누르거나 페이지에서 오른쪽 마우스클릭, 검사(영어버전은 inspect)를 클릭하면 개발자도구 창이 나온다. 거기서 console 창 선택해서 보면 된다.
배열
let a = ['apple', 'watermelon', 'strawberry'];
console.log(a[0]);apple을 출력하고 싶다. 프로그램에선 순서를 셀 때 1이 아니라 0부터 센다는 거 잊지 말기. a 라는 변수 안에 [ ] 배열을 넣어 'apple', 'watermelon', 'strawberry' 라는 값들을 넣어줬다. 배열 내의 값을 부를 때는 배열이름[순서] 로 불러주면 된다.
console로 불러줬기 때문에 console 창에서 apple을 확인할 수 있다.
a 배열안의 요소의 개수가 궁금하다면 console.log(a.length);
dictionary
key-value 기억하기⭐
let student = {'name' : 'Chloe', 'age' : 27};
console.log(student['name']);
student['height']=164;
console.log(student);
let student로 딕셔너리 선언해줌.(중괄호 사용) 변수 이름은 student라고 설정.
student['name'] // 'Chloe 출력'
student['age'] // 27 출력
student['height']=164 //딕셔너리에 키:밸류 넣기
let student = [
{ 'name' : "Chloe", 'age' : 27 },
{ 'name' : "Chris", 'age' : 25 },
{ 'name' : "Zoe", 'age' : 28 }
];
console.log(student[0]['name']);
console.log(student[1]['age']);이렇게 배열 안에 여러개의 딕셔너리 작성 가능. 불러올 때 순서 확인 잘 하고 키값 잘 불러올 것.
딕셔너리를 활용한다면 정보를 묶어놓을 수 있다. 예를 들어서
1.변수만 사용한다면
let customer_1_name = '김태형';
let customer_1_phone = '010-1995-1230';
let customer_2_name = '박지민';
let customer_2_phone = '010-1995-1013';이렇게 변수를 선언해줘야 하기 때문에 나중에 값이 많아진다면 알아보기가 힘들다.
- 딕셔너리를 활용한다면
let customer_1 = {'name': '김태형', 'phone': '010-1995-1230'};
let customer_2 = {'name': '박지민', 'phone': '010-1995-1013'};이렇게 정보를 묶을 수 있다.
- 순서를 나타내기 위해 리스트를 사용하면
let customer = [
{'name': '김태형', 'phone': '010-1995-1230'},
{'name': '박지민', 'phone': '010-1995-1013'}
]보기에도 깔끔하고, 다루기 쉽고 고객이 한 명 더 생기더라도 .push 함수 이용하여 간단하게 수정할 수 있다.
