[스파르타코딩클럽] 웹개발 종합반 - 2주차 (2-1~2-7)

2주 차 때 배우게 될 

Javascript은 데이터를 받아 화면을 바꾸게 한다.

javascript를 배우면서, jQuery를 통해 쉽게 조작하는 방법을 배운다.

fetch를 통해 api를 다른 사이트로부터 받아온다.

 

웹사이트 표기의 실시간 반영을 할 수 있게 된다.

 

javascript란?

프로그래밍 언어들 중 브라우가 알아들을 수 있는 언어

표준에 따라 브라우저는 javascript를 이해할 수 있도록 설계되었다.

 

F12로 콘솔창을 켜 javascript코드를 실험해 볼 수 있다.

vscode로 작성하고, 콘솔창에서 실행하느 경우가 많다.

 

console.log()는 테스트용으로 많이 사용하고, 데이터의 흐름을 파악하기 위해서도 사용된다.

 

let 변수 = value를 통하여 변수 선언을 해줄 수 있다.

 

아 그리고 확장프로그램에서 open in browser을 반드시 설치해 주자.

그래야 파일을 우클릭했을때 브라우저로 열 수 있다.

 

자바스크립트의 역할은 크게

• 요소바꾸기
• 버튼을 눌렀을 때 요소 바꾸기 이 두 가지가 있다.

두 번째 부분이 바로 유저의 행동에 따라 바뀌게 된다는 점이 매우 중요하다.

 

javascript는 html 요소를 선택하고, addEventListener을 통하여 이벤트를 추가해 준다.

 

일단 html파일을 만들고 기본 형식을 불러오기 위해선! + enter을 치면 된다.

 

그다음, body 태그 내부에  <script> 태그를 추가해 주고 거기에 javascript 코드를 작성해 주면 된다.

 

위에서 서술했듯, let을 사용하여 변수를 선언할 수 있다. 다만 변수명을 지을 때, 띄어쓰기 대신 대문자 또는 _로 구분해 준다.

 

이후 javascript에서 자료형과 기초문법들을 배웠다.

사칙연산은 대부분 동일하고,

list의 선언에서는 그냥 let b_list = []해주면 된다.

i번째 요소를 출력하고 싶으면 console.log(b_list [i])를 해주면 되고, 새로운 원소를 추가해주고 싶으면 push를, 길이를 계산하고 싶으면. length를 사용해 주면 된다.

 

dictionary 역시 그냥 let b_dict = {}을 해주면 되고,

다른 프로그래밍 언어들처럼 b_dict [key] = value를 통하여 추가해 주면 된다.

 

이러한 list와 dictionary들을 서로 조합해서 사용이 가능하다.

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력 


new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
console.log(names[2]['name']) // 'john'을 출력

 

이러한 경우와 같이 다양한 정보들을 깔끔하게 정리하기 위해선 list, dictionary를 같이 사용해 주는 것이 매우 유용하다.

 

함수 선언은 다른 언어들과 유사하게 function name(value){}로 선언해 주면 된다.

 

document.getElementByID(). innerHTML = 사용하여 HTML 내부에 값을 변경해 줄 수 있다.