jinbokk·2022년 5월 7일
0

JS

목록 보기
1/2
post-thumbnail

Javascript

JS의 탄생 배경

  1. Javascript 라는 언어는, 유저와 상호작용을 하기 위해 만들어진 언어이다.
  2. 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의 중요한 기능이다

0개의 댓글