Javascript
JS의 탄생 배경
- Javascript 라는 언어는, 유저와 상호작용을 하기 위해 만들어진 언어이다.
- HTML 언어는, 화면에 한번 출력이 되는 순간 그 자체로는 변화할 수 없다.
Javascript와 HTML을 조합하여 ‘동적으로, 다이나믹하게’ 사용하는 것이다.
JS엔 무수히 많은 이벤트가 있지만, ‘기념할만한’ 10~20개 정도의 이벤트가 있다.
JS를 이용하여 제어하고자 하는 태그를 선택하는 방법!
style // style 이라는 태그를 선택하는 것
.style // style 이라는 클래스를 선택하는 것
#style // style 이라는 id를 선택하는 것우선순위 == id > 클래스 > 태그 이다. 그렇기 때문에 클래스로 크게 스타일을 주었다가
부분부분 id를 활용하여 변화를 줄 수 있다.
PROGRAM?
음악회의 경우, 시간에 따라 음악이 연주되는 순서가 있는데 이를 프로그램이라고 하고
이를 구성하는 것을 프로그래밍, 구성하는 사람을 프로그래머 라고 하였음
PROGRAM , PROGRAMMING , PROGRAMER ... 비단 소프트웨어 뿐만 아니고
다양한 분야에서 쓰이고 있는 말이다.
JS : 프로그래밍 언어
HTML : 프로그래밍 언어라고는 하지 않음
HTML은 시간에 순서에 따라 무언가 보여주는 것이 아닌, 정적인 형식이고
JS는 사용자와 상호작용하며 순서에 따라 작동하기 때문이다.
반복문
JS의 다양한 기능 중, ‘배열 (array)’ 과 ‘반복문 (Loop)’ 이 있다.
이 둘을 조합하여 강력한 기능을 구현해 낼 수 있다.
함수의 기본
function name()function name() 에서 ‘() 괄호’의 의미는 무엇일까?
함수의 기본적인 문법이다. name만 작성하였을 땐, 이것이 무엇인지 인식하지 못한다
하지만 name() 이라고 작성하므로써, 이것이 함수이구나 라고 인식될 수 있다.
위와 같이 자판기를 예로 들어보자.
자판기에서 음료수를 구입할때도
수학적인 ‘입력 (다양한 음료 중 내가 선택하는 것)’ 과 ‘출력 (선택한 음료가 나옴)’ 이 있다.
💡 Parameter = 매개변수 = 인자Argument = 인자
Return = 출력
코드에서 예를 들어 보자.
만약 숫자를 더하는 기능이 필요할때,
function onePlusOne() {
document.write(2 + 3 + '<br>'); // 결과값 5 출력
document.write(3 + 4 + '<br>'); // 결과값 7 출력
}위의 경우처럼, 일일히 입력하는 방법이 있다. (
tag는 출력시 띄어쓰기를 위함으로 무시)
한편, 함수의 매개변수 (parameter) 를 이용하여
function sum(left, right) {
document.write(left + right + '<br>')
}
sum(2, 3); // 결과값 5 출력
sum(3, 4); // 결과값 7 출력위와 같이 작성하여 활용 할 수 있다.
이때 매개변수는 각각 left와 right가 되며,
추후 함수를 불러내어 각 매개변수에 해당하는 2,3,4 등의 인자 (argument)를 입력하여 활용 할 수 있다.
function sum2(left, right) {
return left + right;
}
document.write(sum2(2, 3) + '<br>');; // case a
document.write('<div style="color:red">' + sum2(2, 3) + '</div>'); // case b
document.write('<div style="font-size:3rem">' + sum2(2, 3) + '</div>'); // case c또한, 위와 같이
계산이라고 하는 sum2라는 기능을 구현하고, 출력 (return) 을 사용하여
a/b/c 각 case별의 다양한 맥락에서 활용할 수 있고, 이것은 return의 중요한 기능이다
