[Week2] Web Study - JavaScript

웹 스터디 2주차 🖥️

1. 수업 소개

JS의 등장

사용자와 상호작용하는 웹사이트를 만들기 위해 등장
HTML로 만들어진 정적 웹사이트에 JS를 추가하여 사용자와 상호작용할 수 있도록 기능을 추가

2. 수업의 목적

HTML에서 JS 작동 로직

태그에 onclick 속성을 적용시킨 뒤, 해당 속성의 값으로 js의 링크를 부여

교훈

자바스크립트는 사용자와 상호작용하는 언어이다.
웹브라우저는 한 번 화면에 출력되면 자기 자신을 변경할 수 없다 -> 정적
자바스크립트는 HTML을 제어하는 언어이다.

3. HTML과 JS의 만남: script 태그

실습

HTML은 정적이기 때문에 1+1을 문자 그대로 출력하나, JS는 연산하여 그 결과를 출력할 수 있다.

4. HTML과 JS의 만남: 이벤트

이벤트: 웹브라우저 위에서 일어나는 일

onclick="alert()" // 클릭 했을 때 JS 실행
onchange="alert()" // 내용이 바뀌었을 때 JS 실행
onkeydown="alert()" // 키를 입력 했을 때 JS 실행

실습

5. HTML과 JS의 만남 (콘솔)

실습

6. 데이터타입 - 문자열과 숫자

자바스크립트에는 아래의 6가지 유형의 데이터타입과 객체가 존재한다.
1. Boolean
2. Null
3. Undefined
4. Number
5. String
6. Symbol
산술 연산자: 이항 연산자 중, 산술을 하는 +와 같은 경우의 연산자
데이터타입에 따라 결과가 달라지므로, 주의 필요
실습

7. 변수와 대입 연산자

x는 변수, =는 대입 연산자
- 대입 연산자의 좌항에는 변수만 위치할 수 있다.
- 변수 사용 시, 앞에 var 쓰기
실습

8. 웹브라우저 제어

웹브라우저 제어를 위해선 다음 2가지를 알아야 한다.

간단한 css 문법
제어하고자 하는 태그를 웹브라우저에 알리는 js 문법

9. CSS 기초 : style 속성

실습

10. CSS 기초 (style 태그)

실습

11. CSS 기초 : 선택자

실습

12. 제어할 태그 선택하기

document.querySelector('') // 특정 태그를 선택
document.querySelector('').style. // 특정 태그를 선택하여 css를 제어

실습

13. 프로그램, 프로그래밍, 프로그래머

프로그램: 프로그래밍한 내용에 따라 컴퓨터가 작동할 수 있도록한 작업 순서 프로그래밍: 시간 순서에 따라 여러 기능을 컴퓨터가 작동시킬 수 있도록 언어를 사용하여 구성하는 행위 프로그래머: 이를 구성하는 사람

14. 조건문 예고

조건문: 조건에 따라 다른 순서의 기능이 실행되도록하는 것

15. 비교 연산자와 불리언

boolean: True/False 단 두개로 이루어진 데이터타입

실습

16. 조건문

실습

17. 조건문의 활용

실습

18. 리펙토링 중복의 제거

리펙토링: 동작하는 기능은 그대로 두고 중복된 코드를 제거하여 코드의 가독성을 높이고 유지보수를 하기 편리하도록 코드를 개선하는 것

코드를 깔끔하게 하기 위해서는 중복제거가 매우 중요하다.

JS에서 중복을 제거하기 위해서는 아래의 전략을 사용하자.
1. JS를 적용한 태그 내에서 해당 태그를 지칭할 때는 this를 사용한다.
2. JS를 적용한 태그 밖에서 특정 태그를 지칭할 때는 변수 선언을 적극 사용하여 간결하게 한다.

실습

19. 반복문 예고

반복문: 특정 기능을 하는 코드를 반복적으로 실행되도록 하는 것

20. 배열

배열: 많은 수의 데이터에 대해 정교한 작업을 하기 위해 사용하는 공간

실습

21. 반복문

실습

22. 배열과 반복문

실습

23. 배열과 반복문의 활용

배열과 반복문을 적절히 사용하면 문서 내에 존재하는 모든 태그에 대해 특정 효과를 적용시킬 수 있다.
실습

24. 함수예고

함수: 코드를 잘 정리하여 담아두는 공간

25. 함수

반복문은 연속적으로 반복되지 않거나, 2개 이상의 요소를 선택해야 한다면 사용하기 몹시 어려워진다.
실습

26. 함수 : 매개변수와 인자

매개변수: 함수의 입력값을 담아두는 변수 인자: 함수의 입력값

실습

27. 함수 (리턴)

표현식: 특정 결과가 출력되는 모든 식을 n에 대한 표현식이라고 일컫는다.

JS에서 연산 우선 순위는 괄호가 없을 경우, 좌측에서 우측 순이다. 따라서, sumColorRed()는 좌측에 문자열이 있기 때문에 left와 right 사이의 +를 문자열을 더하는 것으로 연산한다.
- 이를 해결하기 위해서는 실습화면과 같이 return을 활용할 수 있다.
- 추가로, left+right에 괄호를 둘러 연산 우선순위를 높여줄 수도 있다.
실습